Add resolving of files when a path is selected

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

mediarepo-ui/src-tauri/Cargo.lock

@@ -1580,12 +1580,13 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 
 [[package]]
 name = "mediarepo-api"
-version = "0.5.1"
-source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=b6a287e200eeae1105466ae7851a3a9287efe34b#b6a287e200eeae1105466ae7851a3a9287efe34b"
+version = "0.5.3"
+source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=827ae9613d18b773a66c80ee803c4e112ca987b9#827ae9613d18b773a66c80ee803c4e112ca987b9"
 dependencies = [
  "async-trait",
  "chrono",
  "directories",
+ "mime_guess",
  "parking_lot",
  "rmp-ipc",
  "serde",
@@ -1613,6 +1614,22 @@ dependencies = [
  "autocfg",
 ]
 
+[[package]]
+name = "mime"
+version = "0.3.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a60c7ce501c71e03a9c9c0d35b861413ae925bd979cc7a4e30d060069aaac8d"
+
+[[package]]
+name = "mime_guess"
+version = "2.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2684d4c2e97d99848d30b324b00c8fcc7e5c897b7cbb5819b09e7c90e8baf212"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
 [[package]]
 name = "minisign-verify"
 version = "0.1.8"
@@ -3388,6 +3405,15 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "56dee185309b50d1f11bfedef0fe6d036842e3fb77413abef29f8f8d1c5d4c1c"
 
+[[package]]
+name = "unicase"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50f37be617794602aabbeee0be4f259dc1778fabe05e2d67ee8f79326d5cb4f6"
+dependencies = [
+ "version_check",
+]
+
 [[package]]
 name = "unicode-bidi"
 version = "0.3.7"

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

mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html

@@ -2,12 +2,9 @@
 
   <mat-form-field appearance="fill">
     <mat-label>{{label}}</mat-label>
-    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)" class="file-input">
+    <input #filesInput matInput [value]="files.join(', ')" (change)="this.setFiles(filesInput.value)" class="file-input">
 
     <div class="buttons-native-select">
-      <button *ngIf="mode === 'all'" (click)="openNativeFileSelectDialog(false)" mat-button>
-        <mat-icon>folder</mat-icon>
-      </button>
       <button *ngIf="mode === 'files'" (click)="openNativeFileSelectDialog(false)" mat-button>
         <mat-icon>insert_drive_file</mat-icon>
       </button>

mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts

@@ -1,4 +1,12 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges
+} from '@angular/core';
 import {FormControl} from "@angular/forms";
 import {dialog} from "@tauri-apps/api";
 import {DialogFilter} from "@tauri-apps/api/dialog";
@@ -8,10 +16,10 @@ import {DialogFilter} from "@tauri-apps/api/dialog";
   templateUrl: './native-file-select.component.html',
   styleUrls: ['./native-file-select.component.scss']
 })
-export class NativeFileSelectComponent implements OnInit{
+export class NativeFileSelectComponent implements OnInit, OnChanges {
 
-  @Input() label: string | undefined;
-  @Input() mode: "files" | "folders" | "all" = "all";
+
+  @Input() mode: "files" | "folders" = "files";
   @Input() formControlName: string | undefined;
   @Input() formControl: FormControl | undefined;
   @Input() startPath: string | undefined;
@@ -21,22 +29,19 @@ export class NativeFileSelectComponent implements OnInit{
   @Output() fileSelect = new EventEmitter<string[]>();
 
   public files: string[] = [];
+  public label: string | undefined;
 
-  constructor() { }
+  constructor() {
+  }
 
   public ngOnInit(): void {
-    if (!this.label) {
-      switch (this.mode) {
-        case "all":
-          this.label = "Select Files or Folders";
-          break;
-        case "files":
-          this.label = "Select Files";
-          break;
-        case "folders":
-          this.label  = "Select a folder";
-          break;
-      }
+    this.setLabel();
+  }
+
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes["mode"]) {
+      this.setLabel();
     }
   }
 
@@ -59,10 +64,20 @@ export class NativeFileSelectComponent implements OnInit{
     });
     if (files instanceof Array) {
       this.files = files;
-    } else {
+    } else if (files) {
       this.files = [files];
     }
     this.fileSelect.emit(this.files);
   }
 
+  private setLabel(): void {
+    switch (this.mode) {
+      case "files":
+        this.label = "Select Files";
+        break;
+      case "folders":
+        this.label = "Select a folder";
+        break;
+    }
+  }
 }

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

@@ -0,0 +1,7 @@
+export type FileOsMetadata = {
+  name: string,
+  path: string,
+  mime_type: string,
+  created_at: Date,
+  modified_at: Date,
+}

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

@@ -1,5 +1,15 @@
-<app-native-file-select (fileSelect)="this.setSelectedPaths($event)"></app-native-file-select>
-<button mat-stroked-button class="filled-button">{{this.fileCount}} files found</button>
+<mat-form-field>
+  <mat-label>Selection Type</mat-label>
+  <mat-select #selectionType value="files">
+    <mat-option value="folders">Folders</mat-option>
+    <mat-option value="files">Files</mat-option>
+  </mat-select>
+</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
+  <mat-progress-bar *ngIf="resolving" mode="indeterminate" color="primary"></mat-progress-bar>
+</button>
 
 <mat-divider></mat-divider>
 

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

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
+import {FileOsMetadata} from "../../../../../models/FileOsMetadata";
+import {ImportService} from "../../../../../services/import/import.service";
+import {ErrorBrokerService} from "../../../../../services/error-broker/error-broker.service";
 
 @Component({
   selector: 'app-filesystem-import',
@@ -8,14 +11,24 @@ import { Component, OnInit } from '@angular/core';
 export class FilesystemImportComponent {
 
   public fileCount: number = 0;
-  public paths: string[] = [];
+  public files: FileOsMetadata[] = [];
   public importTagsFromTxt = true;
   public deleteAfterImport = false;
 
-  constructor() { }
+  public resolving = false;
+
+  constructor(private errorBroker: ErrorBrokerService, private importService: ImportService) {
+  }
 
   public async setSelectedPaths(paths: string[]) {
-    this.paths = paths;
-    this.fileCount = paths.length;
+    this.resolving = true;
+    try {
+      this.files = await this.importService.resolvePathsToFiles(paths);
+      this.fileCount = this.files.length;
+    } catch (err) {
+      console.log(err);
+      this.errorBroker.showError(err);
+    }
+    this.resolving = false;
   }
 }

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ImportService } from './import.service';
+
+describe('ImportService', () => {
+  let service: ImportService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ImportService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import {FileOsMetadata} from "../../models/FileOsMetadata";
+import {invoke} from "@tauri-apps/api/tauri";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ImportService {
+
+  constructor() { }
+
+  public async resolvePathsToFiles(paths: string[]): Promise<FileOsMetadata[]> {
+    return await invoke<FileOsMetadata[]>("plugin:mediarepo|resolve_paths_to_files", {paths});
+  }
+}