@solidstarters/solid-core-ui 1.1.69 → 1.1.71

package/dist/components/core/field/FieldListViewData.tsx

@@ -0,0 +1,312 @@
+"use client";
+import { useLazyGetfieldsQuery } from "@/redux/api/fieldApi";
+import {
+  useDeleteMultipleModelsMutation,
+} 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;
+  model: string;
+}
+
+export const FieldListViewData = () => {
+  const [fieldMetaData, setFieldMetadata] = useState<ModelMetaData[]>([]);
+
+  const [filters, setFilters] = useState<DataTableFilterMeta>({
+    displayName: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+    "model.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: field, isLoading, error }] =
+    useLazyGetfieldsQuery();
+
+  const [
+    deleteManyModel,
+    {
+      isLoading: isModelDeleted,
+      isSuccess: isDeleteModelSuceess,
+      isError: isModelDeleteError,
+      error: ModelDeleteError,
+      data: DeletedModel,
+    },
+  ] = useDeleteMultipleModelsMutation();
+
+  useEffect(() => {
+    if (field) {
+      setFieldMetadata(field?.records);
+      setTotalRecords(field?.meta.totalRecords);
+      setLoading(false);
+    }
+  }, [field]);
+
+  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 = (fieldMetaData: ModelMetaData) => {
+    return (
+      <Link
+        href={fieldMetaData.id}
+        rel="noopener noreferrer"
+        className="text-sm font-bold p-0"
+        style={{ color: "#12415D" }}
+      >
+        <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
+      </Link>
+    );
+  };
+
+  const deleteBulk = () => {
+    let deleteList: any = [];
+    selectedMenus.forEach((element: ModelMetaData) => {
+      deleteList.push(element.id);
+    });
+    deleteManyModel(deleteList);
+    setDialogVisible(false);
+  };
+
+  const onDeleteClose = () => {
+    setDialogVisible(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={fieldMetaData}
+        lazy
+        size="small"
+        paginator
+        rows={rows}
+        rowsPerPageOptions={[10, 25, 50]}
+        dataKey="id"
+        filters={filters}
+        emptyMessage="No Fields 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="model.displayName"
+          header="Model Name"
+          className="text-sm"
+          // sortable
+          filter
+          filterPlaceholder="Search Fields by Model name"
+          style={{ minWidth: "12rem" }}
+          headerClassName="table-header-fs"
+        ></Column>
+        {/* <Column body={detailsBodyTemplate}></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>
+    </div>
+  );
+};

package/dist/components/core/filter/SolidFilterFields.tsx

@@ -0,0 +1,128 @@
+"use client";
+import SolidBigintField from "./fields/SolidBigintField";
+import SolidFloatField from "./fields/SolidFloatField";
+import SolidDecimalField from "./fields/SolidDecimalField";
+import SolidShortTextField from "./fields/SolidShortTextField";
+import SolidLongTextField from "./fields/SolidLongTextField";
+import SolidRichTextField from "./fields/SolidRichTextField";
+import SolidBooleanField from "./fields/SolidBooleanField";
+import SolidDateField from "./fields/SolidDateField";
+import SolidDatetimeField from "./fields/SolidDatetimeField";
+import SolidTimeField from "./fields/SolidTimeField";
+import SolidRelationField from "./fields/SolidRelationField";
+import SolidMediaSingleField from "./fields/SolidMediaSingleField";
+import SolidMediaMultipleField from "./fields/SolidMediaMultipleField";
+import SolidSelectionStaticField from "./fields/SolidSelectionStaticField";
+import SolidSelectionDynamicField from "./fields/SolidSelectionDynamicField";
+import SolidComputedField from "./fields/SolidComputedField";
+import SolidExternalIdField from "./fields/SolidExternalIdField";
+import SolidUuidField from "./fields/SolidUuidField";
+import SolidIntField from "./fields/SolidIntField";
+// import SolidRelationField from "./columns/SolidRelationField";
+// import SolidMediaSingleField from "./columns/SolidMediaSingleField";
+// import SolidMediaMultipleField from "./columns/SolidMediaMultipleField";
+// import SolidSelectionStaticField from "./columns/SolidSelectionStaticField";
+// import SolidSelectionDynamicField from "./columns/SolidSelectionDynamicField";
+// import SolidComputedField from "./columns/SolidComputedField";
+// import SolidExternalIdField from "./columns/SolidExternalIdField";
+// import SolidUuidField from "./columns/SolidUuidField";
+
+export type SolidFilterFieldsParams = {
+    solidViewMetaData?: any;
+    fieldMetadata: any,
+    onChange: any,
+    index: any,
+    rule: any
+};
+
+export const getNumberOfInputs = (matchMode: any): number | null => {
+
+    switch (matchMode) {
+        case '$between':
+            return 2;
+        case '$in':
+        case '$notIn':
+            return null;
+        case '$startsWith':
+        case '$contains':
+        case '$notContains':
+        case '$endsWith':
+        case '$equals':
+        case '$notEquals':
+        case '$lt':
+        case '$lte':
+        case '$gt':
+        case '$gte':
+            return 1;
+        default:
+            return 1; // Default to single input if no specific match is found
+    }
+}
+
+export const SolidFilterFields = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+
+    if (fieldMetadata) {
+
+        // And finally we can implement additional switching logic based on certain special fields. 
+        if (fieldMetadata.name === 'id') {
+            return SolidIntField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'int') {
+            return SolidIntField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'bigint') {
+            return SolidBigintField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'float') {
+            return SolidFloatField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'decimal') {
+            return SolidDecimalField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'shortText') {
+            return SolidShortTextField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'longText') {
+            return SolidLongTextField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'richText') {
+            return SolidRichTextField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'boolean') {
+            return SolidBooleanField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'date') {
+            return SolidDateField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'datetime') {
+            return SolidDatetimeField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'time') {
+            return SolidTimeField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'relation') {
+            return SolidRelationField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'mediaSingle') {
+            return SolidMediaSingleField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'mediaMultiple') {
+            return SolidMediaMultipleField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'selectionStatic') {
+            return SolidSelectionStaticField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'selectionDynamic') {
+            return SolidSelectionDynamicField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'computed') {
+            return SolidComputedField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'externalId') {
+            return SolidExternalIdField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'uuid') {
+            return SolidUuidField({ fieldMetadata, onChange, index, rule });
+        }
+    }
+};

package/dist/components/core/filter/SolidManyToOneFilterElement.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+import qs from "qs";
+
+
+export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    const { useLazyGetSolidEntitiesQuery } = entityApi;
+    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+    const [autoCompleteItems, setAutoCompleteItems] = useState([]);
+    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            filters: {
+                [fieldMetadata?.relationModel?.userKeyField?.name]: {
+                    $containsi: event.query
+                }
+            }
+        };
+
+        const autocompleteQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const autocompleteData = autocompleteResponse.data;
+
+        if (autocompleteData) {
+            const autoCompleteItems = autocompleteData.records.map((item: any) => {
+                return {
+                    label: item[fieldMetadata?.relationModel?.userKeyField?.name],
+                    value: item['id']
+                }
+            });
+            setAutoCompleteItems(autoCompleteItems);
+        }
+    }
+
+    return (
+        <AutoComplete
+        field="label"
+        value={value}
+        suggestions={autoCompleteItems}
+        completeMethod={autoCompleteSearch}
+        onChange={(e) => updateInputs(index, e.value)}
+        className="w-full"
+        inputClassName="w-full p-inputtext-sm"
+    />
+    )
+}

package/dist/components/core/filter/SolidSelectionDynamicFilterElement.tsx

@@ -0,0 +1,50 @@
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+import qs from "qs";
+import { useLazyGetSelectionDynamicValuesQuery } from "@/redux/api/fieldApi";
+
+
+export const SolidSelectionDynamicFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+
+    // selection dynamic specific code. 
+    const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
+    const [selectionDynamicItems, setSelectionDynamicItems] = useState([]);
+    const selectionDynamicSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            query: event.query,
+            fieldId: fieldMetadata.id
+        };
+
+        const sdQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const sdData = sdResponse.data.data;
+
+        // @ts-ignore
+        setSelectionDynamicItems(sdData);
+    }
+
+
+    return (
+        <AutoComplete
+            field="label"
+            value={value}
+            dropdown
+            suggestions={selectionDynamicItems}
+            completeMethod={selectionDynamicSearch}
+            onChange={(e) => updateInputs(index, e.value)}
+            className="w-full"
+            inputClassName="w-full p-inputtext-sm"
+        />
+    )
+}

package/dist/components/core/filter/SolidSelectionStaticFilterElement.tsx

@@ -0,0 +1,32 @@
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+
+
+export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+    // selection dynamic specific code. 
+    const [selectionStaticItems, setSelectionStaticItems] = useState([]);
+    const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
+        const selectionStaticData = fieldMetadata.selectionStaticValues.map((i: string) => {
+            return {
+                label: i.split(":")[1],
+                value: i.split(":")[0]
+            }
+        });
+        const suggestionData = selectionStaticData.filter((t: any) => t.value.toLowerCase().startsWith(event.query.toLowerCase()));
+        setSelectionStaticItems(suggestionData)
+    }
+
+    return (
+        <AutoComplete
+            field="label"
+            value={value}
+            dropdown
+            suggestions={selectionStaticItems}
+            completeMethod={selectionStaticSearch}
+            onChange={(e) => updateInputs(index, e.value)}
+            className="w-full"
+            inputClassName="w-full p-inputtext-sm"
+        />
+    )
+}