feat:status table content, fix tags
This commit is contained in:
parent
7de49ebb08
commit
3122896148
|
|
@ -102,23 +102,31 @@ const columns: ColumnDef<any>[] = [
|
|||
},
|
||||
|
||||
{
|
||||
accessorKey: "isDone",
|
||||
accessorKey: "statusName",
|
||||
header: "Status",
|
||||
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 (
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
color="success"
|
||||
variant="outline"
|
||||
className={` btn btn-sm ${
|
||||
isDone ? "btn-outline-success" : "btn-outline-primary"
|
||||
} pill-btn ml-1`}
|
||||
>
|
||||
{isDone ? "Selesai" : "Aktif"}
|
||||
</Button>
|
||||
</div>
|
||||
<Badge
|
||||
className={cn(
|
||||
"rounded-full px-5 w-full whitespace-nowrap",
|
||||
statusStyles
|
||||
)}
|
||||
>
|
||||
{status} {/* Tetap tampilkan nilai asli */}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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<FileWithPreview[]>([]);
|
||||
|
||||
|
||||
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<HTMLInputElement>) => {
|
||||
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 (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
|
|
@ -891,7 +902,8 @@ export default function FormImage() {
|
|||
Tarik file disini atau klik untuk upload.
|
||||
</h4>
|
||||
<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>
|
||||
|
|
@ -905,14 +917,16 @@ export default function FormImage() {
|
|||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
</div>
|
||||
<Button color="destructive" onClick={handleRemoveAllFiles}>
|
||||
<Button
|
||||
color="destructive"
|
||||
onClick={handleRemoveAllFiles}
|
||||
>
|
||||
Remove All
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</Fragment>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -945,38 +959,29 @@ export default function FormImage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<Label>Tags</Label>
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="tags"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
value={field.value}
|
||||
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">
|
||||
<Label htmlFor="tags">Tags</Label>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
id="tags"
|
||||
placeholder="Add a tag and press Enter"
|
||||
onKeyDown={handleAddTag}
|
||||
/>
|
||||
<div className="mt-3 ">
|
||||
{tags.map((tag, index) => (
|
||||
<div
|
||||
<span
|
||||
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
|
||||
className="text-blue-600 hover:text-blue-800 focus:outline-none"
|
||||
type="button"
|
||||
onClick={() => handleRemoveTag(index)}
|
||||
className="remove-tag-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue