feat:upload task ta
This commit is contained in:
parent
f3120e4cf8
commit
ede150383d
|
|
@ -172,7 +172,9 @@ const useTableColumns = () => {
|
|||
</DropdownMenuItem>
|
||||
</Link>
|
||||
{roleId == 12 && (
|
||||
<Link href={`/contributor/task-ta/upload-task`}>
|
||||
<Link
|
||||
href={`/contributor/task-ta/upload-task/${row.original.id}`}
|
||||
>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Upload className="w-4 h-4 me-1.5" />
|
||||
Upload Tugas
|
||||
|
|
|
|||
|
|
@ -265,10 +265,7 @@ export default function ExecutiveDashboard() {
|
|||
<Card className="rounded-sm p-3 h-[750px]">
|
||||
<div className="flex flex-row justify-between mx-3">
|
||||
<p className="text-base font-semibold">
|
||||
Heatmap Konten Dengan Interaksi
|
||||
</p>
|
||||
<p className="text-base font-semibold">
|
||||
Heatmap Kategori Dengan Interaksi
|
||||
Heatmap Konten dan Kategori dengan Interaksi
|
||||
</p>
|
||||
</div>
|
||||
<div className="my-5">
|
||||
|
|
|
|||
|
|
@ -948,6 +948,8 @@ export default function FormAudio() {
|
|||
{selectedArticleId && (
|
||||
<Link
|
||||
href={`/contributor/content/audio/update-seo/${selectedArticleId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button
|
||||
className="mb-2"
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import * as z from "zod";
|
|||
import { Upload } from "tus-js-client";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { redirect, useRouter } from "next/navigation";
|
||||
import { redirect, useParams, useRouter } from "next/navigation";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
|
|
@ -57,7 +57,7 @@ import dynamic from "next/dynamic";
|
|||
import { getCsrfToken } from "@/service/auth";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { request } from "http";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
|
||||
interface FileWithPreview extends File {
|
||||
preview: string;
|
||||
|
|
@ -85,6 +85,8 @@ export default function FormImage() {
|
|||
const router = useRouter();
|
||||
const editor = useRef(null);
|
||||
type ImageSchema = z.infer<typeof imageSchema>;
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||
|
|
@ -466,7 +468,7 @@ export default function FormImage() {
|
|||
tags: string;
|
||||
isYoutube: boolean;
|
||||
isInternationalMedia: boolean;
|
||||
attachFromScheduleId?: number; // ✅ Tambahkan properti ini
|
||||
attachFromScheduleId?: number;
|
||||
} = {
|
||||
...data,
|
||||
title: finalTitle,
|
||||
|
|
@ -951,18 +953,18 @@ export default function FormImage() {
|
|||
<div className="pt-3">
|
||||
<div className="flex flex-row justify-between items-center">
|
||||
{selectedArticleId && (
|
||||
<Link
|
||||
href={`/contributor/content/image/update-seo/${selectedArticleId}`}
|
||||
>
|
||||
<Button
|
||||
className="mb-2"
|
||||
size="sm"
|
||||
variant={"outline"}
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
}}
|
||||
>
|
||||
{t("update")}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,8 @@ import {
|
|||
Legend,
|
||||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Link } from "@/i18n/routing";
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend);
|
||||
const imageSchema = z.object({
|
||||
|
|
@ -127,6 +129,7 @@ export default function FormImageSeo() {
|
|||
|
||||
let progressInfo: any = [];
|
||||
let counterUpdateProgress = 0;
|
||||
const t = useTranslations("Form");
|
||||
const [progressList, setProgressList] = useState<any>([]);
|
||||
let uploadPersen = 0;
|
||||
const [isStartUpload, setIsStartUpload] = useState(false);
|
||||
|
|
@ -567,9 +570,10 @@ export default function FormImageSeo() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mx-5 mb-3">
|
||||
<Card>
|
||||
<Tabs defaultValue="content" className="">
|
||||
<Card className="p-0">
|
||||
<Tabs defaultValue="content" className="p-0">
|
||||
<TabsList className="grid w-[300px] grid-cols-2 bg-slate-400 my-3 mx-3 ">
|
||||
<TabsTrigger
|
||||
value="content"
|
||||
|
|
@ -610,7 +614,10 @@ export default function FormImageSeo() {
|
|||
<div className="flex flex-row gap-3 w-full">
|
||||
<div className="w-full">
|
||||
<Label htmlFor="username">Meta Title</Label>
|
||||
<Textarea id="metaTitle" value={articleData?.metaTitle} />
|
||||
<Textarea
|
||||
id="metaTitle"
|
||||
value={articleData?.metaTitle}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<Label htmlFor="username">Meta Description</Label>
|
||||
|
|
@ -750,8 +757,23 @@ export default function FormImageSeo() {
|
|||
</CardContent>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<div className="flex flex-row justify-star gap-3 mx-5">
|
||||
<div className="mb-3">
|
||||
<Link href={"/contributor/content/image"}>
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Button type="submit" color="primary">
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -945,6 +945,8 @@ export default function FormTeks() {
|
|||
{selectedArticleId && (
|
||||
<Link
|
||||
href={`/contributor/content/teks/update-seo/${selectedArticleId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button
|
||||
className="mb-2"
|
||||
|
|
|
|||
|
|
@ -944,6 +944,8 @@ export default function FormVideo() {
|
|||
{selectedArticleId && (
|
||||
<Link
|
||||
href={`/contributor/content/video/update-seo/${selectedArticleId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button
|
||||
className="mb-2"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ import {
|
|||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
|
||||
import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
|
||||
import { AudioRecorder } from "react-audio-voice-recorder";
|
||||
import FileUploader from "@/components/form/shared/file-uploader";
|
||||
import { Upload } from "tus-js-client";
|
||||
|
|
@ -42,6 +42,18 @@ import { getCsrfToken } from "@/service/auth";
|
|||
import { loading } from "@/lib/swal";
|
||||
import { useTranslations } from "next-intl";
|
||||
import dynamic from "next/dynamic";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { addDays, format, setDate } from "date-fns";
|
||||
import { DateRange } from "react-day-picker";
|
||||
import TimePicker from "react-time-picker";
|
||||
import "react-time-picker/dist/TimePicker.css";
|
||||
import "react-clock/dist/Clock.css";
|
||||
|
||||
const taskSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -134,6 +146,9 @@ export default function FormTaskTa() {
|
|||
const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
|
||||
const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
|
||||
const [voiceNoteLink, setVoiceNoteLink] = useState("");
|
||||
const [date, setDate] = React.useState<DateRange | undefined>({
|
||||
from: new Date(2024, 0, 1),
|
||||
});
|
||||
|
||||
const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
|
||||
const [unitSelection, setUnitSelection] = useState({
|
||||
|
|
@ -478,7 +493,7 @@ export default function FormTaskTa() {
|
|||
};
|
||||
|
||||
const upload = new Upload(file, {
|
||||
endpoint: `${process.env.NEXT_PUBLIC_API}/assignment/file/upload`,
|
||||
endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
|
||||
headers: headers,
|
||||
retryDelays: [0, 3000, 6000, 12_000, 24_000],
|
||||
chunkSize: 20_000,
|
||||
|
|
@ -735,6 +750,46 @@ export default function FormTaskTa() {
|
|||
<Label htmlFor="tugas-harian">Tugas Harian</Label>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2 mt-5">
|
||||
<Label className="mr-3 mb-1">Tanggal</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild className="px-0">
|
||||
<Button
|
||||
size="md"
|
||||
id="date"
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
|
||||
!date && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon size={15} className="mr-3" />
|
||||
{date?.from ? (
|
||||
date.to ? (
|
||||
<>
|
||||
{format(date.from, "LLL dd, y")} -{" "}
|
||||
{format(date.to, "LLL dd, y")}
|
||||
</>
|
||||
) : (
|
||||
format(date.from, "LLL dd, y")
|
||||
)
|
||||
) : (
|
||||
<span>Pick a date</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
initialFocus
|
||||
mode="range"
|
||||
defaultMonth={date?.from}
|
||||
selected={date}
|
||||
onSelect={setDate}
|
||||
numberOfMonths={1}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="mt-5 space-y-2">
|
||||
<Label>{t("areas-expertise")}</Label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
|
|
@ -779,27 +834,6 @@ export default function FormTaskTa() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="mt-5">
|
||||
<Label>Broadcast </Label>
|
||||
<RadioGroup
|
||||
value={broadcastType} // Nilai terpilih diambil dari state broadcastType
|
||||
onValueChange={(value) => setBroadcastType(value)} // Mengatur nilai saat radio berubah
|
||||
className="flex flex-wrap gap-3"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="all" id="all" />
|
||||
<Label htmlFor="all">Semua</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="email" id="email" />
|
||||
<Label htmlFor="email">Email Blast</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="whatsapp" id="whatsapp" />
|
||||
<Label htmlFor="whatsapp">WhatsApp Blast</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div> */}
|
||||
<div className="mt-5 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import * as z from "zod";
|
|||
import { Upload } from "tus-js-client";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { redirect, useRouter } from "next/navigation";
|
||||
import { redirect, useParams, useRouter } from "next/navigation";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
|
|
@ -47,7 +47,7 @@ import {
|
|||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { CloudUpload } from "lucide-react";
|
||||
import { CloudUpload, Trash2 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { error, loading } from "@/config/swal";
|
||||
import { Item } from "@radix-ui/react-dropdown-menu";
|
||||
|
|
@ -58,6 +58,10 @@ import { getCsrfToken } from "@/service/auth";
|
|||
import { Link } from "@/i18n/routing";
|
||||
import { request } from "http";
|
||||
import { useTranslations } from "next-intl";
|
||||
import FileUploader from "../shared/file-uploader";
|
||||
import { AudioRecorder } from "react-audio-voice-recorder";
|
||||
import { getTaskTa } from "@/service/task";
|
||||
import { taskDetail } from "./task-ta-form";
|
||||
|
||||
interface FileWithPreview extends File {
|
||||
preview: string;
|
||||
|
|
@ -92,6 +96,8 @@ export default function FormTaskTaNew() {
|
|||
const scheduleId = Cookies.get("scheduleId");
|
||||
const scheduleType = Cookies.get("scheduleType");
|
||||
const roleId = getCookiesDecrypt("urie");
|
||||
const { id } = useParams() as { id: string };
|
||||
console.log(id);
|
||||
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||
|
|
@ -120,6 +126,19 @@ export default function FormTaskTaNew() {
|
|||
const [articleImages, setArticleImages] = useState<string[]>([]);
|
||||
const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
|
||||
const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
|
||||
const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]);
|
||||
const [audioFiles, setAudioFiles] = useState<FileWithPreview[]>([]);
|
||||
const [isImageUploadFinish, setIsImageUploadFinish] = useState(false);
|
||||
const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false);
|
||||
const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
|
||||
const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
|
||||
const [audioFile, setAudioFile] = useState<File | null>(null);
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [links, setLinks] = useState<string[]>([""]);
|
||||
const [timer, setTimer] = useState<number>(120);
|
||||
const [fileTypeId, setFileTypeId] = useState<string>("");
|
||||
|
||||
const [content, setContent] = useState("");
|
||||
|
||||
|
|
@ -131,7 +150,6 @@ export default function FormTaskTaNew() {
|
|||
polres: false,
|
||||
});
|
||||
|
||||
let fileTypeId = "1";
|
||||
let progressInfo: any = [];
|
||||
let counterUpdateProgress = 0;
|
||||
const [progressList, setProgressList] = useState<any>([]);
|
||||
|
|
@ -142,6 +160,8 @@ export default function FormTaskTaNew() {
|
|||
const [files, setFiles] = useState<FileWithPreview[]>([]);
|
||||
const [filesTemp, setFilesTemp] = useState<File[]>([]);
|
||||
const [publishedFor, setPublishedFor] = useState<string[]>([]);
|
||||
const [detail, setDetail] = useState<taskDetail>();
|
||||
const [refresh] = useState(false);
|
||||
|
||||
const options: Option[] = [
|
||||
{ id: "all", label: "SEMUA" },
|
||||
|
|
@ -181,181 +201,42 @@ export default function FormTaskTaNew() {
|
|||
resolver: zodResolver(imageSchema),
|
||||
});
|
||||
|
||||
const doGenerateMainKeyword = async () => {
|
||||
console.log(selectedMainKeyword);
|
||||
if (selectedMainKeyword?.length > 1) {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const titleData = {
|
||||
keyword: selectedMainKeyword,
|
||||
style: selectedWritingStyle,
|
||||
website: "0",
|
||||
connectToWeb: true,
|
||||
lang: selectedLanguage,
|
||||
pointOfView: "None",
|
||||
clientId: "",
|
||||
};
|
||||
console.log("Sending request for title with data:", titleData);
|
||||
const titleRes = await getGenerateTitle(titleData);
|
||||
setTitle(titleRes?.data?.data || "");
|
||||
console.log("Generated title:", titleRes?.data?.data);
|
||||
|
||||
const keywordsData = {
|
||||
keyword: selectedMainKeyword,
|
||||
style: selectedWritingStyle,
|
||||
website: "0",
|
||||
connectToWeb: true,
|
||||
lang: selectedLanguage,
|
||||
pointOfView: "None",
|
||||
clientId: "",
|
||||
};
|
||||
console.log("Sending request for keywords with data:", keywordsData);
|
||||
const keywordsRes = await getGenerateKeywords(keywordsData);
|
||||
setSelectedSEO(keywordsRes?.data?.data || []);
|
||||
console.log("Generated keywords:", keywordsRes?.data?.data);
|
||||
} catch (error) {
|
||||
console.error("Error during generation process:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
} else {
|
||||
console.error("Please provide a valid main keyword.");
|
||||
}
|
||||
const handleLinkChange = (index: number, value: string) => {
|
||||
const updatedLinks = [...links];
|
||||
updatedLinks[index] = value;
|
||||
setLinks(updatedLinks);
|
||||
};
|
||||
|
||||
const doGenerateTitle = async () => {
|
||||
if (selectedMainKeyword?.length > 1) {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const titleData = {
|
||||
keyword: selectedMainKeyword,
|
||||
style: selectedWritingStyle,
|
||||
website: "0",
|
||||
connectToWeb: true,
|
||||
lang: selectedLanguage,
|
||||
pointOfView: "None",
|
||||
clientId: "",
|
||||
};
|
||||
console.log("Sending request for title with data:", titleData);
|
||||
const titleRes = await getGenerateTitle(titleData);
|
||||
setTitle(titleRes?.data?.data || "");
|
||||
console.log("Generated title:", titleRes?.data?.data);
|
||||
} catch (error) {
|
||||
console.error("Error generating title:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
} else {
|
||||
console.error("Please provide a valid main keyword.");
|
||||
}
|
||||
const handleAddRow = () => {
|
||||
setLinks([...links, ""]);
|
||||
};
|
||||
|
||||
const doGenerateKeyword = async () => {
|
||||
if (selectedMainKeyword?.length > 1) {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const keywordsData = {
|
||||
keyword: selectedMainKeyword,
|
||||
style: selectedWritingStyle,
|
||||
website: "0",
|
||||
connectToWeb: true,
|
||||
lang: selectedLanguage,
|
||||
pointOfView: "None",
|
||||
clientId: "",
|
||||
};
|
||||
console.log("Sending request for keywords with data:", keywordsData);
|
||||
const keywordsRes = await getGenerateKeywords(keywordsData);
|
||||
setSelectedSEO(keywordsRes?.data?.data || []);
|
||||
console.log("Generated keywords:", keywordsRes?.data?.data);
|
||||
} catch (error) {
|
||||
console.error("Error generating keywords:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
} else {
|
||||
console.error("Please provide a valid main keyword.");
|
||||
}
|
||||
// Remove a specific link row
|
||||
const handleRemoveRow = (index: number) => {
|
||||
const updatedLinks = links.filter((_: any, i: any) => i !== index);
|
||||
setLinks(updatedLinks);
|
||||
};
|
||||
|
||||
const handleGenerateArtikel = async () => {
|
||||
const request = {
|
||||
advConfig: selectedAdvConfig,
|
||||
style: selectedWritingStyle,
|
||||
website: "None",
|
||||
connectToWeb: true,
|
||||
lang: selectedLanguage,
|
||||
pointOfView: "None",
|
||||
title: title,
|
||||
imageSource: "Web",
|
||||
mainKeyword: selectedMainKeyword,
|
||||
additionalKeywords: selectedSEO,
|
||||
targetCountry: null,
|
||||
articleSize: selectedSize,
|
||||
projectId: 2,
|
||||
createdBy: roleId,
|
||||
clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
|
||||
};
|
||||
const addAudioElement = (blob: Blob) => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const audio = document.createElement("audio");
|
||||
audio.src = url;
|
||||
audio.controls = true;
|
||||
document.body.appendChild(audio);
|
||||
|
||||
const res = await generateDataArticle(request);
|
||||
close();
|
||||
|
||||
if (res?.error) {
|
||||
console.error(res.message);
|
||||
return false;
|
||||
}
|
||||
|
||||
const newArticleId = res?.data?.data?.id;
|
||||
setIsGeneratedArticle(true);
|
||||
|
||||
setArticleIds((prevIds: string[]) => {
|
||||
if (prevIds.length < 3) {
|
||||
return [...prevIds, newArticleId];
|
||||
} else {
|
||||
const updatedIds = [...prevIds];
|
||||
updatedIds[2] = newArticleId;
|
||||
return updatedIds;
|
||||
}
|
||||
});
|
||||
|
||||
Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
|
||||
};
|
||||
|
||||
const handleArticleIdClick = async (id: string) => {
|
||||
setIsLoadingData(true);
|
||||
let retryCount = 0;
|
||||
const maxRetries = 20;
|
||||
|
||||
try {
|
||||
const waitForStatusUpdate = async () => {
|
||||
while (retryCount < maxRetries) {
|
||||
const res = await getDetailArticle(id);
|
||||
const articleData = res?.data?.data;
|
||||
|
||||
if (articleData?.status === 2) {
|
||||
return articleData;
|
||||
}
|
||||
|
||||
retryCount++;
|
||||
await new Promise((resolve) => setTimeout(resolve, 5000));
|
||||
}
|
||||
|
||||
throw new Error("Timeout: Artikel belum selesai diproses.");
|
||||
};
|
||||
const articleData = await waitForStatusUpdate();
|
||||
const cleanArticleBody = articleData?.articleBody?.replace(
|
||||
/<img[^>]*>/g,
|
||||
""
|
||||
// Convert Blob to File and add preview
|
||||
const fileWithPreview: FileWithPreview = Object.assign(
|
||||
new File([blob], "voiceNote.webm", { type: "audio/webm" }),
|
||||
{ preview: url }
|
||||
);
|
||||
const articleImagesData = articleData?.imagesUrl?.split(",");
|
||||
setArticleBody(cleanArticleBody || "");
|
||||
setDetailData(articleData);
|
||||
setSelectedArticleId(id);
|
||||
setArticleImages(articleImagesData || []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching article details:", error);
|
||||
} finally {
|
||||
setIsLoadingData(false);
|
||||
}
|
||||
|
||||
// Add to state
|
||||
setAudioFile(fileWithPreview);
|
||||
setAudioFiles((prev) => [...prev, fileWithPreview]);
|
||||
};
|
||||
|
||||
const handleDeleteAudio = (index: number) => {
|
||||
setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
|
||||
};
|
||||
|
||||
const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
|
|
@ -441,6 +322,20 @@ export default function FormTaskTaNew() {
|
|||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
if (id) {
|
||||
const response = await getTaskTa(id);
|
||||
const details = response?.data?.data;
|
||||
|
||||
setDetail(details);
|
||||
|
||||
// Add more state setting here based on other fields like broadcastType, taskOutput, etc.
|
||||
}
|
||||
}
|
||||
initState();
|
||||
}, [id, refresh]);
|
||||
|
||||
const save = async (data: ImageSchema) => {
|
||||
loading();
|
||||
const finalTags = tags.join(", ");
|
||||
|
|
@ -453,6 +348,7 @@ export default function FormTaskTaNew() {
|
|||
}
|
||||
|
||||
let requestData: {
|
||||
assignmentExpertId: any;
|
||||
title: string;
|
||||
description: string;
|
||||
htmlDescription: string;
|
||||
|
|
@ -469,10 +365,11 @@ export default function FormTaskTaNew() {
|
|||
attachFromScheduleId?: number; // ✅ Tambahkan properti ini
|
||||
} = {
|
||||
...data,
|
||||
assignmentExpertId: detail?.id || null,
|
||||
title: finalTitle,
|
||||
description: finalDescription,
|
||||
htmlDescription: finalDescription,
|
||||
fileTypeId,
|
||||
fileTypeId: fileTypeId,
|
||||
categoryId: selectedCategory,
|
||||
subCategoryId: selectedCategory,
|
||||
uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
|
||||
|
|
@ -498,36 +395,41 @@ export default function FormTaskTaNew() {
|
|||
id = response?.data?.data;
|
||||
|
||||
// Upload Thumbnail
|
||||
const formMedia = new FormData();
|
||||
const thumbnail = files[0];
|
||||
formMedia.append("file", thumbnail);
|
||||
const responseThumbnail = await uploadThumbnail(id, formMedia);
|
||||
if (responseThumbnail?.error == true) {
|
||||
error(responseThumbnail?.message);
|
||||
return false;
|
||||
loading();
|
||||
if (imageFiles?.length == 0) {
|
||||
setIsImageUploadFinish(true);
|
||||
}
|
||||
imageFiles?.map(async (item: any, index: number) => {
|
||||
await uploadResumableFile(index, String(id), item, "1", "0");
|
||||
});
|
||||
|
||||
if (videoFiles?.length == 0) {
|
||||
setIsVideoUploadFinish(true);
|
||||
}
|
||||
videoFiles?.map(async (item: any, index: number) => {
|
||||
await uploadResumableFile(index, String(id), item, "2", "0");
|
||||
});
|
||||
|
||||
// Upload File
|
||||
const progressInfoArr = files.map((item) => ({
|
||||
percentage: 0,
|
||||
fileName: item.name,
|
||||
}));
|
||||
progressInfo = progressInfoArr;
|
||||
setIsStartUpload(true);
|
||||
setProgressList(progressInfoArr);
|
||||
if (textFiles?.length == 0) {
|
||||
setIsTextUploadFinish(true);
|
||||
}
|
||||
textFiles?.map(async (item: any, index: number) => {
|
||||
await uploadResumableFile(index, String(id), item, "3", "0");
|
||||
});
|
||||
|
||||
close();
|
||||
files.map(async (item: any, index: number) => {
|
||||
if (audioFiles?.length == 0) {
|
||||
setIsAudioUploadFinish(true);
|
||||
}
|
||||
audioFiles.map(async (item: FileWithPreview, index: number) => {
|
||||
await uploadResumableFile(
|
||||
index,
|
||||
String(id),
|
||||
item,
|
||||
fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
|
||||
item, // Use .file to access the actual File object
|
||||
"4",
|
||||
"0" // Optional: Replace with actual duration if available
|
||||
);
|
||||
});
|
||||
|
||||
Cookies.remove("idCreate");
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (data: ImageSchema) => {
|
||||
|
|
@ -550,12 +452,10 @@ export default function FormTaskTaNew() {
|
|||
idx: number,
|
||||
id: string,
|
||||
file: any,
|
||||
fileTypeId: string,
|
||||
duration: string
|
||||
) {
|
||||
console.log(idx, id, file, duration);
|
||||
|
||||
// const placements = getPlacement(file.placements);
|
||||
// console.log("Placementttt: : ", placements);
|
||||
console.log(idx, id, file, fileTypeId, duration);
|
||||
|
||||
const resCsrf = await getCsrfToken();
|
||||
const csrfToken = resCsrf?.data?.token;
|
||||
|
|
@ -572,9 +472,10 @@ export default function FormTaskTaNew() {
|
|||
metadata: {
|
||||
mediaid: id,
|
||||
filename: file.name,
|
||||
filetype: file.type,
|
||||
contentType: file.type,
|
||||
fileTypeId: fileTypeId,
|
||||
duration,
|
||||
isWatermark: "true", // hardcode
|
||||
isWatermark: "true",
|
||||
},
|
||||
onBeforeRequest: function (req) {
|
||||
var xhr = req.getUnderlyingObject();
|
||||
|
|
@ -589,25 +490,56 @@ export default function FormTaskTaNew() {
|
|||
bytesAccepted: any,
|
||||
bytesTotal: any
|
||||
) => {
|
||||
const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
|
||||
progressInfo[idx].percentage = uploadPersen;
|
||||
counterUpdateProgress++;
|
||||
console.log(counterUpdateProgress);
|
||||
setProgressList(progressInfo);
|
||||
setCounterProgress(counterUpdateProgress);
|
||||
// const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
|
||||
// progressInfo[idx].percentage = uploadPersen;
|
||||
// counterUpdateProgress++;
|
||||
// console.log(counterUpdateProgress);
|
||||
// setProgressList(progressInfo);
|
||||
// setCounterProgress(counterUpdateProgress);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
uploadPersen = 100;
|
||||
progressInfo[idx].percentage = 100;
|
||||
counterUpdateProgress++;
|
||||
setCounterProgress(counterUpdateProgress);
|
||||
// uploadPersen = 100;
|
||||
// progressInfo[idx].percentage = 100;
|
||||
// counterUpdateProgress++;
|
||||
// setCounterProgress(counterUpdateProgress);
|
||||
successTodo();
|
||||
if (fileTypeId == "1") {
|
||||
setIsImageUploadFinish(true);
|
||||
} else if (fileTypeId == "2") {
|
||||
setIsVideoUploadFinish(true);
|
||||
}
|
||||
if (fileTypeId == "3") {
|
||||
setIsTextUploadFinish(true);
|
||||
}
|
||||
if (fileTypeId == "4") {
|
||||
setIsAudioUploadFinish(true);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
upload.start();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
successTodo();
|
||||
}, [
|
||||
isImageUploadFinish,
|
||||
isVideoUploadFinish,
|
||||
isAudioUploadFinish,
|
||||
isTextUploadFinish,
|
||||
]);
|
||||
|
||||
function successTodo() {
|
||||
if (
|
||||
isImageUploadFinish &&
|
||||
isVideoUploadFinish &&
|
||||
isAudioUploadFinish &&
|
||||
isTextUploadFinish
|
||||
) {
|
||||
successSubmit("/in/contributor/task-ta");
|
||||
}
|
||||
}
|
||||
|
||||
const successSubmit = (redirect: string) => {
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
|
|
@ -620,20 +552,20 @@ export default function FormTaskTaNew() {
|
|||
});
|
||||
};
|
||||
|
||||
function successTodo() {
|
||||
let counter = 0;
|
||||
for (const element of progressInfo) {
|
||||
if (element.percentage == 100) {
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
if (counter == progressInfo.length) {
|
||||
setIsStartUpload(false);
|
||||
// hideProgress();
|
||||
Cookies.remove("idCreate");
|
||||
successSubmit("in/contributor/content/image/");
|
||||
}
|
||||
}
|
||||
// function successTodo() {
|
||||
// let counter = 0;
|
||||
// for (const element of progressInfo) {
|
||||
// if (element.percentage == 100) {
|
||||
// counter++;
|
||||
// }
|
||||
// }
|
||||
// if (counter == progressInfo.length) {
|
||||
// setIsStartUpload(false);
|
||||
// // hideProgress();
|
||||
// Cookies.remove("idCreate");
|
||||
// successSubmit("in/contributor/content/image/");
|
||||
// }
|
||||
// }
|
||||
|
||||
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
|
|
@ -712,6 +644,8 @@ export default function FormTaskTaNew() {
|
|||
}, [title, getValues, setValue]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{detail !== undefined ? (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex flex-col lg:flex-row gap-10">
|
||||
<Card className="w-full lg:w-8/12">
|
||||
|
|
@ -727,28 +661,31 @@ export default function FormTaskTaNew() {
|
|||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
value={field.value}
|
||||
defaultValue={detail?.title}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.title?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.title.message}</p>
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.title.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center gap-3">
|
||||
<div className=" space-y-2 w-3/12">
|
||||
<Label>{t("assigment-type")}</Label>
|
||||
<Select onValueChange={setSelectedTarget}>
|
||||
<Select onValueChange={(val) => setFileTypeId(val)}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Choose" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="2">Audio Visual</SelectItem>
|
||||
<SelectItem value="3">Audio</SelectItem>
|
||||
<SelectItem value="4">Audio</SelectItem>
|
||||
<SelectItem value="1">Image</SelectItem>
|
||||
<SelectItem value="4">Teks</SelectItem>
|
||||
<SelectItem value="3">Teks</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -787,7 +724,9 @@ export default function FormTaskTaNew() {
|
|||
render={({ field: { onChange, value } }) =>
|
||||
isLoadingData ? (
|
||||
<div className="flex justify-center items-center h-40">
|
||||
<p className="text-gray-500">Loading Proses Data...</p>
|
||||
<p className="text-gray-500">
|
||||
Loading Proses Data...
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<CustomEditor
|
||||
|
|
@ -803,47 +742,91 @@ export default function FormTaskTaNew() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
onChange={handleImageChange}
|
||||
/> */}
|
||||
<Fragment>
|
||||
<div {...getRootProps({ className: "dropzone" })}>
|
||||
<input {...getInputProps()} />
|
||||
<div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300 rounded-md py-[52px] flex items-center flex-col">
|
||||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
{t("upload-file-max")}
|
||||
<div className="space-y-2.5 mt-5">
|
||||
<Label htmlFor="attachments">{t("attachment")}</Label>
|
||||
<div className="space-y-3">
|
||||
{fileTypeId === "2" && (
|
||||
<div>
|
||||
<Label>{t("audio-visual")}</Label>
|
||||
<FileUploader
|
||||
accept={{ "mp4/*": [], "mov/*": [] }}
|
||||
maxSize={100}
|
||||
label="Upload file dengan format .mp4 atau .mov."
|
||||
onDrop={(files) => setVideoFiles(files)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{fileTypeId === "1" && (
|
||||
<div className="space-y-2">
|
||||
<Label>{t("image")}</Label>
|
||||
<FileUploader
|
||||
accept={{ "image/*": [] }}
|
||||
maxSize={100}
|
||||
label="Upload file dengan format .png, .jpg, atau .jpeg."
|
||||
onDrop={(files) => setImageFiles(files)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{fileTypeId === "3" && (
|
||||
<div className="space-y-2">
|
||||
<Label>{t("text")}</Label>
|
||||
<FileUploader
|
||||
accept={{ "pdf/*": [] }}
|
||||
maxSize={100}
|
||||
label="Upload file dengan format .pdf."
|
||||
onDrop={(files) => setTextFiles(files)}
|
||||
/>
|
||||
</div>
|
||||
{files.length ? (
|
||||
<Fragment>
|
||||
<div>{fileList}</div>
|
||||
<div className=" flex justify-between gap-2">
|
||||
<div className="flex flex-row items-center gap-3 py-3">
|
||||
<Label>{t("watermark")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
)}
|
||||
|
||||
{fileTypeId === "4" && (
|
||||
<div className="space-y-2">
|
||||
<Label>{t("audio")}</Label>
|
||||
<AudioRecorder
|
||||
onRecordingComplete={addAudioElement}
|
||||
audioTrackConstraints={{
|
||||
noiseSuppression: true,
|
||||
echoCancellation: true,
|
||||
}}
|
||||
downloadOnSavePress={true}
|
||||
downloadFileExtension="webm"
|
||||
/>
|
||||
<FileUploader
|
||||
accept={{ "mp3/*": [], "wav/*": [] }}
|
||||
maxSize={100}
|
||||
label="Upload file dengan format .mp3 atau .wav."
|
||||
onDrop={(files) =>
|
||||
setAudioFiles((prev) => [...prev, ...files])
|
||||
}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
color="destructive"
|
||||
onClick={handleRemoveAllFiles}
|
||||
)}
|
||||
|
||||
{fileTypeId === "4" &&
|
||||
audioFiles?.map((audio: any, idx: any) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex flex-row justify-between items-center"
|
||||
>
|
||||
{t("remove-all")}
|
||||
<p>{t("voice-note")}</p>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => handleDeleteAudio(idx)}
|
||||
size="sm"
|
||||
color="destructive"
|
||||
>
|
||||
X
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</Fragment>
|
||||
))}
|
||||
|
||||
{isRecording && (
|
||||
<p>Recording... {timer} seconds remaining</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -916,7 +899,9 @@ export default function FormTaskTaNew() {
|
|||
.length
|
||||
: publishedFor.includes(option.id)
|
||||
}
|
||||
onCheckedChange={() => handleCheckboxChange(option.id)}
|
||||
onCheckedChange={() =>
|
||||
handleCheckboxChange(option.id)
|
||||
}
|
||||
/>
|
||||
<Label htmlFor={option.id}>{option.label}</Label>
|
||||
</div>
|
||||
|
|
@ -941,5 +926,9 @@ export default function FormTaskTaNew() {
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ const Navbar = () => {
|
|||
Cookies.remove(cookieName);
|
||||
});
|
||||
|
||||
router.push("/");
|
||||
window.location.href = "/";
|
||||
};
|
||||
|
||||
// const profilePicture = Cookies.get("profile_picture");
|
||||
|
|
@ -1498,7 +1498,7 @@ const Navbar = () => {
|
|||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
|
||||
<div>
|
||||
{/* <Link href={"/"}>
|
||||
<Link href={"/"}>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full flex items-center gap-2"
|
||||
|
|
@ -1507,7 +1507,7 @@ const Navbar = () => {
|
|||
<Icon icon="heroicons:power" className="w-4 h-4" />
|
||||
{t("logOut")}
|
||||
</button>
|
||||
</Link> */}
|
||||
</Link>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
|
|
@ -1726,7 +1726,7 @@ const Navbar = () => {
|
|||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
|
||||
<div>
|
||||
{/* <Link href={"/"}>
|
||||
<Link href={"/"}>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full flex items-center gap-2"
|
||||
|
|
@ -1735,7 +1735,7 @@ const Navbar = () => {
|
|||
<Icon icon="heroicons:power" className="w-4 h-4" />
|
||||
{t("logOut")}
|
||||
</button>
|
||||
</Link> */}
|
||||
</Link>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
|
|
|
|||
Loading…
Reference in New Issue