diff --git a/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.css b/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.css
index 12f940646..14f8a1562 100644
--- a/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.css
+++ b/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.css
@@ -7,4 +7,9 @@
.add-cus-tool-gap {
margin-bottom: 16px;
-}
\ No newline at end of file
+}
+
+.emoji-modal .ant-modal-content {
+ padding: 0;
+ width: fit-content;
+ }
diff --git a/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.jsx b/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.jsx
index 01b8c462d..509559755 100644
--- a/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.jsx
+++ b/frontend/src/components/custom-tools/add-custom-tool-form-modal/AddCustomToolFormModal.jsx
@@ -1,161 +1,181 @@
-import { Input, Modal, Space, Typography } from "antd";
+import { useState } from "react";
+import { Form, Input, Modal, Popover, Button } from "antd";
import PropTypes from "prop-types";
+import EmojiPicker from "emoji-picker-react";
-import { CustomButton } from "../../widgets/custom-button/CustomButton";
-import SpaceWrapper from "../../widgets/space-wrapper/SpaceWrapper";
+import {
+ handleException,
+ getBackendErrorDetail,
+} from "../../../helpers/GetStaticData";
+import { useAlertStore } from "../../../store/alert-store";
import "./AddCustomToolFormModal.css";
-import { useEffect, useState } from "react";
-
-import { handleException } from "../../../helpers/GetStaticData";
-import { useAlertStore } from "../../../store/alert-store";
+const defaultFromDetails = {
+ tool_name: "",
+ author: "",
+ description: "",
+ icon: "",
+};
function AddCustomToolFormModal({
open,
setOpen,
editItem,
- setEditItem,
+ isEdit,
handleAddNewTool,
}) {
- const [title, setTitle] = useState("");
- const [toolName, setToolName] = useState("");
- const [author, setAuthor] = useState("");
- const [description, setDescription] = useState("");
- const [icon, setIcon] = useState("");
- const [isEdit, setIsEdit] = useState(false);
+ const [form] = Form.useForm();
+ const [isLoading, setIsLoading] = useState(false);
const { setAlertDetails } = useAlertStore();
+ const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+ const [formDetails, setFormDetails] = useState(
+ isEdit ? { ...editItem } : { ...defaultFromDetails }
+ );
+ const [icon, setIcon] = useState(isEdit ? formDetails.icon : "");
+ const [backendErrors, setBackendErrors] = useState(null);
- useEffect(() => {
- setIsEdit(editItem && Object.keys(editItem)?.length > 0);
- }, [editItem]);
-
- useEffect(() => {
- if (!open) {
- clearForm();
- }
- }, [open]);
+ const updateIcon = (emoji) => {
+ setIcon(emoji);
+ setFormDetails((prevState) => ({
+ ...prevState,
+ icon: emoji,
+ }));
+ };
- useEffect(() => {
- if (isEdit) {
- setTitle("Edit Tool Information");
- setToolName(editItem?.tool_name || "");
- setAuthor(editItem?.author || "");
- setDescription(editItem?.description || "");
- setIcon(editItem?.icon || "");
- return;
- }
- setTitle("Add Tool Information");
- }, [isEdit]);
+ const handleInputChange = (changedValues, allValues) => {
+ setFormDetails({ ...formDetails, ...allValues });
+ const changedFieldName = Object.keys(changedValues)[0];
+ form.setFields([
+ {
+ name: changedFieldName,
+ errors: [],
+ },
+ ]);
+ setBackendErrors((prevErrors) => {
+ if (prevErrors) {
+ const updatedErrors = prevErrors.errors.filter(
+ (error) => error.attr !== changedFieldName
+ );
+ return { ...prevErrors, errors: updatedErrors };
+ }
+ return null;
+ });
+ };
const handleSubmit = (event) => {
- event.preventDefault();
- if (!toolName.trim() || !author.trim() || !description.trim()) {
- setAlertDetails({
- type: "error",
- content: "Please add valid values in input fields",
- });
- return;
- }
-
- const body = {
- tool_name: toolName,
- author: author,
- description: description,
- icon: icon,
- };
+ const body = formDetails;
+ setIsLoading(true);
handleAddNewTool(body)
.then((success) => {
setAlertDetails({
type: "success",
content: `${isEdit ? "Updated" : "Added"} Successfully`,
});
- clearForm();
+ setOpen(false);
+ clearFormDetails();
})
.catch((err) => {
- const msg = `Failed to ${isEdit ? "update" : "add"}`;
- setAlertDetails(handleException(err, msg));
+ handleException(err, "", setBackendErrors);
+ })
+ .finally(() => {
+ setIsLoading(false);
});
};
- const clearForm = () => {
- setToolName("");
- setAuthor("");
- setDescription("");
- setIcon("");
- setEditItem({});
- setIsEdit(false);
+ const clearFormDetails = () => {
+ setFormDetails({ ...defaultFromDetails });
};
return (
setOpen(false)}
- footer={null}
+ onCancel={() => {
+ setOpen(false);
+ setShowEmojiPicker(false);
+ }}
centered
maskClosable={false}
+ onOk={handleSubmit}
+ okText={isEdit ? "Update" : "Save"}
+ okButtonProps={{
+ loading: isLoading,
+ }}
+ destroyOnClose
>
-
+
);
}
@@ -164,7 +184,7 @@ AddCustomToolFormModal.propTypes = {
open: PropTypes.bool.isRequired,
setOpen: PropTypes.func.isRequired,
editItem: PropTypes.object.isRequired,
- setEditItem: PropTypes.func.isRequired,
+ isEdit: PropTypes.bool.isRequired,
handleAddNewTool: PropTypes.func.isRequired,
};
diff --git a/frontend/src/components/custom-tools/list-of-tools/ListOfTools.jsx b/frontend/src/components/custom-tools/list-of-tools/ListOfTools.jsx
index 84f3fb1c5..b41cac96f 100644
--- a/frontend/src/components/custom-tools/list-of-tools/ListOfTools.jsx
+++ b/frontend/src/components/custom-tools/list-of-tools/ListOfTools.jsx
@@ -14,7 +14,6 @@ import { useSessionStore } from "../../../store/session-store";
import { CustomButton } from "../../widgets/custom-button/CustomButton";
import { AddCustomToolFormModal } from "../add-custom-tool-form-modal/AddCustomToolFormModal";
import { ViewTools } from "../view-tools/ViewTools";
-
import { handleException } from "../../../helpers/GetStaticData";
import "./ListOfTools.css";
@@ -42,6 +41,7 @@ function ListOfTools() {
const [listOfTools, setListOfTools] = useState([]);
const [filteredListOfTools, setFilteredListOfTools] = useState([]);
const [search, setSearch] = useState("");
+ const [isEdit, setIsEdit] = useState(false);
useEffect(() => {
getListOfTools();
@@ -124,6 +124,7 @@ function ListOfTools() {
if (!editToolData) {
return;
}
+ setIsEdit(true);
setEditItem(editToolData);
setOpenAddTool(true);
};
@@ -175,6 +176,12 @@ function ListOfTools() {
[]
);
+ const showAddTool = () => {
+ setEditItem(null);
+ setIsEdit(false);
+ setOpenAddTool(true);
+ };
+
return (
<>
@@ -199,7 +206,7 @@ function ListOfTools() {
}
- onClick={() => setOpenAddTool(true)}
+ onClick={showAddTool}
>
New Tool
@@ -220,13 +227,15 @@ function ListOfTools() {