From d3da289363716e33218dd55268857fe97bb27ffa Mon Sep 17 00:00:00 2001 From: percyfikri Date: Fri, 15 Nov 2024 09:18:23 +0700 Subject: [PATCH] Update : Shadcn migration except Modal and Scrollarea in user management --- apps/backend/src/routes/users/route.ts | 22 +- .../modals/UserDeleteModal.tsx | 75 +++--- .../usersManagement/modals/UserFormModal.tsx | 216 +++++++++--------- .../_dashboardLayout/users/index.lazy.tsx | 5 +- 4 files changed, 158 insertions(+), 160 deletions(-) diff --git a/apps/backend/src/routes/users/route.ts b/apps/backend/src/routes/users/route.ts index 6034b2f..4eadb67 100644 --- a/apps/backend/src/routes/users/route.ts +++ b/apps/backend/src/routes/users/route.ts @@ -16,17 +16,17 @@ import { respondents } from "../../drizzle/schema/respondents"; import { forbidden, notFound } from "../../errors/DashboardError"; export const userFormSchema = z.object({ - name: z.string().min(1, "Name is required").max(255), - username: z.string().min(1, "Username is required").max(255), - email: z.string().min(1, "Email is required").max(255), - password: z.string().min(6, "Password is required"), - companyName: z.string().min(1, "Company name is required").max(255), - position: z.string().min(1, "Position is required").max(255), - workExperience: z.string().min(1, "Work experience is required").max(255), - address: z.string().min(1, "Address is required"), - phoneNumber: z.string().min(1, "Phone number is required").max(13), + name: z.string().min(1, "Nama wajib diisi").max(255), + username: z.string().min(1, "Username wajib diisi").max(255), + email: z.string().min(1, "Email wajib diisi").max(255), + password: z.string().min(6, "Password wajib diisi"), + companyName: z.string().min(1, "Nama Perusahaan wajib diisi").max(255), + position: z.string().min(1, "Jabatan wajib diisi").max(255), + workExperience: z.string().min(1, "Pengalaman Kerja wajib diisi").max(255), + address: z.string().min(1, "Alamat wajib diisi"), + phoneNumber: z.string().min(1, "Nomor Telepon wajib diisi").max(13), isEnabled: z.string().default("false"), - roles: z.array(z.string().min(1, "Role is required")), + roles: z.array(z.string().min(1, "Role wajib diisi")), }); export const userUpdateSchema = userFormSchema.extend({ @@ -342,7 +342,7 @@ const usersRoute = new Hono() .values({ companyName: userData.companyName, position: userData.position, - workExperience: userData.workExperience, + workExperience: userData.workExperience + " Tahun", address: userData.address, phoneNumber: userData.phoneNumber, userId: newUser.id, diff --git a/apps/frontend/src/modules/usersManagement/modals/UserDeleteModal.tsx b/apps/frontend/src/modules/usersManagement/modals/UserDeleteModal.tsx index 2e5d89b..8eb21af 100644 --- a/apps/frontend/src/modules/usersManagement/modals/UserDeleteModal.tsx +++ b/apps/frontend/src/modules/usersManagement/modals/UserDeleteModal.tsx @@ -1,5 +1,14 @@ import client from "@/honoClient"; -import { Button, Flex, Modal, Text } from "@mantine/core"; +import { + AlertDialog, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from "@/shadcn/components/ui/alert-dialog"; +import { Button } from "@/shadcn/components/ui/button"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { getRouteApi, useSearch } from "@tanstack/react-router"; import { deleteUser } from "../queries/userQueries"; @@ -60,40 +69,34 @@ export default function UserDeleteModal() { const isModalOpen = Boolean(searchParams.delete && userQuery.data); return ( - navigate({ search: {} })} - title={`Konfirmasi Hapus`} - > - - Apakah Anda yakin ingin menghapus pengguna{" "} - - {userQuery.data?.name} - - ? Tindakan ini tidak dapat diubah. - - - {/* {errorMessage && {errorMessage}} */} - {/* Buttons */} - - - - - + navigate({ search: {} })}> + + + Konfirmasi Hapus + + Apakah Anda yakin ingin menghapus pengguna{" "} + {userQuery.data?.name}? +
+ Tindakan ini tidak dapat diubah. + + + + navigate({ search: {} })} + disabled={mutation.isPending} + > + Batal + + + + + ); } diff --git a/apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx b/apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx index a24b80f..b550534 100644 --- a/apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx +++ b/apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx @@ -1,19 +1,16 @@ +import client from "../../../honoClient"; import stringToColorHex from "@/utils/stringToColorHex"; import { Avatar, - Button, - Center, - Flex, - Modal, - ScrollArea, - Stack, -} from "@mantine/core"; + AvatarFallback, + AvatarImage +} from "@/shadcn/components/ui/avatar"; +import { Modal, ScrollArea } from "@mantine/core"; +import { Button } from "@/shadcn/components/ui/button"; import { useForm } from "@mantine/form"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { getRouteApi } from "@tanstack/react-router"; import { createUser, updateUser } from "../queries/userQueries"; -import { TbDeviceFloppy } from "react-icons/tb"; -import client from "../../../honoClient"; import { getUserByIdQueryOptions } from "../queries/userQueries"; import { useEffect } from "react"; import { notifications } from "@mantine/notifications"; @@ -191,114 +188,113 @@ export default function UserFormModal() { }); return ( - navigate({ search: {} })} title={modalTitle} //Uppercase first letter scrollAreaComponent={ScrollArea.Autosize} size="md" - > -
handleSubmit(values))}> - - {/* Avatar */} -
- - {form.values.name?.[0]?.toUpperCase()} - -
- + > + handleSubmit(values))}> +
+
+ + + + {form.values.name?.[0]?.toUpperCase() ?? "?"} + + +
+
- {createInputComponents({ - disableAll: mutation.isPending, - readonlyAll: formType === "detail", - inputs: [ - { - type: "text", - label: "Nama", - ...form.getInputProps("name"), - }, - { - type: "text", - label: "Jabatan", - ...form.getInputProps("position"), - }, - { - type: "text", - label: "Pengalaman Kerja", - ...form.getInputProps("workExperience"), - }, - { - type: "text", - label: "Email", - ...form.getInputProps("email"), - }, - { - type: "text", - label: "Instansi/Perusahaan", - ...form.getInputProps("companyName"), - }, - { - type: "text", - label: "Alamat", - ...form.getInputProps("address"), - }, - { - type: "text", - label: "Nomor Telepon", - ...form.getInputProps("phoneNumber"), - }, - - { - type: "multi-select", - label: "Roles", - value: form.values.roles, - onChange: (values) => - form.setFieldValue("roles", values), - data: rolesQuery.data?.map((role) => ({ - value: role.id, - label: role.name, - })), - error: form.errors.roles, - }, - { - type: "text", - label: "Username", - ...form.getInputProps("username"), - }, - { - type: "password", - label: "Password", - hidden: formType !== "tambah", - ...form.getInputProps("password"), - }, - ], - })} + + {createInputComponents({ + disableAll: mutation.isPending, + readonlyAll: formType === "detail", + inputs: [ + { + type: "text", + label: "Nama", + ...form.getInputProps("name"), + }, + { + type: "text", + label: "Jabatan", + ...form.getInputProps("position"), + }, + { + type: "text", + label: "Pengalaman Kerja", + ...form.getInputProps("workExperience"), + }, + { + type: "text", + label: "Email", + ...form.getInputProps("email"), + }, + { + type: "text", + label: "Instansi/Perusahaan", + ...form.getInputProps("companyName"), + }, + { + type: "text", + label: "Alamat", + ...form.getInputProps("address"), + }, + { + type: "text", + label: "Nomor Telepon", + ...form.getInputProps("phoneNumber"), + }, + + { + type: "multi-select", + label: "Roles", + value: form.values.roles, + onChange: (values) => + form.setFieldValue("roles", values), + data: rolesQuery.data?.map((role) => ({ + value: role.id, + label: role.name, + })), + error: form.errors.roles, + }, + { + type: "text", + label: "Username", + ...form.getInputProps("username"), + }, + { + type: "password", + label: "Password", + hidden: formType !== "tambah", + ...form.getInputProps("password"), + }, + ], + })} + - {/* Buttons */} - - - {formType !== "detail" && ( - - )} - -
+ {/* Buttons */} +
+ + {formType !== "detail" && ( + + )} +
+ ); } diff --git a/apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx index 47d6473..2489cf6 100644 --- a/apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx +++ b/apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx @@ -4,7 +4,6 @@ import { createLazyFileRoute } from "@tanstack/react-router"; import UserFormModal from "@/modules/usersManagement/modals/UserFormModal"; import ExtractQueryDataType from "@/types/ExtractQueryDataType"; import { createColumnHelper } from "@tanstack/react-table"; -import { Badge, Flex } from "@mantine/core"; import createActionButtons from "@/utils/createActionButton"; import { TbEye, TbPencil, TbTrash } from "react-icons/tb"; import UserDeleteModal from "@/modules/usersManagement/modals/UserDeleteModal"; @@ -61,7 +60,7 @@ export default function UsersPage() { columnHelper.display({ header: "Aksi", cell: (props) => ( - +
{createActionButtons([ { label: "Detail", @@ -85,7 +84,7 @@ export default function UsersPage() { icon: , }, ])} - +
), }), ]}