@solidstarters/solid-core-ui 1.1.26 → 1.1.28

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

@@ -37,6 +37,11 @@ import CozyImage from '../../../resources/images/layout/images/cozy.png';
 import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
 import ListImage from '../../../resources/images/layout/images/cozy.png';
 import KanbanImage from '../../../resources/images/layout/images/kanban.png';
+import Lightbox from "yet-another-react-lightbox";
+import Counter from "yet-another-react-lightbox/plugins/counter";
+import Download from "yet-another-react-lightbox/plugins/download";
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/counter.css";
 
 const getRandomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -163,7 +168,7 @@ export const SolidListView = (params: SolidListViewParams) => {
       if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
         toPopulate.push(fieldMetadata.name);
       }
-      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.relationType === 'mediaMultiple') {
+      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.type === 'mediaMultiple') {
         toPopulateMedia.push(fieldMetadata.name);
       }
     }
@@ -475,6 +480,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           onClick={(e) =>
           // @ts-ignore 
           {
+            e.stopPropagation();
             op.current.toggle(e);
             setSelectedSolidViewData(solidViewData)
           }
@@ -582,6 +588,9 @@ export const SolidListView = (params: SolidListViewParams) => {
     setSelectedRecoverRecords([]);
   }
 
+  const [openLightbox, setOpenLightbox] = useState(false);
+  const [lightboxUrls, setLightboxUrls] = useState({});
+
   // Render columns dynamically based on metadata
   const renderColumnsDynamically = (solidListViewMetaData: any) => {
     if (!solidListViewMetaData) {
@@ -601,7 +610,7 @@ export const SolidListView = (params: SolidListViewParams) => {
         return;
       }
 
-      return SolidListViewColumn({ solidListViewMetaData, fieldMetadata, column });
+      return SolidListViewColumn({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox });
 
     });
   };
@@ -616,7 +625,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   }
 
   const sizeOptions = [
-    { label: 'Compact', value: 'small', image: CompactImage},
+    { label: 'Compact', value: 'small', image: CompactImage },
     { label: 'Cozy', value: 'normal', image: CozyImage },
     { label: 'Comfortable', value: 'large', image: ComfortableImage }
   ]
@@ -646,7 +655,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true &&
             // < SolidCreateButton url={createButtonUrl} />
             <Button type="button" icon="pi pi-plus" label="Add" size='small'
-              onClick={() => params.handlePopUpOpen(true)}
+              onClick={() => params.handlePopUpOpen("new")}
             ></Button>
           }
           {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="secondary"
@@ -709,6 +718,22 @@ export const SolidListView = (params: SolidListViewParams) => {
           paginatorClassName="solid-paginator"
           paginatorTemplate="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink"
           currentPageReportTemplate="{first} - {last} of {totalRecords}"
+          onRowClick={(e) => {
+            const rowData = e.data;
+            if (
+              !(
+                actionsAllowed.includes(updatePermission(params.modelName)) &&
+                solidListViewMetaData?.data?.solidView?.layout?.attrs?.edit !== false
+              )
+            ) {
+              return;
+            }
+            if (params.embeded == true) {
+              params.handlePopUpOpen(rowData?.id);
+            } else {
+              router.push(`${editButtonUrl}/${rowData?.id}`);
+            }
+          }}
         >
 
           <Column selectionMode="multiple" headerStyle={{ width: "3em" }} />
@@ -717,7 +742,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           {actionsAllowed.includes(`${updatePermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.edit !== false &&
             <Column frozen alignFrozen="right" body={(rowData) => (
               rowData?.deletedAt ? (
-                <a onClick={() => recoverById(rowData.id)} className="retrieve-button">
+                <a onClick={(event) => { event.stopPropagation(); recoverById(rowData.id) }} className="retrieve-button">
                   <i className="pi pi-refresh" style={{ fontSize: "1rem" }} />
                 </a>
               ) :
@@ -836,6 +861,14 @@ export const SolidListView = (params: SolidListViewParams) => {
           </div>
         </div>
       </Dialog>
+      {openLightbox &&
+        <Lightbox
+          open={openLightbox}
+          plugins={[Counter, Download]}
+          close={() => setOpenLightbox(false)}
+          slides={lightboxUrls}
+        />
+      }
     </div>
   );
 };

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

@@ -22,7 +22,9 @@ import SolidUuidColumn from "./columns/SolidUuidColumn";
 export type SolidListViewColumnParams = {
     solidListViewMetaData: any;
     fieldMetadata: any,
-    column: any
+    column: any,
+    setLightboxUrls?: any,
+    setOpenLightbox?: any
 };
 
 export const getNumberOfInputs = (matchMode: any): number | null => {
@@ -70,7 +72,7 @@ export const getNumberOfInputs = (matchMode: any): number | null => {
 //     }
 // };
 
-export const SolidListViewColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+export const SolidListViewColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
 
     // And finally we can implement additional switching logic based on certain special fields. 
     if (fieldMetadata.name === 'id') {
@@ -114,10 +116,10 @@ export const SolidListViewColumn = ({ solidListViewMetaData, fieldMetadata, colu
         return SolidRelationColumn({ solidListViewMetaData, fieldMetadata, column });
     }
     if (fieldMetadata.type === 'mediaSingle') {
-        return SolidMediaSingleColumn({ solidListViewMetaData, fieldMetadata, column });
+        return SolidMediaSingleColumn({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox });
     }
     if (fieldMetadata.type === 'mediaMultiple') {
-        return SolidMediaMultipleColumn({ solidListViewMetaData, fieldMetadata, column });
+        return SolidMediaMultipleColumn({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox });
     }
     if (fieldMetadata.type === 'selectionStatic') {
         return SolidSelectionStaticColumn({ solidListViewMetaData, fieldMetadata, column });

package/src/components/core/list/columns/SolidDateColumn.tsx

@@ -47,7 +47,7 @@ const SolidDateColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -57,7 +57,10 @@ const SolidDateColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]}

package/src/components/core/list/columns/SolidDatetimeColumn.tsx

@@ -35,7 +35,7 @@ const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: S
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -45,7 +45,10 @@ const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: S
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]}

package/src/components/core/list/columns/SolidExternalIdColumn.tsx

@@ -37,7 +37,7 @@ const SolidExternalIdColumn = ({ solidListViewMetaData, fieldMetadata, column }:
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -47,7 +47,10 @@ const SolidExternalIdColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]}

package/src/components/core/list/columns/SolidIdColumn.tsx

@@ -36,7 +36,7 @@ const SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidLi
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.sortable}
             // filter={filterable}
@@ -46,7 +46,10 @@ const SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidLi
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]}

package/src/components/core/list/columns/SolidIntColumn.tsx

@@ -44,7 +44,7 @@ const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidL
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -54,7 +54,10 @@ const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidL
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]}

package/src/components/core/list/columns/SolidMediaMultipleColumn.tsx

@@ -2,37 +2,65 @@
 import React from 'react';
 import { Column } from "primereact/column";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { Button } from 'primereact/button';
+
+const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
+    console.log("rendered");
 
-const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     // const filterable = column.attrs.filterable;
     const filterable = false;
     const showFilterOperator = false;
     const columnDataType = undefined;
     const header = column.attrs.label ?? fieldMetadata.displayName;
     const imageBodyTemplate = (product: any) => {
+
         if (!product?._media?.[fieldMetadata.name]) return null;
 
         const imageUrls = product._media[fieldMetadata.name].map((i: any) => i._full_url);
 
         return (
-            <>
-                {imageUrls.map((url: string, index: number) => (
+            imageUrls.length > 0 ?
+                <div className='flex gap-2 align-items-end'>
                     <img
-                        key={index}
-                        src={url}
-                        alt={`product-image-${index}`}
-                        className="w-6rem shadow-2 border-round"
+                        src={imageUrls[0]}
+                        alt={`product-image-multiple`}
+                        className="shadow-2 border-round"
+                        width={40}
+                        height={40}
+                        style={{ objectFit: "cover" }}
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            setLightboxUrls(imageUrls.map((img: string) => ({ src: img, downloadUrl: img })));
+                            setOpenLightbox(true);
+                        }}
+                    />
+                    <Button
+                        type='button'
+                        text
+                        size='small'
+                        label='View All'
+                        className='view-media-button'
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            setLightboxUrls(imageUrls.map((img: string) => ({ src: img })));
+                            setOpenLightbox(true);
+                        }}
                     />
-                ))}
-            </>
+                </div>
+                :
+                <div
+                    style={{ height: 40, width: 40 }}
+                >
+                </div>
         );
     };
+
     return (
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            body={imageBodyTemplate}
             header={header}
+            body={imageBodyTemplate}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}

package/src/components/core/list/columns/SolidMediaSingleColumn.tsx

@@ -5,31 +5,39 @@ import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilter
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { FormEvent } from "primereact/ts-helpers";
 import { FilterMatchMode } from 'primereact/api';
+import { Button } from 'primereact/button';
 
-const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
     // const filterable = column.attrs.filterable;
 
     const filterable = false;
     const showFilterOperator = false;
     const columnDataType = undefined;
     const header = column.attrs.label ?? fieldMetadata.displayName;
-
     const imageBodyTemplate = (product: any) => {
         if (!product?._media?.[fieldMetadata.name]) return null;
-
         const imageUrls = product._media[fieldMetadata.name].map((i: any) => i._full_url);
 
         return (
-            <>
-                {imageUrls.map((url: string, index: number) => (
-                    <img
-                        key={index}
-                        src={url}
-                        alt={`product-image-${index}`}
-                        className="w-6rem shadow-2 border-round"
-                    />
-                ))}
-            </>
+            imageUrls.length > 0 ?
+                <img
+                    src={imageUrls[0]}
+                    alt="product-image-single"
+                    className="shadow-2 border-round"
+                    width={40}
+                    height={40}
+                    style={{ objectFit: "cover" }}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        setLightboxUrls([{ src: imageUrls[0], downloadUrl: imageUrls[0] }]);
+                        setOpenLightbox(true);
+                    }}
+                />
+                :
+                <div
+                    style={{ height: 40, width: 40 }}
+                >
+                </div>
         );
     };
 

package/src/components/core/list/columns/SolidSelectionDynamicColumn.tsx

@@ -37,7 +37,7 @@ const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, col
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -47,7 +47,10 @@ const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, col
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]}

package/src/components/core/list/columns/SolidSelectionStaticColumn.tsx

@@ -39,7 +39,7 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -49,7 +49,10 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]} 

package/src/components/core/list/columns/SolidShortTextColumn.tsx

@@ -44,7 +44,7 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -54,7 +54,10 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]} 

package/src/components/core/list/columns/SolidTimeColumn.tsx

@@ -35,7 +35,7 @@ const SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -45,7 +45,10 @@ const SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]}

package/src/components/core/list/columns/SolidUuidColumn.tsx

@@ -36,7 +36,7 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
-            header={header}
+            // header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
@@ -46,7 +46,10 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             // style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
+            // headerClassName="table-header-fs"
+            header={() => {
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+            }}
             body={(rowData) => (
                 <SolidTableRowCell
                     value={rowData[fieldMetadata.name]}

package/src/components/core/model/FieldMetaDataForm.tsx

@@ -1869,7 +1869,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                             )}
 
                           {isUserKeyFields && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="userKey"
                                 className="form-field-label"

package/src/resources/globals.css

@@ -424,7 +424,7 @@ a {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 15ch;
+  /* max-width: 15ch; */
 }
 
 .solid-table-row {
@@ -2363,7 +2363,7 @@ li.header-li-px {
 }
 
 .solid-global-search-filter .p-fieldset .p-fieldset-content {
-  padding: 0 1.25rem;
+  padding: 0 0.25rem;
 }
 
 .custom-filter-condition-btn {
@@ -2549,4 +2549,18 @@ li.header-li-px {
   border: 1px solid #d1d5db;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
+}
+
+.view-media-button {
+  padding: 0;
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.view-media-button.p-button.p-button-text:not(:disabled):active {
+  background-color: transparent;
+}
+
+.view-media-button.p-button.p-button-text:not(:disabled):hover {
+  background-color: transparent;
 }