87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
'use client'
|
|
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
|
|
import colors from '@/con/colors';
|
|
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
|
import { useShallowEffect } from '@mantine/hooks';
|
|
import { IconArrowBack } from '@tabler/icons-react';
|
|
import dynamic from 'next/dynamic';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useEffect, useState } from 'react';
|
|
import { useProxy } from 'valtio/utils';
|
|
|
|
const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
|
|
ssr: false,
|
|
});
|
|
|
|
function EditTujuanProgram() {
|
|
const router = useRouter()
|
|
const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
|
|
const [judul, setJudul] = useState('');
|
|
const [content, setContent] = useState('');
|
|
|
|
useShallowEffect(() => {
|
|
if (!editState.findById.data) {
|
|
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (editState.findById.data) {
|
|
setJudul(editState.findById.data.judul ?? '')
|
|
setContent(editState.findById.data.deskripsi ?? '')
|
|
}
|
|
}, [editState.findById.data])
|
|
|
|
const submit = () => {
|
|
if (editState.findById.data) {
|
|
editState.findById.data.judul = judul;
|
|
editState.findById.data.deskripsi = content;
|
|
editState.update.save(editState.findById.data)
|
|
}
|
|
router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program')
|
|
}
|
|
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 Tujuan Program</Title>
|
|
<TextInput
|
|
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
|
value={judul}
|
|
onChange={(e) => setJudul(e.target.value)}
|
|
/>
|
|
<Text fw={"bold"}>Deskripsi</Text>
|
|
<BimbinganBelajarDesaTextEditor
|
|
showSubmit={false}
|
|
onChange={setContent}
|
|
initialContent={content}
|
|
/>
|
|
<Group>
|
|
<Button
|
|
bg={colors['blue-button']}
|
|
onClick={submit}
|
|
loading={editState.update.loading}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Paper>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default EditTujuanProgram;
|