Creating Band edit page

software/src/stores/account.store.ts

@@ -95,11 +95,7 @@ export const useAccountStore = defineStore("accountStore", {
             password: this.registerData.password
           }
 
-          await this.login()
-            .then(result => {
-              this.fetchInProgress = false
-              return true
-            })
+          this.fetchInProgress = false
         })
         .catch((error) => {
           if (error.status == 400) {

software/src/stores/band.store.ts

@@ -1,10 +1,12 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { BandApiModel } from "../data/models/acts/bandApiModel";
-import { fetchAllBands, fetchBandByName } from "../data/api/bandApi";
+import { fetchAllBands, fetchBandByName, patchBand, postBand } from "../data/api/bandApi";
 import { BandDetailsApiModel } from "../data/models/acts/bandDetailsApiModel";
 import { GenreModel } from "@/data/models/acts/genreModel";
 import { fetchAllGenres } from "@/data/api/genreApi";
+import { useFeedbackStore } from "./feedback.store";
+import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
 
 export const useBandStore = defineStore("bandStore", {
   state: () => ({
@@ -21,7 +23,10 @@ export const useBandStore = defineStore("bandStore", {
     availableGenres: ref<Array<GenreModel>>([]),
     
     /** Request to server sent, waiting for data response */
-    fetchInProgress: ref(false)
+    fetchInProgress: ref(false),
+
+    /** Show or hide the edit dialog for edit a band */
+    showBandEditDialog: ref(false)
   }),
 
   actions: {
@@ -66,11 +71,74 @@ export const useBandStore = defineStore("bandStore", {
     async getBand(name: string) {
       this.fetchInProgress = true
 
-      fetchBandByName(name)
+      await fetchBandByName(name)
         .then(result => {
           this.band = result.data
           this.fetchInProgress = false
         })
+    },
+
+    /**
+     * Prepare edit dialog for new band, opens it
+     */
+    newBand() {
+      this.band = new BandDetailsApiModel()
+
+      this.showBandEditDialog = true
+    },
+
+    /**
+     * Edit a band. Fetch all information about the band, opens the edit dialog
+     * 
+     * @param name Name of band to edit
+     */
+    async editBand(name: string) {
+      await this.getBand(name)
+      
+      this.showBandEditDialog = true
+    },
+
+    /**
+     * Save band in this store to the database
+     */
+    saveBand() {
+      const feedbackStore = useFeedbackStore()
+      this.fetchInProgress = true
+
+      if (this.band.id == undefined) {
+        postBand(this.band)
+          .then(result => {
+            if (result.status == 200) {
+              feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDSUCCESSFUL)
+
+              this.getBands()
+              this.showBandEditDialog = false
+            } else {
+              feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDERROR)
+            }
+          })
+      } else {
+        patchBand(this.band)
+          .then(result => {
+            if (result.status == 200) {
+              feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDSUCCESSFUL)
+
+              this.getBands()
+              this.showBandEditDialog = false
+            } else {
+              feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDERROR)
+            }
+          })
+      }
+    },
+
+    /**
+     * Delete a band by it's identifier
+     * 
+     * @param id Id of the band in the database
+     */
+    deleteBand(id: number) {
+      // todo
     }
   }
 })

software/src/stores/feedback.store.ts

@@ -131,6 +131,25 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.ORDERPLACESUCCESSFUL: {
           this.title = this.i18n.t('bannerMessages.orderPlaceSuccessfull'); break;
         }
+
+
+        ////////// API Endpoint /bands //////////
+
+        case BannerStateEnum.BANDDELETEERROR: {
+          this.title = this.i18n.t('bannerMessages.bandDeleteError'); break;
+        }
+
+        case BannerStateEnum.BANDDELETESUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.bandDeleteSuccessful'); break;
+        }
+
+        case BannerStateEnum.BANDSAVEDERROR: {
+          this.title = this.i18n.t('bannerMessages.bandSavedError'); break;
+        }
+
+        case BannerStateEnum.BANDSAVEDSUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.bandSavedSuccessful'); break;
+        }
       }
 
 
@@ -142,8 +161,8 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN:
         case BannerStateEnum.ACCOUNTREGISTERERROR:
         case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE:
-        case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
-        case BannerStateEnum.PRODUCTDELETEERROR:
+        case BannerStateEnum.BANDDELETEERROR:
+        case BannerStateEnum.BANDSAVEDERROR:
           this.color = "red"
           break;
         
@@ -154,8 +173,9 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL:
         case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL:
         case BannerStateEnum.ORDERPLACESUCCESSFUL:
-        case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
-        case BannerStateEnum.PRODUCTCREATEERROR:
+        case BannerStateEnum.BANDDELETESUCCESSFUL:
+        case BannerStateEnum.BANDSAVEDSUCCESSFUL:
+        case BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL:
           this.color = "green"
           break;
 
@@ -192,14 +212,6 @@ export const useFeedbackStore = defineStore("feedbackStore", {
           this.icon = "mdi-account"
           break;
 
-
-        case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
-        case BannerStateEnum.PRODUCTDELETEERROR:
-        case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
-        case BannerStateEnum.PRODUCTCREATEERROR:
-          this.icon = "mdi-store"
-          break;
-
         case BannerStateEnum.EXERCISESOLVED01:
         case BannerStateEnum.EXERCISESOLVED02:
         case BannerStateEnum.EXERCISESOLVED11:
@@ -214,6 +226,7 @@ export const useFeedbackStore = defineStore("feedbackStore", {
           this.icon = "mdi-check-circle-outline"
           break;
         
+      
         case BannerStateEnum.DATABASERESETSUCCESSFUL:
           this.icon = "mdi-database-refresh"
           break;
@@ -242,6 +255,13 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL:
           this.icon = "mdi-account-reactivate"
           break;
+
+        case BannerStateEnum.BANDDELETEERROR:
+        case BannerStateEnum.BANDDELETESUCCESSFUL:
+        case BannerStateEnum.BANDSAVEDERROR:
+        case BannerStateEnum.BANDSAVEDSUCCESSFUL:
+          this.icon = "mdi-guitar-electric"
+          break;
       }
 
       this.showBanner = true