yunohost-admin/app/src/views/backup/BackupCreate.vue

<template>
  <ViewBase
    :queries="queries"
    @queries-response="onQueriesResponse"
    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>
          <!-- 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>

            <div class="ms-sm-auto mt-2 mt-sm-0">
              <BButton
                @click="toggleSelected(true, 'system')"
                v-t="'select_all'"
                size="sm"
                variant="outline-dark"
              />

              <BButton
                @click="toggleSelected(false, 'system')"
                v-t="'select_none'"
                size="sm"
                variant="outline-dark"
                class="ms-2"
              />
            </div>
          </BListGroupItem>

          <!-- SYSTEM ITEMS -->
          <BListGroupItem
            v-for="(item, partName) in system"
            :key="partName"
            class="d-flex justify-content-between align-items-center pe-0"
          >
            <div class="me-2">
              <h5 class="fw-bold">
                {{ item.name }}
              </h5>
              <p class="m-0 text-muted">
                {{ item.description }}
              </p>
            </div>

            <BFormCheckbox
              :value="partName"
              :aria-label="$t('check')"
              class="d-inline"
            />
          </BListGroupItem>

          <!-- APPS HEADER -->
          <BListGroupItem
            class="d-flex align-items-sm-center flex-column flex-sm-row text-primary"
          >
            <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>
      </BFormCheckboxGroup>

      <!-- SUBMIT -->
      <template #buttons>
        <BButton
          @click="createBackup"
          v-t="'backup_action'"
          variant="success"
          :disabled="selected.length === 0"
        />
      </template>
    </YCard>
  </ViewBase>
</template>

<script>
import api from '@/api'

export default {
  name: 'BackupCreate',

  props: {
    id: { type: String, required: true },
  },

  data() {
    return {
      queries: [
        ['GET', 'hooks/backup'],
        ['GET', 'apps?with_backup'],
      ],
      selected: [],
      // api data
      system: undefined,
      apps: undefined,
    }
  },

  methods: {
    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 += ', ' + this.$t('hook_' + hook)
        } else {
          data[groupId] = {
            name: this.$t('hook_' + groupId),
            value: [hook],
            description: this.$t(
              groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook,
            ),
          }
        }
      })
      return data
    },

    onQueriesResponse({ hooks }, { apps }) {
      this.system = this.formatHooks(hooks)
      // transform app array into literal object to match hooks data structure
      this.apps = apps.reduce((obj, app) => {
        obj[app.id] = app
        return obj
      }, {})
      this.selected = [...Object.keys(this.system), ...Object.keys(this.apps)]
    },

    toggleSelected(select, type) {
      if (select) {
        const toSelect = Object.keys(this[type]).filter(
          (item) => !this.selected.includes(item),
        )
        this.selected = [...this.selected, ...toSelect]
      } else {
        const toUnselect = Object.keys(this[type])
        this.selected = this.selected.filter(
          (selected) => !toUnselect.includes(selected),
        )
      }
    },

    createBackup() {
      const data = { apps: [], system: [] }
      for (const item of this.selected) {
        if (item in this.system) {
          data.system = [...data.system, ...this.system[item].value]
        } else {
          data.apps.push(item)
        }
      }

      api.post('backups', data, 'backups.create').then(() => {
        this.$router.push({ name: 'backup-list', params: { id: this.id } })
      })
    },
  },
}
</script>