@solidstarters/solid-core-ui 0.1.26

package/src/components/core/model/FieldSelector.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+
+const FieldSelector = ({ handleTypeSelect, modelMetaData }: any) => {
+
+    const [selectedField, setSelectedField] = useState(null); // To store the selected field
+
+    const solidFieldOptions = [
+        { label: 'Integer', description: 'A whole number (int)', icon: 'pi pi-hashtag', value: 'int' },
+        { label: 'Big Integer', description: 'A large whole number (bigint)', icon: 'pi pi-hashtag', value: 'bigint' },
+        // { label: 'Float', description: 'A floating-point number', icon: 'pi pi-sort-numeric-up', value: 'float' },
+        { label: 'Decimal', description: '64-bit floating-point numbers', icon: 'pi pi-sort-numeric-up', value: 'decimal' },
+        { label: 'Short Text', description: 'Small text field', icon: 'pi pi-align-left', value: 'shortText' },
+        { label: 'Long Text', description: 'A larger text field', icon: 'pi pi-align-justify', value: 'longText' },
+        { label: 'Rich Text', description: 'A rich text editor', icon: 'pi pi-pencil', value: 'richText' },
+        { label: 'JSON', description: 'JSON data format', icon: 'pi pi-code', value: 'json' },
+        { label: 'Boolean', description: 'True or false value', icon: 'pi pi-check', value: 'boolean' },
+        { label: 'Date', description: 'Date field', icon: 'pi pi-calendar', value: 'date' },
+        { label: 'Datetime', description: 'Date and time field', icon: 'pi pi-clock', value: 'datetime' },
+        { label: 'Time', description: 'Time picker', icon: 'pi pi-clock', value: 'time' },
+        { label: 'Relation', description: 'Reference to another entity', icon: 'pi pi-sitemap', value: 'relation' },
+        { label: 'Single Media', description: 'Single file upload (image, video)', icon: 'pi pi-image', value: 'mediaSingle' },
+        { label: 'Multiple Media', description: 'Multiple file upload', icon: 'pi pi-images', value: 'mediaMultiple' },
+        { label: 'Email', description: 'Email field', icon: 'pi pi-envelope', value: 'email' },
+        { label: 'Password', description: 'Password input field', icon: 'pi pi-lock', value: 'password' },
+        { label: 'Static Selection', description: 'Predefined selection of values', icon: 'pi pi-list', value: 'selectionStatic' },
+        { label: 'Dynamic Selection', description: 'Selection from a dynamic list', icon: 'pi pi-list', value: 'selectionDynamic' },
+        { label: 'Computed', description: 'A computed field based on other data', icon: 'pi pi-cog', value: 'computed' },
+        // { label: 'External ID', description: 'An external identifier', icon: 'pi pi-key', value: 'externalId' },
+        { label: 'UUID', description: 'Unique Identifier', icon: 'pi pi-key', value: 'uuid' }
+        
+    ];
+
+
+    const handleFieldSelect = (fieldValue: any) => {
+        setSelectedField(fieldValue);
+        console.log('Selected Field:', fieldValue); // You can replace this with any action you want
+    };
+
+    return (
+        <div>
+            <div className="grid p-nogutter field-selection-form">
+            <div className="md:col-12 sm:col-12">
+
+            <h4 className='mt-2 mb-2'>Select Field Type</h4>
+            </div>
+                {solidFieldOptions.map((field, index) => (
+                    <div className="md:col-6 sm:col-12">
+                        <div
+                            className={`flex align-items-center type-field-card ${selectedField === field.value ? 'selected' : ''}`}
+                            onClick={() => handleTypeSelect(field.value)}
+                        >
+                            <i className={`type-icon pi ${field.icon}`} style={{ fontSize: '2em', marginBottom: '10px' }}></i>
+                            <div className='type-text'>
+                                <p className='type-heading'>{field.label}</p>
+                                <p className='type-description'>{field.description}</p>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+
+            </div>
+
+        </div>
+    );
+};
+
+export default FieldSelector;

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

@@ -0,0 +1,383 @@
+"use client";
+import { CreateButton } from "@/components/common/CreateButton";
+import {
+  useDeleteMultipleModelsMutation,
+  useGenerateCodeForModelMutation,
+  useLazyGetModelsQuery,
+} from "@/redux/api/modelApi";
+import Link from "next/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";
+
+export interface ModelMetaData {
+  id: string;
+  displayName: string;
+  module: string;
+  isSystem: boolean;
+}
+
+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 [first, setFirst] = useState(0);
+  const [rows, setRows] = useState(25);
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [sortField, setSortField] = useState("");
+  const [sortOrder, setSortOrder] = useState(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 [
+    deleteManyModel,
+    {
+      isLoading: isModelDeleted,
+      isSuccess: isDeleteModelSuceess,
+      isError: isModelDeleteError,
+      error: ModelDeleteError,
+      data: DeletedModel,
+    },
+  ] = useDeleteMultipleModelsMutation();
+
+  useEffect(() => {
+    if (model) {
+      setModelMetadata(model?.records);
+      setTotalRecords(model?.meta.totalRecords);
+      setLoading(false);
+    }
+  }, [model]);
+
+  useEffect(() => {
+    const queryData = {
+      offset: 0,
+      limit: 25,
+      sort: [`id:desc`],
+    };
+    const queryString = qs.stringify(queryData, {
+      encodeValuesOnly: true
+    });
+    triggerGetModels(queryString);
+    setSelectedMenus([]);
+  }, [isDeleteModelSuceess]);
+
+  const onPageChange = (event: any) => {
+    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);
+    setSortOrder(validSortOrder);
+    setFirst(0);
+    setQueryString(
+      0,
+      rows,
+      sortField,
+      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
+      filters
+    );
+  };
+
+  const onSelectionChange = (event: any) => {
+    const value = event.value;
+    setSelectedMenus(value);
+  };
+
+
+
+  // Filter fuctions
+  const setQueryString = async (
+    offset?: number,
+    row?: number,
+    field?: string,
+    order?: number,
+    filterQuery?: any
+  ) => {
+    const formattedFilters: any = {};
+
+    Object.keys(filterQuery).forEach((field) => {
+      const filterValue = filterQuery[field].value;
+      const matchMode = filterQuery[field].matchMode;
+
+      if (filterValue !== null && filterValue !== undefined) {
+        let operator = matchMode;
+        switch (matchMode) {
+          case FilterMatchMode.CONTAINS:
+            operator = "$containsi";
+            break;
+          case FilterMatchMode.STARTS_WITH:
+            operator = "$startsWithi";
+            break;
+          case FilterMatchMode.EQUALS:
+            operator = "$eqi";
+            break;
+          case FilterMatchMode.NOT_CONTAINS:
+            operator = "$notContainsi";
+            break;
+          case FilterMatchMode.NOT_EQUALS:
+            operator = "$nei";
+            break;
+          case FilterMatchMode.ENDS_WITH:
+            operator = "$endsWithi";
+            break;
+          default:
+            operator = matchMode;
+        }
+
+        if (field.includes(".")) {
+          const fieldParts = field.split(".");
+          if (!formattedFilters[fieldParts[0]]) {
+            formattedFilters[fieldParts[0]] = {};
+          }
+          formattedFilters[fieldParts[0]][fieldParts[1]] = {
+            [operator]: filterValue,
+          };
+        } else {
+          formattedFilters[field] = { [operator]: filterValue };
+        }
+      }
+    });
+
+    const queryData: any = {
+      offset: offset ?? first,
+      limit: row ?? rows,
+      filters: formattedFilters,
+    };
+
+    if (field) {
+      queryData.sort = [
+        `${field}:${order == 0 ? null : order == 1 ? "asc" : "desc"}`,
+      ];
+    }
+
+    const queryString = qs.stringify(queryData, {
+      encodeValuesOnly: true,
+    });
+
+    triggerGetModels(queryString);
+  };
+
+  const onFilter = (e: any) => {
+    setFilters(e.filters);
+    setQueryString(
+      0,
+      rows,
+      sortField,
+      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
+      e.filters
+    );
+  };
+
+  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 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 deleteBulk = () => {
+    let deleteList: any = [];
+    selectedMenus.forEach((element: ModelMetaData) => {
+      deleteList.push(element.id);
+    });
+    deleteManyModel(deleteList);
+    setDialogVisible(false);
+  };
+
+  const onDeleteClose = () => {
+    setDialogVisible(false);
+    setSelectedMenus([]);
+  }
+
+  const onGenerateCodeClose = () => {
+    setGenerateCodeVisible(false);
+    setSelectedMenus([]);
+
+  }
+  return (
+    <div className="">
+      <div className="flex gap-3 mb-4">
+        <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"
+      /> */}
+      </div>
+      <style>{`
+      .p-datatable .p-datatable-loading-overlay {
+      background-color: rgba(0, 0, 0, 0.0);
+      }
+      `}</style>
+      <DataTable
+        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)}
+        sortField={sortField}
+        sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
+        loading={loading || isLoading}
+        loadingIcon="pi pi-spinner"
+        selection={selectedMenus}
+        onSelectionChange={onSelectionChange}
+        selectionMode="multiple"
+        removableSort
+      >
+        <Column selectionMode="multiple" headerStyle={{ width: "3em" }} />
+        <Column field="id" header="Id" className="text-sm" sortable headerClassName="table-header-fs"></Column>
+        <Column
+          field="displayName"
+          header="displayName"
+          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>
+
+      </DataTable>
+      <Dialog
+        visible={isDialogVisible}
+        header="Confirm Delete"
+        modal
+        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
+        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)}
+      >
+        <p className="">Click Ok to proceed with model code generation, please note that if the file already exists and <br></br>you have made custom changes to this file we will create a .bkp file as a backup of the existing file.</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>
+        </ul>
+        <ul></ul>
+      </Dialog>
+    </div>
+  );
+};