feat(ui): add loading indicator and error handling

resources/js/components/Loading.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div
+        class="size-8 animate-spin rounded-full border-4 border-primary/30 border-t-primary"
+        role="status"
+        aria-label="Laden"
+    />
+</template>

resources/js/features/dashboard/pages/Index.vue

@@ -5,6 +5,7 @@ import { onMounted } from 'vue';
 import Price from '../components/Price.vue';
 import useDashboardViewModel from '../viewmodels/DashboardViewModel';
 import Error from '@/components/Error.vue';
+import Loading from '@/components/Loading.vue';
 
 const model = useDashboardViewModel();
 
@@ -17,6 +18,7 @@ onMounted(() => {
     <h1 class="mb-4 text-3xl font-black text-primary">
         {{ t('dashboard.title') }}
     </h1>
+    <div v-if="model.isLoading"></div>
     <div class="mb-4 flex flex-col gap-2" v-if="model.dashboardData.value">
         <h2 class="text-2xl font-black text-primary">
             {{ t('dashboard.electricity') }}
@@ -135,4 +137,5 @@ onMounted(() => {
         </div>
     </div>
     <Error :message="model.error.value" v-if="model.error.value" />
+    <Loading v-if="model.isLoading.value" />
 </template>

resources/js/features/history/pages/Index.vue

@@ -3,6 +3,8 @@ import { computed, onMounted, ref, watch } from 'vue';
 import useHistoryViewModel from '../viewmodels/HistoryViewModel';
 import moment from 'moment';
 import Chart from '../components/Chart.vue';
+import Loading from '@/components/Loading.vue';
+import Error from '@/components/Error.vue';
 
 const model = useHistoryViewModel();
 
@@ -29,5 +31,7 @@ const chartData = computed(
 
 <template>
     <input type="date" v-model="date" />
-    <Chart :data="chartData" />
+    <Loading v-if="model.isLoading.value" />
+    <Chart :data="chartData" v-if="chartData" />
+    <Error v-if="model.error.value" :message="model.error.value" />
 </template>

resources/js/features/history/viewmodels/HistoryViewModel.ts

@@ -1,10 +1,10 @@
 import { create } from 'axios';
 import { ref } from 'vue';
 import HistoryData = App.Features.History.Data.HistoryData;
-import moment from 'moment';
 
 export default function useHistoryViewModel() {
     const isLoading = ref<boolean>(false);
+    const error = ref<string>();
     const historyData = ref<HistoryData>();
 
     function getHistoryData(date: string) {
@@ -18,22 +18,13 @@ export default function useHistoryViewModel() {
                 },
             })
             .then((res) => {
-                console.log(
-                    res.data?.electricity.flatMap((e) => {
-                        if (!e.totalPriceTaxIncluded) {
-                            return;
-                        }
-
-                        return {
-                            label: moment(e.startDate).format('DD-MM-YYYY'),
-                            value: e.totalPriceTaxIncluded?.toPrecision(2),
-                        };
-                    }),
-                );
                 historyData.value = res.data;
             })
+            .catch((err) => {
+                error.value = err.response.data.message;
+            })
             .finally(() => (isLoading.value = false));
     }
 
-    return { isLoading, historyData, getHistoryData };
+    return { isLoading, historyData, error, getHistoryData };
 }