Merge pull request #15 from Freelancer-god/feat/upload-image

Feat/upload image

package.json

@@ -41,6 +41,7 @@
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.11",
     "focus-trap-react": "^10.2.3",
@@ -81,4 +82,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}

src/app/dashboard/chihois/_components/columns.tsx

@@ -64,12 +64,12 @@ const defaultColumns: ColumnDef<Chihoi>[] = [
             <DropDownModalWrapper label="Edit">
               <ChihoiForm type="Edit" initialData={chihoi} />
             </DropDownModalWrapper>
-            <DropDownModalWrapper label="Delete" className="text-red-500">
-              <DeleteChihoiForm id={chihoi.id} />
-            </DropDownModalWrapper>
             <DropDownModalWrapper label="Upload">
               <UploadChihoiForm id={chihoi.id} />
             </DropDownModalWrapper>
+            <DropDownModalWrapper label="Delete" className="text-red-500">
+              <DeleteChihoiForm id={chihoi.id} />
+            </DropDownModalWrapper>
           </DropdownMenuContent>
         </DropdownMenu>
       );

src/app/dashboard/employees/_components/employee-form.tsx

@@ -1,19 +1,23 @@
 "use client";
-import { Employee, employeeSchema } from "@/types/employee";
+import { Employee, EmployeeFormSchema, employeeSchema } from "@/types/employee";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import ModalCard from "@/components/form/modal-card";
 import ReactHookForm from "@/components/form/react-hook-form";
 import { useCreateEmployee, useEditEmployee } from "@/services/employee-service";
 import DynamicFormFields from "@/components/form/dynamic-form-fields";
-import { PasswordInput } from "@/components/ui/toggle-able-password";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { useGetRoles } from "@/services/role-service";
+import BlurryLoader from "@/components/blurry-loader";
 
 export default function EmployeeForm({ type, initialData = {} }: { type: "Create" | "Edit"; initialData?: any }) {
   const { mutate: mutateCreate, isPending: isPendingCreate, isSuccess: isSuccessCreate } = useCreateEmployee();
   const { mutate: mutateEdit, isPending: isPendingEdit, isSuccess: isSuccessEdit } = useEditEmployee();
+  const { data: roles, isFetching: isFetchingRole } = useGetRoles();
 
   const form = useForm<Employee>({
-    resolver: zodResolver(employeeSchema),
+    resolver: zodResolver(EmployeeFormSchema),
     defaultValues: initialData,
   });
 
@@ -34,12 +38,33 @@ export default function EmployeeForm({ type, initialData = {} }: { type: "Create
       onClose={isSuccessCreate || isSuccessEdit}
     >
       <ReactHookForm formId={`${type}-employee-form`} form={form} onSubmit={handleSubmit} schema={employeeSchema}>
-        <DynamicFormFields
-          schema={employeeSchema}
+        <DynamicFormFields schema={employeeSchema} control={form.control} />
+        <FormField
           control={form.control}
-          overrides={{
-            password: <PasswordInput name="password" />,
-          }}
+          name="role_id"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="capitalize">Role</FormLabel>
+              <Select onValueChange={field.onChange}>
+                <FormControl>
+                  <div className="relative">
+                    <BlurryLoader shouldShow={isFetchingRole} dimensions="w-5 h-5" />
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Role" />
+                    </SelectTrigger>
+                  </div>
+                </FormControl>
+                <SelectContent>
+                  {roles?.map((role, index) => (
+                    <SelectItem key={index} value={role.id.toString()}>
+                      {role.display_name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
         />
       </ReactHookForm>
     </ModalCard>

src/app/dashboard/employees/_components/select-box-roles.tsx

@@ -0,0 +1,26 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { useGetRoles } from "@/services/role-service";
+import BlurryLoader from "@/components/blurry-loader";
+
+export default function SelectBoxRoles({ form }) {
+  const { data: roles, isFetching: isFetchingRole } = useGetRoles();
+
+  return (
+    <Select>
+      <div className="relative">
+        <BlurryLoader shouldShow={isFetchingRole} dimensions="w-5 h-5" />
+        <SelectTrigger>
+          <SelectValue placeholder="Select Role" />
+        </SelectTrigger>
+      </div>
+      <SelectContent>
+        {roles?.map((role, index) => (
+          <SelectItem key={index} value={role.id.toString()}>
+            {role.display_name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

src/app/dashboard/roles/_components/columns.tsx

@@ -13,11 +13,13 @@ import {
 import { MoreHorizontal } from "lucide-react";
 import { Role, roleSchema } from "@/types/role";
 import { Checkbox } from "@/components/ui/checkbox";
-import { mergeArraysById } from "@/lib/utils";
+import { mergeArraysById, snakeToHumanReadable } from "@/lib/utils";
 import DeleteRoleForm from "@/app/dashboard/roles/_components/delete-role-form";
 import DropDownModalWrapper from "@/components/dropdown/dropdown-modal-wrapper";
 import RoleForm from "@/app/dashboard/roles/_components/role-form";
 import { dynamicColumns } from "@/components/table/dynamic-column";
+import { DataTableColumnHeader } from "@/components/table/data-table-column-header";
+import { PermissionGroup } from "@/types/permissionGroup";
 
 const defaultColumns: ColumnDef<Role>[] = [
   {
@@ -72,6 +74,28 @@ const defaultColumns: ColumnDef<Role>[] = [
 ];
 
 // Add, or override stuff here by specify id
-const updates: ColumnDef<Role>[] = [];
+const updates: ColumnDef<Role>[] = [
+  {
+    id: "permission_groups",
+    accessorKey: "permission_groups",
+    header: ({ column }) => <DataTableColumnHeader column={column} title={snakeToHumanReadable("Quyền")} />,
+    cell: ({ row }) => {
+      const role = row.original;
+      const permissionGroups = role.permission_groups;
+      return (
+        <ul className="list-disc">
+          {permissionGroups &&
+            permissionGroups.he_thong &&
+            permissionGroups.he_thong.length > 0 &&
+            permissionGroups?.he_thong?.map((permission) => (
+              <li className="min-w-[150px]" key={permission.id}>
+                {permission.display_name}
+              </li>
+            ))}
+        </ul>
+      );
+    },
+  },
+];
 
 export const columns = mergeArraysById(defaultColumns, updates);

src/app/dashboard/roles/_components/role-form.tsx

@@ -1,27 +1,35 @@
 "use client";
-import { Role, roleSchema } from "@/types/role";
+import { PermissionID, Role, roleSchema } from "@/types/role";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import ModalCard from "@/components/form/modal-card";
 import ReactHookForm from "@/components/form/react-hook-form";
 import { useCreateRole, useEditRole } from "@/services/role-service";
 import DynamicFormFields from "@/components/form/dynamic-form-fields";
-import { PasswordInput } from "@/components/ui/toggle-able-password";
+import MultipleSelector, { Option } from "@/components/ui/multi-selector";
 
-export default function RoleForm({ type, initialData = {} }: { type: "Create" | "Edit"; initialData?: any }) {
+export default function RoleForm({ type, initialData = {} }: { type: "Create" | "Edit"; initialData?: Role }) {
   const { mutate: mutateCreate, isPending: isPendingCreate, isSuccess: isSuccessCreate } = useCreateRole();
   const { mutate: mutateEdit, isPending: isPendingEdit, isSuccess: isSuccessEdit } = useEditRole();
 
   const form = useForm<Role>({
     resolver: zodResolver(roleSchema),
     defaultValues: initialData,
   });
-
   const handleSubmit = (values: Role) => {
+    // Handle permissions_id format: from [{label: 'test', value: '1'}] to ['1', '2']
+    const permissionIds = values.permission_ids as Option[];
+    values.permission_ids = permissionIds?.length > 0 && permissionIds.map(({ value }) => value);
+
     if (type === "Create") mutateCreate(values);
     if (type === "Edit") mutateEdit(values);
   };
 
+  const defaultOptions = Object.entries(PermissionID).map(([key, value]) => ({
+    value: value as string,
+    label: key as string,
+  }));
+
   return (
     <ModalCard
       form={form}
@@ -38,7 +46,16 @@ export default function RoleForm({ type, initialData = {} }: { type: "Create" |
           schema={roleSchema}
           control={form.control}
           overrides={{
-            password: <PasswordInput name="password" />,
+            permission_ids: (
+              <MultipleSelector
+                className="w-full max-w-[400px]"
+                defaultOptions={defaultOptions}
+                placeholder="Chọn Quyền..."
+                emptyIndicator={
+                  <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">no results found.</p>
+                }
+              />
+            ),
           }}
         />
       </ReactHookForm>