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

feat:form media

This commit is contained in:
Anang Yusman 2024-12-09 20:17:22 +07:00
parent 8bbe1a1fff
commit ed18ce7cd6
5 changed files with 103 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
components/form/content/create-form.tsx
View File

@ -23,20 +23,20 @@ import JoditEditor from "jodit-react";
import { register } from "module"; import { register } from "module";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { createTask } from "@/config/api";
import { import {
createMedia,
getTagsBySubCategoryId, getTagsBySubCategoryId,
listEnableCategory, listEnableCategory,
} from "@/service/content/content"; } from "@/service/content/content";
import { data } from "jquery";
const taskSchema = z.object({ const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
description: z.string().min(2, { description: z
message: "Narasi Penugasan harus lebih dari 2 karakter.", .string()
}), .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
categoryId: z.string().min(1, { message: "Judul diperlukan" }), creatorName: z.string().min(1, { message: "Creator diperlukan" }),
creator: z.string().min(1, { message: "Judul diperlukan" }), // tags: z.string().min(1, { message: "Judul diperlukan" }),
tags: z.string().min(1, { message: "Judul diperlukan" }),
}); });
type Category = { type Category = {
@ -52,17 +52,11 @@ export default function FormImage() {
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId"); const taskId = Cookies.get("taskId");
const [assignmentType, setAssignmentType] = useState("mediahub");
const [assignmentCategory, setAssignmentCategory] = useState("publication");
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
const scheduleType = Cookies.get("scheduleType"); const scheduleType = Cookies.get("scheduleType");
const [categories, setCategories] = useState<Category[]>([]); const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState< const [selectedCategory, setSelectedCategory] = useState<any>();
string | undefined
>();
const [tags, setTags] = useState<any[]>([]); const [tags, setTags] = useState<any[]>([]);
const [selectedTarget, setSelectedTarget] = useState("all"); const [selectedTarget, setSelectedTarget] = useState("all");
@ -84,16 +78,16 @@ export default function FormImage() {
resolver: zodResolver(taskSchema), resolver: zodResolver(taskSchema),
}); });
const handleKeyDown = (e: any) => { // const handleKeyDown = (e: any) => {
const newTag = e.target.value.trim(); // Ambil nilai input // const newTag = e.target.value.trim(); // Ambil nilai input
if (e.key === "Enter" && newTag) { // if (e.key === "Enter" && newTag) {
e.preventDefault(); // Hentikan submit form // e.preventDefault(); // Hentikan submit form
if (!tags.includes(newTag)) { // if (!tags.includes(newTag)) {
setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru // setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
setValue("tags", ""); // Kosongkan input // setValue("tags", ""); // Kosongkan input
} // }
} // }
}; // };
const handleRemoveTag = (index: any) => { const handleRemoveTag = (index: any) => {
setTags((prevTags) => prevTags.filter((_, i) => i !== index)); setTags((prevTags) => prevTags.filter((_, i) => i !== index));
@ -107,6 +101,10 @@ export default function FormImage() {
} }
}; };
const handleRemoveImage = (index: number) => {
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
};
useEffect(() => { useEffect(() => {
async function initState() { async function initState() {
getCategories(); getCategories();
@ -131,7 +129,7 @@ export default function FormImage() {
); );
if (findCategory) { if (findCategory) {
setValue("categoryId", findCategory.id); // setValue("categoryId", findCategory.id);
setSelectedCategory(findCategory.id); // Set the selected category setSelectedCategory(findCategory.id); // Set the selected category
const response = await getTagsBySubCategoryId(findCategory.id); const response = await getTagsBySubCategoryId(findCategory.id);
setTags(response?.data.data); setTags(response?.data.data);
@ -142,23 +140,25 @@ export default function FormImage() {
} }
}; };
useEffect(() => {
getCategories();
}, []);
const handleRemoveImage = (index: number) => {
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
};
const save = async (data: TaskSchema) => { const save = async (data: TaskSchema) => {
const requestData = { const requestData = {
...data, ...data,
assignmentType, title: data.title,
assignmentCategory, description: data.description,
target: selectedTarget, htmlDescription: data.description,
unitSelection, fileTypeId,
categoryId: selectedTarget,
subCategoryId: selectedTarget,
uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
statusId: "1",
publishedFor: 1,
creatorName: data.creatorName,
tags: "siap",
isYoutube: false,
isInternationalMedia: false,
}; };
const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData); console.log("Form Data Submitted:", requestData);
MySwal.fire({ MySwal.fire({
@ -218,38 +218,18 @@ export default function FormImage() {
<div className="flex items-center"> <div className="flex items-center">
<div className="py-3 w-full"> <div className="py-3 w-full">
<Label>Kategori</Label> <Label>Kategori</Label>
<Controller <Select onValueChange={setSelectedTarget}>
name="categoryId"
control={control}
render={({ field }) => (
<Select
value={field.value} // Pastikan nilai berasal dari form state
onValueChange={(value) => {
setSelectedCategory(value); // Perbarui state lokal
field.onChange(value); // Perbarui form state
}}
>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue> <SelectValue placeholder="Pilih" />
{categories.find((cat) => cat.id === field.value)
?.name || "Pilih"}
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{categories.map((category) => ( {categories.map((category: any) => (
<SelectItem key={category.id} value={category.id}> <SelectItem key={category.id} value={category.id}>
{category.name} {category.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
)}
/>
{errors.categoryId?.message && (
<p className="text-red-400 text-sm">
{errors.categoryId.message}
</p>
)}
</div> </div>
</div> </div>
<div className="py-3"> <div className="py-3">
@ -355,7 +335,7 @@ export default function FormImage() {
<Label>Kreator</Label> <Label>Kreator</Label>
<Controller <Controller
control={control} control={control}
name="creator" name="creatorName"
render={({ field }) => ( render={({ field }) => (
<Input <Input
size="md" size="md"
@ -366,16 +346,16 @@ export default function FormImage() {
/> />
)} )}
/> />
{errors.creator?.message && ( {errors.creatorName?.message && (
<p className="text-red-400 text-sm"> <p className="text-red-400 text-sm">
{errors.creator.message} {errors.creatorName.message}
</p> </p>
)} )}
</div> </div>
</div> </div>
<div className="px-3 py-3"> <div className="px-3 py-3">
<Label>Tags</Label> <Label>Tags</Label>
<Controller {/* <Controller
control={control} control={control}
name="tags" name="tags"
render={({ field }) => ( render={({ field }) => (
@ -388,7 +368,7 @@ export default function FormImage() {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
/> />
)} )}
/> /> */}
<div className="text-sm text-red-500"> <div className="text-sm text-red-500">
{tags.length === 0 && "Please add at least one tag."} {tags.length === 0 && "Please add at least one tag."}
</div> </div>

25
components/form/task/task-form.tsx
View File

@ -44,8 +44,8 @@ export default function FormTask() {
text: false, text: false,
}); });
const [assignmentType, setAssignmentType] = useState("mediahub"); // const [assignmentType, setAssignmentType] = useState("mediahub");
const [assignmentCategory, setAssignmentCategory] = useState("publication"); // const [assignmentCategory, setAssignmentCategory] = useState("publication");
const [mainType, setMainType] = useState<number>(1); // untuk Tipe Penugasan const [mainType, setMainType] = useState<number>(1); // untuk Tipe Penugasan
const [type, setType] = useState<string>("1"); const [type, setType] = useState<string>("1");
const [selectedTarget, setSelectedTarget] = useState("all"); const [selectedTarget, setSelectedTarget] = useState("all");
@ -74,17 +74,30 @@ export default function FormTask() {
}; };
const save = async (data: TaskSchema) => { const save = async (data: TaskSchema) => {
const fileTypeMapping = {
all: "1",
video: "2",
audio: "3",
image: "4",
text: "5",
};
const selectedOutputs = Object.keys(taskOutput)
.filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
.map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
.join(",");
const requestData = { const requestData = {
...data, ...data,
assignmentType, // assignmentType,
assignmentCategory, // assignmentCategory,
target: selectedTarget, target: selectedTarget,
unitSelection, unitSelection,
assignedToRole: "3", assignedToRole: "3",
assignmentMainTypeId: 1, assignmentMainTypeId: mainType,
assignmentPurpose: "1", assignmentPurpose: "1",
assignmentTypeId: type, assignmentTypeId: type,
fileTypeOutput: taskOutput, fileTypeOutput: selectedOutputs,
id: null, id: null,
narration: data.naration, narration: data.naration,
platformType: "", platformType: "",

2
config/api.ts
View File

@ -103,7 +103,7 @@ export async function getAPIInterceptor(url: any) {
Object.keys(Cookies.get()).forEach((cookieName) => { Object.keys(Cookies.get()).forEach((cookieName) => {
Cookies.remove(cookieName); Cookies.remove(cookieName);
}); });
window.location.href = "/"; window.location.href = "/in/auth";
} else if (response?.status > 300 && response?.status != 401) { } else if (response?.status > 300 && response?.status != 401) {
return { return {
error: true, error: true,

27
service/content/content.ts
View File

@ -1,4 +1,9 @@
import { getAPI, getAPIInterceptor, postAPI } from "@/config/api"; import {
getAPI,
getAPIInterceptor,
postAPI,
postAPIInterceptor,
} from "@/config/api";
import { import {
httpGetInterceptor, httpGetInterceptor,
httpGetInterceptorWithToken, httpGetInterceptorWithToken,
@ -17,7 +22,7 @@ export async function listDataImage(
startDate: any, startDate: any,
endDate: any endDate: any
) { ) {
return await httpGetInterceptor( return await getAPIInterceptor(
`media/list?enablePage=0&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}` `media/list?enablePage=0&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}`
); );
} }
@ -35,7 +40,7 @@ export async function listDataVideo(
startDate: any, startDate: any,
endDate: any endDate: any
) { ) {
return await httpGetInterceptor( return await getAPIInterceptor(
`media/list?enablePage=0&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=2&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}` `media/list?enablePage=0&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=2&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}`
); );
} }
@ -53,7 +58,7 @@ export async function listDataTeks(
startDate: any, startDate: any,
endDate: any endDate: any
) { ) {
return await httpGetInterceptor( return await getAPIInterceptor(
`media/list?enablePage=0&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=3&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}` `media/list?enablePage=0&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=3&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}`
); );
} }
@ -71,7 +76,7 @@ export async function listDataAudio(
startDate: any, startDate: any,
endDate: any endDate: any
) { ) {
return await httpGetInterceptor( return await getAPIInterceptor(
`media/list?enablePage=0&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=4&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}` `media/list?enablePage=0&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=4&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}`
); );
} }
@ -88,7 +93,7 @@ export async function listSPIT(
} }
export async function getTagsBySubCategoryId(subCategory: any) { export async function getTagsBySubCategoryId(subCategory: any) {
return await httpGetInterceptor( return await getAPIInterceptor(
`media/tags/list?subCategoryId=${subCategory}` `media/tags/list?subCategoryId=${subCategory}`
); );
} }
@ -97,3 +102,13 @@ export async function listEnableCategory(type: any) {
const url = `media/categories/list/enable?enablePage=0&sort=desc&sortBy=id&type=${type}`; const url = `media/categories/list/enable?enablePage=0&sort=desc&sortBy=id&type=${type}`;
return getAPIInterceptor(url); return getAPIInterceptor(url);
} }
export async function getTags() {
const url = "media/tags/list";
return getAPIInterceptor(url);
}
export async function createMedia(data: any) {
const url = "media";
return postAPIInterceptor(url, data);
}

10
service/task.ts
View File

@ -2,6 +2,7 @@ import { title } from "process";
import { import {
deleteAPIInterceptor, deleteAPIInterceptor,
getAPIInterceptor, getAPIInterceptor,
postAPI,
postAPIInterceptor, postAPIInterceptor,
} from "../config/api"; } from "../config/api";
import { import {
@ -20,9 +21,14 @@ export async function listTask(page: any, limit: any) {
return getAPIInterceptor(url); return getAPIInterceptor(url);
} }
// export async function createTask(data: any) {
// const url = "assignment";
// return httpPostInterceptor(url, data);
// }
export async function createTask(data: any) { export async function createTask(data: any) {
const url = "assignment"; const pathUrl = "assignment";
return httpPostInterceptor(url, data); return postAPIInterceptor(pathUrl, data);
} }
export async function getTask(id: any) { export async function getTask(id: any) {