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

upd: theme'

Browse Source 
Deskripsi:
- color pallete
- crud
- change theme

No Issues
This commit is contained in:
amel
2024-09-13 17:16:15 +08:00
parent 2ecbd9d9d5
commit fb9b876a8e
14 changed files with 807 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/module/_global/components/wrap_layout.tsx
View File

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

22
src/module/auth/api/funGetUserByCookies.ts
View File

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

0
src/module/color_palette/lib/.gitkeep
View File

54
src/module/color_palette/lib/api_theme.ts Normal file
View File

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

33
src/module/color_palette/lib/type_theme.ts Normal file
View File

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

3
src/module/color_palette/lib/val_theme.ts Normal file
View File

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

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

@@ -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 (
<Box>
<LayoutNavbarNew back='/color-palette' title='Tambah Tema' menu />
@@ -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
)
}
/>
<ColorInput
@@ -37,7 +74,15 @@ export default function CreatePaletteColor() {
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaUtama: color })
(color) => {
setWarna({ ...isWarna, utama: color })
setTouched({ ...touched, utama: true })
}
}
error={
touched.utama && (
isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
@@ -47,7 +92,15 @@ export default function CreatePaletteColor() {
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, backgroundUtama: color })
(color) => {
setWarna({ ...isWarna, bgUtama: color })
setTouched({ ...touched, bgUtama: true })
}
}
error={
touched.bgUtama && (
isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
@@ -57,7 +110,15 @@ export default function CreatePaletteColor() {
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, backgroundIcon: color })
(color) => {
setWarna({ ...isWarna, bgIcon: color })
setTouched({ ...touched, bgIcon: true })
}
}
error={
touched.bgIcon && (
isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
@@ -67,7 +128,15 @@ export default function CreatePaletteColor() {
size="md"
radius="md"
onChangeEnd={
(color) => 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
)
}
/>
<ColorInput
@@ -77,7 +146,15 @@ export default function CreatePaletteColor() {
size="md"
radius="md"
onChangeEnd={
(color) => 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
)
}
/>
<ColorInput
@@ -87,7 +164,15 @@ export default function CreatePaletteColor() {
size="md"
radius="md"
onChangeEnd={
(color) => 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
)
}
/>
</Stack>
@@ -99,62 +184,62 @@ export default function CreatePaletteColor() {
>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.warnaUtama} w={35} h={35} style={{
<Box bg={isWarna.utama} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.warnaUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaUtama}</Pill>
{isWarna.utama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.utama}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundUtama} w={35} h={35} style={{
<Box bg={isWarna.bgUtama} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundUtama}</Pill>
{isWarna.bgUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgUtama}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundIcon} w={35} h={35} style={{
<Box bg={isWarna.bgIcon} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundIcon.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundIcon}</Pill>
{isWarna.bgIcon.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgIcon}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundFiturHome} w={35} h={35} style={{
<Box bg={isWarna.bgFiturHome} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundFiturHome.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundFiturHome}</Pill>
{isWarna.bgFiturHome.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgFiturHome}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundFiturDivisi} w={35} h={35} style={{
<Box bg={isWarna.bgFiturDivision} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundFiturDivisi.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundFiturDivisi}</Pill>
{isWarna.bgFiturDivision.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgFiturDivision}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundTotalKegiatan} w={35} h={35} style={{
<Box bg={isWarna.bgTotalKegiatan} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundTotalKegiatan.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundTotalKegiatan}</Pill>
{isWarna.bgTotalKegiatan.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgTotalKegiatan}</Pill>
}
</Flex>
</SimpleGrid>
@@ -172,7 +257,7 @@ export default function CreatePaletteColor() {
size="lg"
radius={30}
fullWidth
// onClick={() => { onSubmit() }}
onClick={() => { onSubmit() }}
>
Simpan
</Button>

101
src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
View File

@@ -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 (
<Box>
<SimpleGrid
cols={{ base: 2, sm: 3, lg: 3 }}
>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => setModal(true)}
>
@@ -35,21 +60,49 @@ export default function DrawerPaletEditEndDefault() {
<Text ta={'center'} c={tema.get().utama}>Gunakan Tema</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => router.push('/color-palette/update/1')}
>
<Box>
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={'center'} c={tema.get().utama}>Edit Tema</Text>
</Box>
</Flex>
{
(idVillage != '' && idVillage != null) &&
<>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push(`/color-palette/edit/${id}`)} >
<Box>
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={'center'} c={tema.get().utama}>Edit</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => { setModalDel(true) }} >
<Box>
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={'center'} c={tema.get().utama}>Hapus</Text>
</Box>
</Flex>
</>
}
</SimpleGrid>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah Tema Aplikasi?"
onYes={(val) => { onCLose(val) }} />
onYes={(val) => {
if (val) {
onChangeTheme()
}
setModal(false)
}} />
<LayoutModal opened={isModalDel} onClose={() => setModalDel(false)}
description="Apakah Anda yakin ingin menghapus Tema Aplikasi?"
onYes={(val) => {
if (val) {
onDelete()
}
setModalDel(false)
}} />
</Box>
);
}

201
src/module/color_palette/ui/edit_palette_color.tsx
View File

@@ -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<IEditTheme>({
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 (
<Box>
<LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
<Box p={20}>
<Stack>
<TextInput
<TextInput
label={'Judul Tema'}
placeholder='Judul Tema'
required
size="md"
radius="md"
value={isWarna.name}
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
)
}
/>
<ColorInput
@@ -36,8 +101,17 @@ export default function EditPaletteColor() {
required
size="md"
radius="md"
value={isWarna.utama}
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaUtama: color })
(color) => {
setWarna({ ...isWarna, utama: color })
setTouched({ ...touched, utama: true })
}
}
error={
touched.utama && (
isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
@@ -46,8 +120,17 @@ export default function EditPaletteColor() {
required
size="md"
radius="md"
value={isWarna.bgUtama}
onChangeEnd={
(color) => setWarna({ ...isWarna, backgroundUtama: color })
(color) => {
setWarna({ ...isWarna, bgUtama: color })
setTouched({ ...touched, bgUtama: true })
}
}
error={
touched.bgUtama && (
isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
@@ -56,8 +139,17 @@ export default function EditPaletteColor() {
required
size="md"
radius="md"
value={isWarna.bgIcon}
onChangeEnd={
(color) => setWarna({ ...isWarna, backgroundIcon: color })
(color) => {
setWarna({ ...isWarna, bgIcon: color })
setTouched({ ...touched, bgIcon: true })
}
}
error={
touched.bgIcon && (
isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
@@ -66,8 +158,17 @@ export default function EditPaletteColor() {
required
size="md"
radius="md"
value={isWarna.bgFiturHome}
onChangeEnd={
(color) => 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
)
}
/>
<ColorInput
@@ -76,8 +177,17 @@ export default function EditPaletteColor() {
required
size="md"
radius="md"
value={isWarna.bgFiturDivision}
onChangeEnd={
(color) => 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
)
}
/>
<ColorInput
@@ -86,8 +196,17 @@ export default function EditPaletteColor() {
required
size="md"
radius="md"
value={isWarna.bgTotalKegiatan}
onChangeEnd={
(color) => 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
)
}
/>
</Stack>
@@ -99,66 +218,67 @@ export default function EditPaletteColor() {
>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.warnaUtama} w={35} h={35} style={{
<Box bg={isWarna.utama} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.warnaUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaUtama}</Pill>
{isWarna.utama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.utama}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundUtama} w={35} h={35} style={{
<Box bg={isWarna.bgUtama} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundUtama}</Pill>
{isWarna.bgUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgUtama}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundIcon} w={35} h={35} style={{
<Box bg={isWarna.bgIcon} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundIcon.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundIcon}</Pill>
{isWarna.bgIcon.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgIcon}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundFiturHome} w={35} h={35} style={{
<Box bg={isWarna.bgFiturHome} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundFiturHome.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundFiturHome}</Pill>
{isWarna.bgFiturHome.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgFiturHome}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundFiturDivisi} w={35} h={35} style={{
<Box bg={isWarna.bgFiturDivision} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundFiturDivisi.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundFiturDivisi}</Pill>
{isWarna.bgFiturDivision.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgFiturDivision}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundTotalKegiatan} w={35} h={35} style={{
<Box bg={isWarna.bgTotalKegiatan} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundTotalKegiatan.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundTotalKegiatan}</Pill>
{isWarna.bgTotalKegiatan.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.bgTotalKegiatan}</Pill>
}
</Flex>
</SimpleGrid>
</Flex>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -172,11 +292,22 @@ export default function EditPaletteColor() {
size="lg"
radius={30}
fullWidth
// onClick={() => { onSubmit() }}
onClick={() => {
setModal(true)
}}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)} description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {
if (val)
onSubmit()
setModal(false)
}
} />
</Box>
);
}

154
src/module/color_palette/ui/list_color_palette.tsx
View File

@@ -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<IDataTheme[]>([])
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 (
<Box>
<LayoutNavbarNew back='/home' title='Tema Aplikasi' menu={
@@ -48,98 +53,61 @@ export default function ListColorPalette() {
</ActionIcon>
} />
<Box p={20}>
{palettema.map((v, i) => (
{isData.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderWidth: "3px",
borderStyle: "solid",
borderImage: `linear-gradient(to right, ${v.color} ) 1 `,
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}} pt={10} pb={10} pl={20} pr={20}
onClick={() => { setOpenTambahan(true) }}
onClick={() => {
setChooseId(v.id)
setChooseName(v.name)
setChooseVillage(v.idVillage)
setOpenTambahan(true)
}}
>
<Group justify='space-between' align='center'>
<Text>{v.name}</Text>
<Checkbox
radius="xl"
color="teal"
/>
{v.isUse ? <FaCircleCheck size={20} /> : <></>}
</Group>
<Box pt={10}>
<Flex gap={10}>
<Box bg={v.color[0]} w={30} h={30} style={{
borderRadius: "100%"
<Box bg={v.utama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.color[1]} w={30} h={30} style={{
borderRadius: "100%"
<Box bg={v.bgUtama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.color[2]} w={30} h={30} style={{
borderRadius: "100%"
<Box bg={v.bgIcon} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.color[3]} w={30} h={30} style={{
borderRadius: "100%"
<Box bg={v.bgFiturHome} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.color[4]} w={30} h={30} style={{
borderRadius: "100%"
<Box bg={v.bgFiturDivision} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.color[5]} w={30} h={30} style={{
borderRadius: "100%"
<Box bg={v.bgTotalKegiatan} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
</Flex>
</Box>
</Box>
</Box>
))}
<Box>
<Text fw={"bold"}>Tema Tambahan</Text>
{paletTambahan.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderWidth: "3px",
borderStyle: "solid",
borderImage: `linear-gradient(to right, ${v.color} ) 1 `,
}} pt={10} pb={10} pl={20} pr={20}
onClick={() => { setOpenTambahan(true) }}
>
<Group justify='space-between' align='center'>
<Text>{v.name}</Text>
<Checkbox
radius="xl"
color="teal"
/>
</Group>
<Box pt={10}>
<Flex gap={10}>
<Box bg={v.color[0]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[1]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[2]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[3]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[4]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[5]} w={30} h={30} style={{
borderRadius: "100%"
}} />
</Flex>
</Box>
</Box>
</Box>
))}
</Box>
</Box>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerCreatePalette />
</LayoutDrawer>
<LayoutDrawer opened={isOpenTambahan} title={'Menu'} onClose={() => setOpenTambahan(false)}>
<DrawerPaletEditEndDefault />
<LayoutDrawer opened={isOpenTambahan} title={isChooseName} onClose={() => setOpenTambahan(false)}>
<DrawerPaletEditEndDefault id={isChooseId} idVillage={isChooseVillage} />
</LayoutDrawer>
</Box>
);