feat(dashboard): handle API errors and enhance translations

resources/js/features/dashboard/components/Price.vue

@@ -3,7 +3,7 @@ import moment from 'moment';
 
 defineProps<{
     label: string;
-    price: number | null | undefined;
+    price: number;
     time: moment.Moment | string;
 }>();
 </script>

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

@@ -4,6 +4,7 @@ import moment from 'moment';
 import { onMounted } from 'vue';
 import Price from '../components/Price.vue';
 import useDashboardViewModel from '../viewmodels/DashboardViewModel';
+import Error from '@/components/Error.vue';
 
 const model = useDashboardViewModel();
 
@@ -16,12 +17,15 @@ onMounted(() => {
     <h1 class="mb-4 text-3xl font-black text-primary">
         {{ t('dashboard.title') }}
     </h1>
-    <div class="mb-4 flex flex-col gap-2">
+    <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') }}
         </h2>
         <div class="flex flex-wrap gap-4">
             <Price
+                v-if="
+                    model.dashboardData.value?.electricity.totalPriceTaxIncluded
+                "
                 :label="t('dashboard.current_electricity_price')"
                 :price="
                     model.dashboardData.value?.electricity.totalPriceTaxIncluded
@@ -29,6 +33,10 @@ onMounted(() => {
                 :time="moment(model.dashboardData.value?.electricity.startDate)"
             />
             <Price
+                v-if="
+                    model.dashboardData.value?.electricityCheapest
+                        ?.totalPriceTaxIncluded
+                "
                 :label="t('dashboard.cheapest_electricity_price')"
                 :price="
                     model.dashboardData.value?.electricityCheapest
@@ -42,6 +50,10 @@ onMounted(() => {
                 "
             />
             <Price
+                v-if="
+                    model.dashboardData.value?.electricityDurable
+                        ?.totalPriceTaxIncluded
+                "
                 :label="t('dashboard.durable_electricity_price')"
                 :price="
                     model.dashboardData.value?.electricityDurable
@@ -55,6 +67,10 @@ onMounted(() => {
                 "
             />
             <Price
+                v-if="
+                    model.dashboardData.value?.electricityPriciest
+                        ?.totalPriceTaxIncluded
+                "
                 :label="t('dashboard.priciest_electricity_price')"
                 :price="
                     model.dashboardData.value?.electricityPriciest
@@ -69,12 +85,13 @@ onMounted(() => {
             />
         </div>
     </div>
-    <div class="mb-4 flex flex-col gap-2">
+    <div class="mb-4 flex flex-col gap-2" v-if="model.dashboardData.value">
         <h2 class="text-2xl font-black text-primary">
             {{ t('dashboard.gas') }}
         </h2>
         <div class="flex flex-wrap gap-4">
             <Price
+                v-if="model.dashboardData.value?.gas.totalPriceTaxIncluded"
                 :label="t('dashboard.current_gas_price')"
                 :price="model.dashboardData.value?.gas.totalPriceTaxIncluded"
                 :time="
@@ -84,6 +101,10 @@ onMounted(() => {
                 "
             />
             <Price
+                v-if="
+                    model.dashboardData.value?.gasCheapest
+                        ?.totalPriceTaxIncluded
+                "
                 :label="t('dashboard.cheapest_gas_price')"
                 :price="
                     model.dashboardData.value?.gasCheapest
@@ -96,6 +117,10 @@ onMounted(() => {
                 "
             />
             <Price
+                v-if="
+                    model.dashboardData.value?.gasPriciest
+                        ?.totalPriceTaxIncluded
+                "
                 :label="t('dashboard.priciest_gas_price')"
                 :price="
                     model.dashboardData.value?.gasPriciest
@@ -109,4 +134,5 @@ onMounted(() => {
             />
         </div>
     </div>
+    <Error :message="model.error.value" v-if="model.error.value" />
 </template>

resources/js/features/dashboard/viewmodels/DashboardViewModel.ts

@@ -4,6 +4,7 @@ import DashboardData = App.Features.Dashboard.Data.DashboardData;
 
 export default function useDashboardViewModel() {
     const isLoading = ref<boolean>(false);
+    const error = ref<string>();
     const dashboardData = ref<DashboardData>();
 
     function getDashboardData() {
@@ -15,8 +16,11 @@ export default function useDashboardViewModel() {
             .then((res) => {
                 dashboardData.value = res.data;
             })
+            .catch((err) => {
+                error.value = err.response.data.message;
+            })
             .finally(() => (isLoading.value = false));
     }
 
-    return { isLoading, dashboardData, getDashboardData };
+    return { isLoading, dashboardData, error, getDashboardData };
 }