@solidstarters/solid-core-ui 0.1.26

package/src/components/core/common/SolidCreateButton.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { Button } from 'primereact/button';
+
+export const SolidCreateButton = ({ url }: any) => {
+    const router = useRouter();
+    const pathName = usePathname();
+
+    const createPath = url ? url : pathName.split('/').slice(0, -1).join('/') + '/form/new';
+
+
+    return (
+        <div>
+            <Link href={createPath}>
+              <Button type="button" icon="pi pi-plus" label="Add" size='small'  className='small-button' ></Button>
+            </Link>
+        </div>
+    )
+}

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { Dialog } from "primereact/dialog";
+import { TabPanel, TabView } from "primereact/tabview";
+import { SolidKanbanFilter } from "../kanban/SolidKanbanFilter";
+import { SolidSearchBox } from "./SolidSearchBox";
+
+
+export const SolidGlobalSearchElement = ({ solidKanbanViewMetaData, applyFilter, filterValues, setFilterValues }: any) => {
+
+    const [visible, setVisible] = useState<boolean>(false);
+    const handleApplyFilter = (filters: any) => {
+        setVisible(false);
+        applyFilter(filters)
+    }
+
+    return (
+
+
+        <div className="card flex justify-content-center">
+            <i className="pi pi-search" onClick={() => setVisible(true)}></i>
+
+            <Dialog header={false} visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+                <div className="card relative">
+                    <TabView>
+                        <TabPanel header="Search">
+                            <SolidSearchBox solidKanbanViewMetaData={solidKanbanViewMetaData}></SolidSearchBox>
+                        </TabPanel>
+                        <TabPanel header="Filter" >
+                            <SolidKanbanFilter solidKanbanViewMetaData={solidKanbanViewMetaData} handleApplyFilter={handleApplyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidKanbanFilter>
+                        </TabPanel>
+                    </TabView>
+                </div >
+            </Dialog>
+        </div>
+    )
+
+}

package/src/components/core/common/SolidSearchBox.tsx

@@ -0,0 +1,17 @@
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+
+
+export const SolidSearchBox = ({ solidKanbanViewMetaData }: any) => {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+    const search = (event: any) => {
+        // setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+    console.log("solidKanbanViewMetaData",solidKanbanViewMetaData?.data?.solidView?.model?.userKeyField);
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}

package/src/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>
+  );
+};