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 @@ +
+ + + {{label}} + + + +
+ + +
+ +
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; + + 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(); + + 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} + */ + 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 @@ - + + + + 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 @@ + + + + + + + +
+ Import tags from + adjacent .txt tag files + + + Delete files from original location after import + +
+ + + + 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; + + 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 @@ +
+ + +
+
+ + Import Type + + Filesystem + + + +
+
+ +
+
+
+
+
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; + + 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 @@ + + + + + + + + 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; + + 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 { + } + +}