mobigrid-module 1.0.5 → 1.0.7

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "mobigrid-module",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "",
-  "main": "index.tsx",
+  "main": "dist/index.tsx",
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -52,7 +52,6 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
-    "lucide-react": "^0.456.0",
     "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -64,7 +63,7 @@
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10"
   },
-  "types": "dist/index.d.ts",
+  "types": "dist/index.d",
   "files": [
     "dist"
   ]

package/index.tsx

@@ -1,254 +0,0 @@
-import React from "react";
-import { useEffect, useState } from "react";
-import { format } from "date-fns";
-import axios from "axios";
-import { Alert, AlertTitle, AlertDescription } from "./components/ui/alert";
-import { AlertCircle } from "lucide-react";
-import { PageHeader } from "./components/Layout/PageHeader";
-import { CustomTable } from "./components/CustomTable/CustomTable";
-import Pagination from "./components/CustomTable/Pagination";
-
-const ITEMS_PER_PAGE = 14;
-
-interface ContainerProps {
-  configUrl: string;
-  preJsUrl: string;
-  itemsPerPage?: number;
-  children?: React.ReactNode;
-}
-
-const MobigridModule = ({
-  configUrl,
-  preJsUrl,
-  itemsPerPage = ITEMS_PER_PAGE,
-  children,
-}: ContainerProps) => {
-  const [config, setConfig] = useState<any>(null);
-  const [invalidConfig, setInvalidConfig] = useState(false);
-  const [errors, setErrors] = useState<
-    Array<{
-      title: string;
-      message: string;
-    }>
-  >([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [data, setData] = useState([]);
-  const [count, setCount] = useState(0);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [filters, setFilters] = useState({
-    fromDate: new Date(
-      new Date().getFullYear(),
-      new Date().getMonth(),
-      1
-    ).toLocaleString(),
-    toDate: new Date(
-      new Date().getFullYear(),
-      new Date().getMonth() + 1,
-      0,
-      23,
-      59,
-      59
-    ).toLocaleString(),
-  });
-  const [filterOptions, setFilterOptions] = useState<any[]>([]);
-
-  useEffect(() => {
-    const loadConfig = async () => {
-      try {
-        const response = await fetch(configUrl);
-        const data = await response.json();
-        if (data && data.title && data.data_url && data.colomns) {
-          setConfig(data);
-          setFilterOptions(data.Filters?.flat() || []);
-        } else {
-          setInvalidConfig(true);
-        }
-      } catch (error) {
-        setInvalidConfig(true);
-      }
-    };
-
-    const loadFunctions = async () => {
-      const response = await fetch(preJsUrl);
-      const script = document.createElement("script");
-      script.textContent = await response.text();
-      document.head.appendChild(script);
-    };
-
-    if (configUrl && preJsUrl) {
-      loadConfig();
-      loadFunctions();
-    }
-  }, [configUrl, preJsUrl]);
-
-  useEffect(() => {
-    const controller = new AbortController();
-
-    const initializeFilters = async () => {
-      const filters = config?.Filters?.flat() || [];
-      for (const filter of filters) {
-        if (filter.type === "Select" && filter.urlSource) {
-          await fetchFilterOptions(filter, controller.signal);
-        }
-      }
-    };
-
-    if (config) initializeFilters();
-
-    return () => controller.abort();
-  }, [config]);
-
-  const getData = async () => {
-    setErrors([]);
-    const postBody = {
-      page: currentPage,
-      filters: {
-        ...filters,
-        fromDate: format(filters.fromDate, "MM-dd-yyyy HH:mm"),
-        toDate: format(filters.toDate, "MM-dd-yyyy HH:mm"),
-      },
-    };
-
-    setIsLoading(true);
-    try {
-      const response = await axios.post(config.data_url, postBody);
-      setIsLoading(false);
-
-      if (response?.data) {
-        setData(response.data?.DATA);
-        setCount(response.data?.PAGESNUM);
-        setTotalPages(Math.ceil(response.data?.PAGESNUM / itemsPerPage) || 1);
-      } else {
-        setInvalidConfig(true);
-      }
-    } catch (error) {
-      setIsLoading(false);
-      setErrors((prev) => [
-        ...prev,
-        {
-          title: "Erreur",
-          message: "Une erreur est survenue",
-        },
-      ]);
-    }
-  };
-
-  const fetchFilterOptions = async (filter: any, signal?: AbortSignal) => {
-    if (filter.type === "Select" && filter.urlSource) {
-      try {
-        const response = await axios.get(filter.urlSource, { signal });
-        if (response?.status === 200 && response?.data) {
-          const options = Array.isArray(response.data) ? response.data : [];
-          setFilterOptions((prev) =>
-            prev.map((f) => (f.name === filter.name ? { ...f, options } : f))
-          );
-        }
-      } catch (error) {
-        if (!axios.isCancel(error)) {
-          setErrors((prev) => [
-            ...prev,
-            {
-              title: "Erreur",
-              message: `Une erreur est survenue lors de la récupération des options pour ${filter.name}`,
-            },
-          ]);
-          console.error(`Error fetching options for ${filter.name}:`, error);
-        }
-      }
-    }
-  };
-
-  if (invalidConfig) {
-    return (
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100vh",
-        }}
-      >
-        <div style={{ position: "absolute" }}>
-          <svg
-            className="h-5 w-5 mx-auto mb-2"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="red"
-          >
-            <path d="M18.3 5.71a.996.996 0 00-1.41 0L12 10.59 7.11 5.7A.996.996 0 105.7 7.11L10.59 12 5.7 16.89a.996.996 0 101.41 1.41L12 13.41l4.89 4.89a.996.996 0 101.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" />
-          </svg>
-          <div>Invalid configuration</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!config) {
-    return (
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100vh",
-        }}
-      >
-        <div style={{ position: "absolute" }}>
-          <svg
-            className="animate-spin h-5 w-5 mx-auto mb-2"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            ></circle>
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-          <div>Loading configuration...</div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-4 p-4 max-w-[1300px] mx-auto mt-8 mb-">
-      <PageHeader
-        title={config.title}
-        configFilters={filterOptions}
-        filters={filters}
-        setFilters={setFilters}
-        onSearch={() => getData()}
-        count={count}
-        isLoading={isLoading}
-        setCurrentPage={setCurrentPage}
-      />
-      {errors.map((error, index) => (
-        <Alert key={index} variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>{error.title}</AlertTitle>
-          <AlertDescription>{error.message}</AlertDescription>
-        </Alert>
-      ))}
-      <CustomTable data={data} columns={config.colomns} isLoading={isLoading} />
-      <Pagination
-        currentPage={currentPage}
-        totalPages={totalPages}
-        onPageChange={setCurrentPage}
-      />
-      {children}
-    </div>
-  );
-}
-
-export {MobigridModule as default};