Tambahan Di menu PPID
This commit is contained in:
24
src/app/admin/(dashboard)/ppid/profile-ppid/biodata/page.tsx
Normal file
24
src/app/admin/(dashboard)/ppid/profile-ppid/biodata/page.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
'use client'
|
||||
import { Box, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
|
||||
import { PPIDEditor } from '../../_com/ppid_Editor';
|
||||
|
||||
function Biodata() {
|
||||
const biodataState = useProxy(stateProfilePPID.profilePPID)
|
||||
return (<Box>
|
||||
<Text fw={"bold"}>Biodata</Text>
|
||||
<PPIDEditor
|
||||
showSubmit={false}
|
||||
onChange={(val) => {
|
||||
biodataState.create.form.biodata = val
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Biodata;
|
||||
@@ -1,11 +1,102 @@
|
||||
import React from 'react';
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import Biodata from './biodata/page';
|
||||
import PengalamanOrganisasi from './pengalaman_organisasi/page';
|
||||
import RiwayatKarir from './riwayat_karir/page';
|
||||
import ProgramKerjaUnggulan from './program_kerja_unggulan/page';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
profile-ppid
|
||||
</div>
|
||||
<Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }}>
|
||||
<ProfileCreate />
|
||||
<ProfileList />
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ProfileCreate() {
|
||||
const allState = useProxy(stateProfilePPID)
|
||||
const submit = () => {
|
||||
if (
|
||||
allState.profilePPID.create.form.name &&
|
||||
allState.profilePPID.create.form.biodata &&
|
||||
allState.profilePPID.create.form.riwayat &&
|
||||
allState.profilePPID.create.form.pengalaman &&
|
||||
allState.profilePPID.create.form.unggulan) {
|
||||
allState.profilePPID.create.create()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Profile PPID</Title>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"}>Nama Perbekel</Text>}
|
||||
placeholder="masukkan nama perbekel"
|
||||
onChange={(val) => {
|
||||
allState.profilePPID.create.form.name = val.currentTarget.value
|
||||
}}
|
||||
/>
|
||||
<Biodata />
|
||||
<RiwayatKarir />
|
||||
<PengalamanOrganisasi />
|
||||
<ProgramKerjaUnggulan />
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']} onClick={submit}>Submit</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
function ProfileList() {
|
||||
const allList = useProxy(stateProfilePPID)
|
||||
useShallowEffect(() => {
|
||||
allList.profilePPID.findMany.load()
|
||||
}, [])
|
||||
|
||||
if (!allList.profilePPID.findMany.data) return <Stack>
|
||||
{Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
|
||||
</Stack>
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>List Profile PPID</Title>
|
||||
{allList.profilePPID.findMany.data?.map((item) => (
|
||||
<Box key={item.id}>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Nama</Text>
|
||||
<Text dangerouslySetInnerHTML={{ __html: item.name }}></Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Biodata</Text>
|
||||
<Text dangerouslySetInnerHTML={{ __html: item.biodata }}></Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Riwayat</Text>
|
||||
<Text dangerouslySetInnerHTML={{ __html: item.riwayat }}></Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Pengalaman</Text>
|
||||
<Text dangerouslySetInnerHTML={{ __html: item.pengalaman }}></Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Program Kerja Unggulan</Text>
|
||||
<Text dangerouslySetInnerHTML={{ __html: item.unggulan }}></Text>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
'use client'
|
||||
import { Box, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
|
||||
import { PPIDEditor } from '../../_com/ppid_Editor';
|
||||
|
||||
function PengalamanOrganisasi() {
|
||||
const pengalamanOrganisasiState = useProxy(stateProfilePPID.profilePPID)
|
||||
return (<Box>
|
||||
<Text fw={"bold"}>Pengalaman Organisasi</Text>
|
||||
<PPIDEditor
|
||||
showSubmit={false}
|
||||
onChange={(val) => {
|
||||
pengalamanOrganisasiState.create.form.pengalaman = val
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default PengalamanOrganisasi;
|
||||
@@ -0,0 +1,22 @@
|
||||
'use client'
|
||||
import { Box, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
|
||||
import { PPIDEditor } from '../../_com/ppid_Editor';
|
||||
|
||||
function ProgramKerjaUnggulan() {
|
||||
const programKerjaUnggulanState = useProxy(stateProfilePPID.profilePPID)
|
||||
return (<Box>
|
||||
<Text fw={"bold"}>Program Kerja Unggulan</Text>
|
||||
<PPIDEditor
|
||||
showSubmit={false}
|
||||
onChange={(val) => {
|
||||
programKerjaUnggulanState.create.form.unggulan = val
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProgramKerjaUnggulan;
|
||||
@@ -0,0 +1,30 @@
|
||||
'use client';
|
||||
|
||||
import { Box, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import dynamic from 'next/dynamic';
|
||||
import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
|
||||
|
||||
// ini penting
|
||||
const PPIDEditor = dynamic(() => import('../../_com/ppid_Editor').then(mod => mod.PPIDEditor), {
|
||||
ssr: false, // disable server side rendering
|
||||
});
|
||||
|
||||
function RiwayatKarir() {
|
||||
const biodataState = useProxy(stateProfilePPID.profilePPID);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Text fw={"bold"}>Riwayat Karir</Text>
|
||||
<PPIDEditor
|
||||
showSubmit={false}
|
||||
onChange={(val) => {
|
||||
biodataState.create.form.riwayat = val;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default RiwayatKarir;
|
||||
Reference in New Issue
Block a user