Nico 21 Mei :

Yang udah dikerjakan:
Tampilan UI Menu DesaTampilan UI Menu Kesehatan

Yang Akan dikerjakan:
Tampilan UI Keamanan, dan Menu Selanjutnya
Memperbaiki eror di bagian inputan dimana saat nginput data outputnya ikut ke ganti seharusnya di submit dulu
This commit is contained in:
2025-05-21 11:28:27 +08:00
parent d1e39ae7f9
commit cab86eb02f
20 changed files with 623 additions and 156 deletions

View File

@@ -1,11 +1,16 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
import {
Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import { useEffect, useState } from 'react';
import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
import MisiPPID from './misiPPID/page';
import VisiPPID from './visiPPID/page';
import VisiPPID from './visiPPID/visi-PPID';
import MisiPPID from './misiPPID/misi-PPID';
function Page() {
return (
@@ -19,26 +24,38 @@ function Page() {
}
function VisiMisiPPIDCreate() {
const visiMisi = useProxy(stateVisiMisiPPID)
const visiMisi = useProxy(stateVisiMisiPPID);
const [draftVisi, setDraftVisi] = useState('');
const [draftMisi, setDraftMisi] = useState('');
useShallowEffect(() => {
if(!visiMisi.findById.data){
visiMisi.findById.initialize()
if (!visiMisi.findById.data) {
visiMisi.findById.initialize();
}
}, [])
}, []);
useEffect(() => {
if (visiMisi.findById.data) {
setDraftVisi(visiMisi.findById.data.visi ?? '');
setDraftMisi(visiMisi.findById.data.misi ?? '');
}
}, [visiMisi.findById.data]);
const submit = () => {
if(visiMisi.findById.data?.misi && visiMisi.findById.data?.visi){
visiMisi.update.save(visiMisi.findById.data)
if (visiMisi.findById.data) {
// update nilai di state global hanya saat submit
visiMisi.findById.data.visi = draftVisi;
visiMisi.findById.data.misi = draftMisi;
visiMisi.update.save(visiMisi.findById.data);
}
}
};
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"xs"}>
<Stack gap={'xs'}>
<Title order={3}>Visi Misi PPID</Title>
<VisiPPID />
<MisiPPID />
<VisiPPID value={draftVisi} onChange={setDraftVisi} />
<MisiPPID value={draftMisi} onChange={setDraftMisi} />
<Group>
<Button
bg={colors['blue-button']}
@@ -50,34 +67,48 @@ function VisiMisiPPIDCreate() {
</Group>
</Stack>
</Paper>
)
);
}
function VisiMisiPPIDList() {
const listVisiMisi = useProxy(stateVisiMisiPPID)
const listVisiMisi = useProxy(stateVisiMisiPPID);
useShallowEffect(() => {
listVisiMisi.findById.load("1")
}, [])
listVisiMisi.findById.load('1');
}, []);
if(!listVisiMisi.findById.data) return <Stack>
{Array.from({length: 10}).map((v, k) => <Skeleton key={k} h={40} />)}
</Stack>
if (!listVisiMisi.findById.data) {
return (
<Stack>
{Array.from({ length: 10 }).map((_, k) => (
<Skeleton key={k} h={40} />
))}
</Stack>
);
}
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"xs"}>
<Stack gap={'xs'}>
<Title order={3}>List Visi Misi PPID</Title>
<Box>
<Text fw={"bold"}>Visi PPID</Text>
<Text dangerouslySetInnerHTML={{__html: listVisiMisi.findById.data?.visi}}></Text>
<Text fw={'bold'}>Visi PPID</Text>
<Text
dangerouslySetInnerHTML={{
__html: listVisiMisi.findById.data.visi,
}}
></Text>
</Box>
<Box>
<Text fw={"bold"}>Misi PPID</Text>
<Text dangerouslySetInnerHTML={{__html: listVisiMisi.findById.data?.misi}}></Text>
<Text fw={'bold'}>Misi PPID</Text>
<Text
dangerouslySetInnerHTML={{
__html: listVisiMisi.findById.data.misi,
}}
></Text>
</Box>
</Stack>
</Paper>
)
);
}
export default Page;