From 3c6f4f3e3c664f1ec960a0bae599e340ff165cd6 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 17:03:27 +0200
Subject: [PATCH] refactor: rm no longer used configpanel related components

---
 app/src/components/ConfigPanel.vue          | 122 --------------------
 app/src/components/RoutableTabs.vue         |  52 ---------
 app/src/components/globals/AbstractForm.vue | 100 ----------------
 3 files changed, 274 deletions(-)
 delete mode 100644 app/src/components/ConfigPanel.vue
 delete mode 100644 app/src/components/RoutableTabs.vue
 delete mode 100644 app/src/components/globals/AbstractForm.vue

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
deleted file mode 100644
index 71d5788e..00000000
--- a/app/src/components/ConfigPanel.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import type { BaseValidation } from '@vuelidate/core'
-import { computed } from 'vue'
-
-import { filterObject } from '@/helpers/commons'
-import type { Obj } from '@/types/commons'
-
-const props = defineProps<{
-  tabId: string
-  panels: Obj[]
-  forms: Obj<Obj>
-  v: BaseValidation
-}>()
-
-const slots = defineSlots<{
-  'tab-top': any
-  'tab-before': any
-  'tab-after': any
-}>()
-
-const emit = defineEmits<{
-  apply: [
-    value:
-      | { id: string; form: Obj }
-      | { id: string; form: Obj; action: string; name: string },
-  ]
-}>()
-
-const panel = computed(() => {
-  // FIXME throw error if no panel?
-  return props.panels.find((panel) => panel.id === props.tabId)
-})
-
-const validation = computed(() => {
-  return props.v.forms[panel.value?.id]
-})
-
-function onApply() {
-  const panelId = panel.value?.id
-
-  emit('apply', {
-    id: panelId,
-    form: props.forms[panelId],
-  })
-}
-
-function onAction(sectionId: string, actionId: string, actionFields) {
-  const panelId = panel.value?.id
-  const actionFieldsKeys = Object.keys(actionFields)
-
-  emit('apply', {
-    id: panelId,
-    form: filterObject(props.forms[panelId], ([key]) =>
-      actionFieldsKeys.includes(key),
-    ),
-    action: [panelId, sectionId, actionId].join('.'),
-    name: actionId,
-  })
-}
-</script>
-
-<template>
-  <AbstractForm
-    v-if="panel"
-    v-bind="{
-      id: panel.id + '-form',
-      validation,
-      serverError: panel.serverError,
-    }"
-    @submit="onApply"
-    :no-footer="!panel.hasApplyButton"
-  >
-    <slot name="tab-top" />
-
-    <template v-if="panel.help" #disclaimer>
-      <div class="alert alert-info" v-html="panel.help" />
-    </template>
-
-    <slot name="tab-before" />
-
-    <template v-for="section in panel.sections">
-      <Component
-        v-if="section.visible"
-        :is="section.name ? 'section' : 'div'"
-        :key="section.id"
-        class="panel-section"
-      >
-        <BCardTitle v-if="section.name" title-tag="h3">
-          {{ section.name }}
-          <small v-if="section.help">{{ section.help }}</small>
-        </BCardTitle>
-
-        <template v-for="(field, fname) in section.fields">
-          <!-- FIXME rework the whole component chain to avoid direct mutation of the `forms` props -->
-          <!-- eslint-disable -->
-          <Component
-            v-if="field.visible"
-            :is="field.is"
-            v-bind="field.props"
-            v-model="forms[panel.id][fname]"
-            :validation="validation[fname]"
-            :key="fname"
-            @action.stop="onAction(section.id, fname, section.fields)"
-          />
-          <!-- eslint-enable -->
-        </template>
-      </Component>
-    </template>
-
-    <slot name="tab-after" />
-  </AbstractForm>
-</template>
-
-<style lang="scss" scoped>
-.card-title {
-  margin-bottom: 1em;
-  border-bottom: solid $border-width $gray-500;
-}
-:deep(.panel-section:not(:last-child)) {
-  margin-bottom: 3rem;
-}
-</style>
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
deleted file mode 100644
index 30a4dcee..00000000
--- a/app/src/components/RoutableTabs.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import type { CustomRoute } from '@/types/commons'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps<{
-  routes: CustomRoute[]
-}>()
-
-defineSlots<{
-  'tab-top': any
-  'tab-before': any
-  'tab-after': any
-}>()
-</script>
-
-<template>
-  <BCard no-body>
-    <BCardHeader header-tag="nav">
-      <BNav card-header fill pills>
-        <BNavItem
-          v-for="route in routes"
-          :key="route.text"
-          :to="route.to"
-          :active="$route.params.tabId === route.to.params.tabId"
-        >
-          <!-- FIXME added :active="" because `exact-active-class` not working https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1754 -->
-          <!-- exact-active-class="active" -->
-          <YIcon v-if="route.icon" :iname="route.icon" />
-          {{ route.text }}
-        </BNavItem>
-      </BNav>
-    </BCardHeader>
-
-    <!-- Bind extra props to the child view and forward child events to parent -->
-    <RouterView v-slot="{ Component }">
-      <Component v-bind="$attrs" :is="Component">
-        <template #tab-top>
-          <slot name="tab-top" />
-        </template>
-        <template #tab-before>
-          <slot name="tab-before" />
-        </template>
-        <template #tab-after>
-          <slot name="tab-after" />
-        </template>
-      </Component>
-    </RouterView>
-  </BCard>
-</template>
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
deleted file mode 100644
index 8ccfffed..00000000
--- a/app/src/components/globals/AbstractForm.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import type { BaseValidation } from '@vuelidate/core'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    submitText?: string
-    validation?: BaseValidation
-    serverError?: string
-    inline?: boolean
-    noFooter?: boolean
-  }>(),
-  {
-    id: 'ynh-form',
-    submitText: undefined,
-    validation: undefined,
-    serverError: '',
-    inline: false,
-    noFooter: false,
-  },
-)
-
-const emit = defineEmits<{
-  submit: [e: SubmitEvent]
-}>()
-
-const { t } = useI18n()
-
-const errorFeedback = computed(() => {
-  const v = props.validation
-  return (
-    props.serverError ||
-    (v && v.$errors.length ? t('form_errors.invalid_form') : '')
-  )
-})
-
-function onSubmit(e: Event) {
-  const v = props.validation
-  if (v) {
-    v.$touch()
-    if (v.$pending || v.$errors.length) return
-  }
-  emit('submit', e as SubmitEvent)
-}
-</script>
-
-<template>
-  <div>
-    <BCardBody>
-      <slot name="disclaimer" />
-
-      <BForm
-        v-bind="$attrs"
-        :id="id"
-        :inline="inline"
-        novalidate
-        @submit.prevent.stop="onSubmit"
-      >
-        <slot name="default" />
-
-        <slot name="server-error" v-bind="{ errorFeedback }">
-          <BAlert
-            :modelValue="!!errorFeedback"
-            variant="danger"
-            class="my-3"
-            icon="ban"
-          >
-            <div v-html="errorFeedback" />
-          </BAlert>
-        </slot>
-      </BForm>
-    </BCardBody>
-
-    <BCardFooter v-if="!noFooter">
-      <slot name="footer">
-        <BButton type="submit" variant="success" :form="id">
-          {{ submitText || $t('save') }}
-        </BButton>
-      </slot>
-    </BCardFooter>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.card-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-
-  & > *:not(:first-child) {
-    margin-left: 0.5rem;
-  }
-}
-</style>