QC User & Admin Responsive : Menu Landing Page - Desa
This commit is contained in:
@@ -166,13 +166,18 @@ function EditBerita() {
|
||||
error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
value={formData.deskripsi}
|
||||
onChange={(e) => handleChange("deskripsi", e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) =>
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Upload Gambar */}
|
||||
<Box>
|
||||
|
||||
@@ -80,7 +80,7 @@ function DetailBerita() {
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
|
||||
@@ -131,13 +131,17 @@ export default function CreateBerita() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
required
|
||||
placeholder="Masukkan deskripsi berita"
|
||||
defaultValue={beritaState.berita.create.form.deskripsi}
|
||||
onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
|
||||
/>
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<CreateEditor
|
||||
value={beritaState.berita.create.form.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
beritaState.berita.create.form.deskripsi = htmlContent;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
|
||||
@@ -1,31 +1,11 @@
|
||||
// export function convertYoutubeUrlToEmbed(url: string) {
|
||||
// const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
||||
// return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
|
||||
// }
|
||||
|
||||
export function convertYoutubeUrlToEmbed(url: string) {
|
||||
const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
||||
const videoIdMatch = url.match(
|
||||
/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
|
||||
);
|
||||
return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// (url: string): string | null {
|
||||
// const watchRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/;
|
||||
// const shortRegex = /(?:https?:\/\/)?youtu\.be\/([^?]+)/;
|
||||
|
||||
// const matchWatch = url.match(watchRegex);
|
||||
// const matchShort = url.match(shortRegex);
|
||||
|
||||
// if (matchWatch) {
|
||||
// return `https://www.youtube.com/embed/${matchWatch[1]}`;
|
||||
// }
|
||||
|
||||
// if (matchShort) {
|
||||
// return `https://www.youtube.com/embed/${matchShort[1]}`;
|
||||
// }
|
||||
|
||||
// return null;
|
||||
// }
|
||||
|
||||
}
|
||||
@@ -44,32 +44,40 @@ function EditSuratKeterangan() {
|
||||
const [previewImage2, setPreviewImage2] = useState<string | null>(null);
|
||||
|
||||
// load data awal
|
||||
useEffect(() => {
|
||||
const loadSurat = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
useEffect(() => {
|
||||
const loadSurat = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await stateSurat.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
imageId: data.imageId || '',
|
||||
image2Id: data.image2Id || '',
|
||||
});
|
||||
try {
|
||||
const data = await stateSurat.edit.load(id);
|
||||
if (data) {
|
||||
// merge style -> isi hanya field kosong
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
name: prev.name || data.name || '',
|
||||
deskripsi: prev.deskripsi || data.deskripsi || '',
|
||||
imageId: prev.imageId || data.imageId || '',
|
||||
image2Id: prev.image2Id || data.image2Id || '',
|
||||
}));
|
||||
|
||||
setPreviewImage(data.image?.link || null);
|
||||
setPreviewImage2(data.image2?.link || null);
|
||||
if (data.image?.link && !previewImage) {
|
||||
setPreviewImage(data.image.link);
|
||||
}
|
||||
if (data.image2?.link && !previewImage2) {
|
||||
setPreviewImage2(data.image2.link);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading surat:', error);
|
||||
toast.error('Gagal memuat data surat');
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error loading surat:", error);
|
||||
toast.error("Gagal memuat data surat");
|
||||
}
|
||||
};
|
||||
|
||||
loadSurat();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [params?.id]);
|
||||
|
||||
loadSurat();
|
||||
}, [params?.id, stateSurat.edit]);
|
||||
|
||||
// handler untuk submit
|
||||
const handleSubmit = useCallback(async () => {
|
||||
|
||||
@@ -47,11 +47,11 @@ function EditPotensi() {
|
||||
|
||||
useEffect(() => {
|
||||
potensiDesaState.kategoriPotensi.findMany.load();
|
||||
|
||||
|
||||
const loadPotensi = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
|
||||
try {
|
||||
const data = await potensiState.edit.load(id);
|
||||
if (data) {
|
||||
@@ -62,7 +62,17 @@ function EditPotensi() {
|
||||
content: data.content || "",
|
||||
imageId: data.imageId || "",
|
||||
});
|
||||
|
||||
|
||||
// // merge, bukan replace
|
||||
// setFormData((prev) => ({
|
||||
// ...prev,
|
||||
// name: data.name ?? prev.name,
|
||||
// deskripsi: data.deskripsi ?? prev.deskripsi,
|
||||
// kategoriId: data.kategoriId ?? prev.kategoriId,
|
||||
// content: data.content ?? prev.content,
|
||||
// imageId: data.imageId ?? prev.imageId,
|
||||
// }));
|
||||
|
||||
if (data?.image?.link) {
|
||||
setPreviewImage(data.image.link);
|
||||
}
|
||||
@@ -72,9 +82,10 @@ function EditPotensi() {
|
||||
toast.error("Gagal memuat data potensi");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
loadPotensi();
|
||||
}, [params?.id]);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
@@ -143,13 +154,17 @@ function EditPotensi() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi"
|
||||
value={formData.deskripsi}
|
||||
onChange={(e) => handleChange("deskripsi", e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) =>
|
||||
handleChange("deskripsi", htmlContent)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Select
|
||||
value={formData.kategoriId}
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function DetailPotensi() {
|
||||
potensiState.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/desa/potensi");
|
||||
router.push("/admin/desa/potensi/list-potensi");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -77,7 +77,7 @@ export default function DetailPotensi() {
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
|
||||
@@ -101,13 +101,17 @@ function CreatePotensi() {
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<TextInput
|
||||
defaultValue={potensiState.create.form.deskripsi}
|
||||
onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
|
||||
label="Deskripsi"
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
required
|
||||
/>
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<CreateEditor
|
||||
value={potensiState.create.form.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
potensiState.create.form.deskripsi = htmlContent;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Kategori */}
|
||||
<Select
|
||||
|
||||
@@ -102,20 +102,25 @@ function ListPotensi({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.name}
|
||||
</Text>
|
||||
<Box w={200}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
|
||||
<Box w={200}>
|
||||
<Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Box w={300}>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
truncate
|
||||
fz="sm"
|
||||
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
|
||||
style={{wordBreak: "break-word", whiteSpace: "normal"}}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
</TableTd>
|
||||
|
||||
@@ -18,7 +18,9 @@ function Page() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const [images, setImages] = useState<Array<{ file: File | null; preview: string; label: string }>>([]);
|
||||
const [images, setImages] = useState<
|
||||
Array<{ file: File | null; preview: string; label: string; imageId?: string }>
|
||||
>([]);
|
||||
const [formData, setFormData] = useState({
|
||||
judul: '',
|
||||
deskripsi: '',
|
||||
@@ -55,6 +57,7 @@ function Page() {
|
||||
file: null,
|
||||
preview: img.image.link,
|
||||
label: img.label,
|
||||
imageId: img.image.id, // simpan id lama
|
||||
})));
|
||||
}
|
||||
}
|
||||
@@ -88,25 +91,24 @@ function Page() {
|
||||
// Upload semua gambar baru
|
||||
for (const img of images) {
|
||||
if (!img.file) {
|
||||
// Kalau gambar lama, skip upload
|
||||
if (!img.preview) continue;
|
||||
uploadedImages.push({ imageId: '', label: img.label });
|
||||
if (!img.imageId) continue; // kalau benar2 kosong, skip
|
||||
uploadedImages.push({ imageId: img.imageId, label: img.label });
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
// upload baru
|
||||
const res = await ApiFetch.api.fileStorage.create.post({
|
||||
file: img.file,
|
||||
name: img.file.name,
|
||||
});
|
||||
|
||||
const uploaded = res.data?.data;
|
||||
if (!uploaded?.id) {
|
||||
toast.error("Gagal upload salah satu gambar");
|
||||
return;
|
||||
}
|
||||
|
||||
uploadedImages.push({ imageId: uploaded.id, label: img.label || 'main' });
|
||||
uploadedImages.push({ imageId: uploaded.id, label: img.label || "main" });
|
||||
}
|
||||
|
||||
|
||||
// Update ke global state
|
||||
maskotState.update.updateField("judul", formData.judul);
|
||||
|
||||
@@ -162,7 +162,7 @@ function Page() {
|
||||
style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
|
||||
>
|
||||
<Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
|
||||
Lambang Desa
|
||||
{lambang.judul}
|
||||
</Text>
|
||||
</Paper>
|
||||
</Stack>
|
||||
@@ -216,7 +216,7 @@ function Page() {
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
|
||||
<Stack mt="md" gap="sm">
|
||||
<SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
|
||||
<SimpleGrid cols={{ base: 1, md: 4 }} spacing="md">
|
||||
{maskot.images.map((img, idx) => (
|
||||
<Card withBorder key={idx} p="xs" w={{ base: '100%', md: 180 }}>
|
||||
<Center>
|
||||
|
||||
@@ -75,22 +75,28 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text fw={500} lineClamp={1}>{item.nama}</Text>
|
||||
<Box w={200}>
|
||||
<Text fw={500} lineClamp={1}>{item.nama}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text lineClamp={1}>{item.periode}</Text>
|
||||
<Box w={200}>
|
||||
<Text lineClamp={1}>{item.periode}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
<Box w={200}>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</Box>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
|
||||
Reference in New Issue
Block a user