Feature/item common creation page

frontend/package.json

@@ -28,6 +28,7 @@
     "i18next-http-backend": "^3.0.2",
     "idb": "^8.0.0",
     "react": "^18.3.1",
+    "react-cool-onclickoutside": "^1.7.0",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.4.1",
     "react-project-template": "file:",

frontend/public/locales/fr/item.json

@@ -4,6 +4,7 @@
 
     "object": "Objet",
     "objects": "Objets",
+    "add_object": "Ajouter un objet",
     "edit_object": "Modifier l'objet",
     "delete_object": "Supprimer l'objet",
 

frontend/src/index.js

@@ -6,6 +6,7 @@ import MainLayout from './layouts/MainLayout';
 
 import Home from './pages/Home';
 import ItemCommonDetails from './pages/ItemCommonDetails';
+import ItemCommonCreation from './pages/ItemCommonCreation';
 
 import Loading from './ui/Loading';
 
@@ -34,6 +35,11 @@ root.render(
                         element={<Home />}
                     />
 
+                    <Route
+                        path="objects/add"
+                        element={<ItemCommonCreation />}
+                    />
+
                     <Route path="objects/:itemCommonId/">
                         <Route
                             path="edit"

frontend/src/modules/Filters.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 import { faFilter, faXmark, faRotate, faArrowDownAZ, faArrowDownZA, faPlus, faFileExport } from "@fortawesome/free-solid-svg-icons";
 
-import { useTranslation } from "react-i18next";
-
 import Button from "../ui/Button";
 import Label from "../ui/Label";
 import InputText from "../ui/InputText";
@@ -13,6 +13,8 @@ import SegmentedControl from "../ui/SegmentedControl";
 import SingleSelect from "../ui/SingleSelect";
 import Toggle from "../ui/Toggle";
 
+import { notDevelopedFeature } from "../utils/devUtils";
+
 /**
  * All filters for searching specific exemplars.
  *
@@ -32,6 +34,7 @@ const Filters = ({
 }) =>
 {
     const { t } = useTranslation(["buttons", "filters", "item", "misc"]);
+    const navigate = useNavigate();
 
     const [expandFilters, setExpandFilters] = useState(false);
     const [filterButtonIcon, setFilterButtonIcon] = useState(faFilter);
@@ -221,11 +224,13 @@ const Filters = ({
                     actions={[
                         {
                             icon: faPlus,
-                            label: t("new", { ns: "buttons" })
+                            label: t("new", { ns: "buttons" }),
+                            action: () => navigate("/objects/add")
                         },
                         {
                             icon: faFileExport,
-                            label: t("export", { ns: "buttons" })
+                            label: t("export", { ns: "buttons" }),
+                            action: () => notDevelopedFeature()
                         }
                     ]}
                     className={"sm:flex-col-reverse"}

frontend/src/modules/Item.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-
 import Heading from "../ui/Heading";
 import HTMLLink from "../ui/HTMLLink";
 import Image from "../ui/Image";

frontend/src/modules/ItemCommonDetailedCard.jsx

@@ -1,12 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { faPen, faTrash } from "@fortawesome/free-solid-svg-icons";
 
 import ItemCommonForm from "../modules/ItemCommonForm";
 
 import Image from "../ui/Image";
-import Button from "../ui/Button";
 import MeatballsMenu from "../ui/MeatballsMenu";
 import Tag from "../ui/Tag";
 
@@ -20,11 +19,11 @@ import { notDevelopedFeature } from "../utils/devUtils";
  */
 const ItemCommonDetailedCard = ({
     itemCommon,
-    updateItemCommon = false
+    updateItemCommon = false,
+    showButtonsAndOptions = true,
+    setShowButtonsAndOptions = null
 }) =>
 {
-    // FIX : Multiselect not displaying the correct selected count when editing an object from the Home page.
-
     const { t } = useTranslation(["item", "misc"]);
 
     const [isUpdated, setIsUpdated] = useState(updateItemCommon);
@@ -43,26 +42,37 @@ const ItemCommonDetailedCard = ({
         setIsUpdated(false);
     }
 
+    /**
+     * Toggles the display of buttons and options for item and exemplar
+     * when the item common form is opened or closed.
+     */
+    useEffect(() =>
+    {
+        setShowButtonsAndOptions(!isUpdated);
+    }, [isUpdated])
+
     return (
         <section>
             {!isUpdated ? (
-                <div className="flex flex-col sm:flex-row justify-center w-min sm:w-fit gap-4 rounded-md mx-auto p-4 bg-background">
-                    <div className="flex justify-end sm:justify-start sm:order-last w-[275px] sm:w-fit">
-                        <MeatballsMenu actions={[
-                            {
-                                isLink: false,
-                                label: t("edit_object", { ns: "item" }),
-                                icon: faPen,
-                                action: () => setIsUpdated((prev) => !prev)
-                            },
-                            {
-                                isLink: false,
-                                label: t("delete_object", { ns: "item" }),
-                                icon: faTrash,
-                                action: () => notDevelopedFeature()
-                            },
-                        ]}/>
-                    </div>
+                <div className="flex flex-col sm:flex-row w-fit justify-center gap-4 rounded-md mx-auto p-4 bg-background">
+                    {showButtonsAndOptions &&
+                        <div className="flex justify-end sm:justify-start sm:order-last w-[275px] sm:w-fit">
+                            <MeatballsMenu actions={[
+                                {
+                                    isLink: false,
+                                    label: t("edit_object", { ns: "item" }),
+                                    icon: faPen,
+                                    action: () => setIsUpdated((prev) => !prev)
+                                },
+                                {
+                                    isLink: false,
+                                    label: t("delete_object", { ns: "item" }),
+                                    icon: faTrash,
+                                    action: () => notDevelopedFeature()
+                                },
+                            ]}/>
+                        </div>
+                    }
 
                     <Image
                         src={itemCommon.image_url}

frontend/src/modules/ItemDetailedCard.jsx

@@ -33,7 +33,8 @@ const ItemDetailedCard = ({
     id = null,
     item = null,
     isHighlighted = false,
-    editExemplarFunction = null
+    editExemplarFunction = null,
+    showButtonsAndOptions = true,
 }) =>
 {
     if(!editExemplarFunction)
@@ -68,26 +69,28 @@ const ItemDetailedCard = ({
             )}
         >
             <div className="flex justify-end">
-                <MeatballsMenu actions={[
-                    {
-                        isLink: true,
-                        label: t("event_history", { ns: "item" }),
-                        icon: faClockRotateLeft,
-                        action: `${item.id}/event-history`
-                    },
-                    {
-                        isLink: false,
-                        label: t("edit_exemplar", { ns: "item" }),
-                        icon: faPen,
-                        action: () => editExemplarFunction(item)
-                    },
-                    {
-                        isLink: false,
-                        label: t("delete_exemplar", { ns: "item" }),
-                        icon: faTrash,
-                        action: () => notDevelopedFeature()
-                    }
-                ]}/>
+                {showButtonsAndOptions &&
+                    <MeatballsMenu actions={[
+                        {
+                            isLink: true,
+                            label: t("event_history", { ns: "item" }),
+                            icon: faClockRotateLeft,
+                            action: `${item.id}/event-history`
+                        },
+                        {
+                            isLink: false,
+                            label: t("edit_exemplar", { ns: "item" }),
+                            icon: faPen,
+                            action: () => editExemplarFunction(item)
+                        },
+                        {
+                            isLink: false,
+                            label: t("delete_exemplar", { ns: "item" }),
+                            icon: faTrash,
+                            action: () => notDevelopedFeature()
+                        }
+                    ]}/>
+                }
             </div>
             <div className="space-y-2">
                 <p className="text-2xl">
@@ -152,33 +155,35 @@ const ItemDetailedCard = ({
                 </div>
             </div>
 
-            <div className="flex flex-1 flex-col sm:flex-row justify-center gap-2 mt-4">
-                {item.loan_state !== loanStates[0]?.name ? (
-                    <HTMLLink
-                        to={"/"}
-                        styleAsButton={true}
-                        className={"basis-1/2"}
-                    >
-                        {t("return_loan", { ns: "item" })}
-                    </HTMLLink>
-                ) : (
-                    <HTMLLink
-                        to={"/"}
-                        styleAsButton={true}
-                        className={"basis-1/2"}
-                    >
-                        {t("add_loan", { ns: "item" })}
-                    </HTMLLink>
-                )}
-
-                <HTMLLink
-                    to={"/"}
-                    styleAsButton={true}
-                    className={"basis-1/2"}
-                >
-                    {t("add_control", { ns: "item" })}
-                </HTMLLink>
-            </div>
+            {showButtonsAndOptions &&
+                <div className="flex flex-1 flex-col sm:flex-row justify-center gap-2 mt-4">
+                        {item.loan_state !== loanStates[0]?.name ? (
+                            <HTMLLink
+                                to={"/"}
+                                styleAsButton={true}
+                                className={"basis-1/2"}
+                            >
+                                {t("return_loan", { ns: "item" })}
+                            </HTMLLink>
+                        ) : (
+                            <HTMLLink
+                                to={"/"}
+                                styleAsButton={true}
+                                className={"basis-1/2"}
+                            >
+                                {t("add_loan", { ns: "item" })}
+                            </HTMLLink>
+                        )}
+
+                        <HTMLLink
+                            to={"/"}
+                            styleAsButton={true}
+                            className={"basis-1/2"}
+                        >
+                            {t("add_control", { ns: "item" })}
+                        </HTMLLink>
+                </div>
+            }
         </div>
     )
 }

frontend/src/modules/ItemsList.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 import NoResults from "../ui/NoResults";
 

frontend/src/pages/Home.jsx

@@ -8,7 +8,6 @@ import { getAllGroups } from "../services/api/groups";
 import { getAllItemConditions } from "../services/api/item_conditions";
 import { getAllStockingPlaces } from "../services/api/stocking_places";
 
-
 import Loading from "../ui/Loading";
 
 import Filters from "../modules/Filters";
@@ -202,11 +201,7 @@ const Home = () =>
     /**
      * Filters the list of items common when a filter is updated.
      */
-    useEffect(() => {
-        //debugFilters();
-        filterItems();
-
-    }, [displayMode, searchBar, selectedObjectTypes,
+    useEffect(() => filterItems(), [displayMode, searchBar, selectedObjectTypes,
         selectedLoanStates, selectedExemplarConditions,
         selectedGroups, selectedStockingPlaces,
         selectedFilterOption, filterByAscOrder

frontend/src/pages/ItemCommonCreation.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import ItemCommonForm from "../modules/ItemCommonForm";
+import ItemForm from "../modules/ItemForm";
+
+import Heading from "../ui/Heading";
+import HTMLLink from "../ui/HTMLLink";
+
+const ItemCommonCreation = () =>
+{
+    const { t } = useTranslation(["buttons", "item", "titles"]);
+    const navigate = useNavigate()
+
+    const handleNewObjectForm = (event) =>
+    {
+        event.preventDefault();
+
+        const formData = Object.fromEntries(new FormData(event.target).entries());
+        console.log(formData);
+
+        // ============================================== //
+        // Future POST request to backend will go here... //
+        // ============================================== //
+
+        navigate("/objects/1/exemplars");
+    }
+
+    return (
+        <>
+            <Heading
+                headingLevel={1}
+                title={t("add_object", { ns: "item" })}
+            />
+
+            <HTMLLink
+                to={"/"}
+                styleAsButton={true}
+                className={"block w-fit mx-auto my-4"}
+            >
+                {t("back_to_list", { ns: "buttons" })}
+            </HTMLLink>
+
+            <form onSubmit={handleNewObjectForm}>
+                <section>
+                    <Heading
+                        headingLevel={2}
+                        title={t("item_common_details", { ns: "titles" })}
+                    />
+
+                    <ItemCommonForm />
+                </section>
+
+                <section>
+                    <Heading
+                        headingLevel={2}
+                        title={t("exemplar_details", { ns: "titles" })}
+                    />
+
+                    <ItemForm
+                        endCancelButton={true}
+                        submitButton={true}
+                        cancelButtonOnClickFunction={() => navigate("/")}
+                    />
+                </section>
+            </form>
+
+        </>
+    )
+}
+
+export default ItemCommonCreation;