Merge pull request #271 from bipproduction/lukman/27-september-2024

feat : update validasi

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 (val) {
-      if (res.success) {
+        setLoadingKonfirmasi(true)
-        toast.success(res.message);
+        const res = await funCreateTheme(isWarna)
-        router.push('/color-palette')
+        if (res.success) {
-      } else {
+          setValModal(false);
-        toast.error(res.message);
+          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 (
     <Box>
       <LayoutNavbarNew back='/color-palette' title='Tambah Tema' menu />
@@ -57,8 +127,7 @@ export default function CreatePaletteColor() {
             radius="md"
             onChange={
               (e) => {
-                setWarna({ ...isWarna, name: e.target.value })
+                onValidation('name', e.target.value) 
-                setTouched({ ...touched, name: true })
               }
             }
             error={
@@ -73,10 +142,9 @@ export default function CreatePaletteColor() {
             required
             size="md"
             radius="md"
-            onChangeEnd={
+            onChange={
-              (color) => {
+              (e) => {
-                setWarna({ ...isWarna, utama: color })
+                onValidation('utama', e) 
-                setTouched({ ...touched, utama: true })
               }
             }
             error={
@@ -91,10 +159,9 @@ export default function CreatePaletteColor() {
             required
             size="md"
             radius="md"
-            onChangeEnd={
+            onChange={
-              (color) => {
+              (e) => {
-                setWarna({ ...isWarna, bgUtama: color })
+                onValidation('bgUtama', e) 
-                setTouched({ ...touched, bgUtama: true })
               }
             }
             error={
@@ -109,10 +176,9 @@ export default function CreatePaletteColor() {
             required
             size="md"
             radius="md"
-            onChangeEnd={
+            onChange={
-              (color) => {
+              (e) => {
-                setWarna({ ...isWarna, bgIcon: color })
+                onValidation('bgIcon', e) 
-                setTouched({ ...touched, bgIcon: true })
               }
             }
             error={
@@ -127,10 +193,9 @@ export default function CreatePaletteColor() {
             required
             size="md"
             radius="md"
-            onChangeEnd={
+            onChange={
-              (color) => {
+              (e) => {
-                setWarna({ ...isWarna, bgFiturHome: color })
+                onValidation('bgFiturHome', e) 
-                setTouched({ ...touched, bgFiturHome: true })
               }
             }
             error={
@@ -145,10 +210,9 @@ export default function CreatePaletteColor() {
             required
             size="md"
             radius="md"
-            onChangeEnd={
+            onChange={
-              (color) => {
+              (e) => {
-                setWarna({ ...isWarna, bgFiturDivision: color })
+                onValidation('bgFiturDivision', e) 
-                setTouched({ ...touched, bgFiturDivision: true })
               }
             }
             error={
@@ -163,10 +227,9 @@ export default function CreatePaletteColor() {
             required
             size="md"
             radius="md"
-            onChangeEnd={
+            onChange={
-              (color) => {
+              (e) => {
-                setWarna({ ...isWarna, bgTotalKegiatan: color })
+                onValidation('bgTotalKegiatan', e) 
-                setTouched({ ...touched, bgTotalKegiatan: true })
               }
             }
             error={
@@ -257,11 +320,21 @@ export default function CreatePaletteColor() {
           size="lg"
           radius={30}
           fullWidth
-          onClick={() => { onSubmit() }}
+          onClick={() => { onCheck() }}
         >
           Simpan
         </Button>
       </Box>
+      <LayoutModal
+        loading={loadingKonfirmasi}
+        opened={isValModal}
+        onClose={() => setValModal(false)}
+        description="Apakah Anda yakin ingin
+        melakukan perubahan data?"
+        onYes={(val) => {
+          onSubmit(val);
+        }}
+      />
     </Box>
   );
 }

src/module/group/lib/val_group.ts

@@ -0,0 +1,3 @@
+import { hookstate } from "@hookstate/core";
+
+export const globalRefreshGroup = hookstate<boolean>(false);

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 { globalRefreshGroup } from "../lib/val_group";
-import { useHookstate } from "@hookstate/core";
 
 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 (
     <Box>
       <Stack pt={10}>
@@ -80,11 +98,14 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
             required
             placeholder="Grup"
             onChange={(e) => {
-              setNamaGroup(e.target.value)
+              onValidation('name', e.target.value)
-              setTouched({ ...touched, name: false })
             }}
-            error={touched.name ? "Error! harus memasukkan grup" : ""}
+            error={
-            onBlur={() => setTouched({ ...touched, name: true })}
+              touched.name &&
+              (namaGroup == "" ? "Error! harus memasukkan grup" :
+                namaGroup.length < 3 ? "Masukkan Minimal 3 karakter" : ""
+              )
+            }
           />
           <Box mt={"xl"}>
             <Button
@@ -93,7 +114,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
               size="lg"
               radius={30}
               fullWidth
-              onClick={createData}
+              onClick={() => { onCheck() }}
             >
               Simpan
             </Button>

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)
+              onValidation('name', e.target.value)
-              setTouched({ ...touched, name: false })
             }}
-            onBlur={() => setTouched({ ...touched, name: true })}
+            error={
-            error={touched.name ? "Error! harus memasukkan grup" : ""}
+              touched.name &&
+              (name == "" ? "Error! harus memasukkan grup" :
+                name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
+              )
+            }
             radius={10}
             placeholder="Grup"
             label="Grup"
             required
-
-
           />
           <Box mt={"xl"}>
             <Button
@@ -160,7 +178,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
               size="lg"
               radius={30}
               fullWidth
-              onClick={isUpdate}
+              onClick={() => { onCheck() }}
               loading={loading}
             >
               Simpan

src/module/group/ui/list_group_active.tsx

@@ -20,6 +20,7 @@ import { IDataGroup } from "../lib/type_group";
 import { useSearchParams } from "next/navigation";
 import _ from "lodash";
 import { useHookstate } from "@hookstate/core";
+import { globalRefreshGroup } from "../lib/val_group";
 
 
 export default function ListGroupActive() {
@@ -31,6 +32,7 @@ export default function ListGroupActive() {
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true);
   const searchParams = useSearchParams()
+  const refresh = useHookstate(globalRefreshGroup)
   const status = searchParams.get('active')
   const tema = useHookstate(TEMA)
 
@@ -59,7 +61,7 @@ export default function ListGroupActive() {
 
   useShallowEffect(() => {
     fetchData();
-  }, [status, searchQuery]);
+  }, [status, searchQuery, refresh.get()]);
 
   return (
     <Box pt={20}>