Merge pull request #22 from redlink-gmbh/MORE-Platform#390-error-handling-and-action-handling-for-goals

MORE-Platform#322: add 409 error handling for goal meassurements and categories

Author: iaigner

src/components/GoalList.vue

@@ -419,6 +419,7 @@
         factory: factoryForType(component?.type),
         componentType: 'goalTemplate',
         hasComponentCategories: categoryTopicOptions.value,
+        hasComponentKind: component?.categoryKind,
         errorMessage: component?.errorMessage,
         hasSimpleScheduler: goalConfig.value?.schedule?.map((item) => {
           return {
@@ -513,11 +514,15 @@
         </div>
       </div>
       <div class="global-goal-settings">
-        <GoalTemplateMessurementSection :study-id="studyId" class="mb-8" />
+        <GoalTemplateMessurementSection
+          :study-id="studyId"
+          class="mb-8"
+          :actions-disabled="!actionsVisible" />
         <GoalTemplateCategorySection
           class="mb-8"
           :study-id="studyId"
           :study-status="studyStatus"
+          :actions-disabled="!actionsVisible"
         />
       </div>
     </div>

src/components/dialog/ComponentDialog.vue

@@ -36,6 +36,7 @@ Licensed under the Elastic License 2.0. */
   import { extractCurrentLimeDomain } from '@/utils/limeSurveyUtils';
   import { scrollToFirstError } from '@/utils/componentUtils';
   import InfoWarningErrorSection from '@/components/shared/InfoWarningErrorSection.vue';
+  import PillItem from '@/components/shared/PillItem.vue';
 
   const { handleToastErrors, showErrorToast } = useToastService();
   const dialog = useDialog();
@@ -65,6 +66,7 @@ Licensed under the Elastic License 2.0. */
   const simpleSchedulerValues = dialogRef.value.data.simpleSchedulerValues;
   const hasComponentCategories = dialogRef.value.data
     .hasComponentCategories as MoreTableChoice[];
+  const hasComponentKind = dialogRef.value.data.hasComponentKind as string;
   const editable =
     studyStore.study.status === StudyStatus.Draft ||
     studyStore.study.status === StudyStatus.Paused ||
@@ -265,7 +267,7 @@ Licensed under the Elastic License 2.0. */
             .map((s) => s.key) ?? [],
         studyGroupId: studyGroupId.value,
         categories: {
-          kind: component.categories?.kind ?? 'behavioral',
+          kind: hasComponentKind ?? 'behavioral',
           topics: categories.value,
         },
       };
@@ -339,7 +341,7 @@ Licensed under the Elastic License 2.0. */
 
     <info-warning-error-section
       class="mb-4"
-      :error-message="errorMessage"
+      :error-message="errorMessage || undefined"
       :error-label="t('global.labels.error')"
     />
 
@@ -379,16 +381,30 @@ Licensed under the Elastic License 2.0. */
         <div v-if="getError('categories')" class="error error-label mb-4">
           {{ getError('categories') }}
         </div>
-        <MultiSelect
-          v-model="categories"
-          :options="hasComponentCategories"
-          option-label="label"
-          option-value="value"
-          class="w-full"
-          :show-toggle-all="false"
-          :disabled="!editable"
-          :placeholder="$t('global.placeholder.chooseDropdownOptionDefault')"
-        ></MultiSelect>
+        <div class="flex flex-row flex-nowrap items-center gap-6 text-nowrap">
+          <div class="flex w-full min-w-0 items-center gap-2">
+            <span class="font-bold whitespace-nowrap">{{t('goaltemplate.props.categoryTitle')}}:</span>
+            <MultiSelect
+              v-model="categories"
+              :options="hasComponentCategories"
+              option-label="label"
+              option-value="value"
+              class="w-full"
+              :show-toggle-all="false"
+              :disabled="!editable"
+              :placeholder="
+                $t('global.placeholder.chooseDropdownOptionDefault')
+              "
+            ></MultiSelect>
+          </div>
+          <div
+            v-if="hasComponentCategories"
+            class="flex items-center gap-2 whitespace-nowrap"
+          >
+            <span class="font-bold">{{t('goaltemplate..props.goalType')}}: </span>
+            <pill-item :label="hasComponentKind" />
+          </div>
+        </div>
       </div>
       <div v-if="hasSimpleScheduler" class="col-span-8 col-start-0">
         <h5 class="mb-1">{{ $t('scheduler.singular') }}*</h5>

src/components/dialog/DeleteMoreTableRowDialog.vue

@@ -4,8 +4,9 @@ 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 { inject } from 'vue';
+  import { inject, ref } from 'vue';
   import Button from 'primevue/button';
+  import InfoWarningErrorSection from '@/components/shared/InfoWarningErrorSection.vue';
   import WarningSection from './shared/WarningSection.vue';
 
   const dialogRef: any = inject('dialogRef');
@@ -16,9 +17,31 @@ Licensed under the Elastic License 2.0. */
   const elTitle: string = dialogRef?.value?.data?.elTitle;
   const elInfoTitle: string = dialogRef?.value?.data?.elInfoTitle;
   const elInfoDesc: string = dialogRef?.value?.data?.elInfoDesc;
+  const onDelete: ((row: any) => Promise<void>) | undefined =
+    dialogRef?.value?.data?.onDelete;
 
-  function deleteRowEl(): void {
-    dialogRef.value.close(row);
+  const errorMessage = ref<string | null>(null);
+  const isLoading = ref(false);
+
+  async function deleteRowEl(): Promise<void> {
+    if (onDelete) {
+      errorMessage.value = null;
+      isLoading.value = true;
+      try {
+        await onDelete(row);
+        dialogRef.value.close(row);
+      } catch (error: any) {
+        if (error.response?.status === 409) {
+          errorMessage.value = error.errorMessage || 'Conflict';
+        } else {
+          errorMessage.value = 'An error occurred';
+        }
+      } finally {
+        isLoading.value = false;
+      }
+    } else {
+      dialogRef.value.close(row);
+    }
   }
 
   function closeDialog(): void {
@@ -37,19 +60,27 @@ Licensed under the Elastic License 2.0. */
       <div>{{ elInfoDesc }}</div>
     </div>
 
+    <info-warning-error-section
+      v-if="errorMessage"
+      class="mt-4"
+      :error-message="errorMessage || undefined"
+    />
+
     <WarningSection :confirm-msg="confirmMsg" :warning-msg="warningMsg" />
 
     <div class="flex flex-row items-center justify-end">
       <Button
         type="button"
         class="p-button btn-gray !mr-3"
         :label="$t('global.labels.close')"
+        :disabled="isLoading"
         @click="closeDialog"
       />
       <Button
         type="button"
         class="p-button btn-important ml-2"
         :label="$t('global.labels.delete')"
+        :loading="isLoading"
         @click="deleteRowEl"
       />
     </div>

src/components/shared/InfoWarningErrorSection.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
   interface Props {
     isWarning?: boolean;
-    errorMessage: string;
-    errorLabel: string;
+    errorMessage?: string;
+    errorLabel?: string;
   }
 
   withDefaults(defineProps<Props>(), {
     isWarning: false,
+    errorMessage: '',
+    errorLabel: '',
   });
 </script>
 
@@ -16,11 +18,12 @@
     :class="[
       'rounded border px-4 py-2',
       isWarning
-        ? 'border-yellow-400 bg-yellow-50 p-4'
+        ? 'border-yellow-400 bg-yellow-50 pt-4'
         : 'border-red-700 bg-red-50',
     ]"
   >
     <div
+      v-if="errorLabel"
       :class="[
         'flex items-center gap-1',
         isWarning ? 'text-yellow-700' : 'text-red-700',
@@ -30,7 +33,6 @@
     </div>
     <div
       :class="[
-        'mt-1',
         isWarning ? 'text-yellow-700' : 'text-red-700',
       ]"
     >

src/components/shared/PillItem.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  interface Props {
+    label: string;
+    textColor?: string;
+    bgColor?: string;
+  }
+
+  defineProps<Props>();
+</script>
+
+<template>
+  <div
+    :class="[
+      'pill rounded border px-2 py-1',
+      textColor
+        ? `border-${textColor} text-${textColor}`
+        : 'border-gray-500 text-gray-500',
+      bgColor ? `bg-${bgColor}` : 'bg-gray-100',
+    ]"
+  >
+    {{ label }}
+  </div>
+</template>

src/components/subComponents/GoalTemplateCategorySection.vue

@@ -13,6 +13,7 @@
   import InputText from 'primevue/inputtext';
   import { GoalTopic, StudyRole, StudyStatus } from '@gs';
   import MoreTable from '@/components/shared/MoreTable.vue';
+  import { useToastService } from '@/composable/toastService';
   import {
     MoreTableAction,
     MoreTableColumn,
@@ -26,11 +27,17 @@
   interface Props {
     studyId: number;
     studyStatus: StudyStatus;
+    actionsDisabled?: boolean;
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    actionsDisabled: false,
+  });
+  const { showErrorToast } = useToastService();
 
-  const { data: goalConfig } = useGoalConfig(props.studyId) as { data: { value: StudyGoalConfigData | undefined } };
+  const { data: goalConfig } = useGoalConfig(props.studyId) as {
+    data: { value: StudyGoalConfigData | undefined };
+  };
   const { mutateAsync: createGoalTopicMutation } = useCreateGoalTopic();
   const { mutateAsync: updateGoalTopicMutation } = useUpdateGoalTopic();
   const { mutateAsync: deleteGoalTopicMutation } = useDeleteGoalTopic();
@@ -56,18 +63,31 @@
       description: newTopicDescription.value,
     } as any;
 
-    await createGoalTopicMutation({ studyId: props.studyId, topic: topic as GoalTopic })
-      .then(() => {
-        isOpen.value = false;
-        overlayPanel.value?.hide();
-      });
+    await createGoalTopicMutation({
+      studyId: props.studyId,
+      topic: topic as GoalTopic,
+    }).then(() => {
+      isOpen.value = false;
+      overlayPanel.value?.hide();
+    });
     newTopicName.value = '';
     newTopicDescription.value = '';
   };
 
   async function deleteTopic(topic: GoalTopic): Promise<void> {
     if (!topic.key) return;
-    await deleteGoalTopicMutation({ studyId: props.studyId, key: topic.key });
+    try {
+      await deleteGoalTopicMutation({ studyId: props.studyId, key: topic.key });
+    } catch (error: any) {
+      if (error.response?.status === 409) {
+        error.errorMessage = t(
+          'goaltemplate.goalTemplateList.error.conflictUsedCategory',
+        );
+      } else {
+        error.errorMessage = t('global.error.generic');
+      }
+      throw error;
+    }
   }
 
   const goalCategoryColumns: MoreTableColumn[] = [
@@ -108,7 +128,17 @@
 
   function changeValueInPlace(topic: GoalTopic): void {
     if (topic && !!topic?.key) {
-      updateGoalTopicMutation({ studyId: props.studyId, key: topic.key, topic: topic });
+      updateGoalTopicMutation({
+        studyId: props.studyId,
+        key: topic.key,
+        topic: topic,
+      }).catch((error) => {
+        if (error.response?.status === 409) {
+          showErrorToast(
+            t('goaltemplate.goalTemplateList.error.conflictUsedElement'),
+          );
+        }
+      });
     }
   }
 
@@ -138,6 +168,7 @@
               elTitle: row.title,
               elInfoTitle: t('global.labels.description'),
               elInfoDesc: row.description,
+              onDelete: deleteTopic,
             },
             props: {
               header: t('goaltemplate.dialog.header.delete'),
@@ -152,11 +183,8 @@
               draggable: false,
             },
             onClose: (options) => {
-              if (options?.data) {
-                executeAction({
-                  id: 'delete',
-                  row: options.data,
-                } as MoreTableRowActionResult);
+              if (options?.data && !options?.data?.key) {
+                console.info('category section was closed successfully')
               }
             },
           }),
@@ -174,6 +202,7 @@
       <Button
         type="button"
         class="flex shrink-0 items-center justify-between text-nowrap"
+        :disabled="actionsDisabled"
         @click="toggleOverlay($event)"
       >
         <span>{{ t('goaltemplate.goalTemplateList.categories.add') }}</span>