Add import ui layout

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

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

@@ -49,6 +49,11 @@ import {FilesTabSidebarComponent} from './pages/home/files-tab/files-tab-sidebar
 import {MatExpansionModule} from "@angular/material/expansion";
 import {TagItemComponent} from './components/tag-item/tag-item.component';
 import { FileEditComponent } from './components/file-edit/file-edit.component';
+import { ImportTabComponent } from './pages/home/import-tab/import-tab.component';
+import { ImportTabSidebarComponent } from './pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component';
+import { NativeFileSelectComponent } from './components/inputs/native-file-select/native-file-select.component';
+import { FilesystemImportComponent } from './pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component';
+import {MatCheckboxModule} from "@angular/material/checkbox";
 
 @NgModule({
   declarations: [
@@ -69,6 +74,10 @@ import { FileEditComponent } from './components/file-edit/file-edit.component';
     FilesTabSidebarComponent,
     TagItemComponent,
     FileEditComponent,
+    ImportTabComponent,
+    ImportTabSidebarComponent,
+    NativeFileSelectComponent,
+    FilesystemImportComponent,
   ],
     imports: [
         BrowserModule,
@@ -104,6 +113,7 @@ import { FileEditComponent } from './components/file-edit/file-edit.component';
         MatTooltipModule,
         MatMenuModule,
         MatExpansionModule,
+        MatCheckboxModule,
     ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -0,0 +1,17 @@
+<div class="file-select-inner" fxLayout="row">
+
+  <mat-form-field appearance="fill" fxFlex fxFlexFill>
+    <mat-label>{{label}}</mat-label>
+    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)">
+  </mat-form-field>
+
+  <div class="buttons-native-select" fxFlex="6em">
+    <button (click)="openNativeFileSelectDialog(false)" mat-button>
+      <mat-icon>insert_drive_file</mat-icon>
+    </button>
+    <button (click)="openNativeFileSelectDialog(true)" mat-button>
+      <mat-icon>folder</mat-icon>
+    </button>
+  </div>
+
+</div>

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

@@ -0,0 +1,14 @@
+.file-select-inner, mat-form-field {
+  width: 100%;
+}
+
+.buttons-native-select {
+  display: flex;
+  flex-direction: row;
+  padding-top: 4px;
+  button {
+    width: 3em;
+    height: 3em;
+    margin-left: -10px;
+  }
+}

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

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

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

@@ -0,0 +1,68 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {FormControl} from "@angular/forms";
+import {dialog} from "@tauri-apps/api";
+import {DialogFilter} from "@tauri-apps/api/dialog";
+
+@Component({
+  selector: 'app-native-file-select',
+  templateUrl: './native-file-select.component.html',
+  styleUrls: ['./native-file-select.component.scss']
+})
+export class NativeFileSelectComponent implements OnInit{
+
+  @Input() label: string | undefined;
+  @Input() mode: "files" | "folders" | "all" = "all";
+  @Input() formControlName: string | undefined;
+  @Input() formControl: FormControl | undefined;
+  @Input() startPath: string | undefined;
+  @Input() multiSelect: boolean = true;
+  @Input() filters: DialogFilter[] = [];
+
+  @Output() fileSelect = new EventEmitter<string[]>();
+
+  public files: string[] = [];
+
+  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;
+      }
+    }
+  }
+
+  public setFiles(filesExpr: string) {
+    this.files = filesExpr.split(",");
+    this.fileSelect.emit(this.files);
+  }
+
+  /**
+   * Opens the native dialog to select files or folders
+   * @param {boolean} folders
+   * @returns {Promise<void>}
+   */
+  public async openNativeFileSelectDialog(folders: boolean) {
+    const files = await dialog.open({
+      multiple: this.multiSelect,
+      directory: folders,
+      defaultPath: this.startPath,
+      filters: this.filters,
+    });
+    if (files instanceof Array) {
+      this.files = files;
+    } else {
+      this.files = [files];
+    }
+    this.fileSelect.emit(this.files);
+  }
+
+}

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

@@ -1,4 +1,4 @@
-<mat-drawer-container class="page">
+<mat-drawer-container>
   <mat-drawer disableClose mode="side" opened>
     <app-files-tab-sidebar (searchEndEvent)="this.contentLoading = false"
                            (searchStartEvent)="this.contentLoading = true"

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

@@ -16,6 +16,7 @@ mat-drawer-content {
 
 mat-drawer-container {
   height: 100%;
+  width: 100%;
   overflow: hidden;
 }
 
@@ -29,11 +30,6 @@ app-file-gallery, app-files-tab-sidebar {
   width: 100%;
 }
 
-.page {
-  height: 100%;
-  width: 100%;
-}
-
 .spinner-overlay {
   position: absolute;
   top: 0;

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

@@ -6,5 +6,8 @@
     <mat-tab *ngIf="this.selectedRepository" label="Files">
       <app-files-tab></app-files-tab>
     </mat-tab>
+    <mat-tab *ngIf="this.selectedRepository" label="Import">
+      <app-import-tab></app-import-tab>
+    </mat-tab>
   </mat-tab-group>
 </div>

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

@@ -0,0 +1,19 @@
+<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-divider></mat-divider>
+
+<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
+    adjacent .txt tag files
+  </mat-checkbox>
+  <mat-checkbox [checked]="this.deleteAfterImport" (change)="this.deleteAfterImport = $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>

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

@@ -0,0 +1,25 @@
+app-native-file-select {
+  width: 100%;
+}
+
+button {
+  width: 100%;
+}
+
+mat-divider {
+  width: 100%;
+  height: 1px;
+  margin: 1em 0;
+}
+
+.filled-button {
+  background-color: #5c5c5c;
+}
+
+.binary-import-options {
+  margin-top: 1em;
+
+  mat-checkbox {
+    margin: 0.5em 0;
+  }
+}

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

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

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

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-filesystem-import',
+  templateUrl: './filesystem-import.component.html',
+  styleUrls: ['./filesystem-import.component.scss']
+})
+export class FilesystemImportComponent {
+
+  public fileCount: number = 0;
+  public paths: string[] = [];
+  public importTagsFromTxt = true;
+  public deleteAfterImport = false;
+
+  constructor() { }
+
+  public async setSelectedPaths(paths: string[]) {
+    this.paths = paths;
+    this.fileCount = paths.length;
+  }
+}

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

@@ -0,0 +1,20 @@
+<div class="import-tab-inner">
+  <mat-tab-group headerPosition="below">
+    <mat-tab label="Import">
+      <div class="import-sidebar-tab-inner" fxLayout="column">
+        <div class="import-type-select-wrapper" fxFlex="6em">
+          <mat-form-field class="import-type-select">
+            <mat-label>Import Type</mat-label>
+            <mat-select value="filesystem">
+              <mat-option value="filesystem">Filesystem</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-divider></mat-divider>
+        </div>
+        <div class="import-configuration" fxFlex fxFlexFill>
+          <app-filesystem-import></app-filesystem-import>
+        </div>
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+</div>

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

@@ -0,0 +1,34 @@
+mat-tab-group, mat-tab {
+  width: 100%;
+  height: 100%;
+}
+
+
+.import-tab-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.import-type-select-wrapper {
+  width: 100%;
+
+  .import-type-select {
+    width: calc(100% - 2em);
+    height: calc(100% - 2em);
+    margin: 1em;
+    mat-select {
+      height: 100%;
+    }
+  }
+}
+
+.import-sidebar-tab-inner {
+  width: 100%;
+  height: 100%;
+}
+
+.import-configuration {
+  padding: 1em;
+}

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

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

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

@@ -0,0 +1,12 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatTabGroup} from "@angular/material/tabs";
+
+@Component({
+  selector: 'app-import-tab-sidebar',
+  templateUrl: './import-tab-sidebar.component.html',
+  styleUrls: ['./import-tab-sidebar.component.scss']
+})
+export class ImportTabSidebarComponent {
+
+  constructor() { }
+}

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

@@ -0,0 +1,8 @@
+<mat-drawer-container>
+  <mat-drawer disableClose="true" mode="side" opened>
+    <app-import-tab-sidebar></app-import-tab-sidebar>
+  </mat-drawer>
+  <mat-drawer-content>
+    <app-file-grid [files]="this.files" ></app-file-grid>
+  </mat-drawer-content>
+</mat-drawer-container>

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

@@ -0,0 +1,22 @@
+mat-drawer-container {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+mat-drawer-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+}
+
+mat-drawer {
+  height: 100%;
+  width: 25%;
+}
+
+app-import-tab-sidebar {
+  height: 100%;
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {File} from "../../../models/File";
+
+@Component({
+  selector: 'app-import-tab',
+  templateUrl: './import-tab.component.html',
+  styleUrls: ['./import-tab.component.scss']
+})
+export class ImportTabComponent implements OnInit {
+
+  public files: File[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}