From 75bce5754c5644a714d1496e87d9b268abd8e90a Mon Sep 17 00:00:00 2001 From: lukman Date: Fri, 27 Sep 2024 17:46:35 +0800 Subject: [PATCH] feat : update validasi --- .../color_palette/ui/create_palette_color.tsx | 143 +++++++++++++----- src/module/group/lib/val_group.ts | 3 + src/module/group/ui/drawer_group.tsx | 45 ++++-- src/module/group/ui/edit_drawer_group.tsx | 46 ++++-- src/module/group/ui/list_group_active.tsx | 4 +- 5 files changed, 179 insertions(+), 62 deletions(-) create mode 100644 src/module/group/lib/val_group.ts diff --git a/src/module/color_palette/ui/create_palette_color.tsx b/src/module/color_palette/ui/create_palette_color.tsx index 2aed5ae..3567f95 100644 --- a/src/module/color_palette/ui/create_palette_color.tsx +++ b/src/module/color_palette/ui/create_palette_color.tsx @@ -6,8 +6,11 @@ import React, { useState } from 'react'; import { funCreateTheme } from '../lib/api_theme'; import toast from 'react-hot-toast'; import { useRouter } from 'next/navigation'; +import LayoutModal from '@/module/_global/layout/layout_modal'; export default function CreatePaletteColor() { + const [isValModal, setValModal] = useState(false); + const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false); const tema = useHookstate(TEMA) const router = useRouter() const [touched, setTouched] = useState({ @@ -30,20 +33,87 @@ export default function CreatePaletteColor() { bgTotalKegiatan: '', }) - async function onSubmit() { + async function onSubmit(val: boolean) { try { - const res = await funCreateTheme(isWarna) - if (res.success) { - toast.success(res.message); - router.push('/color-palette') - } else { - toast.error(res.message); + if (val) { + setLoadingKonfirmasi(true) + const res = await funCreateTheme(isWarna) + if (res.success) { + setValModal(false); + toast.success(res.message); + router.push('/color-palette') + } else { + toast.error(res.message); + } } - + setValModal(false); } catch (error) { toast.error("Gagal menambahkan tema, coba lagi nanti"); + } finally { + setLoadingKonfirmasi(false) } } + + function onCheck() { + if (Object.values(touched).some((v) => v == true)) + return false + setValModal(true) + } + + function onValidation(kategori: string, val: string) { + console.log('ini',val) + if (kategori == 'name') { + setWarna({ ...isWarna, name: val }) + if (val === "") { + setTouched({ ...touched, name: true }) + } else { + setTouched({ ...touched, name: false }) + } + } else if (kategori == 'utama') { + setWarna({ ...isWarna, utama: val }) + if (val === "") { + setTouched({ ...touched, utama: true }) + } else { + setTouched({ ...touched, utama: false }) + } + } else if (kategori == 'bgUtama') { + setWarna({ ...isWarna, bgUtama: val }) + if (val === "") { + setTouched({ ...touched, bgUtama: true }) + } else { + setTouched({ ...touched, bgUtama: false }) + } + } else if (kategori == 'bgIcon') { + setWarna({ ...isWarna, bgIcon: val }) + if (val === "") { + setTouched({ ...touched, bgIcon: true }) + } else { + setTouched({ ...touched, bgIcon: false }) + } + } else if (kategori == 'bgFiturHome') { + setWarna({ ...isWarna, bgFiturHome: val }) + if (val === "") { + setTouched({ ...touched, bgFiturHome: true }) + } else { + setTouched({ ...touched, bgFiturHome: false }) + } + } else if (kategori == 'bgFiturDivision') { + setWarna({ ...isWarna, bgFiturDivision: val }) + if (val === "") { + setTouched({ ...touched, bgFiturDivision: true }) + } else { + setTouched({ ...touched, bgFiturDivision: false }) + } + } else if (kategori == 'bgTotalKegiatan') { + setWarna({ ...isWarna, bgTotalKegiatan: val }) + if (val === "") { + setTouched({ ...touched, bgTotalKegiatan: true }) + } else { + setTouched({ ...touched, bgTotalKegiatan: false }) + } + } + } + return ( @@ -57,8 +127,7 @@ export default function CreatePaletteColor() { radius="md" onChange={ (e) => { - setWarna({ ...isWarna, name: e.target.value }) - setTouched({ ...touched, name: true }) + onValidation('name', e.target.value) } } error={ @@ -73,10 +142,9 @@ export default function CreatePaletteColor() { required size="md" radius="md" - onChangeEnd={ - (color) => { - setWarna({ ...isWarna, utama: color }) - setTouched({ ...touched, utama: true }) + onChange={ + (e) => { + onValidation('utama', e) } } error={ @@ -91,10 +159,9 @@ export default function CreatePaletteColor() { required size="md" radius="md" - onChangeEnd={ - (color) => { - setWarna({ ...isWarna, bgUtama: color }) - setTouched({ ...touched, bgUtama: true }) + onChange={ + (e) => { + onValidation('bgUtama', e) } } error={ @@ -109,10 +176,9 @@ export default function CreatePaletteColor() { required size="md" radius="md" - onChangeEnd={ - (color) => { - setWarna({ ...isWarna, bgIcon: color }) - setTouched({ ...touched, bgIcon: true }) + onChange={ + (e) => { + onValidation('bgIcon', e) } } error={ @@ -127,10 +193,9 @@ export default function CreatePaletteColor() { required size="md" radius="md" - onChangeEnd={ - (color) => { - setWarna({ ...isWarna, bgFiturHome: color }) - setTouched({ ...touched, bgFiturHome: true }) + onChange={ + (e) => { + onValidation('bgFiturHome', e) } } error={ @@ -145,10 +210,9 @@ export default function CreatePaletteColor() { required size="md" radius="md" - onChangeEnd={ - (color) => { - setWarna({ ...isWarna, bgFiturDivision: color }) - setTouched({ ...touched, bgFiturDivision: true }) + onChange={ + (e) => { + onValidation('bgFiturDivision', e) } } error={ @@ -163,10 +227,9 @@ export default function CreatePaletteColor() { required size="md" radius="md" - onChangeEnd={ - (color) => { - setWarna({ ...isWarna, bgTotalKegiatan: color }) - setTouched({ ...touched, bgTotalKegiatan: true }) + onChange={ + (e) => { + onValidation('bgTotalKegiatan', e) } } error={ @@ -257,11 +320,21 @@ export default function CreatePaletteColor() { size="lg" radius={30} fullWidth - onClick={() => { onSubmit() }} + onClick={() => { onCheck() }} > Simpan + setValModal(false)} + description="Apakah Anda yakin ingin + melakukan perubahan data?" + onYes={(val) => { + onSubmit(val); + }} + /> ); } diff --git a/src/module/group/lib/val_group.ts b/src/module/group/lib/val_group.ts new file mode 100644 index 0000000..1c13640 --- /dev/null +++ b/src/module/group/lib/val_group.ts @@ -0,0 +1,3 @@ +import { hookstate } from "@hookstate/core"; + +export const globalRefreshGroup = hookstate(false); \ No newline at end of file diff --git a/src/module/group/ui/drawer_group.tsx b/src/module/group/ui/drawer_group.tsx index eaf7e85..f09415b 100644 --- a/src/module/group/ui/drawer_group.tsx +++ b/src/module/group/ui/drawer_group.tsx @@ -1,25 +1,25 @@ -import { LayoutDrawer, TEMA, WARNA } from "@/module/_global"; +import { LayoutDrawer, TEMA } from "@/module/_global"; +import { useHookstate } from "@hookstate/core"; import { Box, Button, - Center, Flex, - Group, SimpleGrid, Stack, Text, - TextInput, + TextInput } from "@mantine/core"; -import React, { useState } from "react"; +import { useState } from "react"; +import toast from "react-hot-toast"; import { IoAddCircle } from "react-icons/io5"; import { funCreateGroup } from "../lib/api_group"; -import toast from "react-hot-toast"; -import { useHookstate } from "@hookstate/core"; +import { globalRefreshGroup } from "../lib/val_group"; export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) => void; }) { const [openDrawerGroup, setOpenDrawerGroup] = useState(false); const [namaGroup, setNamaGroup] = useState(""); const tema = useHookstate(TEMA) + const refresh = useHookstate(globalRefreshGroup) const [touched, setTouched] = useState({ name: false, }); @@ -31,6 +31,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) if (response.success) { toast.success(response.message); + refresh.set(!refresh.get()) setOpenDrawerGroup(false) onSuccess(true) } else { @@ -43,6 +44,23 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) } } + function onCheck() { + if (Object.values(touched).some((v) => v == true)) + return false + createData() + } + + function onValidation(kategori: string, val: string) { + if (kategori == 'name') { + setNamaGroup(val) + if (val == "" || val.length < 3) { + setTouched({ ...touched, name: true }) + } else { + setTouched({ ...touched, name: false }) + } + } + } + return ( @@ -80,11 +98,14 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) required placeholder="Grup" onChange={(e) => { - setNamaGroup(e.target.value) - setTouched({ ...touched, name: false }) + onValidation('name', e.target.value) }} - error={touched.name ? "Error! harus memasukkan grup" : ""} - onBlur={() => setTouched({ ...touched, name: true })} + error={ + touched.name && + (namaGroup == "" ? "Error! harus memasukkan grup" : + namaGroup.length < 3 ? "Masukkan Minimal 3 karakter" : "" + ) + } /> diff --git a/src/module/group/ui/edit_drawer_group.tsx b/src/module/group/ui/edit_drawer_group.tsx index 980b1ee..238928e 100644 --- a/src/module/group/ui/edit_drawer_group.tsx +++ b/src/module/group/ui/edit_drawer_group.tsx @@ -1,30 +1,29 @@ "use client"; -import { LayoutDrawer, TEMA, WARNA } from "@/module/_global"; +import { LayoutDrawer, TEMA } from "@/module/_global"; import LayoutModal from "@/module/_global/layout/layout_modal"; +import { useHookstate } from "@hookstate/core"; import { Box, Button, - Center, Flex, - Group, SimpleGrid, Stack, Text, - TextInput, + TextInput } from "@mantine/core"; import { useShallowEffect } from "@mantine/hooks"; -import React, { useEffect, useState } from "react"; +import { useState } from "react"; import toast from "react-hot-toast"; import { FaPencil, FaToggleOff } from "react-icons/fa6"; -import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5"; import { funEditGroup, funEditStatusGroup, funGetGroupById } from "../lib/api_group"; -import { useHookstate } from "@hookstate/core"; +import { globalRefreshGroup } from "../lib/val_group"; export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdated: (val: boolean) => void; id: string; isActive: boolean; }) { const [openDrawerGroup, setOpenDrawerGroup] = useState(false); const [isModal, setModal] = useState(false); const [name, setName] = useState(""); const [loading, setLoading] = useState(false); + const refresh = useHookstate(globalRefreshGroup) const tema = useHookstate(TEMA) const [touched, setTouched] = useState({ name: false, @@ -57,6 +56,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate const res = await funEditGroup(id, { name }); if (res.success) { toast.success(res.message); + refresh.set(!refresh.get()) setOpenDrawerGroup(false); onUpdated(true); } else { @@ -70,6 +70,23 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate } } + function onCheck() { + if (Object.values(touched).some((v) => v == true)) + return false + isUpdate() + } + + function onValidation(kategori: string, val: string) { + if (kategori == 'name') { + setName(val) + if (val == "" || val.length < 3) { + setTouched({ ...touched, name: true }) + } else { + setTouched({ ...touched, name: false }) + } + } + } + async function nonActive(val: boolean) { try { if (val) { @@ -141,17 +158,18 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate size="lg" value={name} onChange={(e) => { - setName(e.target.value) - setTouched({ ...touched, name: false }) + onValidation('name', e.target.value) }} - onBlur={() => setTouched({ ...touched, name: true })} - error={touched.name ? "Error! harus memasukkan grup" : ""} + error={ + touched.name && + (name == "" ? "Error! harus memasukkan grup" : + name.length < 3 ? "Masukkan Minimal 3 karakter" : "" + ) + } radius={10} placeholder="Grup" label="Grup" required - - />