@solidstarters/solid-core-ui 1.1.6 → 1.1.8

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

@@ -1,5 +1,7 @@
 'use client';
+import { BackButton } from "@/components/common/BackButton";
 import { CancelButton } from "@/components/common/CancelButton";
+import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { useRegisterPrivateMutation, useUpdateUserMutation } from "@/redux/api/authApi";
 import { useGetrolesQuery } from "@/redux/api/roleApi";
 import { useDeleteUserMutation } from "@/redux/api/userApi";
@@ -8,6 +10,7 @@ import { useFormik } from "formik";
 import { usePathname, useRouter } from "next/navigation";
 import { Button } from "primereact/button";
 import { Checkbox } from "primereact/checkbox";
+import { Divider } from "primereact/divider";
 import { InputText } from "primereact/inputtext";
 import { Message } from "primereact/message";
 import { Panel } from "primereact/panel";
@@ -24,7 +27,7 @@ interface ErrorResponseData {
   error: string;
 }
 
-const CreateUser = ({ data,params }: any) => {
+const CreateUser = ({ data, params }: any) => {
 
   const toast = useRef<Toast>(null);
   const pathname = usePathname();
@@ -231,181 +234,185 @@ const CreateUser = ({ data,params }: any) => {
   }, [isSuccess, isDeleteUserSuceess, isUpdateuserSuceess])
 
   return (
-    <div className="p-grid p-fluid">
+    <div className="solid-form-wrapper">
       <Toast ref={toast} />
-
       <form onSubmit={formik.handleSubmit}>
-        {params.id === "new" ? (
-          <div className="flex gap-3 justify-content-between mb-5">
-            <div className="form-wrapper-title">Create User</div>
-            <div className="gap-3 flex">
-              <Button label="Save" size="small" type="submit" className="small-button" />
-              <CancelButton />
-            </div>
-          </div>
-        ) : (
-          <div className="flex gap-3 justify-content-between mb-5">
-            <h1 className="m-0">Update User</h1>
-            <div className="gap-3 flex">
-              <Button label="Save" size="small" type="submit" className="small-button" />
-              {data &&
-                <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => deleteUser(data.id)} className="small-button" />
-              }
-              <CancelButton />
-            </div>
-          </div>
-        )}
-        <div className="form-wrapper">
-          <div className="grid formgrid">
-            <div className="md:col-6 sm:col-12">
-              <div className="field">
-                <label htmlFor="fullName" className="form-label 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-inputtext-sm w-full small-input", {
-                    "p-invalid": formik.touched.fullName && formik.errors.fullName,
-                  })}
-                />
-                {isFormFieldValid(formik, "fullName") && (
-                  <Message
-                    severity="error"
-                    text={formik?.errors?.fullName?.toString()}
-                  />
-                )}
+        <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>
-            <div className="md:col-6 sm:col-12">
-              <div className="field">
-                <label htmlFor="username" className="form-label 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-inputtext-sm w-full small-input", {
-                    "p-invalid": formik.touched.username && formik.errors.username,
-                  })}
-                />
-                {isFormFieldValid(formik, "username") && (
-                  <Message
-                    severity="error"
-                    text={formik?.errors?.username?.toString()}
-                  />
-                )}
-              </div>
-            </div>
-            <div className="md:col-6 sm:col-12">
-              <div className="field">
-                <label htmlFor="email" className="form-label 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-inputtext-sm w-full small-input", {
-                    "p-invalid": formik.touched.email && formik.errors.email,
-                  })}
-                />
-                {isFormFieldValid(formik, "email") && (
-                  <Message
-                    severity="error"
-                    text={formik?.errors?.email?.toString()}
-                  />
-                )}
+              <div className="gap-3 flex">
+                <Button label="Save" size="small" type="submit" />
+                <CancelButton />
               </div>
-            </div>
-            <div className="md:col-6 sm:col-12">
-              <div className="field">
-                <label htmlFor="mobile" className="form-label form-field-label">
-                  Mobile
-                </label>
-                <InputText
-                  type="text"
-                  id="mobile"
-                  name="mobile"
-                  autoComplete={"off"}
-                  onChange={formik.handleChange}
-                  value={formik.values.mobile}
-                  className={classNames("p-inputtext-sm w-full small-input", {
-                    "p-invalid": formik.touched.mobile && formik.errors.mobile,
-                  })}
-                />
-                {isFormFieldValid(formik, "mobile ") && (
-                  <Message
-                    severity="error"
-                    text={formik?.errors?.mobile?.toString()}
-                  />
-                )}
+            </>
+          ) : (
+            <>
+              <div className="flex align-items-center gap-3">
+                <BackButton />
+                <h1 className="m-0">Update User</h1>
               </div>
-            </div>
-            <div className="md:col-6 sm:col-12">
-              <div className="field">
-                <label htmlFor="Password" className="form-label 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-inputtext-sm w-full small-input", {
-                    "p-invalid": isFormFieldValid(formik, "name"),
-                  })}
-
-                  inputClassName="w-full"
-                  feedback={false}
-                />
-                {isFormFieldValid(formik, "password") && (
-                  <Message
-                    severity="error"
-                    text={formik?.errors?.password?.toString()}
-                  />
-                )}
+              <div>
+                <div className="gap-3 flex">
+                  <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>
-
-          </div>
+            </>
+          )}
         </div>
-
-        <div className="form-wrapper">
-          <div className="p-col-12 p-md-6">
-            <h2>Roles</h2>
-            <Panel toggleable header="Roles" style={{ marginBottom: "30px" }}>
-              <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
-                {rolesData?.data?.records && rolesData?.data?.records.map((role: any) => (
-                  <div key={role.name} className="p-field-checkbox md:col-6 sm:col-12">
-                    <Checkbox
-                      inputId={role.name}
-                      checked={selectedRoles.includes(role.name)}
-                      onChange={() => handleCheckboxChange(role.name)}
-                      disabled={data ? true : false}
+        <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>
+              <div className="grid formgrid">
+                <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>
+                <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-2 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()}
+                    />
+                  )}
+                </div>
+                <div className="field col-6 flex flex-column gap-2 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()}
                     />
-                    <label htmlFor={role.name}> {role.name}</label>
-                  </div>
-                ))}
+                  )}
+                </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()}
+                    />
+                  )}
+                </div>
+
               </div>
-            </Panel>
+
+              <Divider />
+              <p className="form-wrapper-heading text-base" style={{ fontSize: 16 }}>Roles</p>
+              <Panel toggleable header="Roles">
+                <div className="formgrid grid">
+                  {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)}
+                        disabled={data ? true : false}
+                      />
+                      <label htmlFor={role.name}> {role.name}</label>
+                    </div>
+                  ))}
+                </div>
+              </Panel>
+            </div>
           </div>
         </div>
       </form>
@@ -413,4 +420,5 @@ const CreateUser = ({ data,params }: any) => {
   );
 };
 
+
 export default CreateUser;

package/src/components/layout/user-profile-menu.tsx

@@ -10,8 +10,11 @@ import { LayoutConfig } from "@/types";
 import { toggleTheme } from "@/redux/features/themeSlice";
 import { InputSwitch } from "primereact/inputswitch";
 import { Button } from "primereact/button";
+import { useRouter } from "next/navigation";
 
 const UserProfileMenu = () => {
+  const router = useRouter();
+
   // const { user } = useAppSelector((state) => state.auth);
   const { changeTheme } = useContext(PrimeReactContext);
   const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
@@ -76,7 +79,9 @@ const UserProfileMenu = () => {
             </div>
             <InputSwitch checked={checked} onChange={handleThemeToggle} />
           </div>
-
+          <div className="p-2">
+            <Button icon="pi pi-cog" label="General Settings" size="small" text severity="secondary" className="w-full text-left gap-2" onClick={()=>router.push("/admin/settings") }/>
+          </div>
           <div className="user-profile-body p-3">
             <Button
               text

package/src/index.ts

@@ -213,7 +213,9 @@ export { HeaderDynamicTitles } from '@/components/common/HeaderDynamicTitles';
 export { MultipleSelectAutoCompleteField } from '@/components/common/MultipleSelectAutoCompleteField';
 export { SingleSelectAutoCompleteField } from '@/components/common/SingleSelectAutoCompleteField';
 export { SocialMediaLogin } from '@/components/common/SocialMediaLogin';
-
+export { BackButton } from '@/components/common/BackButton'
+export { FileReaderExt } from '@/components/common/FileReaderExt'
+export { SolidFormStepper } from '@/components/common/SolidFormStepper'
 
 // export { SolidListViewOptions } from '@/components/core/common/SolidListViewOptions';
 export { SolidConfigureLayoutElement } from '@/components/core/common/SolidConfigureLayoutElement';
@@ -449,7 +451,7 @@ export { solidViewsApi, useCreateSolidViewMutation, useDeleteMultipleSolidViewsM
 // export * from '@/redux/api/tagApi';
 // export * from '@/redux/api/tagGroupApi';
 export { useCreateuserroleMutation, useCreateuserrolebulkMutation, useDeleteMultipleUsersMutation, useDeleteUserMutation, useGetusersByIdQuery, useGetusersQuery, useLazyCheckIfPermissionExistsQuery, useLazyGetusersByIdQuery, useLazyGetusersQuery, useLazyUpdateSessionQuery, useRegisterUserMutation, useUpdatePasswordMutation, useUpdateProfileMutation, useUpdateSessionQuery, useUploadAvatarMutation, userApi } from '@/redux/api/userApi';
-
+export { solidSettingsApi, useCreateSolidSettingsMutation, useGetSolidSettingsByIdQuery, useGetSolidSettingsQuery, useGetAuthSettingsQuery, useLazyGetAuthSettingsQuery, useLazyGetSolidSettingsQuery, useLazyGetSolidSettingsByIdQuery, useUpdateSolidSettingsMutation, } from '@/redux/api/solidSettingsApi';
 export { logout, setToken } from '@/redux/features/authSlice';
 export { gridView, listView } from '@/redux/features/dataViewSlice';
 export { hideNavbar, showNavbar, toggleNavbar } from '@/redux/features/navbarSlice';
@@ -590,6 +592,8 @@ export { default as popupReducer } from '@/redux/features/popupSlice';
 export { default as themeReducer } from '@/redux/features/themeSlice';
 export { default as userReducer } from '@/redux/features/userSlice';
 
+export {default as GenerateModelCodeRowAction } from '@/components/core/extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction'
 
 // types
 export type { LayoutConfig } from '@/types';
+export { GeneralSettings } from '@/components/common/GeneralSettings';

package/src/redux/api/solidEntityApi.tsx

@@ -69,6 +69,17 @@ export const createSolidEntityApi = (entityName: string) => {
                     method: 'DELETE',
                 }),
             }),
+            recoverSolidEntityById: builder.query({
+                query: (id) => `/${kebabEntityName}/recover/${id}`,
+            }),
+            recoverSolidEntity: builder.mutation({
+                query: (data) => ({
+                    url: `/${kebabEntityName}/bulk-recover/`,
+                    method: 'POST',
+                    body: data
+                })
+
+            }),
         }),
     });
 };

package/src/redux/api/solidSettingsApi.tsx

@@ -0,0 +1,47 @@
+import { createApi } from '@reduxjs/toolkit/query/react';
+import { baseQueryWithAuth } from './fetchBaseQuery';
+
+export const solidSettingsApi = createApi({
+    reducerPath: 'solidSettingsApi',
+    baseQuery: baseQueryWithAuth,
+    endpoints: (builder) => ({
+        createSolidSettings: builder.mutation({
+            query: (data) => ({
+                url: '/setting',
+                method: 'POST',
+                body: data
+            }),
+        }),
+        getSolidSettings: builder.query({
+            query: () => {
+                return `/setting`
+            },
+        }),
+        getAuthSettings: builder.query({
+            query: () => {
+                return `/setting/wrapped`
+            },
+        }),
+        getSolidSettingsById: builder.query({
+            query: (id) => `/setting/${id}`,
+        }),
+        updateSolidSettings: builder.mutation({
+            query: ({ id, data }) => ({
+                url: `/setting/${id}`,
+                method: 'PUT',
+                body: data,
+            }),
+        }),
+    })
+});
+
+export const {
+    useCreateSolidSettingsMutation,
+    useGetSolidSettingsByIdQuery,
+    useGetSolidSettingsQuery,
+    useGetAuthSettingsQuery,
+    useLazyGetAuthSettingsQuery,
+    useLazyGetSolidSettingsQuery,
+    useLazyGetSolidSettingsByIdQuery,
+    useUpdateSolidSettingsMutation,
+} = solidSettingsApi;