diff --git a/src/app/(application)/color-palette/update/[id]/page.tsx b/src/app/(application)/color-palette/edit/[id]/page.tsx similarity index 100% rename from src/app/(application)/color-palette/update/[id]/page.tsx rename to src/app/(application)/color-palette/edit/[id]/page.tsx diff --git a/src/app/(application)/layout.tsx b/src/app/(application)/layout.tsx index 95b566a..95d0deb 100644 --- a/src/app/(application)/layout.tsx +++ b/src/app/(application)/layout.tsx @@ -10,7 +10,7 @@ export default async function Layout({ children }: { children: React.ReactNode } const user = await funGetUserByCookies() return ( <> - + {children} diff --git a/src/app/api/theme/[id]/route.ts b/src/app/api/theme/[id]/route.ts new file mode 100644 index 0000000..2621f13 --- /dev/null +++ b/src/app/api/theme/[id]/route.ts @@ -0,0 +1,180 @@ +import { prisma } from "@/module/_global"; +import { funGetUserByCookies } from "@/module/auth"; +import { createLogUser } from "@/module/user"; +import _ from "lodash"; +import { NextResponse } from "next/server"; + +// GET ONE THEME +export async function GET(request: Request, context: { params: { id: string } }) { + try { + const { id } = context.params; + const user = await funGetUserByCookies() + if (user.id == undefined) { + return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 }); + } + + const data = await prisma.colorTheme.findUnique({ + where: { + id: String(id), + isActive: true + } + }); + + return NextResponse.json({ success: true, message: "Berhasil mendapatkan anggota", data }, { status: 200 }); + + } catch (error) { + console.error(error); + return NextResponse.json({ success: false, message: "Gagal mendapatkan member, coba lagi nanti", reason: (error as Error).message, }, { status: 500 }); + } +} + + +// HAPUS THEME +export async function DELETE(request: Request, context: { params: { id: string } }) { + try { + const user = await funGetUserByCookies() + if (user.id == undefined) { + return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 }); + } + const { id } = context.params; + const data = await prisma.colorTheme.count({ + where: { + id: id, + }, + }); + + if (data == 0) { + return NextResponse.json( + { + success: false, + message: "Hapus tema gagal, data tidak ditemukan", + }, + { status: 404 } + ); + } + + const update = await prisma.colorTheme.update({ + where: { + id: id, + }, + data: { + isActive: false, + }, + }); + + // create log user + const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus tema', table: 'colorTheme', data: id }) + + return NextResponse.json({ success: true, message: "Tema berhasil dihapus", data, }, { status: 200 }); + + } catch (error) { + console.error(error); + return NextResponse.json({ success: false, message: "Gagal menghapus tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 }); + } +} + + +// EDIT THEME +export async function PUT(request: Request, context: { params: { id: string } }) { + try { + const user = await funGetUserByCookies() + if (user.id == undefined) { + return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 }); + } + + const { id } = context.params; + const { name, utama, bgUtama, bgIcon, bgFiturHome, bgFiturDivision, bgTotalKegiatan } = (await request.json()); + const data = await prisma.colorTheme.count({ + where: { + id: id, + }, + }); + + if (data == 0) { + return NextResponse.json( + { + success: false, + message: "Edit tema gagal, data tidak ditemukan", + }, + { status: 404 } + ); + } + + const update = await prisma.colorTheme.update({ + where: { + id: id, + }, + data: { + name: name, + utama: utama, + bgUtama: bgUtama, + bgIcon: bgIcon, + bgFiturHome: bgFiturHome, + bgFiturDivision: bgFiturDivision, + bgTotalKegiatan: bgTotalKegiatan + }, + }); + + // create log user + const log = await createLogUser({ act: 'UPDATE', desc: 'User mengedit data tema', table: 'colorTheme', data: id }) + + return NextResponse.json({ success: true, message: "Tema berhasil diedit", data, }, { status: 200 }); + + } catch (error) { + console.error(error); + return NextResponse.json({ success: false, message: "Gagal mengedit tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 }); + } +} + + + +// CHANGE THEME +export async function POST(request: Request, context: { params: { id: string } }) { + try { + const user = await funGetUserByCookies() + if (user.id == undefined) { + return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 }); + } + const { id } = context.params; + const data = await prisma.colorTheme.count({ + where: { + id: id, + isActive: true + }, + }); + + if (data == 0) { + return NextResponse.json( + { + success: false, + message: "Ganti tema gagal, data tidak ditemukan", + }, + { status: 404 } + ); + } + + const update = await prisma.village.update({ + where: { + id: user.idVillage, + }, + data: { + idTheme: id, + }, + }); + + const dataTheme = await prisma.colorTheme.findUnique({ + where: { + id: id + } + }) + + // create log user + const log = await createLogUser({ act: 'DELETE', desc: 'User mengganti tema', table: 'colorTheme', data: id }) + + return NextResponse.json({ success: true, message: "Tema berhasil diganti", data: dataTheme }, { status: 200 }); + + } catch (error) { + console.error(error); + return NextResponse.json({ success: false, message: "Gagal mengganti tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 }); + } +} \ No newline at end of file diff --git a/src/app/api/theme/route.ts b/src/app/api/theme/route.ts new file mode 100644 index 0000000..e32bea8 --- /dev/null +++ b/src/app/api/theme/route.ts @@ -0,0 +1,88 @@ +import { prisma } from "@/module/_global"; +import { funGetUserByCookies } from "@/module/auth"; +import { createLogUser } from "@/module/user"; +import _ from "lodash"; +import { NextResponse } from "next/server"; + +// GET ALL THEME +export async function GET(request: Request) { + try { + const user = await funGetUserByCookies() + if (user.id == undefined) { + return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 }); + } + + + const data = await prisma.colorTheme.findMany({ + where: { + OR: [ + { + isActive: true, + idVillage: null + }, + { + isActive: true, + idVillage: user.idVillage + }, + ] + }, + orderBy: { + createdAt: 'asc' + } + }) + + const desa = await prisma.village.findUnique({ + where: { + id: user.idVillage + } + }) + + const result = data.map((v: any) => ({ + ..._.omit(v, ["isUse"]), + isUse: (v.id == desa?.idTheme) + })) + + return NextResponse.json({ success: true, message: "Berhasil mendapatkan tema", data: result }, { status: 200 }); + } catch (error) { + console.error(error); + return NextResponse.json({ success: false, message: "Gagal mendapatkan tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 }); + } +} + + +// CREATE THEME +export async function POST(request: Request) { + try { + const user = await funGetUserByCookies() + if (user.id == undefined) { + return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 }); + } + + const { name, utama, bgUtama, bgIcon, bgFiturHome, bgFiturDivision, bgTotalKegiatan } = (await request.json()); + const idVillage = user.idVillage + const data = await prisma.colorTheme.create({ + data: { + name, + idVillage, + utama, + bgUtama, + bgIcon, + bgFiturHome, + bgFiturDivision, + bgTotalKegiatan + }, + select: { + id: true + } + }); + + // create log user + const log = await createLogUser({ act: 'CREATE', desc: 'User membuat tema baru', table: 'colorTheme', data: data.id }) + + + return NextResponse.json({ success: true, message: "Berhasil menambahkan tema" }, { status: 200 }); + } catch (error) { + console.error(error); + return NextResponse.json({ success: false, message: "Gagal menambahkan tema, coba lagi nanti", reason: (error as Error).message, }, { status: 500 }); + } +}; \ No newline at end of file diff --git a/src/module/_global/components/wrap_layout.tsx b/src/module/_global/components/wrap_layout.tsx index ab53be2..d50f1e3 100644 --- a/src/module/_global/components/wrap_layout.tsx +++ b/src/module/_global/components/wrap_layout.tsx @@ -1,16 +1,18 @@ 'use client' import { useHookstate } from "@hookstate/core"; -import { globalRole } from "../bin/val_global"; +import { globalRole, TEMA } from "../bin/val_global"; import { useShallowEffect } from "@mantine/hooks"; import { useEffect } from "react"; -export default function WrapLayout({ children, role }: { children: React.ReactNode, role: any }) { +export default function WrapLayout({ children, role, theme }: { children: React.ReactNode, role: any, theme:any }) { const roleLogin = useHookstate(globalRole) + const tema = useHookstate(TEMA) useEffect(() => { roleLogin.set(role) + tema.set(theme) // eslint-disable-next-line react-hooks/exhaustive-deps - }, [role]) + }, [role, theme]) return ( <> {children} diff --git a/src/module/auth/api/funGetUserByCookies.ts b/src/module/auth/api/funGetUserByCookies.ts index fdcf6b5..9ad7c62 100644 --- a/src/module/auth/api/funGetUserByCookies.ts +++ b/src/module/auth/api/funGetUserByCookies.ts @@ -16,5 +16,25 @@ export default async function funGetUserByCookies() { }, }); - return { id: user?.id, idUserRole: user?.idUserRole, name: user?.name, idVillage: user?.idVillage, idGroup: user?.idGroup, idPosition: user?.idPosition }; + const village = await prisma.village.findUnique({ + where: { + id: user?.idVillage + } + }) + + const warna = await prisma.colorTheme.findUnique({ + where: { + id: String(village?.idTheme) + } + }) + + return { + id: user?.id, + idUserRole: user?.idUserRole, + name: user?.name, + idVillage: user?.idVillage, + idGroup: user?.idGroup, + idPosition: user?.idPosition, + theme: warna + }; } \ No newline at end of file diff --git a/src/module/color_palette/lib/.gitkeep b/src/module/color_palette/lib/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/module/color_palette/lib/api_theme.ts b/src/module/color_palette/lib/api_theme.ts new file mode 100644 index 0000000..bcd9807 --- /dev/null +++ b/src/module/color_palette/lib/api_theme.ts @@ -0,0 +1,54 @@ +import { IFormTheme } from "./type_theme"; + +export const funGetAllTheme = async (path?: string) => { + const response = await fetch(`/api/theme${(path) ? path : ''}`, { next: { tags: ['theme'] } }); + return await response.json().catch(() => null); +}; + +export const funGetThemeById = async (path: string) => { + const response = await fetch(`/api/theme/${path}`); + return await response.json().catch(() => null); +}; + +export const funCreateTheme = async (data: IFormTheme) => { + const response = await fetch("/api/theme", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }); + return await response.json().catch(() => null); +}; + + +export const funDeleteTheme = async (path: string) => { + const response = await fetch(`/api/theme/${path}`, { + method: "DELETE", + headers: { + "Content-Type": "application/json", + } + }); + return await response.json().catch(() => null); +}; + +export const funEditTheme = async (path: string, data: IFormTheme) => { + const response = await fetch(`/api/theme/${path}`, { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }); + return await response.json().catch(() => null); +}; + +export const funChangeTheme = async (path: string) => { + const response = await fetch(`/api/theme/${path}`, { + method: "POST", + headers: { + "Content-Type": "application/json", + } + }); + return await response.json().catch(() => null); +}; \ No newline at end of file diff --git a/src/module/color_palette/lib/type_theme.ts b/src/module/color_palette/lib/type_theme.ts new file mode 100644 index 0000000..02d4231 --- /dev/null +++ b/src/module/color_palette/lib/type_theme.ts @@ -0,0 +1,33 @@ +export interface IFormTheme { + name: string + utama: string + bgUtama: string + bgIcon: string + bgFiturHome: string + bgFiturDivision: string + bgTotalKegiatan: string +} + +export interface IDataTheme{ + id: string + idVillage:string + name: string + utama: string + bgUtama: string + bgIcon: string + bgFiturHome: string + bgFiturDivision: string + bgTotalKegiatan: string + isUse : boolean +} + +export interface IEditTheme{ + id: string + name: string + utama: string + bgUtama: string + bgIcon: string + bgFiturHome: string + bgFiturDivision: string + bgTotalKegiatan: string +} \ No newline at end of file diff --git a/src/module/color_palette/lib/val_theme.ts b/src/module/color_palette/lib/val_theme.ts new file mode 100644 index 0000000..f95a112 --- /dev/null +++ b/src/module/color_palette/lib/val_theme.ts @@ -0,0 +1,3 @@ +import { hookstate } from "@hookstate/core"; + +export const globalRefreshTheme = hookstate(false); \ No newline at end of file diff --git a/src/module/color_palette/ui/create_palette_color.tsx b/src/module/color_palette/ui/create_palette_color.tsx index f380808..2aed5ae 100644 --- a/src/module/color_palette/ui/create_palette_color.tsx +++ b/src/module/color_palette/ui/create_palette_color.tsx @@ -3,18 +3,47 @@ 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'; export default function CreatePaletteColor() { const tema = useHookstate(TEMA) + const router = useRouter() + const [touched, setTouched] = useState({ + name: false, + utama: false, + bgUtama: false, + bgIcon: false, + bgFiturHome: false, + bgFiturDivision: false, + bgTotalKegiatan: false, + }); + const [isWarna, setWarna] = useState({ - judulTema: '', - warnaUtama: '', - backgroundUtama: '', - backgroundIcon: '', - backgroundFiturHome: '', - backgroundFiturDivisi: '', - backgroundTotalKegiatan: '', + name: '', + utama: '', + bgUtama: '', + bgIcon: '', + bgFiturHome: '', + bgFiturDivision: '', + bgTotalKegiatan: '', }) + + async function onSubmit() { + try { + const res = await funCreateTheme(isWarna) + if (res.success) { + toast.success(res.message); + router.push('/color-palette') + } else { + toast.error(res.message); + } + + } catch (error) { + toast.error("Gagal menambahkan tema, coba lagi nanti"); + } + } return ( @@ -27,7 +56,15 @@ export default function CreatePaletteColor() { size="md" radius="md" onChange={ - (e) => setWarna({ ...isWarna, judulTema: e.target.value }) + (e) => { + setWarna({ ...isWarna, name: e.target.value }) + setTouched({ ...touched, name: true }) + } + } + error={ + touched.name && ( + isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, warnaUtama: color }) + (color) => { + setWarna({ ...isWarna, utama: color }) + setTouched({ ...touched, utama: true }) + } + } + error={ + touched.utama && ( + isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundUtama: color }) + (color) => { + setWarna({ ...isWarna, bgUtama: color }) + setTouched({ ...touched, bgUtama: true }) + } + } + error={ + touched.bgUtama && ( + isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundIcon: color }) + (color) => { + setWarna({ ...isWarna, bgIcon: color }) + setTouched({ ...touched, bgIcon: true }) + } + } + error={ + touched.bgIcon && ( + isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundFiturHome: color }) + (color) => { + setWarna({ ...isWarna, bgFiturHome: color }) + setTouched({ ...touched, bgFiturHome: true }) + } + } + error={ + touched.bgFiturHome && ( + isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundFiturDivisi: color }) + (color) => { + setWarna({ ...isWarna, bgFiturDivision: color }) + setTouched({ ...touched, bgFiturDivision: true }) + } + } + error={ + touched.bgFiturDivision && ( + isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundTotalKegiatan: color }) + (color) => { + setWarna({ ...isWarna, bgTotalKegiatan: color }) + setTouched({ ...touched, bgTotalKegiatan: true }) + } + } + error={ + touched.bgTotalKegiatan && ( + isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null + ) } /> @@ -99,62 +184,62 @@ export default function CreatePaletteColor() { >
-
- {isWarna.warnaUtama.length == 0 ? "" : - {isWarna.warnaUtama} + {isWarna.utama.length == 0 ? "" : + {isWarna.utama} }
-
- {isWarna.backgroundUtama.length == 0 ? "" : - {isWarna.backgroundUtama} + {isWarna.bgUtama.length == 0 ? "" : + {isWarna.bgUtama} }
-
- {isWarna.backgroundIcon.length == 0 ? "" : - {isWarna.backgroundIcon} + {isWarna.bgIcon.length == 0 ? "" : + {isWarna.bgIcon} }
-
- {isWarna.backgroundFiturHome.length == 0 ? "" : - {isWarna.backgroundFiturHome} + {isWarna.bgFiturHome.length == 0 ? "" : + {isWarna.bgFiturHome} }
-
- {isWarna.backgroundFiturDivisi.length == 0 ? "" : - {isWarna.backgroundFiturDivisi} + {isWarna.bgFiturDivision.length == 0 ? "" : + {isWarna.bgFiturDivision} }
-
- {isWarna.backgroundTotalKegiatan.length == 0 ? "" : - {isWarna.backgroundTotalKegiatan} + {isWarna.bgTotalKegiatan.length == 0 ? "" : + {isWarna.bgTotalKegiatan} } @@ -172,7 +257,7 @@ export default function CreatePaletteColor() { size="lg" radius={30} fullWidth - // onClick={() => { onSubmit() }} + onClick={() => { onSubmit() }} > Simpan diff --git a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx index 45d5d9a..2dfc79c 100644 --- a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx +++ b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx @@ -4,27 +4,52 @@ import { useHookstate } from '@hookstate/core'; import { Box, Flex, SimpleGrid, Text } from '@mantine/core'; import { useRouter } from 'next/navigation'; import React, { useState } from 'react'; -import { FaPencil } from 'react-icons/fa6'; -import { IoAddCircle, IoColorPalette } from 'react-icons/io5'; +import toast from 'react-hot-toast'; +import { FaPencil, FaTrash } from 'react-icons/fa6'; +import { IoColorPalette } from 'react-icons/io5'; +import { funChangeTheme, funDeleteTheme, funGetThemeById } from '../lib/api_theme'; +import { globalRefreshTheme } from '../lib/val_theme'; -export default function DrawerPaletEditEndDefault() { +export default function DrawerPaletEditEndDefault({ id, idVillage }: { id: string, idVillage: string }) { const router = useRouter() const [isModal, setModal] = useState(false) + const [isModalDel, setModalDel] = useState(false) const tema = useHookstate(TEMA) + const refresh = useHookstate(globalRefreshTheme) - function onCLose(val: boolean) { - setModal(false) - // tema.set({ - // ...tema.get(), - // utama:'#000' - // }) - // router.refresh() + async function onChangeTheme() { + try { + const res = await funChangeTheme(id) + if (res.success) { + tema.set(res.data) + refresh.set(!refresh.get()) + } else { + toast.error(res.message); + } + } catch (error) { + console.error(error) + toast.error("Gagal mengubah tema, coba lagi nanti"); + } } + + async function onDelete() { + try { + const res = await funDeleteTheme(id) + if (res.success) { + toast.success(res.message); + refresh.set(!refresh.get()) + } else { + toast.error(res.message); + } + } catch (error) { + console.error(error) + toast.error("Gagal menghapus tema, coba lagi nanti"); + } + } + return ( - + setModal(true)} > @@ -35,21 +60,49 @@ export default function DrawerPaletEditEndDefault() { Gunakan Tema - router.push('/color-palette/update/1')} - > - - - - - Edit Tema - - + { + (idVillage != '' && idVillage != null) && + <> + router.push(`/color-palette/edit/${id}`)} > + + + + + Edit + + + + { setModalDel(true) }} > + + + + + Hapus + + + + + } setModal(false)} description="Apakah Anda yakin ingin mengubah Tema Aplikasi?" - onYes={(val) => { onCLose(val) }} /> + onYes={(val) => { + if (val) { + onChangeTheme() + } + setModal(false) + }} /> + + + setModalDel(false)} + description="Apakah Anda yakin ingin menghapus Tema Aplikasi?" + onYes={(val) => { + if (val) { + onDelete() + } + setModalDel(false) + }} /> ); } diff --git a/src/module/color_palette/ui/edit_palette_color.tsx b/src/module/color_palette/ui/edit_palette_color.tsx index b75fc0a..6af5063 100644 --- a/src/module/color_palette/ui/edit_palette_color.tsx +++ b/src/module/color_palette/ui/edit_palette_color.tsx @@ -3,31 +3,96 @@ 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 { IEditTheme } from '../lib/type_theme'; +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"; export default function EditPaletteColor() { const tema = useHookstate(TEMA) - const [isWarna, setWarna] = useState({ - judulTema: '', - warnaUtama: '', - backgroundUtama: '', - backgroundIcon: '', - backgroundFiturHome: '', - backgroundFiturDivisi: '', - backgroundTotalKegiatan: '', + const router = useRouter() + const [isModal, setModal] = useState(false) + const param = useParams<{ id: string }>() + const [touched, setTouched] = useState({ + name: false, + utama: false, + bgUtama: false, + bgIcon: false, + bgFiturHome: false, + bgFiturDivision: false, + bgTotalKegiatan: false, + }); + + const [isWarna, setWarna] = useState({ + id: '', + name: '', + utama: '', + bgUtama: '', + bgIcon: '', + bgFiturHome: '', + bgFiturDivision: '', + bgTotalKegiatan: '', }) + + async function getOneData() { + try { + const res = await funGetThemeById(param.id) + if (res.success) { + setWarna(res.data) + } else { + toast.error(res.message); + } + } catch (error) { + console.error(error) + toast.error("Gagal menambahkan tema, coba lagi nanti"); + } + } + + useShallowEffect(() => { + getOneData() + }, []) + + + async function onSubmit() { + try { + const res = await funEditTheme(param.id, isWarna) + if (res.success) { + toast.success(res.message); + router.push('/color-palette') + } else { + toast.error(res.message); + } + } catch (error) { + console.error(error) + toast.error("Gagal mengedit tema, coba lagi nanti"); + } + } + + return ( - setWarna({ ...isWarna, judulTema: e.target.value }) + (e) => { + setWarna({ ...isWarna, name: e.target.value }) + setTouched({ ...touched, name: true }) + } + } + error={ + touched.name && ( + isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, warnaUtama: color }) + (color) => { + setWarna({ ...isWarna, utama: color }) + setTouched({ ...touched, utama: true }) + } + } + error={ + touched.utama && ( + isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundUtama: color }) + (color) => { + setWarna({ ...isWarna, bgUtama: color }) + setTouched({ ...touched, bgUtama: true }) + } + } + error={ + touched.bgUtama && ( + isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundIcon: color }) + (color) => { + setWarna({ ...isWarna, bgIcon: color }) + setTouched({ ...touched, bgIcon: true }) + } + } + error={ + touched.bgIcon && ( + isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundFiturHome: color }) + (color) => { + setWarna({ ...isWarna, bgFiturHome: color }) + setTouched({ ...touched, bgFiturHome: true }) + } + } + error={ + touched.bgFiturHome && ( + isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundFiturDivisi: color }) + (color) => { + setWarna({ ...isWarna, bgFiturDivision: color }) + setTouched({ ...touched, bgFiturDivision: true }) + } + } + error={ + touched.bgFiturDivision && ( + isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null + ) } /> setWarna({ ...isWarna, backgroundTotalKegiatan: color }) + (color) => { + setWarna({ ...isWarna, bgTotalKegiatan: color }) + setTouched({ ...touched, bgTotalKegiatan: true }) + } + } + error={ + touched.bgTotalKegiatan && ( + isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null + ) } /> @@ -99,66 +218,67 @@ export default function EditPaletteColor() { >
-
- {isWarna.warnaUtama.length == 0 ? "" : - {isWarna.warnaUtama} + {isWarna.utama.length == 0 ? "" : + {isWarna.utama} }
-
- {isWarna.backgroundUtama.length == 0 ? "" : - {isWarna.backgroundUtama} + {isWarna.bgUtama.length == 0 ? "" : + {isWarna.bgUtama} }
-
- {isWarna.backgroundIcon.length == 0 ? "" : - {isWarna.backgroundIcon} + {isWarna.bgIcon.length == 0 ? "" : + {isWarna.bgIcon} }
-
- {isWarna.backgroundFiturHome.length == 0 ? "" : - {isWarna.backgroundFiturHome} + {isWarna.bgFiturHome.length == 0 ? "" : + {isWarna.bgFiturHome} }
-
- {isWarna.backgroundFiturDivisi.length == 0 ? "" : - {isWarna.backgroundFiturDivisi} + {isWarna.bgFiturDivision.length == 0 ? "" : + {isWarna.bgFiturDivision} }
-
- {isWarna.backgroundTotalKegiatan.length == 0 ? "" : - {isWarna.backgroundTotalKegiatan} + {isWarna.bgTotalKegiatan.length == 0 ? "" : + {isWarna.bgTotalKegiatan} } + { onSubmit() }} + onClick={() => { + setModal(true) + }} > Simpan + + + setModal(false)} description="Apakah Anda yakin ingin mengubah data?" + onYes={(val) => { + if (val) + onSubmit() + setModal(false) + } + } /> ); } diff --git a/src/module/color_palette/ui/list_color_palette.tsx b/src/module/color_palette/ui/list_color_palette.tsx index 5b65b9a..2fb5c65 100644 --- a/src/module/color_palette/ui/list_color_palette.tsx +++ b/src/module/color_palette/ui/list_color_palette.tsx @@ -8,38 +8,43 @@ import { HiMenu } from 'react-icons/hi'; import DrawerCreatePalette from './drawer_create_palette'; import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default'; import { useHookstate } from '@hookstate/core'; - -const palettema = [ - { - id: 1, - name: 'Tema Bawaan 1', - color: ['#ff69b4', '#33cc33', '#7D8A7DFF', '#0B730BFF', '#16ACE3FF', '#532CC1FF'] - }, - { - id: 2, - name: 'Tema Bawaan 2', - color: ['#EF8A62FF', '#532CC1FF', '#16ACE3FF', '#760B2DFF', '#F67280FF', '#C06C84FF'] - }, - { - id: 3, - name: 'Tema Bawaan 3', - color: ['#F8B195FF', '#F67280FF', '#C06C84FF', '#6C5B7BFF', '#7D8A7DFF', '#0B730BFF'] - }, -] - -const paletTambahan = [ - { - id: 1, - name: 'Tema Tambah 1', - color: ['#ABD220FF', '#E409E8FF', '#08A2A4FF', '#C11515FF', '#F67280FF', '#C06C84FF'] - } -] +import { funGetAllTheme } from '../lib/api_theme'; +import { IDataTheme } from '../lib/type_theme'; +import toast from 'react-hot-toast'; +import { useShallowEffect } from '@mantine/hooks'; +import { globalRefreshTheme } from '../lib/val_theme'; export default function ListColorPalette() { const router = useRouter() const [isOpen, setOpen] = useState(false) const [isOpenTambahan, setOpenTambahan] = useState(false) const tema = useHookstate(TEMA) + const [isData, setData] = useState([]) + const [isChooseId, setChooseId] = useState('') + const [isChooseName, setChooseName] = useState('') + const [isChooseVillage, setChooseVillage] = useState('') + const refresh = useHookstate(globalRefreshTheme) + + async function loadData() { + try { + const res = await funGetAllTheme() + if (res.success) { + setData(res.data) + } else { + toast.error(res.message) + } + } catch (error) { + console.error(error) + toast.error("Gagal mendapatkan data tema, coba lagi nanti") + } + } + + useShallowEffect(() => { + loadData() + setOpen(false) + setOpenTambahan(false) + }, [refresh.get()]) + return ( } /> - {palettema.map((v, i) => ( + {isData.map((v, i) => ( { setOpenTambahan(true) }} + onClick={() => { + setChooseId(v.id) + setChooseName(v.name) + setChooseVillage(v.idVillage) + setOpenTambahan(true) + }} > {v.name} - + {v.isUse ? : <>} - - - - - - ))} - - Tema Tambahan - {paletTambahan.map((v, i) => ( - - { setOpenTambahan(true) }} - > - - {v.name} - - - - - - - - - - - - - - - ))} - setOpen(false)}> - setOpenTambahan(false)}> - + setOpenTambahan(false)}> + );