From 66aaa5f0b3a2180f022dd0e3feed798e5b83bbad Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Tue, 18 Feb 2025 12:17:41 +0700 Subject: [PATCH] feat:userlevel form --- app/(admin)/admin/master-user-level/page.tsx | 28 +- app/(admin)/admin/user-level/create/page.tsx | 12 + .../admin/user-level/edit/[id]/page.tsx | 8 + app/(admin)/admin/user-level/page.tsx | 36 + .../form/article/create-article-form.tsx | 48 +- .../edit-user-level-form.tsx | 358 +++++++++ .../master-user-level-form.tsx | 694 ++++++++---------- components/icons/sidebar-icon.tsx | 20 + components/layout/sidebar/sidebar-mobile.tsx | 15 + components/layout/sidebar/sidebar.tsx | 15 + .../master-user-level-table.tsx | 76 +- services/user-levels/user-levels-service.ts | 24 +- 12 files changed, 885 insertions(+), 449 deletions(-) create mode 100644 app/(admin)/admin/user-level/create/page.tsx create mode 100644 app/(admin)/admin/user-level/edit/[id]/page.tsx create mode 100644 app/(admin)/admin/user-level/page.tsx create mode 100644 components/form/master/master-user-level/edit-user-level-form.tsx diff --git a/app/(admin)/admin/master-user-level/page.tsx b/app/(admin)/admin/master-user-level/page.tsx index 864f469..ca7304b 100644 --- a/app/(admin)/admin/master-user-level/page.tsx +++ b/app/(admin)/admin/master-user-level/page.tsx @@ -1,12 +1,34 @@ +import { AddIcon } from "@/components/icons"; import MappingUserLevel from "@/components/table/master/master-user-level/mapping-user-level"; import MasterUserLevelTable from "@/components/table/master/master-user-level/master-user-level-table"; +import { Button } from "@heroui/button"; +import Link from "next/link"; import React from "react"; const AdminMasterUserLevel = () => { return ( - //
-
- + //
+ // + //
+ //
+ // + //
+
+
+
+ + + + +
+
); }; diff --git a/app/(admin)/admin/user-level/create/page.tsx b/app/(admin)/admin/user-level/create/page.tsx new file mode 100644 index 0000000..f9565ff --- /dev/null +++ b/app/(admin)/admin/user-level/create/page.tsx @@ -0,0 +1,12 @@ +import CreateMasterUserLevelForm from "@/components/form/master/master-user-level/master-user-level-form"; +import React from "react"; + +const AdminMasterUserLevelCreate = () => { + return ( +
+ +
+ ); +}; + +export default AdminMasterUserLevelCreate; diff --git a/app/(admin)/admin/user-level/edit/[id]/page.tsx b/app/(admin)/admin/user-level/edit/[id]/page.tsx new file mode 100644 index 0000000..8bd1b3b --- /dev/null +++ b/app/(admin)/admin/user-level/edit/[id]/page.tsx @@ -0,0 +1,8 @@ +import EditUserLevelForm from "@/components/form/master/master-user-level/edit-user-level-form"; +import React from "react"; + +const AdminMasterUserLevelCreate = () => { + return ; +}; + +export default AdminMasterUserLevelCreate; diff --git a/app/(admin)/admin/user-level/page.tsx b/app/(admin)/admin/user-level/page.tsx new file mode 100644 index 0000000..279b218 --- /dev/null +++ b/app/(admin)/admin/user-level/page.tsx @@ -0,0 +1,36 @@ +import { AddIcon } from "@/components/icons"; +import MappingUserLevel from "@/components/table/master/master-user-level/mapping-user-level"; +import MasterUserLevelTable from "@/components/table/master/master-user-level/master-user-level-table"; +import { Button } from "@heroui/button"; +import Link from "next/link"; +import React from "react"; + +const AdminMasterUserLevel = () => { + return ( + //
+ // + //
+ //
+ // + //
+
+
+
+ + + + +
+
+
+ ); +}; + +export default AdminMasterUserLevel; diff --git a/components/form/article/create-article-form.tsx b/components/form/article/create-article-form.tsx index 268f1b1..0aa48cd 100644 --- a/components/form/article/create-article-form.tsx +++ b/components/form/article/create-article-form.tsx @@ -29,6 +29,7 @@ import { import ReactSelect from "react-select"; import makeAnimated from "react-select/animated"; import { + Calendar, Checkbox, Chip, Modal, @@ -36,13 +37,16 @@ import { ModalContent, ModalFooter, ModalHeader, + Popover, + PopoverContent, + PopoverTrigger, Select, SelectItem, SelectSection, useDisclosure, } from "@heroui/react"; import GenerateSingleArticleForm from "./generate-ai-single-form"; -import { htmlToString } from "@/utils/global"; +import { convertDateFormatNoTime, htmlToString } from "@/utils/global"; import { close, error, loading } from "@/config/swal"; import { useRouter } from "next/navigation"; import Link from "next/link"; @@ -130,10 +134,7 @@ export default function CreateArticleForm() { const [isScheduled, setIsScheduled] = useState(false); const [timeValue, setTimeValue] = useState(""); - const [startDateValue, setStartDateValue] = useState({ - startDate: null, - endDate: null, - }); + const [startDateValue, setStartDateValue] = useState(null); const { getRootProps, getInputProps } = useDropzone({ onDrop: (acceptedFiles) => { @@ -766,15 +767,15 @@ export default function CreateArticleForm() { {errors?.tags && (

{errors.tags?.message}

)} - {/*
+
- Publish dengan Jadwal +

Publish dengan Jadwal

 {isScheduled && (

Tanggal

- setStartDateValue(e)} inputClassName="z-50 w-full text-xs lg:text-sm bg-white dark bg-black border-1 border-gray-200 px-2 py-[6px] rounded-sm lg:rounded-lg h-[30px] lg:h-[40px] text-gray-600 dark:text-gray-300" - /> + /> */} + + + + + + + +
-
+ {/*

Waktu

-
+
*/}
)} -
*/} +
@@ -813,7 +835,7 @@ export default function CreateArticleForm() { color="primary" type="submit" isDisabled={ - (isScheduled && startDateValue.startDate == null) || + (isScheduled && startDateValue == null) || (isScheduled && timeValue == "") } onClick={() => diff --git a/components/form/master/master-user-level/edit-user-level-form.tsx b/components/form/master/master-user-level/edit-user-level-form.tsx new file mode 100644 index 0000000..8e80299 --- /dev/null +++ b/components/form/master/master-user-level/edit-user-level-form.tsx @@ -0,0 +1,358 @@ +"use client"; +import { + Button, + Input, + Radio, + RadioGroup, + Select, + SelectItem, + SelectSection, + Slider, + Switch, + Tab, + Table, + Tabs, + Textarea, + User, +} from "@heroui/react"; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; +import { TimesIcon } from "@/components/icons"; +import Link from "next/link"; +import { useParams, useRouter } from "next/navigation"; +import { close, error, loading } from "@/config/swal"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import dynamic from "next/dynamic"; +import { Controller, useForm } from "react-hook-form"; +import * as z from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { + createUserLevels, + editUserLevels, + getAllUserLevels, + getUserLevels, +} from "@/services/user-levels/user-levels-service"; +import ReactSelect from "react-select"; +import makeAnimated from "react-select/animated"; + +const createArticleSchema = z.object({ + name: z.string().min(2, { + message: "Required", + }), + aliasName: z.string().optional(), + group: z.string().min(2, { + message: "Required", + }), +}); + +const groups = [ + { id: 1, name: "Mabes", value: "mabes", level: 1 }, + { id: 2, name: "Polda", value: "polda", level: 2 }, + { id: 3, name: "Satker", value: "satker", level: 2 }, + { id: 4, name: "Polres", value: "polres", level: 3 }, + { id: 5, name: "Subdiv", value: "subdiv", level: 3 }, +]; + +export default function EditUserLevelForm() { + const router = useRouter(); + const MySwal = withReactContent(Swal); + const animatedComponents = makeAnimated(); + const [needApproval, setNeedApproval] = useState(false); + const [parentList, setParentList] = useState([]); + const [selectedParent, setSelectedParent] = useState(); + const params = useParams(); + const id = params?.id; + + const formOptions = { + resolver: zodResolver(createArticleSchema), + defaultValues: { name: "", group: "" }, + }; + type UserSettingSchema = z.infer; + const { + register, + control, + handleSubmit, + formState: { errors, isValid }, + setValue, + getValues, + watch, + setError, + clearErrors, + } = useForm(formOptions); + + const watchName = watch("name"); + const generateSlug = (title: string) => { + return title + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, "") + .replace(/\s+/g, "-"); + }; + + useEffect(() => { + setValue("aliasName", generateSlug(watchName)); + }, [watchName]); + + const findSelectedLevel = (group: string) => { + const selectedLevel = groups.find((a) => a.value === group); + return selectedLevel ? selectedLevel : null; + }; + + const save = async (data: any) => { + const findParent = (group: string) => { + if (group === "mabes") { + return 0; + } else if (group === "polda" || group === "satker") { + if (group === "polda") { + return 1; + } else { + return 555; + } + } else { + return selectedParent?.id; + } + }; + + const request = { + name: data.name, + aliasName: data.aliasName, + levelNumber: findSelectedLevel(data.group)?.level, + isActive: true, + group: data.group, + parentLevelId: findParent(data.group), + provinceId: 0, + isApprovalActive: needApproval, + }; + + loading(); + const res = await editUserLevels(String(id), request); + if (res.error) { + error(res.message); + return false; + } + close(); + successSubmit("/admin/user-level"); + }; + + async function onSubmit(data: any) { + MySwal.fire({ + title: "Save Data", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Save", + }).then((result) => { + if (result.isConfirmed) { + save(data); + } + }); + } + + function successSubmit(redirect: string) { + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push(redirect); + } + }); + } + + useEffect(() => { + fetchCategory(); + }, []); + + const fetchCategory = async () => { + loading(); + const request = { + limit: 10, + }; + const res = await getAllUserLevels(request); + close(); + if (res?.data?.data) { + setupParent(res?.data?.data); + } + }; + + const setupParent = (data: any) => { + const temp = []; + for (const element of data) { + temp.push({ + id: element.id, + label: element.name, + value: element.aliasName, + }); + } + setParentList(temp); + }; + + const selectedGroup = watch("group"); + + useEffect(() => { + initFetch(); + }, [parentList]); + + const initFetch = async () => { + const res = await getUserLevels(String(id)); + const data = res?.data?.data; + setValue("name", data?.name); + setValue("aliasName", data?.aliasName); + setValue("group", data?.group); + const parentId = parentList.find((a: any) => a.id === data?.parentLevelId); + setSelectedParent(parentId); + }; + + return ( +
+
+

+ Name* +

+ ( + + )} + /> + {errors?.name && ( +

{errors.name?.message}

+ )} +

Alias Name

+ ( + + )} + /> + {errors?.aliasName && ( +

+ {errors.aliasName?.message} +

+ )} +

+ Group* +

+ ( + + )} + /> + {errors?.name && ( +

{errors.name?.message}

+ )} + +

Need Approval

+ +

+ {needApproval ? "Active" : "Inactive"} +

+ + {findSelectedLevel(selectedGroup)?.level === 3 && ( + <> +

Parent

+ + "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500", + }} + classNamePrefix="select" + value={selectedParent} + onChange={setSelectedParent} + closeMenuOnSelect={false} + components={animatedComponents} + isClearable={true} + isSearchable={true} + isMulti={false} + placeholder="" + name="sub-module" + options={parentList} + /> + + )} + +
+ + + + +
+
+
+ ); +} diff --git a/components/form/master/master-user-level/master-user-level-form.tsx b/components/form/master/master-user-level/master-user-level-form.tsx index c20eb53..ed2bd9a 100644 --- a/components/form/master/master-user-level/master-user-level-form.tsx +++ b/components/form/master/master-user-level/master-user-level-form.tsx @@ -1,413 +1,339 @@ -'use client' -import { Button } from "@heroui/button"; -import { Card, Checkbox, CheckboxGroup, Divider, Image, Input, Radio, RadioGroup, Select, SelectItem, SelectSection, Slider, Switch, Tab, Table, Tabs, Textarea, User } from "@heroui/react"; -import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; +"use client"; +import { + Button, + Input, + Radio, + RadioGroup, + Select, + SelectItem, + SelectSection, + Slider, + Switch, + Tab, + Table, + Tabs, + Textarea, + User, +} from "@heroui/react"; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import { TimesIcon } from "@/components/icons"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { close, error, loading } from "@/config/swal"; -import Swal from 'sweetalert2'; -import withReactContent from 'sweetalert2-react-content'; -import dynamic from 'next/dynamic'; -import { useForm } from "react-hook-form"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import dynamic from "next/dynamic"; +import { Controller, useForm } from "react-hook-form"; import * as z from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; -import { createUserLevels } from "@/services/user-levels/user-levels-service"; +import { + createUserLevels, + getAllUserLevels, +} from "@/services/user-levels/user-levels-service"; +import ReactSelect from "react-select"; +import makeAnimated from "react-select/animated"; -const LevelList = [ - { label: "Admin", value: "admin", id: 1 }, - { label: "Super-Admin", value: "super-admin", id: 2 }, - { label: "Kurator", value: "kurator", id: 3 }, - { label: "Supervisor", value: "supervisor", id: 4 }, -]; +const createArticleSchema = z.object({ + name: z.string().min(2, { + message: "Required", + }), + aliasName: z.string().optional(), + group: z.string().min(2, { + message: "Required", + }), +}); -const moduleList = [ - { label: "Article", value: "article", id: 1 }, - { label: "Caption", value: "caption", id: 2 }, - { label: "Meme", value: "meme", id: 3 }, - { label: "Video", value: "video", id: 4 }, - { label: "Master Data", value: "master-data", id: 5 }, -]; - -const provinceList = [ - { label: "NTT", value: "1", id: 1 }, - { label: "NTB", value: "2", id: 2 }, - { label: "Aceh", value: "3", id: 3 }, - { label: "Jawa Timur", value: "4", id: 4 }, - { label: "Jawa Barat", value: "5", id: 5 }, +const groups = [ + { id: 1, name: "Mabes", value: "mabes", level: 1 }, + { id: 2, name: "Polda", value: "polda", level: 2 }, + { id: 3, name: "Satker", value: "satker", level: 2 }, + { id: 4, name: "Polres", value: "polres", level: 3 }, + { id: 5, name: "Subdiv", value: "subdiv", level: 3 }, ]; export default function CreateMasterUserLevelForm() { - const router = useRouter(); - const JoditEditor = dynamic(() => import('jodit-react'), { ssr: false }); - const MySwal = withReactContent(Swal); - const [isVisible, setIsVisible] = useState(false); - const [tabs, setTabs] = useState("personal-info") - const editor = useRef(null); - const [content, setContent] = useState(''); - const [haveChildren, setHaveChildren] = useState("no"); - const [active, setTrue] = useState("true"); - const [levelValue, setLevelValue] = useState(""); - const handleTab = (tab: any) => { - setTabs(tab); - }; + const router = useRouter(); + const MySwal = withReactContent(Swal); + const animatedComponents = makeAnimated(); + const [needApproval, setNeedApproval] = useState(false); + const [parentList, setParentList] = useState([]); + const [selectedParent, setSelectedParent] = useState(); - const handleActive = (e: React.ChangeEvent) => { - setTrue(e.target.value); - }; + const formOptions = { + resolver: zodResolver(createArticleSchema), + defaultValues: { name: "", group: "" }, + }; + type UserSettingSchema = z.infer; + const { + register, + control, + handleSubmit, + formState: { errors, isValid }, + setValue, + getValues, + watch, + setError, + clearErrors, + } = useForm(formOptions); - const handleHaveChildren = (e: React.ChangeEvent) => { - setHaveChildren(e.target.value); - }; + const watchName = watch("name"); + const generateSlug = (title: string) => { + return title + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, "") + .replace(/\s+/g, "-"); + }; - let [files, setFiles] = useState([]); + useEffect(() => { + setValue("aliasName", generateSlug(watchName)); + }, [watchName]); - const removeFile = (name: string) => { - const arrayFile: File[] = []; - for (const element of files) { - if (element.name !== name) { - arrayFile.push(element); - } + const findSelectedLevel = (group: string) => { + const selectedLevel = groups.find((a) => a.value === group); + return selectedLevel ? selectedLevel : null; + }; + + const save = async (data: any) => { + const findParent = (group: string) => { + if (group === "mabes") { + return 0; + } else if (group === "polda" || group === "satker") { + if (group === "polda") { + return 1; + } else { + return 555; } - setFiles(arrayFile); + } else { + return selectedParent?.id; + } }; - const handleFileChange = (event: any) => { - const newFiles: FileList | null = event.target.files; - if (newFiles) { - const allowedExtensions = ['.doc', '.docx', '.pdf', '.ppt', '.pptx', '.xlsx', '.csv']; - let temp: File[] = [...files]; // Salin file-file yang sudah ada - for (let i = 0; i < newFiles.length; i++) { - const file = newFiles[i]; - const fileExtension = file.name.split('.').pop()?.toLowerCase(); - if (fileExtension && allowedExtensions.includes(`.${fileExtension}`)) { - temp.push(file); - } else { - alert('Format file tidak valid. Hanya file .doc, .docx, .ppt, .pptx, .xlsx, .csv atau .pdf yang diperbolehkan.'); - } - } - setFiles(temp); - } + const request = { + name: data.name, + aliasName: data.aliasName, + levelNumber: findSelectedLevel(data.group)?.level, + isActive: true, + group: data.group, + parentLevelId: findParent(data.group), + provinceId: 0, + isApprovalActive: needApproval, }; - const toggleVisibility = () => setIsVisible(!isVisible); + loading(); + const res = await createUserLevels(request); + if (res.error) { + error(res.message); + return false; + } + close(); + successSubmit("/admin/user-level"); + }; - const validationSchema = z.object({ - name: z.string().min(1, { message: "Required" }), - aliasName: z.string().min(1, { message: "Required" }), - // levelNumber: z.string().min(1, { message: "Required" }), + async function onSubmit(data: any) { + MySwal.fire({ + title: "Save Data", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Save", + }).then((result) => { + if (result.isConfirmed) { + save(data); + } }); + } - const formOptions = { resolver: zodResolver(validationSchema) }; - type ArticleSchema = z.infer; + function successSubmit(redirect: string) { + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push(redirect); + } + }); + } - const { register, handleSubmit, formState: { errors }, formState, setValue } = useForm(formOptions); + useEffect(() => { + fetchCategory(); + }, []); - const save = async (data: any) => { - const selectedLevel = Number(Array.from(levelValue).pop()); - const request = { - name: data.name, - aliasName: data.aliasName, - levelNumber: selectedLevel, - isActive: active, - }; - - console.log(request); - loading(); - const res = await createUserLevels(request); - if (res.error) { - error(res.message); - return false; - } - close(); - successSubmit("/admin/master/master-user-level") + const fetchCategory = async () => { + loading(); + const request = { + limit: 10, + }; + const res = await getAllUserLevels(request); + close(); + if (res?.data?.data) { + setupParent(res?.data?.data); } + }; - async function onSubmit(data: any) { - MySwal.fire({ - title: "Save Data", - text: "", - icon: "warning", - showCancelButton: true, - cancelButtonColor: "#d33", - confirmButtonColor: "#3085d6", - confirmButtonText: "Save", - }).then((result) => { - if (result.isConfirmed) { - save(data); + const setupParent = (data: any) => { + const temp = []; + for (const element of data) { + temp.push({ + id: element.id, + label: element.name, + value: element.aliasName, + }); + } + setParentList(temp); + }; + + const selectedGroup = watch("group"); + + return ( +
+
+

+ Name* +

+ ( + + )} + /> + {errors?.name && ( +

{errors.name?.message}

+ )} +

Alias Name

+ ( + + )} + /> + {errors?.aliasName && ( +

+ {errors.aliasName?.message} +

+ )} +

+ Group* +

+ ( + + )} + /> + {errors?.name && ( +

{errors.name?.message}

+ )} + +

Need Approval

+ +

+ {needApproval ? "Active" : "Inactive"} +

+ + {findSelectedLevel(selectedGroup)?.level === 3 && ( + <> +

Parent

+ + "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500", + }} + classNamePrefix="select" + onChange={setSelectedParent} + closeMenuOnSelect={false} + components={animatedComponents} + isClearable={true} + isSearchable={true} + isMulti={false} + placeholder="" + name="sub-module" + options={parentList} + /> + + )} + +
+ {" "} - - -
-
-
-
- NextUI hero Image -
-
-
- - - - - - - - ) + > + Simpan + + + + + + + + ); } diff --git a/components/icons/sidebar-icon.tsx b/components/icons/sidebar-icon.tsx index 3964323..ba9abd2 100644 --- a/components/icons/sidebar-icon.tsx +++ b/components/icons/sidebar-icon.tsx @@ -385,6 +385,26 @@ export const MasterRoleIcon = ({ /> ); +export const MasterUserLevelIcon = ({ + size, + height = 24, + width = 24, + fill = "currentColor", + ...props +}: IconSvgProps) => ( + + + +); export const MasterCategoryIcon = ({ size, height = 24, diff --git a/components/layout/sidebar/sidebar-mobile.tsx b/components/layout/sidebar/sidebar-mobile.tsx index 1814d63..6dc7601 100644 --- a/components/layout/sidebar/sidebar-mobile.tsx +++ b/components/layout/sidebar/sidebar-mobile.tsx @@ -20,6 +20,7 @@ import { MagazineIcon, MasterCategoryIcon, MasterRoleIcon, + MasterUserLevelIcon, MasterUsersIcon, MinusCircleIcon, StaticPageIcon, @@ -243,6 +244,20 @@ const sideBarDummyData = [ statusName: "Active", childModule: null, }, + { + id: 23, + name: "Master User Level", + moduleId: 656, + moduleName: "Form Validation", + modulePathUrl: "/admin/user-level", + parentId: -1, + icon: , + position: 1, + statusId: 1, + childMenu: [], + statusName: "Active", + childModule: null, + }, ]; const SidebarMobile: React.FC = ({ updateSidebarData }) => { diff --git a/components/layout/sidebar/sidebar.tsx b/components/layout/sidebar/sidebar.tsx index bb9e95e..39d2005 100644 --- a/components/layout/sidebar/sidebar.tsx +++ b/components/layout/sidebar/sidebar.tsx @@ -20,6 +20,7 @@ import { MagazineIcon, MasterCategoryIcon, MasterRoleIcon, + MasterUserLevelIcon, MasterUsersIcon, MinusCircleIcon, StaticPageIcon, @@ -319,6 +320,20 @@ const sideBarDummyData = [ statusName: "Active", childModule: null, }, + { + id: 23, + name: "Master User Level", + moduleId: 656, + moduleName: "Form Validation", + modulePathUrl: "/admin/user-level", + parentId: -1, + icon: , + position: 1, + statusId: 1, + childMenu: [], + statusName: "Active", + childModule: null, + }, ]; const Sidebar: React.FC = ({ updateSidebarData }) => { diff --git a/components/table/master/master-user-level/master-user-level-table.tsx b/components/table/master/master-user-level/master-user-level-table.tsx index 508d842..cceb9fc 100644 --- a/components/table/master/master-user-level/master-user-level-table.tsx +++ b/components/table/master/master-user-level/master-user-level-table.tsx @@ -30,6 +30,7 @@ import { } from "@/components/icons"; import Link from "next/link"; import { getAllUserLevels } from "@/services/user-levels/user-levels-service"; +import { close, loading } from "@/config/swal"; type UserObject = { id: number; @@ -41,12 +42,6 @@ type UserObject = { status: string; }; -const statusColorMap = { - active: "success", - paused: "danger", - vacation: "warning", -}; - export default function MasterUserLevelTable() { const [totalPage, setTotalPage] = useState(1); const [masterUserLevelTable, setmasterUserLevel] = useState([]); @@ -56,11 +51,11 @@ export default function MasterUserLevelTable() { const columns = [ { name: "No", uid: "no" }, { name: "Name", uid: "name" }, - { name: "User Name", uid: "alias_name" }, - { name: "Level Number", uid: "level_number" }, - { name: "Parent Level", uid: "parent_level_id" }, - { name: "Province", uid: "province_id" }, - { name: "Status", uid: "is_active" }, + { name: "User Name", uid: "aliasName" }, + { name: "Level Number", uid: "levelNumber" }, + { name: "Parent", uid: "parentLevelId" }, + // { name: "Province", uid: "province_id" }, + // { name: "Status", uid: "is_active" }, { name: "Action", uid: "actions" }, ]; @@ -71,6 +66,7 @@ export default function MasterUserLevelTable() { }, []); async function fetchData() { + loading(); const request = { page: page, limit: 10, @@ -78,10 +74,11 @@ export default function MasterUserLevelTable() { const res = await getAllUserLevels(request); const data = res?.data?.data; setTotalPage(Math.ceil(res?.data?.total / 10)); - initUserData(10, data); + await initUserData(10, data); + close(); } - function initUserData(limit: number, data?: any) { + async function initUserData(limit: number, data?: any) { if (data) { console.log(data); const startIndex = limit * (page - 1); @@ -91,43 +88,34 @@ export default function MasterUserLevelTable() { value.no = startIndex + iterate; return value; }); - console.log("Data ::", newData); setmasterUserLevel(newData); } } + const findParentName = (data: string | number) => { + let name = "-"; + + for (let i = 9; i < masterUserLevelTable?.length; i++) { + const temp = masterUserLevelTable[i]; + if (temp.id === Number(data)) { + name = temp.name; + break; + } + } + + return name; + }; + const renderCell = useCallback( (masterUserLevel: TableRow, columnKey: Key) => { const cellValue = masterUserLevel[columnKey as keyof UserObject]; - const statusColorMap: Record = { - active: "success", - cancel: "danger", - pending: "warning", - }; switch (columnKey) { case "no": return
{masterUserLevel.id}
; - case "name": - return
{masterUserLevel.name}
; - - case "alias_Name": - return
{masterUserLevel.aliasName}
; - case "is_active": - return ( - -
- {cellValue} -
- - ); - + case "parentLevelId": + return

{findParentName(cellValue)}

; case "actions": return (
@@ -138,14 +126,14 @@ export default function MasterUserLevelTable() { - + {/* Detail - + */} - + Edit @@ -169,18 +157,18 @@ export default function MasterUserLevelTable() { return cellValue; } }, - [] + [masterUserLevelTable] ); return ( <>
- + {/* - + */}