Merge branch 'main' of https://github.com/MiaadTeam/lesan

src/server/playground/dist/bundle.js

@@ -2340,13 +2340,14 @@ function useOutsideClick(callback) {
     ]);
     return ref;
 }
-function ChevronDownIcon() {
+function ChevronDownIcon({ className =""  }) {
     return Z("svg", {
         width: 25,
         height: 25,
         viewBox: "0 0 24 24",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
+        className: className
     }, Z("g", {
         id: "SVGRepo_bgCarrier",
         "stroke-width": "0"
@@ -2405,6 +2406,94 @@ function Selected({ items , onClickItem , incomeActiveItem , canShow  }) {
             }
         }, item)))));
 }
+const MultiSelect = ({ options , onChange  })=>{
+    const [selectedOptions, setSelectedOptions] = F1([]);
+    const [unselectedOptions, setUnselectedOptions] = F1(options);
+    const [isOpen, setIsOpen] = F1(false);
+    const handleOptionChange = (selectedOption)=>{
+        if (selectedOptions.includes(selectedOption)) {
+            const filteredSelectedOptions = selectedOptions.filter((option)=>option.value !== selectedOption.value);
+            setSelectedOptions(filteredSelectedOptions);
+            setUnselectedOptions([
+                ...unselectedOptions,
+                selectedOption
+            ]);
+            onChange(filteredSelectedOptions);
+        } else {
+            const filteredUnselectedOptions = unselectedOptions.filter((option)=>option.value !== selectedOption.value);
+            setSelectedOptions([
+                ...selectedOptions,
+                selectedOption
+            ]);
+            setUnselectedOptions(filteredUnselectedOptions);
+            onChange([
+                ...selectedOptions,
+                selectedOption
+            ]);
+        }
+    };
+    const resetOptions = ()=>{
+        setSelectedOptions([]);
+        onChange([]);
+        setUnselectedOptions(options);
+    };
+    const toggleDropdown = ()=>{
+        setIsOpen(!isOpen);
+    };
+    const ref = useOutsideClick(()=>{
+        setIsOpen(false);
+    });
+    return Z("div", {
+        ref: ref,
+        className: "multi-select__wrapper"
+    }, Z("div", {
+        className: "multi-select__field",
+        onClick: toggleDropdown
+    }, Z("div", {
+        className: "multi-select__selected-item-wrapper"
+    }, selectedOptions.map((item)=>Z("div", {
+            className: "multi-select__selected-item",
+            key: item
+        }, Z("div", {
+            className: "multi-select__selected-item-text"
+        }, item.label), Z("div", {
+            className: "multi-select__selected-item-btn",
+            role: "button",
+            onClick: (e)=>{
+                e.stopPropagation();
+                handleOptionChange(item);
+            }
+        }, "x")))), Z("div", {
+        className: "multi-select__icons-wrapper"
+    }, selectedOptions.length ? Z("div", {
+        className: "multi-select__close-icon-wrapper",
+        role: "button",
+        onClick: (e)=>{
+            e.stopPropagation();
+            resetOptions();
+        }
+    }, Z("span", {
+        className: "multi-select__close-icon"
+    }, "x")) : null, Z("div", {
+        className: "multi-select__arrow-icon-wrapper",
+        role: "button"
+    }, Z(ChevronDownIcon, {
+        className: "multi-select__arrow-icon"
+    })))), isOpen ? Z("div", {
+        className: "multi-select__options"
+    }, unselectedOptions.length ? unselectedOptions.map((option)=>Z("div", {
+            key: option.value,
+            onClick: (e)=>{
+                e.stopPropagation();
+                handleOptionChange(option);
+            },
+            className: "multi-select__option"
+        }, Z("div", {
+            className: "multi-select__option-label"
+        }, option.label))) : Z("div", {
+        className: "multi-select__option--no-option"
+    }, "No Options!")) : null);
+};
 const lesanAPI = ({ baseUrl , options  })=>fetch(`${baseUrl}lesan`, options).then((res)=>res.json());
 const Main = ({ urlAddress  })=>{
     const { activeTab , tabsData , actsObj , headers , history , setService , setSchema , setAct , setPostFields , setGetFields , setFormData , setHistory , setResponse , resetGetFields , resetPostFields , addE2eForm , setModal  } = useLesan();
@@ -2434,6 +2523,60 @@ const Main = ({ urlAddress  })=>{
             index: activeTab
         });
     };
+    const renderPostFields = ({ key , field , isMultiEnum =false , formData  })=>{
+        if (field.type === "array") {
+            return renderPostFields({
+                key,
+                formData,
+                field: field["schema"],
+                isMultiEnum: true
+            });
+        } else if (field["type"] === "enums" && isMultiEnum) {
+            return Z(MultiSelect, {
+                options: Object.keys(field["schema"]).map((schemaKey)=>({
+                        label: schemaKey,
+                        value: field["schema"][schemaKey]
+                    })),
+                onChange: (options)=>{
+                    const value = options.map((item)=>item.value);
+                    setFormData({
+                        data: {
+                            ...formData,
+                            [`set.${key}`]: value
+                        },
+                        index: activeTab
+                    });
+                    localStorage.setItem("localTabsData", JSON.stringify(tabsData));
+                }
+            });
+        } else if (field["type"] === "enums") {
+            return Z(Selected, {
+                onClickItem: (value)=>{
+                    setFormData({
+                        data: {
+                            ...formData,
+                            [`set.${key}`]: value
+                        },
+                        index: activeTab
+                    });
+                    localStorage.setItem("localTabsData", JSON.stringify(tabsData));
+                },
+                incomeActiveItem: formData[`set.${key}`],
+                items: Object.keys(field["schema"])
+            });
+        } else {
+            return Z("input", {
+                className: "input",
+                placeholder: key,
+                id: key,
+                value: formData[`set.${key}`],
+                name: `set.${key}`,
+                type: field["type"] === "number" ? "number" : "string",
+                alt: field["type"],
+                onChange: handleChange
+            });
+        }
+    };
     const renderGetFields = ({ getField , keyName , margin  })=>Z("div", {
             style: {
                 marginLeft: `${margin + 1}px`
@@ -2669,28 +2812,10 @@ const Main = ({ urlAddress  })=>{
             key: `${activeTab}.${item}-----`
         }, Z("label", {
             htmlFor: item
-        }, item, " :"), tabsData[activeTab].postFields[item]["type"] === "enums" ? Z(Selected, {
-            onClickItem: (clickedItem)=>{
-                setFormData({
-                    data: {
-                        ...tabsData[activeTab].formData,
-                        [`set.${item}`]: clickedItem
-                    },
-                    index: activeTab
-                });
-                localStorage.setItem("localTabsData", JSON.stringify(tabsData));
-            },
-            incomeActiveItem: tabsData[activeTab].formData[`set.${item}`],
-            items: Object.keys(tabsData[activeTab].postFields[item]["schema"])
-        }) : Z("input", {
-            className: "input",
-            placeholder: item,
-            id: item,
-            value: tabsData[activeTab].formData[`set.${item}`],
-            name: `set.${item}`,
-            type: tabsData[activeTab].postFields[item]["type"] === "number" ? "number" : "string",
-            alt: tabsData[activeTab].postFields[item]["type"],
-            onChange: handleChange
+        }, item, " :"), renderPostFields({
+            key: item,
+            field: tabsData[activeTab].postFields[item],
+            formData: tabsData[activeTab].formData
         }))), Z("div", {
         className: "sidebar__section-heading sidebar__section-heading--fields"
     }, "GET fields"), Z("div", {

src/server/playground/esbuild.ts

@@ -1,6 +1,6 @@
-import * as esbuild from "https://deno.land/x/esbuild@v0.18.9/mod.js";
+import * as esbuild from "https://deno.land/x/esbuild@v0.19.4/mod.js";
 
-esbuild
+const result = await esbuild
   .build({
     entryPoints: ["./hydrate.tsx"],
     outfile: "./dist/bundle-es.js",
@@ -11,20 +11,26 @@ esbuild
     minify: true,
     format: "esm",
     sourcemap: true,
-  })
-  .then((result) => {
-    /*
-     *  @LOG @DEBUG @INFO
-     *  This log written by ::==> {{ syd }}
-     *
-     *  Please remove your log after debugging
-     */
-    console.log(" ============= ");
-    console.group("result, error ------ ");
-    console.log();
-    console.info({ result }, " ------ ");
-    console.log();
-    console.groupEnd();
-    console.log(" ============= ");
-  })
-  .catch((e) => console.log(e));
+    external: ["preact"],
+    drop: ["console"],
+  });
+
+const cssUrl = new URL("./css/index.css", import.meta.url);
+const cssContet = await Deno.readTextFile(cssUrl);
+
+const tsAddress = new URL(
+  "./dist/bundle-es.js",
+  import.meta.url,
+);
+const tsContent = await Deno.readTextFile(tsAddress);
+
+const bundleTsContent = `
+    export const bundleTs = ${JSON.stringify(tsContent)};
+
+    export const bundleCss = \`${cssContet}\`;
+    `;
+
+console.log("esbuild result is ", { result });
+await Deno.writeTextFile("./dist/bundleContent.ts", bundleTsContent);
+
+esbuild.stop();

src/server/playground/mod.tsx

@@ -1,11 +1,24 @@
 import { bundle } from "../../deps.ts";
+import { bundleCss, bundleTs } from "./dist/bundleContent.ts";
 
 export const getCSSFile = async () => {
-  const url = new URL("./css/index.css", import.meta.url);
-  const data = await Deno.readTextFile(url);
-  return new Response(data, {
-    headers: { "content-type": "text/css" },
-  });
+  const getFileCss = async () => {
+    const url = new URL("./css/index.css", import.meta.url);
+    const data = await Deno.readTextFile(url);
+    return new Response(data, {
+      headers: { "content-type": "text/css" },
+    });
+  };
+
+  const getConstCss = () => {
+    return new Response(bundleCss, {
+      headers: { "content-type": "text/css" },
+    });
+  };
+
+  return Deno.env.get("PLAYENV") === "development"
+    ? await getFileCss()
+    : getConstCss();
 };
 
 export const getClientReact = async () => {
@@ -23,11 +36,10 @@ export const getClientReact = async () => {
 
 export const getJSFile = async () => {
   const getBundle = async () => {
-    const url = new URL("./dist/bundle.js", import.meta.url);
-    console.log("inside get js files before read", { url });
-    const data = await Deno.readTextFile(url);
-    console.log("inside get js files after read", { url, data });
-    return new Response(data, {
+    // const url = new URL("./dist/bundle-es.js", import.meta.url);
+    // const data = await Deno.readTextFile(url);
+
+    return new Response(bundleTs, {
       headers: { "content-type": "application/javascript" },
     });
   };

src/server/serveStatic.ts

@@ -1,6 +1,6 @@
 import { serveFile } from "../deps.ts";
 import { Services } from "../mod.ts";
-import { ISchema } from "../models/mod.ts";
+import { TSchemas } from "../models/mod.ts";
 import { throwError } from "../utils/throwError.ts";
 import {
   getClientReact,
@@ -20,7 +20,7 @@ const checkFiles = async (req: Request, staticPath: string[]) => {
     : throwError("can not serve this path");
 };
 
-const getSchemas = (schemasObj: ISchema, actsObj: Services) => {
+const getSchemas = (schemasObj: TSchemas, actsObj: Services) => {
   return new Response(
     JSON.stringify({ schemas: schemasObj, acts: actsObj }),
     {
@@ -32,10 +32,9 @@ const checkStaticPath = async (
   req: Request,
   url: URL,
   staticPath: string[],
-  schemasObj: ISchema,
+  schemasObj: TSchemas,
   actsObj: Services,
 ) => {
-  console.log("inside checkStaticPath ", { url });
   return url.pathname === `/playground/static/client.js`
     ? await getClientReact()
     : url.pathname === `/playground/static/index.css`
@@ -49,7 +48,7 @@ const checkStaticPath = async (
 
 export const serveStatic = async (
   req: Request,
-  schemasObj: ISchema,
+  schemasObj: TSchemas,
   actsObj: Services,
   playground: boolean,
   staticPath: string[],