selective backups and better drive selection interface (#1576)

* selective backups and better drive selection interface

* fix disabled checkbox and backup drives menu styling

* feat: package-ids

* only show services that are backing up on backup page

* refactor for performace and cleanliness

Co-authored-by: Matt Hill <matthill@Matt-M1.start9.dev>
Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>
Co-authored-by: J M <mogulslayer@gmail.com>

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.html

@@ -47,11 +47,7 @@
       </ion-item>
       <!-- cifs list -->
       <ng-container *ngFor="let target of backupService.cifs; let i = index">
-        <ion-item
-          button
-          *ngIf="target.entry as cifs"
-          (click)="presentActionCifs(target, i)"
-        >
+        <ion-item button *ngIf="target.entry as cifs" (click)="select(target)">
           <ion-icon
             slot="start"
             name="folder-open-outline"
@@ -72,6 +68,13 @@
             <p>Hostname: {{ cifs.hostname }}</p>
             <p>Path: {{ cifs.path }}</p>
           </ion-label>
+          <ion-note
+            slot="end"
+            class="click-area"
+            (click)="presentActionCifs($event, target, i)"
+          >
+            <ion-icon name="ellipsis-horizontal"></ion-icon>
+          </ion-note>
         </ion-item>
       </ng-container>
 

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.scss

@@ -0,0 +1,18 @@
+.click-area {
+    padding: 50px;
+
+
+    &:hover {
+        background-color: var(--ion-color-medium-tint);
+    }
+
+    ion-icon {
+        font-size: 27px;
+    }
+}
+
+@media (max-width: 1000px) {
+    .click-area {
+        padding: 18px 0px 10px;
+    }
+}

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts

@@ -89,9 +89,12 @@ export class BackupDrivesComponent {
   }
 
   async presentActionCifs(
+    event: Event,
     target: MappedBackupTarget<CifsBackupTarget>,
     index: number,
   ): Promise<void> {
+    event.stopPropagation()
+
     const entry = target.entry as CifsBackupTarget
 
     const action = await this.actionCtrl.create({
@@ -114,17 +117,6 @@ export class BackupDrivesComponent {
             this.presentModalEditCifs(target.id, entry, index)
           },
         },
-        {
-          text:
-            this.type === 'create' ? 'Create Backup' : 'Restore From Backup',
-          icon:
-            this.type === 'create'
-              ? 'cloud-upload-outline'
-              : 'cloud-download-outline',
-          handler: () => {
-            this.select(target)
-          },
-        },
       ],
     })