parent
448d55aa1e
commit
af8b84e975
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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() { }
|
||||
}
|
||||
@ -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>
|
||||
@ -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%;
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue