@solidstarters/solid-core-ui 1.1.50 → 1.1.52

package/src/components/core/kanban/SolidKanbanView.tsx

@@ -64,17 +64,17 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
 
 
-    const pushFiltersToRouter = (filterQueryString: any) => {
-      router.push(`?${filterQueryString}`, undefined, { shallow: true });
-    };
-  
-    useEffect(() => {
-      if (filterQueryString) {
-        pushFiltersToRouter(filterQueryString);
-      }
-    }, [filterQueryString]);
-  
-  
+  const pushFiltersToRouter = (filterQueryString: any) => {
+    router.push(`?${filterQueryString}`, undefined, { shallow: true });
+  };
+
+  useEffect(() => {
+    if (filterQueryString) {
+      pushFiltersToRouter(filterQueryString);
+    }
+  }, [filterQueryString]);
+
+
 
   useEffect(() => {
     const fetchPermissions = async () => {
@@ -304,10 +304,10 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
         let queryString = qs.stringify(queryData, {
           encodeValuesOnly: true
         });
-        if(searchParams) {
+        if (searchParams) {
           queryString = searchParams;
           setFilterQueryString(searchParams)
-        }else{
+        } else {
           setFilterQueryString(queryString)
         }
         triggerGetSolidEntities(queryString);
@@ -649,6 +649,22 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     // }
   }
 
+
+  useEffect(() => {
+    if (solidKanbanViewMetaData) {
+      const createActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
+      const editActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
+      const viewModes = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
+      setViewModes(viewModes);
+      if (createActionUrl) {
+        setCreateButtonUrl(createActionUrl)
+      }
+      if (editActionUrl) {
+        setEditButtonUrl(editActionUrl)
+      }
+    }
+  }, [solidKanbanViewMetaData])
+
   const kanbanViewTitle = solidKanbanViewMetaData?.data?.solidView?.displayName
 
   return (
@@ -675,25 +691,28 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
             className="small-button"
             severity="danger"
           />}
-          {/* <SolidListViewConfigure
-        setShowArchived={setShowArchived}
-        showArchived={showArchived}
-        viewData={solidKanbanViewMetaData}
-        sizeOptions={sizeOptions}
-        setSize={setSize}
-        size={size}
-        viewModes={viewModes}
-        params={params}
-        actionsAllowed={actionsAllowed}
-        selectedRecords={selectedRecords}
-        setDialogVisible={setDialogVisible}
-      ></SolidListViewConfigure> */}
+          <Button
+            type="button"
+            size="small"
+            icon="pi pi-refresh"
+            severity="secondary"
+            outlined
+            onClick={() => {
+              window.location.reload()
+            }}
+          />
+          <SolidKanbanViewConfigure
+            solidKanbanViewMetaData={solidKanbanViewMetaData}
+            actionsAllowed={actionsAllowed}
+            viewModes={viewModes}
+          // setLayoutDialogVisible={setLayoutDialogVisible}
+          />
           {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}
         </div>
       </div>
       <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
       {solidKanbanViewMetaData && kanbanViewData &&
-        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} ></KanbanBoard>
+        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox}  editButtonUrl={editButtonUrl}></KanbanBoard>
       }
 
       <Dialog

package/src/components/core/kanban/SolidKanbanViewConfigure.tsx

@@ -0,0 +1,145 @@
+"use client"
+import { usePathname, useRouter } from 'next/navigation';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Button } from 'primereact/button';
+import { Divider } from 'primereact/divider';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { RadioButton } from 'primereact/radiobutton';
+import React, { useEffect, useRef, useState } from 'react'
+
+export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllowed, viewModes }: any) => {
+    const op = useRef(null);
+    const customizeLayout = useRef<OverlayPanel | null>(null);
+    const pathname = usePathname();
+    const router = useRouter();
+    const [view, setView] = useState<string>("");
+
+    const handleViewChange = (newView: string) => {
+        if (view === newView) return; // Prevent unnecessary updates
+        const pathSegments = pathname.split('/').filter(Boolean);
+        pathSegments[pathSegments.length - 1] = newView; // Replace the last part with new view
+        const newPath = '/' + pathSegments.join('/');
+        router.push(newPath);
+    };
+
+    useEffect(() => {
+        if (typeof pathname === 'string') {
+            const pathSegments = pathname.split('/').filter(Boolean);
+            if (pathSegments.length > 0) {
+                setView(pathSegments[pathSegments.length - 1]);
+            }
+        }
+    }, [])
+
+
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                customizeLayout.current &&
+                !customizeLayout.current.getElement()?.contains(event.target as Node)
+            ) {
+                setIsOverlayOpen(false);
+            }
+        };
+
+        if (isOverlayOpen) {
+            document.addEventListener("click", handleClickOutside);
+        } else {
+            document.removeEventListener("click", handleClickOutside);
+        }
+
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [isOverlayOpen])
+
+    return (
+        <div className="position-relative">
+            <Button
+                type="button"
+                size="small"
+                icon="pi pi-cog"
+                severity="secondary"
+                outlined
+                // @ts-ignore
+                onClick={(e) => op.current.toggle(e)}
+            />
+            <OverlayPanel ref={op}>
+                <div className="p-2">
+                    <div className="flex flex-column">
+                        <Button text icon='pi pi-download' label="Import" size="small" severity="secondary" className="text-left gap-2 text-base" />
+                        <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2 text-base" />
+                        {/* <Button
+                            text
+                            type="button"
+                            className="w-8rem text-left gap-2 purple-200"
+                            label="Layout"
+                            size="small"
+                            iconPos="left"
+                            severity="contrast"
+                            icon={'pi pi-objects-column'}
+                            onClick={() => setLayoutDialogVisible(true)}
+                        /> */}
+                    </div>
+                </div>
+                <Divider className="m-0" />
+                <div className="p-2 relative flex flex-column gap-1">
+                    <Button
+                        icon='pi pi-sliders-h'
+                        label="Customize Layout"
+                        severity={isOverlayOpen ? undefined : "secondary"}
+                        size="small"
+                        text={isOverlayOpen ? false : true}
+                        className="text-left gap-2 w-full text-base"
+                        // @ts-ignore
+                        onClick={(e) => {
+                            customizeLayout.current?.toggle(e);
+                            setIsOverlayOpen((prev) => !prev); // ✅ Ensure state updates when toggled
+                        }}
+                    >
+                        <i className="pi pi-chevron-right text-sm"></i>
+                    </Button>
+                    <OverlayPanel ref={customizeLayout} className="customize-layout-panel" style={{ minWidth: 250 }}
+                        onShow={() => setIsOverlayOpen(true)}
+                        onHide={() => {
+                            console.log("Overlay closed");
+                            setTimeout(() => setIsOverlayOpen(false), 50); // ✅ Ensure state updates
+                        }}
+                    >
+
+                        <div className="solid-layout-accordion">
+                            <Accordion expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up" activeIndex={[0]}>
+                                {viewModes && viewModes.length > 0 &&
+                                    <AccordionTab header="Switch Type">
+                                        <div className="flex flex-column gap-1 p-1">
+                                            {viewModes.map((option: any) => (
+                                                <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                                    <RadioButton
+                                                        inputId={option.value}
+                                                        name="views"
+                                                        value={option.value}
+                                                        // onChange={(e) => router}
+                                                        onChange={() => handleViewChange(option.value)}
+                                                        checked={option.value === view}
+                                                    />
+                                                    <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                                        {option.label}
+                                                        {/* <Image
+                                                        src={option.image}
+                                                        alt={option.value}
+                                                        fill
+                                                        className='relative row-spacing-img'
+                                                    /> */}
+                                                    </label>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </AccordionTab>
+                                }
+                            </Accordion>
+                        </div>
+                    </OverlayPanel>
+                </div>
+            </OverlayPanel>
+        </div>
+    )
+}

package/src/resources/globals.css

@@ -2484,6 +2484,7 @@ li.header-li-px {
 
 .custom-filter-chip-type {
   display: flex;
+  align-items: center;  
   padding: 0.25rem 0.5rem !important;
   color: var(--primary-color) !important;
   font-size: 0.875rem !important;
@@ -2494,11 +2495,12 @@ li.header-li-px {
 
 .search-filter-chip-type {
   display: flex;
+  align-items: center;
   font-size: 0.875rem !important;
   background: #FBF5FF;
   border-radius: 0.375rem;
   padding: 0.417rem 0.5rem !important;
-  gap: 8px;
+  gap: 4px;
 }
 
 .solid-global-search-element li {}
@@ -2995,6 +2997,12 @@ flex-shrink: 0; */
   width: 100%;
   border-radius: 8px;
   max-height: 120px;
+  object-fit: contain;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+}
+
+.kanban-image-preview:hover {
+  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 {