MC-286 Equipment Register

README.md

@@ -257,13 +257,33 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 
 ### Browsing the Equipment Register
 
-#### Main Catalogue
+#### Main Register
+
+- To view the equipment register, select "Equipment > Equipment" from the menu bar:
+
+<img src="diagrams/equipment-list.png" alt="Equipment List" width="600">
+
+- As the mouse pointer is moved up and down the table, the current row is highlighted
+- Clicking on the trash icon prompts for confirmation and, if confirmed, deletes the equpiment record shown in that row
+- Clicking on the "heart" icon moves the equipment from the main register to the wish list then refreshes the equipment list
+- Clicking on the "money" icon opens a form allowing the purchase details to be set:
+
+<img src="diagrams/equipment-purchase-details.png" alt="Purchase Details" width="600">
+
+- Note that retailers must be added using the retailer list and retailer editing page (see above) before they will appear in the drop-down on the purchase details page
+- Clicking on the "Edit" icon opens the equipment editor to edit the equipment properties:
+
+<img src="diagrams/equipment-editor.png" alt="Equipment List" width="600">
 
-To be implemented in a future release.
+- Note that equipment types and manufacturers must be added using the appropriate editing page (see below) before they will appear in the drop-downs on the equipment editor page
+- Clicking on the "Add" button at the bottom of the equipment list will open a blank equipment editor to add and save a new item of equipment
 
 #### Wish List
 
-To be implemented in a future release.
+- To view the wish list, click on the "Equipment > Wish List" menu item
+- A page very similar to the main register equipment list is displayed
+- The only difference is that the "hearts" icon on each is replaced with a vinyl record icon
+- Clicking on this moves the equipment record from the wish list to the main register
 
 ### Equipment Types
 

docker/ui/Dockerfile

@@ -1,6 +1,6 @@
 FROM node:20-alpine
-COPY musiccatalogue.ui-1.27.0.0 /opt/musiccatalogue.ui-1.27.0.0
-WORKDIR /opt/musiccatalogue.ui-1.27.0.0
+COPY musiccatalogue.ui-1.28.0.0 /opt/musiccatalogue.ui-1.28.0.0
+WORKDIR /opt/musiccatalogue.ui-1.28.0.0
 RUN npm install
 RUN npm run build
 ENTRYPOINT [ "npm", "start" ]

src/music-catalogue-ui/components/albums/albumEditor.js

@@ -17,13 +17,8 @@ import GenreSelector from "../genres/genreSelector";
  * @returns
  */
 const AlbumEditor = ({ artist, album, isWishList, navigate, logout }) => {
-  // Get the initial genre selection
-  let initialGenre = null;
-  if (album != null) {
-    initialGenre = album.genre;
-  }
-
-  // Get initial values for the remaining album properties
+  // Get initial values for album properties
+  const initialGenre = album != null ? album.genre : null;
   const initialTitle = album != null ? album.title : null;
   const initialReleased = album != null ? album.released : null;
   const initialCoverUrl = album != null ? album.coverUrl : null;
@@ -173,6 +168,7 @@ const AlbumEditor = ({ artist, album, isWishList, navigate, logout }) => {
                 navigate({
                   page: pages.albums,
                   artist: artist,
+                  isWishList: isWishList,
                 })
               }
             >

src/music-catalogue-ui/components/albums/albumPurchaseDetails.js

@@ -11,7 +11,6 @@ import RetailerSelector from "../retailers/retailerSelector";
  * Form to set the album purchase details for an album
  * @param {*} artist
  * @param {*} album
- * @param {*} isWishList
  * @param {*} navigate
  * @param {*} logout
  */
@@ -41,7 +40,7 @@ const AlbumPurchaseDetails = ({ artist, album, navigate, logout }) => {
 
       // Construct the values to be passed to the API
       const updatedPurchaseDate =
-        album.isWishListItem == false ? purchaseDate : null;
+        album.isWishListItem != true ? purchaseDate : null;
       const updatedPrice = price != undefined ? price : null;
       const updatedRetailerId = retailer != null ? retailer.id : null;
 

src/music-catalogue-ui/components/app.js

@@ -25,6 +25,7 @@ const defaultContext = {
   // Equipment registry
   equipmentType: null,
   manufacturer: null,
+  equipment: null,
 
   // Data retrieval/filering criteria
   filter: "A",
@@ -48,6 +49,7 @@ const App = () => {
     genre = null,
     equipmentType = null,
     manufacturer = null,
+    equipment = null,
     filter = "A",
     isWishList = false,
   } = {}) => {
@@ -61,6 +63,7 @@ const App = () => {
       genre: typeof genre != "undefined" ? genre : null,
       equipmentType: typeof equipmentType != "undefined" ? equipmentType : null,
       manufacturer: typeof manufacturer != "undefined" ? manufacturer : null,
+      equipment: typeof equipment != "undefined" ? equipment : null,
       filter: typeof filter != "undefined" ? filter : "A",
       isWishList: typeof isWishList != "undefined" ? isWishList : false,
     };

src/music-catalogue-ui/components/componentPicker.js

@@ -21,6 +21,9 @@ import EquipmentTypeList from "./equipmentTypes/equipmentTypeList";
 import EquipmentTypeEditor from "./equipmentTypes/equipmentTypeEditor";
 import ManufacturerList from "./manufacturers/manufacturerList";
 import ManufacturerEditor from "./manufacturers/manufacturerEditor";
+import EquipmentList from "./equipment/equipmentList";
+import EquipmentPurchaseDetails from "./equipment/equpimentPurchaseDetails";
+import EquipmentEditor from "./equipment/equipmentEditor";
 
 /**
  * Component using the current context to select and render the current page
@@ -141,6 +144,31 @@ const ComponentPicker = ({ context, navigate, logout }) => {
           logout={logout}
         />
       );
+    case pages.equipment:
+      return (
+        <EquipmentList
+          isWishList={context.isWishList}
+          navigate={navigate}
+          logout={logout}
+        />
+      );
+    case pages.equipmentPurchaseDetails:
+      return (
+        <EquipmentPurchaseDetails
+          equipment={context.equipment}
+          navigate={navigate}
+          logout={logout}
+        />
+      );
+    case pages.equipmentEditor:
+      return (
+        <EquipmentEditor
+          equipment={context.equipment}
+          isWishList={context.isWishList}
+          navigate={navigate}
+          logout={logout}
+        />
+      );
     case pages.export:
       return <ExportCatalogue logout={logout} />;
     case pages.artistStatisticsReport:

src/music-catalogue-ui/components/equipment/deleteEquipmentActionIcon.js

@@ -0,0 +1,64 @@
+import { useCallback } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+import {
+  apiDeleteEquipment,
+  apiFetchEquipment,
+} from "@/helpers/api/apiEquipment";
+
+/**
+ * Icon and associated action to delete an item of equipment
+ * @param {*} equipment
+ * @param {*} isWishList
+ * @param {*} logout
+ * @param {*} setEquipment
+ * @param {*} setError
+ * @returns
+ */
+const DeleteEquipmentActionIcon = ({
+  equipment,
+  isWishList,
+  logout,
+  setEquipment,
+  setError,
+}) => {
+  /* Callback to prompt for confirmation and delete an item of equipment */
+  const confirmDeleteEquipment = useCallback(
+    async (e) => {
+      // Prevent the default action associated with the click event
+      e.preventDefault();
+
+      // Show a confirmation message and get the user response
+      const message = `This will delete the equipment "${equipment.description}" - click OK to confirm`;
+      const result = confirm(message);
+
+      // If they've confirmed the deletion ...
+      if (result) {
+        // ... delete the equipment and confirm the API call was successful
+        try {
+          const result = await apiDeleteEquipment(equipment.id, logout);
+          if (result) {
+            // Successful, so refresh the equipment list
+            const fetchedEquipment = await apiFetchEquipment(
+              isWishList,
+              logout
+            );
+            setEquipment(fetchedEquipment);
+          }
+        } catch (ex) {
+          setError(`Error deleting the equipment: ${ex.message}`);
+        }
+      }
+    },
+    [equipment, isWishList, logout, setEquipment, setError]
+  );
+
+  return (
+    <FontAwesomeIcon
+      icon={faTrashAlt}
+      onClick={(e) => confirmDeleteEquipment(e)}
+    />
+  );
+};
+
+export default DeleteEquipmentActionIcon;