mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:status table content, fix tags

This commit is contained in:
Anang Yusman 2025-01-02 12:39:23 +08:00
parent 7de49ebb08
commit 3122896148
2 changed files with 97 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/[locale]/(protected)/contributor/content/image/components/columns.tsx
View File

@ -102,23 +102,31 @@ const columns: ColumnDef<any>[] = [
}, },
{ {
accessorKey: "isDone", accessorKey: "statusName",
header: "Status", header: "Status",
cell: ({ row }) => { cell: ({ row }) => {
const isDone = row.getValue<boolean>("isDone"); const statusColors: Record<string, string> = {
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 ( return (
<div> <Badge
<Button className={cn(
size="sm" "rounded-full px-5 w-full whitespace-nowrap",
color="success" statusStyles
variant="outline" )}
className={` btn btn-sm ${ >
isDone ? "btn-outline-success" : "btn-outline-primary" {status} {/* Tetap tampilkan nilai asli */}
} pill-btn ml-1`} </Badge>
>
{isDone ? "Selesai" : "Aktif"}
</Button>
</div>
); );
}, },
}, },

145
components/form/content/image-form.tsx
View File

@ -1,5 +1,11 @@
"use client"; "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 { useForm, Controller } from "react-hook-form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -7,7 +13,7 @@ import { Label } from "@/components/ui/label";
import { Card } from "@/components/ui/card"; import { Card } from "@/components/ui/card";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod"; import * as z from "zod";
import { Upload } from 'tus-js-client'; import { Upload } from "tus-js-client";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { redirect, useRouter } from "next/navigation"; import { redirect, useRouter } from "next/navigation";
@ -39,6 +45,12 @@ import {
getGenerateTitle, getGenerateTitle,
} from "@/service/content/ai"; } from "@/service/content/ai";
import { getCookiesDecrypt } from "@/lib/utils"; 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({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -48,12 +60,6 @@ const imageSchema = z.object({
creatorName: z.string().min(1, { message: "Creator diperlukan" }), creatorName: z.string().min(1, { message: "Creator diperlukan" }),
// tags: z.string().min(1, { message: "Judul 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 { interface FileWithPreview extends File {
preview: string; preview: string;
@ -119,7 +125,7 @@ export default function FormImage() {
const [counterProgress, setCounterProgress] = useState(0); const [counterProgress, setCounterProgress] = useState(0);
const [files, setFiles] = useState<FileWithPreview[]>([]); const [files, setFiles] = useState<FileWithPreview[]>([]);
const { getRootProps, getInputProps } = useDropzone({ const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => { onDrop: (acceptedFiles) => {
setFiles(acceptedFiles.map((file) => Object.assign(file))); setFiles(acceptedFiles.map((file) => Object.assign(file)));
@ -290,19 +296,19 @@ export default function FormImage() {
setArticleImages(articleImagesData || []); setArticleImages(articleImagesData || []);
}; };
// const handleKeyDown = (e: any) => { const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
// const newTag = e.target.value.trim(); // Ambil nilai input if (e.key === "Enter" && e.currentTarget.value.trim()) {
// if (e.key === "Enter" && newTag) { e.preventDefault();
// e.preventDefault(); // Hentikan submit form const newTag = e.currentTarget.value.trim();
// if (!tags.includes(newTag)) { if (!tags.includes(newTag)) {
// setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru setTags((prevTags) => [...prevTags, newTag]); // Add new tag
// setValue("tags", ""); // Kosongkan input // setValue("tags", ""); // Clear input field
// } }
// } }
// }; };
const handleRemoveTag = (index: any) => { const handleRemoveTag = (index: number) => {
setTags((prevTags) => prevTags.filter((_, i) => i !== index)); setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
}; };
const handleRemoveImage = (index: number) => { const handleRemoveImage = (index: number) => {
@ -346,6 +352,7 @@ export default function FormImage() {
const save = async (data: ImageSchema) => { const save = async (data: ImageSchema) => {
loading(); loading();
const finalTags = tags.join(", ");
const finalTitle = isSwitchOn ? title : data.title; const finalTitle = isSwitchOn ? title : data.title;
const requestData = { const requestData = {
...data, ...data,
@ -359,32 +366,29 @@ export default function FormImage() {
statusId: "1", statusId: "1",
publishedFor: "6", publishedFor: "6",
creatorName: data.creatorName, creatorName: data.creatorName,
tags: "siap", tags: finalTags,
isYoutube: false, isYoutube: false,
isInternationalMedia: false, isInternationalMedia: false,
}; };
let id = Cookies.get('idCreate'); let id = Cookies.get("idCreate");
if (id == undefined) { if (id == undefined) {
const response = await createMedia(requestData); const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData); console.log("Form Data Submitted:", requestData);
if (response?.error) { if (response?.error) {
MySwal.fire("Error", response?.message, "error"); MySwal.fire("Error", response?.message, "error");
return; return;
} }
Cookies.set('idCreate', response?.data.data, { expires: 1 }); Cookies.set("idCreate", response?.data.data, { expires: 1 });
id = response?.data?.data; id = response?.data?.data;
// Upload Thumbnail // Upload Thumbnail
if (fileTypeId == '1') { if (fileTypeId == "1") {
const formMedia = new FormData(); const formMedia = new FormData();
formMedia.append('file', files[0]); formMedia.append("file", files[0]);
const responseThumbnail = await uploadThumbnail( const responseThumbnail = await uploadThumbnail(formMedia, id);
formMedia,
id,
);
if (responseThumbnail?.error == true) { if (responseThumbnail?.error == true) {
error(responseThumbnail?.message); error(responseThumbnail?.message);
return false; return false;
@ -403,17 +407,16 @@ export default function FormImage() {
close(); close();
// showProgress(); // showProgress();
files.map( async (item: any, index: number) => { files.map(async (item: any, index: number) => {
await uploadResumableFile( await uploadResumableFile(
index, index,
String(id), String(id),
item, 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"); // 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); console.log(idx, id, file, duration);
// const placements = getPlacement(file.placements); // const placements = getPlacement(file.placements);
@ -457,13 +465,17 @@ export default function FormImage() {
filename: file.name, filename: file.name,
filetype: file.type, filetype: file.type,
duration, duration,
isWatermark: 'true', // hardcode isWatermark: "true", // hardcode
}, },
onError: async (e: any) => { onError: async (e: any) => {
console.log('Error upload :', e); console.log("Error upload :", e);
error(e); error(e);
}, },
onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => { onChunkComplete: (
chunkSize: any,
bytesAccepted: any,
bytesTotal: any
) => {
const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100); const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
progressInfo[idx].percentage = uploadPersen; progressInfo[idx].percentage = uploadPersen;
counterUpdateProgress++; counterUpdateProgress++;
@ -493,7 +505,7 @@ export default function FormImage() {
}).then(() => { }).then(() => {
router.push(redirect); router.push(redirect);
}); });
} };
function successTodo() { function successTodo() {
let counter = 0; let counter = 0;
@ -505,7 +517,7 @@ export default function FormImage() {
if (counter == progressInfo.length) { if (counter == progressInfo.length) {
setIsStartUpload(false); setIsStartUpload(false);
// hideProgress(); // hideProgress();
Cookies.remove('idCreate'); Cookies.remove("idCreate");
successSubmit("/in/contributor/content/image/"); successSubmit("/in/contributor/content/image/");
} }
} }
@ -578,7 +590,6 @@ export default function FormImage() {
const handleRemoveAllFiles = () => { const handleRemoveAllFiles = () => {
setFiles([]); setFiles([]);
}; };
return ( return (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
@ -891,7 +902,8 @@ export default function FormImage() {
Tarik file disini atau klik untuk upload. Tarik file disini atau klik untuk upload.
</h4> </h4>
<div className=" text-xs text-muted-foreground"> <div className=" text-xs text-muted-foreground">
( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran maksimal 100mb.) ( Upload file dengan format .jpg, .jpeg, atau .png.
Ukuran maksimal 100mb.)
</div> </div>
</div> </div>
</div> </div>
@ -905,14 +917,16 @@ export default function FormImage() {
<Switch defaultChecked color="primary" id="c2" /> <Switch defaultChecked color="primary" id="c2" />
</div> </div>
</div> </div>
<Button color="destructive" onClick={handleRemoveAllFiles}> <Button
color="destructive"
onClick={handleRemoveAllFiles}
>
Remove All Remove All
</Button> </Button>
</div> </div>
</Fragment> </Fragment>
) : null} ) : null}
</Fragment> </Fragment>
</div> </div>
</div> </div>
@ -945,38 +959,29 @@ export default function FormImage() {
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<Label>Tags</Label> <Label htmlFor="tags">Tags</Label>
{/* <Controller
control={control} <Input
name="tags" type="text"
render={({ field }) => ( id="tags"
<Input placeholder="Add a tag and press Enter"
size="md" onKeyDown={handleAddTag}
type="text" />
value={field.value} <div className="mt-3 ">
onChange={field.onChange}
placeholder="Enter Title"
onKeyDown={handleKeyDown}
/>
)}
/> */}
<div className="text-sm text-red-500">
{tags.length === 0 && "Please add at least one tag."}
</div>
<div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
{tags.map((tag, index) => ( {tags.map((tag, index) => (
<div <span
key={index} key={index}
className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium" className=" px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
> >
<span>{tag}</span> {tag}{" "}
<button <button
className="text-blue-600 hover:text-blue-800 focus:outline-none" type="button"
onClick={() => handleRemoveTag(index)} onClick={() => handleRemoveTag(index)}
className="remove-tag-button"
> >
× ×
</button> </button>
</div> </span>
))} ))}
</div> </div>
</div> </div>