Bulk Archive Unavailable Items (#188)

* add customized bulk archive button
ScottyLabs · Dec 18, 2022 · 469eb1c · 469eb1c
1 parent e8dbcce
commit 469eb1c
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 42 deletions.
diff --git a/api/routes/items.ts b/api/routes/items.ts
@@ -3,7 +3,7 @@ import PermissionsController from "../controllers/PermissionsController";
 import { BuildingType } from "../enums/locationTypes";
 import { PermissionType } from "../enums/permissionType";
 import Item from "../models/Item";
-import { isUser, isAdmin } from "./auth";
+import isUser from "./auth";
 
 import { Request, Response, Router } from "express";
 
@@ -191,13 +191,17 @@ router.post("/archive", isUser, async (req: Request, res: Response) => {
 });
 
 /**
- * Archives items older than the given days
+ * Archives items older than the given days. If unavailable is set to true,
+ * only archive items that are marked as unavailable. Otherwise, archive
+ * all items older than the given days.
  * {
  * days: days
+ * unavailable: unavailable
  * }
  */
-router.post("/archiveByDays", isAdmin, async (req: Request, res: Response) => {
+router.post("/archiveByDays", isUser, async (req: Request, res: Response) => {
   const days = req.body.days;
+  const unavailable = req.body.unavailable ?? false;
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const ObjectID = require("mongodb").ObjectID;
   const user = req.body.user;
@@ -214,6 +218,9 @@ router.post("/archiveByDays", isAdmin, async (req: Request, res: Response) => {
             ),
           },
         },
+        {
+          status: { $nin: unavailable ? ["available"] : [] },
+        },
       ],
     },
     [

diff --git a/client/src/components/BulkArchiveButton.tsx b/client/src/components/BulkArchiveButton.tsx
@@ -2,8 +2,9 @@
 
 import axios from "axios";
 import * as React from "react";
+import { useState } from "react";
 import { useHistory } from "react-router";
-import { Button, Modal } from "semantic-ui-react";
+import { Button, Form, Modal, Message } from "semantic-ui-react";
 
 function exampleReducer(dispatchState: any, action: any) {
   switch (action.type) {
@@ -29,8 +30,46 @@ export default function BulkArchiveButton(props: { fetchItems: () => void }) {
   });
   const { open, closeOnEscape, closeOnDimmerClick } = dispatchState;
 
+  const [archiveDays, setArchiveDays] = useState("");
+  const [formError, setFormError] = useState("");
+
   const history = useHistory();
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (archiveDays === "") {
+      setFormError("Input is empty");
+    } else if (isNaN(Number(archiveDays))) {
+      setFormError("Input not a number");
+    } else if (Number(archiveDays) < 0) {
+      setFormError("Input is negative");
+    } else {
+      axios
+        .post("/api/items/archiveByDays", {
+          token: localStorage.getItem("lnf_token"),
+          days: parseInt(archiveDays),
+          unavailable: true,
+        })
+        .then(
+          (res) => {
+            console.log("Bulk archived!");
+            console.log(res);
+            props.fetchItems();
+          },
+          (error) => {
+            console.log(error);
+            if (error?.response?.status === 401) {
+              window.localStorage.removeItem("lnf_token");
+              history.push("/login");
+            }
+          }
+        );
+      dispatch({ type: "CLOSE_MODAL" });
+      setArchiveDays("");
+      setFormError("");
+    }
+  };
+
   return (
     <Modal
       closeOnEscape={closeOnEscape}
@@ -52,51 +91,63 @@ export default function BulkArchiveButton(props: { fetchItems: () => void }) {
         </Button>
       }
     >
-      <Modal.Header>Bulk Archive</Modal.Header>
+      <Modal.Header>Bulk Archive Unavailable Items</Modal.Header>
       <Modal.Content
         style={{
           margin: "auto",
           maxWidth: "100%",
-          padding: "20px 20px 50px 20px",
+          padding: "20px 20px 10px 20px",
           fontSize: "18px",
         }}
       >
-        <p>Are you sure you wish to archive all items older than 90 days?</p>
-        <Button
-          onClick={() => {
-            axios
-              .post("/api/items/archiveByDays", {
-                token: localStorage.getItem("lnf_token"),
-                days: 90,
-              })
-              .then(
-                (res) => {
-                  console.log("Bulk archived!");
-                  console.log(res);
-                  props.fetchItems();
-                },
-                (error) => {
-                  console.log(error);
-                  if (error?.response?.status === 401) {
-                    window.localStorage.removeItem("lnf_token");
-                    history.push("/login");
-                  }
-                }
-              );
-            dispatch({ type: "CLOSE_MODAL" });
-          }}
-          positive
-          floated="right"
-        >
-          Yes
-        </Button>
-        <Button
-          onClick={() => dispatch({ type: "CLOSE_MODAL" })}
-          negative
-          floated="right"
-        >
-          Cancel
-        </Button>
+        <Form onSubmit={handleSubmit} error={formError !== ""}>
+          <Form.Group inline>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "flex-start",
+                textAlign: "right",
+                width: "100%",
+                alignItems: "center",
+              }}
+            >
+              <p style={{ margin: 0, padding: 0 }}>
+                Archive all unavailable items older than
+              </p>
+              <Form.Input
+                label=""
+                placeholder="0"
+                width={2}
+                name="archiveDays"
+                value={archiveDays}
+                onChange={(_e, { _, value }) => setArchiveDays(value)}
+              />
+              <p>days?</p>
+            </div>
+          </Form.Group>
+          {formError !== "" ? <Message error content={formError} /> : null}
+          <Form.Group inline id="modal-actions">
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "flex-end",
+                textAlign: "right",
+                width: "100%",
+              }}
+            >
+              <Button
+                type="button"
+                onClick={() => dispatch({ type: "CLOSE_MODAL" })}
+                negative
+              >
+                Cancel
+              </Button>
+              <Button positive type="submit" style={{ marginLeft: "10px" }}>
+                Confirm
+              </Button>
+            </div>
+          </Form.Group>
+        </Form>
       </Modal.Content>
     </Modal>
   );