From af8b84e9754daca9dfa32c2763f44b72f8057c9c Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Mon, 8 Nov 2021 20:40:45 +0100
Subject: [PATCH] Add import ui layout

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/src/app/app.module.ts            | 80 +++++++++++--------
 .../native-file-select.component.html         | 17 ++++
 .../native-file-select.component.scss         | 14 ++++
 .../native-file-select.component.spec.ts      | 25 ++++++
 .../native-file-select.component.ts           | 68 ++++++++++++++++
 .../home/files-tab/files-tab.component.html   |  2 +-
 .../home/files-tab/files-tab.component.scss   |  6 +-
 .../src/app/pages/home/home.component.html    |  3 +
 .../filesystem-import.component.html          | 19 +++++
 .../filesystem-import.component.scss          | 25 ++++++
 .../filesystem-import.component.spec.ts       | 25 ++++++
 .../filesystem-import.component.ts            | 21 +++++
 .../import-tab-sidebar.component.html         | 20 +++++
 .../import-tab-sidebar.component.scss         | 34 ++++++++
 .../import-tab-sidebar.component.spec.ts      | 25 ++++++
 .../import-tab-sidebar.component.ts           | 12 +++
 .../home/import-tab/import-tab.component.html |  8 ++
 .../home/import-tab/import-tab.component.scss | 22 +++++
 .../import-tab/import-tab.component.spec.ts   | 25 ++++++
 .../home/import-tab/import-tab.component.ts   | 18 +++++
 20 files changed, 428 insertions(+), 41 deletions(-)
 create mode 100644 mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
 create mode 100644 mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
 create mode 100644 mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts

diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts
index f443a4e..d8956b4 100644
--- a/mediarepo-ui/src/app/app.module.ts
+++ b/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,42 +74,47 @@ import { FileEditComponent } from './components/file-edit/file-edit.component';
     FilesTabSidebarComponent,
     TagItemComponent,
     FileEditComponent,
+    ImportTabComponent,
+    ImportTabSidebarComponent,
+    NativeFileSelectComponent,
+    FilesystemImportComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatCardModule,
-    MatListModule,
-    MatButtonModule,
-    MatToolbarModule,
-    MatSnackBarModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    MatSidenavModule,
-    MatGridListModule,
-    MatProgressBarModule,
-    MatPaginatorModule,
-    ScrollingModule,
-    MatChipsModule,
-    MatIconModule,
-    MatAutocompleteModule,
-    MatTabsModule,
-    FlexModule,
-    GridModule,
-    MatRippleModule,
-    MatDialogModule,
-    MatSelectModule,
-    MatProgressSpinnerModule,
-    BlockUIModule,
-    PanelModule,
-    DragDropModule,
-    MatSliderModule,
-    MatTooltipModule,
-    MatMenuModule,
-    MatExpansionModule,
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatCardModule,
+        MatListModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatSnackBarModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        MatSidenavModule,
+        MatGridListModule,
+        MatProgressBarModule,
+        MatPaginatorModule,
+        ScrollingModule,
+        MatChipsModule,
+        MatIconModule,
+        MatAutocompleteModule,
+        MatTabsModule,
+        FlexModule,
+        GridModule,
+        MatRippleModule,
+        MatDialogModule,
+        MatSelectModule,
+        MatProgressSpinnerModule,
+        BlockUIModule,
+        PanelModule,
+        DragDropModule,
+        MatSliderModule,
+        MatTooltipModule,
+        MatMenuModule,
+        MatExpansionModule,
+        MatCheckboxModule,
+    ],
   providers: [],
   bootstrap: [AppComponent]
 })
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
new file mode 100644
index 0000000..6f9d654
--- /dev/null
+++ b/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>
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
new file mode 100644
index 0000000..e95ec32
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.spec.ts b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.spec.ts
new file mode 100644
index 0000000..6800d85
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.ts
new file mode 100644
index 0000000..5a7dfc5
--- /dev/null
+++ b/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);
+  }
+
+}
diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html
index 1f9293f..d10c740 100644
--- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html
+++ b/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"
diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss
index a362e99..ece6467 100644
--- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss
+++ b/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;
diff --git a/mediarepo-ui/src/app/pages/home/home.component.html b/mediarepo-ui/src/app/pages/home/home.component.html
index 0aaa53c..8c9f604 100644
--- a/mediarepo-ui/src/app/pages/home/home.component.html
+++ b/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>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html
new file mode 100644
index 0000000..73e5e0c
--- /dev/null
+++ b/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>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss
new file mode 100644
index 0000000..5bba0b1
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts
new file mode 100644
index 0000000..6252f90
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts
new file mode 100644
index 0000000..dc6c5db
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html
new file mode 100644
index 0000000..f70ab28
--- /dev/null
+++ b/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>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss
new file mode 100644
index 0000000..7a59d9d
--- /dev/null
+++ b/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;
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts
new file mode 100644
index 0000000..1a67b9f
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts
new file mode 100644
index 0000000..e340819
--- /dev/null
+++ b/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() { }
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html
new file mode 100644
index 0000000..8bf58a9
--- /dev/null
+++ b/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>
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss
new file mode 100644
index 0000000..3f1ab9e
--- /dev/null
+++ b/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%;
+}
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.spec.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.spec.ts
new file mode 100644
index 0000000..10d3571
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts
new file mode 100644
index 0000000..4346c41
--- /dev/null
+++ b/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 {
+  }
+
+}