backups: make primary as an action

dashboard/src/views/BackupSitesView.vue

@@ -5,10 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, ProgressBar, InputDialog, SingleSelect } from '@cloudron/pankow';
+import { Button, Menu, ProgressBar, InputDialog } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import Section from  '../components/Section.vue';
-import SettingsItem from '../components/SettingsItem.vue';
 import StateLED from  '../components/StateLED.vue';
 import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
 import BackupSiteAddDialog from  '../components/BackupSiteAddDialog.vue';
@@ -43,6 +42,26 @@ function onEditSchedule(site) {
   backupScheduleDialog.value.open(site);
 }
 
+const backupPrimaryDialog = useTemplateRef('backupPrimaryDialog');
+async function onPrimary(site) {
+    const yes = await backupPrimaryDialog.value.confirm({
+    title: t('backup.primaryDialog.title'),
+    message: t('backup.primaryDialog.description'),
+    confirmLabel: t('main.dialog.yes'),
+    confirmStyle: 'primary',
+    rejectLabel: t('main.dialog.cancel'),
+    rejectStyle: 'secondary',
+  });
+
+  if (!yes) return;
+
+  const [error] = await backupSitesModels.setPrimary(site.id);
+  if (error) return console.error(error);
+
+  // update the list to be in sync without flickering
+  sites.value.forEach(t => t.primary = t.id === site.id);
+}
+
 async function onRemoveSite(site) {
   const yes = await inputDialog.value.confirm({
     title: t('backup.target.removeDialog.title'),
@@ -113,6 +132,10 @@ function onActionMenu(site, event) {
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.dialog.edit'),
     action: onEdit.bind(null, site),
+  }, {
+    icon: 'fa-solid fa-star',
+    label: t('backups.listing.primaryAction'),
+    action: onPrimary.bind(null, site),
   }, {
     icon: 'fa-solid fa-clock',
     label: t('backups.schedule.title'),
@@ -129,22 +152,6 @@ function onActionMenu(site, event) {
   actionMenuElement.value.open(event, event.currentTarget);
 }
 
-const primarySiteId = ref('');
-const primarySiteChangeBusy = ref(false);
-
-async function onPrimarySiteChanged(value) {
-  primarySiteChangeBusy.value = true;
-
-  const [error] = await backupSitesModels.setPrimary(value);
-  if (error) return console.error(error);
-
-  // update the list to be in sync without flickering
-  sites.value.forEach(t => t.primary = t.id === value);
-
-  primarySiteId.value = value;
-  primarySiteChangeBusy.value = false;
-}
-
 async function waitForSiteTask(site) {
   const [error, result] = await tasksModel.get(site.task.id);
   if (error) {
@@ -189,8 +196,6 @@ async function refresh() {
     if (site.task && site.task.active) waitForSiteTask(site);
   }
 
-  primarySiteId.value = result.find(t => t.primary)?.id;
-
   sites.value = result;
   busy.value = false;
 }
@@ -210,6 +215,7 @@ onMounted(async () => {
   <div class="content">
     <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
+    <InputDialog ref="backupPrimaryDialog" />
     <BackupSiteAddDialog ref="backupSiteAddDialog" @success="refresh()"/>
     <BackupSiteEditDialog ref="backupSiteEditDialog" @success="refresh()"/>
     <BackupScheduleDialog ref="backupScheduleDialog" @success="refresh()"/>
@@ -225,7 +231,7 @@ onMounted(async () => {
           <div style="display: flex; align-items: center; gap: 10px">
             <StateLED :busy="site.status.busy" :state="site.status.state"/>
             <div class="backup-site-details">
-              <div><b style="font-size: 16px">{{ site.name }}</b> <span v-if="site.primary" class="text-muted">- used for updates</span></div>
+              <div><b style="font-size: 16px">{{ site.name }}</b><i v-if="site.primary" style="padding-left: 5px" class="fa-solid fa-star"></i></div>
               <div>
                 {{ $t('backups.configureBackupStorage.provider') }}: <b>{{ site.provider }}</b> - {{ $t('backups.configureBackupStorage.format') }}: <b>{{ site.format }}</b> <i v-if="site.encrypted" class="fa-solid fa-lock"></i></div>
               <div class="backup-site-task">
@@ -243,17 +249,6 @@ onMounted(async () => {
         </div>
       </div>
     </Section>
-
-    <Section :title="$t('backup.updateSite.title')">
-      <SettingsItem>
-        <div>
-          <div>{{ $t('backup.updateSite.description') }}</div>
-        </div>
-        <div style="display: flex; align-items: center">
-          <SingleSelect style="min-width: 160px" :disabled="primarySiteChangeBusy" v-model="primarySiteId" :searchThreshold="10" :options="sites" option-key="id" option-label="name" @select="onPrimarySiteChanged" />
-        </div>
-      </SettingsItem>
-    </Section>
   </div>
 </template>