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

Nico 21 Mei :

Browse Source 
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:
nico
2025-05-21 11:28:27 +08:00
parent d1e39ae7f9
commit cab86eb02f
20 changed files with 623 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/admin/(dashboard)/ppid/_com/PPIDTextEditor.tsx
View File

@@ -8,6 +8,7 @@ import TextAlign from '@tiptap/extension-text-align';
import Underline from '@tiptap/extension-underline';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { useEffect } from 'react';
export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: {
@@ -32,6 +33,12 @@ export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true, initialC
}
});
useEffect(() => {
if (editor && initialContent !== editor.getHTML()) {
editor.commands.setContent(initialContent || '<p></p>');
}
}, [initialContent, editor]);
return (
<Stack>
<RichTextEditor editor={editor}>

44
src/app/admin/(dashboard)/ppid/dasar-hukum/create/create.tsx Normal file
View File

@@ -0,0 +1,44 @@
'use client'
import { Box, Stack, Text } from '@mantine/core';
import dynamic from 'next/dynamic';
const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
ssr: false,
});
function CreateDasarHukum({
valueJudul,
valueContent,
onJudulChange,
onContentChange,
error
} : {
valueJudul: string;
valueContent: string;
onJudulChange: (val: string) => void;
onContentChange: (val: string) => void;
error?: string;
}) {
return (
<Box>
<Stack gap={"xs"}>
<Text fw={"bold"}>Judul</Text>
<PPIDTextEditor
showSubmit={false}
onChange={onJudulChange}
initialContent={valueJudul}
/>
<Text fw={"bold"}>Content</Text>
<PPIDTextEditor
showSubmit={false}
onChange={onContentChange}
initialContent={valueContent}
/>
{error && <Text c="red" size="sm">{error}</Text>}
</Stack>
</Box>
);
}
export default CreateDasarHukum;

64
src/app/admin/(dashboard)/ppid/dasar-hukum/create/page.tsx
View File

@@ -1,64 +0,0 @@
'use client'
import { Box, Button, Group, Stack, Text } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
import dynamic from 'next/dynamic';
import colors from '@/con/colors';
import { useShallowEffect } from '@mantine/hooks';
const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
ssr: false,
});
function CreateDasarHukum() {
const dasarHukumState = useProxy(stateDasarHukumPPID)
useShallowEffect(() => {
if (!dasarHukumState.findById.data) {
dasarHukumState.findById.load(""); // biar masuk ke `findFirst` route kamu
}
}, []);
const submit = () => {
if (dasarHukumState.findById.data?.judul && dasarHukumState.findById.data?.content) {
dasarHukumState.update.save(dasarHukumState.findById.data)
}
}
return (
<Box>
<Stack gap={"xs"}>
<Text fw={"bold"}>Judul</Text>
<PPIDTextEditor
showSubmit={false}
key={`judul-${dasarHukumState.findById.data?.id ?? 'new'}`}
onChange={(val) => {
if (dasarHukumState.findById.data) {
dasarHukumState.findById.data.judul = val
}
}}
initialContent={dasarHukumState.findById.data?.judul ?? ''}
/>
<Text fw={"bold"}>Content</Text>
<PPIDTextEditor
showSubmit={false}
key={`content-${dasarHukumState.findById.data?.id ?? 'baru'}`}
onChange={(val) => {
if (dasarHukumState.findById.data) {
dasarHukumState.findById.data.content = val
}
}}
initialContent={dasarHukumState.findById.data?.content ?? ''}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={dasarHukumState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Box>
);
}
export default CreateDasarHukum;

48
src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx
View File

@@ -1,21 +1,59 @@
'use client'
import colors from '@/con/colors';
import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
import CreateDasarHukum from './create/page';
import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
import CreateDasarHukum from './create/create';
import ListDataDasarHukum from './listData/page';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import stateDasarHukumPPID from '../../_state/ppid/dasar_hukum/dasarHukum';
import { useEffect, useState } from 'react';
function Page() {
const dasarHukumState = useProxy(stateDasarHukumPPID)
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
useShallowEffect(() => {
if (!dasarHukumState.findById.data) {
dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
}
}, []);
useEffect(() => {
if (dasarHukumState.findById.data) {
setJudul(dasarHukumState.findById.data.judul ?? '')
setContent(dasarHukumState.findById.data.content ?? '')
}
}, [dasarHukumState.findById.data])
const submit = () => {
if (dasarHukumState.findById.data) {
dasarHukumState.findById.data.judul = judul;
dasarHukumState.findById.data.content = content;
dasarHukumState.update.save(dasarHukumState.findById.data)
}
}
return (
<Stack gap={"xs"}>
<SimpleGrid cols={{ base: 1, md: 2 }}>
<Box>
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Title order={3}>Dasar Hukum PPID</Title>
<CreateDasarHukum/>
<Title order={3}>Dasar Hukum PPID</Title>
<CreateDasarHukum onJudulChange={setJudul} onContentChange={setContent} valueJudul={judul} valueContent={content} />
<Group>
<Button
mt={10}
bg={colors['blue-button']}
onClick={submit}
loading={dasarHukumState.update.loading}
>
Submit
</Button>
</Group>
</Paper>
</Box>
<ListDataDasarHukum/>
<ListDataDasarHukum />
</SimpleGrid>
</Stack>
)

27
src/app/admin/(dashboard)/ppid/visi-misi-ppid/misiPPID/misi-PPID.tsx Normal file
View File

@@ -0,0 +1,27 @@
'use client'
import { Box, Text } from '@mantine/core';
import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
function MisiPPID({
value,
onChange,
error,
}: {
value: string;
onChange: (val: string) => void;
error?: string;
}) {
return (
<Box>
<Text fw={'bold'}>Misi PPID</Text>
<PPIDTextEditor
showSubmit={false}
initialContent={value}
onChange={onChange}
/>
{error && <Text c="red" size="sm">{error}</Text>}
</Box>
);
}
export default MisiPPID;

26
src/app/admin/(dashboard)/ppid/visi-misi-ppid/misiPPID/page.tsx
View File

@@ -1,26 +0,0 @@
'use client'
import { Box, Text } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
function MisiPPID() {
const misiState = useProxy(stateVisiMisiPPID)
return (
<Box>
<Text fw={"bold"}>Misi PPID</Text>
<PPIDTextEditor
key={misiState.findById.data?.id ?? 'new'}
showSubmit={false}
onChange={(val) => {
if(misiState.findById.data){
misiState.findById.data.misi = val
}
}}
initialContent={misiState.findById.data?.misi ?? ''}
/>
</Box>
);
}
export default MisiPPID;

83
src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx
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;

26
src/app/admin/(dashboard)/ppid/visi-misi-ppid/visiPPID/page.tsx
View File

@@ -1,26 +0,0 @@
'use client'
import { Box, Text } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
function VisiPPID() {
const visiState = useProxy(stateVisiMisiPPID)
return (
<Box>
<Text fw={"bold"}>Visi PPID</Text>
<PPIDTextEditor
key={visiState.findById.data?.id ?? 'new'}
showSubmit={false}
onChange={(val) => {
if(visiState.findById.data){
visiState.findById.data.visi = val
}
}}
initialContent={visiState.findById.data?.visi ?? ''}
/>
</Box>
);
}
export default VisiPPID;

27
src/app/admin/(dashboard)/ppid/visi-misi-ppid/visiPPID/visi-PPID.tsx Normal file
View File

@@ -0,0 +1,27 @@
'use client'
import { Box, Text } from '@mantine/core';
import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
function VisiPPID({
value,
onChange,
error,
}: {
value: string;
onChange: (val: string) => void;
error?: string;
}) {
return (
<Box>
<Text fw={'bold'}>Visi PPID</Text>
<PPIDTextEditor
showSubmit={false}
initialContent={value}
onChange={onChange}
/>
{error && <Text c="red" size="sm">{error}</Text>}
</Box>
);
}
export default VisiPPID;