Move import sidebar to sidebar module

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

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

@@ -6,7 +6,7 @@ import {FilesTabComponent} from "./files-tab/files-tab.component";
 import {FilesTabSidebarComponent} from "./files-tab/files-tab-sidebar/files-tab-sidebar.component";
 import {ImportTabComponent} from "./import-tab/import-tab.component";
 import {ImportTabSidebarComponent} from "./import-tab/import-tab-sidebar/import-tab-sidebar.component";
-import {FilesystemImportComponent} from "./import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component";
+import {FilesystemImportComponent} from "../shared/sidebar/file-import/filesystem-import/filesystem-import.component";
 import {MatButtonModule} from "@angular/material/button";
 import {MatSidenavModule} from "@angular/material/sidenav";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
@@ -43,12 +43,11 @@ import {TagModule} from "../shared/tag/tag.module";
         FilesTabSidebarComponent,
         ImportTabComponent,
         ImportTabSidebarComponent,
-        FilesystemImportComponent,
         RepositoryCardComponent,
         AddRepositoryDialogComponent,
     ],
     exports: [
-        CoreComponent
+        CoreComponent,
     ],
     imports: [
         CommonModule,

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html

@@ -1,21 +1,7 @@
 <div class="import-tab-inner">
     <mat-tab-group headerPosition="below">
         <mat-tab label="Import">
-            <div class="import-sidebar-tab-inner" fxLayout="column">
+            <app-file-import (importFinished)="importFinished.emit($event)" (fileImported)="fileImported.emit($event)"></app-file-import>
-                <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 (fileImported)="this.fileImported.emit($event)"
-                                           (importFinished)="importFinished.emit()"></app-filesystem-import>
-                </div>
-            </div>
         </mat-tab>
     </mat-tab-group>
 </div>

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss

@@ -10,26 +10,3 @@ mat-tab-group, mat-tab {
     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/components/shared/sidebar/file-import/file-import.component.html

@@ -0,0 +1,15 @@
+<div class="file-import-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 (fileImported)="this.fileImported.emit($event)"
+                               (importFinished)="importFinished.emit()"></app-filesystem-import>
+    </div>
+</div>

mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.scss

@@ -0,0 +1,22 @@
+.import-type-select-wrapper {
+    width: 100%;
+
+    .import-type-select {
+        width: calc(100% - 2em);
+        height: calc(100% - 2em);
+        margin: 1em;
+
+        mat-select {
+            height: 100%;
+        }
+    }
+}
+
+.file-import-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.import-configuration {
+    padding: 1em;
+}

mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.spec.ts

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

mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.ts

@@ -0,0 +1,16 @@
+import {Component, EventEmitter, OnInit, Output} from "@angular/core";
+import {File} from "../../../../models/File";
+
+@Component({
+    selector: "app-file-import",
+    templateUrl: "./file-import.component.html",
+    styleUrls: ["./file-import.component.scss"]
+})
+export class FileImportComponent {
+
+    @Output() fileImported = new EventEmitter<File>();
+    @Output() importFinished = new EventEmitter<void>();
+
+    constructor() {
+    }
+}

mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts

@@ -21,6 +21,10 @@ import {MatDialogModule} from "@angular/material/dialog";
 import {AppCommonModule} from "../app-common/app-common.module";
 import {DragDropModule} from "@angular/cdk/drag-drop";
 import {TagModule} from "../tag/tag.module";
+import { FileImportComponent } from "./file-import/file-import.component";
+import {FilesystemImportComponent} from "./file-import/filesystem-import/filesystem-import.component";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatProgressBarModule} from "@angular/material/progress-bar";
 
 
 @NgModule({
@@ -30,10 +34,13 @@ import {TagModule} from "../tag/tag.module";
         TagFilterListItemComponent,
         SortDialogComponent,
         FilterDialogComponent,
+        FileImportComponent,
+        FilesystemImportComponent,
     ],
     exports: [
         FileEditComponent,
-        FileSearchComponent
+        FileSearchComponent,
+        FileImportComponent
     ],
     imports: [
         CommonModule,
@@ -59,6 +66,8 @@ import {TagModule} from "../tag/tag.module";
         AppCommonModule,
         DragDropModule,
         TagModule,
+        MatCheckboxModule,
+        MatProgressBarModule,
     ]
 })
 export class SidebarModule {