@solidstarters/solid-core-ui 1.1.38 → 1.1.40

package/dist/resources/themes/solid-dark-purple/theme.css

@@ -2914,6 +2914,7 @@
     background: #1f2937;
     color: rgba(255, 255, 255, 0.87);
     transition: box-shadow 0.2s;
+    cursor: pointer;
   }
 
   .p-datatable .p-datatable-tbody>tr>td {

package/dist/resources/themes/solid-light-purple/theme.css

@@ -2864,7 +2864,7 @@
     border-width: 1px 0 1px 0;
     font-weight: 600;
     color: #374151;
-    background: #F5F5F5;
+    background: #FFFFFF;
     transition: box-shadow 0.2s;
   }
 
@@ -2905,7 +2905,7 @@
   }
 
   .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
-    background: #F5F5F5;
+    background: #FFF;
     color: #374151;
   }
 
@@ -2914,7 +2914,7 @@
   }
 
   .p-datatable .p-sortable-column.p-highlight {
-    background: #F5F5F5;
+    background: #FFFFFF;
     color: #4c1b94;
   }
 
@@ -2923,7 +2923,7 @@
   }
 
   .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
-    background: #F5F5F5;
+    background: #FFFFFF;
     color: #4c1b94;
   }
 
@@ -2940,6 +2940,7 @@
     background: #ffffff;
     color: #4B4D52;
     transition: box-shadow 0.2s;
+    cursor: pointer;
   }
 
   .p-datatable .p-datatable-tbody>tr>td {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.38",
+  "version": "1.1.40",
   "scripts": {
     "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",
@@ -49,6 +49,7 @@
     "primereact": "^10.8.5",
     "qs": "^6.13.0",
     "quill": "^2.0.3",
+    "react-pdf": "^9.2.1",
     "stripe": "^13.5.0",
     "uuid": "^10.0.0",
     "xlsx": "^0.18.5",

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

@@ -24,7 +24,7 @@ interface ApiResponse {
     };
 }
 
-export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLinPagination }: any) => {
+export const KanbanBoard = ({ groupedView, kanbanViewData, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLinPagination ,setLightboxUrls, setOpenLightbox }: any) => {
     const [loading, setLoading] = useState<boolean>(true);
     // State to manage the folded status of each column
     const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
@@ -102,17 +102,22 @@ export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewDa
                     return (
                         <KanbanColumn
                             key={data.groupName}
+                            groupedView={groupedView}
                             groupByField={data.groupName}
                             group={group}
-                            solidViewMetaData={solidViewMetaData}
+                            solidKanbanViewMetaData={solidKanbanViewMetaData}
                             groupData={data.groupData.records}
                             toggleFold={toggleFold}
                             handleLoadMore={handleLoadMore}
+                            setLightboxUrls={setLightboxUrls}
+                             setOpenLightbox={setOpenLightbox}
                         />
                     );
                 })}
-                <div className="kanban-load-more-folded">
-                    <a className="kaban-load-more" onClick={handleSwimLinPagination}>load More</a></div>
+                {groupedView !== false &&
+                    <div className="kanban-load-more-folded">
+                        <a className="kaban-load-more" onClick={handleSwimLinPagination}>load More</a></div>
+                }
             </div>
         </DragDropContext>
     );

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

@@ -4,6 +4,7 @@
 import { Draggable, DraggableProvided } from "@hello-pangea/dnd";
 import { Card } from "primereact/card";
 import React from "react";
+import { SolidKanbanViewFields } from "./SolidKanbanViewFields";
 
 // Define the types for the data and props
 interface Data {
@@ -14,21 +15,46 @@ interface Data {
 
 interface KanbanCardProps {
   data: Data;
-  solidViewMetaData: any;
+  solidKanbanViewMetaData: any;
   index: number;
 }
 
-const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index }) => {
+// Render columns dynamically based on metadata
+const renderFieldsDynamically = (field: any, data: any, solidKanbanViewMetaData: any, setLightboxUrls?: any, setOpenLightbox?: any) => {
+  if (!solidKanbanViewMetaData) {
+    return;
+  }
+
+  const solidView = solidKanbanViewMetaData.solidView;
+  const solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
+  if (!solidView || !solidFieldsMetadata) {
+    return;
+  }
+  const fieldMetadata = solidFieldsMetadata[field.attrs.name];
+  const fieldLayout = field;
+  return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox });
+  // return solidView.layout.children?.map((column: any) => {
+  //   const fieldMetadata = solidFieldsMetadata[column.attrs.name];
+  //   if (!fieldMetadata) {
+  //     return;
+  //   }
+
+  //   return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, column });
+
+  // });
+};
+
+const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData, index, setLightboxUrls, setOpenLightbox }) => {
 
   const SolidRow = ({ children, attrs }: any) => {
     const className = attrs.className;
     return (
       <div className={`row ${className}`}>
         <div className="s_group">
-          <fieldset>
+          <div>
             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
             <div className="grid">{children}</div>
-          </fieldset>
+          </div>
         </div>
       </div>
     );
@@ -38,10 +64,10 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
     return (
       <div className={`${className}`}>
         <div className="s_group">
-          <fieldset>
+          <div>
             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
             <div className="grid">{children}</div>
-          </fieldset>
+          </div>
         </div>
 
       </div>
@@ -52,28 +78,28 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
     return (
       <div className={`${className}`}>
         <div className="s_group">
-          <fieldset>
+          <div>
             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
             <div className="grid">{children}</div>
-          </fieldset>
+          </div>
         </div>
 
       </div>
     );
   };
 
-  const SolidField = ({ field, initialEntityData, solidFormViewMetaData }: any) => {
+  const SolidField = ({ field, data, solidKanbanViewMetaData }: any) => {
 
-    switch (initialEntityData[field.attrs.name].type) {
-      case "mediaSingle":
-        return <img src=""></img>
-      default:
-        return <p>{initialEntityData[field.attrs.name]}</p>
+    return renderFieldsDynamically(field, data, solidKanbanViewMetaData, setLightboxUrls, setOpenLightbox)
+    // switch (solidKanbanViewMetaData[field.attrs.name].type) {
+    //   case "mediaSingle":
+    //     return <img src=""></img>
+    //   default:
+    //     return <p>{initialEntityData[field.attrs.name]}</p>
 
-    }
+    // }
   };
 
-
   const SolidCard = ({ children }: any) => (
     <div className="p-fluid p-grid">
       {children}
@@ -81,36 +107,36 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
   );
 
   // Now render the form dynamically...
-  const renderFormElementDynamically: any = (element: any, solidViewMetaData: any) => {
+  const renderFormElementDynamically: any = (element: any, solidKanbanViewMetaData: any) => {
     const { type, attrs, children } = element;
     // const key = attrs?.name ?? generateRandomKey();
     const key = attrs?.name;
     switch (type) {
       case "card":
-        return <SolidCard key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidCard>;
+        return <SolidCard key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidCard>;
       case "row":
-        return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidRow>;
+        return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidRow>;
       case "column":
-        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidColumn>;
+        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidColumn>;
       case "image":
-        return <SolidImage key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidImage>;
+        return <SolidImage key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidImage>;
 
       case "field": {
         // const fieldMetadata = solidFieldsMetadata[attrs.name];
-        const fieldMetadata = solidViewMetaData.solidFieldsMetadata[attrs.name];
-        return <SolidField key={key} field={element} fieldMetadata={fieldMetadata} initialEntityData={data ? data : null} solidViewMetaData={solidViewMetaData} />;
+        const fieldMetadata = solidKanbanViewMetaData.solidFieldsMetadata[attrs.name];
+        return <SolidField key={key} field={element} fieldMetadata={fieldMetadata} data={data ? data : null} solidKanbanViewMetaData={solidKanbanViewMetaData} />;
       }
       default:
         return null;
     }
   };
 
-  const renderFormDynamically = (solidViewMetaData: any) => {
-    if (!solidViewMetaData) {
+  const renderFormDynamically = (solidKanbanViewMetaData: any) => {
+    if (!solidKanbanViewMetaData) {
       return;
     }
-    const solidView = solidViewMetaData.solidView;
-    const solidFieldsMetadata = solidViewMetaData.solidFieldsMetadata;
+    const solidView = solidKanbanViewMetaData.solidView;
+    const solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
     if (!solidView || !solidFieldsMetadata) {
       return;
     }
@@ -118,7 +144,7 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
       return;
     }
     const updatedLayout = solidView.layout.children;
-    const dynamicForm = updatedLayout.map((element: any) => renderFormElementDynamically(element, solidViewMetaData));
+    const dynamicForm = updatedLayout.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData));
     return dynamicForm;
   };
 
@@ -132,6 +158,7 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           style={{ marginBottom: "1rem", ...provided.draggableProps.style }}
+          className="kanban-card-container"
         >
           {/* <p className="kanban-card-heading">{data.title}</p> */}
           {/* <p className="kanban-card-content">{data.content}</p> */}
@@ -142,10 +169,10 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index
             }}
             elevation={snapshot.isDragging ? 3 : 1}
           >
-            {renderFormDynamically(solidViewMetaData)}
+            {renderFormDynamically(solidKanbanViewMetaData)}
 
-            {/* {solidViewMetaData?.solidView?.layout?.layoutData &&
-              Object.entries(solidViewMetaData?.solidView?.layout?.layoutData).map(([key, value]) => (
+            {/* {solidKanbanViewMetaData?.solidView?.layout?.layoutData &&
+              Object.entries(solidKanbanViewMetaData?.solidView?.layout?.layoutData).map(([key, value]) => (
                 <p className="kanban-card-heading" key={key}>{data[value]}</p>
               ))
             } */}

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

@@ -24,81 +24,86 @@ interface GroupData {
 }
 
 interface KanbanColumnProps {
+  groupedView: boolean;
   groupByField: string;
   group: Group;
   groupData: GroupData[];
   toggleFold: (groupByField: string) => void;
   handleLoadMore: (groupByField: string) => void;
+  setLightboxUrls: any,
+  setOpenLightbox: any
 }
 
-const KanbanColumn = ({ groupByField, solidViewMetaData, group, groupData, toggleFold, handleLoadMore }: KanbanColumnProps) => {
+const KanbanColumn = ({ groupedView, groupByField, solidKanbanViewMetaData, group, groupData, toggleFold, handleLoadMore, setLightboxUrls, setOpenLightbox }: KanbanColumnProps) => {
   const op = useRef<any>(null);
 
 
   return (
-    <div className={group.folded ? "kanban-column kanban-column-folded" : "kanban-column"}>
-      <div className="kaban-heading-area">
-        {group.folded &&
-          <a onClick={e => toggleFold(groupByField)}>
-            <div className="flex align-items-center">
-              <div className="kanban-arrow-icon-container">
-                <i className="pi pi-sort-up-fill"></i>
-                <i className="pi pi-sort-down-fill"></i>
+    <div className={group.folded ? (groupedView === false ? "kanban-column kanban-ungrouped-column kanban-column-folded" : "kanban-column kanban-column-folded") : (groupedView === false ? "kanban-column kanban-ungrouped-column" : "kanban-column")}>
+      {groupedView !== false &&
+        <div className="kaban-heading-area">
+          {group.folded &&
+            <a onClick={e => toggleFold(groupByField)}>
+              <div className="flex align-items-center">
+                <div className="kanban-arrow-icon-container">
+                  <i className="pi pi-sort-up-fill"></i>
+                  <i className="pi pi-sort-down-fill"></i>
+                </div>
+                <p className="kanban-group-heading">{`${group.label}`}<span className="count">{group.count}</span></p>
               </div>
+            </a>
+          }
+
+          {!group.folded &&
+            <div className="flex align-items-center">
               <p className="kanban-group-heading">{`${group.label}`}<span className="count">{group.count}</span></p>
             </div>
-          </a>
-        }
-
-        {!group.folded &&
-          <div className="flex align-items-center">
-            <p className="kanban-group-heading">{`${group.label}`}<span className="count">{group.count}</span></p>
-          </div>
-        }
-        {!group.folded &&
-          <a onClick={(e: any) => op?.current?.toggle(e)}>
-            < i className="pi pi-cog" />
-          </a>
-        }
-        <OverlayPanel ref={op} className="kanban-options-panel">
+          }
+          {!group.folded &&
+            <a onClick={(e: any) => op?.current?.toggle(e)}>
+              < i className="pi pi-cog" />
+            </a>
+          }
+          <OverlayPanel ref={op} className="kanban-options-panel">
 
-          <div
-            className="w-full md:w-10rem p-menu p-component"
-            data-pc-name="menu"
-            data-pc-section="root"
-          >
-            <ul
-              className="p-menu-list p-reset"
-              id="pr_id_11_list"
-              role="menu"
-              data-pc-section="menu"
+            <div
+              className="w-full md:w-10rem p-menu p-component"
+              data-pc-name="menu"
+              data-pc-section="root"
             >
-              <li
-                className="p-menuitem"
-                role="menuitem"
-                data-pc-section="menuitem"
-                data-p-focused="false"
-                data-p-disabled="false"
+              <ul
+                className="p-menu-list p-reset"
+                id="pr_id_11_list"
+                role="menu"
+                data-pc-section="menu"
               >
-                <button className="p-menuitem-link w-full p-link flex align-items-center pl-2 text-color hover:surface-200 border-noround">
-                  <div
-                    className="mr-2 p-avatar p-component p-avatar-image p-avatar-circle"
-                    data-pc-name="avatar"
-                    data-pc-section="root"
-                  >
-                  </div>
-                  <div className="flex flex-column align">
+                <li
+                  className="p-menuitem"
+                  role="menuitem"
+                  data-pc-section="menuitem"
+                  data-p-focused="false"
+                  data-p-disabled="false"
+                >
+                  <button className="p-menuitem-link w-full p-link flex align-items-center pl-2 text-color hover:surface-200 border-noround">
+                    <div
+                      className="mr-2 p-avatar p-component p-avatar-image p-avatar-circle"
+                      data-pc-name="avatar"
+                      data-pc-section="root"
+                    >
+                    </div>
+                    <div className="flex flex-column align">
 
-                    <a className="flex align-items-center p-menuitem-link" onClick={e => { toggleFold(groupByField); op?.current?.toggle(e) }}>
-                      <span className="">Fold</span>
-                    </a>
-                  </div>
-                </button>
-              </li>
-            </ul>
-          </div>
-        </OverlayPanel>
-      </div>
+                      <a className="flex align-items-center p-menuitem-link" onClick={e => { toggleFold(groupByField); op?.current?.toggle(e) }}>
+                        <span className="">Fold</span>
+                      </a>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </OverlayPanel>
+        </div>
+      }
       {!group.folded && (
         <Droppable droppableId={groupByField}>
           {(provided: DroppableProvided) => (
@@ -106,12 +111,13 @@ const KanbanColumn = ({ groupByField, solidViewMetaData, group, groupData, toggl
               ref={provided.innerRef}
               {...provided.droppableProps}
               style={{ minHeight: "100px" }}
+              className={groupedView === false && "kanban-ungrouped-column-content"}
             >
               {groupData.map((data, index) => (
-                <KanbanCard key={data.id} data={data} solidViewMetaData={solidViewMetaData} index={index} />
+                <KanbanCard key={data.id} data={data} solidKanbanViewMetaData={solidKanbanViewMetaData} index={index} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} />
               ))}
               {provided.placeholder}
-              {group.count > 0 &&
+              {group.count > 0 && (group.count > (group.limit * group.currentPage)) &&
                 <a
                   className="load-more-button"
                   onClick={() => handleLoadMore(groupByField)}