@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/module/ModuleListViewData.tsx

@@ -0,0 +1,431 @@
+"use client";
+import { CreateButton } from "../../../components/common/CreateButton";
+import { handleError, handleSuccess } from "../../../helpers/ToastContainer";
+import { useDeleteMultiplemodulesMutation, useGenerateCodeFormoduleMutation, useLazyGetmodulesQuery, useRefreshPermissionsMutation } from "../../../redux/api/moduleApi";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+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 { Toast } from "primereact/toast";
+import qs from "qs";
+import { useEffect, useRef, useState } from "react";
+
+export interface ModelMetaData {
+  id: string;
+  displayName: string;
+  isSystem: boolean;
+}
+
+interface ErrorResponseData {
+  message: string;
+  statusCode: number;
+  error: string;
+}
+export const ModuleListViewData = () => {
+  const toast = useRef<Toast>(null);
+
+  const [moduleMetadata, setModuleMetadata] = useState<ModelMetaData[]>([]);
+
+  const [filters, setFilters] = useState<DataTableFilterMeta>({
+    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 [isGenerateCodeVisible, setGenerateCodeVisible] = useState(false);
+  const [generateCodeForModule, setGenerateCodeForModule] = useState<any>();
+
+
+  const [triggerGetModule, { data: module, isLoading, error }] =
+    useLazyGetmodulesQuery();
+
+  const [
+    generateCode,
+    { isLoading: isGenerateCodeUpdating, isSuccess: isGenerateCodeSuceess, isError: isGenerateCodeError, error: generateCodeError, data: generateCodeData },
+  ] = useGenerateCodeFormoduleMutation();
+
+  const [
+    refreshPermission,
+    { isLoading: isRefreshPermissionUpdating, isSuccess: isRefreshPermissionSuceess, isError: isRefreshPermissionError, error: refreshPermissionError, data: refreshPermissionData },
+  ] = useRefreshPermissionsMutation()
+  const [
+    deleteManyModules,
+    {
+      isLoading: isModuleDeleted,
+      isSuccess: isDeleteModuleSuceess,
+      isError: isModuleDeleteError,
+      error: ModuleDeleteError,
+      data: DeletedModule,
+    },
+  ] = useDeleteMultiplemodulesMutation();
+
+  useEffect(() => {
+    if (module) {
+      setModuleMetadata(module?.records);
+      setTotalRecords(module?.meta.totalRecords);
+      setLoading(false);
+    }
+  }, [module]);
+
+
+  useEffect(() => {
+    const queryData = {
+      offset: 0,
+      limit: 25,
+      sort: [`id:desc`],
+    };
+    const queryString = qs.stringify(queryData, {
+      encodeValuesOnly: true
+    });
+    triggerGetModule(queryString);
+    setSelectedMenus([]);
+  }, [isDeleteModuleSuceess]);
+
+  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,
+    });
+
+    triggerGetModule(queryString);
+  };
+
+  const onFilter = (e: any) => {
+    setFilters(e.filters);
+    setQueryString(
+      0,
+      rows,
+      sortField,
+      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
+      e.filters
+    );
+  };
+
+  const detailsBodyTemplate = (moduleMetadata: ModelMetaData) => {
+    return (
+      <Link
+        href={`${moduleMetadata.id}`}
+        rel="noopener noreferrer"
+        className="text-sm font-bold p-0"
+        style={{ color: "#12415D" }}
+      >
+        {moduleMetadata.isSystem === true &&
+          < i className="pi pi-eye" style={{ fontSize: "1rem" }}></i>
+        }
+        {moduleMetadata.isSystem === false &&
+          < i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
+        }
+      </Link >
+    );
+  };
+
+  const generateCodeBodyTemplate = (moduleMetadata: ModelMetaData) => {
+
+    return (
+      <a onClick={() => {
+        setGenerateCodeForModule(moduleMetadata.id);
+        setGenerateCodeVisible(true);
+      }}
+        rel="noopener noreferrer"
+        className="text-sm font-bold p-0"
+        style={{ color: "#12415D" }}
+      >
+        {moduleMetadata.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);
+    });
+    deleteManyModules(deleteList);
+    setDialogVisible(false);
+  };
+
+  const onDeleteClose = () => {
+    setDialogVisible(false);
+    setSelectedMenus([]);
+  }
+
+  const generateCodeHandler = async () => {
+    await generateCode({ id: generateCodeForModule })
+    setGenerateCodeVisible(false)
+  }
+
+  const onGenerateCodeClose = () => {
+    setGenerateCodeVisible(false);
+    setSelectedMenus([]);
+
+  }
+  const isFetchBaseQueryErrorWithErrorResponse = (error: any): error is FetchBaseQueryError & { data: ErrorResponseData } => {
+    return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
+  }
+
+  // const handleError = (errorToast: any) => {
+  //   let errorMessage: any = ['An error occurred'];
+
+  //   if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+  //     errorMessage = errorToast.data.message;
+  //   } else {
+  //     errorMessage = ['Something went wrong'];
+  //   }
+
+  //   toast?.current?.show({
+  //     severity: 'error',
+  //     summary: 'Error',
+  //     detail: errorMessage,
+  //     life: 3000,
+  //     //@ts-ignore
+  //     content: (props) => (
+  //       <div className="flex flex-column align-items-left" style={{ flex: "1" }}>
+  //         {Array.isArray(errorMessage) ? (
+  //           errorMessage.map((message, index) => (
+  //             <div className="flex align-items-center gap-2" key={index}>
+  //               <span className="font-bold text-900">{message.trim()}</span>
+  //             </div>
+  //           ))
+  //         ) : (
+  //           <div className="flex align-items-center gap-2">
+  //             <span className="font-bold text-900">{errorMessage?.trim()}</span>
+  //           </div>
+  //         )}
+  //       </div>
+  //     ),
+  //   });
+  // };
+
+
+  useEffect(() => {
+    if (isGenerateCodeError) {
+      handleError(generateCodeError)
+    }
+  }, [isGenerateCodeError])
+
+
+  useEffect(() => {
+    if (isGenerateCodeSuceess) {
+      handleSuccess(["Code Generated Successfully"])
+    }
+  }, [isGenerateCodeSuceess])
+
+  const handleRefreshPermission = () => {
+    refreshPermission("")
+  }
+
+  return (
+    <div className="">
+      <Toast ref={toast} />
+
+      <div className="flex gap-3 mb-4">
+        <CreateButton />
+        <Button className='small-button' onClick={handleRefreshPermission}>Refresh Permissions</Button>
+        {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={moduleMetadata}
+        lazy
+        size="small"
+        paginator
+        rows={rows}
+        rowsPerPageOptions={[10, 25, 50]}
+        dataKey="id"
+        filters={filters}
+        emptyMessage="No Modules 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="Display Name"
+          className="text-sm"
+          sortable
+          filter
+          filterPlaceholder="Search model by 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
+        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 Modules?</p>
+      </Dialog>
+      <Dialog
+        visible={isGenerateCodeVisible}
+        header="Generate Code"
+        headerClassName="text-center"
+        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={generateCodeHandler} />
+            <Button label="No" icon="pi pi-times" className='small-button' onClick={onGenerateCodeClose} />
+          </div>
+        )}
+        onHide={() => setGenerateCodeVisible(false)}
+      >
+        <p className="text-center">Proceed with module code generation? Existing files will be overwritten.</p>
+      </Dialog>
+    </div>
+  );
+};

package/dist/components/core/solid-ai/SolidAiMainWrapper.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { SolidXAiIframe } from "../common/SolidXAiIframe";
+export const SolidAiMainWrapper = ({ mcpUrl }: any) => {
+    return (
+        <SolidXAiIframe url={mcpUrl} />
+    );
+};

package/dist/components/core/solid-ai/SolidXAIIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+export const SolidXAIIcon = ({ size }: any) => {
+    return (
+        <div className='-rotate-180'>
+            <svg xmlns="http://www.w3.org/2000/svg" width={size ? size : "16"} height={size ? size : "16"} viewBox="0 0 35 34" fill="none">
+                <g clip-path="url(#clip0_7125_10237)">
+                    <mask id="mask0_7125_10237" style={{ maskType: 'luminance' }} maskUnits="userSpaceOnUse" x="1" y="0" width="34" height="34">
+                        <path d="M1.26172 26.3104C1.26172 30.0204 4.27172 33.0304 7.99172 33.0304C11.7117 33.0304 14.7117 30.0204 14.7117 26.3104C14.7117 22.6004 11.7017 19.5804 7.99172 19.5804C4.28172 19.5804 1.26172 22.5904 1.26172 26.3104ZM21.1317 7.86043C21.1317 11.5704 24.1417 14.5904 27.8517 14.5904C31.5617 14.5904 34.5817 11.5804 34.5817 7.86043C34.5817 4.14043 31.5717 1.14043 27.8517 1.14043C24.1317 1.14043 21.1317 4.15043 21.1317 7.86043ZM3.27172 7.13043C3.02172 8.96043 3.55172 11.3904 4.82172 12.8204C7.49172 15.8304 13.8317 14.7404 16.6117 18.4204C19.1217 21.7404 17.1617 26.3504 19.4717 29.8304C19.7517 30.3004 20.0617 30.6904 20.4217 30.9804C21.4817 32.0204 22.8617 32.7404 24.4517 32.9604C28.3717 33.5004 31.9917 30.7704 32.5417 26.8404C32.8017 24.9704 32.3617 23.0004 31.1817 21.5104C30.4117 20.5304 29.3817 19.8104 28.2517 19.3004C27.9017 19.1504 27.5517 19.0304 27.1917 18.9404C25.9817 18.6404 24.7117 18.6204 23.4717 18.3604C21.8917 18.0204 20.3117 17.3304 19.1617 16.1504C17.9817 14.9404 17.9017 8.36043 17.3317 6.41043C16.6517 3.64043 14.3517 1.42043 11.3517 1.01043C11.0217 0.96043 10.6817 0.94043 10.3617 0.94043C6.84172 0.94043 3.76172 3.54043 3.26172 7.13043" fill="white" />
+                    </mask>
+                    <g mask="url(#mask0_7125_10237)">
+                        <path d="M22.7464 -14.999L-14.3213 12.5098L13.0922 49.4489L50.1598 21.9401L22.7464 -14.999Z" fill="url(#paint0_linear_7125_10237)" />
+                    </g>
+                </g>
+                <defs>
+                    <linearGradient id="paint0_linear_7125_10237" x1="7.15705" y1="1.69778" x2="29.3143" y2="31.5543" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#FF8FD3" />
+                        <stop offset="0.01" stopColor="#FF8FD3" />
+                        <stop offset="0.04" stopColor="#F870B7" />
+                        <stop offset="0.07" stopColor="#F14E9A" />
+                        <stop offset="0.08" stopColor="#EF428F" />
+                        <stop offset="0.24" stopColor="#B83291" />
+                        <stop offset="0.49" stopColor="#691D95" />
+                        <stop offset="0.66" stopColor="#380F98" />
+                        <stop offset="0.75" stopColor="#250A99" />
+                        <stop offset="0.8" stopColor="#251BA4" />
+                        <stop offset="0.91" stopColor="#2547C1" />
+                        <stop offset="1" stopColor="#256DDB" />
+                    </linearGradient>
+                    <clipPath id="clip0_7125_10237">
+                        <rect width="34" height="34" fill="white" transform="translate(0.360352)" />
+                    </clipPath>
+                </defs>
+            </svg>
+        </div >
+    )
+}