@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/extension/solid-core/moduleMetadata/list/GenerateModuleCodeRowAction.tsx

@@ -0,0 +1,209 @@
+'use client';
+import { SolidCircularLoader } from "../../../../../../components/core/common/SolidLoaders/SolidCircularLoader";
+import { ERROR_MESSAGES } from "../../../../../../constants/error-messages";
+import { useGenerateCodeFormoduleMutation } from "../../../../../../redux/api/moduleApi";
+import { useSeederMutation } from "../../../../../../redux/api/solidServiceApi";
+import { closePopup } from "../../../../../../redux/features/popupSlice";
+import { SolidListRowdataDynamicFunctionProps } from "../../../../../../types/solid-core";
+import { Button } from "primereact/button";
+import { Toast } from "primereact/toast";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+
+const GenerateModuleCodeRowAction = (event: SolidListRowdataDynamicFunctionProps) => {
+    const dispatch = useDispatch()
+    const [generateCode, {
+        isLoading: isGenerateCodeUpdating,
+        isSuccess: isGenerateCodeSuceess,
+        isError: isGenerateCodeError,
+        error: generateCodeError,
+        data: generateCodeData
+    }] = useGenerateCodeFormoduleMutation();
+
+    // const mqMessageApi = createSolidEntityApi("mqMessage");
+    // const {
+    //     useGetSolidEntitiesQuery: useGetMqMessageQuery,
+    //     useLazyGetSolidEntitiesQuery: useLazyGetMqMessageQuery,
+    // } = mqMessageApi;
+    // const [getMqMessageStatus, {
+    //     data: solidListViewMetaData,
+    //     error: solidListViewMetaDataError,
+    //     isLoading: solidListViewMetaDataIsLoading,
+    //     isError: solidListViewMetaDataIsError
+    // }] = useLazyGetMqMessageQuery();
+    // const fetchMqMessageStatus = async (retries = 30, delay = 500, generateCodeData: any): Promise<boolean> => {
+    //     for (let i = 0; i < retries; i++) {
+    //         try {
+    //             const query = {
+    //                 filters: {
+    //                     messageId: {
+    //                         $eq: generateCodeData?.data?.messageId
+    //                     }
+    //                 }
+    //             };
+    //             const queryString = qs.stringify(query, {
+    //                 encodeValuesOnly: true,
+    //             });
+    //             const res = await getMqMessageStatus(queryString)
+    //             if (res.isSuccess === true) {
+    //                 if (res.data.records.length > 0) {
+    //                     const messageStage = res.data.records[0].stage;
+    //                     console.log("messageStatus", messageStage);
+    //                     if (messageStage === "succeeded") {
+    //                         return true
+    //                     }
+    //                     if (messageStage === "failed") {
+    //                         return false
+    //                     }
+    //                 }
+    //             }
+    //         } catch (e) {
+    //             // ignore and retry
+    //         }
+    //         await new Promise((resolve) => setTimeout(resolve, delay));
+    //     }
+    //     return false;
+    // };
+
+    const generateCodeHandler = async () => {
+        try {
+            const response = await generateCode({ id: event?.rowData?.id });
+            console.log(ERROR_MESSAGES.RESPONSE_GENERATE_CODE_HANDLER, response);
+            setIsGenerating(true);
+        } catch (error) {
+            setIsGenerating(false);
+            dispatch(closePopup());
+            console.log("error",error);
+            showToast("error", "Something went wrong.", ERROR_MESSAGES.API_ERROR);
+        }
+    }
+
+    // TODO: START REFACTORING - reusable code alert
+    const [triggerSeeder, {
+        data,
+        isLoading,
+        isSuccess: isSeederSuccess,
+        isError: isSeederError
+    }] = useSeederMutation();
+
+    // Utitlity to track if solid-api is up
+    const [isPinging, setIsPinging] = useState(false);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const pingBackendWithRetry = async (retries = 30, delay = 500): Promise<boolean> => {
+        for (let i = 0; i < retries; i++) {
+            try {
+                const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/ping`);
+                console.log("ping response", res);
+
+                if (res.ok)
+                    return true;
+            } catch (e) {
+                // ignore and retry
+            }
+            await new Promise((resolve) => setTimeout(resolve, delay));
+        }
+        return false;
+    };
+
+    const toast = useRef<Toast>(null);
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true }            // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+
+    useEffect(() => {
+        const runSeederIfBackendAlive = async () => {
+            if (isGenerateCodeSuceess) {
+                console.log("isGenerateCodeSuceess", isGenerateCodeSuceess);
+                setIsPinging(true);
+                // const hasMqMessageCompleted = await fetchMqMessageStatus(30, 500, generateCodeData);
+                const isAlive = await pingBackendWithRetry(30, 500);
+
+                setIsPinging(false);
+
+                // if (hasMqMessageCompleted && isAlive) {
+                if (isAlive) {
+                    await triggerSeeder("ModuleMetadataSeederService");
+                } else {
+                    dispatch(closePopup());
+                    console.log(ERROR_MESSAGES.BACKEND_NOT_ALIVE);
+                    showToast("error", ERROR_MESSAGES.BACKEND_UNAVAILABLE, ERROR_MESSAGES.SEEDER_NOT_TRIGGERED);
+                }
+            }
+        };
+        setTimeout(() => {
+            runSeederIfBackendAlive();
+        }, 5000);
+    }, [isGenerateCodeSuceess]);
+
+    useEffect(() => {
+        if (isSeederSuccess) {
+            console.log(ERROR_MESSAGES.IS_SEEDER_SUCCESS, data);
+            showToast("success", ERROR_MESSAGES.CODE_GENERTAE_SUCCESSFULLY, ERROR_MESSAGES.CODE_GENERTAE_SUCCESSFULLY);
+            setIsGenerating(false);
+            dispatch(closePopup());
+            window.location.reload();
+        }
+        if (isSeederError) {
+            console.log(ERROR_MESSAGES.IS_SEEDER_ERROR, isSeederError);
+            showToast("error", ERROR_MESSAGES.SEEDER_ERROR, ERROR_MESSAGES.SEEDER_NOT_RUN);
+            setIsGenerating(false);
+        }
+    }, [isSeederSuccess])
+    // TODO: END REFACTORING - reusable code alert
+
+    return (
+        <>
+            {isGenerating ?
+                <>
+                    <Toast ref={toast} />
+                    <div className="flex flex-column align-items-center justify-content-center" style={{ padding: '2rem', height: 200 }}>
+                        <SolidCircularLoader />
+                        <p className="mt-4 font-medium">Waiting for backend...</p>
+                    </div>
+                </>
+                :
+                <>
+                    <Toast ref={toast} />
+                    {event?.rowData?.name != "solid-core" ?
+                        <div className="">
+                            <div className="p-dialog-header secondary-border-bottom py-3" style={{ background: 'var(--solid-light-grey)' }}>
+                                <span className="p-dialog-title">
+                                    Generate Module
+                                </span>
+                            </div>
+                            <div className="px-4 pb-4 pt-3">
+                                <p className="text-start">Proceed with module code generation? Existing files will be overwritten.</p>
+                                <div className="flex gap-3 justify-content-start">
+                                    <Button size="small" label="Ok" autoFocus onClick={generateCodeHandler} />
+                                    <Button size="small" label="Cancel" outlined onClick={() => dispatch(closePopup())} />
+                                </div>
+                            </div>
+                        </div> :
+                        <div className="">
+                            <div className="p-dialog-header secondary-border-bottom py-3" style={{ background: 'var(--solid-light-grey)' }}>
+                                <span className="p-dialog-title">
+                                    Generate Module
+                                </span>
+                            </div>
+                            <div className="px-4 pb-4 pt-3">
+                                <p className="text-start">You cannot generate code for Solid Core modules</p>
+                                <div className="flex gap-3 justify-content-start">
+                                    <Button size="small" label="Cancel" outlined onClick={() => dispatch(closePopup())} />
+                                </div>
+                            </div>
+                        </div >
+                    }
+                </>
+            }
+        </>
+    )
+}
+
+export default GenerateModuleCodeRowAction;

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

@@ -0,0 +1,131 @@
+"use client";
+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/dist/components/core/field/FieldListViewData.tsx

@@ -0,0 +1,313 @@
+"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
+        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/dist/components/core/filter/SolidBooleanFilterElement.tsx

@@ -0,0 +1,30 @@
+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"
+        />
+    )
+}