cloudron-box/dashboard/src/components/app/Uninstall.vue

<script setup>

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

import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, InputDialog } from '@cloudron/pankow';
import { prettyLongDate } from '@cloudron/pankow/utils';
import { APP_TYPES, ISTATES, RSTATES } from '../../constants.js';
import AppsModel from '../../models/AppsModel.js';

const appsModel = AppsModel.create();

const inputDialog = useTemplateRef('inputDialog');

const props = defineProps([ 'app' ]);

const latestBackup = ref(null);

const TARGET_RUN_STATE = {
  START: Symbol('start'),
  STOP: Symbol('stop'),
};

function targetRunState() {
  const app = props.app;

  // if we have an error, we want to retry the pending state, otherwise toggle the runstate
  if (app.error) {
    if (app.error.details.installationState === ISTATES.PENDING_START) return TARGET_RUN_STATE.START;
    else return TARGET_RUN_STATE.STOP;
  } else {
    if (app.runState === RSTATES.STOPPED) return TARGET_RUN_STATE.START;
    else return TARGET_RUN_STATE.STOP;
  }
}

const toggleRunStateBusy = ref(false);
async function onToggleRunState() {
  const app = props.app;

  toggleRunStateBusy.value = true;

  let error;
  if (targetRunState() === TARGET_RUN_STATE.START) [error] = await appsModel.start(app.id);
  else [error] = await appsModel.stop(app.id);

  if (error) {
    toggleRunStateBusy.value = false;
    console.error(error);
  } else {
    setTimeout(() => toggleRunStateBusy.value = false, 3000);
  }
}

async function onUninstall() {
  const yes = await inputDialog.value.confirm({
    title: t('app.uninstallDialog.title', { app: (props.app.label || props.app.fqdn) }),
    message: t('app.uninstallDialog.description', { app: (props.app.label || props.app.fqdn) }),
    confirmStyle: 'danger',
    confirmLabel: t('app.uninstallDialog.uninstallAction'),
    rejectLabel: t('main.dialog.cancel')
  });

  if (!yes) return;

  const [error] = await appsModel.uninstall(props.app.id);
  if (error) return console.error(error);

  window.location.href = '/#/apps';
}

async function onArchive() {
  if (!latestBackup.value) return;

  const yes = await inputDialog.value.confirm({
    title: t('app.archiveDialog.title', { app: (props.app.label || props.app.fqdn) }),
    message: t('app.archiveDialog.description', { date: prettyLongDate(latestBackup.value.creationTime) }),
    confirmStyle: 'danger',
    confirmLabel: t('app.archive.action'),
    rejectLabel: t('main.dialog.cancel')
  });

  if (!yes) return;

  const [error] = await appsModel.archive(props.app.id, latestBackup.value.id);
  if (error) return console.error(error);

  window.location.href = '/#/apps';
}

onMounted(async () => {
  const [error, result] = await appsModel.backups(props.app.id);
  if (error) return console.error(error);

  latestBackup.value = result[0] || null;
});

</script>

<template>
  <div>
    <InputDialog ref="inputDialog" />

    <div>
      <label>{{ $t('app.uninstall.startStop.title') }}</label>
      <div>{{ $t('app.uninstall.startStop.description') }}</div>
      <br/>
      <Button @click="onToggleRunState()"
        :disabled="toggleRunStateBusy || !!app.taskId || (app.error && (app.error.details.installationState !== 'pending_start' && app.error.details.installationState !== 'pending_stop')) || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
        :loading="toggleRunStateBusy || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
      >
        {{ $t(targetRunState() === TARGET_RUN_STATE.START ? 'app.uninstall.startStop.startAction' : 'app.uninstall.startStop.stopAction') }}
      </Button>
    </div>

    <hr style="margin-top: 20px" v-if="app.type !== APP_TYPES.PROXIED"/>

    <div v-if="app.type !== APP_TYPES.PROXIED">
      <label>{{ $t('app.archive.title') }}</label>
      <div v-html="$t('app.archive.description')"></div>
      <p class="text-bold text-success" v-if="latestBackup" v-html="$t('app.archive.latestBackupInfo', { date: prettyLongDate(latestBackup.creationTime) })"></p>
      <p class="text-warning" v-else v-html="$t('app.archive.noBackup')"></p>
      <Button :disabled="!latestBackup" @click="onArchive()">{{ $t('app.archive.action') }}</Button>
    </div>

    <hr style="margin-top: 20px"/>

    <div>
      <label>{{ $t('app.uninstall.uninstall.title') }}</label>
      <div>{{ $t('app.uninstall.uninstall.description') }}</div>
      <br/>
      <Button danger @click="onUninstall()">{{ $t('app.uninstall.uninstall.uninstallAction') }}</button>
    </div>
  </div>
</template>