diff --git a/README.md b/README.md index 18f6b73..09a1439 100644 --- a/README.md +++ b/README.md @@ -186,6 +186,12 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue - Clicking on the artist name in any row in the track list or clicking on the "Back" button returns to the album list for that artist +- Clicking on the "Delete" icon will prompt for confirmation and, if the action is confirmed, will delete the track +- Clicking on the "Edit" icon opens the track editor to edit the track properties: + + + +- Clicking on the "Add" button at the bottom of the track list will open a blank track editor to add and save a new track #### Browsing By Genre diff --git a/diagrams/track-editor.png b/diagrams/track-editor.png new file mode 100644 index 0000000..671be7a Binary files /dev/null and b/diagrams/track-editor.png differ diff --git a/diagrams/track-list.png b/diagrams/track-list.png index e6d529d..da78f05 100644 Binary files a/diagrams/track-list.png and b/diagrams/track-list.png differ diff --git a/docker/ui/Dockerfile b/docker/ui/Dockerfile index 91e12c3..354d8fb 100644 --- a/docker/ui/Dockerfile +++ b/docker/ui/Dockerfile @@ -1,6 +1,6 @@ FROM node:20-alpine -COPY musiccatalogue.ui-1.24.0.0 /opt/musiccatalogue.ui-1.24.0.0 -WORKDIR /opt/musiccatalogue.ui-1.24.0.0 +COPY musiccatalogue.ui-1.25.0.0 /opt/musiccatalogue.ui-1.25.0.0 +WORKDIR /opt/musiccatalogue.ui-1.25.0.0 RUN npm install RUN npm run build ENTRYPOINT [ "npm", "start" ] diff --git a/src/music-catalogue-ui/components/retailerEditor.js b/src/music-catalogue-ui/components/retailerEditor.js index 7829469..da5bcdd 100644 --- a/src/music-catalogue-ui/components/retailerEditor.js +++ b/src/music-catalogue-ui/components/retailerEditor.js @@ -90,7 +90,7 @@ const RetailerEditor = ({ retailer, navigate, logout }) => { ); } - // If all's well, display a confirmation message. Otherwise, show an error + // If all's well, navigate back to the retailers page. Otherwise, show an error if (updatedRetailer == null) { const action = retailer.Id <= 0 ? "adding" : "updating"; setError(`An error occurred ${action} the retailer`); diff --git a/src/music-catalogue-ui/components/trackEditor.js b/src/music-catalogue-ui/components/trackEditor.js index 84867ee..0ff2efc 100644 --- a/src/music-catalogue-ui/components/trackEditor.js +++ b/src/music-catalogue-ui/components/trackEditor.js @@ -8,7 +8,7 @@ const TrackEditor = ({ track, album, artist, navigate, logout }) => { // Split the track's formatted duration on the ":" let initialMinutes = null; let initialSeconds = null; - if (track.formattedDuration != null) { + if (track != null && track.formattedDuration != null) { const elements = track.formattedDuration.split(":"); if (elements.length > 0) { initialMinutes = elements[0]; @@ -16,8 +16,12 @@ const TrackEditor = ({ track, album, artist, navigate, logout }) => { } } - const [title, setTitle] = useState(track.title); - const [number, setNumber] = useState(track.number); + // Get initial values for the other properties + const initialTitle = track != null ? track.title : null; + const initialNumber = track != null ? track.number : null; + + const [title, setTitle] = useState(initialTitle); + const [number, setNumber] = useState(initialNumber); const [minutes, setMinutes] = useState(initialMinutes); const [seconds, setSeconds] = useState(initialSeconds); const [error, setError] = useState(""); @@ -38,11 +42,10 @@ const TrackEditor = ({ track, album, artist, navigate, logout }) => { const durationSeconds = Number(seconds); const duration = 1000 * (60 * durationMinutes + durationSeconds); - // Either add or update the track, depending on whether they currently - // have an ID + // Either add or update the track, depending on whether there's an + // existing track or not let updatedTrack = null; - if (track.id <= 0) { - // Invalid ID, so create a new track + if (track == null) { updatedTrack = await apiCreateTrack( title, number, @@ -51,7 +54,6 @@ const TrackEditor = ({ track, album, artist, navigate, logout }) => { logout ); } else { - // Has a valid ID, so update an existing track updatedTrack = await apiUpdateTrack( track.id, title, diff --git a/src/music-catalogue-ui/components/trackList.js b/src/music-catalogue-ui/components/trackList.js index 9f9147f..822b494 100644 --- a/src/music-catalogue-ui/components/trackList.js +++ b/src/music-catalogue-ui/components/trackList.js @@ -2,6 +2,7 @@ import { useCallback } from "react"; import useTracks from "@/hooks/useTracks"; import TrackRow from "./trackRow"; import pages from "@/helpers/navigation"; +import styles from "./trackList.module.css"; /** * Component to render the list of tracks for the specified album @@ -64,6 +65,20 @@ const TrackList = ({ artist, album, isWishList, navigate, logout }) => { +