#Job admin

- Tampilan user done
- Tampilan admin done
git commit -m

src/app_modules/job/create/TextEdit.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Center, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import dynamic from "next/dynamic";
+import React, { useState } from "react";
+const ReactQuill = dynamic(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+import "react-quill/dist/quill.snow.css";
+
+export default function Demo() {
+  const [value, setValue] = useState("");
+  const [udah, setUdah] = useState(false);
+
+  // useShallowEffect(() => {
+  //   if (window && window.document) setUdah(true);
+  // }, []);
+
+  // if (!udah) return <><Center></Center></>;
+  return (
+    <Stack>
+      <ReactQuill
+        defaultValue={`<h2 ">Judul Lowongan Kerja</h2>
+          <p "><br></p>
+          <p><strong>Syarat &amp; Ketentuan :</strong></p>
+          <ol>
+          <li>Minimal pendidika SMA / Sederajat</li>
+          <li>Pasif berbahasa inggris </li>
+          <li>Dll,.</li>
+          </ol>
+          <p></br></p>
+          <p><strong>Deskripsi :</strong></p>
+          <p>Jika berminat dapat menghubungi WA berikut</p>
+          <p>+6281 xxx xxx xx</p>
+          <p>Kirim CV anda melalui email berikut</p>
+          <p>@test-hipmi.com</p>
+          <p>Atau kunjungi website kami:</p>
+          <p><a href="https://test-hipmi.wibudev.com/" rel="noopener noreferrer" target="_blank">https://test-hipmi.wibudev.com/</a></p>
+          `}
+        modules={{
+          toolbar: [
+            [{ header: [1, 2, 3, 4, 5, 6, false] }],
+            ["bold", "italic", "underline", "link"],
+            // [{ align: [] }],
+            [{ list: "ordered" }, { list: "bullet" }],
+
+            ["clean"],
+          ],
+        }}
+        theme="snow"
+        onChange={setValue}
+      />
+      {/* {value}
+      <div dangerouslySetInnerHTML={{ __html: value }} /> */}
+    </Stack>
+  );
+}

src/app_modules/job/create/view.tsx

@@ -6,14 +6,18 @@ import {
   Box,
   Button,
   Center,
+  FileButton,
   Flex,
+  Group,
   Image,
+  Loader,
+  Paper,
   Stack,
   Text,
   TextInput,
   Textarea,
 } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
+import { IconCamera, IconUpload } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -21,78 +25,247 @@ import { useState } from "react";
 import { gs_job_hot_menu, gs_job_status } from "../global_state";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 
+import "react-quill/dist/quill.snow.css";
+import dynamic from "next/dynamic";
+import { useShallowEffect, useToggle } from "@mantine/hooks";
+import { Job_funCreate } from "../fun/create/fun_create";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { MODEL_JOB } from "../model/interface";
+import toast from "react-simple-toasts";
+import ComponentJob_NotedBox from "../component/detail/noted_box";
+const ReactQuill = dynamic(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+
 export default function Job_Create() {
-  const [value, setValue] = useState<any>();
-  const [ambil, setAmbil] = useState<String[]>([]);
+  const [value, setValue] = useState({
+    title: "",
+    content: "",
+    deskripsi: "",
+  });
+  const [reload, setReload] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [images, setImages] = useState<any | null>();
+
+  useShallowEffect(() => {
+    if (window && window.document) setReload(true);
+  }, []);
+
+  if (!reload)
+    return (
+      <>
+        <Center h={"50vh"}>
+          <Loader />
+        </Center>
+      </>
+    );
 
   return (
     <>
-      {/* <Stack px={"sm"}>
-        <Stack align="center">
-          <Image alt="" src={"/aset/no-file.png"} mah={500} maw={200} />
-          <Button radius={"xl"} w={100}>
-            <IconCamera />
-          </Button>
-        </Stack>
-        <Stack>
-          {ambil.map((v, k) => (
-            <Text key={k}> {v}</Text>
-          ))}
-        </Stack>
-        <Stack>
-          <TextInput
-            withAsterisk
-            label="Judul"
-            placeholder="Masukan judul lowongan"
-            onChange={(val) => {}}
-          />
-          <Textarea
-            minRows={5}
-            withAsterisk
-            label="Syarat dan Ketentuan"
-            placeholder={`Contoh ${"\n"}- Minimal lulusan SMA ${"\n"}- Pasif berbahasa inggris ${"\n"}- Dll,`}
-            onChange={(val) => {
-              const data = val.currentTarget.value.split("\n");
-              if (!_.isEmpty(data)) {
-                setAmbil(data);
-              }
-            }}
-          />
-          <Textarea
-            minRows={5}
-            withAsterisk
-            label="Deskripsi"
-            placeholder="Lokasi, Alamat Email, Nomor yang dapat dihubungi"
-            onChange={(val) => {}}
-          />
-        </Stack>
+      {!reload ? (
+        <Center h={"50vh"}>
+          <Loader />
+        </Center>
+      ) : (
+        <Stack px={"sm"} spacing={40}>
+          <Stack align="center" spacing={"xs"}>
+            {images ? (
+              <Image alt="" src={images} height={300} width={200} />
+            ) : (
+              <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
+                <Stack justify="center" align="center" h={"100%"}>
+                  <IconUpload color="gray" />
+                  <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
+                    Upload Gambar
+                  </Text>
+                </Stack>
+              </Paper>
+            )}
 
-        <ButtonAction />
-      </Stack> */}
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  if (files.size > 20000) {
+                    ComponentGlobal_NotifikasiPeringatan(
+                      "Maaf, Ukuran file terlalu besar, maximum 20Mb",
+                      3000
+                    );
+                  } else {
+                    setImages(buffer);
+                    setFile(files);
+                  }
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                  compact
+                  {...props}
+                  radius={"xl"}
+                  variant="outline"
+                  w={150}
+                >
+                  <IconCamera />
+                </Button>
+              )}
+            </FileButton>
+          </Stack>
+
+          <ComponentJob_NotedBox informasi="Poster atau Gambar tidak wajib untuk di upload. Upload lah jika dirasa perlu." />
+
+          <Stack spacing={"lg"}>
+            <TextInput
+              withAsterisk
+              label="Judul"
+              placeholder="Masukan judul lowongan kerja"
+              onChange={(val) => {
+                setValue({
+                  ...value,
+                  title: val.currentTarget.value,
+                });
+              }}
+            />
+
+            <Stack spacing={3}>
+              <Text fz={"sm"}>
+                Syarat & Ketentuan
+                <Text inherit span c={"red"}>
+                  {" "}
+                  *
+                </Text>
+              </Text>
+              <ReactQuill
+                defaultValue={`
+          <p><strong>Syarat &amp; Ketentuan :</strong></p>
+          <ol>
+          <li>Minimal pendidika SMA / Sederajat</li>
+          <li>Pasif berbahasa inggris </li>
+          <li>Dll,.</li>
+          </ol>
+          <p></br></p>
+          `}
+                modules={{
+                  toolbar: [
+                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                    ["bold", "italic", "underline", "link"],
+                    // [{ align: [] }],
+                    [{ list: "ordered" }, { list: "bullet" }],
+                    ["clean"],
+                  ],
+                }}
+                theme="snow"
+                onChange={(val) => {
+                  setValue({
+                    ...value,
+                    content: val,
+                  });
+                }}
+              />
+            </Stack>
+            <Stack spacing={3}>
+              <Text fz={"sm"}>
+                Deskripsi
+                <Text inherit span c={"red"}>
+                  {" "}
+                  *
+                </Text>
+              </Text>
+              <ReactQuill
+                defaultValue={`
+            <p>
+            <strong>Deskripsi :</strong>
+          </p>
+          <p>Jika berminat dapat menghubungi WA berikut</p>
+          <p>+6281 xxx xxx xx</p>
+          <p>Kirim CV anda melalui email berikut</p>
+          <p>test-email@gmail.com</p>
+          <p>Atau kunjungi website kami:</p>
+          <p>
+            <a
+              href="https://test-hipmi.wibudev.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              https://test-hipmi.wibudev.com/
+            </a>
+          </p>
+          `}
+                modules={{
+                  toolbar: [
+                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                    ["bold", "italic", "underline", "link"],
+                    // [{ align: [] }],
+                    [{ list: "ordered" }, { list: "bullet" }],
+                    ["clean"],
+                  ],
+                }}
+                theme="snow"
+                onChange={(val) => {
+                  setValue({
+                    ...value,
+                    deskripsi: val,
+                  });
+                }}
+              />
+            </Stack>
+          </Stack>
+
+          <ButtonAction value={value as any} file={file as any} />
+        </Stack>
+      )}
     </>
   );
 }
 
-function ButtonAction() {
+function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
   const router = useRouter();
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
   const [status, setStatus] = useAtom(gs_job_status);
+  const [preview, setPreview] = useToggle();
+
+  async function onAction() {
+    const gambar = new FormData();
+    gambar.append("file", file as any);
+
+    // console.log(value)
+
+    await Job_funCreate(value as any, gambar).then((res) => {
+      if (res.status === 201) {
+        setHotMenu(2);
+        setStatus("Review");
+        router.replace(RouterJob.status);
+        ComponentGlobal_NotifikasiBerhasil("Tambah Lowongan Berhasil");
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+  }
 
   return (
     <>
-      <Button
-        radius={"xl"}
-        mt={"lg"}
-        mb={70}
-        onClick={() => {
-          router.replace(RouterJob.status);
-          setHotMenu(2);
-          setStatus("Review");
-          ComponentGlobal_NotifikasiBerhasil("Tambah Lowongan Berhasil");
-        }}
-      >
-        Simpan
-      </Button>
+      <Stack>
+        <Group grow mt={"lg"} mb={70}>
+          <Button
+            w={"100%"}
+            radius={"xl"}
+            onClick={() => {
+              onAction();
+            }}
+          >
+            Simpan
+          </Button>
+        </Group>
+      </Stack>
     </>
   );
 }