Add edit dialog for repositories

TG-10 #ready-for-test

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

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

@@ -34,6 +34,7 @@ import {MatTooltipModule} from "@angular/material/tooltip";
 import {MatInputModule} from "@angular/material/input";
 import {TagModule} from "../shared/tag/tag.module";
 import { RepositoryFormComponent } from './repositories-tab/repository-form/repository-form.component';
+import { EditRepositoryDialogComponent } from './repositories-tab/edit-repository-dialog/edit-repository-dialog.component';
 
 
 @NgModule({
@@ -47,6 +48,7 @@ import { RepositoryFormComponent } from './repositories-tab/repository-form/repo
         RepositoryCardComponent,
         AddRepositoryDialogComponent,
         RepositoryFormComponent,
+        EditRepositoryDialogComponent,
     ],
     exports: [
         CoreComponent,

mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts

@@ -1,16 +1,7 @@
-import {Component, Inject, OnInit, ViewChild} from "@angular/core";
+import {Component, Inject, ViewChild} from "@angular/core";
-import {
-    AbstractControl,
-    FormControl,
-    FormGroup,
-    ValidationErrors,
-    Validators
-} from "@angular/forms";
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {RepositoryService} from "../../../../services/repository/repository.service";
 import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
-import {dialog} from "@tauri-apps/api";
-import {Repository} from "../../../../models/Repository";
 import {
     RepositoryFormComponent
 } from "../repository-form/repository-form.component";

mediarepo-ui/src/app/components/core/repositories-tab/edit-repository-dialog/edit-repository-dialog.component.html

@@ -0,0 +1,24 @@
+<h1 mat-dialog-title>Edit {{this.selectedRepository.name}}</h1>
+<div mat-dialog-content>
+    <app-repository-form #repoForm [name]="selectedRepository.name" [address]="selectedRepository.address ?? ''"
+                         [repositoryType]="selectedRepository.local? 'local' : 'remote'"
+                         [path]="selectedRepository.path ?? ''" [validateNameDuplicate]="false"></app-repository-form>
+</div>
+<div class="dialog-buttons" mat-dialog-actions>
+    <button (click)="closeDialog()" color="accent" mat-stroked-button>Cancel</button>
+    <button (click)="addRepository()"
+            *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'remote' || repoForm.localRepoExists"
+            [disabled]="!repoForm.formGroup.valid" color="primary" mat-flat-button
+            matTooltip="Save the existing repository">Save
+    </button>
+    <button (click)="this.initLocalRepository()"
+            *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'local' && !repoForm.localRepoExists"
+            [disabled]="!repoForm.formGroup.valid"
+            color="accent" mat-flat-button
+            matTooltip="Initialize the repository in the specified path">Init
+    </button>
+    <button (click)="repoForm.checkRepositoryStatus()"
+            *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'remote'" [disabled]="!repoForm.formGroup.valid"
+            class="check-connection-button" mat-stroked-button>Check Connection
+    </button>
+</div>

mediarepo-ui/src/app/components/core/repositories-tab/edit-repository-dialog/edit-repository-dialog.component.scss

@@ -0,0 +1,20 @@
+app-repository-form {
+    width: 100%;
+    height: 100%;
+}
+
+.dialog-buttons {
+    display: block;
+    width: 100%;
+
+    button {
+        margin-left: 1em;
+        float: right
+    }
+
+    .check-connection-button {
+        justify-self: right;
+        margin: 0;
+        float: left;
+    }
+}

mediarepo-ui/src/app/components/core/repositories-tab/edit-repository-dialog/edit-repository-dialog.component.spec.ts

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

mediarepo-ui/src/app/components/core/repositories-tab/edit-repository-dialog/edit-repository-dialog.component.ts

@@ -0,0 +1,82 @@
+import {Component, Inject, OnInit, ViewChild} from "@angular/core";
+import {
+    RepositoryFormComponent
+} from "../repository-form/repository-form.component";
+import {
+    RepositoryService
+} from "../../../../services/repository/repository.service";
+import {
+    ErrorBrokerService
+} from "../../../../services/error-broker/error-broker.service";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {
+    AddRepositoryDialogComponent
+} from "../add-repository-dialog/add-repository-dialog.component";
+import {Repository} from "../../../../models/Repository";
+
+@Component({
+    selector: "app-edit-repository-dialog",
+    templateUrl: "./edit-repository-dialog.component.html",
+    styleUrls: ["./edit-repository-dialog.component.scss"]
+})
+export class EditRepositoryDialogComponent {
+
+    @ViewChild(RepositoryFormComponent) repositoryForm!: RepositoryFormComponent;
+
+    public selectedRepository: Repository;
+    public originalName: string;
+
+    constructor(
+        public repoService: RepositoryService,
+        public errorBroker: ErrorBrokerService,
+        public dialogRef: MatDialogRef<AddRepositoryDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) data: any) {
+        this.selectedRepository = data.repository;
+        this.originalName = this.selectedRepository.name;
+    }
+
+    public async checkLocalRepoExists() {
+        this.repositoryForm.localRepoExists = await this.repoService.checkLocalRepositoryExists(
+            this.repositoryForm.formGroup.value.path);
+    }
+
+    public async initLocalRepository() {
+        const path = this.repositoryForm.formGroup.value.path;
+        try {
+            await this.repoService.initRepository(path);
+        } catch (err) {
+            this.errorBroker.showError(err);
+        }
+        await this.checkLocalRepoExists();
+    }
+
+    public async addRepository() {
+        let {name, repositoryType, path, address} = this.repositoryForm.formGroup.value;
+        path = repositoryType === "local" ? path : undefined;
+        address = repositoryType === "remote" ? address : undefined;
+
+        if (this.originalName === this.repoService.selectedRepository.getValue()?.name) {
+            await this.repoService.closeSelectedRepository();
+        }
+
+        try {
+            if (name != this.originalName) {
+                await this.repoService.removeRepository(this.originalName);
+            }
+            await this.repoService.addRepository(name, path, address,
+                repositoryType === "local");
+            this.selectedRepository.name = name;
+            this.selectedRepository.local = repositoryType === "local";
+            this.selectedRepository.path = path;
+            this.selectedRepository.address = address;
+
+            this.dialogRef.close();
+        } catch (err) {
+            this.errorBroker.showError(err);
+        }
+    }
+
+    public closeDialog() {
+        this.dialogRef.close();
+    }
+}

mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.html

@@ -29,6 +29,7 @@
                 <ng-icon name="mat-more-vert"></ng-icon>
             </button>
             <mat-menu #menu="matMenu">
+                <button (click)="openEditRepositoryDialog()" mat-menu-item>Edit</button>
                 <button (click)="removeRepository()" *ngIf="repository.local" mat-menu-item>Delete</button>
                 <button (click)="removeRepository()" *ngIf="!repository.local" mat-menu-item>Remove</button>
             </mat-menu>

mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts

@@ -5,6 +5,9 @@ import {ErrorBrokerService} from "../../../../services/error-broker/error-broker
 import {MatDialog} from "@angular/material/dialog";
 import {ConfirmDialogComponent} from "../../../shared/app-common/confirm-dialog/confirm-dialog.component";
 import {BusyIndicatorComponent} from "../../../shared/app-common/busy-indicator/busy-indicator.component";
+import {
+    EditRepositoryDialogComponent
+} from "../edit-repository-dialog/edit-repository-dialog.component";
 
 @Component({
     selector: "app-repository-card",
@@ -40,7 +43,6 @@ export class RepositoryCardComponent implements OnInit, OnDestroy {
         }
     }
 
-
     public isSelectedRepository(): boolean {
         return this.repoService.selectedRepository.getValue()?.name === this.repository.name
     }
@@ -137,4 +139,15 @@ export class RepositoryCardComponent implements OnInit, OnDestroy {
         this.daemonRunning = await this.repoService.checkDaemonRunning(
             this.repository.address!);
     }
+
+    public openEditRepositoryDialog(): void {
+        this.dialog.open(EditRepositoryDialogComponent, {
+            disableClose: true,
+            minWidth: "30%",
+            minHeight: "30%",
+            data: {
+                repository: this.repository
+            }
+        })
+    }
 }

mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.ts

@@ -13,6 +13,7 @@ import {dialog} from "@tauri-apps/api";
 import {
     ErrorBrokerService
 } from "../../../../services/error-broker/error-broker.service";
+import {MatDialog} from "@angular/material/dialog";
 
 @Component({
     selector: "app-repository-form",
@@ -25,6 +26,7 @@ export class RepositoryFormComponent implements OnInit {
     @Input() repositoryType: "local" | "remote" = "local";
     @Input() path: string = "";
     @Input() address: string = "";
+    @Input() validateNameDuplicate: boolean = false;
 
     @Output() formGroup = new FormGroup({
         name: new FormControl(this.name, [Validators.required]),
@@ -38,13 +40,19 @@ export class RepositoryFormComponent implements OnInit {
 
     repositories: Repository[] = [];
 
-    constructor(public repoService: RepositoryService, private errorBroker: ErrorBrokerService) {
+    constructor(public repoService: RepositoryService, public dialog: MatDialog) {
 
     }
 
     ngOnInit(): void {
         this.repoService.repositories.subscribe(
-            repositories => this.repositories = repositories)
+            repositories => this.repositories = repositories);
+        this.formGroup.setValue({
+            name: this.name,
+            repositoryType: this.repositoryType,
+            path: this.path,
+            address: this.address
+        });
     }
 
     public async checkRepositoryStatus() {
@@ -94,7 +102,7 @@ export class RepositoryFormComponent implements OnInit {
         const control = this.formGroup.get("name");
         const value = control?.value;
 
-        if (this.repositories.find(r => r.name === value)) {
+        if (this.validateNameDuplicate && this.repositories.find(r => r.name === value)) {
             control?.setErrors({nameAlreadyExists: value});
         }
     }