@solidstarters/solid-core-ui 1.1.71 → 1.1.73

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

@@ -239,193 +239,195 @@ const CreateUser = ({ data, params }: any) => {
   return (
     <div className="solid-form-wrapper">
       <Toast ref={toast} />
-      <form onSubmit={formik.handleSubmit}>
-        <div className="solid-form-header">
-          {params.id === "new" ? (
-            <>
-              <div className="flex align-items-center gap-3">
-                <BackButton />
-                <div className="form-wrapper-title">Create User</div>
-              </div>
-              <div className="gap-3 flex">
-                {formik.dirty &&
-                  <Button label="Save" size="small" type="submit" />
-                }
-                <CancelButton />
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="flex align-items-center gap-3">
-                <BackButton />
-                <div className="form-wrapper-title">Update User</div>
-              </div>
-              <div>
+      <div className="solid-form-section" >
+        <form onSubmit={formik.handleSubmit}>
+          <div className="solid-form-header">
+            {params.id === "new" ? (
+              <>
+                <div className="flex align-items-center gap-3">
+                  <BackButton />
+                  <div className="form-wrapper-title">Create User</div>
+                </div>
                 <div className="gap-3 flex">
                   {formik.dirty &&
                     <Button label="Save" size="small" type="submit" />
                   }
-                  {data &&
-                    <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => deleteUser(data.id)} />
-                  }
                   <CancelButton />
                 </div>
-              </div>
-            </>
-          )}
-        </div>
-        <SolidFormHeader />
-        {/* <div className="solid-form-stepper">
+              </>
+            ) : (
+              <>
+                <div className="flex align-items-center gap-3">
+                  <BackButton />
+                  <div className="form-wrapper-title">Update User</div>
+                </div>
+                <div>
+                  <div className="gap-3 flex">
+                    {formik.dirty &&
+                      <Button label="Save" size="small" type="submit" />
+                    }
+                    {data &&
+                      <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => deleteUser(data.id)} />
+                    }
+                    <CancelButton />
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+          <SolidFormHeader />
+          {/* <div className="solid-form-stepper">
           <SolidFormStepper />
         </div> */}
-        <div className="p-4 solid-form-content">
-          <div className="grid">
-            <div className="col-8 mx-auto">
-              {/* <p className="form-wrapper-heading text-base">Basic Info</p> */}
-              <Panel header="Basic Info" className="solid-column-panel">
-                <div className="grid formgrid mt-3">
-                  <div className="field col-6 flex flex-column gap-2">
-                    <label htmlFor="fullName" className="form-field-label">
-                      Full Name
-                    </label>
-                    <InputText
-                      type="text"
-                      id="fullName"
-                      name="fullName"
-                      autoComplete={"off"}
-                      onChange={formik.handleChange}
-                      value={formik.values.fullName}
-                      className={classNames("", {
-                        "p-invalid": formik.touched.fullName && formik.errors.fullName,
-                      })}
-                    />
-                    {isFormFieldValid(formik, "fullName") && (
-                      <Message
-                        severity="error"
-                        text={formik?.errors?.fullName?.toString()}
+          <div className="p-4 solid-form-content">
+            <div className="grid">
+              <div className="col-8 mx-auto">
+                {/* <p className="form-wrapper-heading text-base">Basic Info</p> */}
+                <Panel header="Basic Info" className="solid-column-panel">
+                  <div className="grid formgrid mt-3">
+                    <div className="field col-6 flex flex-column gap-2">
+                      <label htmlFor="fullName" className="form-field-label">
+                        Full Name
+                      </label>
+                      <InputText
+                        type="text"
+                        id="fullName"
+                        name="fullName"
+                        autoComplete={"off"}
+                        onChange={formik.handleChange}
+                        value={formik.values.fullName}
+                        className={classNames("", {
+                          "p-invalid": formik.touched.fullName && formik.errors.fullName,
+                        })}
                       />
-                    )}
-                  </div>
-                  <div className="field col-6 flex flex-column gap-2">
-                    <label htmlFor="username" className="form-field-label">
-                      Username
-                    </label>
-                    <InputText
-                      type="text"
-                      id="username"
-                      name="username"
-                      autoComplete={"off"}
-                      disabled={data ? true : false}
-                      onChange={formik.handleChange}
-                      value={formik.values.username}
-                      className={classNames("", {
-                        "p-invalid": formik.touched.username && formik.errors.username,
-                      })}
-                    />
-                    {isFormFieldValid(formik, "username") && (
-                      <Message
-                        severity="error"
-                        text={formik?.errors?.username?.toString()}
-                      />
-                    )}
-                  </div>
-                  <div className="field col-6 flex flex-column gap-1 mt-4">
-                    <label htmlFor="email" className="form-field-label">
-                      Email
-                    </label>
-                    <InputText
-                      type="text"
-                      id="email"
-                      name="email"
-                      autoComplete={"off"}
-                      disabled={data ? true : false}
-                      onChange={formik.handleChange}
-                      value={formik.values.email}
-                      className={classNames("", {
-                        "p-invalid": formik.touched.email && formik.errors.email,
-                      })}
-                    />
-                    {isFormFieldValid(formik, "email") && (
-                      <Message
-                        severity="error"
-                        text={formik?.errors?.email?.toString()}
+                      {isFormFieldValid(formik, "fullName") && (
+                        <Message
+                          severity="error"
+                          text={formik?.errors?.fullName?.toString()}
+                        />
+                      )}
+                    </div>
+                    <div className="field col-6 flex flex-column gap-2">
+                      <label htmlFor="username" className="form-field-label">
+                        Username
+                      </label>
+                      <InputText
+                        type="text"
+                        id="username"
+                        name="username"
+                        autoComplete={"off"}
+                        disabled={data ? true : false}
+                        onChange={formik.handleChange}
+                        value={formik.values.username}
+                        className={classNames("", {
+                          "p-invalid": formik.touched.username && formik.errors.username,
+                        })}
                       />
-                    )}
-                  </div>
-                  <div className="field col-6 flex flex-column gap-1 mt-4">
-                    <label htmlFor="mobile" className="form-field-label">
-                      Mobile
-                    </label>
-                    <InputText
-                      type="text"
-                      id="mobile"
-                      name="mobile"
-                      autoComplete={"off"}
-                      onChange={formik.handleChange}
-                      value={formik.values.mobile}
-                      className={classNames("", {
-                        "p-invalid": formik.touched.mobile && formik.errors.mobile,
-                      })}
-                    />
-                    {isFormFieldValid(formik, "mobile ") && (
-                      <Message
-                        severity="error"
-                        text={formik?.errors?.mobile?.toString()}
+                      {isFormFieldValid(formik, "username") && (
+                        <Message
+                          severity="error"
+                          text={formik?.errors?.username?.toString()}
+                        />
+                      )}
+                    </div>
+                    <div className="field col-6 flex flex-column gap-1 mt-4">
+                      <label htmlFor="email" className="form-field-label">
+                        Email
+                      </label>
+                      <InputText
+                        type="text"
+                        id="email"
+                        name="email"
+                        autoComplete={"off"}
+                        disabled={data ? true : false}
+                        onChange={formik.handleChange}
+                        value={formik.values.email}
+                        className={classNames("", {
+                          "p-invalid": formik.touched.email && formik.errors.email,
+                        })}
                       />
-                    )}
-                  </div>
-                  <div className="field col-6 flex flex-column gap-2 my-4">
-                    <label htmlFor="Password" className="form-field-label">
-                      Password
-                    </label>
-                    <Password
-                      id="password"
-                      autoComplete="off"
-                      aria-autocomplete="none"
-                      value={formik.values.password}
-                      onChange={(e) => {
-                        formik.setFieldValue("password", e.target.value);
-                      }}
-                      toggleMask
-                      className={classNames("", {
-                        "p-invalid": isFormFieldValid(formik, "name"),
-                      })}
-
-                      inputClassName="w-full"
-                      feedback={false}
-                    />
-                    {isFormFieldValid(formik, "password") && (
-                      <Message
-                        severity="error"
-                        text={formik?.errors?.password?.toString()}
+                      {isFormFieldValid(formik, "email") && (
+                        <Message
+                          severity="error"
+                          text={formik?.errors?.email?.toString()}
+                        />
+                      )}
+                    </div>
+                    <div className="field col-6 flex flex-column gap-1 mt-4">
+                      <label htmlFor="mobile" className="form-field-label">
+                        Mobile
+                      </label>
+                      <InputText
+                        type="text"
+                        id="mobile"
+                        name="mobile"
+                        autoComplete={"off"}
+                        onChange={formik.handleChange}
+                        value={formik.values.mobile}
+                        className={classNames("", {
+                          "p-invalid": formik.touched.mobile && formik.errors.mobile,
+                        })}
                       />
-                    )}
-                  </div>
-
-                </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) => (
-                    <div key={role.name} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
-                      <Checkbox
-                        inputId={role.name}
-                        checked={selectedRoles.includes(role.name)}
-                        onChange={() => handleCheckboxChange(role.name)}
+                      {isFormFieldValid(formik, "mobile ") && (
+                        <Message
+                          severity="error"
+                          text={formik?.errors?.mobile?.toString()}
+                        />
+                      )}
+                    </div>
+                    <div className="field col-6 flex flex-column gap-2 my-4">
+                      <label htmlFor="Password" className="form-field-label">
+                        Password
+                      </label>
+                      <Password
+                        id="password"
+                        autoComplete="off"
+                        aria-autocomplete="none"
+                        value={formik.values.password}
+                        onChange={(e) => {
+                          formik.setFieldValue("password", e.target.value);
+                        }}
+                        toggleMask
+                        className={classNames("", {
+                          "p-invalid": isFormFieldValid(formik, "name"),
+                        })}
+
+                        inputClassName="w-full"
+                        feedback={false}
                       />
-                      <label htmlFor={role.name}> {role.name}</label>
+                      {isFormFieldValid(formik, "password") && (
+                        <Message
+                          severity="error"
+                          text={formik?.errors?.password?.toString()}
+                        />
+                      )}
                     </div>
-                  ))}
-                </div>
-              </Panel>
+
+                  </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) => (
+                      <div key={role.name} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
+                        <Checkbox
+                          inputId={role.name}
+                          checked={selectedRoles.includes(role.name)}
+                          onChange={() => handleCheckboxChange(role.name)}
+                        />
+                        <label htmlFor={role.name}> {role.name}</label>
+                      </div>
+                    ))}
+                  </div>
+                </Panel>
+              </div>
             </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   );
 };

package/src/components/layout/AppSidebar.tsx

@@ -188,7 +188,7 @@ const AppSidebar = () => {
                 <div className={`sidebar-right ${visibleNavbar ? "open" : ""}`}>
 
                     <div className="flex relative justify-content-between align-items-center py-4 px-3">
-                        <div className="text-base font-semibold">{currentMainMenu && currentMainMenu}</div>
+                        <div className="text-base sidebar-title font-semibold">{currentMainMenu && currentMainMenu}</div>
                         {/* <button
                             className="sidebar-toggle-button"
                             onClick={handleToggle}
@@ -213,7 +213,7 @@ const AppSidebar = () => {
                             />
                         </div>
                     </div> */}
-                    <div className="px-3">
+                    <div className="px-3 solid-sidebar-menuitems-wrapper">
                         <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>
                     </div>
                 </div>

package/src/helpers/registry.ts

@@ -33,7 +33,7 @@ import { DefaultRelationManyToOneListWidget } from "@/components/core/list/colum
 import { DefaultRelationOneToManyListWidget } from "@/components/core/list/columns/relations/SolidRelationOneToManyColumn";
 import { SolidRelationAvatarWidget } from "@/components/core/list/widgets/SolidRelationAvatarWidget";
 import { SolidRelationFieldAvatarFormWidget } from "@/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget";
-import { DefaultSelectionDynamicFormViewWidget } from "@/components/core/form/fields/SolidSelectionDynamicField";
+import { DefaultSelectionDynamicFormEditWidget, DefaultSelectionDynamicFormViewWidget } from "@/components/core/form/fields/SolidSelectionDynamicField";
 
 type ExtensionRegistry = {
     components: Record<string, React.ComponentType<any>>;
@@ -119,6 +119,7 @@ registerExtensionComponent("DefaultRelationManyToOneFormEditWidget", DefaultRela
 registerExtensionComponent("DefaultRelationManyToManyAutoCompleteFormEditWidget", DefaultRelationManyToManyAutoCompleteFormEditWidget, []);
 registerExtensionComponent("DefaultRelationManyToManyCheckBoxFormEditWidget", DefaultRelationManyToManyCheckBoxFormEditWidget, []);
 registerExtensionComponent("SolidSelectionStaticRadioFormEditWidget", SolidSelectionStaticRadioFormEditWidget, []);
+registerExtensionComponent("DefaultSelectionDynamicFormEditWidget", DefaultSelectionDynamicFormEditWidget, []);
 
 // Formview Edit Custom  widgets
 

package/src/redux/api/solidSettingsApi.tsx

@@ -32,6 +32,13 @@ export const solidSettingsApi = createApi({
                 body: data,
             }),
         }),
+        bulkUpdateSolidSettings: builder.mutation({
+            query: ({ data }) => ({
+                url: `/setting/bulk-update`,
+                method: 'POST',
+                body: data,
+            }),
+        }),
     })
 });
 
@@ -44,4 +51,5 @@ export const {
     useLazyGetSolidSettingsQuery,
     useLazyGetSolidSettingsByIdQuery,
     useUpdateSolidSettingsMutation,
+    useBulkUpdateSolidSettingsMutation
 } = solidSettingsApi;

package/src/resources/globals.css

@@ -3112,7 +3112,84 @@ flex-shrink: 0; */
 }
 
 .solid-global-search-element input {
-
   min-width: 300px;
+}
+
+.solid-empty-listview-placeholder-container {
+  border-top: 1px solid var(--primary-light-color) !important;
+  height: calc(100vh - 54px);
+  background-color: var(--solid-list-view-placeholder);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.solid-list-skeleton-wrapper {
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.solid-list-skeleton-col-1 {
+  width: 50px;
+}
+
+.solid-list-skeleton-col-2 {
+  width: 120px;
+}
+
+.solid-list-skeleton-col-8 {
+  width: 50px;
+}
+
+.solid-list-skeleton-col-3,
+.solid-list-skeleton-col-4,
+.solid-list-skeleton-col-5,
+.solid-list-skeleton-col-6 {
+  width: auto;
+}
+
+.solid-list-skeleton-header th {
+  border-top: 1px solid #CED0D6;
+  border-bottom: 1px solid #CED0D6;
+  text-align: left;
+  padding: 8px 15px;
+  height: 45px;
+  position: relative;
+}
+
+.solid-list-skeleton-header th::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 60%;
+  width: 0.0625rem;
+  background-color: #D8E2EA
+}
+
+.solid-list-skeleton-row td {
+  border-bottom: 1px solid rgba(216, 226, 234, 0.40);
+  padding: 8px 15px;
+  height: 45px;
+  vertical-align: middle;
+}
 
+.solid-list-skeleton-row td .p-skeleton {
+  height: 1rem;
+  /* Set skeleton height to 0.75rem */
+}
+
+.solid-list-skeleton-footer {
+  border-top: 1px solid rgba(216, 226, 234, 0.40);
+  padding: 20px;
+}
+
+.solid-sidebar-menuitems-wrapper {
+  height: calc(100vh - 64px);
+  overflow-y: auto;
 }

package/src/resources/solid-primereact.css

@@ -1312,7 +1312,7 @@
     }
 
     .p-datatable .p-paginator-bottom {
-        border-width: 1px 0 1px 0;
+        border-width: 1px 0 0 0;
         border-radius: 0;
     }