refactor: add dedicated component for displaying errors

src/components/generic/AErrorList.vue

+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useI18n } from '@/i18n'
+
+type Error = {
+  code?: string
+  message?: string
+}
+
+const props = defineProps<{
+  errors?: undefined | (Error | undefined | null)[]
+}>()
+const { t } = useI18n()
+const errorList = computed<Error[]>(() => (props.errors ?? []).filter((e): e is Error => !!e))
+</script>
+
+<template>
+  <div v-if="errorList.length > 0" class="invalid-feedback">
+    <template v-for="(error, index) in errorList" :key="index">
+      <p class="last:tw-mb-0">
+        {{
+          error.code ? t(`error.${error.code}`) : error.message ? error.message : t('error.unknown')
+        }}
+      </p>
+    </template>
+  </div>
+</template>

src/components/generic/FormGroup.vue

@@ -49,23 +49,7 @@
           <slot name="iconLeft" :class="[iconClasses, 'tw-ml-2']" role="presentation" />
           <slot name="iconRight" :class="[iconClasses, 'tw-mr-2']" role="presentation" />
         </div>
-        <div
-          v-if="errors !== undefined && errors.length > 0"
-          :id="errorsId"
-          class="invalid-feedback"
-        >
-          <template v-for="(error, index) in errorList" :key="index">
-            <p class="last:tw-mb-0">
-              {{
-                error.code
-                  ? t(`error.${error.code}`)
-                  : error.message
-                    ? error.message
-                    : t('error.unknown')
-              }}
-            </p>
-          </template>
-        </div>
+        <AErrorList :id="errorsId" :errors="errors" />
       </div>
     </div>
   </APermissionGuard>
@@ -73,10 +57,10 @@
 
 <script lang="ts" setup>
 import { computed, inject, provide, useAttrs, useSlots } from 'vue'
-import { useI18n } from '@/i18n'
 import { useId } from '@/util'
 import SaveIndicator from '@/components/generic/SaveIndicator.vue'
 import APermissionGuard, { PermissionGuardProps } from '@/components/generic/APermissionGuard.vue'
+import AErrorList from '@/components/generic/AErrorList.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -110,7 +94,6 @@ const emit = defineEmits<{
   edit: []
 }>()
 
-const { t } = useI18n()
 const parentAttrs = useAttrs()
 const slots = useSlots()
 const formGroupClass = inject('formGroupClass', undefined)