eleven-solutions-common-website-unique-web 9.0.36 → 9.0.37

package/dist/components/admin/TemplateForm.js

@@ -8,13 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useMemo } from "react";
-import { addTemplateApi } from "../api/template";
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import { addTemplateApi, fetchTemplateByIdApi } from "../api/template";
 import JoditEditor from "jodit-react";
 const TemplateForm = () => {
     const [name, setName] = useState("");
     const [content, setContent] = useState("");
     const [placeholder, setPlaceholder] = React.useState("Enter Content Here.");
+    const [isEditMode, setIsEditMode] = useState(false);
     const editor = useRef(null);
     const config = useMemo(() => ({
         readonly: false,
@@ -27,6 +28,27 @@ const TemplateForm = () => {
         }
         return true;
     };
+    const queryParams = new URLSearchParams(window.location.search);
+    const id = queryParams.get("id");
+    useEffect(() => {
+        if (id) {
+            const fetchTemplateData = () => __awaiter(void 0, void 0, void 0, function* () {
+                try {
+                    const fetchedUser = yield fetchTemplateByIdApi(id);
+                    if (fetchedUser) {
+                        const user = fetchedUser;
+                        setIsEditMode(true);
+                        setName(user.name);
+                        setContent(user.content);
+                    }
+                }
+                catch (error) {
+                    console.error("Unable to fetch user data", error);
+                }
+            });
+            fetchTemplateData();
+        }
+    }, [id]);
     const handleAddClick = (event) => __awaiter(void 0, void 0, void 0, function* () {
         event.preventDefault();
         if (!validateForm())
@@ -48,6 +70,6 @@ const TemplateForm = () => {
         window.history.pushState({}, "", "/admin/template");
         window.dispatchEvent(new PopStateEvent("popstate"));
     };
-    return (_jsx("div", { className: "max-w-4xl p-6 mx-auto dark:bg-gray-800", children: _jsx("div", { children: _jsxs("form", { children: [_jsx("h1", { className: "text-3xl font-bold text-center text-blue-600 capitalize dark:text-white mb-4", children: "Add Template" }), _jsxs("div", { className: "mb-6 w-full", children: [_jsxs("label", { className: "text-gray-900 dark:text-gray-200 font-semibold", children: ["Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { required: true, type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring", placeholder: "Enter Name" })] }), _jsxs("div", { className: "mb-6 w-full", children: [_jsxs("label", { className: "text-gray-900 dark:text-gray-200 font-semibold", children: ["Content ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(JoditEditor, { ref: editor, value: content, config: config, onBlur: (newContent) => setContent(newContent), onChange: (newContent) => { } })] }), _jsxs("div", { className: "flex space-x-4 mt-6 justify-end", children: [_jsx("button", { type: "submit", onClick: handleAddClick, className: "px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600", children: "Add" }), _jsx("button", { type: "button", onClick: handleCancelClick, className: "px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600", children: "Cancel" })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-4xl p-6 mx-auto dark:bg-gray-800", children: _jsx("div", { children: _jsxs("form", { children: [_jsx("h1", { className: "text-3xl font-bold text-center text-blue-600 capitalize dark:text-white mb-4", children: isEditMode ? "Edit Template" : "Add Template" }), _jsxs("div", { className: "mb-6 w-full", children: [_jsxs("label", { className: "text-gray-900 dark:text-gray-200 font-semibold", children: ["Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { required: true, type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring", placeholder: "Enter Name" })] }), _jsxs("div", { className: "mb-6 w-full", children: [_jsxs("label", { className: "text-gray-900 dark:text-gray-200 font-semibold", children: ["Content ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(JoditEditor, { ref: editor, value: content, config: config, onBlur: (newContent) => setContent(newContent), onChange: (newContent) => { } })] }), _jsxs("div", { className: "flex space-x-4 mt-6 justify-end", children: [_jsx("button", { type: "submit", onClick: handleAddClick, className: "px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600", children: "Add" }), _jsx("button", { type: "button", onClick: handleCancelClick, className: "px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600", children: "Cancel" })] })] }) }) }));
 };
 export default TemplateForm;

package/dist/components/api/template.d.ts

@@ -1,2 +1,3 @@
 export declare const addTemplateApi: (name: string, content: string) => Promise<Axios.AxiosXHR<unknown>>;
 export declare const fetchTemplatesApi: () => Promise<unknown>;
+export declare const fetchTemplateByIdApi: (id: string) => Promise<unknown>;

package/dist/components/api/template.js

@@ -44,3 +44,19 @@ export const fetchTemplatesApi = () => __awaiter(void 0, void 0, void 0, functio
         return false;
     }
 });
+export const fetchTemplateByIdApi = (id) => __awaiter(void 0, void 0, void 0, function* () {
+    const cookies = new Cookies();
+    const token = cookies.get("token");
+    try {
+        const response = yield axios.get(`${apiUrl}/template/gettemplatebyid/${id}`, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        });
+        return response.data;
+    }
+    catch (error) {
+        console.error("Error fetching template by ID:", error);
+        return false;
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleven-solutions-common-website-unique-web",
-  "version": "9.0.36",
+  "version": "9.0.37",
   "main": "./dist/index.js",
   "scripts": {
     "build": "tsc",

package/src/components/admin/TemplateForm.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useMemo } from "react";
-import { addTemplateApi } from "../api/template";
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import { addTemplateApi, fetchTemplateByIdApi } from "../api/template";
 import JoditEditor from "jodit-react";
 
 const TemplateForm = () => {
@@ -7,6 +7,8 @@ const TemplateForm = () => {
   const [content, setContent] = useState("");
   const [placeholder, setPlaceholder] = React.useState("Enter Content Here.");
 
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+
   const editor = useRef(null);
   const config: Record<string, any> = useMemo(
     () => ({
@@ -24,6 +26,31 @@ const TemplateForm = () => {
     return true;
   };
 
+  const queryParams = new URLSearchParams(window.location.search);
+  const id = queryParams.get("id");
+
+  useEffect(() => {
+    if (id) {
+      const fetchTemplateData = async () => {
+        try {
+          const fetchedUser = await fetchTemplateByIdApi(id);
+          if (fetchedUser) {
+            const user = fetchedUser as {
+              name: string;
+              content: string;
+            };
+            setIsEditMode(true);
+            setName(user.name);
+            setContent(user.content);
+          }
+        } catch (error) {
+          console.error("Unable to fetch user data", error);
+        }
+      };
+      fetchTemplateData();
+    }
+  }, [id]);
+
   const handleAddClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (!validateForm()) return;
@@ -51,7 +78,7 @@ const TemplateForm = () => {
       <div>
         <form>
           <h1 className="text-3xl font-bold text-center text-blue-600 capitalize dark:text-white mb-4">
-            Add Template
+            {isEditMode ? "Edit Template" : "Add Template"}
           </h1>
 
           <div className="mb-6 w-full">

package/src/components/api/template.ts

@@ -41,3 +41,24 @@ export const fetchTemplatesApi = async () => {
     return false;
   }
 };
+
+export const fetchTemplateByIdApi = async (id: string) => {
+  const cookies = new Cookies();
+  const token = cookies.get("token");
+
+  try {
+    const response = await axios.get(
+      `${apiUrl}/template/gettemplatebyid/${id}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching template by ID:", error);
+    return false;
+  }
+};