@solidstarters/solid-core-ui 1.1.54 → 1.1.56

package/src/components/core/list/SolidListColumnSelector.tsx

@@ -0,0 +1,170 @@
+"use client"
+import { useFormik } from 'formik';
+import { Button } from 'primereact/button';
+import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
+import React, { useEffect, useRef, useState } from 'react'
+import qs from "qs";
+import { useSelector } from 'react-redux';
+import { createSolidEntityApi } from '@/redux/api/solidEntityApi';
+import { Toast } from "primereact/toast";
+
+interface FieldMetadata {
+    displayName: string;
+}
+
+interface FilterColumns {
+    name: string;
+    key: string;
+}
+
+export const SolidListColumnSelector = ({ listViewMetaData }: any) => {
+    const toast = useRef<Toast>(null);
+
+    const { user } = useSelector((state: any) => state.auth);
+    const entityApi = createSolidEntityApi('userViewMetadata');
+    const {
+        useUpsertSolidEntityMutation
+    } = entityApi;
+
+    const [upsertUserView, { isLoading, error: viewCreateError, isSuccess, data: data }] = useUpsertSolidEntityMutation();
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    if (!listViewMetaData) {
+        return;
+    }
+    if (!listViewMetaData.data) {
+        return;
+    }
+
+    const solidView = listViewMetaData?.data?.solidView;
+
+    // This is a key value map of field name vs field metadata.
+    const solidFieldsMetadata = listViewMetaData?.data?.solidFieldsMetadata as Record<string, FieldMetadata>;
+
+
+    if (!solidView || !solidFieldsMetadata) {
+        return;
+    }
+
+    const checkedFieldNames = new Set(solidView.layout.children.map((col: { attrs: { name: string } }) => col.attrs.name));
+
+    const solidListColumns: FilterColumns[] = Object.entries(solidFieldsMetadata).map(([key, field]) => ({
+        name: field.displayName,
+        key,
+    }));
+
+    const formik = useFormik({
+        initialValues: {
+            selectedColumns: solidListColumns.filter(col => checkedFieldNames.has(col.key)),
+        },
+        onSubmit: async (values) => {
+            const selectedKeys = values.selectedColumns.map(col => col.key);
+
+            // Step 1: Extract current children
+            const currentChildren = solidView.layout.children;
+
+            // Step 2: Create a map of all available metadata
+            const allFieldMeta = solidFieldsMetadata;
+
+            // Step 3: Filter children to include only selected keys
+            const newChildren = selectedKeys.map((key) => {
+                const existingChild = currentChildren.find((child: any) => child.attrs.name === key);
+                if (existingChild) {
+                    return existingChild; // keep original config
+                } else {
+                    // construct a new one if it wasn't in the original
+                    return {
+                        type: 'field',
+                        attrs: {
+                            name: key,
+                            label: allFieldMeta[key]?.displayName || key,
+                            sortable: true,
+                            filterable: true,
+                        }
+                    };
+                }
+            });
+
+            // Now build updated solidView
+            const updatedView = {
+                layout: {
+                    ...solidView.layout,
+                    children: newChildren
+                }
+            };
+
+            try {
+                if (listViewMetaData?.data?.solidView?.id) {
+                    // Update existing user view
+                    const response = await upsertUserView({
+                        userId: user?.user?.id,
+                        viewMetadataId: listViewMetaData?.data?.solidView?.id,
+                        layout: JSON.stringify(updatedView.layout),
+                    }).unwrap();
+                    if (response.statusCode === 200) {
+                        showToast("success", "Layout", "Form Layout Updated successfully!");
+                        window.location.reload();
+                    }
+                    console.log("Successfully updated:", response);
+                } else {
+                    // Create new user view
+                    console.log("Error:");
+                }
+            } catch (error) {
+                console.error("Error updating user view:", error);
+            }
+
+            console.log("Updated solidView", updatedView);
+
+        },
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-1 p-1">
+                <div className="flex flex-column gap-3 px-3 cogwheel-column-filter" style={{ maxHeight: 400, overflowY: 'auto' }}>
+                    {solidListColumns.map((column) => {
+                        return (
+                            <div key={column.key} className="flex align-items-center gap-1">
+                                <Checkbox
+                                    inputId={column.key}
+                                    name="selectedColumns"
+                                    value={column}
+                                    onChange={(e) => {
+                                        const isChecked = formik.values.selectedColumns.some(item => item.key === column.key);
+                                        formik.setFieldValue(
+                                            "selectedColumns",
+                                            isChecked
+                                                ? formik.values.selectedColumns.filter(item => item.key !== column.key)
+                                                : [...formik.values.selectedColumns, column]
+                                        );
+                                    }}
+                                    checked={formik.values.selectedColumns.some(item => item.key === column.key)}
+                                    className="text-base"
+                                />
+                                <label htmlFor={column.key} className="ml-2 text-base">
+                                    {column.name}
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+                <div className="p-3 flex gap-2">
+                    <Button type='submit' label="Apply" size="small" />
+                    <Button type='button' outlined label="Cancel" size="small"
+                        // @ts-ignore
+                        onClick={(e) => op.current.hide(e)}
+                    />
+                </div>
+            </form>
+        </>
+    )
+}

package/src/components/core/list/SolidListView.tsx

@@ -43,6 +43,7 @@ import Download from "yet-another-react-lightbox/plugins/download";
 import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
 import { SolidListViewConfigure } from "./SolidListViewConfigure";
+import { useSelector } from "react-redux";
 
 
 const getRandomInt = (min: number, max: number) => {
@@ -91,6 +92,7 @@ type SolidListViewParams = {
 export const SolidListView = (params: SolidListViewParams) => {
 
   const solidGlobalSearchElementRef = useRef();
+  const { user } = useSelector((state: any) => state.auth);
 
 
   const router = useRouter()
@@ -148,7 +150,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   } = entityApi;
 
   // Get the list view layout & metadata first. 
-  const listViewMetaDataQs = qs.stringify({ modelName: params.modelName, moduleName: params.moduleName, viewType: 'list' }, {
+  const listViewMetaDataQs = qs.stringify({ modelName: params.modelName, moduleName: params.moduleName, viewType: 'list', userId: user?.user?.id }, {
     encodeValuesOnly: true,
   });
   const [listViewMetaData, setListViewMetaData] = useState({});
@@ -722,23 +724,25 @@ export const SolidListView = (params: SolidListViewParams) => {
           {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded !== true &&
             <SolidCreateButton url={createButtonUrl} />
           }
-          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true &&
+          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true && params.id !== 'new' &&
             // < SolidCreateButton url={createButtonUrl} />
             <Button type="button" icon="pi pi-plus" label="Add" size='small'
               onClick={() => params.handlePopUpOpen("new")}
             ></Button>
           }
           {/* Button For Manual Refresh */}
-          <Button
-            type="button"
-            size="small"
-            icon="pi pi-refresh"
-            severity="secondary"
-            outlined
-            onClick={() => {
-              setQueryString(first, rows, sortField, sortOrder, filters, showArchived);
-            }}
-          />
+          {params.embeded !== true &&
+            <Button
+              type="button"
+              size="small"
+              icon="pi pi-refresh"
+              severity="secondary"
+              outlined
+              onClick={() => {
+                setQueryString(first, rows, sortField, sortOrder, filters, showArchived);
+              }}
+            />
+          }
           {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="secondary"
             onClick={() => setRecoverDialogVisible(true)}
           ></Button>}

package/src/components/core/list/SolidListViewConfigure.tsx

@@ -9,29 +9,9 @@ import { Divider } from "primereact/divider";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { RadioButton } from "primereact/radiobutton";
 import { useEffect, useRef, useState } from "react";
+import { SolidListColumnSelector } from "./SolidListColumnSelector";
 
-interface FieldMetadata {
-    displayName: string;
-}
-
-interface FilterColumns {
-    name: string;
-    key: string;
-    isChecked: boolean;
-}
 export const SolidListViewConfigure = ({ listViewMetaData, setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, params, actionsAllowed, selectedRecords, setDialogVisible }: any) => {
-    if (!listViewMetaData) {
-        return;
-    }
-    if (!listViewMetaData.data) {
-        return;
-    }
-
-    const solidView = listViewMetaData?.data?.solidView;
-
-    // This is a key value map of field name vs field metadata.
-    const solidFieldsMetadata = listViewMetaData?.data?.solidFieldsMetadata as Record<string, FieldMetadata>;
-
     // const [visible, setVisible] = useState<boolean>(false);
     const op = useRef(null);
     const customizeLayout = useRef<OverlayPanel | null>(null);
@@ -77,32 +57,6 @@ export const SolidListViewConfigure = ({ listViewMetaData, setShowArchived, show
         return () => document.removeEventListener("click", handleClickOutside);
     }, [isOverlayOpen])
 
-    if (!solidView || !solidFieldsMetadata) {
-        return;
-    }
-
-    const checkedFieldNames = new Set(solidView.layout.children.map((col: { attrs: { name: string } }) => col.attrs.name));
-
-
-    const solidListColumns: FilterColumns[] = Object.entries(solidFieldsMetadata).map(([key, field]) => ({
-        name: field.displayName,
-        key,
-        isChecked: checkedFieldNames.has(key),
-    }));
-
-    const [selectedColumns, setSelectedColumns] = useState<FilterColumns[]>(solidListColumns.filter(col => col.isChecked));
-
-    const onCategoryChange = (e: CheckboxChangeEvent) => {
-        let _selectedColumns = [...selectedColumns];
-
-        if (e.checked)
-            _selectedColumns.push(e.value);
-        else
-            _selectedColumns = _selectedColumns.filter(column => column.key !== e.value.key);
-
-        setSelectedColumns(_selectedColumns);
-    };
-
     return (
         <div className="position-relative">
             <Button
@@ -147,8 +101,6 @@ export const SolidListViewConfigure = ({ listViewMetaData, setShowArchived, show
                                 </label>
                             </div>
                         )}
-
-
                     </div>
                 </div>
                 <Divider className="m-0" />
@@ -233,34 +185,7 @@ export const SolidListViewConfigure = ({ listViewMetaData, setShowArchived, show
                                     </div>
                                 </AccordionTab>
                                 <AccordionTab header="Column Selector">
-                                    <div className="flex flex-column gap-1 p-1">
-                                    <div className="flex flex-column gap-3 px-3 cogwheel-column-filter"  style={{maxHeight: 400, overflowY:'auto'}}>
-                                            {solidListColumns.map((column) => {
-                                                return (
-                                                    <div key={column.key} className="flex align-items-center gap-1">
-                                                        <Checkbox
-                                                            inputId={column.key}
-                                                            name="column"
-                                                            value={column}
-                                                            onChange={onCategoryChange}
-                                                            checked={selectedColumns.some((item) => item.key === column.key)}
-                                                            className="text-base"
-                                                        />
-                                                        <label htmlFor={column.key} className="ml-2 text-base">
-                                                            {column.name}
-                                                        </label>
-                                                    </div>
-                                                );
-                                            })}
-                                        </div>
-                                        <div className="p-3 flex gap-2">
-                                            <Button label="Apply" size="small" />
-                                            <Button outlined label="Cancel" size="small"
-                                                // @ts-ignore
-                                                onClick={(e) => op.current.hide(e)}
-                                            />
-                                        </div>
-                                    </div>
+                                    <SolidListColumnSelector listViewMetaData={listViewMetaData} />
                                 </AccordionTab>
                             </Accordion>
                         </div>

package/src/redux/api/solidEntityApi.tsx

@@ -49,6 +49,13 @@ export const createSolidEntityApi = (entityName: string) => {
                     body: entity
                 }),
             }),
+            upsertSolidEntity: builder.mutation({
+                query: (entity) => ({
+                    url: `/${kebabEntityName}/upsert`,
+                    method: 'POST',
+                    body: entity
+                }),
+            }),
             updateSolidEntity: builder.mutation({
                 query: ({ id, data }) => ({
                     url: `/${kebabEntityName}/${id}`,

package/src/resources/globals.css

@@ -3005,6 +3005,7 @@ flex-shrink: 0; */
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 }
 
+
 .solid-kanban-board-wrapper {
   border-top: 1px solid #CED0D6;
   overflow: hidden;