Account Dashboard Card

software/src/data/api/accountApi.ts

@@ -3,6 +3,10 @@ import { AccountModel } from "../models/user/accountModel"
 
 const BASE_URL = "http://localhost:3000/accounts"
 
+export async function fetchAllAccounts() {
+  return await axios.get(BASE_URL)
+}
+
 export async function loginAccount(username: string, password: string) {
   return await axios.post(BASE_URL + "/login", { 
       username: username,

software/src/pages/admin/dashboardPage/index.vue

@@ -24,6 +24,7 @@ exerciseStore.solveExercise(2, 1)
 bandStore.getBands()
 locationStore.getLocations()
 genreStore.getGenres()
+accountStore.getAllAccounts()
 concertStore.getConcerts()
   .then(result => {
     for(let concert of concertStore.concerts) {
@@ -106,13 +107,24 @@ concertStore.getConcerts()
           :title="$t('account.account', 2)"
           icon="mdi-account"
         >
+          <div class="text-h4 text-center">
+            {{ accountStore.accounts.length }} {{ $t('account.account', accountStore.accounts.length) }}
+          </div>
+
+          <template #actions>
+            <outlined-button
+              @click="router.push('/admin/accounts')"
+            >
+              {{ $t('misc.actions.more') }}
+            </outlined-button>
+          </template>
         </card-view>
       </v-col>
 
       <v-col>
         <card-view
           :title="$t('band.genre', 2)"
-          icon="mdi-account"
+          icon="mdi-music-clef-treble"
         >
           <div class="text-h4 text-center">
             {{ genreStore.genres.length }} {{ $t('band.genre', 2) }}

software/src/stores/account.store.ts

@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 import { AccountModel } from "../data/models/user/accountModel";
 import { OrderModel } from "../data/models/ordering/orderModel";
 import { useFeedbackStore } from "./feedback.store";
-import { loginAccount, registerAccount, updateAccount } from "../data/api/accountApi";
+import { fetchAllAccounts, loginAccount, registerAccount, updateAccount } from "../data/api/accountApi";
 import { fetchUserOrders } from "../data/api/orderApi";
 import { BannerStateEnum } from "../data/enums/bannerStateEnum";
 import { AddressModel } from "../data/models/user/addressModel";
@@ -11,18 +11,23 @@ import { PaymentModel } from "../data/models/user/paymentModel";
 import { AccountApiModel } from "../data/models/user/accountApiModel";
 import { ref } from "vue";
 import { OrderApiModel } from "@/data/models/apiEndpoints/orderApiModel";
+import { LocationApiModel } from "@/data/models/locations/locationApiModel";
 
 export const useAccountStore = defineStore("accountStore", {
   state: () => ({
+    /** All accounts */
+    accounts: ref<Array<LocationApiModel>>([]),
+
     /** Useraccount which is currently logged in */
     userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountApiModel()),
 
     /** User input on login screen */
+    // todo: Remove JSON!
     loginData: ref<{ username: String, password: String}>(
       { username: "duranduran", password: "H4nn0ver" }
     ),
 
-    /** */
+    /** Buffer for register data */
     registerData: ref<AccountModel>(new AccountModel()),
 
     /** All orders of the user */
@@ -33,6 +38,16 @@ export const useAccountStore = defineStore("accountStore", {
   }),
 
   actions: {
+    async getAllAccounts() {
+      this.fetchInProgress = true
+
+      fetchAllAccounts()
+        .then(response => {
+          this.accounts = response.data
+          this.fetchInProgress = false
+        })
+    },
+
     /**
      * Start the login process
      *