add request table

aditiapras · Oct 2, 2023 · 0fd315a · 0fd315a
1 parent c788b62
commit 0fd315a
Show file tree

Hide file tree

Showing 2 changed files with 182 additions and 8 deletions.
diff --git a/components/request/request.js b/components/request/request.js
@@ -1,10 +1,173 @@
+"use client";
 import { VscRequestChanges } from "react-icons/vsc";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import RequestChange from "./requestChange";
 import RequestCleaning from "./requestCleaning";
+import { useFetch } from "@/lib/fetchHelper";
+import Spinner from "../ui/spinner";
+import DataTable from "../cleaning/data-table";
+import moment from "moment-timezone";
+import { useState } from "react";
+import Select from "react-select";
+import { Button } from "../ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import axios from "axios";
 
 export default function Request() {
+  const [changeStatus, setChangeStatus] = useState("");
+  const [errors, setErrors] = useState(false);
+
+  const {
+    data: requests,
+    error,
+    isLoading,
+  } = useFetch(`${process.env.NEXT_PUBLIC_API_URL}/requests`);
+
+  if (error) return <div>failed to load</div>;
+  if (isLoading) return <Spinner />;
+
+  /** @type import("@tanstack/react-table").ColumnDef<any> */
+
+  const columns = [
+    {
+      header: "ID",
+      accessorKey: "id",
+      cell: (info) => String(info.getValue()),
+    },
+    {
+      header: "Name",
+      accessorKey: "name",
+    },
+    {
+      header: "ID Drum",
+      accessorKey: "id_drum",
+    },
+    {
+      header: "Building MC",
+      accessorKey: "building_mc",
+    },
+    {
+      header: "Type",
+      accessorKey: "type",
+    },
+    {
+      header: "Status",
+      accessorKey: "status",
+      cell: ({ row }) => {
+        const request = row.original;
+        return (
+          <div className="relative">
+            <p
+              className={`${
+                request.status == "Complete"
+                  ? "text-green-500 bg-green-200"
+                  : request.status == "New Request"
+                  ? "text-blue-500 bg-blue-200"
+                  : "text-amber-500 bg-amber-200"
+              } px-2 py-0.5 rounded-full text-center relative`}
+            >
+              {request.status}
+            </p>
+            {request.status == "New Request" && (
+              <p className="absolute top-0 left-0 bg-red-500 w-2.5 h-2.5 rounded-full animate-bounce"></p>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      header: "Request Date",
+      accessorKey: "request_date",
+      cell: (info) => moment(info.getValue()).format("DD MMMM YYYY HH:mm"),
+    },
+    {
+      header: "Complete Date",
+      accessorKey: "complete_date",
+      cell: (info) => moment(info.getValue()).format("DD MMMM YYYY HH:mm"),
+    },
+    {
+      header: "Action",
+      cell: ({ row }) => {
+        const request = row.original;
+
+        const status =
+          request.status == "New Request"
+            ? [
+                { value: "On Progress", label: "On Progress" },
+                { value: "Complete", label: "Complete" },
+              ]
+            : [
+                { value: "On Progress", label: "On Progress" },
+                { value: "Complete", label: "Complete" },
+              ];
+
+        const handleSubmit = async (e) => {
+          const query = {
+            id: request.id,
+            status: e.value,
+          };
+          const data = axios({
+            method: "put",
+            url: `${process.env.NEXT_PUBLIC_API_URL}/requests`,
+            data: query,
+          }).then((res) => res.data);
+
+          console.log(await data);
+        };
+
+        if (request.status == "Complete") {
+          return <Button disabled>Change Status</Button>;
+        } else {
+          return (
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button>Change Status</Button>
+              </DialogTrigger>
+              <DialogContent>
+                <form
+                  // onSubmit={handleSubmit}
+                  className="flex flex-col gap-5 mt-10"
+                >
+                  <DialogHeader>
+                    <DialogTitle>Change Status</DialogTitle>
+                    <DialogDescription>
+                      Change status of request.
+                    </DialogDescription>
+                    {errors && <p>Please select a status</p>}
+                  </DialogHeader>
+                  <Select
+                    options={status}
+                    onChange={(e) => handleSubmit(e)}
+                    required
+                  />
+                  <Button type="submit">Save Changes</Button>
+                </form>
+              </DialogContent>
+            </Dialog>
+          );
+        }
+      },
+    },
+  ];
+
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center gap-5 w-full px-5 py-2 border-b bg-zinc-50">
@@ -18,10 +181,14 @@ export default function Request() {
             </div>
           </DialogTrigger>
           <DialogContent className="sm:max-w-[425px]">
-            <Tabs defaultValue="change" className="sm:max-w-[425px]">
-              <TabsList>
-                <TabsTrigger value="change">Change C/C Drum</TabsTrigger>
-                <TabsTrigger value="cleaning">Cleaning C/C Drum</TabsTrigger>
+            <Tabs defaultValue="change" className="w-full mt-5">
+              <TabsList className="w-full">
+                <TabsTrigger className="w-full" value="change">
+                  Change C/C Drum
+                </TabsTrigger>
+                <TabsTrigger className="w-full" value="cleaning">
+                  Cleaning C/C Drum
+                </TabsTrigger>
               </TabsList>
               <TabsContent value="change">
                 <RequestChange />
@@ -33,7 +200,10 @@ export default function Request() {
           </DialogContent>
         </Dialog>
         <div className="flex flex-col gap-5 mt-5 border-t">
-          <p className="mt-3">Request list</p>
+          <p className="mt-3 font-semibold">Request list</p>
+          <div className="flex flex-col gap-5">
+            <DataTable columns={columns} data={requests} />
+          </div>
         </div>
       </div>
     </div>

diff --git a/components/request/requestChange.js b/components/request/requestChange.js
@@ -28,6 +28,9 @@ export default function RequestChange() {
     e.preventDefault();
     if (machine == "" || drum == "" || team == "" || type == "" || name == "") {
       setErrors(true);
+      setTimeout(() => {
+        setErrors(false);
+      }, 6000);
     } else {
       setErrors(false);
       const query = {
@@ -94,8 +97,9 @@ export default function RequestChange() {
         </DialogDescription>
       </DialogHeader>
       {errors && (
-        <p className="bg-red-100 p-1 text-sm rounded-md text-red-500">
-          Please fill all fields
+        <p className="bg-red-100 p-2 text-sm rounded-md text-red-500">
+          Harap cek kembali form, terutama bagian C/C Drum. Pastikan C/C Drum
+          yang dipilih sesuai dengan mesin yang sedang digunakan.
         </p>
       )}
       <div className="flex flex-col gap-2">