upd: tema apk

Deskripsi:
- validasi cek pada tambah tema
- loading button pada edit tema

No Issues

src/module/color_palette/ui/create_palette_color.tsx

@@ -1,13 +1,12 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-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';
-import _ from 'lodash';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { funCreateTheme } from '../lib/api_theme';
 
 export default function CreatePaletteColor() {
   const [isValModal, setValModal] = useState(false);
@@ -56,11 +55,46 @@ export default function CreatePaletteColor() {
   }
 
   function onCheck() {
-    if (Object.values(touched).some((v) => v == true))
+    const cek = checkAll()
+    if (!cek)
       return false
     setValModal(true)
   }
 
+  function checkAll() {
+    let nilai = true
+    if (isWarna.name === "") {
+      setTouched(touched => ({ ...touched, name: true }))
+      nilai = false
+    }
+    if (isWarna.utama === "" || isWarna.utama.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, utama: true }))
+      nilai = false
+    }
+    if (isWarna.bgUtama === "" || isWarna.bgUtama.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgUtama: true }))
+      nilai = false
+    }
+    if (isWarna.bgIcon === "" || isWarna.bgIcon.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgIcon: true }))
+      nilai = false
+    }
+    if (isWarna.bgFiturHome === "" || isWarna.bgFiturHome.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgFiturHome: true }))
+      nilai = false
+    }
+    if (isWarna.bgFiturDivision === "" || isWarna.bgFiturDivision.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgFiturDivision: true }))
+      nilai = false
+    }
+    if (isWarna.bgTotalKegiatan === "" || isWarna.bgTotalKegiatan.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgTotalKegiatan: true }))
+      nilai = false
+    }
+
+    return nilai
+  }
+
   function onValidation(kategori: string, val: string) {
     if (kategori == 'name') {
       setWarna({ ...isWarna, name: val })
@@ -239,8 +273,8 @@ export default function CreatePaletteColor() {
             }
             error={
               touched.bgTotalKegiatan && (
-                isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : 
-                  isWarna.bgTotalKegiatan.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null  
+                isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" :
+                  isWarna.bgTotalKegiatan.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null
               )
             }
           />

src/module/color_palette/ui/edit_palette_color.tsx

@@ -1,14 +1,14 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
+import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from '@hookstate/core';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import React, { useState } from 'react';
-import { IEditTheme } from '../lib/type_theme';
+import { Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Skeleton, Stack, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditTheme, funGetThemeById } from '../lib/api_theme';
-import { useParams, useRouter } from 'next/navigation';
-import { useShallowEffect } from '@mantine/hooks';
-import LayoutModal from "@/module/_global/layout/layout_modal";
+import { IEditTheme } from '../lib/type_theme';
 
 export default function EditPaletteColor() {
   const tema = useHookstate(TEMA)
@@ -16,6 +16,7 @@ export default function EditPaletteColor() {
   const [isModal, setModal] = useState(false)
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(true)
+  const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
   const [touched, setTouched] = useState({
     name: false,
     utama: false,
@@ -62,6 +63,7 @@ export default function EditPaletteColor() {
 
   async function onSubmit() {
     try {
+      setLoadingKonfirmasi(true)
       const res = await funEditTheme(param.id, isWarna)
       if (res.success) {
         toast.success(res.message);
@@ -72,6 +74,9 @@ export default function EditPaletteColor() {
     } catch (error) {
       console.error(error)
       toast.error("Gagal mengedit tema, coba lagi nanti");
+    } finally {
+      setLoadingKonfirmasi(false)
+      setModal(false)
     }
   }
 
@@ -381,11 +386,13 @@ export default function EditPaletteColor() {
       </Box>
 
 
-      <LayoutModal opened={isModal} onClose={() => setModal(false)} description="Apakah Anda yakin ingin mengubah data?"
+      <LayoutModal loading={loadingKonfirmasi} opened={isModal} onClose={() => setModal(false)} description="Apakah Anda yakin ingin mengubah data?"
         onYes={(val) => {
-          if (val)
+          if (val) {
             onSubmit()
-          setModal(false)
+          } else {
+            setModal(false)
+          }
         }
         } />
     </Box>