Fix UI Admin Menu Pendidikam, Add Menu User & Role
This commit is contained in:
@@ -1,68 +1,119 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IconSchool, IconMapPin, IconBook2 } from '@tabler/icons-react';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: "Tujuan Program",
|
||||
value: "tujuan-program",
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/tujuan-program"
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/tujuan-program",
|
||||
icon: <IconSchool size={18} stroke={1.8} />,
|
||||
tooltip: "Atur tujuan program pendidikan non formal",
|
||||
},
|
||||
{
|
||||
label: "Tempat Kegiatan",
|
||||
value: "tempat-kegiatan",
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan"
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan",
|
||||
icon: <IconMapPin size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola daftar tempat kegiatan",
|
||||
},
|
||||
{
|
||||
label: "Jenis Program yang Diselenggarakan",
|
||||
value: "jenis-program-yang-diselenggarakan",
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan"
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan",
|
||||
icon: <IconBook2 size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat & atur jenis program yang tersedia",
|
||||
},
|
||||
|
||||
];
|
||||
const curentTab = tabs.find(tab => tab.href === pathname)
|
||||
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
|
||||
|
||||
const currentTab = tabs.find(tab => tab.href === pathname);
|
||||
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
const tab = tabs.find(t => t.value === value)
|
||||
const tab = tabs.find(t => t.value === value);
|
||||
if (tab) {
|
||||
router.push(tab.href)
|
||||
router.push(tab.href);
|
||||
}
|
||||
setActiveTab(value)
|
||||
}
|
||||
setActiveTab(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const match = tabs.find(tab => tab.href === pathname)
|
||||
const match = tabs.find(tab => tab.href === pathname);
|
||||
if (match) {
|
||||
setActiveTab(match.value)
|
||||
setActiveTab(match.value);
|
||||
}
|
||||
}, [pathname])
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={3}>Pendidikan Non Formal</Title>
|
||||
<Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
|
||||
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsTab key={i} value={e.value}>{e.label}</TabsTab>
|
||||
<Stack gap="lg">
|
||||
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
|
||||
Pendidikan Non Formal
|
||||
</Title>
|
||||
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, i) => (
|
||||
<Tooltip
|
||||
key={i}
|
||||
label={tab.tooltip}
|
||||
position="bottom"
|
||||
withArrow
|
||||
transitionProps={{ transition: 'pop', duration: 200 }}
|
||||
>
|
||||
<TabsTab
|
||||
value={tab.value}
|
||||
leftSection={tab.icon}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsPanel key={i} value={e.value}>
|
||||
{/* Konten dummy, bisa diganti tergantung routing */}
|
||||
<></>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
key={i}
|
||||
value={tab.value}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default LayoutTabs;
|
||||
export default LayoutTabs;
|
||||
|
||||
@@ -1,83 +1,156 @@
|
||||
'use client'
|
||||
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} 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';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const JenisProgramYangDiselenggarakanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const JenisProgramYangDiselenggarakanTextEditor = dynamic(
|
||||
() =>
|
||||
import('../../_lib/pendidikanNonFormalTextEditor').then(
|
||||
(mod) => mod.PendidikanNonFormalTextEditor
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditJenisProgramYangDiselenggarakan() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(pendidikanNonFormalState.stateJenisProgram)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(pendidikanNonFormalState.stateJenisProgram);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Load data pertama kali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Sync state dengan data hasil fetch
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [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)
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan')
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan'
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data jenis program...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
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 Jenis Program Yang Diselenggarakan</Title>
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
<Stack gap="xs">
|
||||
{/* Back Button + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={22} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Jenis Program Yang Diselenggarakan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<TextInput
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul program"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<JenisProgramYangDiselenggarakanTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +20,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import pendidikanNonFormalState from '../../../_state/pendidikan/pendidikan-non-formal';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Jenis Program Yang Diselenggarakan</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Preview Jenis Program Yang Diselenggarakan
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit')}>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
<Tooltip label="Edit Jenis Program" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,83 +1,158 @@
|
||||
'use client'
|
||||
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} 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';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const TempatKegiatanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const TempatKegiatanTextEditor = dynamic(
|
||||
() =>
|
||||
import('../../_lib/pendidikanNonFormalTextEditor').then(
|
||||
(mod) => mod.PendidikanNonFormalTextEditor
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditTempatKegiatan() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// load data pertama kali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// sync state dengan data hasil fetch
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [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)
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
router.push('/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan')
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan'
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data tempat kegiatan...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
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 Tempat Kegiatan</Title>
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
<Stack gap="xs">
|
||||
{/* Back Button + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={22} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Tempat Kegiatan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<TextInput
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul tempat kegiatan"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">
|
||||
Deskripsi
|
||||
</Text>
|
||||
<TempatKegiatanTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import statePendidikanNonFormal from '../../../_state/pendidikan/pendidikan-non-formal';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(statePendidikanNonFormal.stateTempatKegiatan)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(statePendidikanNonFormal.stateTempatKegiatan);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Tempat Kegiatan</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Preview Tempat Kegiatan
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit')}>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
<Tooltip label="Edit Tempat Kegiatan" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,83 +1,151 @@
|
||||
'use client'
|
||||
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} 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';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const PendidikanNonFormalTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const PendidikanNonFormalTextEditor = dynamic(
|
||||
() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditTujuanProgram() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// load data pertama kali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// sync data hasil fetch ke local state
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [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)
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program')
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data tujuan program...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
<Stack gap="xs">
|
||||
{/* Back Button + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={22} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Tujuan Program
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<TextInput
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul program"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<PendidikanNonFormalTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +20,88 @@ import { useProxy } from 'valtio/utils';
|
||||
import statePendidikanNonFormal from '../../../_state/pendidikan/pendidikan-non-formal';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(statePendidikanNonFormal.stateTujuanPendidikanNonFormal)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(
|
||||
statePendidikanNonFormal.stateTujuanPendidikanNonFormal
|
||||
);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Pendidikan Non Formal</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Pratinjau Pendidikan Non Formal
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit')}>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
<Tooltip label="Edit Tujuan Pendidikan Non Formal" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
Reference in New Issue
Block a user