Merge pull request #45 from davewalker5/MC-272-Equipment-Types

MC-272 Added Equipment Type Maintenance

README.md

@@ -30,8 +30,11 @@
   - A "wish list" of albums with the ability to move albums between the main catalogue and the wish list at will
   - Album search
   - External API integration for looking up new albums
+  - An equipment register browser (equipment, equipment types, manufacturers)
+  - A "wish list" of equipment with the ability to move items between the main register and the wish list at will
   - Data import from CSV format files
   - Data export as CSV or Excel workbooks
+  - Reports and report export as CSV
 - It contains the following components:
 
 | Component    | Language | Purpose                                                            |
@@ -156,12 +159,12 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 - This authenticates with the web service (see below), so a valid login in the local database is required
 - Instructions on adding a user to the database are given in the "Database Users" section, below
 
-### Browsing the Catalogue
+### Browsing the Music Catalogue
 
 #### Main Catalogue
 
 - After logging in, the "Artists" page is displayed, listing the artists currently in the database
-- This acts as the home page for the site and clicking on the "Browse > Artists" menu item or the site logo navigates back to it
+- This acts as the home page for the site and clicking on the "Music > Artists" menu item or the site logo navigates back to it
 
 <img src="diagrams/artist-list.png" alt="Artist List" width="600">
 
@@ -206,7 +209,7 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 
 #### Browsing By Genre
 
-- To browse by genre, click on the "Browse > Genres" menu item
+- To browse by genre, click on the "Music > Genres" menu item
 - A page listing the genres derived from all albums in the //main catalogue// is displayed
 
 <img src="diagrams/genre-list.png" alt="Genre List" width="600">
@@ -216,7 +219,7 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 
 #### The Wish List
 
-- To view the wish list, click on the "Browse > Wish List" menu item
+- To view the wish list, click on the "Music > Wish List" menu item
 - A page identical in layout to the "Artists" page is displayed, but with a title indicating that it is the wish list
 - The page operates in an identical manner to the "Artists" page, using the same alphabet filter
 - Clicking on a row in the table navigates to the wish list for that artist:
@@ -230,7 +233,7 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 
 #### The Retailers List
 
-- To view a list of retailers in the database, click on the "Browse > Retailers" menu item
+- To view a list of retailers in the database, click on the "Music > Retailers" menu item
 - A page listing the retailers in the database is displayed:
 
 <img src="diagrams/retailer-list.png" alt="Retailers List" width="600">
@@ -252,6 +255,39 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 
 - Clicking on the globe icon next to the postcode entry will geocode the current address and populate the latitude and longitude with the results
 
+### Browsing the Equipment Register
+
+#### Main Catalogue
+
+To be implemented in a future release.
+
+#### Wish List
+
+To be implemented in a future release.
+
+### Equipment Types
+
+- To view a list of equipment types in the database, click on the "Equipment > Equipment Types" menu item
+- A page listing the equpiment types in the database is displayed:
+
+<img src="diagrams/equipment-types-list.png" alt="Equipment Types List" width="600">
+
+- Clicking on the trash can icon in a row will prompt for confirmation and then attempt to delete the equipment type on the selected row
+- Equipment types that are currently "in use" (associated with an item of equpiment) cannot be deleted and attempting to delete them will result in an error message being displayed
+- Clicking on the "Add" button opens the equpiment type editing page (see below) to add a new equpiment type
+- Clicking on the edit icon in a row navigates to the equpiment type editing page for that equpiment type (see below)
+
+<img src="diagrams/equipment-type-editor.png" alt="Equipment Type Editor" width="600">
+
+### Manufacturers
+
+To be implemented in a future release.
+
+#### The Retailers List
+
+- To view a list of retailers in the database, click on the "Equipment > Retailers" menu item
+- This opens the page described under "Browsing the Music Catalogue", above
+
 ### Album Lookup
 
 - To search for an album, click on the "Search" menu bar item:

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

@@ -1,11 +1,9 @@
 import styles from "./albumEditor.module.css";
 import pages from "@/helpers/navigation";
-import catalogues from "@/helpers/catalogues";
-import FormInputField from "./formInputField";
-import CatalogueSelector from "./catalogueSelector";
-import { apiCreateAlbum, apiUpdateAlbum } from "@/helpers/apiAlbums";
+import FormInputField from "../common/formInputField";
+import { apiCreateAlbum, apiUpdateAlbum } from "@/helpers/api/apiAlbums";
 import { useState, useCallback } from "react";
-import GenreSelector from "./genreSelector";
+import GenreSelector from "../genres/genreSelector";
 
 /**
  * Component to render an album editor, excluding purchase details that are

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

@@ -2,10 +2,10 @@ import styles from "./albumPurchaseDetails.module.css";
 import DatePicker from "react-datepicker";
 import { useState, useCallback } from "react";
 import CurrencyInput from "react-currency-input-field";
-import config from "../config.json";
+import config from "@/config.json";
 import pages from "@/helpers/navigation";
-import { apiSetAlbumPurchaseDetails } from "@/helpers/apiAlbums";
-import RetailerSelector from "./retailerSelector";
+import { apiSetAlbumPurchaseDetails } from "@/helpers/api/apiAlbums";
+import RetailerSelector from "../retailers/retailerSelector";
 
 /**
  * Form to set the album purchase details for an album

src/music-catalogue-ui/components/albumRow.js → src/music-catalogue-ui/components/albums/albumRow.js

@@ -1,8 +1,8 @@
 import pages from "@/helpers/navigation";
 import DeleteAlbumActionIcon from "./deleteAlbumActionIcon";
 import AlbumWishListActionIcon from "./albumWishListActionIcon";
-import CurrencyFormatter from "./currencyFormatter";
-import DateFormatter from "./dateFormatter";
+import CurrencyFormatter from "../common/currencyFormatter";
+import DateFormatter from "../common/dateFormatter";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCoins, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 import { useCallback } from "react";
@@ -60,7 +60,6 @@ const AlbumRow = ({
       <td onClick={rowClickCallback}>{retailerName}</td>
       <td>
         <DeleteAlbumActionIcon
-          artistId={artist.id}
           album={album}
           isWishList={isWishList}
           logout={logout}
@@ -82,7 +81,6 @@ const AlbumRow = ({
       </td>
       <td>
         <AlbumWishListActionIcon
-          artistId={artist.id}
           album={album}
           isWishList={isWishList}
           logout={logout}

src/music-catalogue-ui/components/albumWishListActionIcon.js → src/music-catalogue-ui/components/albums/albumWishListActionIcon.js

@@ -7,24 +7,17 @@ import {
 import {
   apiSetAlbumWishListFlag,
   apiFetchAlbumsByArtist,
-} from "@/helpers/apiAlbums";
+} from "@/helpers/api/apiAlbums";
 
 /**
  * Icon and associated action to move an album between the catalogue and wish list
- * @param {*} artistId
  * @param {*} album
  * @param {*} isWishList
  * @param {*} logout
  * @param {*} setAlbums
  * @returns
  */
-const AlbumWishListActionIcon = ({
-  artistId,
-  album,
-  isWishList,
-  logout,
-  setAlbums,
-}) => {
+const AlbumWishListActionIcon = ({ album, isWishList, logout, setAlbums }) => {
   // Set the icon depending on the direction in which the album will move
   const icon = isWishList ? faRecordVinyl : faHeartCirclePlus;
 
@@ -35,13 +28,13 @@ const AlbumWishListActionIcon = ({
     if (result) {
       // Successful, so refresh the album list
       const fetchedAlbums = await apiFetchAlbumsByArtist(
-        artistId,
+        album.artistId,
         isWishList,
         logout
       );
       setAlbums(fetchedAlbums);
     }
-  }, [artistId, album, isWishList, logout, setAlbums]);
+  }, [album, isWishList, logout, setAlbums]);
 
   return <FontAwesomeIcon icon={icon} onClick={setAlbumWishListFlag} />;
 };

src/music-catalogue-ui/components/deleteAlbumActionIcon.js → src/music-catalogue-ui/components/albums/deleteAlbumActionIcon.js

@@ -1,11 +1,13 @@
 import { useCallback } from "react";
-import { apiDeleteAlbum, apiFetchAlbumsByArtist } from "@/helpers/apiAlbums";
+import {
+  apiDeleteAlbum,
+  apiFetchAlbumsByArtist,
+} from "@/helpers/api/apiAlbums";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Icon and associated action to delete an album
- * @param {*} artistId
  * @param {*} album
  * @param {*} isWishList
  * @param {*} logout
@@ -14,7 +16,6 @@ import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
  * @returns
  */
 const DeleteAlbumActionIcon = ({
-  artistId,
   album,
   isWishList,
   logout,
@@ -23,7 +24,7 @@ const DeleteAlbumActionIcon = ({
 }) => {
   /* Callback to prompt for confirmation and delete an album */
   const confirmDeleteAlbum = useCallback(
-    async (e, album) => {
+    async (e) => {
       // Prevent the default action associated with the click event
       e.preventDefault();
 
@@ -39,7 +40,7 @@ const DeleteAlbumActionIcon = ({
           if (result) {
             // Successful, so refresh the album list
             const fetchedAlbums = await apiFetchAlbumsByArtist(
-              artistId,
+              album.artistId,
               isWishList,
               logout
             );
@@ -50,14 +51,11 @@ const DeleteAlbumActionIcon = ({
         }
       }
     },
-    [artistId, isWishList, logout, setAlbums]
+    [album, isWishList, logout, setAlbums, setError]
   );
 
   return (
-    <FontAwesomeIcon
-      icon={faTrashAlt}
-      onClick={(e) => confirmDeleteAlbum(e, album)}
-    />
+    <FontAwesomeIcon icon={faTrashAlt} onClick={(e) => confirmDeleteAlbum(e)} />
   );
 };
 

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useState } from "react";
-import Login from "./login";
+import Login from "./login/login";
 import pages from "@/helpers/navigation";
 import ComponentPicker from "./componentPicker";
-import { apiClearToken } from "@/helpers/apiToken";
+import { apiClearToken } from "@/helpers/api/apiToken";
 import useIsLoggedIn from "@/hooks/useIsLoggedIn";
 import MenuBar from "./menuBar";
 import { clearStorageValue } from "@/helpers/storage";
@@ -42,6 +42,7 @@ const App = () => {
     track = null,
     retailer = null,
     genre = null,
+    equipmentType = null,
     filter = "A",
     isWishList = false,
   } = {}) => {
@@ -53,6 +54,7 @@ const App = () => {
       track: typeof track != "undefined" ? track : null,
       retailer: typeof retailer != "undefined" ? retailer : null,
       genre: typeof genre != "undefined" ? genre : null,
+      equipmentType: typeof equipmentType != "undefined" ? equipmentType : null,
       filter: typeof filter != "undefined" ? filter : "A",
       isWishList: typeof isWishList != "undefined" ? isWishList : false,
     };

src/music-catalogue-ui/components/artistEditor.js → src/music-catalogue-ui/components/artists/artistEditor.js

@@ -1,14 +1,15 @@
 import styles from "./artistEditor.module.css";
 import pages from "@/helpers/navigation";
-import FormInputField from "./formInputField";
+import FormInputField from "../common/formInputField";
 import { useState, useCallback } from "react";
-import { apiCreateArtist, apiUpdateArtist } from "@/helpers/apiArtists";
+import { apiCreateArtist, apiUpdateArtist } from "@/helpers/api/apiArtists";
 
 /**
  * Component to render the artist editor
  * @param {*} filter
  * @param {*} artist
  * @param {*} isWishList
+ * @param {*} navoigate
  * @param {*} logout
  */
 const ArtistEditor = ({ filter, artist, isWishList, navigate, logout }) => {

src/music-catalogue-ui/components/artistRow.js → src/music-catalogue-ui/components/artists/artistRow.js

@@ -10,6 +10,7 @@ import DeleteArtistActionIcon from "./deleteArtistActionIcon";
  * @param {*} artist
  * @param {*} isWishList
  * @param {*} navigate
+ * @param {*} logout
  * @param {*} setArtists
  * @param {*} setError
  * @returns

src/music-catalogue-ui/components/deleteArtistActionIcon.js → src/music-catalogue-ui/components/artists/deleteArtistActionIcon.js

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { apiDeleteArtist, apiFetchArtists } from "@/helpers/apiArtists";
+import { apiDeleteArtist, apiFetchArtists } from "@/helpers/api/apiArtists";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 
@@ -25,7 +25,7 @@ const DeleteArtistActionIcon = ({
 }) => {
   /* Callback to prompt for confirmation and delete an artist */
   const confirmDeleteArtist = useCallback(
-    async (e, album) => {
+    async (e) => {
       // Prevent the default action associated with the click event
       e.preventDefault();
 
@@ -63,7 +63,7 @@ const DeleteArtistActionIcon = ({
   return (
     <FontAwesomeIcon
       icon={faTrashAlt}
-      onClick={(e) => confirmDeleteArtist(e, artist)}
+      onClick={(e) => confirmDeleteArtist(e)}
     />
   );
 };

src/music-catalogue-ui/components/currencyFormatter.js → src/music-catalogue-ui/components/common/currencyFormatter.js

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 
 /**
  * Format a value as currency using the locale from the config file

src/music-catalogue-ui/components/dateAndTimeFormatter.js → src/music-catalogue-ui/components/common/dateAndTimeFormatter.js

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 
 /**
  * Format a value as a date and time using the locale from the config file

src/music-catalogue-ui/components/dateFormatter.js → src/music-catalogue-ui/components/common/dateFormatter.js

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 
 /**
  * Format a value as a date using the locale from the config file