Add initialization of repositories to dialog

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

mediarepo-ui/src-tauri/Cargo.lock

@@ -1581,7 +1581,7 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 [[package]]
 name = "mediarepo-api"
 version = "0.1.0"
-source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=c366f6a8ecc337790a0b5ebb18bb36267279ade8#c366f6a8ecc337790a0b5ebb18bb36267279ade8"
+source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=4e0859cc08723f52057df73f16bff786be1aee43#4e0859cc08723f52057df73f16bff786be1aee43"
 dependencies = [
  "async-trait",
  "chrono",

mediarepo-ui/src-tauri/Cargo.toml

@@ -30,7 +30,7 @@ features = ["env-filter"]
 
 [dependencies.mediarepo-api]
 git = "https://github.com/Trivernis/mediarepo-api.git"
-rev = "c366f6a8ecc337790a0b5ebb18bb36267279ade8"
+rev = "4e0859cc08723f52057df73f16bff786be1aee43"
 features = ["tauri-plugin"]
 
 [features]

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

@@ -43,6 +43,7 @@ import {DragDropModule} from "@angular/cdk/drag-drop";
 import { ContentAwareImageComponent } from './components/content-aware-image/content-aware-image.component';
 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";
 
 @NgModule({
   declarations: [
@@ -60,39 +61,40 @@ import { AddRepositoryDialogComponent } from './pages/home/repositories-tab/add-
     ContentAwareImageComponent,
     AddRepositoryDialogComponent,
   ],
-    imports: [
+  imports: [
-        BrowserModule,
+    BrowserModule,
-        AppRoutingModule,
+    AppRoutingModule,
-        BrowserAnimationsModule,
+    BrowserAnimationsModule,
-        MatCardModule,
+    MatCardModule,
-        MatListModule,
+    MatListModule,
-        MatButtonModule,
+    MatButtonModule,
-        MatToolbarModule,
+    MatToolbarModule,
-        MatSnackBarModule,
+    MatSnackBarModule,
-        MatFormFieldModule,
+    MatFormFieldModule,
-        MatInputModule,
+    MatInputModule,
-        ReactiveFormsModule,
+    ReactiveFormsModule,
-        MatSidenavModule,
+    MatSidenavModule,
-        MatGridListModule,
+    MatGridListModule,
-        MatProgressBarModule,
+    MatProgressBarModule,
-        MatPaginatorModule,
+    MatPaginatorModule,
-        ScrollingModule,
+    ScrollingModule,
-        LightboxModule,
+    LightboxModule,
-        MatChipsModule,
+    MatChipsModule,
-        MatIconModule,
+    MatIconModule,
-        MatAutocompleteModule,
+    MatAutocompleteModule,
-        MatTabsModule,
+    MatTabsModule,
-        FlexModule,
+    FlexModule,
-        GridModule,
+    GridModule,
-        MatRippleModule,
+    MatRippleModule,
-        MatDialogModule,
+    MatDialogModule,
-        MatSelectModule,
+    MatSelectModule,
-        MatProgressSpinnerModule,
+    MatProgressSpinnerModule,
-        BlockUIModule,
+    BlockUIModule,
-        PanelModule,
+    PanelModule,
-        DragDropModule,
+    DragDropModule,
-        MatSliderModule,
+    MatSliderModule,
-    ],
+    MatTooltipModule,
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })

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

@@ -2,12 +2,13 @@
 <div mat-dialog-content>
   <form [formGroup]="formGroup">
 
-    <mat-form-field>
+    <mat-form-field matTooltipShowDelay="1000" matTooltip="A unique name for the repository">
       <mat-label>Name</mat-label>
-      <input matInput formControlName="name">
+      <input matInput formControlName="name" (change)="validateName()" (input)="validateName()" (blur)="validateName()">
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field matTooltipShowDelay="1000"
+                    matTooltip="Type of repository if it's on the local system or somewhere else">
       <mat-label>Type</mat-label>
       <mat-select #repoTypeSelect formControlName="repositoryType"
                   (selectionChange)="onTypeChange(repoTypeSelect.value)">
@@ -16,13 +17,18 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field *ngIf="repoTypeSelect.value === 'local'">
+    <mat-form-field *ngIf="repoTypeSelect.value === 'local'"
-      <button class="button-folder-select" mat-button (click)="openFolderDialog()"><mat-icon>folder</mat-icon></button>
+                    matTooltipShowDelay="1000"
+                    matTooltip="Path where the repository is located or should be created">
+      <button class="button-folder-select" mat-button (click)="openFolderDialog()">
+        <mat-icon>folder</mat-icon>
+      </button>
       <mat-label>Path</mat-label>
-      <input matInput formControlName="path">
+      <input matInput formControlName="path" (change)="this.checkLocalRepoExists()">
     </mat-form-field>
 
-    <mat-form-field *ngIf="repoTypeSelect.value === 'remote'">
+    <mat-form-field *ngIf="repoTypeSelect.value === 'remote'" matTooltipShowDelay="1000"
+                    matTooltip="IP address and port of the remote repository">
       <mat-label>Address</mat-label>
       <input matInput formControlName="address">
     </mat-form-field>
@@ -32,8 +38,17 @@
   </div>
 </div>
 <div class="dialog-buttons" mat-dialog-actions>
-  <button mat-flat-button [disabled]="!formGroup.valid" color="primary" (click)="addRepository()">Add</button>
+  <button mat-flat-button *ngIf="repoTypeSelect.value === 'remote' || this.localRepoExists"
+          [disabled]="!formGroup.valid" matTooltip="Add the existing repository" color="primary"
+          (click)="addRepository()">Add
+  </button>
+  <button mat-flat-button *ngIf="repoTypeSelect.value === 'local' && !this.localRepoExists"
+          [disabled]="!formGroup.valid"
+          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>
+          mat-stroked-button (click)="checkRepositoryStatus()">Check Connection
+  </button>
 </div>

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

@@ -9,13 +9,14 @@ 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";
 
 @Component({
   selector: 'app-add-repository-dialog',
   templateUrl: './add-repository-dialog.component.html',
   styleUrls: ['./add-repository-dialog.component.scss']
 })
-export class AddRepositoryDialogComponent {
+export class AddRepositoryDialogComponent implements OnInit {
 
   formGroup = new FormGroup({
     name: new FormControl("My Repository", [Validators.required]),
@@ -24,7 +25,9 @@ export class AddRepositoryDialogComponent {
     address: new FormControl("", [this.validateAddress])
   });
 
+  repositories: Repository[] = [];
   onlineStatus = "Unknown";
+  localRepoExists = false;
 
   constructor(
     public repoService: RepositoryService,
@@ -33,6 +36,10 @@ export class AddRepositoryDialogComponent {
     @Inject(MAT_DIALOG_DATA) data: any) {
   }
 
+  ngOnInit(): void {
+    this.repoService.repositories.subscribe(repositories => this.repositories = repositories)
+  }
+
   public async checkRepositoryStatus() {
     this.onlineStatus = "Checking...";
     const address = this.formGroup.value.address;
@@ -41,6 +48,16 @@ export class AddRepositoryDialogComponent {
     this.onlineStatus = running? "Online" : "Offline";
   }
 
+  public async checkLocalRepoExists() {
+    this.localRepoExists = await this.repoService.checkLocalRepositoryExists(this.formGroup.value.path);
+  }
+
+  public async initLocalRepository() {
+    const path = this.formGroup.value.path;
+    await this.repoService.initRepository(path);
+    await this.checkLocalRepoExists();
+  }
+
   public async addRepository() {
     let {name, repositoryType, path, address} = this.formGroup.value;
     path = repositoryType === "local"? path : undefined;
@@ -63,6 +80,7 @@ export class AddRepositoryDialogComponent {
       multiple: false,
     });
     this.formGroup.get("path")?.setValue(path);
+    await this.checkLocalRepoExists();
   }
 
   public async onTypeChange(type: string) {
@@ -86,6 +104,15 @@ export class AddRepositoryDialogComponent {
     }, 0);
   }
 
+  validateName() {
+    const control = this.formGroup.get("name");
+    const value = control?.value;
+
+    if (this.repositories.find(r => r.name === value)) {
+      control?.setErrors({nameAlreadyExists: value});
+    }
+  }
+
   validatePath(control: AbstractControl): ValidationErrors | null {
     const repositoryType = control.parent?.get("repositoryType")?.value ?? "local";
 

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

@@ -41,6 +41,14 @@ export class RepositoryService {
    * @returns {Promise<void>}
    */
   public async setRepository(repo: Repository) {
+    const selectedRepo = this.selectedRepository.getValue()
+    if (selectedRepo) {
+      if (selectedRepo.local) {
+        await this.closeSelectedRepository();
+      } else {
+        await this.disconnectSelectedRepository();
+      }
+    }
     await invoke("plugin:mediarepo|select_repository", {name: repo.name});
     await this.loadRepositories();
   }
@@ -85,6 +93,24 @@ export class RepositoryService {
     return await invoke<boolean>("plugin:mediarepo|check_daemon_running", {address});
   }
 
+  /**
+   * Checks if a local repository exists
+   * @param {string} path
+   * @returns {Promise<boolean>}
+   */
+  public async checkLocalRepositoryExists(path: string): Promise<boolean> {
+    return await invoke<boolean>("plugin:mediarepo|check_local_repository_exists", {path})
+  }
+
+  /**
+   * Removes a repository from the list of saved repositories
+   * @param {string} name
+   * @returns {Promise<void>}
+   */
+  public async removeRepository(name: string): Promise<void> {
+    await invoke("plugin:mediarepo|remove_repository", {name})
+  }
+
   /**
    * Starts a daemon for the given repository path
    * @param {string} repoPath
@@ -94,6 +120,10 @@ export class RepositoryService {
     await invoke("plugin:mediarepo|start_daemon", {repoPath})
   }
 
+  public async initRepository(repoPath: string): Promise<void> {
+    await invoke("plugin:mediarepo|init_repository", {repoPath});
+  }
+
   async loadSelectedRepository() {
     let active_repo = await invoke<Repository | undefined>("plugin:mediarepo|get_active_repository");
     this.selectedRepository.next(active_repo);