@solidstarters/solid-core-ui 1.1.37 → 1.1.40

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

@@ -5,8 +5,10 @@ import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
+import { getExtensionComponent } from '@/helpers/registry';
+import { SolidShortTextImageRenderModeWidgetProps } from '@/types/solid-core';
 
-const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {    
+const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
     const showFilterOperator = false;
     const columnDataType = 'text';
@@ -39,7 +41,7 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
 
     const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
-        
+
     return (
         <Column
             key={fieldMetadata.name}
@@ -56,15 +58,48 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
+            }}
+            body={(rowData) => {
+                const renderMode = column.attrs.renderMode || "text";
+                const data = rowData;
+                const widgetName = renderMode == "text" ? "SolidShortTextFieldTextRenderModeWidget" : "SolidShortTextFieldImageRenderModeWidget";
+                let DynamicWidget = getExtensionComponent(widgetName);
+                const widgetProps = {
+                    value: data[fieldMetadata.name],
+                    setLightboxUrls: setLightboxUrls,
+                    setOpenLightbox: setOpenLightbox
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+
+                // if (renderMode === "text") {
+                //     return <SolidTableRowCell
+                //         value={rowData[fieldMetadata.name]}
+                //         truncateAfter={truncateAfter}
+                //     />
+                // } else {
+                //     return (
+                //         <img
+                //             src={data[fieldMetadata.name]}
+                //             alt="product-image-single"
+                //             className="shadow-2 border-round"
+                //             width={40}
+                //             height={40}
+                //             style={{ objectFit: "cover" }}
+                //             onClick={(event) => {
+                //                 event.stopPropagation();
+                //                 setLightboxUrls([{ src: data[fieldMetadata.name], downloadUrl: data[fieldMetadata.name] }]);
+                //                 setOpenLightbox(true);
+                //             }}
+                //         />
+                //     );
+                // }
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]} 
-                    truncateAfter={truncateAfter} 
-                />
-            )}
-        ></Column>
+        ></Column >
     );
 
 };

package/src/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx

@@ -0,0 +1,19 @@
+
+export const SolidShortTextFieldImageRenderModeWidget = ({ value, setLightboxUrls, setOpenLightbox }: any) => {
+    return (
+        <img
+            src={value}
+            alt="product-image-single"
+            className="shadow-2 border-round"
+            width={40}
+            height={40}
+            style={{ objectFit: "cover" }}
+            onClick={(event) => {
+                event.stopPropagation();
+                setLightboxUrls([{ src: value, downloadUrl: value }]);
+                setOpenLightbox(true);
+            }}
+        />
+    );
+};
+

package/src/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget copy.tsx

@@ -0,0 +1,11 @@
+import SolidTableRowCell from "../SolidTableRowCell";
+
+export const SolidShortTextFieldTextRenderModeWidget = ({ value, truncateAfter }: any) => {
+    return (
+        <SolidTableRowCell
+            value={value}
+            truncateAfter={truncateAfter}
+        ></SolidTableRowCell>
+    )
+};
+

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

@@ -19,6 +19,7 @@ import { Dialog } from "primereact/dialog";
 import { Divider } from "primereact/divider";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 
 interface ErrorResponseData {
   message: string;
@@ -402,7 +403,7 @@ const CreateModel = ({ data, params }: any) => {
             </>
           }
         </div>
-        <SolidBreadcrumb />
+        <SolidFormHeader />
         {/* <div className="solid-form-stepper">
           <SolidFormStepper />
         </div> */}

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

@@ -391,12 +391,12 @@ const createValidationSchema = (currentFields: any, selectedType: any, allFields
         "Relation Model Singular Name is required"
       ),
     }),
-    ...(currentFields.includes("relationCoModelFieldName") && {
-      relationCoModelFieldName: Yup.string()
-      // .required(
-      //   "Relation Model Field Name is required"
-      // ),
-    }),
+    // ...(currentFields.includes("relationCoModelFieldName") && {
+    //   relationCoModelFieldName: Yup.string()
+    //   // .required(
+    //   //   "Relation Model Field Name is required"
+    //   // ),
+    // }),
 
     ...(currentFields.includes("relationCreateInverse") && {
       relationCreateInverse: Yup.boolean(),

package/src/components/core/module/CreateModule.tsx

@@ -6,6 +6,7 @@ import { DropzoneUpload } from "@/components/common/DropzoneUpload";
 import { FileReaderExt } from "@/components/common/FileReaderExt";
 import { SingleSelectAutoCompleteField } from "@/components/common/SingleSelectAutoCompleteField";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { getSingularAndPlural } from "@/helpers/helpers";
 import { handleError } from "@/helpers/ToastContainer";
@@ -414,7 +415,7 @@ const CreateModule = ({ data }: any) => {
             </>
           }
         </div>
-        <SolidBreadcrumb />
+        <SolidFormHeader />
         {/* <div className="solid-form-stepper">
           <SolidFormStepper />
         </div> */}

package/src/components/core/users/CreateUser.tsx

@@ -2,6 +2,7 @@
 import { BackButton } from "@/components/common/BackButton";
 import { CancelButton } from "@/components/common/CancelButton";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { useRegisterPrivateMutation, useUpdateUserMutation } from "@/redux/api/authApi";
 import { useGetrolesQuery } from "@/redux/api/roleApi";
@@ -269,7 +270,7 @@ const CreateUser = ({ data, params }: any) => {
             </>
           )}
         </div>
-        <SolidBreadcrumb />
+        <SolidFormHeader />
         {/* <div className="solid-form-stepper">
           <SolidFormStepper />
         </div> */}
@@ -399,10 +400,10 @@ const CreateUser = ({ data, params }: any) => {
 
                 </div>
               </Panel>
-              
+
               {/* <Divider /> */}
               {/* <p className="form-wrapper-heading text-base" style={{ fontSize: 16 }}>Roles</p> */}
-             
+
               <Panel toggleable header="Roles" className="solid-column-panel mt-5">
                 <div className="formgrid grid mt-4">
                   {rolesData?.data?.records && rolesData?.data?.records.map((role: any, i: number) => (

package/src/helpers/registry.ts

@@ -9,6 +9,8 @@ import { SolidBooleanFieldCheckboxWidget } from "@/components/core/form/fields/w
 import { SolidBooleanFieldSelectWidget } from "@/components/core/form/fields/widgets/SolidBooleanSelectFieldWidget";
 import { SolidSelectionStaticAutocompleteWidget } from "@/components/core/form/fields/widgets/SolidSelectionStaticAutocompleteFieldWidget";
 import { SolidSelectionStaticRadioWidget } from "@/components/core/form/fields/widgets/SolidSelectionStaticRadioFieldWidget";
+import { SolidShortTextFieldTextRenderModeWidget } from "@/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget copy";
+import { SolidShortTextFieldImageRenderModeWidget } from "@/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget";
 
 type ExtensionRegistry = {
     components: Record<string, React.ComponentType<any>>;
@@ -75,6 +77,8 @@ registerExtensionComponent("SolidBooleanFieldCheckboxWidget", SolidBooleanFieldC
 registerExtensionComponent("SolidBooleanFieldSelectWidget", SolidBooleanFieldSelectWidget, ["field-selectbox"]);
 registerExtensionComponent("SolidSelectionStaticAutocompleteWidget", SolidSelectionStaticAutocompleteWidget, ["field-autocomplete"]);
 registerExtensionComponent("SolidSelectionStaticRadioWidget", SolidSelectionStaticRadioWidget, ["field-radio"]);
+registerExtensionComponent("SolidShortTextFieldTextRenderModeWidget", SolidShortTextFieldTextRenderModeWidget, []);
+registerExtensionComponent("SolidShortTextFieldImageRenderModeWidget", SolidShortTextFieldImageRenderModeWidget, []);
 
 
 // ModuleMetadata

package/src/index.ts

@@ -222,7 +222,7 @@ export { SolidFormStepper } from '@/components/common/SolidFormStepper'
 export { SolidViewLayoutManager } from '@/components/core/common/SolidViewLayoutManager';
 
 // export { SolidListViewOptions } from '@/components/core/common/SolidListViewOptions';
-export { SolidConfigureLayoutElement } from '@/components/core/common/SolidConfigureLayoutElement';
+export { SolidListViewConfigure } from '@/components/core/list/SolidListViewConfigure';
 export { SolidCreateButton } from '@/components/core/common/SolidCreateButton';
 export { SolidGlobalSearchElement } from '@/components/core/common/SolidGlobalSearchElement';
 export { SolidSearchBox } from '@/components/core/common/SolidSearchBox';
@@ -281,6 +281,7 @@ export { SolidKanbanView } from '@/components/core/kanban/SolidKanbanView';
 
 // export * from '@/components/core/kanban/columns/relations/SolidRelationManyToOneColumn';
 
+export { SolidModuleHome } from '@/components/common/SolidModuleHome';
 export { SolidListView } from '@/components/core/list/SolidListView';
 export { SolidListViewColumn, getNumberOfInputs } from '@/components/core/list/SolidListViewColumn';
 export type { SolidListViewColumnParams } from '@/components/core/list/SolidListViewColumn';

package/src/redux/api/solidEntityApi.tsx

@@ -78,7 +78,13 @@ export const createSolidEntityApi = (entityName: string) => {
                     method: 'POST',
                     body: data
                 })
-
+            }),
+            patchUpdateSolidEntity: builder.mutation({
+                query: ({ id, data }) => ({
+                    url: `/${kebabEntityName}/${id}`,
+                    method: 'PATCH',
+                    body: data,
+                }),
             }),
         }),
     });

package/src/resources/globals.css

@@ -1664,11 +1664,12 @@ li.header-li-px {
 }
 
 .solid-form-wrapper .solid-form-content {
-  height: calc(100vh - 111px);
+  height: calc(100vh - 115px);
+  /* height: calc(100vh - 111px); */
   /* If No Breadcrumb */
   /* height: calc(100vh - 64px); */
   /* if Stepper */
-  /* height: calc(100vh - 124px); */
+  /* height: calc(100vh - 127px); */
   overflow-y: auto;
 }
 
@@ -1682,18 +1683,27 @@ li.header-li-px {
 
 .solid-form-stepper {
   padding: 7.5px 14px 7.5px 24px;
-  background-color: var(--solid-light-100);
+  background-color: #fff;
+  /* background-color: var(--solid-light-100); */
   border-top: 1px solid var(--primary-light-color);
   border-bottom: 1px solid var(--primary-light-color);
 }
 
+.solid-dynamic-breadcrumb-stepper {
+  height: 50px;
+  border-bottom: 1px solid var(--primary-light-color);
+  padding: 0.8rem 1.5rem;
+}
+
 .solid-breadcrumb.p-breadcrumb {
-  border-bottom: 1px solid #CED0D6;
+  /* border-bottom: 1px solid #CED0D6; */
+  border-bottom: none;
   border-right: none;
   border-left: none;
   border-top: none;
   border-radius: 0;
-  padding: 0.8rem 1.5rem;
+  padding: 0;
+  /* padding: 0.8rem 1.5rem; */
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -1730,17 +1740,112 @@ li.header-li-px {
   margin-top: 10px;
 }
 
+
+.solid-dynamic-stepper {
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid var(--solid-stepper-border);
+}
+
+.active-step-arrow {
+  left: -21px;
+  z-index: 9999;
+  top: 50%;
+  transform: translateY(-38%);
+}
+
+.active-before-step-arrow {
+  left: -18px;
+  z-index: 9999;
+  top: 50%;
+  transform: translateY(-38%);
+}
+
+.inactive-step-arrow {
+  right: 2px;
+  z-index: 999;
+  top: 50%;
+  transform: translateY(-37%);
+}
+
 .solid-step-button.p-button {
   position: relative;
-  min-width: 130px;
+  min-width: 110px;
   display: flex;
   justify-content: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 0.875rem;
+  border-radius: 0;
+  border: none;
+}
+
+.solid-step-button.p-button-primary {
+  padding-right: 0;
 }
 
+.solid-step-button.p-button-secondary:first-child {
+  padding-left: 0;
+  min-width: 100px;
+}
 
-.solid-step-button.p-button:not(.btn-step-first) {
-  padding-left: 40px;
-  min-width: 150px;
+/* .solid-step-button.p-button.p-button-text:first-child {
+  padding-left: 16px !important;
+}
+
+.solid-step-button.p-button.p-button-text:not(:first-child) {
+  padding-left: 0px !important;
+} */
+
+.solid-step-button.p-button-secondary {
+  background-color: #EAEDF1;
+  color: #0D0B26;
+  padding-right: 0;
+}
+
+.solid-step-button.p-button-secondary.p-button:not(:disabled):active {
+  background: #EAEDF1;
+  color: #0D0B26;
+}
+
+.solid-step-button.p-button-secondary.p-button:not(:disabled):hover {
+  background: #EAEDF1;
+  color: #0D0B26;
+}
+
+.solid-step-button.p-button:not(:disabled):active {
+  background: var(--primary-color);
+  color: #ffffff;
+  border-color: var(--primary-color);
+}
+
+.solid-step-button.p-button:not(:disabled):hover {
+  background: var(--primary-color);
+  color: #ffffff;
+  border-color: var(--primary-color);
+}
+
+.solid-step-button.p-button.p-button-text {
+  background-color: transparent;
+  color: #0D0B26;
+  border: 0;
+  min-width: 130px;
+  /* padding-left: 0; */
+}
+
+/* .solid-dynamic-stepper.test .solid-step-button.p-button:nth-child(2) {
+  padding-left: 20px !important;
+  min-width: 130px;
+} */
+
+.solid-step-button.p-button.p-button-text:not(:disabled):active {
+  background-color: transparent;
+  color: #0D0B26;
+}
+
+.solid-step-button.p-button.p-button-text:not(:disabled):hover {
+  background-color: transparent;
+  color: #0D0B26;
 }
 
 .solid-step-button.btn-step-first {
@@ -2442,7 +2547,7 @@ li.header-li-px {
   background-color: transparent;
 }
 
-.solid-layout-accordion .p-accordion-tab:first-child {
+.solid-layout-accordion .p-accordion-tab:not(:last-child) {
   border-bottom: 1px solid var(--primary-light-color);
 }
 
@@ -2774,9 +2879,29 @@ li.header-li-px {
   .solid-right-layout .solid-logo {
     top: 3rem;
   }
+
   .customize-layout-panel.p-overlaypanel {
     position: absolute;
     left: 59% !important;
     top: 14% !important;
   }
+}
+
+.kanban-ungrouped-column {
+  max-width: 100%;
+}
+
+.kanban-ungrouped-column-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.kanban-ungrouped-column .kanban-card-container {
+  flex: 1 1 calc(20% - 10px);
+  max-width: calc(20% - 10px);
+}
+
+.image-preview{
+  max-width: 100px;
 }

package/src/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/src/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/src/types/solid-core.d.ts

@@ -118,3 +118,7 @@ export type SolidSelectionStaticFieldWidgetProps = {
     formik: any;
     fieldContext?: SolidFieldProps;
 };
+
+export type SolidShortTextImageRenderModeWidgetProps = {
+data: string;
+}