Implement importing itself

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

mediarepo-ui/src-tauri/Cargo.lock

@@ -1580,8 +1580,8 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 
 [[package]]
 name = "mediarepo-api"
-version = "0.5.3"
-source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=827ae9613d18b773a66c80ee803c4e112ca987b9#827ae9613d18b773a66c80ee803c4e112ca987b9"
+version = "0.6.0"
+source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=ddebf4bf0c3e96ede64182ff52bd84f134acc33a#ddebf4bf0c3e96ede64182ff52bd84f134acc33a"
 dependencies = [
  "async-trait",
  "chrono",
@@ -2524,9 +2524,9 @@ dependencies = [
 
 [[package]]
 name = "rmp-ipc"
-version = "0.9.0"
+version = "0.9.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f6e9a9202fb951b3ca3088a4edd351774ef154efabb759d6aac2911cc1ae60c1"
+checksum = "87d2b669d0332e1478b88fdecf4c03cc0c8ce1d977a79eba848f4532213567e6"
 dependencies = [
  "async-trait",
  "byteorder",

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 = "827ae9613d18b773a66c80ee803c4e112ca987b9"
+rev = "ddebf4bf0c3e96ede64182ff52bd84f134acc33a"
 features = ["tauri-plugin"]
 
 [features]

mediarepo-ui/src/app/models/AddFileOptions.ts

@@ -0,0 +1,8 @@
+export class AddFileOptions {
+  public read_tags_from_txt = false;
+  public delete_after_import = false;
+
+  constructor() {
+  }
+
+}

mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html

@@ -7,7 +7,7 @@
 </mat-form-field>
 <app-native-file-select [mode]="selectionType.value" (fileSelect)="this.setSelectedPaths($event)"></app-native-file-select>
 <button mat-stroked-button class="filled-button">
-  {{this.fileCount}} files found
+  {{resolving? "Searching for files..." : this.fileCount + " files found"}}
   <mat-progress-bar *ngIf="resolving" mode="indeterminate" color="primary"></mat-progress-bar>
 </button>
 
@@ -16,14 +16,17 @@
 <button mat-flat-button class="filled-button">Tag parsing options</button>
 
 <section class="binary-import-options">
-  <mat-checkbox [checked]="this.importTagsFromTxt" (change)="this.importTagsFromTxt = $event.checked">Import tags from
+  <mat-checkbox [checked]="this.importOptions.read_tags_from_txt" (change)="this.importOptions.read_tags_from_txt = $event.checked">Import tags from
     adjacent .txt tag files
   </mat-checkbox>
-  <mat-checkbox [checked]="this.deleteAfterImport" (change)="this.deleteAfterImport = $event.checked" color="warn">
+  <mat-checkbox [checked]="this.importOptions.delete_after_import" (change)="this.importOptions.delete_after_import = $event.checked" color="warn">
     Delete files from original location after import
   </mat-checkbox>
 </section>
 
 <mat-divider></mat-divider>
 
-<button mat-flat-button color="primary" class="import-button">Import</button>
+<button mat-flat-button color="primary" class="import-button" [disabled]="importing || this.fileCount === 0" (click)="import()">
+  {{importing? "Importing..." : "Import"}}
+</button>
+<mat-progress-bar *ngIf="importing" mode="determinate" color="primary" [value]="this.importingProgress"></mat-progress-bar>

mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts

@@ -1,7 +1,9 @@
-import {Component} from '@angular/core';
+import {Component, EventEmitter, Output} from '@angular/core';
 import {FileOsMetadata} from "../../../../../models/FileOsMetadata";
 import {ImportService} from "../../../../../services/import/import.service";
 import {ErrorBrokerService} from "../../../../../services/error-broker/error-broker.service";
+import {AddFileOptions} from "../../../../../models/AddFileOptions";
+import {File} from "../../../../../models/File";
 
 @Component({
   selector: 'app-filesystem-import',
@@ -10,12 +12,15 @@ import {ErrorBrokerService} from "../../../../../services/error-broker/error-bro
 })
 export class FilesystemImportComponent {
 
+  @Output() fileImported = new EventEmitter<File>();
+
   public fileCount: number = 0;
   public files: FileOsMetadata[] = [];
-  public importTagsFromTxt = true;
-  public deleteAfterImport = false;
+  public importOptions = new AddFileOptions();
 
   public resolving = false;
+  public importing = false;
+  public importingProgress = 0;
 
   constructor(private errorBroker: ErrorBrokerService, private importService: ImportService) {
   }
@@ -31,4 +36,22 @@ export class FilesystemImportComponent {
     }
     this.resolving = false;
   }
+
+  public async import() {
+    this.importing = true;
+
+      this.importingProgress = 0;
+      for (const file of this.files) {
+        try {
+        const resultFile = await this.importService.addLocalFile(file, this.importOptions);
+        this.fileImported.emit(resultFile);
+        } catch (err) {
+          console.log(err);
+          this.errorBroker.showError(err);
+        }
+        this.importingProgress++;
+      }
+
+    this.importing = false;
+  }
 }

mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html

@@ -12,7 +12,7 @@
           <mat-divider></mat-divider>
         </div>
         <div class="import-configuration" fxFlex fxFlexFill>
-          <app-filesystem-import></app-filesystem-import>
+          <app-filesystem-import (fileImported)="this.fileImported.emit($event)"></app-filesystem-import>
         </div>
       </div>
     </mat-tab>

mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts

@@ -1,5 +1,12 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 import {MatTabGroup} from "@angular/material/tabs";
+import {File} from "../../../../models/File";
 
 @Component({
   selector: 'app-import-tab-sidebar',
@@ -8,5 +15,6 @@ import {MatTabGroup} from "@angular/material/tabs";
 })
 export class ImportTabSidebarComponent {
 
+  @Output() fileImported = new EventEmitter<File>();
   constructor() { }
 }

mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html

@@ -1,6 +1,6 @@
 <mat-drawer-container>
   <mat-drawer disableClose="true" mode="side" opened>
-    <app-import-tab-sidebar></app-import-tab-sidebar>
+    <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)"></app-import-tab-sidebar>
   </mat-drawer>
   <mat-drawer-content>
     <app-file-grid [files]="this.files" ></app-file-grid>

mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss

@@ -16,7 +16,8 @@ mat-drawer {
   width: 25%;
 }
 
-app-import-tab-sidebar {
+app-import-tab-sidebar, app-file-gallery {
   height: 100%;
   width: 100%;
+  margin: 0;
 }

mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts

@@ -6,13 +6,15 @@ import {File} from "../../../models/File";
   templateUrl: './import-tab.component.html',
   styleUrls: ['./import-tab.component.scss']
 })
-export class ImportTabComponent implements OnInit {
+export class ImportTabComponent {
 
   public files: File[] = [];
 
   constructor() { }
 
-  ngOnInit(): void {
+  public addFileFromImport(file: File) {
+    this.files.push(file);
+    this.files = [...this.files];
   }
 
 }

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

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import {FileOsMetadata} from "../../models/FileOsMetadata";
 import {invoke} from "@tauri-apps/api/tauri";
+import {AddFileOptions} from "../../models/AddFileOptions";
+import {File} from "../../models/File";
 
 @Injectable({
   providedIn: 'root'
@@ -9,7 +11,22 @@ export class ImportService {
 
   constructor() { }
 
+  /**
+   * Resolves paths from the local file system into a list of files that can be imported
+   * @param {string[]} paths
+   * @returns {Promise<FileOsMetadata[]>}
+   */
   public async resolvePathsToFiles(paths: string[]): Promise<FileOsMetadata[]> {
     return await invoke<FileOsMetadata[]>("plugin:mediarepo|resolve_paths_to_files", {paths});
   }
+
+  /**
+   * Imports a file from the local file system
+   * @param {FileOsMetadata} metadata
+   * @param {AddFileOptions} options
+   * @returns {Promise<File>}
+   */
+  public async addLocalFile(metadata: FileOsMetadata, options: AddFileOptions): Promise<File> {
+    return await invoke<File>("plugin:mediarepo|add_local_file", {metadata, options});
+  }
 }