wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
feat : update validasi
This commit is contained in:
Amalia
2024-09-27 17:51:36 +08:00
committed by GitHub
parent a0979601a5 75bce5754c
commit 01c4c6df7f
5 changed files with 179 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/module/color_palette/ui/create_palette_color.tsx
View File

@@ -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 (
<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 })
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
</Button>
</Box>
<LayoutModal
loading={loadingKonfirmasi}
opened={isValModal}
onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin
melakukan perubahan data?"
onYes={(val) => {
onSubmit(val);
}}
/>
</Box>
);
}

3
src/module/group/lib/val_group.ts Normal file
View File

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

45
src/module/group/ui/drawer_group.tsx
View File

@@ -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 (
<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)
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" : ""
)
}
/>
<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>

46
src/module/group/ui/edit_drawer_group.tsx
View File

@@ -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
/>
<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

4
src/module/group/ui/list_group_active.tsx
View File

@@ -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}>