GetAlbum UI shows error msg, add example input at SearchAlbum SearchA…

…rtist UI
yennanliu · Oct 1, 2024 · e9cd5a5 · e9cd5a5
1 parent ff552fe
commit e9cd5a5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Album/GetAlbum.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Album/GetAlbum.vue
@@ -3,6 +3,7 @@
     <!-- Album ID Form -->
     <form class="album-form text-center">
       <div class="form-group">
+        <p style="text-align: center;">Enter Album ID, example: 1VuIx4XMmSs1hGZk2uCzvO</p><br>
         <label for="albumId" class="form-label">Enter Album ID</label>
         <input
           type="text"
@@ -17,8 +18,13 @@
       </button>
     </form>
 
+    <!-- Error message -->
+    <div v-if="fetchAlbumError" class="error-message text-center" style="color: red;">
+      {{ fetchAlbumError }}
+    </div>
+
     <!-- Album Details -->
-    <div v-if="album" class="album-details mt-5">
+    <div v-if="album && !fetchAlbumError" class="album-details mt-5">
       <h1 class="album-title">
         Album: {{ album.name }} | Artist: {{ album.artists[0].name }}
       </h1>
@@ -70,21 +76,23 @@
     </div>
 
     <!-- Loading Placeholder -->
-    <div v-else class="loading-text text-center mt-5">Loading...</div>
+    <div v-else-if="!fetchAlbumError" class="loading-text text-center mt-5">Loading...</div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      albumId: "1VuIx4XMmSs1hGZk2uCzvO", //  default val
+      albumId: "1VuIx4XMmSs1hGZk2uCzvO", // default value
       album: null,
+      fetchAlbumError: null // Error message state
     };
   },
   methods: {
     async fetchAlbum() {
       try {
+        this.fetchAlbumError = null; // Reset error state
         const response = await fetch(
           `http://localhost:8888/album/${this.albumId}`
         );
@@ -96,6 +104,8 @@ export default {
         console.log("this.album =", JSON.stringify(this.album));
       } catch (error) {
         console.error(error);
+        this.fetchAlbumError = error.message; // Set error message
+        this.album = null; // Clear album data on error
       }
     },
   },
@@ -133,6 +143,13 @@ export default {
   margin-top: 30px;
 }
 
+/* Error message styling */
+.error-message {
+  font-size: 1.2rem;
+  color: red;
+  margin-top: 10px;
+}
+
 /* Album image styling */
 .album-cover {
   max-width: 400px;

diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchAlbum.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchAlbum.vue
@@ -3,6 +3,7 @@
     <!-- Album Keyword Form -->
     <form class="album-form text-center">
       <div class="form-group">
+        <p style="text-align: center;">Search Album with keyword, example: funcky</p><br>
         <label for="albumKeyword" class="form-label">Enter Album keyword</label>
         <input
           type="text"

diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchArtist.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchArtist.vue
@@ -3,6 +3,7 @@
       <!-- Artist Keyword Form -->
       <form class="album-form text-center">
         <div class="form-group">
+          <p style="text-align: center;">Search Artist with keyword, example: jay</p><br>
           <label for="artistKeyword" class="form-label">Enter Artist keyword</label>
           <input
             type="text"