@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.10

package/dist/components/core/model/ModelListViewData.tsx

@@ -1,4 +1,3 @@
-
 import { CreateButton } from "../../../components/common/CreateButton";
 import {
   useDeleteMultipleModelsMutation,
@@ -6,17 +5,11 @@ import {
   useLazyGetModelsQuery,
 } from "../../../redux/api/modelApi";
 import Link from "../../common/Link";
-import { FilterMatchMode } from "primereact/api";
-import { Button } from "primereact/button";
-import { Column } from "primereact/column";
-import {
-  DataTable,
-  DataTableFilterMeta,
-  DataTableStateEvent,
-} from "primereact/datatable";
-import { Dialog } from "primereact/dialog";
 import qs from "qs";
 import { useEffect, useState } from "react";
+import { FilterMatchMode } from "../filter/filterMatchMode";
+import { SolidButton, SolidDialog, SolidIcon, SolidInput, SolidSpinner } from "../../shad-cn-ui";
+import { Column, DataTableStateEvent, SolidDataTable } from "../list/SolidDataTable";
 
 export interface ModelMetaData {
   id: string;
@@ -25,54 +18,36 @@ export interface ModelMetaData {
   isSystem: boolean;
 }
 
+type FilterMeta = Record<string, { value: string | null; matchMode: string }>;
+
+const createDefaultFilters = (): FilterMeta => ({
+  displayName: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+  "module.displayName": { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+});
+
 export const ModelListViewData = () => {
   const [modelMetadata, setModelMetadata] = useState<ModelMetaData[]>([]);
-
-  const [filters, setFilters] = useState<DataTableFilterMeta>({
-    displayName: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-    "module.displayName": {
-      value: null,
-      matchMode: FilterMatchMode.STARTS_WITH,
-    },
-  });
-  // Lazy loading datatable
+  const [filters, setFilters] = useState<FilterMeta>(() => createDefaultFilters());
+  const [pendingFilters, setPendingFilters] = useState<FilterMeta>(() => createDefaultFilters());
   const [first, setFirst] = useState(0);
   const [rows, setRows] = useState(25);
   const [totalRecords, setTotalRecords] = useState(0);
   const [sortField, setSortField] = useState("");
-  const [sortOrder, setSortOrder] = useState(0);
+  const [sortOrder, setSortOrder] = useState<1 | -1 | 0>(0);
   const [selectedMenus, setSelectedMenus] = useState<ModelMetaData[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [isDialogVisible, setDialogVisible] = useState(false);
-  const [triggerGetModels, { data: model, isLoading, error }] =
-    useLazyGetModelsQuery();
-
   const [isGenerateCodeVisible, setGenerateCodeVisible] = useState(false);
-  const [generateCodeForModel, setGenerateCodeForModel] = useState<any>();
-
-
-  const [
-    generateCode,
-    { isLoading: isGenerateCodeUpdating, isSuccess: isGenerateCodeSuceess, isError: isGenerateCodeError, error: generateCodeError, data: generateCodeData },
-  ] = useGenerateCodeForModelMutation();
+  const [generateCodeForModel, setGenerateCodeForModel] = useState<string | null>(null);
 
-
-
-  const [
-    deleteManyModel,
-    {
-      isLoading: isModelDeleted,
-      isSuccess: isDeleteModelSuceess,
-      isError: isModelDeleteError,
-      error: ModelDeleteError,
-      data: DeletedModel,
-    },
-  ] = useDeleteMultipleModelsMutation();
+  const [triggerGetModels, { data: model, isLoading }] = useLazyGetModelsQuery();
+  const [generateCode] = useGenerateCodeForModelMutation();
+  const [deleteManyModel] = useDeleteMultipleModelsMutation();
 
   useEffect(() => {
     if (model) {
-      setModelMetadata(model?.records);
-      setTotalRecords(model?.meta.totalRecords);
+      setModelMetadata(model?.records ?? []);
+      setTotalRecords(model?.meta?.totalRecords ?? 0);
       setLoading(false);
     }
   }, [model]);
@@ -80,59 +55,43 @@ export const ModelListViewData = () => {
   useEffect(() => {
     const queryData = {
       offset: 0,
-      limit: 25,
+      limit: rows,
       sort: [`id:desc`],
     };
-    const queryString = qs.stringify(queryData, {
-      encodeValuesOnly: true
-    });
+    const queryString = qs.stringify(queryData, { encodeValuesOnly: true });
     triggerGetModels(queryString);
     setSelectedMenus([]);
-  }, [isDeleteModelSuceess]);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const onPageChange = (event: any) => {
+  const onPageChange = (event: { first: number; rows: number }) => {
     setFirst(event.first);
     setRows(event.rows);
     setQueryString(event.first, event.rows, sortField, sortOrder, filters);
   };
 
   const onSort = (event: DataTableStateEvent) => {
-    const { sortField, sortOrder } = event;
-    const validSortOrder = sortOrder === 1 || sortOrder === -1 ? sortOrder : 0;
-    setSortField(sortField);
+    const nextSortField = event.sortField ?? "";
+    const validSortOrder = event.sortOrder === 1 || event.sortOrder === -1 ? event.sortOrder : 0;
+    setSortField(nextSortField);
     setSortOrder(validSortOrder);
     setFirst(0);
-    setQueryString(
-      0,
-      rows,
-      sortField,
-      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-      filters
-    );
+    setQueryString(0, rows, nextSortField, validSortOrder, filters);
   };
 
-  const onSelectionChange = (event: any) => {
-    const value = event.value;
-    setSelectedMenus(value);
-  };
-
-
-
-  // Filter fuctions
   const setQueryString = async (
     offset?: number,
-    row?: number,
+    rowCount?: number,
     field?: string,
-    order?: number,
-    filterQuery?: any
+    order?: 1 | -1 | 0,
+    filterQuery?: FilterMeta
   ) => {
-    const formattedFilters: any = {};
+    const formattedFilters: Record<string, any> = {};
 
-    Object.keys(filterQuery).forEach((field) => {
-      const filterValue = filterQuery[field].value;
-      const matchMode = filterQuery[field].matchMode;
+    Object.keys(filterQuery ?? {}).forEach((fieldName) => {
+      const filterValue = filterQuery?.[fieldName]?.value;
+      const matchMode = filterQuery?.[fieldName]?.matchMode;
 
-      if (filterValue !== null && filterValue !== undefined) {
+      if (filterValue !== null && filterValue !== undefined && matchMode) {
         let operator = matchMode;
         switch (matchMode) {
           case FilterMatchMode.CONTAINS:
@@ -157,228 +116,221 @@ export const ModelListViewData = () => {
             operator = matchMode;
         }
 
-        if (field.includes(".")) {
-          const fieldParts = field.split(".");
-          if (!formattedFilters[fieldParts[0]]) {
-            formattedFilters[fieldParts[0]] = {};
+        if (fieldName.includes(".")) {
+          const [parent, child] = fieldName.split(".");
+          if (!formattedFilters[parent]) {
+            formattedFilters[parent] = {};
           }
-          formattedFilters[fieldParts[0]][fieldParts[1]] = {
-            [operator]: filterValue,
-          };
+          formattedFilters[parent][child] = { [operator]: filterValue };
         } else {
-          formattedFilters[field] = { [operator]: filterValue };
+          formattedFilters[fieldName] = { [operator]: filterValue };
         }
       }
     });
 
-    const queryData: any = {
+    const queryData: Record<string, any> = {
       offset: offset ?? first,
-      limit: row ?? rows,
+      limit: rowCount ?? rows,
       filters: formattedFilters,
     };
 
     if (field) {
-      queryData.sort = [
-        `${field}:${order == 0 ? null : order == 1 ? "asc" : "desc"}`,
-      ];
+      queryData.sort = [`${field}:${order === 0 ? null : order === 1 ? "asc" : "desc"}`];
     }
 
-    const queryString = qs.stringify(queryData, {
-      encodeValuesOnly: true,
-    });
-
-    triggerGetModels(queryString);
+    const queryString = qs.stringify(queryData, { encodeValuesOnly: true });
+    return triggerGetModels(queryString);
   };
 
-  const onFilter = (e: any) => {
-    setFilters(e.filters);
-    setQueryString(
-      0,
-      rows,
-      sortField,
-      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-      e.filters
-    );
+  const handleFilterInputChange = (fieldName: string, value: string) => {
+    setPendingFilters((prev) => ({
+      ...prev,
+      [fieldName]: { ...prev[fieldName], value },
+    }));
   };
 
-  const detailsBodyTemplate = (modelMetadata: ModelMetaData) => {
-    return (
-      <Link
-        href={`${modelMetadata.id}`}
-        rel="noopener noreferrer"
-        className="text-sm font-bold p-0"
-        style={{ color: "#12415D" }}
-      >
-        {modelMetadata.isSystem === true &&
-          < i className="pi pi-eye" style={{ fontSize: "1rem" }}></i>
-        }
-        {modelMetadata.isSystem === false &&
-          < i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
-        }
-      </Link>
-    );
+  const applyFilters = () => {
+    setFirst(0);
+    setFilters(pendingFilters);
+    setQueryString(0, rows, sortField, sortOrder, pendingFilters);
   };
 
-  const generateCodeBodyTemplate = (modelMetadata: ModelMetaData) => {
-
-    return (
-      <a onClick={() => {
-        setGenerateCodeForModel(modelMetadata.id);
-        setGenerateCodeVisible(true);
-      }}
-        rel="noopener noreferrer"
-        className="text-sm font-bold p-0"
-        style={{ color: "#12415D" }}
-      >
-        {modelMetadata.isSystem === false &&
-          < i className="pi pi-cog" style={{ fontSize: "1rem" }}></i>
-        }
-      </a >
-    );
+  const clearFilters = () => {
+    const defaults = createDefaultFilters();
+    setPendingFilters(defaults);
+    setFilters(defaults);
+    setFirst(0);
+    setQueryString(0, rows, sortField, sortOrder, defaults);
   };
 
   const deleteBulk = () => {
-    let deleteList: any = [];
-    selectedMenus.forEach((element: ModelMetaData) => {
-      deleteList.push(element.id);
-    });
+    const deleteList = selectedMenus.map((element) => element.id);
     deleteManyModel(deleteList);
     setDialogVisible(false);
+    setSelectedMenus([]);
   };
 
   const onDeleteClose = () => {
     setDialogVisible(false);
     setSelectedMenus([]);
-  }
+  };
 
-  const onGenerateCodeClose = () => {
+  const handleGenerateCode = async () => {
+    if (!generateCodeForModel) return;
+    await generateCode({ id: generateCodeForModel });
     setGenerateCodeVisible(false);
-    setSelectedMenus([]);
+    setGenerateCodeForModel(null);
+  };
+
+  const detailsBodyTemplate = (record: ModelMetaData) => (
+    <Link
+      href={`${record.id}`}
+      rel="noopener noreferrer"
+      className="text-sm font-bold p-0"
+      style={{ color: "#12415D" }}
+    >
+      {record.isSystem ? (
+        <SolidIcon name="si-eye" style={{ fontSize: "1rem" }} aria-hidden />
+      ) : (
+        <SolidIcon name="si-pencil" style={{ fontSize: "1rem" }} aria-hidden />
+      )}
+    </Link>
+  );
+
+  const generateCodeBodyTemplate = (record: ModelMetaData) => {
+    if (record.isSystem) {
+      return null;
+    }
+    return (
+      <button
+        type="button"
+        className="text-primary border-0 bg-transparent cursor-pointer"
+        onClick={() => {
+          setGenerateCodeForModel(record.id);
+          setGenerateCodeVisible(true);
+        }}
+      >
+        <SolidIcon name="si-cog" style={{ fontSize: "1rem" }} aria-hidden />
+      </button>
+    );
+  };
 
-  }
   return (
-    <div className="">
-      <div className="flex gap-3 mb-4">
+    <div className="solid-model-list w-full">
+      <div className="flex gap-3 mb-4 align-items-center flex-wrap">
         <CreateButton />
-        {selectedMenus.length > 0 && <Button
-          type="button"
-          label="Delete"
-          size="small"
-          onClick={() => setDialogVisible(true)}
-          className="small-button"
-          severity="danger"
-        />}
-        {/* <Button
-        type="button"
-        icon="pi pi-filter-slash"
-        label="Clear"
-        size="small"
-        outlined
-      //   onClick={clearFilter}
-        className="small-button"
-      /> */}
+        {selectedMenus.length > 0 && (
+          <SolidButton
+            type="button"
+            label="Delete"
+            size="small"
+            severity="danger"
+            className="small-button"
+            onClick={() => setDialogVisible(true)}
+          />
+        )}
       </div>
-      <style>{`
-      .p-datatable .p-datatable-loading-overlay {
-      background-color: rgba(0, 0, 0, 0.0);
-      }
-      `}</style>
-      <DataTable
+
+      <div className="flex flex-column md:flex-row align-items-start gap-3 mb-3">
+        <SolidInput
+          value={pendingFilters.displayName.value ?? ""}
+          onChange={(event) => handleFilterInputChange("displayName", event.currentTarget.value)}
+          placeholder="Search by model name"
+          className="w-full md:w-20rem"
+        />
+        <SolidInput
+          value={pendingFilters["module.displayName"].value ?? ""}
+          onChange={(event) => handleFilterInputChange("module.displayName", event.currentTarget.value)}
+          placeholder="Search by module"
+          className="w-full md:w-20rem"
+        />
+        <div className="flex align-items-center gap-2">
+          <SolidButton size="small" onClick={applyFilters} label="Apply" />
+          <SolidButton size="small" variant="ghost" onClick={clearFilters} label="Clear" />
+        </div>
+      </div>
+
+      {(loading || isLoading) && (
+        <div className="flex justify-content-center my-3">
+          <SolidSpinner />
+        </div>
+      )}
+
+      <SolidDataTable
         value={modelMetadata}
-        lazy
         size="small"
         paginator
         rows={rows}
         rowsPerPageOptions={[10, 25, 50]}
         dataKey="id"
-        filters={filters}
         emptyMessage="No Models found"
-        onFilter={onFilter}
-        filterDisplay="row"
         totalRecords={totalRecords}
         first={first}
         onPage={onPageChange}
-        onSort={(e: DataTableStateEvent) => onSort(e)}
+        onSort={onSort}
         sortField={sortField}
-        sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
-        loading={loading || isLoading}
-        loadingIcon="pi pi-spinner"
+        sortOrder={sortOrder}
         selection={selectedMenus}
-        onSelectionChange={onSelectionChange}
-        selectionMode="multiple"
-        removableSort
+        onSelectionChange={({ value }) => setSelectedMenus(value)}
       >
         <Column selectionMode="multiple" headerStyle={{ width: "3em" }} />
-        <Column field="id" header="Id" className="text-sm" sortable headerClassName="table-header-fs"></Column>
+        <Column field="id" header="Id" className="text-sm" sortable headerClassName="table-header-fs" />
         <Column
           field="displayName"
-          header="displayName"
+          header="Display Name"
           className="text-sm"
           sortable
-          filter
-          filterPlaceholder="Search model by name"
           style={{ minWidth: "12rem" }}
           headerClassName="table-header-fs"
-        ></Column>
+        />
         <Column
           field="module.displayName"
           header="Module Name"
           className="text-sm"
-          // sortable
-          filter
-          filterPlaceholder="Search model by module name"
           style={{ minWidth: "12rem" }}
           headerClassName="table-header-fs"
-        ></Column>
-        <Column
-          header="Edit"
-          body={detailsBodyTemplate}></Column>
-        <Column
-          header="Code"
-          body={generateCodeBodyTemplate}></Column>
+        />
+        <Column header="Edit" body={detailsBodyTemplate} />
+        <Column header="Code" body={generateCodeBodyTemplate} />
+      </SolidDataTable>
 
-      </DataTable>
-      <Dialog
+      <SolidDialog
         visible={isDialogVisible}
         header="Confirm Delete"
         modal
         className="solid-confirm-dialog"
-        footer={() => (
-          <div className="flex justify-content-center">
-            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={deleteBulk} />
-            <Button label="No" icon="pi pi-times" className='small-button' onClick={onDeleteClose} />
-          </div>
-        )}
         onHide={() => setDialogVisible(false)}
       >
         <p>Are you sure you want to delete the selected Models?</p>
-      </Dialog>
-      <Dialog
+        <div className="flex justify-content-center gap-3 mt-3">
+          <SolidButton label="Yes" className="small-button" severity="danger" autoFocus onClick={deleteBulk} />
+          <SolidButton label="No" className="small-button" variant="ghost" onClick={onDeleteClose} />
+        </div>
+      </SolidDialog>
+
+      <SolidDialog
         visible={isGenerateCodeVisible}
         header="Generate Code"
-        headerClassName="text-center"
         modal
-        footer={() => (
-          <div className="flex justify-content-center">
-            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={() => {
-              generateCode({ id: generateCodeForModel })
-              setGenerateCodeVisible(false)
-            }} />
-            <Button label="No" icon="pi pi-times" className='small-button' onClick={onGenerateCodeClose} />
-          </div>
-        )}
-        onHide={() => setGenerateCodeVisible(false)}
+        className="solid-confirm-dialog"
+        onHide={() => {
+          setGenerateCodeVisible(false);
+          setGenerateCodeForModel(null);
+        }}
       >
-        <p className="">Proceed with model code generation? Existing files will be overwritten.</p>
-        <p>Below is the list of files that will be created </p>
+        <p className="text-center">Proceed with model code generation? Existing files will be overwritten.</p>
+        <p>Below is the list of files that will be created:</p>
         <ul>
           <li>Model Entity File</li>
           <li>Model Controller File</li>
           <li>Model Service File</li>
-          <li>Model Create and Update Dto files</li>
+          <li>Model Create and Update DTO files</li>
         </ul>
-        <ul></ul>
-      </Dialog>
+        <div className="flex justify-content-center gap-3 mt-3">
+          <SolidButton label="Yes" className="small-button" severity="danger" autoFocus onClick={handleGenerateCode} />
+          <SolidButton label="No" className="small-button" variant="ghost" onClick={() => setGenerateCodeVisible(false)} />
+        </div>
+      </SolidDialog>
     </div>
   );
 };

package/dist/components/core/model/ModelMetaData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModelMetaData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/ModelMetaData.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,QAAA,MAAM,aAAa,kFAw4BjB,CAAC;AAEH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ModelMetaData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/ModelMetaData.tsx"],"names":[],"mappings":"AASA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAuB3D,QAAA,MAAM,aAAa,kFA4sBjB,CAAC;AAEH,eAAe,aAAa,CAAC"}