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

ProfilePPID bagian Profile, VisiMisiPPD sudah ada seed dan bisa di edit

Browse Source
This commit is contained in:
nico
2025-05-13 11:51:48 +08:00
parent 8a34a122d0
commit e5889ca903
39 changed files with 1048 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/admin/(dashboard)/ppid/profile-ppid/_com/biodata.ts Normal file
View File

@@ -0,0 +1,10 @@
const biodata = {
id: "1",
name: "<p>I.B Surya Prabhawa Manuaba, S.H., M.H.</p>",
biodata: "<h2>Biodata</h2> <p>....</p>",
riwayat: "<h2>Riwayat Karir</h2> <ul>...</ul>",
pengalaman: "<h2>Pengalaman Organisasi</h2> <ul>...</ul>",
unggulan: "<h2>Program Kerja Unggulan</h2> <h3>...</h3>",
}
export default biodata

77
src/app/admin/(dashboard)/ppid/profile-ppid/biodata/page.tsx
View File

@@ -1,23 +1,82 @@
'use client'
import { Box, Text } from '@mantine/core';
import { Box, Group, 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';
import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
import { IconUpload, IconX, IconPhoto } from '@tabler/icons-react';
function Biodata() {
const biodataState = useProxy(stateProfilePPID.profilePPID)
const biodataState = useProxy(stateProfilePPID)
const handleUpload = async (file: File) => {
const formData = new FormData();
formData.append("file", file);
formData.append("id", biodataState.findById.data?.id ?? ''); // pastikan ID-nya sesuai
const res = await fetch("/api/ppid/profileppid/edit-img", {
method: "POST",
body: formData,
});
const result = await res.json();
if (result.success && biodataState.findById.data) {
biodataState.findById.data.imageUrl = result.url;
}
};
return (<Box>
<Text fw={"bold"}>Biodata</Text>
<PPIDEditor
showSubmit={false}
onChange={(val) => {
biodataState.create.form.biodata = val
}}
<Dropzone
mb={20}
onDrop={(files) => {
const file = files[0];
const currentId = biodataState.findById.data?.id;
if (file && currentId) {
handleUpload(file);
}
}}
onReject={() => console.log('File rejected')}
maxSize={5 * 1024 ** 2} // 5MB
accept={[MIME_TYPES.jpeg, MIME_TYPES.png, MIME_TYPES.webp]}
loading={stateProfilePPID.uploadImage.loading}
>
<Group justify="center" gap="md" mih={150} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload size={50} stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={50} stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={50} stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag & drop gambar di sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal ukuran file 5MB. Format: JPG, PNG, WebP
</Text>
</div>
</Group>
</Dropzone>
<PPIDTextEditor
key={biodataState.findById.data?.id ?? 'new'}
showSubmit={false}
onChange={(val) => {
if (biodataState.findById.data) {
biodataState.findById.data.biodata = val;
}
}}
initialContent={biodataState.findById.data?.biodata ?? ''}
/>
</Box>
);
}

68
src/app/admin/(dashboard)/ppid/profile-ppid/listPage.tsx Normal file
View File

@@ -0,0 +1,68 @@
import colors from '@/con/colors';
import { Stack, Skeleton, Paper, Title, Box, Text, Image } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React from 'react';
import { useProxy } from 'valtio/utils';
import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
function ProfileList() {
const allList = useProxy(stateProfilePPID)
useShallowEffect(() => {
allList.findById.load("1") // Assuming "1" is your default ID, adjust as needed
}, [])
if (!allList.findById.data) return <Stack>
{Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
</Stack>
const dataArray = Array.isArray(allList.findById.data)
? allList.findById.data
: [allList.findById.data];
return (
<Paper bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={3}>List Profile PPID</Title>
{dataArray.map((item) => (
<Box key={item.id}>
<Box>
<Text fw={"bold"}>Gambar</Text>
{item.imageUrl ? (
<Image
src={item.imageUrl}
alt="Foto Profil"
w={200}
radius="md"
/>
) : (
<Text c="dimmed">Belum ada foto</Text>
)}
</Box>
<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 ProfileList;

83
src/app/admin/(dashboard)/ppid/profile-ppid/page.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
import Biodata from './biodata/page';
import PengalamanOrganisasi from './pengalaman_organisasi/page';
import RiwayatKarir from './riwayat_karir/page';
@@ -8,6 +8,7 @@ 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';
import ProfileList from './listPage';
function Page() {
@@ -23,15 +24,24 @@ function Page() {
function ProfileCreate() {
const allState = useProxy(stateProfilePPID)
// Initialize data if it doesn't exist
useShallowEffect(() => {
if (!allState.findById.data) {
allState.findById.initialize()
}
}, [])
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()
}
allState.findById.data?.name &&
allState.findById.data?.biodata &&
allState.findById.data?.riwayat &&
allState.findById.data?.pengalaman &&
allState.findById.data?.unggulan
) {
allState.update.save(allState.findById.data)
}
}
return (
@@ -41,8 +51,11 @@ function ProfileCreate() {
<TextInput
label={<Text fw={"bold"}>Nama Perbekel</Text>}
placeholder="masukkan nama perbekel"
value={allState.findById.data?.name || ''}
onChange={(val) => {
allState.profilePPID.create.form.name = val.currentTarget.value
if (allState.findById.data) {
allState.findById.data.name = val.currentTarget.value
}
}}
/>
<Biodata />
@@ -50,53 +63,17 @@ function ProfileCreate() {
<PengalamanOrganisasi />
<ProgramKerjaUnggulan />
<Group>
<Button bg={colors['blue-button']} onClick={submit}>Submit</Button>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={allState.update.loading}
>
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;
export default Page;

12
src/app/admin/(dashboard)/ppid/profile-ppid/pengalaman_organisasi/page.tsx
View File

@@ -3,17 +3,21 @@ 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';
import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
function PengalamanOrganisasi() {
const pengalamanOrganisasiState = useProxy(stateProfilePPID.profilePPID)
const pengalamanOrganisasiState = useProxy(stateProfilePPID)
return (<Box>
<Text fw={"bold"}>Pengalaman Organisasi</Text>
<PPIDEditor
<PPIDTextEditor
key={pengalamanOrganisasiState.findById.data?.id ?? 'new'}
showSubmit={false}
onChange={(val) => {
pengalamanOrganisasiState.create.form.pengalaman = val
if (pengalamanOrganisasiState.findById.data) {
pengalamanOrganisasiState.findById.data.pengalaman = val;
}
}}
initialContent={pengalamanOrganisasiState.findById.data?.pengalaman ?? ''}
/>
</Box>
);

12
src/app/admin/(dashboard)/ppid/profile-ppid/program_kerja_unggulan/page.tsx
View File

@@ -3,17 +3,21 @@ 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';
import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
function ProgramKerjaUnggulan() {
const programKerjaUnggulanState = useProxy(stateProfilePPID.profilePPID)
const programKerjaUnggulanState = useProxy(stateProfilePPID)
return (<Box>
<Text fw={"bold"}>Program Kerja Unggulan</Text>
<PPIDEditor
<PPIDTextEditor
key={programKerjaUnggulanState.findById.data?.id ?? 'new'}
showSubmit={false}
onChange={(val) => {
programKerjaUnggulanState.create.form.unggulan = val
if (programKerjaUnggulanState.findById.data) {
programKerjaUnggulanState.findById.data.unggulan = val;
}
}}
initialContent={programKerjaUnggulanState.findById.data?.unggulan ?? ''}
/>
</Box>
);

13
src/app/admin/(dashboard)/ppid/profile-ppid/riwayat_karir/page.tsx
View File

@@ -7,21 +7,24 @@ 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), {
const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
ssr: false, // disable server side rendering
});
function RiwayatKarir() {
const biodataState = useProxy(stateProfilePPID.profilePPID);
const riwayatKarirState = useProxy(stateProfilePPID);
return (
<Box>
<Text fw={"bold"}>Riwayat Karir</Text>
<PPIDEditor
<PPIDTextEditor
key={riwayatKarirState.findById.data?.id ?? 'new'}
showSubmit={false}
onChange={(val) => {
biodataState.create.form.riwayat = val;
if (riwayatKarirState.findById.data) {
riwayatKarirState.findById.data.riwayat = val;
}
}}
initialContent={riwayatKarirState.findById.data?.riwayat ?? ''}
/>
</Box>
);