@solidxai/core-ui 0.1.1 → 0.1.2

package/src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx

@@ -1,131 +0,0 @@
-
-import { capitalize } from "lodash";
-import { Panel } from "primereact/panel";
-import { useEffect, useState } from "react";
-import { Button } from "primereact/button";
-import { InputSwitch } from "primereact/inputswitch";
-import { useRelationEntityHandler } from "../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
-import { InlineRelationEntityDialog } from "../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
-import { Checkbox } from "primereact/checkbox";
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import qs from 'qs';
-
-const groupByController = (items: any[]) => {
-    const grouped: { [key: string]: any[] } = {};
-    items.forEach((item) => {
-        const controllerName = item.label.split(".")[0];
-        if (!grouped[controllerName]) {
-            grouped[controllerName] = [];
-        }
-        grouped[controllerName].push(item);
-    });
-    return grouped;
-};
-
-export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldLayoutInfo = fieldContext.field;
-
-    const readOnlyPermission = fieldContext.readOnly;
-    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
-    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
-    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});
-
-    useEffect(() => {
-        const queryData: any = {
-            offset: 0,
-            limit: 1000
-        };
-        const autocompleteQs = qs.stringify(queryData, {
-            encodeValuesOnly: true,
-        });
-        fetchRelationEntities(autocompleteQs);
-    }, []);
-
-    const handleCheckboxChange = (e: any) => {
-        if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));
-        } else {
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);
-        }
-    };
-
-    const getHeaderTemplate = (controllerName: string) => (options: any) => {
-        const className = `${options.className} justify-content-space-between`;
-    
-        return (
-            <div className={className}>
-                <div className="flex align-items-center gap-3">
-                    <label className="form-field-label text-base lg:text-lg font-bold">
-                        {controllerName}
-                    </label>
-                    {fieldContext.field.attrs.inlineCreate && (
-                        <>
-                            <Button
-                                icon="pi pi-plus"
-                                rounded
-                                outlined
-                                aria-label="Add"
-                                type="button"
-                                size="small"
-                                onClick={() =>
-                                    setVisibleDialogs((prev) => ({
-                                        ...prev,
-                                        [controllerName]: true,
-                                    }))
-                                }
-                                className="custom-add-button"
-                            />
-                            <InlineRelationEntityDialog
-                                visible={visibleCreateDialog}
-                                setVisible={setVisibleCreateDialog}
-                                fieldContext={fieldContext}
-                                onCreate={addNewRelation}
-                            />
-                        </>
-                    )}
-                </div>
-                <div>{options.togglerElement}</div>
-            </div>
-        );
-    };
-    
-    const groupedEntities = groupByController(autoCompleteItems || []);
-    return (
-            <div>
-                {Object.keys(groupedEntities).map((controllerName) => (
-                    <Panel toggleable headerTemplate={getHeaderTemplate(controllerName)} key={controllerName} className="mt-3 lg:mt-4">
-                        <div className="formgrid grid gap-3 lg:gap-0 ">
-                            {groupedEntities[controllerName].map((entity: any, i: number) => {
-                                const isChecked = formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === entity.value);
-                                return (
-                                    <div key={entity.label} className={`field col-12 lg:col-6  flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}>
-                                        <Checkbox
-                                            readOnly={readOnlyPermission}
-                                            inputId={entity.label}
-                                            checked={isChecked}
-                                            onChange={() => handleCheckboxChange(entity)}
-                                        />
-                                        <label htmlFor={entity.label} className="form-field-label m-0 solid-permisson-form-label"> {entity.label}</label>
-                                    </div>
-                                )
-                            })}
-                        </div>
-                    </Panel>
-                ))}
-                {Object.keys(groupedEntities).map((controllerName) => (
-                    <InlineRelationEntityDialog
-                        key={`dialog-${controllerName}`}
-                        visible={visibleDialogs[controllerName] || false}
-                        setVisible={(visible: any) =>
-                            setVisibleDialogs((prev) => ({
-                                ...prev,
-                                [controllerName]: visible,
-                            }))
-                        }
-                        fieldContext={fieldContext}
-                        onCreate={addNewRelation}
-                    />
-                ))}
-            </div>
-        )
-};

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

@@ -1,313 +0,0 @@
-
-import { useLazyGetfieldsQuery } from "../../../redux/api/fieldApi";
-import {
-  useDeleteMultipleModelsMutation,
-} 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";
-
-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
-        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>
-    </div>
-  );
-};

package/src/components/core/filter/SolidBooleanFilterElement.tsx

@@ -1,30 +0,0 @@
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { useState } from "react";
-
-
-export const SolidBooleanFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
-
-    // selection dynamic specific code. 
-    const [selectionStaticItems, setSelectionStaticItems] = useState<any>([]);
-    const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
-        const selectionStaticData = [
-            { label: 'true', value: "true" },
-            { label: 'false', value: "false" }
-        ]
-        const suggestionData = selectionStaticData.filter((t: any) => t.value.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"
-        />
-    )
-}

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

@@ -1,131 +0,0 @@
-
-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;
-        case '$null':
-        case '$notNull':
-            return 0;    
-        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/src/components/core/filter/SolidManyToManyFilterElement.tsx

@@ -1,64 +0,0 @@
-
-
-import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { useEffect, useState } from "react";
-import qs from "qs";
-
-export const SolidManyToManyFilterElement = ({
-    value = [],
-    updateInputs,
-    index,
-    fieldMetadata
-}: any) => {
-
-    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
-    const { useLazyGetSolidEntitiesQuery } = entityApi;
-    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
-
-    const [suggestions, setSuggestions] = useState<any[]>([]);
-
-    const search = async (event: AutoCompleteCompleteEvent) => {
-        const queryData = {
-            offset: 0,
-            limit: 20,
-            filters: {
-                [fieldMetadata?.relationModel?.userKeyField?.name]: {
-                    $containsi: event.query
-                }
-            }
-        };
-
-        const qsString = qs.stringify(queryData, { encodeValuesOnly: true });
-        const response = await triggerGetSolidEntities(qsString);
-
-        if (response.data) {
-            setSuggestions(
-                response.data.records.map((item: any) => ({
-                    label: item[fieldMetadata.relationModel.userKeyField.name],
-                    value: item.id
-                }))
-            );
-        }
-    };
-
-
-    return (
-        <AutoComplete
-            // multiple
-            dropdown
-            field="label"
-            value={value}
-            suggestions={suggestions}
-            completeMethod={search}
-            onChange={(e) => {
-                // const cleanValues = Array.isArray(e.value) ? e.value : [];
-                // updateInputs(index, cleanValues);
-                updateInputs(index, e.value)
-            }}
-            placeholder={`Select ${fieldMetadata.displayName}`}
-            className="w-full"
-            inputClassName="w-full p-inputtext-sm"
-        />
-    );
-};