Fix UI PPID:
Visi Misi PPID, Dasar Hukum, Daftar Informasi Publik
This commit is contained in:
@@ -1,44 +0,0 @@
|
||||
'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;
|
||||
86
src/app/admin/(dashboard)/ppid/dasar-hukum/edit/page.tsx
Normal file
86
src/app/admin/(dashboard)/ppid/dasar-hukum/edit/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
|
||||
const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
function EditDasarHukum() {
|
||||
const router = useRouter()
|
||||
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 (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Dasar Hukum PPID</Title>
|
||||
<Text fw={"bold"}>Judul</Text>
|
||||
<PPIDTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setJudul}
|
||||
initialContent={judul}
|
||||
/>
|
||||
<Text fw={"bold"}>Content</Text>
|
||||
<PPIDTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={dasarHukumState.update.loading}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditDasarHukum;
|
||||
@@ -1,40 +0,0 @@
|
||||
'use client'
|
||||
import React from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { Box, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
function ListDataDasarHukum() {
|
||||
const dataList = useProxy(stateDasarHukumPPID)
|
||||
useShallowEffect(() => {
|
||||
dataList.findById.load("")
|
||||
}, [])
|
||||
|
||||
if(!dataList.findById.data) return <Stack>
|
||||
{Array.from({length: 10}).map((v, k) => <Skeleton key={k} h={40} />)}
|
||||
</Stack>
|
||||
|
||||
const dataArray = Array.isArray(dataList.findById.data)
|
||||
? dataList.findById.data
|
||||
: [dataList.findById.data];
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>List Dasar Hukum PPID</Title>
|
||||
{dataArray.map((item) => (
|
||||
<Box key={item.id}>
|
||||
<Text fw={"bold"}>Judul</Text>
|
||||
<Text dangerouslySetInnerHTML={{ __html: item.judul }}></Text>
|
||||
<Text fw={"bold"}>Content</Text>
|
||||
<Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
export default ListDataDasarHukum;
|
||||
@@ -1,61 +1,55 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
|
||||
import CreateDasarHukum from './create/create';
|
||||
import ListDataDasarHukum from './listData/page';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
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('');
|
||||
|
||||
const router = useRouter()
|
||||
const listDasarHukum = useProxy(stateDasarHukumPPID)
|
||||
useShallowEffect(() => {
|
||||
if (!dasarHukumState.findById.data) {
|
||||
dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
}
|
||||
}, []);
|
||||
listDasarHukum.findById.load('1')
|
||||
}, [])
|
||||
|
||||
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)
|
||||
}
|
||||
if (!listDasarHukum.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
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 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>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Dasar Hukum PPID</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/ppid/dasar-hukum/edit')}>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 20, md: 50 }} pb={30}>
|
||||
<Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
|
||||
{listDasarHukum.findById.data.judul}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box px={{ base: 20, md: 50 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }} />
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
<ListDataDasarHukum />
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user