From 73ff71d34e0fe064d8d8ce825cfbc8688e576826 Mon Sep 17 00:00:00 2001 From: amel Date: Fri, 4 Oct 2024 14:24:22 +0800 Subject: [PATCH] upd: tema apk Deskripsi: - validasi cek pada tambah tema - loading button pada edit tema No Issues --- .../color_palette/ui/create_palette_color.tsx | 54 +++++++++++++++---- .../color_palette/ui/edit_palette_color.tsx | 25 +++++---- 2 files changed, 60 insertions(+), 19 deletions(-) diff --git a/src/module/color_palette/ui/create_palette_color.tsx b/src/module/color_palette/ui/create_palette_color.tsx index 0842d0d..2c10d8b 100644 --- a/src/module/color_palette/ui/create_palette_color.tsx +++ b/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 ) } /> diff --git a/src/module/color_palette/ui/edit_palette_color.tsx b/src/module/color_palette/ui/edit_palette_color.tsx index 087f620..5f6da1b 100644 --- a/src/module/color_palette/ui/edit_palette_color.tsx +++ b/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() { - setModal(false)} description="Apakah Anda yakin ingin mengubah data?" + setModal(false)} description="Apakah Anda yakin ingin mengubah data?" onYes={(val) => { - if (val) + if (val) { onSubmit() - setModal(false) + } else { + setModal(false) + } } } />