Create separate views for backup targets and archives

This commit is contained in:
Johannes Zellner
2025-07-31 11:51:45 +02:00
parent ae3a34287a
commit b40248a1d5
3 changed files with 168 additions and 17 deletions
+22 -7
View File
@@ -21,7 +21,8 @@ import AppsView from './views/AppsView.vue';
import AppConfigureView from './views/AppConfigureView.vue';
import AppearanceView from './views/AppearanceView.vue';
import AppstoreView from './views/AppstoreView.vue';
import BackupsView from './views/BackupsView.vue';
import BackupTargetsView from './views/BackupTargetsView.vue';
import BackupAppArchivesView from './views/BackupAppArchivesView.vue';
import CloudronAccountView from './views/CloudronAccountView.vue';
import DomainsView from './views/DomainsView.vue';
import EmailDomainView from './views/EmailDomainView.vue';
@@ -49,7 +50,8 @@ const VIEWS = {
APPEARANCE: 'appearance',
APPS: 'apps',
APPSTORE: 'appstore',
BACKUPS: 'backups',
BACKUP_TARGETS: 'backup-targets',
BACKUP_APP_ARCHIVES: 'backup-app-archives',
CLOUDRON_ACCOUNT: 'cloudron-account',
DOMAINS: 'domains',
EMAIL_DOMAIN: 'email-domain',
@@ -155,7 +157,8 @@ function onHashChange() {
activeSidebarItem.value = v;
if (activeSidebarItem.value.indexOf('email') === 0) activeSidebarGroup.value = 'email';
if (activeSidebarItem.value.indexOf('backup') === 0) activeSidebarGroup.value = 'backup';
else if (activeSidebarItem.value.indexOf('email') === 0) activeSidebarGroup.value = 'email';
else if (activeSidebarItem.value.indexOf('system') === 0) activeSidebarGroup.value = 'system';
else if (activeSidebarItem.value.indexOf('user-directory') === 0) activeSidebarGroup.value = 'user-directory';
else activeSidebarGroup.value = '';
@@ -168,8 +171,10 @@ function onHashChange() {
view.value = VIEWS.APP;
} else if (v === VIEWS.APPEARANCE && profile.value.isAtLeastAdmin) {
view.value = VIEWS.APPEARANCE;
} else if (v === VIEWS.BACKUPS && profile.value.isAtLeastAdmin) {
view.value = VIEWS.BACKUPS;
} else if (v === VIEWS.BACKUP_TARGETS && profile.value.isAtLeastAdmin) {
view.value = VIEWS.BACKUP_TARGETS;
} else if (v === VIEWS.BACKUP_APP_ARCHIVES && profile.value.isAtLeastAdmin) {
view.value = VIEWS.BACKUP_APP_ARCHIVES;
} else if (v === VIEWS.CLOUDRON_ACCOUNT && profile.value.isAtLeastOwner) {
view.value = VIEWS.CLOUDRON_ACCOUNT;
} else if (v === VIEWS.DOMAINS && profile.value.isAtLeastAdmin) {
@@ -297,8 +302,17 @@ onMounted(async () => {
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'appstore' }" v-show="profile.isAtLeastAdmin" href="#/appstore" @click="onSidebarClose()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
<hr/>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'appearance' }" v-show="profile.isAtLeastAdmin" href="#/appearance" @click="onSidebarClose()"><i class="fa fa-pen-ruler fa-fw"></i> {{ $t('branding.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'backups' }" v-show="profile.isAtLeastAdmin" href="#/backups" @click="onSidebarClose()"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }}</a>
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('backup')"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'backup' }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'backup'">
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'backup-targets' }" href="#/backup-targets" @click="onSidebarClose()"><i class="fa fa-fw fa-hard-drive"></i> Targets</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'backup-app-archives' }" href="#/backup-app-archives" @click="onSidebarClose()"><i class="fa fa-fw fa-grip"></i> App Archives</a>
</div>
</Transition>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'domains' }" v-show="profile.isAtLeastAdmin" href="#/domains" @click="onSidebarClose()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
<div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'email' }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'email'">
@@ -345,7 +359,8 @@ onMounted(async () => {
<AppConfigureView v-else-if="view === VIEWS.APP" />
<AppearanceView v-else-if="view === VIEWS.APPEARANCE" />
<AppstoreView v-else-if="view === VIEWS.APPSTORE" />
<BackupsView v-else-if="view === VIEWS.BACKUPS" />
<BackupTargetsView v-else-if="view === VIEWS.BACKUP_TARGETS" />
<BackupAppArchivesView v-else-if="view === VIEWS.BACKUP_APP_ARCHIVES" />
<CloudronAccountView v-else-if="view === VIEWS.CLOUDRON_ACCOUNT" />
<DomainsView v-else-if="view === VIEWS.DOMAINS" />
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />