From a78c88d2287cc86fde5e15d90757a06c5f6c0705 Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Mon, 22 Jul 2024 08:30:02 +0200
Subject: [PATCH] #434: Show specific error message in FE via Toast pop up.

* If you want to start a study with e.g. an empty lime survey id, a Toast pop up will be shown, that the ID is missing.
* Add global Toast component to show erroneous API response.
* Add html required attribute if property is required (not only a * symbol next to the label).
* Add trim to v-model for String properties, to trim whitespaced on users input.
* Add error translations.
* Replace alter messages with Toast pop ups.
---
 src/App.vue                                   |   6 +
 src/components/TimelineList.vue               |   1 -
 src/components/dialog/ObservationDialog.vue   |  21 ++--
 .../dialog/shared/BooleanPropertyInput.vue    |   7 +-
 .../dialog/shared/IntegerPropertyInput.vue    |   7 +-
 .../shared/ObservationPropertyInput.vue       |   7 +-
 .../dialog/shared/StringListPropertyInput.vue |   8 +-
 .../dialog/shared/StringPropertyInput.vue     |   9 +-
 .../dialog/shared/StringTextPropertyInput.vue |   7 +-
 src/composable/toastService.ts                | 114 ++++++++++++++++++
 src/i18n/de.json                              |  10 ++
 src/i18n/en.json                              |  10 ++
 src/main.ts                                   |   2 +
 src/stores/studyStore.ts                      |   9 +-
 src/styles/more-light/theme.pcss              |   1 -
 src/views/StudyOverview.vue                   |  16 ++-
 16 files changed, 192 insertions(+), 43 deletions(-)
 create mode 100644 src/composable/toastService.ts

diff --git a/src/App.vue b/src/App.vue
index a9257b7d..67deaa38 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,10 +4,15 @@ Prevention -- A research institute of the Ludwig Boltzmann Gesellschaft,
 Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
 Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
+  import { ref, provide } from 'vue';
+  import Toast from 'primevue/toast';
   import Footer from './components/shared/Footer.vue';
   import Header from './components/shared/Header.vue';
   import { useRouter } from 'vue-router';
+
   const router = useRouter();
+  const toast = ref<Toast | null>(null);
+  provide('toast', toast);
 
   router.beforeEach((to) => {
     document.title = to.meta?.title ? to.meta.title + ' (More)' : 'More';
@@ -18,6 +23,7 @@ Licensed under the Elastic License 2.0. */
   <Header />
   <main class="mb-20 pt-14">
     <router-view />
+    <Toast ref="toast" />
   </main>
   <Footer />
 </template>
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index 0bbe0720..2bfab14a 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -430,7 +430,6 @@ Licensed under the Elastic License 2.0. */
         setupObservationAndInterventionFilterOptions(response.data);
       })
       .catch((e: AxiosError) => {
-        console.log(e);
         handleIndividualError(e, 'cannot list studyTimeline');
       });
   }
diff --git a/src/components/dialog/ObservationDialog.vue b/src/components/dialog/ObservationDialog.vue
index 2a34032f..86d432d4 100644
--- a/src/components/dialog/ObservationDialog.vue
+++ b/src/components/dialog/ObservationDialog.vue
@@ -29,9 +29,14 @@ Licensed under the Elastic License 2.0. */
   import AbsoluteScheduler from '../shared/Scheduler.vue';
   import { isObjectEmpty } from '../../utils/commonUtils';
   import { ScheduleType } from '../../models/Scheduler';
+  import { AxiosError } from 'axios';
+  import { useErrorHandling } from '../../composable/useErrorHandling';
+  import { useToastService } from '../../composable/toastService';
 
+  const { handleToastErrors, showErrorToast } = useToastService();
   const dialog = useDialog();
   const { componentsApi } = useComponentsApi();
+  const { handleIndividualError } = useErrorHandling();
   const studyStore = useStudyStore();
   const { t } = useI18n();
 
@@ -65,8 +70,6 @@ Licensed under the Elastic License 2.0. */
 
   const studyGroupId = ref(observation.studyGroupId);
 
-  const jsonError = ref();
-
   function getLabelForChoiceValue(
     value: any,
     values: MoreTableChoice[],
@@ -124,17 +127,14 @@ Licensed under the Elastic License 2.0. */
           if (report.valid) {
             save(parsedProps);
           } else {
-            jsonError.value = (report.errors || [])
-              .concat(report.warnings || [])
-              .map((e) => e.message)
-              .join(', ');
+            handleToastErrors(report);
           }
+        })
+        .catch((e: AxiosError) => {
+          handleIndividualError(e, 'cannot fetch study');
         });
     } catch (e: any) {
-      jsonError.value = t('observation.error.noValidField', {
-        key: e.key,
-        message: e.message,
-      });
+      showErrorToast(t('global.error.general'));
     }
   }
 
@@ -276,7 +276,6 @@ Licensed under the Elastic License 2.0. */
       </div>
       <div v-if="properties.length" class="col-start-0 col-span-8">
         <h5 class="mb-2">{{ $t('global.labels.config') }}</h5>
-        <div v-if="jsonError" class="error mb-3">{{ jsonError }}</div>
         <div class="col-start-0 col-span-8">
           <div v-if="properties">
             <PropertyInputs
diff --git a/src/components/dialog/shared/BooleanPropertyInput.vue b/src/components/dialog/shared/BooleanPropertyInput.vue
index d5752777..33c9d869 100644
--- a/src/components/dialog/shared/BooleanPropertyInput.vue
+++ b/src/components/dialog/shared/BooleanPropertyInput.vue
@@ -31,9 +31,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h5 class="font-bold">
-      <label v-if="property.name" :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label v-if="property.name" :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h5>
     <div v-if="props.property.description" :id="`${property.id}-help`">
       {{ $t(props.property.description) }}
@@ -44,6 +44,7 @@ Licensed under the Elastic License 2.0. */
         v-model="booleanChecked"
         :label="property.name"
         class="mr-2"
+        :required="property.required"
         :binary="true"
         @change="emit('onBooleanChange', booleanChecked)"
       />
diff --git a/src/components/dialog/shared/IntegerPropertyInput.vue b/src/components/dialog/shared/IntegerPropertyInput.vue
index 4b310e1a..bdda265a 100644
--- a/src/components/dialog/shared/IntegerPropertyInput.vue
+++ b/src/components/dialog/shared/IntegerPropertyInput.vue
@@ -31,9 +31,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="gap-1">
     <h5 class="font-bold">
-      <label :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h5>
 
     <div v-if="props.property.description" :id="`${property.id}-help`">
@@ -44,6 +44,7 @@ Licensed under the Elastic License 2.0. */
       :id="property.id"
       v-model="property.value"
       type="number"
+      :required="property.required"
       :max="property.max"
       :min="property.min"
       :disabled="!editable"
diff --git a/src/components/dialog/shared/ObservationPropertyInput.vue b/src/components/dialog/shared/ObservationPropertyInput.vue
index 44719394..fc1c701d 100644
--- a/src/components/dialog/shared/ObservationPropertyInput.vue
+++ b/src/components/dialog/shared/ObservationPropertyInput.vue
@@ -69,9 +69,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h6 class="font-bold">
-      <label v-if="property.name" :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label v-if="property.name" :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h6>
     <Dropdown
       :id="property.id"
@@ -79,6 +79,7 @@ Licensed under the Elastic License 2.0. */
       :options="observationList"
       option-label="title"
       class="w-full"
+      :required="property.required"
       :aria-describedby="`${property.id}-help`"
       :disabled="!editable"
       :placeholder="$t(props.property.description)"
diff --git a/src/components/dialog/shared/StringListPropertyInput.vue b/src/components/dialog/shared/StringListPropertyInput.vue
index 32dc68e4..721d1a92 100644
--- a/src/components/dialog/shared/StringListPropertyInput.vue
+++ b/src/components/dialog/shared/StringListPropertyInput.vue
@@ -40,10 +40,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h6 class="font-bold">
-      <label
-        >{{ $t(property.name) }}<span v-if="property.required">*</span
-        ><span v-if="property.required">*</span></label
-      >
+      <label>
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h6>
     <div>{{ $t(props.property.description) }}</div>
     <div v-if="editable" class="flex w-full flex-col gap-1">
@@ -54,6 +53,7 @@ Licensed under the Elastic License 2.0. */
         :class="!editable && property.value?.[index - 1] ? 'w-fit' : 'hidden'"
         :value="property.value?.[index - 1]"
         type="text"
+        :required="property.required"
         :disabled="!editable"
         :placeholder="t('global.labels.option', { value: index })"
         style="display: block"
diff --git a/src/components/dialog/shared/StringPropertyInput.vue b/src/components/dialog/shared/StringPropertyInput.vue
index dc32adba..5c53770e 100644
--- a/src/components/dialog/shared/StringPropertyInput.vue
+++ b/src/components/dialog/shared/StringPropertyInput.vue
@@ -31,9 +31,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h6 class="font-bold">
-      <label v-if="property.name" :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label v-if="property.name" :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h6>
     <div v-if="props.property.description" :id="`${property.id}-help`">
       {{ $t(props.property.description) }}
@@ -41,9 +41,10 @@ Licensed under the Elastic License 2.0. */
 
     <InputText
       :id="property.id"
-      v-model="property.value"
+      v-model.trim="property.value"
       type="text"
       class="w-full"
+      :required="property.required"
       :aria-describedby="`${property.id}-help`"
       :disabled="!editable"
       :placeholder="
diff --git a/src/components/dialog/shared/StringTextPropertyInput.vue b/src/components/dialog/shared/StringTextPropertyInput.vue
index 71eaf2cc..7fafc12a 100644
--- a/src/components/dialog/shared/StringTextPropertyInput.vue
+++ b/src/components/dialog/shared/StringTextPropertyInput.vue
@@ -31,9 +31,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h6 class="font-bold">
-      <label v-if="property.name" :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label v-if="property.name" :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h6>
     <div v-if="props.property.description" :id="`${property.id}-help`">
       {{ $t(props.property.description) }}
@@ -44,6 +44,7 @@ Licensed under the Elastic License 2.0. */
       v-model="property.value"
       type="text"
       class="w-full"
+      :required="property.required"
       :aria-describedby="`${property.id}-help`"
       :disabled="!editable"
       :placeholder="
diff --git a/src/composable/toastService.ts b/src/composable/toastService.ts
new file mode 100644
index 00000000..00be4507
--- /dev/null
+++ b/src/composable/toastService.ts
@@ -0,0 +1,114 @@
+/*
+ Copyright LBI-DHP and/or licensed to LBI-DHP under one or more
+ contributor license agreements (LBI-DHP: Ludwig Boltzmann Institute
+ for Digital Health and Prevention -- A research institute of the
+ Ludwig Boltzmann Gesellschaft, Oesterreichische Vereinigung zur
+ Foerderung der wissenschaftlichen Forschung).
+ Licensed under the Elastic License 2.0.
+ */
+import { inject, Ref } from 'vue';
+import { ToastServiceMethods } from 'primevue/toastservice';
+import { ToastMessageOptions } from 'primevue/toast';
+import { useI18n } from 'vue-i18n';
+import {
+  ValidationReport,
+  ValidationReportItem,
+} from '../generated-sources/openapi';
+
+/**
+ * This composable is responsible for showing errors from Backend to the Client with a Toast popup.
+ */
+export function useToastService(): any {
+  const toast: Ref<ToastServiceMethods> | undefined =
+    inject<Ref<ToastServiceMethods>>('toast');
+  const { t } = useI18n();
+
+  if (!toast) {
+    throw new Error('ToastService is not provided');
+  }
+
+  const handleToastErrors = (err: any): void => {
+    processConfigurationException(err);
+    processOtherExceptions(err);
+  };
+
+  function processConfigurationException(report: ValidationReport): void {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+
+    report.errors?.forEach((error: ValidationReportItem) => {
+      const errorMessage = error.message
+        ? t(error.message, { value: error.propertyId })
+        : null;
+      if (errorMessage) {
+        errors.push(errorMessage);
+      }
+    });
+
+    report.warnings?.forEach((warning: ValidationReportItem) => {
+      const warningMessage = warning.message
+        ? t(warning.message, { value: warning.propertyId })
+        : null;
+      if (warningMessage) {
+        warnings.push(warningMessage);
+      }
+    });
+
+    if (errors.length) {
+      showErrorToast(errors.join('\n'));
+    }
+
+    if (warnings.length) {
+      showWarningToast(warnings.join('\n'));
+    }
+  }
+
+  function processOtherExceptions(error: any): void {
+    if (error.message) {
+      showErrorToast(error.message);
+    }
+  }
+
+  const showToast = (
+    severity: ToastMessageOptions['severity'],
+    summary: string,
+    detail: string,
+  ): void => {
+    if (toast.value) {
+      toast.value.add({ severity, summary, detail });
+    } else {
+      console.error('Toast reference is not set');
+    }
+  };
+
+  const showErrorToast = (detail: string): void => {
+    if (toast.value) {
+      const severity: ToastMessageOptions['severity'] = 'error';
+      const summary = t('global.error.type.error');
+      const life: ToastMessageOptions['life'] = 5000;
+
+      toast.value.add({ severity, summary, detail, life });
+    } else {
+      console.error('Toast reference is not set');
+    }
+  };
+
+  const showWarningToast = (detail: string): void => {
+    if (toast.value) {
+      const severity: ToastMessageOptions['severity'] = 'warn';
+      const summary = t('global.error.type.warning');
+      const life: ToastMessageOptions['life'] = 5000;
+
+      toast.value.add({ severity, summary, detail, life });
+    } else {
+      console.error('Toast reference is not set');
+    }
+  };
+
+  return {
+    handleToastErrors,
+    showToast,
+    showErrorToast,
+    showWarningToast,
+  };
+}
diff --git a/src/i18n/de.json b/src/i18n/de.json
index df4d879a..d6790e09 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -55,6 +55,16 @@
     },
     "footer": {
       "aboutMore": "Über More"
+    },
+    "error": {
+      "type": {
+        "error": "Fehler",
+        "warning": "Warnung",
+        "info": "Info"
+      },
+      "general": "Ein allgemeiner Fehler ist aufgetreten.",
+      "required": "Erforderlicher Wert '{value}' fehlt.",
+      "immutable": "Der Wert von '{value}' darf nicht geändert werden."
     }
   },
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c6863e3a..7347556e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -55,6 +55,16 @@
     },
     "footer": {
       "aboutMore": "About More"
+    },
+    "error": {
+      "type": {
+        "error": "Error",
+        "warning": "Warning",
+        "info": "Info"
+      },
+      "general": "A General error occurred.",
+      "required": "Required value '{value}' missing.",
+      "immutable": "The value '{value}' is immutable and cannot be changed."
     }
   },
 
diff --git a/src/main.ts b/src/main.ts
index 39586141..67c9a248 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,6 +15,7 @@ import PrimeVue from 'primevue/config';
 import Tooltip from 'primevue/tooltip';
 import ConfirmationService from 'primevue/confirmationservice';
 import DialogService from 'primevue/dialogservice';
+import ToastService from 'primevue/toastservice';
 // Router
 import { Router } from './router';
 import AuthService from './service/AuthService';
@@ -106,6 +107,7 @@ app.use(Router);
 app.use(PrimeVue);
 app.use(ConfirmationService);
 app.use(DialogService);
+app.use(ToastService);
 app.use(pinia);
 
 app.mount('#app');
diff --git a/src/stores/studyStore.ts b/src/stores/studyStore.ts
index 61ded260..5ee4b87f 100644
--- a/src/stores/studyStore.ts
+++ b/src/stores/studyStore.ts
@@ -14,13 +14,14 @@ import { AxiosError, AxiosResponse } from 'axios';
 import { useErrorHandling } from '../composable/useErrorHandling';
 import { useStudyGroupStore } from './studyGroupStore';
 import { DownloadData } from '../models/DataDownloadModel';
+import { useToastService } from '../composable/toastService';
 
 export const useStudyStore = defineStore('study', () => {
   const { studiesApi } = useStudiesApi();
   const { importExportApi } = useImportExportApi();
   const { handleIndividualError } = useErrorHandling();
   const studyGroupStore = useStudyGroupStore();
-
+  const { handleToastErrors } = useToastService();
   // State
   const study: Ref<Study> = ref({});
   const studies: Ref<Study[]> = ref([]);
@@ -58,15 +59,11 @@ export const useStudyStore = defineStore('study', () => {
           study.value.status = status;
         })
         .catch((e: AxiosError) => {
-          alert(
-            `Could not update study status: ${
-              (e.response?.data as any)?.message
-            }`,
-          );
           handleIndividualError(
             e,
             `Could not update study status ${study.value.studyId}`,
           );
+          handleToastErrors(e.response?.data);
         });
     }
   }
diff --git a/src/styles/more-light/theme.pcss b/src/styles/more-light/theme.pcss
index 5214ee8e..3603dcf5 100644
--- a/src/styles/more-light/theme.pcss
+++ b/src/styles/more-light/theme.pcss
@@ -5356,7 +5356,6 @@
 }
 .p-toast .p-toast-message .p-toast-message-content {
   padding: var(--content-padding);
-  border-width: 0 0 0 6px;
 }
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
   margin: 0 0 0 var(--content-padding);
diff --git a/src/views/StudyOverview.vue b/src/views/StudyOverview.vue
index b9ed3209..60ae9a51 100644
--- a/src/views/StudyOverview.vue
+++ b/src/views/StudyOverview.vue
@@ -13,17 +13,25 @@ Licensed under the Elastic License 2.0. */
   import { useStudyStore } from '../stores/studyStore';
   import { useStudyGroupStore } from '../stores/studyGroupStore';
   import { StudyStatus } from '../generated-sources/openapi';
+  import { AxiosError } from 'axios';
+  import { useToastService } from '../composable/toastService';
 
+  const { handleToastErrors } = useToastService();
   const route = useRoute();
   const studyStore = useStudyStore();
   const studyGroupStore = useStudyGroupStore();
   const studyId = parseInt(route.params.studyId as string);
 
   async function processUpdatedStudyStatus(status: StudyStatus): Promise<void> {
-    await studyStore.updateStudyStatus(status).then(() => {
-      // To update the start/plannedStart/end Date in the UI immediately
-      studyStore.getStudy(studyId);
-    });
+    await studyStore
+      .updateStudyStatus(status)
+      .then(() => {
+        // To update the start/plannedStart/end Date in the UI immediately
+        studyStore.getStudy(studyId);
+      })
+      .catch((e: AxiosError) => {
+        handleToastErrors(e.response?.data);
+      });
   }
 
   studyStore.getStudy(studyId);