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

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-17 17:49:20 +08:00
parent 4e4160ed83
commit 048b2632a9
27 changed files with 357 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,7 +49,7 @@ export default function DrawerPaletEditEndDefault({ id, idVillage }: { id: strin
return (
<Box>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
<SimpleGrid cols={{ base: 2, sm: 3, lg: 3 }}>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => setModal(true)}
>

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

@@ -1,7 +1,7 @@
"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 { 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 toast from 'react-hot-toast';
@@ -15,6 +15,7 @@ export default function EditPaletteColor() {
const router = useRouter()
const [isModal, setModal] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
name: false,
utama: false,
@@ -38,15 +39,19 @@ export default function EditPaletteColor() {
async function getOneData() {
try {
setLoading(true)
const res = await funGetThemeById(param.id)
if (res.success) {
setWarna(res.data)
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error)
toast.error("Gagal menambahkan tema, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -75,141 +80,154 @@ export default function EditPaletteColor() {
<Box>
<LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
<Box p={20}>
<Stack>
<TextInput
label={'Judul Tema'}
placeholder='Judul Tema'
required
size="md"
radius="md"
value={isWarna.name}
onChange={
(e) => {
setWarna({ ...isWarna, name: e.target.value })
setTouched({ ...touched, name: true })
{loading ?
<Stack>
{Array(7)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Skeleton width={"30%"} height={20} mb={10} radius={"md"} />
<Skeleton width={"100%"} height={40} radius={"md"} />
</Box>
))}
</Stack>
:
<Stack>
<TextInput
label={'Judul Tema'}
placeholder='Judul Tema'
required
size="md"
radius="md"
value={isWarna.name}
onChange={
(e) => {
setWarna({ ...isWarna, name: e.target.value })
setTouched({ ...touched, name: true })
}
}
}
error={
touched.name && (
isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Warna Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.utama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, utama: color })
setTouched({ ...touched, utama: true })
error={
touched.name && (
isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null
)
}
}
error={
touched.utama && (
isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgUtama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgUtama: color })
setTouched({ ...touched, bgUtama: true })
/>
<ColorInput
label={'Warna Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.utama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, utama: color })
setTouched({ ...touched, utama: true })
}
}
}
error={
touched.bgUtama && (
isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Icon'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgIcon}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgIcon: color })
setTouched({ ...touched, bgIcon: true })
error={
touched.utama && (
isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
)
}
}
error={
touched.bgIcon && (
isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Fitur Home'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgFiturHome}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturHome: color })
setTouched({ ...touched, bgFiturHome: true })
/>
<ColorInput
label={'Background Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgUtama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgUtama: color })
setTouched({ ...touched, bgUtama: true })
}
}
}
error={
touched.bgFiturHome && (
isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Fitur Divisi'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgFiturDivision}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturDivision: color })
setTouched({ ...touched, bgFiturDivision: true })
error={
touched.bgUtama && (
isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
)
}
}
error={
touched.bgFiturDivision && (
isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Total Kegiatan'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgTotalKegiatan}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgTotalKegiatan: color })
setTouched({ ...touched, bgTotalKegiatan: true })
/>
<ColorInput
label={'Background Icon'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgIcon}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgIcon: color })
setTouched({ ...touched, bgIcon: true })
}
}
}
error={
touched.bgTotalKegiatan && (
isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null
)
}
/>
</Stack>
error={
touched.bgIcon && (
isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Fitur Home'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgFiturHome}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturHome: color })
setTouched({ ...touched, bgFiturHome: true })
}
}
error={
touched.bgFiturHome && (
isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Fitur Divisi'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgFiturDivision}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturDivision: color })
setTouched({ ...touched, bgFiturDivision: true })
}
}
error={
touched.bgFiturDivision && (
isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Total Kegiatan'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgTotalKegiatan}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgTotalKegiatan: color })
setTouched({ ...touched, bgTotalKegiatan: true })
}
}
error={
touched.bgTotalKegiatan && (
isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null
)
}
/>
</Stack>
}
<Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={20} mb={100}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 6 }}
@@ -286,18 +304,22 @@ export default function EditPaletteColor() {
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
color="white"
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => {
setModal(true)
}}
>
Simpan
</Button>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
color="white"
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => {
setModal(true)
}}
>
Simpan
</Button>
}
</Box>

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

@@ -1,6 +1,6 @@
"use client"
import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { ActionIcon, Box, Checkbox, Flex, Group, Text } from '@mantine/core';
import { ActionIcon, Box, Checkbox, Flex, Group, Skeleton, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { FaCircleCheck } from 'react-icons/fa6';
@@ -24,18 +24,23 @@ export default function ListColorPalette() {
const [isChooseName, setChooseName] = useState('')
const [isChooseVillage, setChooseVillage] = useState('')
const refresh = useHookstate(globalRefreshTheme)
const [loading, setLoading] = useState(true)
async function loadData() {
try {
setLoading(true)
const res = await funGetAllTheme()
if (res.success) {
setData(res.data)
} else {
toast.error(res.message)
}
setLoading(false)
} catch (error) {
console.error(error)
toast.error("Gagal mendapatkan data tema, coba lagi nanti")
} finally {
setLoading(false)
}
}
@@ -52,56 +57,68 @@ export default function ListColorPalette() {
<HiMenu size={20} color='white' />
</ActionIcon>
} />
<Box p={20}>
{isData.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}} pt={10} pb={10} pl={20} pr={20}
onClick={() => {
setChooseId(v.id)
setChooseName(v.name)
setChooseVillage(v.idVillage)
setOpenTambahan(true)
}}
>
<Group justify='space-between' align='center'>
<Text>{v.name}</Text>
{v.isUse ? <FaCircleCheck size={20} /> : <></>}
</Group>
<Box pt={10}>
<Flex gap={10}>
<Box bg={v.utama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgUtama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgIcon} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgFiturHome} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgFiturDivision} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgTotalKegiatan} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
</Flex>
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i} pl={20} pr={20} pt={20}>
<Box>
<Skeleton width={"100%"} height={90} radius={10} />
</Box>
</Box>
</Box>
))}
</Box>
))
:
<Box p={20}>
{isData.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}} pt={10} pb={10} pl={20} pr={20}
onClick={() => {
setChooseId(v.id)
setChooseName(v.name)
setChooseVillage(v.idVillage)
setOpenTambahan(true)
}}
>
<Group justify='space-between' align='center'>
<Text>{v.name}</Text>
{v.isUse ? <FaCircleCheck size={20} /> : <></>}
</Group>
<Box pt={10}>
<Flex gap={10}>
<Box bg={v.utama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgUtama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgIcon} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgFiturHome} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgFiturDivision} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgTotalKegiatan} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
</Flex>
</Box>
</Box>
</Box>
))}
</Box>
}
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerCreatePalette />
</LayoutDrawer>