feat:form media

2024-12-09 20:17:22 +07:00 · 2024-12-09 20:17:22 +07:00 · ed18ce7cd6
parent 8bbe1a1fff
commit ed18ce7cd6
5 changed files with 103 additions and 89 deletions
--- a/components/form/content/create-form.tsx
+++ b/components/form/content/create-form.tsx
@ -23,20 +23,20 @@ import JoditEditor from "jodit-react";
 import { register } from "module";
 import { Switch } from "@/components/ui/switch";
 import Cookies from "js-cookie";
+import { createTask } from "@/config/api";
 import {
+  createMedia,
  getTagsBySubCategoryId,
  listEnableCategory,
 } from "@/service/content/content";
-import { data } from "jquery";

 const taskSchema = z.object({
  title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z.string().min(2, {
-    message: "Narasi Penugasan harus lebih dari 2 karakter.",
-  }),
-  categoryId: z.string().min(1, { message: "Judul diperlukan" }),
-  creator: z.string().min(1, { message: "Judul diperlukan" }),
-  tags: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });

 type Category = {
@ -52,17 +52,11 @@ export default function FormImage() {

  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const taskId = Cookies.get("taskId");
-
-  const [assignmentType, setAssignmentType] = useState("mediahub");
-  const [assignmentCategory, setAssignmentCategory] = useState("publication");
-
  const scheduleId = Cookies.get("scheduleId");
  const scheduleType = Cookies.get("scheduleType");

  const [categories, setCategories] = useState<Category[]>([]);
-  const [selectedCategory, setSelectedCategory] = useState<
-    string | undefined
-  >();
+  const [selectedCategory, setSelectedCategory] = useState<any>();
  const [tags, setTags] = useState<any[]>([]);

  const [selectedTarget, setSelectedTarget] = useState("all");
@ -84,16 +78,16 @@ export default function FormImage() {
    resolver: zodResolver(taskSchema),
  });

-  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 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 handleRemoveTag = (index: any) => {
    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(() => {
    async function initState() {
      getCategories();
@ -131,7 +129,7 @@ export default function FormImage() {
        );

        if (findCategory) {
-          setValue("categoryId", findCategory.id);
+          // setValue("categoryId", findCategory.id);
          setSelectedCategory(findCategory.id); // Set the selected category
          const response = await getTagsBySubCategoryId(findCategory.id);
          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 requestData = {
      ...data,
-      assignmentType,
-      assignmentCategory,
-      target: selectedTarget,
-      unitSelection,
+      title: data.title,
+      description: data.description,
+      htmlDescription: data.description,
+      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);

    MySwal.fire({
@ -218,38 +218,18 @@ export default function FormImage() {
              <div className="flex items-center">
                <div className="py-3 w-full">
                  <Label>Kategori</Label>
-                  <Controller
-                    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">
-                          <SelectValue>
-                            {categories.find((cat) => cat.id === field.value)
-                              ?.name || "Pilih"}
-                          </SelectValue>
-                        </SelectTrigger>
-                        <SelectContent>
-                          {categories.map((category) => (
-                            <SelectItem key={category.id} value={category.id}>
-                              {category.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    )}
-                  />
-                  {errors.categoryId?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.categoryId.message}
-                    </p>
-                  )}
+                  <Select onValueChange={setSelectedTarget}>
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {categories.map((category: any) => (
+                        <SelectItem key={category.id} value={category.id}>
+                          {category.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                </div>
              </div>
              <div className="py-3">
@ -355,7 +335,7 @@ export default function FormImage() {
                <Label>Kreator</Label>
                <Controller
                  control={control}
-                  name="creator"
+                  name="creatorName"
                  render={({ field }) => (
                    <Input
                      size="md"
@ -366,16 +346,16 @@ export default function FormImage() {
                    />
                  )}
                />
-                {errors.creator?.message && (
+                {errors.creatorName?.message && (
                  <p className="text-red-400 text-sm">
-                    {errors.creator.message}
+                    {errors.creatorName.message}
                  </p>
                )}
              </div>
            </div>
            <div className="px-3 py-3">
              <Label>Tags</Label>
-              <Controller
+              {/* <Controller
                control={control}
                name="tags"
                render={({ field }) => (
@ -388,7 +368,7 @@ export default function FormImage() {
                    onKeyDown={handleKeyDown}
                  />
                )}
-              />
+              /> */}
              <div className="text-sm text-red-500">
                {tags.length === 0 && "Please add at least one tag."}
              </div>
--- a/components/form/task/task-form.tsx
+++ b/components/form/task/task-form.tsx
@ -44,8 +44,8 @@ export default function FormTask() {
    text: false,
  });

-  const [assignmentType, setAssignmentType] = useState("mediahub");
-  const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  // const [assignmentType, setAssignmentType] = useState("mediahub");
+  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
  const [mainType, setMainType] = useState<number>(1); // untuk Tipe Penugasan
  const [type, setType] = useState<string>("1");
  const [selectedTarget, setSelectedTarget] = useState("all");
@ -74,17 +74,30 @@ export default function FormTask() {
  };

  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 = {
      ...data,
-      assignmentType,
-      assignmentCategory,
+      // assignmentType,
+      // assignmentCategory,
      target: selectedTarget,
      unitSelection,
      assignedToRole: "3",
-      assignmentMainTypeId: 1,
+      assignmentMainTypeId: mainType,
      assignmentPurpose: "1",
      assignmentTypeId: type,
-      fileTypeOutput: taskOutput,
+      fileTypeOutput: selectedOutputs,
      id: null,
      narration: data.naration,
      platformType: "",
--- a/config/api.ts
+++ b/config/api.ts
@ -103,7 +103,7 @@ export async function getAPIInterceptor(url: any) {
    Object.keys(Cookies.get()).forEach((cookieName) => {
      Cookies.remove(cookieName);
    });
-    window.location.href = "/";
+    window.location.href = "/in/auth";
  } else if (response?.status > 300 && response?.status != 401) {
    return {
      error: true,
--- a/service/content/content.ts
+++ b/service/content/content.ts
@ -1,4 +1,9 @@
-import { getAPI, getAPIInterceptor, postAPI } from "@/config/api";
+import {
+  getAPI,
+  getAPIInterceptor,
+  postAPI,
+  postAPIInterceptor,
+} from "@/config/api";
 import {
  httpGetInterceptor,
  httpGetInterceptorWithToken,
@ -17,7 +22,7 @@ export async function listDataImage(
  startDate: 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}`
  );
 }
@ -35,7 +40,7 @@ export async function listDataVideo(
  startDate: 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}`
  );
 }
@ -53,7 +58,7 @@ export async function listDataTeks(
  startDate: 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}`
  );
 }
@ -71,7 +76,7 @@ export async function listDataAudio(
  startDate: 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}`
  );
 }
@ -88,7 +93,7 @@ export async function listSPIT(
 }

 export async function getTagsBySubCategoryId(subCategory: any) {
-  return await httpGetInterceptor(
+  return await getAPIInterceptor(
    `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}`;
  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);
+}
--- a/service/task.ts
+++ b/service/task.ts
@ -2,6 +2,7 @@ import { title } from "process";
 import {
  deleteAPIInterceptor,
  getAPIInterceptor,
+  postAPI,
  postAPIInterceptor,
 } from "../config/api";
 import {
@ -20,9 +21,14 @@ export async function listTask(page: any, limit: any) {
  return getAPIInterceptor(url);
 }

+// export async function createTask(data: any) {
+//   const url = "assignment";
+//   return httpPostInterceptor(url, data);
+// }
+
 export async function createTask(data: any) {
-  const url = "assignment";
-  return httpPostInterceptor(url, data);
+  const pathUrl = "assignment";
+  return postAPIInterceptor(pathUrl, data);
 }

 export async function getTask(id: any) {