Add removing option for repositories

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/app.module.ts

@@ -44,6 +44,8 @@ import { ContentAwareImageComponent } from './components/content-aware-image/con
 import {MatSliderModule} from "@angular/material/slider";
 import { AddRepositoryDialogComponent } from './pages/home/repositories-tab/add-repository-dialog/add-repository-dialog.component';
 import {MatTooltipModule} from "@angular/material/tooltip";
+import {MatMenuModule} from "@angular/material/menu";
+import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
 
 @NgModule({
   declarations: [
@@ -60,6 +62,7 @@ import {MatTooltipModule} from "@angular/material/tooltip";
     FileGalleryEntryComponent,
     ContentAwareImageComponent,
     AddRepositoryDialogComponent,
+    ConfirmDialogComponent,
   ],
   imports: [
     BrowserModule,
@@ -94,6 +97,7 @@ import {MatTooltipModule} from "@angular/material/tooltip";
     DragDropModule,
     MatSliderModule,
     MatTooltipModule,
+    MatMenuModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

mediarepo-ui/src/app/components/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,10 @@
+<h1 mat-dialog-title>
+{{title}}
+</h1>
+<div mat-dialog-content>
+{{message}}
+</div>
+<div mat-dialog-actions class="confirm-dialog-actions">
+  <button mat-stroked-button [color]="this.denyColor" (click)="closeDialog(false)">{{denyAction}}</button>
+  <button mat-flat-button [color]="this.confirmColor" (click)="closeDialog(true)">{{confirmAction}}</button>
+</div>

mediarepo-ui/src/app/components/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,8 @@
+.confirm-dialog-actions {
+  display: block;
+
+  button {
+    float: right;
+    margin-left: 1em;
+  }
+}

mediarepo-ui/src/app/components/confirm-dialog/confirm-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,35 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ThemePalette} from "@angular/material/core";
+
+@Component({
+  selector: 'app-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss']
+})
+export class ConfirmDialogComponent {
+
+  title = "";
+  message = "";
+  confirmAction = "";
+  confirmColor: ThemePalette = "primary";
+  denyAction = "Cancel";
+  denyColor: ThemePalette = "accent";
+
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(
+      MAT_DIALOG_DATA) data: { title: string, message: string, confirmAction: string, denyAction?: string, confirmColor?: ThemePalette, denyColor?: ThemePalette }
+  ) {
+    this.title = data.title;
+    this.message = data.message;
+    this.confirmAction = data.confirmAction;
+    this.denyAction = data.denyAction ?? this.denyAction;
+    this.confirmColor = data.confirmColor ?? this.confirmColor;
+    this.denyColor = data.denyColor ?? this.denyColor;
+  }
+
+  public closeDialog(result: boolean) {
+    this.dialogRef.close(result);
+  }
+}

mediarepo-ui/src/app/pages/home/repositories-tab/add-repository-dialog/add-repository-dialog.component.html

@@ -38,6 +38,7 @@
   </div>
 </div>
 <div class="dialog-buttons" mat-dialog-actions>
+  <button mat-stroked-button color="accent" (click)="closeDialog()">Cancel</button>
   <button mat-flat-button *ngIf="repoTypeSelect.value === 'remote' || this.localRepoExists"
           [disabled]="!formGroup.valid" matTooltip="Add the existing repository" color="primary"
           (click)="addRepository()">Add
@@ -47,7 +48,6 @@
           matTooltip="Initialize the repository in the specified path" color="accent"
           (click)="this.initLocalRepository()">Init
   </button>
-  <button mat-stroked-button color="accent" (click)="closeDialog()">Cancel</button>
   <button class="check-connection-button" *ngIf="repoTypeSelect.value === 'remote'" [disabled]="!formGroup.valid"
           mat-stroked-button (click)="checkRepositoryStatus()">Check Connection
   </button>

mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.html

@@ -12,5 +12,10 @@
     <button *ngIf="!this.isSelectedRepository() && !repository.local" mat-flat-button color="primary" (click)="selectRepository()" [disabled]="!this.daemonRunning">Connect</button>
     <button *ngIf="this.isSelectedRepository() && repository.local" mat-flat-button color="primary" (click)="this.repoService.closeSelectedRepository()">Close</button>
     <button *ngIf="this.isSelectedRepository() && !repository.local" mat-flat-button color="primary" (click)="this.repoService.disconnectSelectedRepository()" [disabled]="!this.daemonRunning">Disconnect</button>
+    <button mat-button [mat-menu-trigger-for]="menu"><mat-icon>more_vert</mat-icon></button>
+    <mat-menu #menu="matMenu">
+      <button *ngIf="repository.local" mat-menu-item (click)="removeRepository()">Delete</button>
+      <button *ngIf="!repository.local" mat-menu-item (click)="removeRepository()">Remove</button>
+    </mat-menu>
   </mat-action-list>
 </mat-card>

mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.ts

@@ -3,6 +3,8 @@ import {Repository} from "../../../../models/Repository";
 import {RepositoryService} from "../../../../services/repository/repository.service";
 import {Router} from "@angular/router";
 import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
+import {MatDialog} from "@angular/material/dialog";
+import {ConfirmDialogComponent} from "../../../../components/confirm-dialog/confirm-dialog.component";
 
 @Component({
   selector: 'app-repository-card',
@@ -17,12 +19,18 @@ export class RepositoryCardComponent implements OnInit, OnDestroy {
 
   statusRefreshInterval: number | undefined;
 
-  constructor(public repoService: RepositoryService, private router: Router, private errorBroker: ErrorBrokerService) {}
+  constructor(
+    public repoService: RepositoryService,
+    private router: Router,
+    private errorBroker: ErrorBrokerService,
+    public dialog: MatDialog) {
+  }
 
   public async ngOnInit() {
     if (!this.repository.local) {
       await this.checkRemoteRepositoryStatus();
-      this.statusRefreshInterval = setInterval(async() => await this.checkRemoteRepositoryStatus(), 10000);
+      this.statusRefreshInterval = setInterval(
+        async () => await this.checkRemoteRepositoryStatus(), 10000);
     }
   }
 
@@ -36,6 +44,21 @@ export class RepositoryCardComponent implements OnInit, OnDestroy {
     return this.repoService.selectedRepository.getValue()?.name === this.repository.name
   }
 
+  public async removeRepository() {
+    await this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        title: "Remove repository",
+        message: `Do you really want to remove the repository "${this.repository.name}"?`,
+        confirmAction: "Remove",
+        confirmColor: "warn"
+      }
+    }).afterClosed().subscribe(async confirmation => {
+      if (confirmation === true) {
+        await this.repoService.removeRepository(this.repository.name);
+      }
+    });
+  }
+
   public getDaemonStatusText(): string {
     if (this.repository.local) {
       return "Local";
@@ -74,12 +97,13 @@ export class RepositoryCardComponent implements OnInit, OnDestroy {
   public async selectRepository() {
     try {
       await this.repoService.setRepository(this.repository);
-      } catch(err) {
+    } catch (err) {
       this.errorBroker.showError(err);
     }
   }
 
   async checkRemoteRepositoryStatus() {
-    this.daemonRunning = await this.repoService.checkDaemonRunning(this.repository.address!);
+    this.daemonRunning = await this.repoService.checkDaemonRunning(
+      this.repository.address!);
   }
 }

mediarepo-ui/src/app/services/repository/repository.service.ts

@@ -108,7 +108,8 @@ export class RepositoryService {
    * @returns {Promise<void>}
    */
   public async removeRepository(name: string): Promise<void> {
-    await invoke("plugin:mediarepo|remove_repository", {name})
+    await invoke("plugin:mediarepo|remove_repository", {name});
+    await this.loadRepositories();
   }
 
   /**