Fix QC Kak Inno Admin, Fix QC Keano UI User, Fix QC Pak jun tabel apbdes

2025-11-12 17:42:31 +08:00
parent 417a8937f5
commit 9622eb5a9a
354 changed files with 11444 additions and 4012 deletions
--- a/src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx
@@ -4,15 +4,17 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import {
+  ActionIcon,
  Box,
  Button,
  Group,
  Paper,
  Stack,
  TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { IconArrowBack, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -24,6 +26,14 @@ function EditVideo() {
  const videoState = useProxy(stateGallery.video);
  const params = useParams();

+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    name: "",
+    deskripsi: "",
+    linkVideo: "",
+  });
+
  const [formData, setFormData] = useState({
    name: '',
    deskripsi: '',
@@ -44,6 +54,11 @@ function EditVideo() {
            deskripsi: data.deskripsi ?? '',
            linkVideo: data.linkVideo ?? '',
          });
+          setOriginalData({
+            name: data.name ?? '',
+            deskripsi: data.deskripsi ?? '',
+            linkVideo: data.linkVideo ?? '',
+          });
        }
      } catch (error) {
        console.error('Error loading video:', error);
@@ -61,25 +76,42 @@ function EditVideo() {
    []
  );

-  const handleSubmit = async () => {
-    const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
-    if (!converted) {
-      toast.error("Link YouTube tidak valid. Pastikan formatnya benar.");
-      return;
-    }
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      deskripsi: originalData.deskripsi,
+      linkVideo: originalData.linkVideo,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };

+  const handleSubmit = async () => {
    try {
-      videoState.update.form = {
-        name: formData.name,
-        deskripsi: formData.deskripsi,
-        linkVideo: formData.linkVideo,
-      };
-      await videoState.update.update();
-      toast.success('Video berhasil diperbarui!');
-      router.push('/admin/desa/gallery/video');
+      setIsSubmitting(true);
+      const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
+      if (!converted) {
+        toast.error("Link YouTube tidak valid. Pastikan formatnya benar.");
+        return;
+      }
+
+      try {
+        videoState.update.form = {
+          name: formData.name,
+          deskripsi: formData.deskripsi,
+          linkVideo: formData.linkVideo,
+        };
+        await videoState.update.update();
+        toast.success('Video berhasil diperbarui!');
+        router.push('/admin/desa/gallery/video');
+      } catch (error) {
+        console.error('Error updating video:', error);
+        toast.error('Terjadi kesalahan saat memperbarui video');
+      }
    } catch (error) {
      console.error('Error updating video:', error);
      toast.error('Terjadi kesalahan saat memperbarui video');
+    } finally {
+      setIsSubmitting(false);
    }
  };

@@ -88,14 +120,14 @@ function EditVideo() {
  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
      <Group mb="md">
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
        <Title order={4} ml="sm" c="dark">
          Edit Video
        </Title>
@@ -127,7 +159,7 @@ function EditVideo() {
              required
            />
            {embedLink && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+              <Box mt="sm" pos="relative" style={{ display: 'flex', justifyContent: 'center' }}>
                <iframe
                  className="rounded"
                  width="100%"
@@ -135,7 +167,27 @@ function EditVideo() {
                  src={embedLink}
                  title="Preview Video"
                  allowFullScreen
-                ></iframe>
+                />
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setFormData({
+                      ...formData,
+                      linkVideo: '',
+                    });
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
              </Box>
            )}
          </Box>
@@ -151,6 +203,17 @@ function EditVideo() {
          </Box>

          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
            <Button
              onClick={handleSubmit}
              radius="md"
@@ -161,7 +224,7 @@ function EditVideo() {
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
            >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
            </Button>
          </Group>
        </Stack>
--- a/src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx
@@ -3,6 +3,7 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import {
+  ActionIcon,
  Box,
  Button,
  Group,
@@ -10,9 +11,10 @@ import {
  Stack,
  Text,
  TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { IconArrowBack, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -24,6 +26,7 @@ function CreateVideo() {
  const router = useRouter();
  const [link, setLink] = useState('');
  const embedLink = convertYoutubeUrlToEmbed(link);
+  const [isSubmitting, setIsSubmitting] = useState(false);

  const resetForm = () => {
    videoState.create.form = {
@@ -35,29 +38,37 @@ function CreateVideo() {
  };

  const handleSubmit = async () => {
-    if (!embedLink) {
-      toast.error('Link YouTube tidak valid. Pastikan formatnya benar.');
-      return;
-    }
+    try {
+      setIsSubmitting(true);
+      if (!embedLink) {
+        toast.error('Link YouTube tidak valid. Pastikan formatnya benar.');
+        return;
+      }

-    videoState.create.form.linkVideo = embedLink;
-    await videoState.create.create();
-    resetForm();
-    router.push('/admin/desa/gallery/video');
+      videoState.create.form.linkVideo = embedLink;
+      await videoState.create.create();
+      resetForm();
+      router.push('/admin/desa/gallery/video');
+    } catch (error) {
+      console.error("Error creating video:", error);
+      toast.error("Terjadi kesalahan saat menambahkan video");
+    } finally {
+      setIsSubmitting(false);
+    }
  };

  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
      {/* Header Back Button + Title */}
      <Group mb="md">
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
        <Title order={4} ml="sm" c="dark">
          Tambah Video
        </Title>
@@ -77,7 +88,7 @@ function CreateVideo() {
          <TextInput
            label="Judul Video"
            placeholder="Masukkan judul video"
-            defaultValue={videoState.create.form.name}
+            value={videoState.create.form.name}
            onChange={(e) => {
              videoState.create.form.name = e.currentTarget.value;
            }}
@@ -88,14 +99,14 @@ function CreateVideo() {
          <TextInput
            label="Link Video YouTube"
            placeholder="https://www.youtube.com/watch?v=abc123"
-            defaultValue={link}
+            value={link}
            onChange={(e) => setLink(e.currentTarget.value)}
            required
          />

          {/* Preview Video */}
          {embedLink && (
-            <Box mt="sm">
+            <Box mt="sm" pos="relative">
              <iframe
                style={{
                  borderRadius: 10,
@@ -106,7 +117,24 @@ function CreateVideo() {
                src={embedLink}
                title="Preview Video"
                allowFullScreen
-              ></iframe>
+              />
+              <ActionIcon
+                variant="filled"
+                color="red"
+                radius="xl"
+                size="sm"
+                pos="absolute"
+                top={5}
+                right={5}
+                onClick={() => {
+                  setLink('');
+                }}
+                style={{
+                  boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                }}
+              >
+                <IconX size={14} />
+              </ActionIcon>
            </Box>
          )}

@@ -125,6 +153,17 @@ function CreateVideo() {

          {/* Button Submit */}
          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
            <Button
              onClick={handleSubmit}
              radius="md"
@@ -135,7 +174,7 @@ function CreateVideo() {
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
            >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
            </Button>
          </Group>
        </Stack>