@solidstarters/solid-core-ui 1.1.43 → 1.1.45

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

@@ -1,43 +1,57 @@
 'use client';
-import React from 'react';
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import React, { useState } from 'react';
+import { Column } from "primereact/column";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import { FormEvent } from "primereact/ts-helpers";
-import { FilterMatchMode } from 'primereact/api';
-import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
 
-const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
-    // const filterable = column.attrs.filterable;
+const isImageFile = (url: string) => {
+    return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
+};
 
-    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);
+const MediaWithFallback = ({ src, alt, onClick }: { src: string; alt: string; onClick: (event: React.MouseEvent) => void }) => {
+    const [isBroken, setIsBroken] = useState(false);
 
-        return (
-            imageUrls.length > 0 ?
+    return (
+        <div style={{ width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            {!isBroken && isImageFile(src) ? (
                 <img
-                    src={imageUrls[0]}
-                    alt="product-image-single"
+                    src={src}
+                    alt={alt}
                     className="shadow-2 border-round"
                     width={40}
                     height={40}
                     style={{ objectFit: "cover" }}
+                    onError={() => setIsBroken(true)} // Handle broken image
+                    onClick={onClick}
+                />
+            ) : (
+                <i className={classNames(isImageFile(src) ? "pi pi-image" : "pi pi-file", "text-3xl text-gray-400")}></i> // Image or file icon
+            )}
+        </div>
+    );
+};
+
+const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
+    const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    const mediaBodyTemplate = (product: any) => {
+        if (!product?._media?.[fieldMetadata.name]) return null;
+        const mediaUrls = product._media[fieldMetadata.name].map((i: any) => i._full_url);
+
+        return (
+            mediaUrls.length > 0 ? (
+                <MediaWithFallback
+                    src={mediaUrls[0]}
+                    alt="product-media"
                     onClick={(event) => {
                         event.stopPropagation();
-                        setLightboxUrls([{ src: imageUrls[0], downloadUrl: imageUrls[0] }]);
+                        setLightboxUrls([{ src: mediaUrls[0], downloadUrl: mediaUrls[0] }]);
                         setOpenLightbox(true);
                     }}
                 />
-                :
-                <div
-                    style={{ height: 40, width: 40 }}
-                >
-                </div>
+            ) : (
+                <i className="pi pi-image text-3xl text-gray-400"></i> // Default fallback icon
+            )
         );
     };
 
@@ -46,18 +60,14 @@ const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column,
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            body={imageBodyTemplate}
-            // className="text-sm"
+            body={mediaBodyTemplate}
             sortable={column.attrs.sortable}
-            // filter={filterable}
-            dataType={columnDataType}
-            showFilterOperator={showFilterOperator}
+            showFilterOperator={false}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
-        ></Column>
+        />
     );
-
 };
 
-export default SolidMediaSingleColumn;
+export default SolidMediaSingleColumn;

package/src/resources/globals.css

@@ -1529,21 +1529,14 @@ li.header-li-px {
   font-size: 0.8rem;
 }
 
-.kanban-options-panel .p-overlaypanel-content {
-  padding: 0 !important;
-}
-
-.kanban-options-panel .p-overlaypanel-content span {
-  padding: 0 !important;
-  font-size: 1rem;
-}
-
 .kanban-column {
   flex: 1;
-  max-width: 350px;
-  background: #f0f0f5;
+  min-width: 270px;
+  width: 100%;
+  max-width: 270px;
+  /* background: #f0f0f5;
   border: 8px;
-  padding: 0.2rem;
+  padding: 0.2rem; */
 }
 
 .kanban-card {
@@ -1565,19 +1558,15 @@ li.header-li-px {
   color: #4b4d52;
 }
 
-.kanban-group-heading {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: 2px;
-}
-
 .kanban-column-folded {
   flex-grow: 0;
-  background: #f0f0f5;
+  background: #F4F4F4;
   border: 8px;
   padding: 5px;
   height: 100%;
-  font-size: 1rem;
+  min-width:fit-content;
+  width: 100%;
+  max-width:fit-content;
 }
 
 .kaban-heading-area {
@@ -2902,6 +2891,66 @@ li.header-li-px {
   max-width: calc(20% - 10px);
 }
 
-.image-preview{
-  max-width: 100px;
+.solid-kanban-card {
+  box-shadow: none;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(216, 226, 234, 0.60);
+  background: #FFF;
+  padding: 9px;
+}
+
+.kanban-group-heading {
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.kanban-count-badge {
+  display: flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0.125rem;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 6.25rem;
+  background: #F6FAFF;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.kanban-image-preview {
+  /* width: 100px; */
+  /* width: 240px;
+height: 120px;
+flex-shrink: 0; */
+  width: 100%;
+  border-radius: 8px;
+  max-height: 120px;
+}
+
+.solid-kanban-board-wrapper {
+  border-top: 1px solid #CED0D6;
+  overflow: hidden;
+  height: calc(100vh - 64px) !important;
+}
+
+.solid-kanban-board-scroll-context {
+  overflow: auto;
+  height: 100%;
+}
+
+.kanban-column-cogwheel.p-button.p-button-icon-only.p-button-rounded {
+  height: 2rem;
+  width: 2rem;
+}
+
+.kanban-column-cogwheel.p-button.p-button-secondary.p-button-text:not(:disabled):active {
+  background: transparent;
+}
+
+.kanban-column-cogwheel.p-button.p-button-secondary.p-button-text:not(:disabled):hover {
+  background: transparent;
 }