From 3122896148cf6625a8077dd07425c80f97672b9e Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Thu, 2 Jan 2025 12:39:23 +0800 Subject: [PATCH] feat:status table content, fix tags --- .../content/image/components/columns.tsx | 36 +++-- components/form/content/image-form.tsx | 145 +++++++++--------- 2 files changed, 97 insertions(+), 84 deletions(-) diff --git a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx index 3704bc4b..d6b0328c 100644 --- a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx @@ -102,23 +102,31 @@ const columns: ColumnDef[] = [ }, { - accessorKey: "isDone", + accessorKey: "statusName", header: "Status", cell: ({ row }) => { - const isDone = row.getValue("isDone"); + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", + }; + + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil + + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; + return ( -
- -
+ + {status} {/* Tetap tampilkan nilai asli */} + ); }, }, diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx index 998cf17f..09cf3cb5 100644 --- a/components/form/content/image-form.tsx +++ b/components/form/content/image-form.tsx @@ -1,5 +1,11 @@ "use client"; -import React, { ChangeEvent, useEffect, useRef, Fragment, useState } from "react"; +import React, { + ChangeEvent, + useEffect, + useRef, + Fragment, + useState, +} from "react"; import { useForm, Controller } from "react-hook-form"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; @@ -7,7 +13,7 @@ import { Label } from "@/components/ui/label"; import { Card } from "@/components/ui/card"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; -import { Upload } from 'tus-js-client'; +import { Upload } from "tus-js-client"; import Swal from "sweetalert2"; import withReactContent from "sweetalert2-react-content"; import { redirect, useRouter } from "next/navigation"; @@ -39,6 +45,12 @@ import { getGenerateTitle, } from "@/service/content/ai"; import { getCookiesDecrypt } from "@/lib/utils"; +import { useDropzone } from "react-dropzone"; +import { Icon } from "@iconify/react"; +import { CloudUpload } from "lucide-react"; +import Image from "next/image"; +import { error, loading } from "@/config/swal"; +import { Item } from "@radix-ui/react-dropdown-menu"; const imageSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), @@ -48,12 +60,6 @@ const imageSchema = z.object({ creatorName: z.string().min(1, { message: "Creator diperlukan" }), // tags: z.string().min(1, { message: "Judul diperlukan" }), }); -import { useDropzone } from "react-dropzone"; -import { Icon } from "@iconify/react"; -import { CloudUpload } from "lucide-react"; -import Image from "next/image"; -import { error, loading } from "@/config/swal"; -import { Item } from "@radix-ui/react-dropdown-menu"; interface FileWithPreview extends File { preview: string; @@ -119,7 +125,7 @@ export default function FormImage() { const [counterProgress, setCounterProgress] = useState(0); const [files, setFiles] = useState([]); - + const { getRootProps, getInputProps } = useDropzone({ onDrop: (acceptedFiles) => { setFiles(acceptedFiles.map((file) => Object.assign(file))); @@ -290,19 +296,19 @@ export default function FormImage() { setArticleImages(articleImagesData || []); }; - // const handleKeyDown = (e: any) => { - // const newTag = e.target.value.trim(); // Ambil nilai input - // if (e.key === "Enter" && newTag) { - // e.preventDefault(); // Hentikan submit form - // if (!tags.includes(newTag)) { - // setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru - // setValue("tags", ""); // Kosongkan input - // } - // } - // }; + const handleAddTag = (e: React.KeyboardEvent) => { + if (e.key === "Enter" && e.currentTarget.value.trim()) { + e.preventDefault(); + const newTag = e.currentTarget.value.trim(); + if (!tags.includes(newTag)) { + setTags((prevTags) => [...prevTags, newTag]); // Add new tag + // setValue("tags", ""); // Clear input field + } + } + }; - const handleRemoveTag = (index: any) => { - setTags((prevTags) => prevTags.filter((_, i) => i !== index)); + const handleRemoveTag = (index: number) => { + setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag }; const handleRemoveImage = (index: number) => { @@ -346,6 +352,7 @@ export default function FormImage() { const save = async (data: ImageSchema) => { loading(); + const finalTags = tags.join(", "); const finalTitle = isSwitchOn ? title : data.title; const requestData = { ...data, @@ -359,32 +366,29 @@ export default function FormImage() { statusId: "1", publishedFor: "6", creatorName: data.creatorName, - tags: "siap", + tags: finalTags, isYoutube: false, isInternationalMedia: false, }; - - let id = Cookies.get('idCreate'); + + let id = Cookies.get("idCreate"); if (id == undefined) { const response = await createMedia(requestData); console.log("Form Data Submitted:", requestData); - + if (response?.error) { MySwal.fire("Error", response?.message, "error"); return; } - Cookies.set('idCreate', response?.data.data, { expires: 1 }); + Cookies.set("idCreate", response?.data.data, { expires: 1 }); id = response?.data?.data; // Upload Thumbnail - if (fileTypeId == '1') { + if (fileTypeId == "1") { const formMedia = new FormData(); - formMedia.append('file', files[0]); - const responseThumbnail = await uploadThumbnail( - formMedia, - id, - ); + formMedia.append("file", files[0]); + const responseThumbnail = await uploadThumbnail(formMedia, id); if (responseThumbnail?.error == true) { error(responseThumbnail?.message); return false; @@ -403,17 +407,16 @@ export default function FormImage() { close(); // showProgress(); - files.map( async (item: any, index: number) => { + files.map(async (item: any, index: number) => { await uploadResumableFile( index, String(id), item, - fileTypeId == '2' || fileTypeId == '4' ? item.duration : '0', + fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0" ); }); - - Cookies.remove('idCreate'); + Cookies.remove("idCreate"); // MySwal.fire("Sukses", "Data berhasil disimpan.", "success"); }; @@ -442,7 +445,12 @@ export default function FormImage() { }); }; - async function uploadResumableFile(idx: number, id: string, file: any, duration: string) { + async function uploadResumableFile( + idx: number, + id: string, + file: any, + duration: string + ) { console.log(idx, id, file, duration); // const placements = getPlacement(file.placements); @@ -457,13 +465,17 @@ export default function FormImage() { filename: file.name, filetype: file.type, duration, - isWatermark: 'true', // hardcode + isWatermark: "true", // hardcode }, onError: async (e: any) => { - console.log('Error upload :', e); + console.log("Error upload :", e); error(e); }, - onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => { + onChunkComplete: ( + chunkSize: any, + bytesAccepted: any, + bytesTotal: any + ) => { const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100); progressInfo[idx].percentage = uploadPersen; counterUpdateProgress++; @@ -493,7 +505,7 @@ export default function FormImage() { }).then(() => { router.push(redirect); }); - } + }; function successTodo() { let counter = 0; @@ -505,7 +517,7 @@ export default function FormImage() { if (counter == progressInfo.length) { setIsStartUpload(false); // hideProgress(); - Cookies.remove('idCreate'); + Cookies.remove("idCreate"); successSubmit("/in/contributor/content/image/"); } } @@ -578,7 +590,6 @@ export default function FormImage() { const handleRemoveAllFiles = () => { setFiles([]); }; - return (
@@ -891,7 +902,8 @@ export default function FormImage() { Tarik file disini atau klik untuk upload.
- ( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran maksimal 100mb.) + ( Upload file dengan format .jpg, .jpeg, atau .png. + Ukuran maksimal 100mb.)
@@ -905,14 +917,16 @@ export default function FormImage() { - ) : null} - @@ -945,38 +959,29 @@ export default function FormImage() {
- - {/* ( - - )} - /> */} -
- {tags.length === 0 && "Please add at least one tag."} -
-
+ + + +
{tags.map((tag, index) => ( -
- {tag} + {tag}{" "} -
+ ))}