refactor: rework async BackupCreate

app/src/types/core/api.ts

@@ -150,3 +150,41 @@ export type AppInfo = {
 }
 
 export type AppList = { apps: AppInfo[] }
+
+// BACKUP
+
+export type BackupHookDataKeys =
+  | 'data_xmpp'
+  | 'data_multimedia'
+  | 'data_mail'
+  | 'data_home'
+export type BackupHookKeys =
+  | BackupHookDataKeys
+  | 'conf_ynh_settings'
+  | 'conf_ldap'
+  | 'conf_manually_modified_files'
+  | 'conf_ynh_certs'
+
+export type BackupHooksList = {
+  hooks: BackupHookKeys[]
+}
+
+export type BackupAppList = {
+  apps: Pick<
+    AppInfo,
+    'description' | 'name' | 'version' | 'domain_path' | 'id'
+  >[]
+}
+
+export type BackupInfo = {
+  path: string
+  created_at: string
+  description: string
+  size: number
+  // TODO as array like everywhere else?
+  apps: Obj<
+    Pick<AppInfo, 'description' | 'name' | 'version'> & { size: number }
+  >
+  system: Record<BackupHookKeys, { paths: string[]; size: number }>
+  from_yunohost_version: string
+}

app/src/views/backup/BackupCreate.vue

@@ -1,58 +1,34 @@
 <script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
 import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import { fromEntries } from '@/helpers/commons'
+import type { BackupAppList, BackupHooksList } from '@/types/core/api'
+import { formatBackupSystem, parseBackupForm } from './backupData'
 
 const props = defineProps<{
   id: string
 }>()
 
-const { t } = useI18n()
 const router = useRouter()
-const { loading } = useInitialQueries(
-  [{ uri: 'hooks/backup' }, { uri: 'apps?with_backup' }],
-  { onQueriesResponse },
-)
 
-const selected = ref<string[]>([])
-const system = ref()
-const apps = ref()
-
-function formatHooks(hooks) {
-  const data = {}
-  hooks.forEach((hook) => {
-    const groupId = hook.startsWith('conf_')
-      ? 'adminjs_group_configuration'
-      : hook
-    if (groupId in data) {
-      data[groupId].value.push(hook)
-      data[groupId].description += ', ' + t('hook_' + hook)
-    } else {
-      data[groupId] = {
-        name: t('hook_' + groupId),
-        value: [hook],
-        description: t(groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook),
-      }
-    }
+const [system, apps] = await api
+  .fetchAll<
+    [BackupHooksList, BackupAppList]
+  >([{ uri: 'hooks/backup' }, { uri: 'apps?with_backup' }])
+  .then(([{ hooks }, { apps }]) => {
+    return [
+      formatBackupSystem(hooks),
+      fromEntries(apps.map((app) => [app.id, app])),
+    ] as const
   })
-  return data
-}
 
-function onQueriesResponse({ hooks }: any, { apps: apps_ }: any) {
-  system.value = formatHooks(hooks)
-  // transform app array into literal object to match hooks data structure
-  apps.value = apps_.reduce((obj, app) => {
-    obj[app.id] = app
-    return obj
-  }, {})
-  selected.value = [...Object.keys(system.value), ...Object.keys(apps.value)]
-}
+const selected = ref([...Object.keys(system), ...Object.keys(apps)])
 
 function toggleSelected(select: boolean, type: 'system' | 'apps') {
-  const keys = Object.keys((type === 'system' ? system : apps).value)
+  const keys = Object.keys(type === 'system' ? system : apps)
   if (select) {
     const toSelect = keys.filter((item) => !selected.value.includes(item))
     selected.value = [...selected.value, ...toSelect]
@@ -64,64 +40,59 @@ function toggleSelected(select: boolean, type: 'system' | 'apps') {
 }
 
 function createBackup() {
-  const data = { apps: [], system: [] }
-  for (const item of selected.value) {
-    if (item in system.value) {
-      data.system = [...data.system, ...system.value[item].value]
-    } else {
-      data.apps.push(item)
-    }
-  }
-
+  const data = parseBackupForm(selected.value, system)
   api.post({ uri: 'backups', data, humanKey: 'backups.create' }).then(() => {
     router.push({ name: 'backup-list', params: { id: props.id } })
   })
 }
+
+const CheckboxList = createReusableTemplate<{
+  icon: string
+  type: 'system' | 'apps'
+  data: typeof system | typeof apps
+}>()
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardListSkeleton">
-    <!-- FIXME switch to <CardForm> ? -->
-    <YCard :title="$t('backup_create')" icon="archive" no-body>
-      <BFormCheckboxGroup
-        v-model="selected"
-        id="backup-select"
-        name="backup-select"
-        size="lg"
-      >
-        <BListGroup flush>
+  <div>
+    <CheckboxList.define v-slot="{ type, icon, data }">
       <!-- SYSTEM HEADER -->
       <BListGroupItem
         class="d-flex align-items-sm-center flex-column flex-sm-row text-primary"
       >
-            <h4 class="m-0"><YIcon iname="cube" /> {{ $t('system') }}</h4>
+        <h4 class="m-0"><YIcon :iname="icon" /> {{ $t(type) }}</h4>
 
         <div class="ms-sm-auto mt-2 mt-sm-0">
           <BButton
-                @click="toggleSelected(true, 'system')"
             v-t="'select_all'"
             size="sm"
             variant="outline-dark"
+            @click="toggleSelected(true, type)"
           />
 
           <BButton
-                @click="toggleSelected(false, 'system')"
             v-t="'select_none'"
             size="sm"
             variant="outline-dark"
             class="ms-2"
+            @click="toggleSelected(false, type)"
           />
         </div>
       </BListGroupItem>
 
       <!-- SYSTEM ITEMS -->
       <BListGroupItem
-            v-for="(item, partName) in system"
+        v-for="(item, partName) in data"
         :key="partName"
         class="d-flex justify-content-between align-items-center pe-0"
       >
+        <!-- FIXME use FormField or BFormGroup to get labels? -->
         <div class="me-2">
-              <h5 class="fw-bold">
+          <h5 v-if="'id' in item">
+            <span class="fw-bold me-1">{{ item.name }}</span>
+            <small class="text-secondary">{{ item.id }}</small>
+          </h5>
+          <h5 v-else class="fw-bold">
             {{ item.name }}
           </h5>
           <p class="m-0 text-muted">
@@ -129,61 +100,21 @@ function createBackup() {
           </p>
         </div>
 
-            <BFormCheckbox
-              :value="partName"
-              :aria-label="$t('check')"
-              class="d-inline"
-            />
+        <BFormCheckbox :value="partName" :aria-label="$t('check')" />
       </BListGroupItem>
+    </CheckboxList.define>
 
-          <!-- APPS HEADER -->
-          <BListGroupItem
-            class="d-flex align-items-sm-center flex-column flex-sm-row text-primary"
+    <!-- FIXME use DefineTemplate -->
+    <YCard :title="$t('backup_create')" icon="archive" no-body>
+      <BFormCheckboxGroup
+        id="backup-select"
+        v-model="selected"
+        name="backup-select"
+        size="lg"
       >
-            <h4 class="m-0">
-              <YIcon iname="cubes" /> {{ $t('applications') }}
-            </h4>
-
-            <div class="ms-sm-auto mt-2 mt-sm-0">
-              <BButton
-                @click="toggleSelected(true, 'apps')"
-                v-t="'select_all'"
-                size="sm"
-                variant="outline-dark"
-              />
-
-              <BButton
-                @click="toggleSelected(false, 'apps')"
-                v-t="'select_none'"
-                size="sm"
-                variant="outline-dark"
-                class="ms-2"
-              />
-            </div>
-          </BListGroupItem>
-
-          <!-- APPS ITEMS -->
-          <BListGroupItem
-            v-for="(item, appName) in apps"
-            :key="appName"
-            class="d-flex justify-content-between align-items-center pe-0"
-          >
-            <div class="me-2">
-              <h5 class="fw-bold">
-                {{ item.name }}
-                <small class="text-secondary">{{ item.id }}</small>
-              </h5>
-              <p class="m-0">
-                {{ item.description }}
-              </p>
-            </div>
-
-            <BFormCheckbox
-              :value="appName"
-              :aria-label="$t('check')"
-              class="d-inline"
-            />
-          </BListGroupItem>
+        <BListGroup flush>
+          <CheckboxList.reuse icon="cube" type="system" :data="system" />
+          <CheckboxList.reuse icon="cubes" type="apps" :data="apps" />
         </BListGroup>
       </BFormCheckboxGroup>
 
@@ -197,5 +128,5 @@ function createBackup() {
         />
       </template>
     </YCard>
-  </ViewBase>
+  </div>
 </template>

app/src/views/backup/backupData.ts

@@ -0,0 +1,59 @@
+import { toEntries } from '@/helpers/commons'
+import type {
+  BackupHookDataKeys,
+  BackupHookKeys,
+  BackupHooksList,
+  BackupInfo,
+} from '@/types/core/api'
+import i18n from '@/i18n'
+
+type BackupSystem = Record<
+  BackupHookDataKeys | 'adminjs_group_configuration',
+  {
+    name: string
+    value: string[]
+    description: string
+    size?: number
+  }
+>
+
+export function formatBackupSystem(
+  system: BackupHooksList['hooks'] | BackupInfo['system'],
+) {
+  const t = i18n.global.t
+  const infos = (
+    !Array.isArray(system)
+      ? toEntries(system).map(([key, { size }]) => [key, size])
+      : system.map((key) => [key])
+  ) as [BackupHookKeys, number | undefined][]
+  return infos.reduce((data, [key, size]) => {
+    const hookKey = key.startsWith('conf_')
+      ? 'adminjs_group_configuration'
+      : (key as BackupHookDataKeys)
+    if (hookKey in data) {
+      data[hookKey].value.push(key)
+      data[hookKey].description += ', ' + t('hook_' + key)
+      if (size) data[hookKey].size! += size
+    } else {
+      data[hookKey] = {
+        name: t('hook_' + hookKey),
+        value: [key],
+        description: t(hookKey === key ? `hook_${key}_desc` : 'hook_' + key),
+        size,
+      }
+    }
+    return data
+  }, {} as BackupSystem)
+}
+
+export function parseBackupForm(selected: string[], system: BackupSystem) {
+  const data = { apps: [], system: [] } as { apps: string[]; system: string[] }
+  for (const key of selected) {
+    if (key in system) {
+      data.system.push(...system[key as keyof typeof system].value)
+    } else {
+      data.apps.push(key)
+    }
+  }
+  return data
+}