cloudron-box/dashboard/src/views/BackupTargetsView.vue

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, ButtonGroup, TableView, InputDialog } from '@cloudron/pankow';
import Section from  '../components/Section.vue';
import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
import BackupTargetDialog from  '../components/BackupTargetDialog.vue';
import BackupList from  '../components/BackupList.vue';
import BackupTargetsModel from '../models/BackupTargetsModel.js';
import ProfileModel from '../models/ProfileModel.js';

const profileModel = ProfileModel.create();
const backupTargetsModel = BackupTargetsModel.create();

const inputDialog = useTemplateRef('inputDialog');

const profile = ref({});
const config = ref({});
const targets = ref([]);

const columns = {
  primary: {
    label: '',
    width: '40px',
    sort: true
  },
  provider: {
    label: 'Provider',
    sort: true,
  },
  label: {
    label: 'Label',
    sort: true,
  },
  format: {
    label: 'Format',
    sort: false,
    hideMobile: true,
  },
  actions: {}
};

const backupTargetDialog = useTemplateRef('backupTargetDialog');
function onAddOrEdit(target = null) {
  backupTargetDialog.value.open(target);
}

const backupScheduleDialog = useTemplateRef('backupScheduleDialog');
function onEditSchedule(target) {
  backupScheduleDialog.value.open(target);
}

async function onMakePrimaryTarget(target) {
  // TODO translate
  const yes = await inputDialog.value.confirm({
    title: '',
    message: 'Make this target the primary backup destination?',
    confirmLabel: t('main.dialog.yes'),
    confirmStyle: 'primary',
    rejectLabel: t('main.dialog.cancel'),
    rejectStyle: 'secondary',
  });

  if (!yes) return;

  const [error] = await backupTargetsModel.setPrimary(target.id);
  if (error) console.error(error);

  await refresh();
}

async function onRemoveTarget(target) {
  // TODO translate
  const yes = await inputDialog.value.confirm({
    title: 'Really remove this backup target?',
    message: 'This will also remove any backups linked to this target',
    confirmLabel: t('main.dialog.yes'),
    confirmStyle: 'danger',
    rejectLabel: t('main.dialog.cancel'),
    rejectStyle: 'secondary',
  });

  if (!yes) return;

  const [error] = await backupTargetsModel.del(target.id);
  if (error) console.error(error);

  await refresh();
}

async function refresh() {
  const [error, result] = await backupTargetsModel.list();
  if (error) return console.error(error);

  targets.value = result;
}

onMounted(async () => {
  const [error, result] = await profileModel.get();
  if (error) return console.error(error);

  profile.value = result;

  await refresh();
});

</script>

<template>
  <div class="content">
    <InputDialog ref="inputDialog" />
    <BackupTargetDialog ref="backupTargetDialog" @success="refresh()"/>
    <BackupScheduleDialog ref="backupScheduleDialog" @success="refresh()"/>

    <Section title="Backup Targets">
      <template #header-buttons>
        <Button @click="onAddOrEdit()" icon="fa-solid fa-plus"> Add Target</Button>
      </template>
      <p>TODO Explain what backup targets are and what primary/secondary is</p>

      <TableView :columns="columns" :model="targets" :busy="busy">
        <template #primary="target">
          <!-- TODO translate -->
          <i class="fa-solid fa-crown" v-if="target.primary" v-tooltip="'Primary'"></i>
        </template>

        <template #provider="target">
          {{ target.provider }}
        </template>

        <template #label="target">
          {{ target.label }}
        </template>

        <template #format="target">
          {{ target.format }}
        </template>

        <template #actions="target">
          <div class="table-actions">
            <ButtonGroup>
              <Button tool secondary small icon="fa-solid fa-clock" @click.stop="onEditSchedule(target)"></Button>
              <Button tool secondary small :disabled="target.primary" icon="fa-solid fa-crown" @click.stop="onMakePrimaryTarget(target)"></Button>
              <Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onAddOrEdit(target)"></Button>
              <Button small tool danger :disabled="target.primary" @click.stop="onRemoveTarget(target)" icon="far fa-trash-alt" />
            </ButtonGroup>
          </div>
        </template>
      </TableView>
    </Section>

    <BackupList :config="config"/>
  </div>
</template>