app update: use the props.app directly instead of local copy

this way if the app auto updates in the background, we are showing
the correct state in the view
This commit is contained in:
Girish Ramakrishnan
2025-09-17 11:56:08 +02:00
parent 91840904b6
commit 41932c9127
2 changed files with 12 additions and 34 deletions
+12 -23
View File
@@ -6,19 +6,16 @@ import { Button, Switch, Dialog, Checkbox } from '@cloudron/pankow';
import { ISTATES } from '../../constants.js';
import SettingsItem from '../SettingsItem.vue';
import AppsModel from '../../models/AppsModel.js';
import UpdaterModel from '../../models/UpdaterModel.js';
import ProfileModel from '../../models/ProfileModel.js';
import TasksModel from '../../models/TasksModel.js';
const props = defineProps([ 'app' ]);
const appsModel = AppsModel.create();
const updaterModel = UpdaterModel.create();
const profileModel = ProfileModel.create();
const tasksModel = TasksModel.create();
const dialog = useTemplateRef('dialog');
const update = ref(null);
const profile = ref({});
const busyUpdate = ref(false);
const busyCheck = ref(false);
@@ -57,14 +54,9 @@ async function waitForTask(id) {
async function onCheck() {
busyCheck.value = true;
const [checkError] = await updaterModel.checkAppUpdate(props.app.id);
if (checkError) return console.error(error);
const [error, result] = await appsModel.checkUpdate(props.app.id);
const [error] = await appsModel.checkUpdate(props.app.id);
if (error) return console.error(error);
update.value = result;
busyCheck.value = false;
}
@@ -72,15 +64,13 @@ async function onUpdate() {
busyUpdate.value = true;
updateError.value = '';
const [error, result] = await appsModel.update(props.app.id, update.value.manifest, skipBackup.value);
const [error, result] = await appsModel.update(props.app.id, props.app.updateInfo.manifest, skipBackup.value);
if (error) {
busyUpdate.value = false;
if (error.status === 400) updateError.value = error.body ? error.body.message : 'Internal error';
return console.error(error);
}
update.value = null;
dialog.value.close();
waitForTask(result);
@@ -99,7 +89,6 @@ onMounted(async () => {
busyUpdate.value = false;
busyCheck.value = false;
autoUpdatesEnabled.value = props.app.enableAutomaticUpdate;
update.value = props.app.updateInfo;
const [error, result] = await profileModel.get();
if (error) return console.error(error);
@@ -111,20 +100,20 @@ onMounted(async () => {
<template>
<div>
<Dialog v-if="update" ref="dialog"
<Dialog v-if="app.updateInfo" ref="dialog"
:title="$t('app.updateDialog.title', { app: app.fqdn })"
:reject-label="$t('main.dialog.cancel')"
reject-style="secondary"
:confirm-label="$t('app.updateDialog.updateAction')"
:confirm-active="!busyUpdate && update.manifest.dockerImage"
:confirm-active="!busyUpdate && app.updateInfo.manifest.dockerImage"
:confirm-busy="busyUpdate"
:alternate-label="!update.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
:alternate-label="!app.updateInfo.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
alternate-style="success"
@confirm="onUpdate()"
@alternate="onSetupSubscription()"
>
<div>
<Checkbox v-if="update.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
<Checkbox v-if="app.updateInfo.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
</div>
</Dialog>
@@ -146,20 +135,20 @@ onMounted(async () => {
<Button v-if="app.appStoreId" @click="onCheck()" :disabled="busyCheck" :loading="busyCheck">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
</SettingsItem>
<SettingsItem v-if="update" style="padding: 10px;">
<SettingsItem v-if="app.updateInfo" style="padding: 10px;">
<div>
<label>{{ $t('settings.updates.updateAvailableAction') }}</label>
<div class="error-label" v-if="!update.manifest.dockerImage">{{ $t('app.updateDialog.subscriptionExpired') }}</div>
<div class="error-label" v-if="!app.updateInfo.manifest.dockerImage">{{ $t('app.updateDialog.subscriptionExpired') }}</div>
<div class="error-label" v-if="updateError">{{ updateError }}</div>
<div class="text-danger" v-if="update.unstable">{{ $t('app.updateDialog.unstableWarning') }}</div>
<div class="text-danger" v-if="app.updateInfo.unstable">{{ $t('app.updateDialog.unstableWarning') }}</div>
<p>{{ $t('app.updateDialog.changelogHeader', { version: update.manifest.version }) }}</p>
<div v-html="marked.parse(update.manifest.changelog)"></div>
<p>{{ $t('app.updateDialog.changelogHeader', { version: app.updateInfo.manifest.version }) }}</p>
<div v-html="marked.parse(app.updateInfo.manifest.changelog)"></div>
</div>
<!-- show update button only if update available -->
<Button v-if="update" :danger="update.unstable ? true : null" :success="update.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || (app.error && app.error.details.installationState !== ISTATES.PENDING_UPDATE) || app.runState === 'stopped' || app.installationState === 'pending_update'">{{ $t('app.updateDialog.updateAction') }}</Button>
<Button v-if="app.updateInfo" :danger="app.updateInfo.unstable ? true : null" :success="app.updateInfo.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || (app.error && app.error.details.installationState !== ISTATES.PENDING_UPDATE) || app.runState === 'stopped' || app.installationState === 'pending_update'">{{ $t('app.updateDialog.updateAction') }}</Button>
</SettingsItem>
</div>
</template>