diff --git a/mediarepo-ui/.editorconfig b/mediarepo-ui/.editorconfig index 59d9a3a..783e38e 100644 --- a/mediarepo-ui/.editorconfig +++ b/mediarepo-ui/.editorconfig @@ -4,12 +4,12 @@ root = true [*] charset = utf-8 indent_style = space -indent_size = 2 +indent_size = 4 insert_final_newline = true trim_trailing_whitespace = true [*.ts] -quote_type = single +quote_type = double [*.md] max_line_length = off diff --git a/mediarepo-ui/.eslintrc.json b/mediarepo-ui/.eslintrc.json index 47c17dd..5c694cf 100644 --- a/mediarepo-ui/.eslintrc.json +++ b/mediarepo-ui/.eslintrc.json @@ -34,7 +34,9 @@ "prefix": "app", "style": "kebab-case" } - ] + ], + "quotes": ["warn", "double", {"avoidEscape": true}], + "indent": ["error", 4, {"SwitchCase": 1}] } }, { diff --git a/mediarepo-ui/src/app/app-routing.module.ts b/mediarepo-ui/src/app/app-routing.module.ts index f223ae1..84df263 100644 --- a/mediarepo-ui/src/app/app-routing.module.ts +++ b/mediarepo-ui/src/app/app-routing.module.ts @@ -1,13 +1,13 @@ -import {NgModule} from '@angular/core'; -import {RouterModule, Routes} from '@angular/router'; +import {NgModule} from "@angular/core"; +import {RouterModule, Routes} from "@angular/router"; import {CoreComponent} from "./components/core/core.component"; const routes: Routes = [ - {path: "", component: CoreComponent}]; + {path: "", component: CoreComponent}]; @NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] }) export class AppRoutingModule { } diff --git a/mediarepo-ui/src/app/app.component-theme.scss b/mediarepo-ui/src/app/app.component-theme.scss index d525a4e..1e79cbd 100644 --- a/mediarepo-ui/src/app/app.component-theme.scss +++ b/mediarepo-ui/src/app/app.component-theme.scss @@ -2,53 +2,53 @@ @use '~@angular/material' as mat; @mixin color($theme) { - $color-config: mat.get-color-config($theme); - $primary-palette: map.get($color-config, 'primary'); - $warn-palette: map.get($color-config, 'warn'); - - body { - background-color: darken(#303030, 5); - color: white - } - ::ng-deep ::-webkit-scrollbar { - width: 15px; - height: 15px; - background: #272727; - } - - ::ng-deep ::-webkit-scrollbar-thumb { - background: mat.get-color-from-palette($primary-palette, 'darker'); - border-radius: 1px; - } - - ::ng-deep ::-webkit-scrollbar-thumb:hover { - background: mat.get-color-from-palette($primary-palette); - } - - .warn { - background-color: mat.get-color-from-palette($warn-palette); - color: white - } + $color-config: mat.get-color-config($theme); + $primary-palette: map.get($color-config, 'primary'); + $warn-palette: map.get($color-config, 'warn'); + + body { + background-color: darken(#303030, 5); + color: white + } + ::ng-deep ::-webkit-scrollbar { + width: 15px; + height: 15px; + background: #272727; + } + + ::ng-deep ::-webkit-scrollbar-thumb { + background: mat.get-color-from-palette($primary-palette, 'darker'); + border-radius: 1px; + } + + ::ng-deep ::-webkit-scrollbar-thumb:hover { + background: mat.get-color-from-palette($primary-palette); + } + + .warn { + background-color: mat.get-color-from-palette($warn-palette); + color: white + } } @mixin typography($theme) { - // Get the typography config from the theme. - $typography-config: mat.get-typography-config($theme); + // Get the typography config from the theme. + $typography-config: mat.get-typography-config($theme); - body { - font-family: mat.font-family($typography-config); - } + body { + font-family: mat.font-family($typography-config); + } } @mixin theme($theme) { - $color-config: mat.get-color-config($theme); - @if $color-config != null { - @include color($theme); - } - - $typography-config: mat.get-typography-config($theme); - @if $typography-config != null { - @include typography($theme); - } + $color-config: mat.get-color-config($theme); + @if $color-config != null { + @include color($theme); + } + + $typography-config: mat.get-typography-config($theme); + @if $typography-config != null { + @include typography($theme); + } } diff --git a/mediarepo-ui/src/app/app.component.scss b/mediarepo-ui/src/app/app.component.scss index 92c9c07..8b79f48 100644 --- a/mediarepo-ui/src/app/app.component.scss +++ b/mediarepo-ui/src/app/app.component.scss @@ -1,7 +1,7 @@ ::ng-deep .mat-button-wrapper > ng-icon { - font-size: 26px; + font-size: 26px; } ::ng-deep ng-icon { - font-size: 24px; + font-size: 24px; } diff --git a/mediarepo-ui/src/app/app.component.spec.ts b/mediarepo-ui/src/app/app.component.spec.ts index c9bd039..17910bf 100644 --- a/mediarepo-ui/src/app/app.component.spec.ts +++ b/mediarepo-ui/src/app/app.component.spec.ts @@ -1,36 +1,36 @@ -import {TestBed} from '@angular/core/testing'; -import {RouterTestingModule} from '@angular/router/testing'; -import {AppComponent} from './app.component'; +import {TestBed} from "@angular/core/testing"; +import {RouterTestingModule} from "@angular/router/testing"; +import {AppComponent} from "./app.component"; -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], - }).compileComponents(); - }); +describe("AppComponent", () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ + RouterTestingModule + ], + declarations: [ + AppComponent + ], + }).compileComponents(); + }); - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); + it("should create the app", () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); - it(`should have as title 'mediarepo-ui'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('mediarepo-ui'); - }); + it("should have as title 'mediarepo-ui'", () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual("mediarepo-ui"); + }); - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent) - .toContain('mediarepo-ui app is running!'); - }); + it("should render title", () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector(".content span")?.textContent) + .toContain("mediarepo-ui app is running!"); + }); }); diff --git a/mediarepo-ui/src/app/app.component.ts b/mediarepo-ui/src/app/app.component.ts index dee33bc..ab1fbed 100644 --- a/mediarepo-ui/src/app/app.component.ts +++ b/mediarepo-ui/src/app/app.component.ts @@ -1,43 +1,43 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit} from "@angular/core"; import {Router} from "@angular/router"; import {RepositoryService} from "./services/repository/repository.service"; import {MatSnackBar} from "@angular/material/snack-bar"; import {ErrorBrokerService} from "./services/error-broker/error-broker.service"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.scss"] }) export class AppComponent implements OnInit { - title = 'mediarepo-ui'; + title = "mediarepo-ui"; - constructor( - private router: Router, - private snackBar: MatSnackBar, - private errorBroker: ErrorBrokerService, - private repoService: RepositoryService, - ) { - } + constructor( + private router: Router, + private snackBar: MatSnackBar, + private errorBroker: ErrorBrokerService, + private repoService: RepositoryService, + ) { + } - async ngOnInit() { - this.errorBroker.errorCb = (err: { message: string }) => this.showError( - err); - this.errorBroker.infoCb = (info: string) => this.showInfo(info); - await this.repoService.loadRepositories(); - } + async ngOnInit() { + this.errorBroker.errorCb = (err: { message: string }) => this.showError( + err); + this.errorBroker.infoCb = (info: string) => this.showInfo(info); + await this.repoService.loadRepositories(); + } - private showError(err: { message: string }) { - this.snackBar.open(err.message, undefined, { - panelClass: "warn", - duration: 2000, - }); - } + private showError(err: { message: string }) { + this.snackBar.open(err.message, undefined, { + panelClass: "warn", + duration: 2000, + }); + } - private showInfo(info: string) { - this.snackBar.open(info, undefined, { - panelClass: "primary", - duration: 2000, - }); - } + private showInfo(info: string) { + this.snackBar.open(info, undefined, { + panelClass: "primary", + duration: 2000, + }); + } } diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts index b12edea..f5897a1 100644 --- a/mediarepo-ui/src/app/app.module.ts +++ b/mediarepo-ui/src/app/app.module.ts @@ -1,20 +1,20 @@ -import {NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {AppComponent} from './app.component'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {NgModule} from "@angular/core"; +import {BrowserModule} from "@angular/platform-browser"; +import {AppComponent} from "./app.component"; +import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; import {CoreModule} from "./components/core/core.module"; @NgModule({ - declarations: [ - AppComponent, - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - CoreModule, - ], - providers: [], - bootstrap: [AppComponent] + declarations: [ + AppComponent, + ], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CoreModule, + ], + providers: [], + bootstrap: [AppComponent] }) export class AppModule { } diff --git a/mediarepo-ui/src/app/components/core/core.component.html b/mediarepo-ui/src/app/components/core/core.component.html index c8dc551..2312064 100644 --- a/mediarepo-ui/src/app/components/core/core.component.html +++ b/mediarepo-ui/src/app/components/core/core.component.html @@ -1,13 +1,13 @@
- - - - - - - - - - - + + + + + + + + + + +
diff --git a/mediarepo-ui/src/app/components/core/core.component.scss b/mediarepo-ui/src/app/components/core/core.component.scss index d107163..8512ac5 100644 --- a/mediarepo-ui/src/app/components/core/core.component.scss +++ b/mediarepo-ui/src/app/components/core/core.component.scss @@ -1,19 +1,19 @@ #content { - height: 100vh; - width: 100vw; - position: absolute; - left: 0; - top: 0; - margin: 0; - overflow: hidden + height: 100vh; + width: 100vw; + position: absolute; + left: 0; + top: 0; + margin: 0; + overflow: hidden } mat-tab-group { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } ::ng-deep .mat-tab-body-wrapper { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } diff --git a/mediarepo-ui/src/app/components/core/core.component.spec.ts b/mediarepo-ui/src/app/components/core/core.component.spec.ts index 14c2ab0..b6348c5 100644 --- a/mediarepo-ui/src/app/components/core/core.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/core.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {CoreComponent} from './core.component'; +import {CoreComponent} from "./core.component"; -describe('HomeComponent', () => { - let component: CoreComponent; - let fixture: ComponentFixture; +describe("HomeComponent", () => { + let component: CoreComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [CoreComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CoreComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(CoreComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(CoreComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/core.component.ts b/mediarepo-ui/src/app/components/core/core.component.ts index 949fdea..cd5d284 100644 --- a/mediarepo-ui/src/app/components/core/core.component.ts +++ b/mediarepo-ui/src/app/components/core/core.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from "@angular/core"; import {Repository} from "../../models/Repository"; import {RepositoryService} from "../../services/repository/repository.service"; import {MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs"; @@ -6,48 +6,48 @@ import {TagService} from "../../services/tag/tag.service"; import {TabService} from "../../services/tab/tab.service"; @Component({ - selector: 'app-core', - templateUrl: './core.component.html', - styleUrls: ['./core.component.scss'] + selector: "app-core", + templateUrl: "./core.component.html", + styleUrls: ["./core.component.scss"] }) export class CoreComponent implements OnInit { - public selectedRepository: Repository | undefined; + public selectedRepository: Repository | undefined; - @ViewChild("tabGroup") tabGroup!: MatTabGroup; + @ViewChild("tabGroup") tabGroup!: MatTabGroup; - constructor( - private tabService: TabService, - private repoService: RepositoryService, - private tagService: TagService) { - } - - public async ngOnInit(): Promise { - this.selectedRepository = this.repoService.selectedRepository.getValue(); - this.repoService.selectedRepository.subscribe(async (selected) => { - this.selectedRepository = selected; - this.updateSelectedTab(); - await this.loadRepoData(); - }); - } + constructor( + private tabService: TabService, + private repoService: RepositoryService, + private tagService: TagService) { + } - public updateSelectedTab() { - if (!this.tabGroup) { - return; + public async ngOnInit(): Promise { + this.selectedRepository = this.repoService.selectedRepository.getValue(); + this.repoService.selectedRepository.subscribe(async (selected) => { + this.selectedRepository = selected; + this.updateSelectedTab(); + await this.loadRepoData(); + }); } - if (!this.selectedRepository) { - this.tabGroup.selectedIndex = 0; - } else if (this.tabGroup.selectedIndex === 0) { - this.tabGroup.selectedIndex = 1; + + public updateSelectedTab() { + if (!this.tabGroup) { + return; + } + if (!this.selectedRepository) { + this.tabGroup.selectedIndex = 0; + } else if (this.tabGroup.selectedIndex === 0) { + this.tabGroup.selectedIndex = 1; + } } - } - async loadRepoData() { - await this.tagService.loadTags(); - } + async loadRepoData() { + await this.tagService.loadTags(); + } - public onTabSelectionChange(event: MatTabChangeEvent): void { - this.tabService.setSelectedTab(event.index); - } + public onTabSelectionChange(event: MatTabChangeEvent): void { + this.tabService.setSelectedTab(event.index); + } } diff --git a/mediarepo-ui/src/app/components/core/core.module.ts b/mediarepo-ui/src/app/components/core/core.module.ts index daecd0a..0ddbfb3 100644 --- a/mediarepo-ui/src/app/components/core/core.module.ts +++ b/mediarepo-ui/src/app/components/core/core.module.ts @@ -1,5 +1,5 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; +import {NgModule} from "@angular/core"; +import {CommonModule} from "@angular/common"; import {CoreComponent} from "./core.component"; import {RepositoriesTabComponent} from "./repositories-tab/repositories-tab.component"; import {FilesTabComponent} from "./files-tab/files-tab.component"; @@ -24,35 +24,35 @@ import {MatMenuModule} from "@angular/material/menu"; @NgModule({ - declarations: [ - RepositoriesTabComponent, - CoreComponent, - FilesTabComponent, - FilesTabSidebarComponent, - ImportTabComponent, - ImportTabSidebarComponent, - FilesystemImportComponent, - ], - exports: [ - CoreComponent - ], - imports: [ - CommonModule, - SharedModule, - MatTabsModule, - MatSidenavModule, - MatOptionModule, - MatSelectModule, - MatDividerModule, - MatProgressBarModule, - MatCheckboxModule, - ScrollingModule, - NgIconsModule.withIcons({...materialIcons}), - FlexModule, - MatButtonModule, - MatMenuModule, - MatRippleModule, - ] + declarations: [ + RepositoriesTabComponent, + CoreComponent, + FilesTabComponent, + FilesTabSidebarComponent, + ImportTabComponent, + ImportTabSidebarComponent, + FilesystemImportComponent, + ], + exports: [ + CoreComponent + ], + imports: [ + CommonModule, + SharedModule, + MatTabsModule, + MatSidenavModule, + MatOptionModule, + MatSelectModule, + MatDividerModule, + MatProgressBarModule, + MatCheckboxModule, + ScrollingModule, + NgIconsModule.withIcons({...materialIcons}), + FlexModule, + MatButtonModule, + MatMenuModule, + MatRippleModule, + ] }) export class CoreModule { } diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html index 437a6f2..2d02289 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html @@ -1,41 +1,43 @@
- - -
-
- -
- -
-

Tags

- -
-
- -
- + + +
+
+ +
+ +
+

Tags

+ +
+
+ +
+ +
+ +
- -
-
- - - - - + + + + +
- - - + + + diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss index 0c08786..7100444 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss @@ -1,70 +1,70 @@ app-file-search { - display: block; - width: 100%; + display: block; + width: 100%; } #file-search-input { - width: 100%; - overflow: hidden; + width: 100%; + overflow: hidden; } mat-tab-group, mat-tab, .file-tag-list, app-file-edit { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } mat-selection-list { - height: 100%; - user-select: none; + height: 100%; + user-select: none; } .sidebar-inner, .search-tab-inner { - height: 100%; - width: 100%; - display: block; + height: 100%; + width: 100%; + display: block; } .selectable-tag { - height: 50px; - display: flex; - font-size: 1.2em; - cursor: pointer; - transition-duration: 0.1s; - user-select: none; + height: 50px; + display: flex; + font-size: 1.2em; + cursor: pointer; + transition-duration: 0.1s; + user-select: none; - app-tag-item { - margin: auto auto auto 0.25em; - } + app-tag-item { + margin: auto auto auto 0.25em; + } } .selectable-tag:hover { - background-color: darken(dimgrey, 10); + background-color: darken(dimgrey, 10); } .selectable-tag:active { - cursor: pointer; + cursor: pointer; } cdk-virtual-scroll-viewport { - height: 100%; - width: 100%; - overflow-y: auto; - - ::ng-deep .cdk-virtual-scroll-content-wrapper { + height: 100%; width: 100%; - } + overflow-y: auto; + + ::ng-deep .cdk-virtual-scroll-content-wrapper { + width: 100%; + } } mat-divider { - width: 100%; + width: 100%; } .tag-list-header { - width: 100%; - display: flex; - flex-direction: column; + width: 100%; + display: flex; + flex-direction: column; - h2 { - margin: auto; - } + h2 { + margin: auto; + } } diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.spec.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.spec.ts index 8a52bf5..e1deef9 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FilesTabSidebarComponent} from './files-tab-sidebar.component'; +import {FilesTabSidebarComponent} from "./files-tab-sidebar.component"; -describe('FilesTabSidebarComponent', () => { - let component: FilesTabSidebarComponent; - let fixture: ComponentFixture; +describe("FilesTabSidebarComponent", () => { + let component: FilesTabSidebarComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FilesTabSidebarComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FilesTabSidebarComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FilesTabSidebarComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FilesTabSidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts index 2325c48..27d9a5b 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts @@ -1,13 +1,13 @@ import { - Component, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges, - ViewChild -} from '@angular/core'; + Component, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, + ViewChild +} from "@angular/core"; import {Tag} from "../../../../models/Tag"; import {TagService} from "../../../../services/tag/tag.service"; import {FileService} from "../../../../services/file/file.service"; @@ -18,91 +18,92 @@ import {FileEditComponent} from "../../../shared/file-edit/file-edit.component"; import {clipboard} from "@tauri-apps/api"; @Component({ - selector: 'app-files-tab-sidebar', - templateUrl: './files-tab-sidebar.component.html', - styleUrls: ['./files-tab-sidebar.component.scss'] + selector: "app-files-tab-sidebar", + templateUrl: "./files-tab-sidebar.component.html", + styleUrls: ["./files-tab-sidebar.component.scss"] }) export class FilesTabSidebarComponent implements OnInit, OnChanges { - @Input() selectedFiles: File[] = []; - @Output() searchStartEvent = new EventEmitter(); - @Output() searchEndEvent = new EventEmitter(); + @Input() selectedFiles: File[] = []; + @Output() searchStartEvent = new EventEmitter(); + @Output() searchEndEvent = new EventEmitter(); - @ViewChild('filesearch') fileSearch!: FileSearchComponent; - @ViewChild("fileedit") fileEdit: FileEditComponent | undefined; + @ViewChild("filesearch") fileSearch!: FileSearchComponent; + @ViewChild("fileedit") fileEdit: FileEditComponent | undefined; - public tagsOfFiles: Tag[] = []; - public tags: Tag[] = []; - public allTags: Tag[] = []; - public files: File[] = []; - public tagsOfSelection: Tag[] = []; - public contextMenuTag: Tag | undefined; + public tagsOfFiles: Tag[] = []; + public tags: Tag[] = []; + public allTags: Tag[] = []; + public files: File[] = []; + public tagsOfSelection: Tag[] = []; + public contextMenuTag: Tag | undefined; - constructor(private repoService: RepositoryService, private tagService: TagService, private fileService: FileService) { - this.fileService.displayedFiles.subscribe(async files => { - this.files = files; - await this.loadTagsForDisplayedFiles(); - await this.refreshFileSelection(); - }); - this.repoService.selectedRepository.subscribe( - async (repo) => repo && this.fileSearch && await this.fileSearch.searchForFiles()); - this.tagService.tags.subscribe(t => this.allTags = t); - } + constructor(private repoService: RepositoryService, private tagService: TagService, private fileService: FileService) { + this.fileService.displayedFiles.subscribe(async files => { + this.files = files; + await this.loadTagsForDisplayedFiles(); + await this.refreshFileSelection(); + }); + this.repoService.selectedRepository.subscribe( + async (repo) => repo && this.fileSearch && await this.fileSearch.searchForFiles()); + this.tagService.tags.subscribe(t => this.allTags = t); + } - async ngOnInit() { - this.fileSearch && await this.fileSearch.searchForFiles(); - if (this.tags.length === 0) { - this.tags = this.tagsOfFiles; + async ngOnInit() { + this.fileSearch && await this.fileSearch.searchForFiles(); + if (this.tags.length === 0) { + this.tags = this.tagsOfFiles; + } } - } - public async ngOnChanges(changes: SimpleChanges): Promise { - if (changes["selectedFiles"]) { - await this.showFileDetails(this.selectedFiles); - this.showAllTagsFallback(); + public async ngOnChanges(changes: SimpleChanges): Promise { + if (changes["selectedFiles"]) { + await this.showFileDetails(this.selectedFiles); + this.showAllTagsFallback(); + } } - } - async loadTagsForDisplayedFiles() { - this.tagsOfFiles = await this.tagService.getTagsForFiles( - this.files.map(f => f.hash)); - this.showAllTagsFallback(); - } + async loadTagsForDisplayedFiles() { + this.tagsOfFiles = await this.tagService.getTagsForFiles( + this.files.map(f => f.hash)); + this.showAllTagsFallback(); + } - async addSearchTag(tag: Tag) { - this.fileSearch.addSearchTag(tag.getNormalizedOutput()); - await this.fileSearch.searchForFiles(); - } + async addSearchTag(tag: Tag) { + this.fileSearch.addSearchTag(tag.getNormalizedOutput()); + await this.fileSearch.searchForFiles(); + } - async showFileDetails(files: File[]) { - this.tagsOfSelection = await this.tagService.getTagsForFiles( - files.map(f => f.hash)) - this.tagsOfSelection = this.tagsOfSelection.sort( - (a, b) => a.getNormalizedOutput().localeCompare(b.getNormalizedOutput())); - this.tags = this.tagsOfSelection; - } + async showFileDetails(files: File[]) { + this.tagsOfSelection = await this.tagService.getTagsForFiles( + files.map(f => f.hash)) + this.tagsOfSelection = this.tagsOfSelection.sort( + (a, b) => a.getNormalizedOutput() + .localeCompare(b.getNormalizedOutput())); + this.tags = this.tagsOfSelection; + } - public async copyToClipboard(text: string) { - await clipboard.writeText(text); - } + public async copyToClipboard(text: string) { + await clipboard.writeText(text); + } - private async refreshFileSelection() { - const filteredSelection = this.selectedFiles.filter( - file => this.files.findIndex(f => f.id === file.id) >= 0); - if (filteredSelection.length === 0) { - this.tags = []; - this.showAllTagsFallback(); - } else if (filteredSelection.length < this.selectedFiles.length) { - this.selectedFiles = filteredSelection; - await this.showFileDetails(this.selectedFiles); + private async refreshFileSelection() { + const filteredSelection = this.selectedFiles.filter( + file => this.files.findIndex(f => f.id === file.id) >= 0); + if (filteredSelection.length === 0) { + this.tags = []; + this.showAllTagsFallback(); + } else if (filteredSelection.length < this.selectedFiles.length) { + this.selectedFiles = filteredSelection; + await this.showFileDetails(this.selectedFiles); + } } - } - private showAllTagsFallback() { - if (this.tags.length === 0) { - this.tags = this.tagsOfFiles.sort( - (a, b) => a.getNormalizedOutput() - .localeCompare(b.getNormalizedOutput())); + private showAllTagsFallback() { + if (this.tags.length === 0) { + this.tags = this.tagsOfFiles.sort( + (a, b) => a.getNormalizedOutput() + .localeCompare(b.getNormalizedOutput())); + } } - } } diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html index 3677cee..a2995ec 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html @@ -1,12 +1,12 @@ - - - - - - - - + + + + + + + + diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss index d6fa12e..d422cb8 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss @@ -1,45 +1,45 @@ mat-selection-list { - height: 100%; + height: 100%; } mat-drawer { - height: 100%; - width: 25%; - overflow: hidden; + height: 100%; + width: 25%; + overflow: hidden; } mat-drawer-content { - overflow-x: hidden; - overflow-y: auto; - height: 100%; + overflow-x: hidden; + overflow-y: auto; + height: 100%; } mat-drawer-container { - height: 100%; - width: 100%; - overflow: hidden; + height: 100%; + width: 100%; + overflow: hidden; } app-file-multiview { - padding: 0; - height: 100%; - width: 100%; + padding: 0; + height: 100%; + width: 100%; } .spinner-overlay { - position: absolute; - top: 0; - right: 0; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 998; - overflow: hidden; - display: flex; - backdrop-filter: blur(5px); + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 998; + overflow: hidden; + display: flex; + backdrop-filter: blur(5px); - mat-progress-spinner { - z-index: 999; - margin: auto; - } + mat-progress-spinner { + z-index: 999; + margin: auto; + } } diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.spec.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.spec.ts index b3aaa10..caeee36 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.spec.ts @@ -1,25 +1,24 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FilesTabComponent} from './files-tab.component'; +import {FilesTabComponent} from "./files-tab.component"; -describe('SearchPageComponent', () => { - let component: FilesTabComponent; - let fixture: ComponentFixture; +describe("SearchPageComponent", () => { + let component: FilesTabComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FilesTabComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FilesTabComponent] + }).compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FilesTabComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FilesTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts index 141c908..08b6283 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts @@ -1,34 +1,34 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit} from "@angular/core"; import {File} from "../../../models/File"; import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; import {FileService} from "../../../services/file/file.service"; import {RepositoryService} from "../../../services/repository/repository.service"; @Component({ - selector: 'app-files-tab', - templateUrl: './files-tab.component.html', - styleUrls: ['./files-tab.component.scss'] + selector: "app-files-tab", + templateUrl: "./files-tab.component.html", + styleUrls: ["./files-tab.component.scss"] }) export class FilesTabComponent implements OnInit { - files: File[] = []; - contentLoading = false; - selectedFiles: File[] = []; + files: File[] = []; + contentLoading = false; + selectedFiles: File[] = []; - constructor( - private errorBroker: ErrorBrokerService, - private repoService: RepositoryService, - private fileService: FileService,) { - } + constructor( + private errorBroker: ErrorBrokerService, + private repoService: RepositoryService, + private fileService: FileService,) { + } - async ngOnInit() { - this.fileService.displayedFiles.subscribe(async (files) => { - this.files = files; - }); - } + async ngOnInit() { + this.fileService.displayedFiles.subscribe(async (files) => { + this.files = files; + }); + } - async onFileSelect(files: File[]) { - this.selectedFiles = files; - } + async onFileSelect(files: File[]) { + this.selectedFiles = files; + } } diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html index fe67858..af03e28 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.html @@ -1,35 +1,35 @@ - Selection Type - - Folders - Files - + Selection Type + + Folders + Files +
- Import tags from - adjacent .txt tag files - - - Delete files from original location after import - + Import tags from + adjacent .txt tag files + + + Delete files from original location after import +
diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss index 5bba0b1..e0f464d 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.scss @@ -1,25 +1,25 @@ app-native-file-select { - width: 100%; + width: 100%; } button { - width: 100%; + width: 100%; } mat-divider { - width: 100%; - height: 1px; - margin: 1em 0; + width: 100%; + height: 1px; + margin: 1em 0; } .filled-button { - background-color: #5c5c5c; + background-color: #5c5c5c; } .binary-import-options { - margin-top: 1em; + margin-top: 1em; - mat-checkbox { - margin: 0.5em 0; - } + mat-checkbox { + margin: 0.5em 0; + } } diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts index fa0d963..966c76a 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FilesystemImportComponent} from './filesystem-import.component'; +import {FilesystemImportComponent} from "./filesystem-import.component"; -describe('FilesystemImportComponent', () => { - let component: FilesystemImportComponent; - let fixture: ComponentFixture; +describe("FilesystemImportComponent", () => { + let component: FilesystemImportComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FilesystemImportComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FilesystemImportComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FilesystemImportComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FilesystemImportComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts index a55852d..7d26b01 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts @@ -1,4 +1,4 @@ -import {Component, EventEmitter, Output} from '@angular/core'; +import {Component, EventEmitter, Output} from "@angular/core"; import {FileOsMetadata} from "../../../../../models/FileOsMetadata"; import {ImportService} from "../../../../../services/import/import.service"; import {ErrorBrokerService} from "../../../../../services/error-broker/error-broker.service"; @@ -7,67 +7,70 @@ import {File} from "../../../../../models/File"; import {DialogFilter} from "@tauri-apps/api/dialog"; @Component({ - selector: 'app-filesystem-import', - templateUrl: './filesystem-import.component.html', - styleUrls: ['./filesystem-import.component.scss'] + selector: "app-filesystem-import", + templateUrl: "./filesystem-import.component.html", + styleUrls: ["./filesystem-import.component.scss"] }) export class FilesystemImportComponent { - @Output() fileImported = new EventEmitter(); - @Output() importFinished = new EventEmitter(); + @Output() fileImported = new EventEmitter(); + @Output() importFinished = new EventEmitter(); - public fileCount: number = 0; - public files: FileOsMetadata[] = []; - public importOptions = new AddFileOptions(); - public filters: DialogFilter[] = [ - {name: "Images", extensions: ["png", "jpg", "jpeg", "webp", "bmp", "gif"]}, - {name: "Videos", extensions: ["mp4", "mkv", "wmv", "avi", "webm"]}, - {name: "Audio", extensions: ["mp3", "ogg", "wav", "flac", "aac"]}, - {name: "Documents", extensions: ["pdf", "doc", "docx", "odf"]}, - {name: "Text", extensions: ["txt", "md"]}, - {name: "All", extensions: ["*"]} - ] + public fileCount: number = 0; + public files: FileOsMetadata[] = []; + public importOptions = new AddFileOptions(); + public filters: DialogFilter[] = [ + { + name: "Images", + extensions: ["png", "jpg", "jpeg", "webp", "bmp", "gif"] + }, + {name: "Videos", extensions: ["mp4", "mkv", "wmv", "avi", "webm"]}, + {name: "Audio", extensions: ["mp3", "ogg", "wav", "flac", "aac"]}, + {name: "Documents", extensions: ["pdf", "doc", "docx", "odf"]}, + {name: "Text", extensions: ["txt", "md"]}, + {name: "All", extensions: ["*"]} + ] - public resolving = false; - public importing = false; - public importingProgress = 0; + public resolving = false; + public importing = false; + public importingProgress = 0; - constructor(private errorBroker: ErrorBrokerService, private importService: ImportService) { - } + constructor(private errorBroker: ErrorBrokerService, private importService: ImportService) { + } - public async setSelectedPaths(paths: string[]) { - this.resolving = true; - try { - this.files = await this.importService.resolvePathsToFiles(paths); - this.fileCount = this.files.length; - } catch (err) { - console.log(err); - this.errorBroker.showError(err); + public async setSelectedPaths(paths: string[]) { + this.resolving = true; + try { + this.files = await this.importService.resolvePathsToFiles(paths); + this.fileCount = this.files.length; + } catch (err) { + console.log(err); + this.errorBroker.showError(err); + } + this.resolving = false; } - this.resolving = false; - } - public async import() { - this.importing = true; + public async import() { + this.importing = true; - this.importingProgress = 0; - let count = 0; + this.importingProgress = 0; + let count = 0; - for (const file of this.files) { - try { - const resultFile = await this.importService.addLocalFile(file, - this.importOptions); - this.fileImported.emit(resultFile); - } catch (err) { - console.log(err); - this.errorBroker.showError(err); - } - count++; - this.importingProgress = (count / this.fileCount) * 100; - } + for (const file of this.files) { + try { + const resultFile = await this.importService.addLocalFile(file, + this.importOptions); + this.fileImported.emit(resultFile); + } catch (err) { + console.log(err); + this.errorBroker.showError(err); + } + count++; + this.importingProgress = (count / this.fileCount) * 100; + } - this.importing = false; - this.importFinished.emit(); - } + this.importing = false; + this.importFinished.emit(); + } } diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html index 2f7431b..980e407 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html @@ -1,21 +1,21 @@
- - -
-
- - Import Type - - Filesystem - - - -
-
- -
-
- - + + +
+
+ + Import Type + + Filesystem + + + +
+
+ +
+
+ +
diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss index c0f7b7d..048876d 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss @@ -1,35 +1,35 @@ mat-tab-group, mat-tab { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .import-tab-inner { - display: block; - width: 100%; - height: 100%; - overflow: hidden; + display: block; + width: 100%; + height: 100%; + overflow: hidden; } .import-type-select-wrapper { - width: 100%; + width: 100%; - .import-type-select { - width: calc(100% - 2em); - height: calc(100% - 2em); - margin: 1em; + .import-type-select { + width: calc(100% - 2em); + height: calc(100% - 2em); + margin: 1em; - mat-select { - height: 100%; + mat-select { + height: 100%; + } } - } } .import-sidebar-tab-inner { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .import-configuration { - padding: 1em; + padding: 1em; } diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts index 1068486..07ae6e9 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {ImportTabSidebarComponent} from './import-tab-sidebar.component'; +import {ImportTabSidebarComponent} from "./import-tab-sidebar.component"; -describe('ImportTabSidebarComponent', () => { - let component: ImportTabSidebarComponent; - let fixture: ComponentFixture; +describe("ImportTabSidebarComponent", () => { + let component: ImportTabSidebarComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ImportTabSidebarComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ImportTabSidebarComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ImportTabSidebarComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ImportTabSidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts index f3ac287..6391e1f 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts @@ -1,16 +1,16 @@ -import {Component, EventEmitter, Output} from '@angular/core'; +import {Component, EventEmitter, Output} from "@angular/core"; import {File} from "../../../../models/File"; @Component({ - selector: 'app-import-tab-sidebar', - templateUrl: './import-tab-sidebar.component.html', - styleUrls: ['./import-tab-sidebar.component.scss'] + selector: "app-import-tab-sidebar", + templateUrl: "./import-tab-sidebar.component.html", + styleUrls: ["./import-tab-sidebar.component.scss"] }) export class ImportTabSidebarComponent { - @Output() fileImported = new EventEmitter(); - @Output() importFinished = new EventEmitter(); + @Output() fileImported = new EventEmitter(); + @Output() importFinished = new EventEmitter(); - constructor() { - } + constructor() { + } } diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html index 6f2e579..6fcb2a2 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html @@ -1,9 +1,9 @@ - - - - - - + + + + + + diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.scss b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.scss index 025d3c9..009d9c8 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.scss +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.scss @@ -1,27 +1,27 @@ mat-drawer-container { - height: 100%; - width: 100%; - margin: 0; - overflow: hidden; + height: 100%; + width: 100%; + margin: 0; + overflow: hidden; } mat-drawer-content { - overflow-x: hidden; - overflow-y: auto; - height: 100%; + overflow-x: hidden; + overflow-y: auto; + height: 100%; } mat-drawer { - height: 100%; - width: 25%; + height: 100%; + width: 25%; } app-import-tab-sidebar, app-file-multiview { - height: 100%; - width: 100%; - margin: 0; + height: 100%; + width: 100%; + margin: 0; } app-file-multiview { - display: block; + display: block; } diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.spec.ts b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.spec.ts index 70263b2..da4c2a6 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {ImportTabComponent} from './import-tab.component'; +import {ImportTabComponent} from "./import-tab.component"; -describe('ImportTabComponent', () => { - let component: ImportTabComponent; - let fixture: ComponentFixture; +describe("ImportTabComponent", () => { + let component: ImportTabComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ImportTabComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ImportTabComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ImportTabComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ImportTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts index df95e62..5c71fee 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts @@ -1,35 +1,35 @@ -import {Component} from '@angular/core'; +import {Component} from "@angular/core"; import {File} from "../../../models/File"; @Component({ - selector: 'app-import-tab', - templateUrl: './import-tab.component.html', - styleUrls: ['./import-tab.component.scss'] + selector: "app-import-tab", + templateUrl: "./import-tab.component.html", + styleUrls: ["./import-tab.component.scss"] }) export class ImportTabComponent { - public files: File[] = []; + public files: File[] = []; - constructor() { - } + constructor() { + } - /** - * Adds an imported file to the list of imported files - * @param {File} file - * @returns {Promise} - */ - public async addFileFromImport(file: File) { - this.files.push(file); - if (this.files.length % 50 === 0) { // refresh every 50 pictures - this.refreshFileView(); + /** + * Adds an imported file to the list of imported files + * @param {File} file + * @returns {Promise} + */ + public async addFileFromImport(file: File) { + this.files.push(file); + if (this.files.length % 50 === 0) { // refresh every 50 pictures + this.refreshFileView(); + } } - } - /** - * Refreshes the file view - * @returns {Promise} - */ - public refreshFileView() { - this.files = [...this.files]; - } + /** + * Refreshes the file view + * @returns {Promise} + */ + public refreshFileView() { + this.files = [...this.files]; + } } diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.html b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.html index 1841db6..078faa6 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.html +++ b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.html @@ -1,54 +1,56 @@

Add a Repository

-
+ - - Name - - + + Name + + - - Type - - Local - Remote - - + + Type + + Local + Remote + + - - - Path - - + + + Path + + - - Address - - -
-
- Status: {{this.onlineStatus}} -
+ + Address + + + +
+ Status: {{this.onlineStatus}} +
- - - - + + + +
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.scss b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.scss index a2bfaa1..66b7760 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.scss +++ b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.scss @@ -1,26 +1,26 @@ form { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .dialog-buttons { - display: block; - width: 100%; + display: block; + width: 100%; - button { - margin-left: 1em; - float: right - } + button { + margin-left: 1em; + float: right + } - .check-connection-button { - justify-self: right; - margin: 0; - float: left; - } + .check-connection-button { + justify-self: right; + margin: 0; + float: left; + } } .button-folder-select { - position: absolute; - top: -10px; - right: 0; + position: absolute; + top: -10px; + right: 0; } diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.spec.ts b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.spec.ts index d77721e..b8e0de6 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {AddRepositoryDialogComponent} from './add-repository-dialog.component'; +import {AddRepositoryDialogComponent} from "./add-repository-dialog.component"; -describe('AddRepositoryDialogComponent', () => { - let component: AddRepositoryDialogComponent; - let fixture: ComponentFixture; +describe("AddRepositoryDialogComponent", () => { + let component: AddRepositoryDialogComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [AddRepositoryDialogComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AddRepositoryDialogComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(AddRepositoryDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(AddRepositoryDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts index f0d54be..5409473 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts +++ b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts @@ -1,10 +1,10 @@ -import {Component, Inject, OnInit} from '@angular/core'; +import {Component, Inject, OnInit} from "@angular/core"; import { - AbstractControl, - FormControl, - FormGroup, - ValidationErrors, - Validators + AbstractControl, + FormControl, + FormGroup, + ValidationErrors, + Validators } from "@angular/forms"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {RepositoryService} from "../../../../services/repository/repository.service"; @@ -13,129 +13,129 @@ import {dialog} from "@tauri-apps/api"; import {Repository} from "../../../../models/Repository"; @Component({ - selector: 'app-add-repository-dialog', - templateUrl: './add-repository-dialog.component.html', - styleUrls: ['./add-repository-dialog.component.scss'] + selector: "app-add-repository-dialog", + templateUrl: "./add-repository-dialog.component.html", + styleUrls: ["./add-repository-dialog.component.scss"] }) export class AddRepositoryDialogComponent implements OnInit { - formGroup = new FormGroup({ - name: new FormControl("My Repository", [Validators.required]), - repositoryType: new FormControl("local", [Validators.required]), - path: new FormControl("", [this.validatePath]), - address: new FormControl("", [this.validateAddress]) - }); - - repositories: Repository[] = []; - onlineStatus = "Unknown"; - localRepoExists = false; - - constructor( - public repoService: RepositoryService, - public errorBroker: ErrorBrokerService, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) data: any) { - } - - ngOnInit(): void { - this.repoService.repositories.subscribe( - repositories => this.repositories = repositories) - } - - public async checkRepositoryStatus() { - this.onlineStatus = "Checking..."; - const address = this.formGroup.value.address; - const running = await this.repoService.checkDaemonRunning(address); - console.log(running); - this.onlineStatus = running ? "Online" : "Offline"; - } - - public async checkLocalRepoExists() { - this.localRepoExists = await this.repoService.checkLocalRepositoryExists( - this.formGroup.value.path); - } - - public async initLocalRepository() { - const path = this.formGroup.value.path; - await this.repoService.initRepository(path); - await this.checkLocalRepoExists(); - } - - public async addRepository() { - let {name, repositoryType, path, address} = this.formGroup.value; - path = repositoryType === "local" ? path : undefined; - address = repositoryType === "remote" ? address : undefined; - try { - await this.repoService.addRepository(name, path, address, - repositoryType === "local"); - this.dialogRef.close(); - } catch (err) { - this.errorBroker.showError(err); + formGroup = new FormGroup({ + name: new FormControl("My Repository", [Validators.required]), + repositoryType: new FormControl("local", [Validators.required]), + path: new FormControl("", [this.validatePath]), + address: new FormControl("", [this.validateAddress]) + }); + + repositories: Repository[] = []; + onlineStatus = "Unknown"; + localRepoExists = false; + + constructor( + public repoService: RepositoryService, + public errorBroker: ErrorBrokerService, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) data: any) { } - } - public closeDialog() { - this.dialogRef.close(); - } + ngOnInit(): void { + this.repoService.repositories.subscribe( + repositories => this.repositories = repositories) + } - public async openFolderDialog() { - const path = await dialog.open({ - directory: true, - multiple: false, - }); - this.formGroup.get("path")?.setValue(path); - await this.checkLocalRepoExists(); - } - - public async onTypeChange(type: string) { - setTimeout(() => { - const path = this.formGroup.get("path"); - const address = this.formGroup.get("address"); - switch (type) { - case "local": - address?.clearValidators(); - address?.setErrors(null); - path?.setValidators(this.validatePath); - path?.setErrors(this.validatePath(path)); - break; - case "remote": - path?.clearValidators(); - path?.setErrors(null); - address?.setValidators(this.validateAddress); - address?.setErrors(this.validateAddress(address)); - break; - } - }, 0); - } - - validateName() { - const control = this.formGroup.get("name"); - const value = control?.value; - - if (this.repositories.find(r => r.name === value)) { - control?.setErrors({nameAlreadyExists: value}); + public async checkRepositoryStatus() { + this.onlineStatus = "Checking..."; + const address = this.formGroup.value.address; + const running = await this.repoService.checkDaemonRunning(address); + console.log(running); + this.onlineStatus = running ? "Online" : "Offline"; + } + + public async checkLocalRepoExists() { + this.localRepoExists = await this.repoService.checkLocalRepositoryExists( + this.formGroup.value.path); + } + + public async initLocalRepository() { + const path = this.formGroup.value.path; + await this.repoService.initRepository(path); + await this.checkLocalRepoExists(); + } + + public async addRepository() { + let {name, repositoryType, path, address} = this.formGroup.value; + path = repositoryType === "local" ? path : undefined; + address = repositoryType === "remote" ? address : undefined; + try { + await this.repoService.addRepository(name, path, address, + repositoryType === "local"); + this.dialogRef.close(); + } catch (err) { + this.errorBroker.showError(err); + } + } + + public closeDialog() { + this.dialogRef.close(); + } + + public async openFolderDialog() { + const path = await dialog.open({ + directory: true, + multiple: false, + }); + this.formGroup.get("path")?.setValue(path); + await this.checkLocalRepoExists(); } - } - validatePath(control: AbstractControl): ValidationErrors | null { - const repositoryType = control.parent?.get( - "repositoryType")?.value ?? "local"; + public async onTypeChange(type: string) { + setTimeout(() => { + const path = this.formGroup.get("path"); + const address = this.formGroup.get("address"); + switch (type) { + case "local": + address?.clearValidators(); + address?.setErrors(null); + path?.setValidators(this.validatePath); + path?.setErrors(this.validatePath(path)); + break; + case "remote": + path?.clearValidators(); + path?.setErrors(null); + address?.setValidators(this.validateAddress); + address?.setErrors(this.validateAddress(address)); + break; + } + }, 0); + } + + validateName() { + const control = this.formGroup.get("name"); + const value = control?.value; - if (repositoryType === "local") { - return control.value.length > 0 ? null : {valueRequired: control.value}; + if (this.repositories.find(r => r.name === value)) { + control?.setErrors({nameAlreadyExists: value}); + } } - return null; - } - validateAddress(control: AbstractControl): ValidationErrors | null { - const repositoryType = control.parent?.get( - "repositoryType")?.value ?? "remote"; + validatePath(control: AbstractControl): ValidationErrors | null { + const repositoryType = control.parent?.get( + "repositoryType")?.value ?? "local"; - if (repositoryType === "remote") { - const match = /(\d+\.){3}\d+:\d+|\S+:\d+/.test(control.value) - return match ? null : {invalidAddress: control.value}; + if (repositoryType === "local") { + return control.value.length > 0 ? null : {valueRequired: control.value}; + } + return null; } - return null; - } + validateAddress(control: AbstractControl): ValidationErrors | null { + const repositoryType = control.parent?.get( + "repositoryType")?.value ?? "remote"; + + if (repositoryType === "remote") { + const match = /(\d+\.){3}\d+:\d+|\S+:\d+/.test(control.value) + return match ? null : {invalidAddress: control.value}; + } + + return null; + } } diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html index 099149e..fa06f63 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html @@ -1,10 +1,10 @@
-
- -
-
-
- +
+ +
+
+
+ +
-
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.scss b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.scss index dc8b4d3..8e315f5 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.scss +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.scss @@ -2,31 +2,31 @@ .repository-container { - margin: 1em; + margin: 1em; } .repo-page-content { - margin: 0 10%; - height: calc(100% - 2em); + margin: 0 10%; + height: calc(100% - 2em); } .add-repo-tools { - height: 5em; - display: flex; - flex-direction: row-reverse; + height: 5em; + display: flex; + flex-direction: row-reverse; - button { - margin: 1em; - } + button { + margin: 1em; + } } .repository-list { - display: flex; - flex-direction: column; - overflow-y: auto; - height: calc(100% - 5em); + display: flex; + flex-direction: column; + overflow-y: auto; + height: calc(100% - 5em); } app-repository-card { - position: relative; + position: relative; } diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.spec.ts b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.spec.ts index b7465b4..42986c0 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {RepositoriesTabComponent} from './repositories-tab.component'; +import {RepositoriesTabComponent} from "./repositories-tab.component"; -describe('RepositoriesComponent', () => { - let component: RepositoriesTabComponent; - let fixture: ComponentFixture; +describe("RepositoriesComponent", () => { + let component: RepositoriesTabComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [RepositoriesTabComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RepositoriesTabComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(RepositoriesTabComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(RepositoriesTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.ts b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.ts index 1679dd1..0b363c9 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.ts +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.ts @@ -1,37 +1,37 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit} from "@angular/core"; import {Repository} from "../../../models/Repository"; import {RepositoryService} from "../../../services/repository/repository.service"; import {MatDialog} from "@angular/material/dialog"; import {AddRepositoryDialogComponent} from "./add-repository-dialog/add-repository-dialog.component"; @Component({ - selector: 'app-repositories-tab', - templateUrl: './repositories-tab.component.html', - styleUrls: ['./repositories-tab.component.scss'] + selector: "app-repositories-tab", + templateUrl: "./repositories-tab.component.html", + styleUrls: ["./repositories-tab.component.scss"] }) export class RepositoriesTabComponent implements OnInit { - repositories: Repository[] = []; + repositories: Repository[] = []; - constructor( - private repoService: RepositoryService, - public dialog: MatDialog - ) { - } + constructor( + private repoService: RepositoryService, + public dialog: MatDialog + ) { + } - ngOnInit(): void { - this.repoService.repositories.subscribe({ - next: (repos) => { - this.repositories = repos; - } - }); - } + ngOnInit(): void { + this.repoService.repositories.subscribe({ + next: (repos) => { + this.repositories = repos; + } + }); + } - public openAddRepositoryDialog() { - this.dialog.open(AddRepositoryDialogComponent, { - disableClose: true, - minWidth: "30%", - minHeight: "30%", - }); - } + public openAddRepositoryDialog() { + this.dialog.open(AddRepositoryDialogComponent, { + disableClose: true, + minWidth: "30%", + minHeight: "30%", + }); + } } diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.html b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.html index 9216d92..8d6af98 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.html +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.html @@ -1,37 +1,37 @@ - - {{repository.name}} -
-

{{this.getDaemonStatusText()}}

-
- -

{{repository.path!}}

-

{{repository.address}}

- - - - - - - - - - - - - + + {{repository.name}} +
+

{{this.getDaemonStatusText()}}

+
+ +

{{repository.path!}}

+

{{repository.address}}

+ + + + + + + + + + + + + diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.scss b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.scss index 0ec1c1d..cf283b3 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.scss +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.scss @@ -1,40 +1,40 @@ @import "../../../../../styles"; .repository-path { - color: lightgray; + color: lightgray; } .repository-address { - color: lightgray; - font-family: "Fira Code Light", Monospaced, Consolas, monospace; + color: lightgray; + font-family: "Fira Code Light", Monospaced, Consolas, monospace; } .repository-status { - position: absolute; - right: 0; - top: 0; - padding: 0.5em; - width: 3em; - text-align: center; - border-bottom-left-radius: 1em; - - p { - margin: auto; - } + position: absolute; + right: 0; + top: 0; + padding: 0.5em; + width: 3em; + text-align: center; + border-bottom-left-radius: 1em; + + p { + margin: auto; + } } .status-local { - background-color: #2e237a; + background-color: #2e237a; } .status-offline { - background-color: #8e1e2a; + background-color: #8e1e2a; } .status-online { - background-color: #1b651b; + background-color: #1b651b; } button.menu-button { - float: right; + float: right; } diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.spec.ts b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.spec.ts index 209e1a5..d96730a 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.spec.ts +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {RepositoryCardComponent} from './repository-card.component'; +import {RepositoryCardComponent} from "./repository-card.component"; -describe('RepositoryCardComponent', () => { - let component: RepositoryCardComponent; - let fixture: ComponentFixture; +describe("RepositoryCardComponent", () => { + let component: RepositoryCardComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [RepositoryCardComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RepositoryCardComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(RepositoryCardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(RepositoryCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts index babaee7..2d52f79 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {Component, Input, OnDestroy, OnInit, ViewChild} from "@angular/core"; import {Repository} from "../../../../models/Repository"; import {RepositoryService} from "../../../../services/repository/repository.service"; import {Router} from "@angular/router"; @@ -8,106 +8,106 @@ import {ConfirmDialogComponent} from "../../../shared/confirm-dialog/confirm-dia import {BusyIndicatorComponent} from "../../../shared/busy-indicator/busy-indicator.component"; @Component({ - selector: 'app-repository-card', - templateUrl: './repository-card.component.html', - styleUrls: ['./repository-card.component.scss'] + selector: "app-repository-card", + templateUrl: "./repository-card.component.html", + styleUrls: ["./repository-card.component.scss"] }) export class RepositoryCardComponent implements OnInit, OnDestroy { - @Input() repository!: Repository; - @ViewChild(BusyIndicatorComponent) busyIndicator!: BusyIndicatorComponent; + @Input() repository!: Repository; + @ViewChild(BusyIndicatorComponent) busyIndicator!: BusyIndicatorComponent; - public daemonRunning: boolean = false; + public daemonRunning: boolean = false; - statusRefreshInterval: number | undefined; + statusRefreshInterval: number | undefined; - constructor( - public repoService: RepositoryService, - private router: Router, - private errorBroker: ErrorBrokerService, - public dialog: MatDialog) { - } + constructor( + public repoService: RepositoryService, + private router: Router, + private errorBroker: ErrorBrokerService, + public dialog: MatDialog) { + } - public async ngOnInit() { - if (!this.repository.local) { - await this.checkRemoteRepositoryStatus(); - this.statusRefreshInterval = setInterval( - async () => await this.checkRemoteRepositoryStatus(), 10000); + public async ngOnInit() { + if (!this.repository.local) { + await this.checkRemoteRepositoryStatus(); + this.statusRefreshInterval = setInterval( + async () => await this.checkRemoteRepositoryStatus(), 10000); + } } - } - public async ngOnDestroy(): Promise { - if (this.statusRefreshInterval != undefined) { - clearInterval(this.statusRefreshInterval); + public async ngOnDestroy(): Promise { + if (this.statusRefreshInterval != undefined) { + clearInterval(this.statusRefreshInterval); + } } - } - public isSelectedRepository(): boolean { - return this.repoService.selectedRepository.getValue()?.name === this.repository.name - } + public isSelectedRepository(): boolean { + return this.repoService.selectedRepository.getValue()?.name === this.repository.name + } - public async removeRepository() { - await this.dialog.open(ConfirmDialogComponent, { - data: { - title: "Remove repository", - message: `Do you really want to remove the repository "${this.repository.name}"?`, - confirmAction: "Remove", - confirmColor: "warn" - } - }).afterClosed().subscribe(async confirmation => { - if (confirmation === true) { - await this.repoService.removeRepository(this.repository.name); - } - }); - } + public async removeRepository() { + await this.dialog.open(ConfirmDialogComponent, { + data: { + title: "Remove repository", + message: `Do you really want to remove the repository "${this.repository.name}"?`, + confirmAction: "Remove", + confirmColor: "warn" + } + }).afterClosed().subscribe(async confirmation => { + if (confirmation === true) { + await this.repoService.removeRepository(this.repository.name); + } + }); + } - public getDaemonStatusText(): string { - if (this.repository.local) { - return "Local"; - } else if (this.daemonRunning) { - return "Online"; - } else { - return "Offline"; + public getDaemonStatusText(): string { + if (this.repository.local) { + return "Local"; + } else if (this.daemonRunning) { + return "Online"; + } else { + return "Offline"; + } } - } - public getDaemonStatusClass(): string { - if (this.repository.local) { - return "status-local"; - } else if (this.daemonRunning) { - return "status-online"; - } else { - return "status-offline"; + public getDaemonStatusClass(): string { + if (this.repository.local) { + return "status-local"; + } else if (this.daemonRunning) { + return "status-online"; + } else { + return "status-offline"; + } } - } - public async startDaemonAndSelectRepository() { - try { - if (!this.daemonRunning) { - await this.repoService.startDaemon(this.repository.path!); - this.daemonRunning = true; - await new Promise((res, _) => { - setTimeout(res, 2000) // wait for the daemon to start - }); - } - await this.selectRepository(); - } catch (err) { - this.errorBroker.showError(err); + public async startDaemonAndSelectRepository() { + try { + if (!this.daemonRunning) { + await this.repoService.startDaemon(this.repository.path!); + this.daemonRunning = true; + await new Promise((res, _) => { + setTimeout(res, 2000) // wait for the daemon to start + }); + } + await this.selectRepository(); + } catch (err) { + this.errorBroker.showError(err); + } } - } - public async selectRepository() { - this.busyIndicator.setBusy(true); - try { - await this.repoService.setRepository(this.repository); - } catch (err) { - this.errorBroker.showError(err); + public async selectRepository() { + this.busyIndicator.setBusy(true); + try { + await this.repoService.setRepository(this.repository); + } catch (err) { + this.errorBroker.showError(err); + } + this.busyIndicator.setBusy(false); } - this.busyIndicator.setBusy(false); - } - async checkRemoteRepositoryStatus() { - this.daemonRunning = await this.repoService.checkDaemonRunning( - this.repository.address!); - } + async checkRemoteRepositoryStatus() { + this.daemonRunning = await this.repoService.checkDaemonRunning( + this.repository.address!); + } } diff --git a/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.html b/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.html index 8e060fe..83d912e 100644 --- a/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.html +++ b/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.html @@ -1,5 +1,5 @@
- +
diff --git a/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.scss b/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.scss index 93d7771..e5b12de 100644 --- a/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.scss +++ b/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.scss @@ -1,31 +1,31 @@ .busy-indicator-overlay { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - overflow: hidden; - display: flex; - z-index: 998; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow: hidden; + display: flex; + z-index: 998; - mat-progress-spinner { - z-index: 999; - margin: auto; - } + mat-progress-spinner { + z-index: 999; + margin: auto; + } } .busy-indicator-overlay.blur { - background-color: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(5px); + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); } .busy-indicator-overlay.darken { - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0, 0, 0, 0.2); } ::ng-deep app-busy-indicator { - width: 100%; - height: 100%; - position: relative; - display: block; + width: 100%; + height: 100%; + position: relative; + display: block; } diff --git a/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.spec.ts b/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.spec.ts index 3db0ec9..c269695 100644 --- a/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {BusyIndicatorComponent} from './busy-indicator.component'; +import {BusyIndicatorComponent} from "./busy-indicator.component"; -describe('BusyIndicatorComponent', () => { - let component: BusyIndicatorComponent; - let fixture: ComponentFixture; +describe("BusyIndicatorComponent", () => { + let component: BusyIndicatorComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [BusyIndicatorComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [BusyIndicatorComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(BusyIndicatorComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(BusyIndicatorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.ts b/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.ts index 159876d..2926520 100644 --- a/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.ts +++ b/mediarepo-ui/src/app/components/shared/busy-indicator/busy-indicator.component.ts @@ -1,49 +1,49 @@ -import {Component, Input} from '@angular/core'; +import {Component, Input} from "@angular/core"; import {ProgressSpinnerMode} from "@angular/material/progress-spinner"; @Component({ - selector: 'app-busy-indicator', - templateUrl: './busy-indicator.component.html', - styleUrls: ['./busy-indicator.component.scss'] + selector: "app-busy-indicator", + templateUrl: "./busy-indicator.component.html", + styleUrls: ["./busy-indicator.component.scss"] }) export class BusyIndicatorComponent { - @Input() busy: boolean = false; - @Input() blurBackground: boolean = false; - @Input() darkenBackground: boolean = false; - @Input() mode: ProgressSpinnerMode = "indeterminate"; - @Input() value: number | undefined; + @Input() busy: boolean = false; + @Input() blurBackground: boolean = false; + @Input() darkenBackground: boolean = false; + @Input() mode: ProgressSpinnerMode = "indeterminate"; + @Input() value: number | undefined; - constructor() { - } + constructor() { + } - public setBusy(busy: boolean) { - this.busy = busy; - } + public setBusy(busy: boolean) { + this.busy = busy; + } - public wrapOperation(operation: Function): T | undefined { - this.setBusy(true) - try { - const result = operation(); - this.setBusy(false); - return result; - } catch { - return undefined; - } finally { - this.setBusy(false); + public wrapOperation(operation: Function): T | undefined { + this.setBusy(true) + try { + const result = operation(); + this.setBusy(false); + return result; + } catch { + return undefined; + } finally { + this.setBusy(false); + } } - } - public async wrapAsyncOperation(operation: Function): Promise { - this.setBusy(true) - try { - const result = await operation(); - this.setBusy(false); - return result; - } catch { - return undefined; - } finally { - this.setBusy(false); + public async wrapAsyncOperation(operation: Function): Promise { + this.setBusy(true) + try { + const result = await operation(); + this.setBusy(false); + return result; + } catch { + return undefined; + } finally { + this.setBusy(false); + } } - } } diff --git a/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.html b/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.html index f0821c4..7f34ff5 100644 --- a/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.html +++ b/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.html @@ -1,10 +1,10 @@

- {{title}} + {{title}}

- {{message}} + {{message}}
- - + +
diff --git a/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.scss b/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.scss index 50ae3d5..ff14107 100644 --- a/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.scss +++ b/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.scss @@ -1,8 +1,8 @@ .confirm-dialog-actions { - display: block; + display: block; - button { - float: right; - margin-left: 1em; - } + button { + float: right; + margin-left: 1em; + } } diff --git a/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.spec.ts b/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.spec.ts index 6a26a12..98cb7d2 100644 --- a/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {ConfirmDialogComponent} from './confirm-dialog.component'; +import {ConfirmDialogComponent} from "./confirm-dialog.component"; -describe('ConfirmDialogComponent', () => { - let component: ConfirmDialogComponent; - let fixture: ComponentFixture; +describe("ConfirmDialogComponent", () => { + let component: ConfirmDialogComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ConfirmDialogComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ConfirmDialogComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ConfirmDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.ts b/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.ts index ad8fb39..b4270f8 100644 --- a/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.ts +++ b/mediarepo-ui/src/app/components/shared/confirm-dialog/confirm-dialog.component.ts @@ -1,35 +1,35 @@ -import {Component, Inject} from '@angular/core'; +import {Component, Inject} from "@angular/core"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {ThemePalette} from "@angular/material/core"; @Component({ - selector: 'app-confirm-dialog', - templateUrl: './confirm-dialog.component.html', - styleUrls: ['./confirm-dialog.component.scss'] + selector: "app-confirm-dialog", + templateUrl: "./confirm-dialog.component.html", + styleUrls: ["./confirm-dialog.component.scss"] }) export class ConfirmDialogComponent { - title = ""; - message = ""; - confirmAction = ""; - confirmColor: ThemePalette = "primary"; - denyAction = "Cancel"; - denyColor: ThemePalette = "accent"; + title = ""; + message = ""; + confirmAction = ""; + confirmColor: ThemePalette = "primary"; + denyAction = "Cancel"; + denyColor: ThemePalette = "accent"; - constructor( - public dialogRef: MatDialogRef, - @Inject( - MAT_DIALOG_DATA) data: { title: string, message: string, confirmAction: string, denyAction?: string, confirmColor?: ThemePalette, denyColor?: ThemePalette } - ) { - this.title = data.title; - this.message = data.message; - this.confirmAction = data.confirmAction; - this.denyAction = data.denyAction ?? this.denyAction; - this.confirmColor = data.confirmColor ?? this.confirmColor; - this.denyColor = data.denyColor ?? this.denyColor; - } + constructor( + public dialogRef: MatDialogRef, + @Inject( + MAT_DIALOG_DATA) data: { title: string, message: string, confirmAction: string, denyAction?: string, confirmColor?: ThemePalette, denyColor?: ThemePalette } + ) { + this.title = data.title; + this.message = data.message; + this.confirmAction = data.confirmAction; + this.denyAction = data.denyAction ?? this.denyAction; + this.confirmColor = data.confirmColor ?? this.confirmColor; + this.denyColor = data.denyColor ?? this.denyColor; + } - public closeDialog(result: boolean) { - this.dialogRef.close(result); - } + public closeDialog(result: boolean) { + this.dialogRef.close(result); + } } diff --git a/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.html b/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.html index 616c21c..aba12b2 100644 --- a/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.html +++ b/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.html @@ -1,5 +1,5 @@
- +
diff --git a/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.scss b/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.scss index 73a04e5..76cb9b0 100644 --- a/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.scss +++ b/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.scss @@ -1,21 +1,21 @@ .image-container { - height: 100%; - width: 100%; - display: flex; + height: 100%; + width: 100%; + display: flex; } img { - margin: auto; - max-height: 100%; - max-width: 100%; - height: auto; - width: auto; + margin: auto; + max-height: 100%; + max-width: 100%; + height: auto; + width: auto; } img.scale-height { - height: 100%; + height: 100%; } img.scale-width { - width: 100%; + width: 100%; } diff --git a/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.spec.ts b/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.spec.ts index cdb136d..09acf68 100644 --- a/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {ContentAwareImageComponent} from './content-aware-image.component'; +import {ContentAwareImageComponent} from "./content-aware-image.component"; -describe('ContentAwareImageComponent', () => { - let component: ContentAwareImageComponent; - let fixture: ComponentFixture; +describe("ContentAwareImageComponent", () => { + let component: ContentAwareImageComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ContentAwareImageComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ContentAwareImageComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ContentAwareImageComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ContentAwareImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.ts b/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.ts index 46da500..64ecbb3 100644 --- a/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.ts +++ b/mediarepo-ui/src/app/components/shared/content-aware-image/content-aware-image.component.ts @@ -1,42 +1,42 @@ -import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core'; +import {Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core"; import {SafeResourceUrl} from "@angular/platform-browser"; @Component({ - selector: 'app-content-aware-image', - templateUrl: './content-aware-image.component.html', - styleUrls: ['./content-aware-image.component.scss'] + selector: "app-content-aware-image", + templateUrl: "./content-aware-image.component.html", + styleUrls: ["./content-aware-image.component.scss"] }) export class ContentAwareImageComponent implements OnInit { - @Input() imageSrc!: string | SafeResourceUrl; - @Input() maximizeHeight: boolean = true; - @Input() maximizeWidth: boolean = true; - @Input() borderRadius: string | undefined; - @Input() decoding: "async" | "sync" | "auto" = "auto"; + @Input() imageSrc!: string | SafeResourceUrl; + @Input() maximizeHeight: boolean = true; + @Input() maximizeWidth: boolean = true; + @Input() borderRadius: string | undefined; + @Input() decoding: "async" | "sync" | "auto" = "auto"; - @ViewChild("image") image: ElementRef | undefined; + @ViewChild("image") image: ElementRef | undefined; - scaleWidth = false; + scaleWidth = false; - constructor() { - } + constructor() { + } - public ngOnInit(): void { - if (this.image) { - this.image.nativeElement.decoding = this.decoding; + public ngOnInit(): void { + if (this.image) { + this.image.nativeElement.decoding = this.decoding; + } } - } - /** - * Fits the image into the container - * @param {HTMLImageElement} image - * @param {HTMLDivElement} imageContainer - */ - public adjustSize(image: HTMLImageElement, imageContainer: HTMLDivElement): void { - const containerHeight = Math.abs(imageContainer.clientHeight); - const containerWidth = Math.abs(imageContainer.clientWidth); - const imageRelativeHeight = image.naturalHeight / containerHeight; - const imageRelativeWidth = image.naturalWidth / containerWidth; - this.scaleWidth = imageRelativeWidth > imageRelativeHeight; - } + /** + * Fits the image into the container + * @param {HTMLImageElement} image + * @param {HTMLDivElement} imageContainer + */ + public adjustSize(image: HTMLImageElement, imageContainer: HTMLDivElement): void { + const containerHeight = Math.abs(imageContainer.clientHeight); + const containerWidth = Math.abs(imageContainer.clientWidth); + const imageRelativeHeight = image.naturalHeight / containerHeight; + const imageRelativeWidth = image.naturalWidth / containerWidth; + this.scaleWidth = imageRelativeWidth > imageRelativeHeight; + } } diff --git a/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.html b/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.html index ab72e3a..4bf0a19 100644 --- a/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.html +++ b/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.html @@ -1,4 +1,4 @@
- + diff --git a/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.scss b/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.scss index 960a1df..cb24826 100644 --- a/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.scss +++ b/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.scss @@ -1,4 +1,4 @@ .menu-anchor { - visibility: hidden; - position: fixed; + visibility: hidden; + position: fixed; } diff --git a/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.spec.ts b/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.spec.ts index 51f0339..a1d8033 100644 --- a/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {ContextMenuComponent} from './context-menu.component'; +import {ContextMenuComponent} from "./context-menu.component"; -describe('ContextMenuComponent', () => { - let component: ContextMenuComponent; - let fixture: ComponentFixture; +describe("ContextMenuComponent", () => { + let component: ContextMenuComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ContextMenuComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ContextMenuComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ContextMenuComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ContextMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.ts b/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.ts index f88ff78..bc35f97 100644 --- a/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.ts +++ b/mediarepo-ui/src/app/components/shared/context-menu/context-menu.component.ts @@ -1,26 +1,26 @@ -import {Component, ViewChild,} from '@angular/core'; +import {Component, ViewChild,} from "@angular/core"; import {MatMenuTrigger} from "@angular/material/menu"; @Component({ - selector: 'app-context-menu', - templateUrl: './context-menu.component.html', - styleUrls: ['./context-menu.component.scss'] + selector: "app-context-menu", + templateUrl: "./context-menu.component.html", + styleUrls: ["./context-menu.component.scss"] }) export class ContextMenuComponent { - public x: string = "0"; - public y: string = "0"; + public x: string = "0"; + public y: string = "0"; - @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger + @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger - constructor() { - } + constructor() { + } - public onContextMenu(event: MouseEvent) { - event.preventDefault(); - this.x = event.clientX + "px"; - this.y = event.clientY + "px"; - this.menuTrigger.menu.focusFirstItem("mouse"); - this.menuTrigger.openMenu(); - } + public onContextMenu(event: MouseEvent) { + event.preventDefault(); + this.x = event.clientX + "px"; + this.y = event.clientY + "px"; + this.menuTrigger.menu.focusFirstItem("mouse"); + this.menuTrigger.openMenu(); + } } diff --git a/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.html b/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.html index 6de5abc..cfdab2e 100644 --- a/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.html +++ b/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.html @@ -1,5 +1,5 @@ - - - + + + diff --git a/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.spec.ts b/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.spec.ts index b6ce6b6..d11a3f9 100644 --- a/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileContextMenuComponent} from './file-context-menu.component'; +import {FileContextMenuComponent} from "./file-context-menu.component"; -describe('FileContextMenuComponent', () => { - let component: FileContextMenuComponent; - let fixture: ComponentFixture; +describe("FileContextMenuComponent", () => { + let component: FileContextMenuComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileContextMenuComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileContextMenuComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileContextMenuComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileContextMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.ts b/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.ts index e8a19fe..2cdec53 100644 --- a/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.ts +++ b/mediarepo-ui/src/app/components/shared/context-menu/file-context-menu/file-context-menu.component.ts @@ -1,4 +1,4 @@ -import {Component, ViewChild} from '@angular/core'; +import {Component, ViewChild} from "@angular/core"; import {File} from "../../../../models/File"; import {ContextMenuComponent} from "../context-menu.component"; import {clipboard} from "@tauri-apps/api"; @@ -7,37 +7,37 @@ import {ErrorBrokerService} from "../../../../services/error-broker/error-broker import {FileHelper} from "../../../../services/file/file.helper"; @Component({ - selector: 'app-file-context-menu', - templateUrl: './file-context-menu.component.html', - styleUrls: ['./file-context-menu.component.scss'] + selector: "app-file-context-menu", + templateUrl: "./file-context-menu.component.html", + styleUrls: ["./file-context-menu.component.scss"] }) export class FileContextMenuComponent { - public file!: File; + public file!: File; - @ViewChild("contextMenu") contextMenu!: ContextMenuComponent; + @ViewChild("contextMenu") contextMenu!: ContextMenuComponent; - constructor(private fileService: FileService, private errorBroker: ErrorBrokerService) { - } + constructor(private fileService: FileService, private errorBroker: ErrorBrokerService) { + } - public onContextMenu(event: MouseEvent, file: File) { - this.file = file; - this.contextMenu.onContextMenu(event); - } + public onContextMenu(event: MouseEvent, file: File) { + this.file = file; + this.contextMenu.onContextMenu(event); + } - public async copyFileHash(): Promise { - await clipboard.writeText(this.file.hash); - } + public async copyFileHash(): Promise { + await clipboard.writeText(this.file.hash); + } - public async exportFile(): Promise { - const path = await FileHelper.getFileDownloadLocation(this.file) + public async exportFile(): Promise { + const path = await FileHelper.getFileDownloadLocation(this.file) - if (path) { - try { - await this.fileService.saveFile(this.file, path); - } catch (err) { - this.errorBroker.showError(err); - } + if (path) { + try { + await this.fileService.saveFile(this.file, path); + } catch (err) { + this.errorBroker.showError(err); + } + } } - } } diff --git a/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.html b/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.html index 6b5d899..9c982c3 100644 --- a/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.html +++ b/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.html @@ -1,39 +1,39 @@
-
-

Edit File

- - Name - - -
-
- -
- - -
- -
- -
-
- - +
+

Edit File

+ + Name + + +
+
+ +
+ + +
+ +
+ +
+
+ + +
+ + Mode + + Toggle + Add + Remove + +
- - Mode - - Toggle - Add - Remove - - -
diff --git a/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.scss b/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.scss index 2261a37..3cd2379 100644 --- a/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.scss @@ -1,69 +1,69 @@ .file-metadata, .tag-input { - width: 100%; - - mat-form-field, app-tag-input { width: 100%; - } - mat-form-field.form-field-mode { - width: 10em; - } + mat-form-field, app-tag-input { + width: 100%; + } + + mat-form-field.form-field-mode { + width: 10em; + } } .file-edit-inner { - height: 100%; - width: 100%; - display: block; + height: 100%; + width: 100%; + display: block; } .tag-edit-list { - height: 100%; - width: 100%; - display: block; - overflow: hidden; + height: 100%; + width: 100%; + display: block; + overflow: hidden; } cdk-virtual-scroll-viewport { - height: 100%; - width: 100%; - overflow-y: auto; - - ::ng-deep .cdk-virtual-scroll-content-wrapper { + height: 100%; width: 100%; - } + overflow-y: auto; + + ::ng-deep .cdk-virtual-scroll-content-wrapper { + width: 100%; + } } .editable-tag { - height: 50px; - width: 100%; - display: flex; - font-size: 1.2em; - transition-duration: 0.1s; - user-select: none; - overflow: hidden; - cursor: default; + height: 50px; + width: 100%; + display: flex; + font-size: 1.2em; + transition-duration: 0.1s; + user-select: none; + overflow: hidden; + cursor: default; - app-tag-item { - margin: auto auto auto 0.25em; - } + app-tag-item { + margin: auto auto auto 0.25em; + } - .tag-remove-button { - margin-right: 1em; - height: 50px; - width: 50px; - } + .tag-remove-button { + margin-right: 1em; + height: 50px; + width: 50px; + } } .tag-input-field { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; - .add-tag-button { - width: 65px; - height: 65px; - } + .add-tag-button { + width: 65px; + height: 65px; + } } mat-divider { - width: 100%; + width: 100%; } diff --git a/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.spec.ts index 81eb48d..51320bd 100644 --- a/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileEditComponent} from './file-edit.component'; +import {FileEditComponent} from "./file-edit.component"; -describe('FileEditComponent', () => { - let component: FileEditComponent; - let fixture: ComponentFixture; +describe("FileEditComponent", () => { + let component: FileEditComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileEditComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileEditComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileEditComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.ts b/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.ts index f49b522..dc5c59a 100644 --- a/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-edit/file-edit.component.ts @@ -1,12 +1,12 @@ import { - Component, - ElementRef, - Input, - OnChanges, - OnInit, - SimpleChanges, - ViewChild -} from '@angular/core'; + Component, + ElementRef, + Input, + OnChanges, + OnInit, + SimpleChanges, + ViewChild +} from "@angular/core"; import {File} from "../../../models/File"; import {Tag} from "../../../models/Tag"; import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; @@ -14,138 +14,145 @@ import {TagService} from "../../../services/tag/tag.service"; import {FileService} from "../../../services/file/file.service"; @Component({ - selector: 'app-file-edit', - templateUrl: './file-edit.component.html', - styleUrls: ['./file-edit.component.scss'] + selector: "app-file-edit", + templateUrl: "./file-edit.component.html", + styleUrls: ["./file-edit.component.scss"] }) export class FileEditComponent implements OnInit, OnChanges { - @Input() files: File[] = []; - public tags: Tag[] = []; - - public allTags: Tag[] = []; - public editMode: string = "Toggle"; - @ViewChild("tagScroll") tagScroll!: CdkVirtualScrollViewport; - @ViewChild("fileNameInput") fileNameInput!: ElementRef; - private fileTags: { [key: number]: Tag[] } = {}; - - constructor( - private tagService: TagService, - private fileService: FileService, - ) { - } - - async ngOnInit() { - this.tagService.tags.subscribe(tags => this.allTags = tags); - await this.tagService.loadTags(); - await this.loadFileTags(); - this.resetFileNameInput(); - } - - async ngOnChanges(changes: SimpleChanges) { - if (changes["files"]) { - await this.loadFileTags() - this.resetFileNameInput(); + @Input() files: File[] = []; + public tags: Tag[] = []; + + public allTags: Tag[] = []; + public editMode: string = "Toggle"; + @ViewChild("tagScroll") tagScroll!: CdkVirtualScrollViewport; + @ViewChild("fileNameInput") fileNameInput!: ElementRef; + private fileTags: { [key: number]: Tag[] } = {}; + + constructor( + private tagService: TagService, + private fileService: FileService, + ) { + } + + async ngOnInit() { + this.tagService.tags.subscribe(tags => this.allTags = tags); + await this.tagService.loadTags(); + await this.loadFileTags(); + this.resetFileNameInput(); + } + + async ngOnChanges(changes: SimpleChanges) { + if (changes["files"]) { + await this.loadFileTags() + this.resetFileNameInput(); + } } - } - - public async changeFileName(value: string) { - const name = value.trim(); - - if (name.length > 0) { - const file = this.files[0]; - console.log("Updating name to", name); - const responseFile = await this.fileService.updateFileName(file, name); - console.log("Updated name"); - file.name = responseFile.name; - this.resetFileNameInput(); + + public async changeFileName(value: string) { + const name = value.trim(); + + if (name.length > 0) { + const file = this.files[0]; + console.log("Updating name to", name); + const responseFile = await this.fileService.updateFileName(file, + name); + console.log("Updated name"); + file.name = responseFile.name; + this.resetFileNameInput(); + } } - } - - public async editTag(tag: string): Promise { - if (tag.length > 0) { - let tagInstance = this.allTags.find(t => t.getNormalizedOutput() === tag); - - if (!tagInstance) { - tagInstance = (await this.tagService.createTags([tag]))[0]; - this.allTags.push(tagInstance); - } - switch (this.editMode) { - case "Toggle": - await this.toggleTag(tagInstance); - break; - case "Add": - await this.addTag(tagInstance); - break; - case "Remove": - await this.removeTag(tagInstance); - break; - } + + public async editTag(tag: string): Promise { + if (tag.length > 0) { + let tagInstance = this.allTags.find( + t => t.getNormalizedOutput() === tag); + + if (!tagInstance) { + tagInstance = (await this.tagService.createTags([tag]))[0]; + this.allTags.push(tagInstance); + } + switch (this.editMode) { + case "Toggle": + await this.toggleTag(tagInstance); + break; + case "Add": + await this.addTag(tagInstance); + break; + case "Remove": + await this.removeTag(tagInstance); + break; + } + } } - } - - async toggleTag(tag: Tag) { - for (const file of this.files) { - const fileTags = this.fileTags[file.id]; - let addedTags = []; - let removedTags = []; - if (fileTags.findIndex(i => i.id === tag.id) < 0) { - addedTags.push(tag.id); - } else { - removedTags.push(tag.id); - } - this.fileTags[file.id] = await this.tagService.changeFileTags(file.id, - addedTags, removedTags); + + async toggleTag(tag: Tag) { + for (const file of this.files) { + const fileTags = this.fileTags[file.id]; + let addedTags = []; + let removedTags = []; + if (fileTags.findIndex(i => i.id === tag.id) < 0) { + addedTags.push(tag.id); + } else { + removedTags.push(tag.id); + } + this.fileTags[file.id] = await this.tagService.changeFileTags( + file.id, + addedTags, removedTags); + } + this.mapFileTagsToTagList(); + const index = this.tags.indexOf(tag); + index >= 0 && this.tagScroll.scrollToIndex(index); } - this.mapFileTagsToTagList(); - const index = this.tags.indexOf(tag); - index >= 0 && this.tagScroll.scrollToIndex(index); - } - - async addTag(tag: Tag) { - for (const file of this.files) { - if (this.fileTags[file.id].findIndex(t => t.id === tag.id) < 0) { - this.fileTags[file.id] = await this.tagService.changeFileTags(file.id, - [tag.id], []); - } + + async addTag(tag: Tag) { + for (const file of this.files) { + if (this.fileTags[file.id].findIndex(t => t.id === tag.id) < 0) { + this.fileTags[file.id] = await this.tagService.changeFileTags( + file.id, + [tag.id], []); + } + } + this.mapFileTagsToTagList(); + const index = this.tags.indexOf(tag); + index >= 0 && this.tagScroll.scrollToIndex(index); } - this.mapFileTagsToTagList(); - const index = this.tags.indexOf(tag); - index >= 0 && this.tagScroll.scrollToIndex(index); - } - - public async removeTag(tag: Tag) { - for (const file of this.files) { - if (this.fileTags[file.id].findIndex(t => t.id === tag.id) >= 0) { - this.fileTags[file.id] = await this.tagService.changeFileTags(file.id, - [], [tag.id]); - } + + public async removeTag(tag: Tag) { + for (const file of this.files) { + if (this.fileTags[file.id].findIndex(t => t.id === tag.id) >= 0) { + this.fileTags[file.id] = await this.tagService.changeFileTags( + file.id, + [], [tag.id]); + } + } + this.mapFileTagsToTagList(); } - this.mapFileTagsToTagList(); - } - private async loadFileTags() { - for (const file of this.files) { - this.fileTags[file.id] = await this.tagService.getTagsForFiles( - [file.hash]); + private async loadFileTags() { + for (const file of this.files) { + this.fileTags[file.id] = await this.tagService.getTagsForFiles( + [file.hash]); + } + this.mapFileTagsToTagList(); } - this.mapFileTagsToTagList(); - } - private resetFileNameInput() { - if (this.files.length === 1) { - this.fileNameInput.nativeElement.value = this.files[0].name ?? ""; + private resetFileNameInput() { + if (this.files.length === 1) { + this.fileNameInput.nativeElement.value = this.files[0].name ?? ""; + } } - } - - private mapFileTagsToTagList() { - let tags: Tag[] = []; - for (const file of this.files) { - const fileTags = this.fileTags[file.id]; - tags.push( - ...fileTags.filter(t => tags.findIndex(tag => tag.id === t.id) < 0)); + + private mapFileTagsToTagList() { + let tags: Tag[] = []; + for (const file of this.files) { + const fileTags = this.fileTags[file.id]; + tags.push( + ...fileTags.filter( + t => tags.findIndex(tag => tag.id === t.id) < 0)); + } + this.tags = tags.sort( + (a, b) => a.getNormalizedOutput() + .localeCompare(b.getNormalizedOutput())); } - this.tags = tags.sort( - (a, b) => a.getNormalizedOutput().localeCompare(b.getNormalizedOutput())); - } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.html index 3f555f6..8469ebd 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.html @@ -1,4 +1,4 @@
- +
diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.scss index 7403cb4..b1c2c1e 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.scss @@ -1,9 +1,9 @@ .audio-container { - height: 100%; - width: 100%; - display: flex; + height: 100%; + width: 100%; + display: flex; - audio { - margin: auto; - } + audio { + margin: auto; + } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.spec.ts index 1974f72..13cc2cb 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {AudioViewerComponent} from './audio-viewer.component'; +import {AudioViewerComponent} from "./audio-viewer.component"; -describe('AudioViewerComponent', () => { - let component: AudioViewerComponent; - let fixture: ComponentFixture; +describe("AudioViewerComponent", () => { + let component: AudioViewerComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [AudioViewerComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AudioViewerComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(AudioViewerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(AudioViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.ts index 0ff6c37..e2d452a 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.ts @@ -1,15 +1,15 @@ -import {Component, Input} from '@angular/core'; +import {Component, Input} from "@angular/core"; import {SafeResourceUrl} from "@angular/platform-browser"; @Component({ - selector: 'app-audio-viewer', - templateUrl: './audio-viewer.component.html', - styleUrls: ['./audio-viewer.component.scss'] + selector: "app-audio-viewer", + templateUrl: "./audio-viewer.component.html", + styleUrls: ["./audio-viewer.component.scss"] }) export class AudioViewerComponent { - @Input() blobUrl!: SafeResourceUrl; + @Input() blobUrl!: SafeResourceUrl; - constructor() { - } + constructor() { + } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.html index fd68dd5..09dca58 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.html @@ -3,7 +3,7 @@
- Unsupported content type {{this.file.mime_type}} - + Unsupported content type {{this.file.mime_type}} +
diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.scss index 83baaa2..bd4e5ef 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.scss @@ -1,21 +1,21 @@ app-image-viewer, app-video-viewer, app-audio-viewer { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .download-prompt { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; - button { - margin: 1em 0 auto; - align-self: center; - } + button { + margin: 1em 0 auto; + align-self: center; + } - span { - margin: auto 0 0; - align-self: center; - } + span { + margin: auto 0 0; + align-self: center; + } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.spec.ts index a314ee7..4e96891 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {ContentViewerComponent} from './content-viewer.component'; +import {ContentViewerComponent} from "./content-viewer.component"; -describe('ContentViewerComponent', () => { - let component: ContentViewerComponent; - let fixture: ComponentFixture; +describe("ContentViewerComponent", () => { + let component: ContentViewerComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ContentViewerComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ContentViewerComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ContentViewerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ContentViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.ts index 2e7bebd..897d3bc 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/content-viewer.component.ts @@ -1,12 +1,12 @@ import { - AfterViewInit, - Component, - Input, - OnChanges, - OnDestroy, - SimpleChanges, - ViewChild -} from '@angular/core'; + AfterViewInit, + Component, + Input, + OnChanges, + OnDestroy, + SimpleChanges, + ViewChild +} from "@angular/core"; import {SafeResourceUrl} from "@angular/platform-browser"; import {File} from "../../../../../models/File"; import {FileService} from "../../../../../services/file/file.service"; @@ -17,95 +17,95 @@ import {BusyIndicatorComponent} from "../../../busy-indicator/busy-indicator.com type ContentType = "image" | "video" | "audio" | "other"; @Component({ - selector: 'app-content-viewer', - templateUrl: './content-viewer.component.html', - styleUrls: ['./content-viewer.component.scss'] + selector: "app-content-viewer", + templateUrl: "./content-viewer.component.html", + styleUrls: ["./content-viewer.component.scss"] }) export class ContentViewerComponent implements AfterViewInit, OnChanges, OnDestroy { - @Input() file!: File; + @Input() file!: File; - public contentUrl: SafeResourceUrl | undefined; - public blobUrl: SafeResourceUrl | undefined; + public contentUrl: SafeResourceUrl | undefined; + public blobUrl: SafeResourceUrl | undefined; - @ViewChild(BusyIndicatorComponent) busyIndicator!: BusyIndicatorComponent; + @ViewChild(BusyIndicatorComponent) busyIndicator!: BusyIndicatorComponent; - constructor( - private errorBroker: ErrorBrokerService, - private fileService: FileService - ) { - } - - public async ngAfterViewInit() { - if (["audio", "video"].includes(this.getContentType())) { - await this.loadBlobUrl(); - } else { - this.contentUrl = this.fileService.buildContentUrl(this.file); + constructor( + private errorBroker: ErrorBrokerService, + private fileService: FileService + ) { } - } - public async ngOnChanges(changes: SimpleChanges) { - if (changes["file"]) { - if (["audio", "video"].includes( - this.getContentType()) && this.busyIndicator) { - await this.loadBlobUrl(); - } else { - this.contentUrl = this.fileService.buildContentUrl(this.file); - this.unloadBlobUrl(); - } + public async ngAfterViewInit() { + if (["audio", "video"].includes(this.getContentType())) { + await this.loadBlobUrl(); + } else { + this.contentUrl = this.fileService.buildContentUrl(this.file); + } } - } - public ngOnDestroy(): void { - this.unloadBlobUrl(); - } + public async ngOnChanges(changes: SimpleChanges) { + if (changes["file"]) { + if (["audio", "video"].includes( + this.getContentType()) && this.busyIndicator) { + await this.loadBlobUrl(); + } else { + this.contentUrl = this.fileService.buildContentUrl(this.file); + this.unloadBlobUrl(); + } + } + } - public getContentType(): ContentType { - if (!this.file.mime_type) { - return "other"; + public ngOnDestroy(): void { + this.unloadBlobUrl(); } - let mimeParts = this.file.mime_type.split("/"); - const type = mimeParts.shift() ?? "other"; - const subtype = mimeParts.shift() ?? "*"; - switch (type) { - case "image": - return "image"; - case "video": - return "video"; - case "audio": - return "audio"; - default: - return "other"; + public getContentType(): ContentType { + if (!this.file.mime_type) { + return "other"; + } + let mimeParts = this.file.mime_type.split("/"); + const type = mimeParts.shift() ?? "other"; + const subtype = mimeParts.shift() ?? "*"; + + switch (type) { + case "image": + return "image"; + case "video": + return "video"; + case "audio": + return "audio"; + default: + return "other"; + } } - } - public async downloadContent() { - const path = await FileHelper.getFileDownloadLocation(this.file) + public async downloadContent() { + const path = await FileHelper.getFileDownloadLocation(this.file) - if (path) { - try { - await this.fileService.saveFile(this.file, path); - } catch (err) { - this.errorBroker.showError(err); - } + if (path) { + try { + await this.fileService.saveFile(this.file, path); + } catch (err) { + this.errorBroker.showError(err); + } + } } - } - public async loadBlobUrl(): Promise { - await this.busyIndicator.wrapAsyncOperation(async () => { - const startId = this.file.id; - this.unloadBlobUrl(); - const url = await this.fileService.readFile(this.file); - if (startId === this.file.id) { - this.blobUrl = url; - } - }); - } + public async loadBlobUrl(): Promise { + await this.busyIndicator.wrapAsyncOperation(async () => { + const startId = this.file.id; + this.unloadBlobUrl(); + const url = await this.fileService.readFile(this.file); + if (startId === this.file.id) { + this.blobUrl = url; + } + }); + } - private unloadBlobUrl() { - if (this.blobUrl) { - URL?.revokeObjectURL(this.blobUrl as string); - this.blobUrl = undefined; + private unloadBlobUrl() { + if (this.blobUrl) { + URL?.revokeObjectURL(this.blobUrl as string); + this.blobUrl = undefined; + } } - } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.html index 9d315ac..560a71f 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.html @@ -1,16 +1,16 @@
-
- - -
-
-
- +
+ + +
+
+
+ +
-
diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.scss index fc6770e..5dbd2ae 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.scss @@ -1,35 +1,35 @@ .image-drag-container, .image-scale-container { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } .image-scale-container { - display: block; + display: block; } .zoom-slider { - position: absolute; - display: flex; - flex-direction: column; - right: 1em; - bottom: 1em; - z-index: 10; - opacity: 0.5; - padding: 1em 0.5em; - transition-duration: 0.2s; + position: absolute; + display: flex; + flex-direction: column; + right: 1em; + bottom: 1em; + z-index: 10; + opacity: 0.5; + padding: 1em 0.5em; + transition-duration: 0.2s; } .zoom-slider:hover { - opacity: 1; - background-color: rgba(0, 0, 0, 0.3); - border-radius: 1em; + opacity: 1; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 1em; } .image-full-view-inner { - height: 100%; - width: 100%; - display: block; - position: relative; + height: 100%; + width: 100%; + display: block; + position: relative; } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts index 32078df..572d6e5 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {ImageViewerComponent} from './image-viewer.component'; +import {ImageViewerComponent} from "./image-viewer.component"; -describe('ImageViewerComponent', () => { - let component: ImageViewerComponent; - let fixture: ComponentFixture; +describe("ImageViewerComponent", () => { + let component: ImageViewerComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ImageViewerComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ImageViewerComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ImageViewerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ImageViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.ts index a0250a4..a0a008e 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.ts @@ -1,69 +1,69 @@ import { - Component, - HostListener, - Input, - OnChanges, - SimpleChanges -} from '@angular/core'; + Component, + HostListener, + Input, + OnChanges, + SimpleChanges +} from "@angular/core"; import {CdkDragMove} from "@angular/cdk/drag-drop"; import {SafeResourceUrl} from "@angular/platform-browser"; @Component({ - selector: 'app-image-viewer', - templateUrl: './image-viewer.component.html', - styleUrls: ['./image-viewer.component.scss'] + selector: "app-image-viewer", + templateUrl: "./image-viewer.component.html", + styleUrls: ["./image-viewer.component.scss"] }) export class ImageViewerComponent implements OnChanges { - @Input() imageUrl!: SafeResourceUrl | string; - public imageZoom = 1; - public imagePosition = {x: 0, y: 0}; - public mouseInImageView = false; + @Input() imageUrl!: SafeResourceUrl | string; + public imageZoom = 1; + public imagePosition = {x: 0, y: 0}; + public mouseInImageView = false; - constructor() { - } + constructor() { + } - public ngOnChanges(changes: SimpleChanges): void { - if (changes["imageUrl"]) { - this.resetImage(); + public ngOnChanges(changes: SimpleChanges): void { + if (changes["imageUrl"]) { + this.resetImage(); + } } - } - public resetImage() { - this.imageZoom = 1; - this.imagePosition = {x: 0, y: 0}; - } + public resetImage() { + this.imageZoom = 1; + this.imagePosition = {x: 0, y: 0}; + } - public onDragMoved($event: CdkDragMove): void { - this.imagePosition.x += $event.delta.x; - this.imagePosition.y += $event.delta.y; - } + public onDragMoved($event: CdkDragMove): void { + this.imagePosition.x += $event.delta.x; + this.imagePosition.y += $event.delta.y; + } - @HostListener("window:keydown", ["$event"]) - private async handleKeydownEvent(event: KeyboardEvent) { - switch (event.key) { - case "Escape": - this.resetImage(); - break; + @HostListener("window:keydown", ["$event"]) + private async handleKeydownEvent(event: KeyboardEvent) { + switch (event.key) { + case "Escape": + this.resetImage(); + break; + } } - } - @HostListener("mousewheel", ["$event"]) - private handleScroll(event: any) { - if (this.mouseInImageView) { - const delta = event.wheelDelta ?? event.detail; + @HostListener("mousewheel", ["$event"]) + private handleScroll(event: any) { + if (this.mouseInImageView) { + const delta = event.wheelDelta ?? event.detail; - if (delta > 0) { - this.imageZoom += 0.2 - if (this.imageZoom > 4) { - this.imageZoom = 4; - } - } else if (delta < 0) { - this.imageZoom -= 0.2 - if (this.imageZoom < 0.5) { - this.imageZoom = 0.5; + if (delta > 0) { + this.imageZoom += 0.2 + if (this.imageZoom > 4) { + this.imageZoom = 4; + } + } else if (delta < 0) { + this.imageZoom -= 0.2 + if (this.imageZoom < 0.5) { + this.imageZoom = 0.5; + } + } } - } } - } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.html index 288f44a..0d72666 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.html @@ -1,3 +1,3 @@ diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.scss index b1f16a5..3997849 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.scss @@ -1,4 +1,4 @@ video { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.spec.ts index 67da271..4d15407 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {VideoViewerComponent} from './video-viewer.component'; +import {VideoViewerComponent} from "./video-viewer.component"; -describe('VideoViewerComponent', () => { - let component: VideoViewerComponent; - let fixture: ComponentFixture; +describe("VideoViewerComponent", () => { + let component: VideoViewerComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [VideoViewerComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [VideoViewerComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(VideoViewerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(VideoViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.ts index 5022040..4854d5f 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.ts @@ -1,11 +1,11 @@ -import {Component, Input,} from '@angular/core'; +import {Component, Input,} from "@angular/core"; import {SafeResourceUrl} from "@angular/platform-browser"; @Component({ - selector: 'app-video-viewer', - templateUrl: './video-viewer.component.html', - styleUrls: ['./video-viewer.component.scss'] + selector: "app-video-viewer", + templateUrl: "./video-viewer.component.html", + styleUrls: ["./video-viewer.component.scss"] }) export class VideoViewerComponent { - @Input() blobUrl!: SafeResourceUrl; + @Input() blobUrl!: SafeResourceUrl; } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss index 67873dd..1317f49 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss @@ -2,26 +2,26 @@ @use '../../../../../../../node_modules/@angular/material/index' as mat; @mixin color($theme) { - $color-config: mat.get-color-config($theme); - $primary-palette: map.get($color-config, 'primary'); + $color-config: mat.get-color-config($theme); + $primary-palette: map.get($color-config, 'primary'); - div.image-wrapper.selected { - background-color: mat.get-color-from-palette($primary-palette, 'darker'); - } + div.image-wrapper.selected { + background-color: mat.get-color-from-palette($primary-palette, 'darker'); + } } @mixin typography($theme) { } @mixin theme($theme) { - $color-config: mat.get-color-config($theme); - @if $color-config != null { - @include color($theme); - } + $color-config: mat.get-color-config($theme); + @if $color-config != null { + @include color($theme); + } - $typography-config: mat.get-typography-config($theme); - @if $typography-config != null { - @include typography($theme); - } + $typography-config: mat.get-typography-config($theme); + @if $typography-config != null { + @include typography($theme); + } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.html index 2fb6f59..db630c7 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.html @@ -1,4 +1,4 @@
- - + +
diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.scss index 20ecddf..dad5555 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.scss @@ -1,18 +1,18 @@ app-file-thumbnail { - height: 100%; - width: 100%; - position: relative; - display: block; + height: 100%; + width: 100%; + position: relative; + display: block; } .image-wrapper { - width: calc(100% - 20px); - height: calc(100% - 20px); - align-items: center; - text-align: center; - background-color: darken(dimgrey, 15); - padding: 10px; - border-radius: 5px; - cursor: pointer; - user-select: none; + width: calc(100% - 20px); + height: calc(100% - 20px); + align-items: center; + text-align: center; + background-color: darken(dimgrey, 15); + padding: 10px; + border-radius: 5px; + cursor: pointer; + user-select: none; } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.spec.ts index d13c5d1..e81e2aa 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileGalleryEntryComponent} from './file-gallery-entry.component'; +import {FileGalleryEntryComponent} from "./file-gallery-entry.component"; -describe('FileGalleryEntryComponent', () => { - let component: FileGalleryEntryComponent; - let fixture: ComponentFixture; +describe("FileGalleryEntryComponent", () => { + let component: FileGalleryEntryComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileGalleryEntryComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileGalleryEntryComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileGalleryEntryComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileGalleryEntryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.ts index 91b672a..2835f83 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.ts @@ -1,13 +1,13 @@ import { - Component, - EventEmitter, - Inject, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges -} from '@angular/core'; + Component, + EventEmitter, + Inject, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges +} from "@angular/core"; import {File} from "../../../../../models/File"; import {FileService} from "../../../../../services/file/file.service"; import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser"; @@ -15,40 +15,41 @@ import {ErrorBrokerService} from "../../../../../services/error-broker/error-bro import {Selectable} from "../../../../../models/Selectable"; @Component({ - selector: 'app-file-gallery-entry', - templateUrl: './file-gallery-entry.component.html', - styleUrls: ['./file-gallery-entry.component.scss'] + selector: "app-file-gallery-entry", + templateUrl: "./file-gallery-entry.component.html", + styleUrls: ["./file-gallery-entry.component.scss"] }) export class FileGalleryEntryComponent implements OnInit, OnChanges { - @Input() file!: Selectable; - @Output() fileSelectEvent = new EventEmitter>(); - contentUrl: SafeResourceUrl | undefined; + @Input() file!: Selectable; + @Output() fileSelectEvent = new EventEmitter>(); + contentUrl: SafeResourceUrl | undefined; - private cachedFile: File | undefined; - private urlSetTimeout: number | undefined; + private cachedFile: File | undefined; + private urlSetTimeout: number | undefined; - constructor(@Inject( - DomSanitizer) private sanitizer: DomSanitizer, private fileService: FileService, private errorBroker: ErrorBrokerService) { - } + constructor(@Inject( + DomSanitizer) private sanitizer: DomSanitizer, private fileService: FileService, private errorBroker: ErrorBrokerService) { + } - ngOnChanges(changes: SimpleChanges) { - if (changes["file"] && (!this.cachedFile || this.file.data.hash !== this.cachedFile!.hash)) { // handle changes to the file when the component is not destroyed - this.cachedFile = this.file.data; - this.setImageDelayed(); + ngOnChanges(changes: SimpleChanges) { + if (changes["file"] && (!this.cachedFile || this.file.data.hash !== this.cachedFile!.hash)) { // handle changes to the file when the component is not destroyed + this.cachedFile = this.file.data; + this.setImageDelayed(); + } } - } - ngOnInit() { - this.cachedFile = this.file.data; - this.setImageDelayed(); - } + ngOnInit() { + this.cachedFile = this.file.data; + this.setImageDelayed(); + } - private setImageDelayed() { - this.contentUrl = undefined; - clearTimeout(this.urlSetTimeout); - this.urlSetTimeout = setTimeout( - () => this.contentUrl = this.fileService.buildThumbnailUrl(this.file.data, - 250, 250), 200); - } + private setImageDelayed() { + this.contentUrl = undefined; + clearTimeout(this.urlSetTimeout); + this.urlSetTimeout = setTimeout( + () => this.contentUrl = this.fileService.buildThumbnailUrl( + this.file.data, + 250, 250), 200); + } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.html index 88f0648..c2f4a14 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.html @@ -1,21 +1,23 @@
- -
- -
- -
- -
- -
- -
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.scss index 66249fe..99362f0 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.scss @@ -1,62 +1,62 @@ .file-scroll-viewport { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } ::ng-deep .file-scroll-viewport > .cdk-virtual-scroll-content-wrapper { - display: flex; - flex-direction: row; - height: 100%; + display: flex; + flex-direction: row; + height: 100%; } .gallery-container { - height: 100%; - width: 100%; - position: relative; - user-select: none; + height: 100%; + width: 100%; + position: relative; + user-select: none; } app-file-gallery-entry, .file-item { - width: 250px; - height: calc(100% - 10px); - padding: 5px; + width: 250px; + height: calc(100% - 10px); + padding: 5px; } app-file-gallery-entry { - display: block; + display: block; } .file-full-view { - width: 100%; - height: 100%; - overflow: hidden; + width: 100%; + height: 100%; + overflow: hidden; } app-content-viewer { - height: 100%; - width: 100%; - display: block; + height: 100%; + width: 100%; + display: block; } .close-button { - position: absolute; - top: 0; - right: 0; - width: 3em; - height: 3em; - z-index: 999; + position: absolute; + top: 0; + right: 0; + width: 3em; + height: 3em; + z-index: 999; } .url-loading-backdrop { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - overflow: hidden; - display: flex; - - mat-progress-spinner { - margin: auto; - } + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow: hidden; + display: flex; + + mat-progress-spinner { + margin: auto; + } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.spec.ts index 2e94f1a..54cef95 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileGalleryComponent} from './file-gallery.component'; +import {FileGalleryComponent} from "./file-gallery.component"; -describe('FileGalleryComponent', () => { - let component: FileGalleryComponent; - let fixture: ComponentFixture; +describe("FileGalleryComponent", () => { + let component: FileGalleryComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileGalleryComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileGalleryComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileGalleryComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileGalleryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.ts index ad9f545..20fb75d 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-gallery/file-gallery.component.ts @@ -1,14 +1,14 @@ import { - Component, - EventEmitter, - HostListener, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges, - ViewChild -} from '@angular/core'; + Component, + EventEmitter, + HostListener, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, + ViewChild +} from "@angular/core"; import {File} from "../../../../models/File"; import {FileService} from "../../../../services/file/file.service"; import {SafeResourceUrl} from "@angular/platform-browser"; @@ -17,157 +17,162 @@ import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; import {TabService} from "../../../../services/tab/tab.service"; @Component({ - selector: 'app-file-gallery', - templateUrl: './file-gallery.component.html', - styleUrls: ['./file-gallery.component.scss'] + selector: "app-file-gallery", + templateUrl: "./file-gallery.component.html", + styleUrls: ["./file-gallery.component.scss"] }) export class FileGalleryComponent implements OnChanges, OnInit { - @Input() files: File[] = []; - @Input() preselectedFile: File | undefined; - @Output() fileSelectEvent = new EventEmitter(); - @Output() fileDblClickEvent = new EventEmitter(); - @Output() closeEvent = new EventEmitter(); - entries: Selectable[] = []; - - @ViewChild("virtualScroll") virtualScroll!: CdkVirtualScrollViewport; - - public selectedFile: Selectable | undefined; - public fileContentUrl: SafeResourceUrl | undefined; - - private scrollTimeout: number | undefined; - - constructor(private tabService: TabService, private fileService: FileService) { - tabService.selectedTab.subscribe(() => this.adjustElementSizes()); - } - - /** - * Called when a new entry is selected - * @param {Selectable} entry - * @returns {Promise} - */ - async onEntrySelect(entry: Selectable) { - if (entry) { - this.selectedFile?.unselect(); - entry.select(); - this.selectedFile = entry; - await this.loadSelectedFile(); - - if (this.virtualScroll) { - clearTimeout(this.scrollTimeout); - this.scrollTimeout = setTimeout(() => this.scrollToSelection(), 0); // we need to make sure the viewport has rendered - } - - this.fileSelectEvent.emit(this.selectedFile.data); + @Input() files: File[] = []; + @Input() preselectedFile: File | undefined; + @Output() fileSelectEvent = new EventEmitter(); + @Output() fileDblClickEvent = new EventEmitter(); + @Output() closeEvent = new EventEmitter(); + entries: Selectable[] = []; + + @ViewChild("virtualScroll") virtualScroll!: CdkVirtualScrollViewport; + + public selectedFile: Selectable | undefined; + public fileContentUrl: SafeResourceUrl | undefined; + + private scrollTimeout: number | undefined; + + constructor(private tabService: TabService, private fileService: FileService) { + tabService.selectedTab.subscribe(() => this.adjustElementSizes()); } - } - - /** - * Loads the content url of the selected file - * @returns {Promise} - */ - async loadSelectedFile() { - if (this.selectedFile) { - this.fileContentUrl = this.fileService.buildContentUrl( - this.selectedFile.data) + + /** + * Called when a new entry is selected + * @param {Selectable} entry + * @returns {Promise} + */ + async onEntrySelect(entry: Selectable) { + if (entry) { + this.selectedFile?.unselect(); + entry.select(); + this.selectedFile = entry; + await this.loadSelectedFile(); + + if (this.virtualScroll) { + clearTimeout(this.scrollTimeout); + this.scrollTimeout = setTimeout(() => this.scrollToSelection(), + 0); // we need to make sure the viewport has rendered + } + + this.fileSelectEvent.emit(this.selectedFile.data); + } } - } - async ngOnInit(): Promise { - if (!this.selectedFile || this.files.indexOf(this.selectedFile.data) < 0) { - await this.onEntrySelect(this.getPreselectedEntry() ?? this.entries[0]) + /** + * Loads the content url of the selected file + * @returns {Promise} + */ + async loadSelectedFile() { + if (this.selectedFile) { + this.fileContentUrl = this.fileService.buildContentUrl( + this.selectedFile.data) + } } - } - - public async ngOnChanges(changes: SimpleChanges): Promise { - if (changes["files"]) { - this.entries = this.files.map( - f => new Selectable(f, f.hash == this.selectedFile?.data.hash)); - const selectedIndex = this.files.findIndex( - f => f.hash === this.selectedFile?.data.hash); - - if (!this.selectedFile || selectedIndex < 0) { - await this.onEntrySelect(this.getPreselectedEntry() ?? this.entries[0]) - } else { - await this.onEntrySelect(this.entries[selectedIndex]) - } + + async ngOnInit(): Promise { + if (!this.selectedFile || this.files.indexOf( + this.selectedFile.data) < 0) { + await this.onEntrySelect( + this.getPreselectedEntry() ?? this.entries[0]) + } } - } - - /** - * Selects the previous item in the gallery - * @returns {Promise} - */ - public async nextItem() { - if (this.selectedFile) { - let index = this.entries.indexOf(this.selectedFile) + 1; - if (index == this.entries.length) { - index--; // restrict to elements - } - await this.onEntrySelect(this.entries[index]); - } else { - await this.onEntrySelect(this.entries[0]) + + public async ngOnChanges(changes: SimpleChanges): Promise { + if (changes["files"]) { + this.entries = this.files.map( + f => new Selectable(f, f.hash == this.selectedFile?.data.hash)); + const selectedIndex = this.files.findIndex( + f => f.hash === this.selectedFile?.data.hash); + + if (!this.selectedFile || selectedIndex < 0) { + await this.onEntrySelect( + this.getPreselectedEntry() ?? this.entries[0]) + } else { + await this.onEntrySelect(this.entries[selectedIndex]) + } + } } - } - - /** - * Selects the next item in the gallery - * @returns {Promise} - */ - public async previousItem() { - if (this.selectedFile) { - let index = this.entries.indexOf(this.selectedFile) - 1; - if (index < 0) { - index++; // restrict to elements - } - await this.onEntrySelect(this.entries[index]); - } else { - await this.onEntrySelect(this.entries[0]) + + /** + * Selects the previous item in the gallery + * @returns {Promise} + */ + public async nextItem() { + if (this.selectedFile) { + let index = this.entries.indexOf(this.selectedFile) + 1; + if (index == this.entries.length) { + index--; // restrict to elements + } + await this.onEntrySelect(this.entries[index]); + } else { + await this.onEntrySelect(this.entries[0]) + } + } + + /** + * Selects the next item in the gallery + * @returns {Promise} + */ + public async previousItem() { + if (this.selectedFile) { + let index = this.entries.indexOf(this.selectedFile) - 1; + if (index < 0) { + index++; // restrict to elements + } + await this.onEntrySelect(this.entries[index]); + } else { + await this.onEntrySelect(this.entries[0]) + } } - } - public adjustElementSizes(): void { - if (this.virtualScroll) { - this.virtualScroll.checkViewportSize(); - this.scrollToSelection(); + public adjustElementSizes(): void { + if (this.virtualScroll) { + this.virtualScroll.checkViewportSize(); + this.scrollToSelection(); + } } - } - - private scrollToSelection(): void { - if (this.selectedFile) { - const selectedIndex = this.entries.indexOf(this.selectedFile); - const viewportSize = this.virtualScroll.getViewportSize(); - const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered - this.virtualScroll.scrollToIndex( - Math.max(selectedIndex - indexAdjustment, 0), "smooth"); - - if (selectedIndex > indexAdjustment) { - this.virtualScroll.scrollToOffset( - this.virtualScroll.measureScrollOffset("left") + 130, "smooth"); - } + + private scrollToSelection(): void { + if (this.selectedFile) { + const selectedIndex = this.entries.indexOf(this.selectedFile); + const viewportSize = this.virtualScroll.getViewportSize(); + const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered + this.virtualScroll.scrollToIndex( + Math.max(selectedIndex - indexAdjustment, 0), "smooth"); + + if (selectedIndex > indexAdjustment) { + this.virtualScroll.scrollToOffset( + this.virtualScroll.measureScrollOffset("left") + 130, + "smooth"); + } + } } - } - - @HostListener("window:keydown", ["$event"]) - private async handleKeydownEvent(event: KeyboardEvent) { - switch (event.key) { - case "ArrowRight": - await this.nextItem(); - break; - case "ArrowLeft": - await this.previousItem(); - break; + + @HostListener("window:keydown", ["$event"]) + private async handleKeydownEvent(event: KeyboardEvent) { + switch (event.key) { + case "ArrowRight": + await this.nextItem(); + break; + case "ArrowLeft": + await this.previousItem(); + break; + } } - } - - private getPreselectedEntry(): Selectable | undefined { - if (this.preselectedFile) { - const entry = this.entries.find( - e => e.data.id === this.preselectedFile?.id); - if (entry) { - return entry; - } + + private getPreselectedEntry(): Selectable | undefined { + if (this.preselectedFile) { + const entry = this.entries.find( + e => e.data.id === this.preselectedFile?.id); + if (entry) { + return entry; + } + } + return undefined; } - return undefined; - } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/GridEntry.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/GridEntry.ts index 6c45777..c2efa5d 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/GridEntry.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/GridEntry.ts @@ -1,6 +1,6 @@ import {File} from "../../../../../models/File"; export type GridEntry = { - file: File, - selected: boolean, + file: File, + selected: boolean, } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme.scss index 2e520d7..31cbb09 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme.scss @@ -2,25 +2,25 @@ @use '../../../../../../../node_modules/@angular/material/index' as mat; @mixin color($theme) { - $color-config: mat.get-color-config($theme); - $primary-palette: map.get($color-config, 'primary'); + $color-config: mat.get-color-config($theme); + $primary-palette: map.get($color-config, 'primary'); - mat-card.selected { - background-color: mat.get-color-from-palette($primary-palette, 'darker'); - } + mat-card.selected { + background-color: mat.get-color-from-palette($primary-palette, 'darker'); + } } @mixin typography($theme) { } @mixin theme($theme) { - $color-config: mat.get-color-config($theme); - @if $color-config != null { - @include color($theme); - } + $color-config: mat.get-color-config($theme); + @if $color-config != null { + @include color($theme); + } - $typography-config: mat.get-typography-config($theme); - @if $typography-config != null { - @include typography($theme); - } + $typography-config: mat.get-typography-config($theme); + @if $typography-config != null { + @include typography($theme); + } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.html index 042ae95..89a2aa4 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.html @@ -1,6 +1,6 @@ - - - + + + diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.scss index 55469d6..e4e9a67 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.scss @@ -1,16 +1,16 @@ mat-card { - height: calc(100% - 32px); - width: calc(100% - 32px); - user-select: none; - cursor: pointer; + height: calc(100% - 32px); + width: calc(100% - 32px); + user-select: none; + cursor: pointer; } mat-card-content { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } .entry-image { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.spec.ts index aaa7685..47abb34 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileGridEntryComponent} from './file-grid-entry.component'; +import {FileGridEntryComponent} from "./file-grid-entry.component"; -describe('FileGridEntryComponent', () => { - let component: FileGridEntryComponent; - let fixture: ComponentFixture; +describe("FileGridEntryComponent", () => { + let component: FileGridEntryComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileGridEntryComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileGridEntryComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileGridEntryComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileGridEntryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.ts index 2c7ee3d..8dcb26a 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.ts @@ -1,57 +1,56 @@ import { - Component, - ElementRef, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges, - ViewChild -} from '@angular/core'; + Component, + ElementRef, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, + ViewChild +} from "@angular/core"; import {File} from "../../../../../models/File"; import {FileService} from "../../../../../services/file/file.service"; -import {ErrorBrokerService} from "../../../../../services/error-broker/error-broker.service"; import {SafeResourceUrl} from "@angular/platform-browser"; import {GridEntry} from "./GridEntry"; @Component({ - selector: 'app-file-grid-entry', - templateUrl: './file-grid-entry.component.html', - styleUrls: ['./file-grid-entry.component.scss'] + selector: "app-file-grid-entry", + templateUrl: "./file-grid-entry.component.html", + styleUrls: ["./file-grid-entry.component.scss"] }) export class FileGridEntryComponent implements OnInit, OnChanges { - @ViewChild("card") card!: ElementRef; - @Input() public gridEntry!: GridEntry; - @Output() clickEvent = new EventEmitter(); - @Output() dblClickEvent = new EventEmitter(); + @ViewChild("card") card!: ElementRef; + @Input() public gridEntry!: GridEntry; + @Output() clickEvent = new EventEmitter(); + @Output() dblClickEvent = new EventEmitter(); - contentUrl: SafeResourceUrl | undefined; - private cachedFile: File | undefined; - private urlSetTimeout: number | undefined; + contentUrl: SafeResourceUrl | undefined; + private cachedFile: File | undefined; + private urlSetTimeout: number | undefined; - constructor(private fileService: FileService) { - } + constructor(private fileService: FileService) { + } - async ngOnInit() { - this.cachedFile = this.gridEntry.file; - this.setImageDelayed(); - } + async ngOnInit() { + this.cachedFile = this.gridEntry.file; + this.setImageDelayed(); + } - async ngOnChanges(changes: SimpleChanges) { - if (changes["file"] && (!this.cachedFile || this.gridEntry.file.hash !== this.cachedFile.hash)) { - this.cachedFile = this.gridEntry.file; - this.setImageDelayed(); + async ngOnChanges(changes: SimpleChanges) { + if (changes["file"] && (!this.cachedFile || this.gridEntry.file.hash !== this.cachedFile.hash)) { + this.cachedFile = this.gridEntry.file; + this.setImageDelayed(); + } } - } - private setImageDelayed() { - this.contentUrl = undefined; - clearTimeout(this.urlSetTimeout); - this.urlSetTimeout = setTimeout( - () => this.contentUrl = this.fileService.buildThumbnailUrl( - this.gridEntry.file, - 250, 250), 200); - } + private setImageDelayed() { + this.contentUrl = undefined; + clearTimeout(this.urlSetTimeout); + this.urlSetTimeout = setTimeout( + () => this.contentUrl = this.fileService.buildThumbnailUrl( + this.gridEntry.file, + 250, 250), 200); + } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.html index 5acaf44..81fe5d1 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.html @@ -1,18 +1,19 @@
- -
-
- -
-
- + +
+
+ +
+
+
- + diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.scss index 27a3cd5..abc4365 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.scss @@ -1,23 +1,23 @@ app-file-grid-entry { - height: 250px; - width: 100%; - padding: 5px; + height: 250px; + width: 100%; + padding: 5px; } .file-scroll { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } .file-gallery-inner { - width: 100%; - height: 100%; - display: block; - overflow: hidden; + width: 100%; + height: 100%; + display: block; + overflow: hidden; } .file-row { - display: flex; - flex-direction: row; - width: 100%; + display: flex; + flex-direction: row; + width: 100%; } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.spec.ts index 6455c78..c201510 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileGridComponent} from './file-grid.component'; +import {FileGridComponent} from "./file-grid.component"; -describe('FileGridComponent', () => { - let component: FileGridComponent; - let fixture: ComponentFixture; +describe("FileGridComponent", () => { + let component: FileGridComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileGridComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileGridComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileGridComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileGridComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.ts index ba3fe12..ffbd050 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-grid/file-grid.component.ts @@ -1,15 +1,15 @@ import { - Component, - ElementRef, - EventEmitter, - HostListener, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges, - ViewChild -} from '@angular/core'; + Component, + ElementRef, + EventEmitter, + HostListener, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, + ViewChild +} from "@angular/core"; import {File} from "../../../../models/File"; import {FileGridEntryComponent} from "./file-grid-entry/file-grid-entry.component"; import {GridEntry} from "./file-grid-entry/GridEntry"; @@ -18,172 +18,172 @@ import {TabService} from "../../../../services/tab/tab.service"; import {FileService} from "../../../../services/file/file.service"; @Component({ - selector: 'app-file-grid', - templateUrl: './file-grid.component.html', - styleUrls: ['./file-grid.component.scss'] + selector: "app-file-grid", + templateUrl: "./file-grid.component.html", + styleUrls: ["./file-grid.component.scss"] }) export class FileGridComponent implements OnChanges, OnInit { - @Input() files: File[] = []; - @Input() columns: number = 6; - @Input() preselectedFile: File | undefined; - @Output() fileOpenEvent = new EventEmitter(); - @Output() fileSelectEvent = new EventEmitter(); - - @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport; - @ViewChild("galleryWrapper") galleryWrapper!: ElementRef; - - selectedEntries: GridEntry[] = []; - partitionedGridEntries: GridEntry[][] = []; - private shiftClicked = false; - private ctrlClicked = false; - private gridEntries: GridEntry[] = [] - - constructor( - private tabService: TabService, - private fileService: FileService, - ) { - tabService.selectedTab.subscribe(() => this.adjustElementSizes()); - } - - public ngOnInit(): void { - this.gridEntries = this.files.map(file => { - return {file, selected: false} - }); - this.setPartitionedGridEntries(); - } - - ngOnChanges(changes: SimpleChanges): void { - if (changes["files"]) { - this.gridEntries = this.files.map(file => { - return {file, selected: false} - }); - this.refreshFileSelections(); - this.setPartitionedGridEntries(); + @Input() files: File[] = []; + @Input() columns: number = 6; + @Input() preselectedFile: File | undefined; + @Output() fileOpenEvent = new EventEmitter(); + @Output() fileSelectEvent = new EventEmitter(); + + @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport; + @ViewChild("galleryWrapper") galleryWrapper!: ElementRef; + + selectedEntries: GridEntry[] = []; + partitionedGridEntries: GridEntry[][] = []; + private shiftClicked = false; + private ctrlClicked = false; + private gridEntries: GridEntry[] = [] + + constructor( + private tabService: TabService, + private fileService: FileService, + ) { + tabService.selectedTab.subscribe(() => this.adjustElementSizes()); } - } - - /** - * File selector logic - * @param {FileGridEntryComponent} clickedEntry - */ - setSelectedFile(clickedEntry: GridEntry) { - if (!(this.shiftClicked || this.ctrlClicked) && this.selectedEntries.length > 0) { - this.selectedEntries.forEach(entry => { - if (entry !== clickedEntry) entry.selected = false - }); - this.selectedEntries = []; + + public ngOnInit(): void { + this.gridEntries = this.files.map(file => { + return {file, selected: false} + }); + this.setPartitionedGridEntries(); } - if (this.shiftClicked && this.selectedEntries.length > 0) { - this.handleShiftSelect(clickedEntry); - } else { - clickedEntry.selected = !clickedEntry.selected; - if (!clickedEntry.selected) { - const index = this.selectedEntries.indexOf(clickedEntry); - if (index > -1) { - this.selectedEntries.splice(index, 1); + + ngOnChanges(changes: SimpleChanges): void { + if (changes["files"]) { + this.gridEntries = this.files.map(file => { + return {file, selected: false} + }); + this.refreshFileSelections(); + this.setPartitionedGridEntries(); } - } else { - this.selectedEntries.push(clickedEntry); - } } - this.fileSelectEvent.emit(this.selectedEntries.map(g => g.file)); - } - public adjustElementSizes(): void { - if (this.virtualScroll) { - this.virtualScroll.checkViewportSize(); - } - } - - public async regenerateThumbnail(file: File) { - await this.fileService.deleteThumbnails(file); - } - - private setPartitionedGridEntries() { - this.partitionedGridEntries = []; - let scrollToIndex = -1; - let selectedEntry: GridEntry | undefined = undefined; - - for (let i = 0; i < (Math.ceil( - this.gridEntries.length / this.columns)); i++) { - const entries = this.gridEntries.slice(i * this.columns, - Math.min(this.gridEntries.length, (i + 1) * this.columns)); - this.partitionedGridEntries.push(entries); - const preselectedEntry = entries.find( - e => e.file.hash == this.preselectedFile?.hash); - - if (preselectedEntry) { - scrollToIndex = i; - selectedEntry = preselectedEntry; - } + /** + * File selector logic + * @param {FileGridEntryComponent} clickedEntry + */ + setSelectedFile(clickedEntry: GridEntry) { + if (!(this.shiftClicked || this.ctrlClicked) && this.selectedEntries.length > 0) { + this.selectedEntries.forEach(entry => { + if (entry !== clickedEntry) entry.selected = false + }); + this.selectedEntries = []; + } + if (this.shiftClicked && this.selectedEntries.length > 0) { + this.handleShiftSelect(clickedEntry); + } else { + clickedEntry.selected = !clickedEntry.selected; + if (!clickedEntry.selected) { + const index = this.selectedEntries.indexOf(clickedEntry); + if (index > -1) { + this.selectedEntries.splice(index, 1); + } + } else { + this.selectedEntries.push(clickedEntry); + } + } + this.fileSelectEvent.emit(this.selectedEntries.map(g => g.file)); } - if (scrollToIndex >= 0 && this.preselectedFile && this.selectedEntries.length == 0) { - setTimeout(() => { // add timeout to avoid being stuck in the update loop + + public adjustElementSizes(): void { if (this.virtualScroll) { - this.virtualScroll?.scrollToIndex(scrollToIndex); - if (selectedEntry) { - selectedEntry.selected = true; - this.selectedEntries.push(selectedEntry); - } + this.virtualScroll.checkViewportSize(); + } + } + + public async regenerateThumbnail(file: File) { + await this.fileService.deleteThumbnails(file); + } + + private setPartitionedGridEntries() { + this.partitionedGridEntries = []; + let scrollToIndex = -1; + let selectedEntry: GridEntry | undefined = undefined; + + for (let i = 0; i < (Math.ceil( + this.gridEntries.length / this.columns)); i++) { + const entries = this.gridEntries.slice(i * this.columns, + Math.min(this.gridEntries.length, (i + 1) * this.columns)); + this.partitionedGridEntries.push(entries); + const preselectedEntry = entries.find( + e => e.file.hash == this.preselectedFile?.hash); + + if (preselectedEntry) { + scrollToIndex = i; + selectedEntry = preselectedEntry; + } + } + if (scrollToIndex >= 0 && this.preselectedFile && this.selectedEntries.length == 0) { + setTimeout(() => { // add timeout to avoid being stuck in the update loop + if (this.virtualScroll) { + this.virtualScroll?.scrollToIndex(scrollToIndex); + if (selectedEntry) { + selectedEntry.selected = true; + this.selectedEntries.push(selectedEntry); + } + } + }, 0); } - }, 0); } - } - - private refreshFileSelections() { - const newSelection: GridEntry[] = this.gridEntries.filter( - entry => this.selectedEntries.findIndex( - e => e.file.id == entry.file.id) >= 0); - newSelection.forEach(entry => entry.selected = true); - this.selectedEntries = newSelection; - } - - private handleShiftSelect(clickedEntry: GridEntry): void { - const lastEntry = this.selectedEntries[this.selectedEntries.length - 1]; - let found = false; - if (clickedEntry == lastEntry) { - return; + + private refreshFileSelections() { + const newSelection: GridEntry[] = this.gridEntries.filter( + entry => this.selectedEntries.findIndex( + e => e.file.id == entry.file.id) >= 0); + newSelection.forEach(entry => entry.selected = true); + this.selectedEntries = newSelection; } - for (const gridEntry of this.gridEntries) { - if (found) { - gridEntry.selected = true; - this.selectedEntries.push(gridEntry); - if (gridEntry === clickedEntry || gridEntry == lastEntry) { - return; + private handleShiftSelect(clickedEntry: GridEntry): void { + const lastEntry = this.selectedEntries[this.selectedEntries.length - 1]; + let found = false; + if (clickedEntry == lastEntry) { + return; } - } else if (gridEntry === lastEntry || gridEntry === clickedEntry) { - found = true; - if (gridEntry === clickedEntry) { - gridEntry.selected = true; - this.selectedEntries.push(gridEntry); + + for (const gridEntry of this.gridEntries) { + if (found) { + gridEntry.selected = true; + this.selectedEntries.push(gridEntry); + if (gridEntry === clickedEntry || gridEntry == lastEntry) { + return; + } + } else if (gridEntry === lastEntry || gridEntry === clickedEntry) { + found = true; + if (gridEntry === clickedEntry) { + gridEntry.selected = true; + this.selectedEntries.push(gridEntry); + } + } } - } } - } - - @HostListener("window:keydown", ["$event"]) - private handleKeydownEvent(event: KeyboardEvent) { - switch (event.key) { - case "Shift": - this.shiftClicked = true; - break; - case "Control": - this.ctrlClicked = true; - break; + + @HostListener("window:keydown", ["$event"]) + private handleKeydownEvent(event: KeyboardEvent) { + switch (event.key) { + case "Shift": + this.shiftClicked = true; + break; + case "Control": + this.ctrlClicked = true; + break; + } } - } - - @HostListener("window:keyup", ["$event"]) - private handleKeyupEvent(event: KeyboardEvent) { - switch (event.key) { - case "Shift": - this.shiftClicked = false; - break; - case "Control": - this.ctrlClicked = false; - break; + + @HostListener("window:keyup", ["$event"]) + private handleKeyupEvent(event: KeyboardEvent) { + switch (event.key) { + case "Shift": + this.shiftClicked = false; + break; + case "Control": + this.ctrlClicked = false; + break; + } } - } } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.html b/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.html index 4102256..d1218c3 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.html +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.html @@ -1,5 +1,7 @@ - - diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.scss b/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.scss index 9fb7bee..0c77f13 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.scss @@ -1,4 +1,4 @@ app-file-gallery, app-file-grid { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.spec.ts index 265dc4a..f75958e 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileMultiviewComponent} from './file-multiview.component'; +import {FileMultiviewComponent} from "./file-multiview.component"; -describe('FileMultiviewComponent', () => { - let component: FileMultiviewComponent; - let fixture: ComponentFixture; +describe("FileMultiviewComponent", () => { + let component: FileMultiviewComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileMultiviewComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileMultiviewComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileMultiviewComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileMultiviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.ts b/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.ts index 2eae374..580b7bd 100644 --- a/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-multiview/file-multiview.component.ts @@ -1,44 +1,44 @@ -import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {Component, EventEmitter, Input, Output} from "@angular/core"; import {File} from "../../../models/File"; @Component({ - selector: 'app-file-multiview', - templateUrl: './file-multiview.component.html', - styleUrls: ['./file-multiview.component.scss'] + selector: "app-file-multiview", + templateUrl: "./file-multiview.component.html", + styleUrls: ["./file-multiview.component.scss"] }) export class FileMultiviewComponent { - @Input() files!: File[]; - @Input() mode: "grid" | "gallery" = "grid"; + @Input() files!: File[]; + @Input() mode: "grid" | "gallery" = "grid"; - @Output() fileOpenEvent = new EventEmitter(); - @Output() fileSelectEvent = new EventEmitter(); + @Output() fileOpenEvent = new EventEmitter(); + @Output() fileSelectEvent = new EventEmitter(); - public selectedFiles: File[] = []; - public preselectedFile: File | undefined; + public selectedFiles: File[] = []; + public preselectedFile: File | undefined; - constructor() { - } + constructor() { + } + + public onFileSelect(files: File[]): void { + this.selectedFiles = files; + this.preselectedFile = files[0]; + this.fileSelectEvent.emit(this.selectedFiles); + } - public onFileSelect(files: File[]): void { - this.selectedFiles = files; - this.preselectedFile = files[0]; - this.fileSelectEvent.emit(this.selectedFiles); - } + public onSinglefileSelect(file: File | undefined): void { + if (file) { + this.selectedFiles = [file]; + this.preselectedFile = file; + } else { + this.selectedFiles = []; + } + this.fileSelectEvent.emit(this.selectedFiles); + } - public onSinglefileSelect(file: File | undefined): void { - if (file) { - this.selectedFiles = [file]; - this.preselectedFile = file; - } else { - this.selectedFiles = []; + public onFileOpen(file: File): void { + this.preselectedFile = file; + this.mode = "gallery"; + this.fileOpenEvent.emit(file); } - this.fileSelectEvent.emit(this.selectedFiles); - } - - public onFileOpen(file: File): void { - this.preselectedFile = file; - this.mode = "gallery"; - this.fileOpenEvent.emit(file); - } } diff --git a/mediarepo-ui/src/app/components/shared/file-search/file-search.component-theme.scss b/mediarepo-ui/src/app/components/shared/file-search/file-search.component-theme.scss index 2dc0374..2bddab0 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/file-search.component-theme.scss +++ b/mediarepo-ui/src/app/components/shared/file-search/file-search.component-theme.scss @@ -2,35 +2,35 @@ @use '../../../../../node_modules/@angular/material/index' as mat; @mixin color($theme) { - $color-config: mat.get-color-config($theme); - $primary-palette: map.get($color-config, 'primary'); - $warn-palette: map.get($color-config, 'warn'); + $color-config: mat.get-color-config($theme); + $primary-palette: map.get($color-config, 'primary'); + $warn-palette: map.get($color-config, 'warn'); - .tag-input-item { - background-color: dimgrey; - border-radius: 1em; - } + .tag-input-item { + background-color: dimgrey; + border-radius: 1em; + } - mat-form-field:focus { - background-color: dimgrey; - } + mat-form-field:focus { + background-color: dimgrey; + } - #sort-button { - background-color: darken(dimgrey, 5); - } + #sort-button { + background-color: darken(dimgrey, 5); + } } @mixin typography($theme) { } @mixin theme($theme) { - $color-config: mat.get-color-config($theme); - @if $color-config != null { - @include color($theme); - } + $color-config: mat.get-color-config($theme); + @if $color-config != null { + @include color($theme); + } - $typography-config: mat.get-typography-config($theme); - @if $typography-config != null { - @include typography($theme); - } + $typography-config: mat.get-typography-config($theme); + @if $typography-config != null { + @include typography($theme); + } } diff --git a/mediarepo-ui/src/app/components/shared/file-search/file-search.component.html b/mediarepo-ui/src/app/components/shared/file-search/file-search.component.html index eb55325..e2f8784 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/file-search.component.html +++ b/mediarepo-ui/src/app/components/shared/file-search/file-search.component.html @@ -1,18 +1,19 @@
-
-
-
{{filter.getDisplayName()}}
+
+
+
{{filter.getDisplayName()}}
+
-
- +
- - + diff --git a/mediarepo-ui/src/app/components/shared/file-search/file-search.component.scss b/mediarepo-ui/src/app/components/shared/file-search/file-search.component.scss index f0f4d6f..6b62161 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/file-search.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-search/file-search.component.scss @@ -1,62 +1,62 @@ .full-width { - min-width: 100%; - width: auto; + min-width: 100%; + width: auto; } .tag-input-list { - height: 2.7em; - padding: 0.5em 0; - width: calc(100% - 64px); - overflow-x: auto; - overflow-y: hidden; - box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.05) inset; + height: 2.7em; + padding: 0.5em 0; + width: calc(100% - 64px); + overflow-x: auto; + overflow-y: hidden; + box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.05) inset; } .tag-input-list-and-actions { - display: block; - height: calc(3em + 10px); - width: 100%; - position: relative; + display: block; + height: calc(3em + 10px); + width: 100%; + position: relative; } #delete-all-tags-button { - font-size: 0.5em; - width: 64px; - height: 100%; - padding: 0; - position: absolute; - right: 0; - top: 0; + font-size: 0.5em; + width: 64px; + height: 100%; + padding: 0; + position: absolute; + right: 0; + top: 0; } #sort-button { - width: 100%; + width: 100%; } ::ng-deep #sort-button { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .tag-input-list-inner { - display: inline-flex; - flex-direction: row; - flex-wrap: nowrap; - width: auto; - height: 2.2em; + display: inline-flex; + flex-direction: row; + flex-wrap: nowrap; + width: auto; + height: 2.2em; } .tag-input-item { - width: auto; - padding: 0.5em; - margin: 0 0.5em; - cursor: pointer; - white-space: nowrap; + width: auto; + padding: 0.5em; + margin: 0 0.5em; + cursor: pointer; + white-space: nowrap; } .filter-dialog-button { - position: absolute; - right: -13px; - top: -17px; + position: absolute; + right: -13px; + top: -17px; } diff --git a/mediarepo-ui/src/app/components/shared/file-search/file-search.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-search/file-search.component.spec.ts index ec353b8..82d5507 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/file-search.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-search/file-search.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileSearchComponent} from './file-search.component'; +import {FileSearchComponent} from "./file-search.component"; -describe('FileSearchComponent', () => { - let component: FileSearchComponent; - let fixture: ComponentFixture; +describe("FileSearchComponent", () => { + let component: FileSearchComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileSearchComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileSearchComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileSearchComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileSearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/shared/file-search/file-search.component.ts index a657ce5..06a6fbb 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/file-search.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-search/file-search.component.ts @@ -1,13 +1,13 @@ import { - AfterViewChecked, - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, - ViewChild -} from '@angular/core'; + AfterViewChecked, + Component, + ElementRef, + EventEmitter, + Input, + OnInit, + Output, + ViewChild +} from "@angular/core"; import {FileService} from "../../../services/file/file.service"; import {TagQuery} from "../../../models/TagQuery"; import {SortKey} from "../../../models/SortKey"; @@ -15,118 +15,119 @@ import {MatDialog} from "@angular/material/dialog"; import {SortDialogComponent} from "./sort-dialog/sort-dialog.component"; import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; import { - FilterExpression, - SingleFilterExpression + FilterExpression, + SingleFilterExpression } from "../../../models/FilterExpression"; import {FilterDialogComponent} from "./filter-dialog/filter-dialog.component"; import {Tag} from "../../../models/Tag"; @Component({ - selector: 'app-file-search', - templateUrl: './file-search.component.html', - styleUrls: ['./file-search.component.scss'] + selector: "app-file-search", + templateUrl: "./file-search.component.html", + styleUrls: ["./file-search.component.scss"] }) export class FileSearchComponent implements AfterViewChecked, OnInit { - public sortExpression: SortKey[] = [new SortKey("FileImportedTime", - "Ascending", undefined)]; - public filters: FilterExpression[] = []; + public sortExpression: SortKey[] = [new SortKey("FileImportedTime", + "Ascending", undefined)]; + public filters: FilterExpression[] = []; - @Input() availableTags: Tag[] = []; - @Output() searchStartEvent = new EventEmitter(); - @Output() searchEndEvent = new EventEmitter(); + @Input() availableTags: Tag[] = []; + @Output() searchStartEvent = new EventEmitter(); + @Output() searchEndEvent = new EventEmitter(); - @ViewChild("tagInput") tagInput!: ElementRef; - @ViewChild("tagInputList") inputList!: ElementRef; + @ViewChild("tagInput") tagInput!: ElementRef; + @ViewChild("tagInputList") inputList!: ElementRef; - constructor( - private errorBroker: ErrorBrokerService, - private fileService: FileService, - public dialog: MatDialog - ) { - } - - public async ngOnInit() { - await this.searchForFiles(); - } - - public ngAfterViewChecked(): void { - this.inputList.nativeElement.scrollLeft = this.inputList.nativeElement.scrollWidth; - } + constructor( + private errorBroker: ErrorBrokerService, + private fileService: FileService, + public dialog: MatDialog + ) { + } - public async searchForFiles() { - this.searchStartEvent.emit(); - try { - await this.fileService.findFiles(this.filters, this.sortExpression); - } catch (err) { - this.errorBroker.showError(err); + public async ngOnInit() { + await this.searchForFiles(); } - this.searchEndEvent.emit(); - } - public addSearchTag(tag: string) { - this.filters.push(new SingleFilterExpression(TagQuery.fromString(tag))); - tag = tag.replace(/^-/g, ''); + public ngAfterViewChecked(): void { + this.inputList.nativeElement.scrollLeft = this.inputList.nativeElement.scrollWidth; + } - if (this.filters.filter(t => t.partiallyEq(tag)).length > 1) { - const index = this.filters.findIndex(t => t.partiallyEq(tag)); - this.filters.splice(index, 1); + public async searchForFiles() { + this.searchStartEvent.emit(); + try { + await this.fileService.findFiles(this.filters, this.sortExpression); + } catch (err) { + this.errorBroker.showError(err); + } + this.searchEndEvent.emit(); } - } - public getValidSearchTags(): Tag[] { - return this.availableTags.filter(t => this.filters.findIndex( - f => f.partiallyEq(t.getNormalizedOutput())) < 0); - } + public addSearchTag(tag: string) { + this.filters.push(new SingleFilterExpression(TagQuery.fromString(tag))); + tag = tag.replace(/^-/g, ""); - public async removeAllSearchTags() { - this.filters = []; - await this.searchForFiles(); - } + if (this.filters.filter(t => t.partiallyEq(tag)).length > 1) { + const index = this.filters.findIndex(t => t.partiallyEq(tag)); + this.filters.splice(index, 1); + } + } - public async removeFilterExpression(expr: FilterExpression) { - const index = this.filters.indexOf(expr); - if (index >= 0) { - this.filters.splice(index, 1); + public getValidSearchTags(): Tag[] { + return this.availableTags.filter(t => this.filters.findIndex( + f => f.partiallyEq(t.getNormalizedOutput())) < 0); } - await this.searchForFiles(); - } - public openSortDialog() { - const sortEntries = this.sortExpression.map( - key => JSON.parse(JSON.stringify(key))).map( - key => new SortKey(key.sortType, key.sortDirection, key.namespaceName)) - const openedDialog = this.dialog.open(SortDialogComponent, { - minWidth: "40vw", - data: { - sortEntries, - }, - disableClose: true, - }); - openedDialog.afterClosed().subscribe(async (sortExpression) => { - if (sortExpression) { - this.sortExpression = sortExpression; + public async removeAllSearchTags() { + this.filters = []; await this.searchForFiles(); - } - }); - } + } - public openFilterDialog(): void { - const filterEntries = this.filters.map(f => f.clone()); - const filterDialog = this.dialog.open(FilterDialogComponent, { - minWidth: "25vw", - maxHeight: "80vh", - data: { - filterEntries, - availableTags: this.availableTags, - }, - disableClose: true, - }); - filterDialog.afterClosed().subscribe(async (filterExpression) => { - if (filterExpression !== undefined || filterExpression?.length > 0) { - this.filters = filterExpression; + public async removeFilterExpression(expr: FilterExpression) { + const index = this.filters.indexOf(expr); + if (index >= 0) { + this.filters.splice(index, 1); + } await this.searchForFiles(); - } - }); - } + } + + public openSortDialog() { + const sortEntries = this.sortExpression.map( + key => JSON.parse(JSON.stringify(key))).map( + key => new SortKey(key.sortType, key.sortDirection, + key.namespaceName)) + const openedDialog = this.dialog.open(SortDialogComponent, { + minWidth: "40vw", + data: { + sortEntries, + }, + disableClose: true, + }); + openedDialog.afterClosed().subscribe(async (sortExpression) => { + if (sortExpression) { + this.sortExpression = sortExpression; + await this.searchForFiles(); + } + }); + } + + public openFilterDialog(): void { + const filterEntries = this.filters.map(f => f.clone()); + const filterDialog = this.dialog.open(FilterDialogComponent, { + minWidth: "25vw", + maxHeight: "80vh", + data: { + filterEntries, + availableTags: this.availableTags, + }, + disableClose: true, + }); + filterDialog.afterClosed().subscribe(async (filterExpression) => { + if (filterExpression !== undefined || filterExpression?.length > 0) { + this.filters = filterExpression; + await this.searchForFiles(); + } + }); + } } diff --git a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.html b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.html index 858af0a..a936b76 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.html +++ b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.html @@ -1,26 +1,27 @@

Filters

-
- - - - - -
- - +
+ + + + + +
+ +
- - + +
- - - + + + diff --git a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.scss b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.scss index e5843d2..d7eb4f0 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.scss @@ -1,45 +1,45 @@ .dialog-actions { - display: flex; - flex-direction: row-reverse; - width: 100%; + display: flex; + flex-direction: row-reverse; + width: 100%; - button { - margin-left: 1em; - } + button { + margin-left: 1em; + } } .tag-input { - width: 100%; - height: 5em; + width: 100%; + height: 5em; } mat-list-item.filter-list-item { - height: 100%; - padding: 0.5em 0; - user-select: none; - cursor: pointer; + height: 100%; + padding: 0.5em 0; + user-select: none; + cursor: pointer; } app-tag-filter-list-item { - width: 100%; + width: 100%; } .selected { - background-color: #5c5c5c; + background-color: #5c5c5c; } .filter-dialog-content { - overflow: hidden; - width: 100%; - max-height: 60vh; + overflow: hidden; + width: 100%; + max-height: 60vh; } .filter-dialog-list { - max-height: calc(60vh - 5em); - overflow-y: auto; - width: 100%; + max-height: calc(60vh - 5em); + overflow-y: auto; + width: 100%; } mat-list.mat-filter-dialog-list { - padding: 0; + padding: 0; } diff --git a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.spec.ts index 11d7dfe..d3a1851 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FilterDialogComponent} from './filter-dialog.component'; +import {FilterDialogComponent} from "./filter-dialog.component"; -describe('FilterDialogComponent', () => { - let component: FilterDialogComponent; - let fixture: ComponentFixture; +describe("FilterDialogComponent", () => { + let component: FilterDialogComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FilterDialogComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FilterDialogComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FilterDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FilterDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.ts b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.ts index 86116b3..1355820 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/filter-dialog.component.ts @@ -1,10 +1,10 @@ -import {Component, HostListener, Inject, ViewChildren} from '@angular/core'; +import {Component, HostListener, Inject, ViewChildren} from "@angular/core"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {SortDialogComponent} from "../sort-dialog/sort-dialog.component"; import { - FilterExpression, - OrFilterExpression, - SingleFilterExpression + FilterExpression, + OrFilterExpression, + SingleFilterExpression } from "../../../../models/FilterExpression"; import {TagQuery} from "../../../../models/TagQuery"; import {Tag} from "../../../../models/Tag"; @@ -12,161 +12,164 @@ import {TagFilterListItemComponent} from "./tag-filter-list-item/tag-filter-list import {Selectable} from "../../../../models/Selectable"; @Component({ - selector: 'app-filter-dialog', - templateUrl: './filter-dialog.component.html', - styleUrls: ['./filter-dialog.component.scss'] + selector: "app-filter-dialog", + templateUrl: "./filter-dialog.component.html", + styleUrls: ["./filter-dialog.component.scss"] }) export class FilterDialogComponent { - public filters: Selectable[]; - public availableTags: Tag[] = []; - public mode: "AND" | "OR" = "AND"; + public filters: Selectable[]; + public availableTags: Tag[] = []; + public mode: "AND" | "OR" = "AND"; - @ViewChildren( - TagFilterListItemComponent) filterListItems!: TagFilterListItemComponent[]; + @ViewChildren( + TagFilterListItemComponent) filterListItems!: TagFilterListItemComponent[]; - private selectedQueries: TagQuery[] = []; + private selectedQueries: TagQuery[] = []; - constructor(public dialogRef: MatDialogRef, @Inject( - MAT_DIALOG_DATA) data: any) { - this.filters = data.filterEntries.map( - (f: FilterExpression) => new Selectable(f, - false)) ?? []; - this.availableTags = data.availableTags ?? []; - } + constructor(public dialogRef: MatDialogRef, @Inject( + MAT_DIALOG_DATA) data: any) { + this.filters = data.filterEntries.map( + (f: FilterExpression) => new Selectable(f, + false)) ?? []; + this.availableTags = data.availableTags ?? []; + } + + private static checkFiltersEqual(l: FilterExpression, r: FilterExpression): boolean { + const lTags = l.queryList().map(q => q.getNormalizedTag()).sort(); + const rTags = r.queryList().map(q => q.getNormalizedTag()).sort(); + let match = false; + + if (lTags.length == rTags.length) { + match = true; - private static checkFiltersEqual(l: FilterExpression, r: FilterExpression): boolean { - const lTags = l.queryList().map(q => q.getNormalizedTag()).sort(); - const rTags = r.queryList().map(q => q.getNormalizedTag()).sort(); - let match = false; + for (const tag of lTags) { + match = rTags.includes(tag); + if (!match) { + break; + } + } + } + return match; + } - if (lTags.length == rTags.length) { - match = true; + public cancelFilter(): void { + this.dialogRef.close(); + } + + public confirmFilter(): void { + this.dialogRef.close(this.filters.map(f => f.data)); + } + + public removeFilter(event: TagFilterListItemComponent): void { + const filter = event.expression; + const index = this.filters.findIndex(f => f === filter); + if (index >= 0) { + this.filters.splice(index, 1); + } + this.unselectAll(); + } - for (const tag of lTags) { - match = rTags.includes(tag); - if (!match) { - break; + public addFilter(tag: string) { + const query = TagQuery.fromString(tag); + + if (this.mode === "AND" || this.filters.length === 0) { + this.filters.push( + new Selectable( + new SingleFilterExpression(query), + false)); + tag = tag.replace(/^-/g, ""); + + if (this.filters.filter(t => t.data.partiallyEq(tag)).length > 1) { + const index = this.filters.findIndex( + t => t.data.partiallyEq(tag)); + this.filters.splice(index, 1); + } + } else { + let queryList = this.filters.pop()?.data.queryList() ?? []; + + queryList.push(query); + const filterExpression = new OrFilterExpression(queryList); + filterExpression.removeDuplicates(); + this.filters.push( + new Selectable(filterExpression, + false)); } - } + this.unselectAll(); } - return match; - } - - public cancelFilter(): void { - this.dialogRef.close(); - } - - public confirmFilter(): void { - this.dialogRef.close(this.filters.map(f => f.data)); - } - - public removeFilter(event: TagFilterListItemComponent): void { - const filter = event.expression; - const index = this.filters.findIndex(f => f === filter); - if (index >= 0) { - this.filters.splice(index, 1); + + public addToSelection(query: TagQuery): void { + this.selectedQueries.push(query); } - this.unselectAll(); - } - - public addFilter(tag: string) { - const query = TagQuery.fromString(tag); - - if (this.mode === "AND" || this.filters.length === 0) { - this.filters.push( - new Selectable(new SingleFilterExpression(query), - false)); - tag = tag.replace(/^-/g, ''); - - if (this.filters.filter(t => t.data.partiallyEq(tag)).length > 1) { - const index = this.filters.findIndex(t => t.data.partiallyEq(tag)); - this.filters.splice(index, 1); - } - } else { - let queryList = this.filters.pop()?.data.queryList() ?? []; - - queryList.push(query); - const filterExpression = new OrFilterExpression(queryList); - filterExpression.removeDuplicates(); - this.filters.push( - new Selectable(filterExpression, - false)); + + public removeFromSelection(query: TagQuery): void { + const index = this.selectedQueries.indexOf(query); + if (index > 0) { + this.selectedQueries.splice(index, 1); + } } - this.unselectAll(); - } - public addToSelection(query: TagQuery): void { - this.selectedQueries.push(query); - } + public unselectAll() { + this.filters.forEach(filter => filter.selected = false); + this.selectedQueries = []; + this.filterListItems.forEach(i => i.selectedIndices = []); + } - public removeFromSelection(query: TagQuery): void { - const index = this.selectedQueries.indexOf(query); - if (index > 0) { - this.selectedQueries.splice(index, 1); + public convertSelectionToAndExpression(): void { + for (const query of this.selectedQueries) { + this.filters.push( + new Selectable( + new SingleFilterExpression(query), + false)); + } + this.removeFilterDuplicates(); + this.unselectAll(); } - } - - public unselectAll() { - this.filters.forEach(filter => filter.selected = false); - this.selectedQueries = []; - this.filterListItems.forEach(i => i.selectedIndices = []); - } - - public convertSelectionToAndExpression(): void { - for (const query of this.selectedQueries) { - this.filters.push( - new Selectable(new SingleFilterExpression(query), - false)); + + public convertSelectionToOrExpression(): void { + const queries = this.selectedQueries; + const expression = new OrFilterExpression(queries); + this.filters.push(new Selectable(expression, false)); + this.removeFilterDuplicates(); + this.unselectAll(); } - this.removeFilterDuplicates(); - this.unselectAll(); - } - - public convertSelectionToOrExpression(): void { - const queries = this.selectedQueries; - const expression = new OrFilterExpression(queries); - this.filters.push(new Selectable(expression, false)); - this.removeFilterDuplicates(); - this.unselectAll(); - } - - public invertSelection(): void { - this.selectedQueries.forEach(query => query.negate = !query.negate); - } - - private removeFilterDuplicates() { - const filters = this.filters; - let newFilters: Selectable[] = []; - - for (const filterItem of filters) { - if (filterItem.data.filter_type == "OrExpression") { - (filterItem.data as OrFilterExpression).removeDuplicates(); - } - if (newFilters.findIndex( - f => FilterDialogComponent.checkFiltersEqual(f.data, - filterItem.data)) < 0) { - if (filterItem.data.filter_type == "OrExpression" && filterItem.data.queryList().length === 1) { - filterItem.data = new SingleFilterExpression( - filterItem.data.queryList()[0]); + + public invertSelection(): void { + this.selectedQueries.forEach(query => query.negate = !query.negate); + } + + private removeFilterDuplicates() { + const filters = this.filters; + let newFilters: Selectable[] = []; + + for (const filterItem of filters) { + if (filterItem.data.filter_type == "OrExpression") { + (filterItem.data as OrFilterExpression).removeDuplicates(); + } + if (newFilters.findIndex( + f => FilterDialogComponent.checkFiltersEqual(f.data, + filterItem.data)) < 0) { + if (filterItem.data.filter_type == "OrExpression" && filterItem.data.queryList().length === 1) { + filterItem.data = new SingleFilterExpression( + filterItem.data.queryList()[0]); + } + newFilters.push(filterItem); + } } - newFilters.push(filterItem); - } + this.filters = newFilters; } - this.filters = newFilters; - } - @HostListener("window:keydown", ["$event"]) - private async handleKeydownEvent(event: KeyboardEvent) { - if (event.key === "Shift") { - this.mode = "OR"; + @HostListener("window:keydown", ["$event"]) + private async handleKeydownEvent(event: KeyboardEvent) { + if (event.key === "Shift") { + this.mode = "OR"; + } } - } - @HostListener("window:keyup", ["$event"]) - private async handleKeyupEvent(event: KeyboardEvent) { - if (event.key === "Shift") { - this.mode = "AND"; + @HostListener("window:keyup", ["$event"]) + private async handleKeyupEvent(event: KeyboardEvent) { + if (event.key === "Shift") { + this.mode = "AND"; + } } - } } diff --git a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.html b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.html index 4d9376f..d87059f 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.html +++ b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.html @@ -1,20 +1,22 @@
- {{expression.data.getDisplayName()}} - + {{expression.data.getDisplayName()}} +
- - - OR - {{entry[1].getNormalizedTag()}} - - - + + + OR + {{entry[1].getNormalizedTag()}} + + +
diff --git a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.scss b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.scss index 37a6050..f2b3d66 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.scss @@ -1,41 +1,41 @@ .remove-button, .remove-button-inner-list { - position: absolute; - right: 0; - z-index: 999; - top: calc(0.5em - 15px); + position: absolute; + right: 0; + z-index: 999; + top: calc(0.5em - 15px); } .remove-button { - right: 16px; + right: 16px; } mat-list { - height: 100%; - width: 100%; - display: block; - background-color: #353535; - padding: 0; - border-radius: 0.25em; + height: 100%; + width: 100%; + display: block; + background-color: #353535; + padding: 0; + border-radius: 0.25em; } mat-list-item.or-filter-list-item { - padding: 0.5em 0; - height: 100%; - width: 100%; - border-collapse: collapse; - cursor: pointer; - user-select: none; + padding: 0.5em 0; + height: 100%; + width: 100%; + border-collapse: collapse; + cursor: pointer; + user-select: none; - ::ng-deep .mat-list-item-content { - padding-right: 0; - margin-right: 0; - } + ::ng-deep .mat-list-item-content { + padding-right: 0; + margin-right: 0; + } } .or-span { - margin-right: 0.5em; + margin-right: 0.5em; } .selected { - background-color: #5c5c5c; + background-color: #5c5c5c; } diff --git a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.spec.ts index 896388c..b6b65ef 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {TagFilterListItemComponent} from './tag-filter-list-item.component'; +import {TagFilterListItemComponent} from "./tag-filter-list-item.component"; -describe('TagFilterListItemComponent', () => { - let component: TagFilterListItemComponent; - let fixture: ComponentFixture; +describe("TagFilterListItemComponent", () => { + let component: TagFilterListItemComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [TagFilterListItemComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TagFilterListItemComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(TagFilterListItemComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(TagFilterListItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.ts b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.ts index 7954735..1b9934d 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.ts @@ -1,77 +1,77 @@ import { - ChangeDetectorRef, - Component, - EventEmitter, - Input, - OnChanges, - Output, - SimpleChanges -} from '@angular/core'; + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges +} from "@angular/core"; import { - FilterExpression, - OrFilterExpression, - SingleFilterExpression + FilterExpression, + OrFilterExpression, + SingleFilterExpression } from "../../../../../models/FilterExpression"; import {TagQuery} from "../../../../../models/TagQuery"; import {Selectable} from "../../../../../models/Selectable"; @Component({ - selector: 'app-tag-filter-list-item', - templateUrl: './tag-filter-list-item.component.html', - styleUrls: ['./tag-filter-list-item.component.scss'] + selector: "app-tag-filter-list-item", + templateUrl: "./tag-filter-list-item.component.html", + styleUrls: ["./tag-filter-list-item.component.scss"] }) export class TagFilterListItemComponent implements OnChanges { - @Input() expression!: Selectable; - @Output() removeClicked = new EventEmitter(); - @Output() querySelect = new EventEmitter(); - @Output() queryUnselect = new EventEmitter(); + @Input() expression!: Selectable; + @Output() removeClicked = new EventEmitter(); + @Output() querySelect = new EventEmitter(); + @Output() queryUnselect = new EventEmitter(); - public selectedIndices: number[] = []; + public selectedIndices: number[] = []; - constructor() { - } + constructor() { + } - public ngOnChanges(changes: SimpleChanges): void { - if (changes["expression"]) { - this.selectedIndices = []; + public ngOnChanges(changes: SimpleChanges): void { + if (changes["expression"]) { + this.selectedIndices = []; + } } - } - public enumerate(items: T[]): [number, T][] { - return items.map((value, index) => [index, value]); - } + public enumerate(items: T[]): [number, T][] { + return items.map((value, index) => [index, value]); + } - public removeOrExpression(index: number) { - const expression = this.expression.data as OrFilterExpression; - expression.removeQueryEntry(index); + public removeOrExpression(index: number) { + const expression = this.expression.data as OrFilterExpression; + expression.removeQueryEntry(index); - if (expression.filter.length == 0) { - this.removeClicked.emit(this); - } else if (expression.filter.length == 1) { - this.expression.data = new SingleFilterExpression(expression.filter[0]); + if (expression.filter.length == 0) { + this.removeClicked.emit(this); + } else if (expression.filter.length == 1) { + this.expression.data = new SingleFilterExpression( + expression.filter[0]); + } } - } - public selectInnerIndex(index: number): void { - const expression = this.expression.data as OrFilterExpression; + public selectInnerIndex(index: number): void { + const expression = this.expression.data as OrFilterExpression; - if (this.selectedIndices.includes(index)) { - const elementIndex = this.selectedIndices.indexOf(index); - this.selectedIndices.splice(elementIndex, 1); - this.queryUnselect.emit(expression.filter[index]); - } else { - this.selectedIndices.push(index); - this.querySelect.emit(expression.filter[index]); + if (this.selectedIndices.includes(index)) { + const elementIndex = this.selectedIndices.indexOf(index); + this.selectedIndices.splice(elementIndex, 1); + this.queryUnselect.emit(expression.filter[index]); + } else { + this.selectedIndices.push(index); + this.querySelect.emit(expression.filter[index]); + } } - } - public onSelect(): void { - this.expression.selected = !this.expression.selected; - if (this.expression.selected) { - this.querySelect.emit(this.expression.data.filter as TagQuery); - } else { - this.queryUnselect.emit(this.expression.data.filter as TagQuery); + public onSelect(): void { + this.expression.selected = !this.expression.selected; + if (this.expression.selected) { + this.querySelect.emit(this.expression.data.filter as TagQuery); + } else { + this.queryUnselect.emit(this.expression.data.filter as TagQuery); + } } - } } diff --git a/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.html b/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.html index 948e4ed..bbb1943 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.html +++ b/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.html @@ -1,49 +1,50 @@

Sort Entries

-
-
-
-
- -
- - Key - - Namespace - File Name - File Size - Time Imported - Time Created - Time Changed - File Type - Number of Tags - - - - Namespace Name - - -
- - Direction - - Ascending - Descending - - - - +
+
+
+
+ +
+ + Key + + Namespace + File Name + File Size + Time Imported + Time Created + Time Changed + File Type + Number of Tags + + + + Namespace Name + + +
+ + Direction + + Ascending + Descending + + + + +
-
- - + +
diff --git a/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.scss b/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.scss index 1e67df1..03a3540 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.scss @@ -1,59 +1,59 @@ mat-dialog-content { - height: 100%; + height: 100%; } .sort-input-list { - display: table; - width: 100%; + display: table; + width: 100%; } .sort-input-row { - display: table-row; - width: 100%; + display: table-row; + width: 100%; } mat-form-field, .filler, .drag-handle { - display: table-cell; - padding: 0 1em; + display: table-cell; + padding: 0 1em; } .dialog-actions { - display: flex; - flex-direction: row-reverse; - width: 100%; + display: flex; + flex-direction: row-reverse; + width: 100%; - button { - margin-left: 1em; - } + button { + margin-left: 1em; + } } .drag-handle { - cursor: grab; - height: 100%; - width: 2em; + cursor: grab; + height: 100%; + width: 2em; } .drag-handle:active { - cursor: grabbing; + cursor: grabbing; } ::ng-deep .cdk-drag-preview { - box-sizing: border-box; - border-radius: 4px; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12); - background: rgba(0, 0, 0, 0.5); + box-sizing: border-box; + border-radius: 4px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.5); } ::ng-deep .cdk-drag-animating { - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .drag-placeholder { - display: block; - height: 71px; - width: 100%; - background-color: darken(dimgrey, 20); - border-radius: 1em; + display: block; + height: 71px; + width: 100%; + background-color: darken(dimgrey, 20); + border-radius: 1em; } diff --git a/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.spec.ts index 21e4467..67ac8f6 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {SortDialogComponent} from './sort-dialog.component'; +import {SortDialogComponent} from "./sort-dialog.component"; -describe('FilterDialogComponent', () => { - let component: SortDialogComponent; - let fixture: ComponentFixture; +describe("FilterDialogComponent", () => { + let component: SortDialogComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [SortDialogComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SortDialogComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(SortDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(SortDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.ts b/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.ts index 30d3be0..fc8d48e 100644 --- a/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-search/sort-dialog/sort-dialog.component.ts @@ -1,41 +1,42 @@ -import {Component, Inject} from '@angular/core'; +import {Component, Inject} from "@angular/core"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {SortKey} from "../../../../models/SortKey"; import {CdkDragDrop, moveItemInArray} from "@angular/cdk/drag-drop"; @Component({ - selector: 'app-sort-dialog', - templateUrl: './sort-dialog.component.html', - styleUrls: ['./sort-dialog.component.scss'] + selector: "app-sort-dialog", + templateUrl: "./sort-dialog.component.html", + styleUrls: ["./sort-dialog.component.scss"] }) export class SortDialogComponent { - public sortEntries: SortKey[] = [] + public sortEntries: SortKey[] = [] - constructor(public dialogRef: MatDialogRef, @Inject( - MAT_DIALOG_DATA) data: any) { - this.sortEntries = data.sortEntries; - } + constructor(public dialogRef: MatDialogRef, @Inject( + MAT_DIALOG_DATA) data: any) { + this.sortEntries = data.sortEntries; + } - addNewSortKey() { - const sortKey = new SortKey("FileName", "Ascending", undefined); - this.sortEntries.push(sortKey) - } + addNewSortKey() { + const sortKey = new SortKey("FileName", "Ascending", undefined); + this.sortEntries.push(sortKey) + } - public removeSortKey(sortKey: SortKey): void { - const index = this.sortEntries.indexOf(sortKey); - this.sortEntries.splice(index, 1); - } + public removeSortKey(sortKey: SortKey): void { + const index = this.sortEntries.indexOf(sortKey); + this.sortEntries.splice(index, 1); + } - public confirmSort(): void { - this.dialogRef.close(this.sortEntries); - } + public confirmSort(): void { + this.dialogRef.close(this.sortEntries); + } - public cancelSort(): void { - this.dialogRef.close() - } + public cancelSort(): void { + this.dialogRef.close() + } - public onSortEntryDrop(event: CdkDragDrop): void { - moveItemInArray(this.sortEntries, event.previousIndex, event.currentIndex); - } + public onSortEntryDrop(event: CdkDragDrop): void { + moveItemInArray(this.sortEntries, event.previousIndex, + event.currentIndex); + } } diff --git a/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.html b/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.html index 0ab6e34..e238923 100644 --- a/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.html +++ b/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.html @@ -1,12 +1,12 @@
- - + +
- - - - + + + +
diff --git a/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.scss b/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.scss index 7d019cc..bb8b324 100644 --- a/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.scss +++ b/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.scss @@ -1,37 +1,37 @@ app-content-aware-image { - height: 100%; - width: 100%; + height: 100%; + width: 100%; } .file-type-icon { - background-color: #303030; + background-color: #303030; } .file-type-icon, .file-icon-overlay { - height: 100%; - width: 100%; - display: flex; + height: 100%; + width: 100%; + display: flex; - ng-icon { - align-self: center; - margin: auto; - } + ng-icon { + align-self: center; + margin: auto; + } } .file-icon-overlay { - position: absolute; - top: 0; - right: 0; + position: absolute; + top: 0; + right: 0; } ng-icon.gif-icon { - border-radius: 50%; - background-color: rgba(0, 0, 0, 0.5); - padding: 0.1em; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.5); + padding: 0.1em; } ng-icon { - font-size: 4em; - height: 1em; - width: 1em; + font-size: 4em; + height: 1em; + width: 1em; } diff --git a/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.spec.ts b/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.spec.ts index 8e73455..2f09332 100644 --- a/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {FileThumbnailComponent} from './file-thumbnail.component'; +import {FileThumbnailComponent} from "./file-thumbnail.component"; -describe('FileThumbnailComponent', () => { - let component: FileThumbnailComponent; - let fixture: ComponentFixture; +describe("FileThumbnailComponent", () => { + let component: FileThumbnailComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FileThumbnailComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileThumbnailComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(FileThumbnailComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(FileThumbnailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.ts b/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.ts index 6347af0..d25c8a5 100644 --- a/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.ts +++ b/mediarepo-ui/src/app/components/shared/file-thumbnail/file-thumbnail.component.ts @@ -1,49 +1,51 @@ import { - Component, - Input, - OnChanges, - OnInit, - SimpleChanges -} from '@angular/core'; + Component, + Input, + OnChanges, + OnInit, + SimpleChanges +} from "@angular/core"; import {File} from "../../../models/File"; import {FileService} from "../../../services/file/file.service"; import {FileHelper} from "../../../services/file/file.helper"; import {SafeResourceUrl} from "@angular/platform-browser"; @Component({ - selector: 'app-file-thumbnail', - templateUrl: './file-thumbnail.component.html', - styleUrls: ['./file-thumbnail.component.scss'] + selector: "app-file-thumbnail", + templateUrl: "./file-thumbnail.component.html", + styleUrls: ["./file-thumbnail.component.scss"] }) export class FileThumbnailComponent implements OnInit, OnChanges { - @Input() file!: File; + @Input() file!: File; - public thumbUrl: SafeResourceUrl | undefined; + public thumbUrl: SafeResourceUrl | undefined; - private supportedThumbnailTypes = ["image", "video"] + private supportedThumbnailTypes = ["image", "video"] - constructor(private fileService: FileService) { - } + constructor(private fileService: FileService) { + } - public ngOnInit(): void { - this.thumbUrl = this.fileService.buildThumbnailUrl(this.file, 250, 250); - } + public ngOnInit(): void { + this.thumbUrl = this.fileService.buildThumbnailUrl(this.file, 250, 250); + } - public ngOnChanges(changes: SimpleChanges): void { - if (changes["file"]) { - this.thumbUrl = this.fileService.buildThumbnailUrl(this.file, 250, 250) + public ngOnChanges(changes: SimpleChanges): void { + if (changes["file"]) { + this.thumbUrl = this.fileService.buildThumbnailUrl(this.file, 250, + 250) + } } - } - public getThumbnailSupported(): boolean { - const mimeParts = FileHelper.parseMime(this.file.mime_type); + public getThumbnailSupported(): boolean { + const mimeParts = FileHelper.parseMime(this.file.mime_type); - return !!mimeParts && this.supportedThumbnailTypes.includes(mimeParts[0]); - } + return !!mimeParts && this.supportedThumbnailTypes.includes( + mimeParts[0]); + } - public getFileType(): string { - const mimeParts = FileHelper.parseMime(this.file.mime_type); - return (mimeParts && mimeParts[0]) ?? "other"; - } + public getFileType(): string { + const mimeParts = FileHelper.parseMime(this.file.mime_type); + return (mimeParts && mimeParts[0]) ?? "other"; + } } diff --git a/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.html b/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.html index 8468adb..c3876c9 100644 --- a/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.html +++ b/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.html @@ -1,18 +1,18 @@
- - {{label}} - + + {{label}} + -
- - -
+
+ + +
- +
diff --git a/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.scss b/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.scss index 10d05c5..d90133c 100644 --- a/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.scss +++ b/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.scss @@ -1,22 +1,22 @@ .file-select-inner, mat-form-field { - width: 100%; + width: 100%; } .file-input { - width: calc(100% - 3em); - float: left; - text-overflow: ellipsis; + width: calc(100% - 3em); + float: left; + text-overflow: ellipsis; } .buttons-native-select { - position: absolute; - top: 0; - right: 0; - margin-top: -19px; + position: absolute; + top: 0; + right: 0; + margin-top: -19px; - button { - width: 3em; - height: 3em; - } + button { + width: 3em; + height: 3em; + } } diff --git a/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.spec.ts b/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.spec.ts index 1565163..1357827 100644 --- a/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {NativeFileSelectComponent} from './native-file-select.component'; +import {NativeFileSelectComponent} from "./native-file-select.component"; -describe('NativeFileSelectComponent', () => { - let component: NativeFileSelectComponent; - let fixture: ComponentFixture; +describe("NativeFileSelectComponent", () => { + let component: NativeFileSelectComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [NativeFileSelectComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [NativeFileSelectComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(NativeFileSelectComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(NativeFileSelectComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.ts b/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.ts index 852ea45..122c0d8 100644 --- a/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.ts +++ b/mediarepo-ui/src/app/components/shared/inputs/native-file-select/native-file-select.component.ts @@ -1,83 +1,83 @@ import { - Component, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges -} from '@angular/core'; + Component, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges +} 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'] + selector: "app-native-file-select", + templateUrl: "./native-file-select.component.html", + styleUrls: ["./native-file-select.component.scss"] }) export class NativeFileSelectComponent implements OnInit, OnChanges { - @Input() mode: "files" | "folders" = "files"; - @Input() formControlName: string | undefined; - @Input() formControl: FormControl | undefined; - @Input() startPath: string | undefined; - @Input() multiSelect: boolean = true; - @Input() filters: DialogFilter[] = []; + @Input() mode: "files" | "folders" = "files"; + @Input() formControlName: string | undefined; + @Input() formControl: FormControl | undefined; + @Input() startPath: string | undefined; + @Input() multiSelect: boolean = true; + @Input() filters: DialogFilter[] = []; - @Output() fileSelect = new EventEmitter(); + @Output() fileSelect = new EventEmitter(); - public files: string[] = []; - public label: string | undefined; + public files: string[] = []; + public label: string | undefined; - constructor() { - } + constructor() { + } - public ngOnInit(): void { - this.setLabel(); - } + public ngOnInit(): void { + this.setLabel(); + } - public ngOnChanges(changes: SimpleChanges): void { - if (changes["mode"]) { - this.setLabel(); + public ngOnChanges(changes: SimpleChanges): void { + if (changes["mode"]) { + this.setLabel(); + } } - } - public setFiles(filesExpr: string) { - this.files = filesExpr.split(","); - this.fileSelect.emit(this.files); - } + 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 if (files) { - this.files = [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 if (files) { + this.files = [files]; + } + this.fileSelect.emit(this.files); } - this.fileSelect.emit(this.files); - } - private setLabel(): void { - switch (this.mode) { - case "files": - this.label = "Select Files"; - break; - case "folders": - this.label = "Select a folder"; - break; + private setLabel(): void { + switch (this.mode) { + case "files": + this.label = "Select Files"; + break; + case "folders": + this.label = "Select a folder"; + break; + } } - } } diff --git a/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.html b/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.html index 98aad78..53c8297 100644 --- a/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.html +++ b/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.html @@ -1,16 +1,16 @@ - - Enter a tag - - - - - - {{tag}} - - + + Enter a tag + + + + + + {{tag}} + + diff --git a/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.scss b/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.scss index c7acb4b..bc76a27 100644 --- a/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.scss +++ b/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.scss @@ -1,3 +1,3 @@ mat-form-field { - width: 100%; + width: 100%; } diff --git a/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.spec.ts b/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.spec.ts index 9bd3150..b95e681 100644 --- a/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {TagInputComponent} from './tag-input.component'; +import {TagInputComponent} from "./tag-input.component"; -describe('TagInputComponent', () => { - let component: TagInputComponent; - let fixture: ComponentFixture; +describe("TagInputComponent", () => { + let component: TagInputComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [TagInputComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TagInputComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(TagInputComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(TagInputComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.ts b/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.ts index a0ea511..b0628bc 100644 --- a/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.ts +++ b/mediarepo-ui/src/app/components/shared/inputs/tag-input/tag-input.component.ts @@ -1,13 +1,13 @@ import { - Component, - ElementRef, - EventEmitter, - Input, - OnChanges, - Output, - SimpleChanges, - ViewChild -} from '@angular/core'; + Component, + ElementRef, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, + ViewChild +} from "@angular/core"; import {Tag} from "../../../../models/Tag"; import {FormControl} from "@angular/forms"; import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete"; @@ -15,106 +15,106 @@ import {Observable} from "rxjs"; import {debounceTime, map, startWith} from "rxjs/operators"; @Component({ - selector: 'app-tag-input', - templateUrl: './tag-input.component.html', - styleUrls: ['./tag-input.component.scss'] + selector: "app-tag-input", + templateUrl: "./tag-input.component.html", + styleUrls: ["./tag-input.component.scss"] }) export class TagInputComponent implements OnChanges { - @Input() availableTags: Tag[] = []; - @Input() allowNegation: boolean = false; - @Input() allowInvalid: boolean = false; - @Output() tagAdded = new EventEmitter(); + @Input() availableTags: Tag[] = []; + @Input() allowNegation: boolean = false; + @Input() allowInvalid: boolean = false; + @Output() tagAdded = new EventEmitter(); - @ViewChild("tagInput") tagInput!: ElementRef; - public formControl = new FormControl(); - public autosuggestTags: Observable; - private tagsForAutocomplete: string[] = []; + @ViewChild("tagInput") tagInput!: ElementRef; + public formControl = new FormControl(); + public autosuggestTags: Observable; + private tagsForAutocomplete: string[] = []; - constructor() { - this.tagsForAutocomplete = this.availableTags.map( - t => t.getNormalizedOutput()); - this.autosuggestTags = this.formControl.valueChanges.pipe( - startWith(null), - debounceTime(250), - map((tag: string | null) => tag ? this.filterSuggestionTag( - tag) : this.tagsForAutocomplete.slice(0, 20))); - } + constructor() { + this.tagsForAutocomplete = this.availableTags.map( + t => t.getNormalizedOutput()); + this.autosuggestTags = this.formControl.valueChanges.pipe( + startWith(null), + debounceTime(250), + map((tag: string | null) => tag ? this.filterSuggestionTag( + tag) : this.tagsForAutocomplete.slice(0, 20))); + } - ngOnChanges(changes: SimpleChanges): void { - if (changes["availableTags"]) { - this.tagsForAutocomplete = this.availableTags.map( - t => t.getNormalizedOutput()); + ngOnChanges(changes: SimpleChanges): void { + if (changes["availableTags"]) { + this.tagsForAutocomplete = this.availableTags.map( + t => t.getNormalizedOutput()); + } } - } - public addTagByInput(event: any): void { - this.addTag(this.formControl.value); - } + public addTagByInput(event: any): void { + this.addTag(this.formControl.value); + } - public addTagByAutocomplete(event: MatAutocompleteSelectedEvent): void { - this.addTag(event.option.value); - } + public addTagByAutocomplete(event: MatAutocompleteSelectedEvent): void { + this.addTag(event.option.value); + } - private addTag(value: string) { - const tag = this.normalizeTag(value); - if (tag.length > 0 && (this.allowInvalid || this.checkTagValid(tag))) { - this.tagAdded.emit(tag); - this.formControl.setValue(""); - this.tagInput.nativeElement.value = ""; + private addTag(value: string) { + const tag = this.normalizeTag(value); + if (tag.length > 0 && (this.allowInvalid || this.checkTagValid(tag))) { + this.tagAdded.emit(tag); + this.formControl.setValue(""); + this.tagInput.nativeElement.value = ""; + } } - } - private filterSuggestionTag(tag: string) { - let normalizedTag = this.normalizeTag(tag); - const negated = normalizedTag.startsWith("-") && this.allowNegation; - normalizedTag = this.allowNegation ? normalizedTag.replace(/^-/, - "") : normalizedTag; + private filterSuggestionTag(tag: string) { + let normalizedTag = this.normalizeTag(tag); + const negated = normalizedTag.startsWith("-") && this.allowNegation; + normalizedTag = this.allowNegation ? normalizedTag.replace(/^-/, + "") : normalizedTag; - return this.tagsForAutocomplete.filter( - t => t.includes(normalizedTag)) - .map(t => negated ? "-" + t : t) - .sort((l, r) => this.compareSuggestionTags(normalizedTag, l, r)) - .slice(0, 20); - } + return this.tagsForAutocomplete.filter( + t => t.includes(normalizedTag)) + .map(t => negated ? "-" + t : t) + .sort((l, r) => this.compareSuggestionTags(normalizedTag, l, r)) + .slice(0, 20); + } - private checkTagValid(tag: string): boolean { - if (this.allowNegation) { - tag = tag.replace(/^-/, ""); + private checkTagValid(tag: string): boolean { + if (this.allowNegation) { + tag = tag.replace(/^-/, ""); + } + return this.tagsForAutocomplete.includes(tag); } - return this.tagsForAutocomplete.includes(tag); - } - /** - * Normalizes the tag by removing whitespaces - * @param {string} tag - * @returns {string} - * @private - */ - private normalizeTag(tag: string): string { - let normalizedTag = tag.trim(); - let parts = normalizedTag.split(":"); + /** + * Normalizes the tag by removing whitespaces + * @param {string} tag + * @returns {string} + * @private + */ + private normalizeTag(tag: string): string { + let normalizedTag = tag.trim(); + let parts = normalizedTag.split(":"); - if (parts.length > 1) { - const namespace = parts.shift()!.trim(); - const name = parts.join(":").trim(); - return namespace + ":" + name; - } else { - return normalizedTag; + if (parts.length > 1) { + const namespace = parts.shift()!.trim(); + const name = parts.join(":").trim(); + return namespace + ":" + name; + } else { + return normalizedTag; + } } - } - private compareSuggestionTags(query: string, l: string, r: string): number { - if (l.startsWith(query) && !r.startsWith(query)) { - return -1; - } else if (!l.startsWith(query) && r.startsWith(query)) { - return 1; - } else if (l.length < r.length) { - return -1; - } else if (l.length > r.length) { - return 1; - } else { - return l.localeCompare(r) + private compareSuggestionTags(query: string, l: string, r: string): number { + if (l.startsWith(query) && !r.startsWith(query)) { + return -1; + } else if (!l.startsWith(query) && r.startsWith(query)) { + return 1; + } else if (l.length < r.length) { + return -1; + } else if (l.length > r.length) { + return 1; + } else { + return l.localeCompare(r) + } } - } } diff --git a/mediarepo-ui/src/app/components/shared/shared.module.ts b/mediarepo-ui/src/app/components/shared/shared.module.ts index cf597bd..37ab0aa 100644 --- a/mediarepo-ui/src/app/components/shared/shared.module.ts +++ b/mediarepo-ui/src/app/components/shared/shared.module.ts @@ -1,5 +1,5 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; +import {NgModule} from "@angular/core"; +import {CommonModule} from "@angular/common"; import {RepositoryCardComponent} from "../core/repositories-tab/repository-card/repository-card.component"; import {FileGridComponent} from "./file-multiview/file-grid/file-grid.component"; import {FileGridEntryComponent} from "./file-multiview/file-grid/file-grid-entry/file-grid-entry.component"; @@ -60,78 +60,78 @@ import * as materialIcons from "@ng-icons/material-icons"; @NgModule({ - declarations: [ - RepositoryCardComponent, - FileGridComponent, - FileGridEntryComponent, - FileSearchComponent, - SortDialogComponent, - FileGalleryComponent, - FileGalleryEntryComponent, - ContentAwareImageComponent, - AddRepositoryDialogComponent, - ConfirmDialogComponent, - TagItemComponent, - FileEditComponent, - NativeFileSelectComponent, - FilterDialogComponent, - TagFilterListItemComponent, - TagInputComponent, - ContextMenuComponent, - FileContextMenuComponent, - ContentViewerComponent, - ImageViewerComponent, - VideoViewerComponent, - AudioViewerComponent, - BusyIndicatorComponent, - FileThumbnailComponent, - FileMultiviewComponent, - ], - exports: [ - FileMultiviewComponent, - NativeFileSelectComponent, - BusyIndicatorComponent, - FileSearchComponent, - TagItemComponent, - FileEditComponent, - ContextMenuComponent, - RepositoryCardComponent - ], - imports: [ - CommonModule, - MatCardModule, - MatListModule, - MatButtonModule, - MatToolbarModule, - MatSnackBarModule, - MatFormFieldModule, - MatInputModule, - ReactiveFormsModule, - MatSidenavModule, - MatGridListModule, - MatProgressBarModule, - MatPaginatorModule, - ScrollingModule, - MatChipsModule, - MatAutocompleteModule, - MatTabsModule, - FlexModule, - GridModule, - MatRippleModule, - MatDialogModule, - MatSelectModule, - MatProgressSpinnerModule, - BlockUIModule, - PanelModule, - DragDropModule, - MatSliderModule, - MatTooltipModule, - MatMenuModule, - MatExpansionModule, - MatCheckboxModule, - AppRoutingModule, - NgIconsModule.withIcons({...materialIcons}), - ] + declarations: [ + RepositoryCardComponent, + FileGridComponent, + FileGridEntryComponent, + FileSearchComponent, + SortDialogComponent, + FileGalleryComponent, + FileGalleryEntryComponent, + ContentAwareImageComponent, + AddRepositoryDialogComponent, + ConfirmDialogComponent, + TagItemComponent, + FileEditComponent, + NativeFileSelectComponent, + FilterDialogComponent, + TagFilterListItemComponent, + TagInputComponent, + ContextMenuComponent, + FileContextMenuComponent, + ContentViewerComponent, + ImageViewerComponent, + VideoViewerComponent, + AudioViewerComponent, + BusyIndicatorComponent, + FileThumbnailComponent, + FileMultiviewComponent, + ], + exports: [ + FileMultiviewComponent, + NativeFileSelectComponent, + BusyIndicatorComponent, + FileSearchComponent, + TagItemComponent, + FileEditComponent, + ContextMenuComponent, + RepositoryCardComponent + ], + imports: [ + CommonModule, + MatCardModule, + MatListModule, + MatButtonModule, + MatToolbarModule, + MatSnackBarModule, + MatFormFieldModule, + MatInputModule, + ReactiveFormsModule, + MatSidenavModule, + MatGridListModule, + MatProgressBarModule, + MatPaginatorModule, + ScrollingModule, + MatChipsModule, + MatAutocompleteModule, + MatTabsModule, + FlexModule, + GridModule, + MatRippleModule, + MatDialogModule, + MatSelectModule, + MatProgressSpinnerModule, + BlockUIModule, + PanelModule, + DragDropModule, + MatSliderModule, + MatTooltipModule, + MatMenuModule, + MatExpansionModule, + MatCheckboxModule, + AppRoutingModule, + NgIconsModule.withIcons({...materialIcons}), + ] }) export class SharedModule { } diff --git a/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.html b/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.html index 952fe4b..0df8455 100644 --- a/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.html +++ b/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.html @@ -1,4 +1,4 @@
- {{tag.namespace}}: - {{tag.name}} + {{tag.namespace}}: + {{tag.name}}
diff --git a/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.scss b/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.scss index 6911049..f7350e0 100644 --- a/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.scss +++ b/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.scss @@ -1,12 +1,12 @@ .tag-item-wrapper { - display: inline; - width: 100%; - padding: 0.25em; - word-break: break-all; - text-overflow: ellipsis; + display: inline; + width: 100%; + padding: 0.25em; + word-break: break-all; + text-overflow: ellipsis; } .tag-item-namespace { - margin-right: 0.25em; - opacity: 80%; + margin-right: 0.25em; + opacity: 80%; } diff --git a/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.spec.ts b/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.spec.ts index 60309e9..5579ba1 100644 --- a/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.spec.ts +++ b/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.spec.ts @@ -1,25 +1,25 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from "@angular/core/testing"; -import {TagItemComponent} from './tag-item.component'; +import {TagItemComponent} from "./tag-item.component"; -describe('TagItemComponent', () => { - let component: TagItemComponent; - let fixture: ComponentFixture; +describe("TagItemComponent", () => { + let component: TagItemComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [TagItemComponent] - }) - .compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TagItemComponent] + }) + .compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(TagItemComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(TagItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.ts b/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.ts index 80ed105..6afe7d6 100644 --- a/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.ts +++ b/mediarepo-ui/src/app/components/shared/tag-item/tag-item.component.ts @@ -1,17 +1,17 @@ -import {Component, Input} from '@angular/core'; +import {Component, Input} from "@angular/core"; import {Tag} from "../../../models/Tag"; @Component({ - selector: 'app-tag-item', - templateUrl: './tag-item.component.html', - styleUrls: ['./tag-item.component.scss'] + selector: "app-tag-item", + templateUrl: "./tag-item.component.html", + styleUrls: ["./tag-item.component.scss"] }) export class TagItemComponent { - @Input() tag!: Tag; - @Input() namespaceColor: string | undefined; - @Input() tagColor: string | undefined; + @Input() tag!: Tag; + @Input() namespaceColor: string | undefined; + @Input() tagColor: string | undefined; - constructor() { - } + constructor() { + } } diff --git a/mediarepo-ui/src/app/models/AddFileOptions.ts b/mediarepo-ui/src/app/models/AddFileOptions.ts index 120ac61..f8508d0 100644 --- a/mediarepo-ui/src/app/models/AddFileOptions.ts +++ b/mediarepo-ui/src/app/models/AddFileOptions.ts @@ -1,8 +1,8 @@ export class AddFileOptions { - public read_tags_from_txt = true; - public delete_after_import = false; + public read_tags_from_txt = true; + public delete_after_import = false; - constructor() { - } + constructor() { + } } diff --git a/mediarepo-ui/src/app/models/File.ts b/mediarepo-ui/src/app/models/File.ts index d423c3f..7ed66b9 100644 --- a/mediarepo-ui/src/app/models/File.ts +++ b/mediarepo-ui/src/app/models/File.ts @@ -1,14 +1,14 @@ export class File { - constructor( - public id: number, - public name: string | undefined, - public comment: string | undefined, - public hash: string, - public file_type: number, - public mime_type: string | undefined, - public creation_time: Date, - public change_time: Date, - public import_time: Date, - ) { - } + constructor( + public id: number, + public name: string | undefined, + public comment: string | undefined, + public hash: string, + public file_type: number, + public mime_type: string | undefined, + public creation_time: Date, + public change_time: Date, + public import_time: Date, + ) { + } } diff --git a/mediarepo-ui/src/app/models/FileOsMetadata.ts b/mediarepo-ui/src/app/models/FileOsMetadata.ts index c218b02..f990aed 100644 --- a/mediarepo-ui/src/app/models/FileOsMetadata.ts +++ b/mediarepo-ui/src/app/models/FileOsMetadata.ts @@ -1,7 +1,7 @@ export type FileOsMetadata = { - name: string, - path: string, - mime_type: string, - created_at: Date, - modified_at: Date, + name: string, + path: string, + mime_type: string, + created_at: Date, + modified_at: Date, } diff --git a/mediarepo-ui/src/app/models/FilterExpression.ts b/mediarepo-ui/src/app/models/FilterExpression.ts index 21288aa..98d304f 100644 --- a/mediarepo-ui/src/app/models/FilterExpression.ts +++ b/mediarepo-ui/src/app/models/FilterExpression.ts @@ -1,92 +1,93 @@ import {TagQuery} from "./TagQuery"; export interface FilterExpression { - filter_type: "OrExpression" | "Query"; - filter: TagQuery[] | TagQuery; + filter_type: "OrExpression" | "Query"; + filter: TagQuery[] | TagQuery; - eq(value: any): boolean; + eq(value: any): boolean; - partiallyEq(value: any): boolean; + partiallyEq(value: any): boolean; - getDisplayName(): string; + getDisplayName(): string; - clone(): FilterExpression; + clone(): FilterExpression; - queryList(): TagQuery[]; + queryList(): TagQuery[]; } export class OrFilterExpression implements FilterExpression { - public filter_type: "OrExpression" = "OrExpression"; - public filter: TagQuery[] = []; - - constructor(tags: TagQuery[]) { - this.filter = tags; - } - - public eq(value: any): boolean { - return this == value - } - - public partiallyEq(value: any): boolean { - return this == value; - } - - public getDisplayName(): string { - return this.filter.map(t => t.getNormalizedTag()).join(" OR "); - } - - public clone(): OrFilterExpression { - let tags = this.filter.map((t: TagQuery) => new TagQuery(t.tag, t.negate)); - return new OrFilterExpression(tags) - } - - public queryList(): TagQuery[] { - return this.filter; - } - - public removeQueryEntry(index: number) { - this.filter.splice(index, 1); - } - - public removeDuplicates() { - const filters = this.filter.reverse(); - let newEntries: TagQuery[] = []; - - for (const entry of filters) { - if (newEntries.findIndex(f => f.tag === entry.tag) < 0) { - newEntries.push(entry); - } + public filter_type: "OrExpression" = "OrExpression"; + public filter: TagQuery[] = []; + + constructor(tags: TagQuery[]) { + this.filter = tags; + } + + public eq(value: any): boolean { + return this == value + } + + public partiallyEq(value: any): boolean { + return this == value; + } + + public getDisplayName(): string { + return this.filter.map(t => t.getNormalizedTag()).join(" OR "); + } + + public clone(): OrFilterExpression { + let tags = this.filter.map( + (t: TagQuery) => new TagQuery(t.tag, t.negate)); + return new OrFilterExpression(tags) + } + + public queryList(): TagQuery[] { + return this.filter; + } + + public removeQueryEntry(index: number) { + this.filter.splice(index, 1); + } + + public removeDuplicates() { + const filters = this.filter.reverse(); + let newEntries: TagQuery[] = []; + + for (const entry of filters) { + if (newEntries.findIndex(f => f.tag === entry.tag) < 0) { + newEntries.push(entry); + } + } + this.filter = newEntries.reverse(); } - this.filter = newEntries.reverse(); - } } export class SingleFilterExpression implements FilterExpression { - public filter_type: "Query" = "Query"; - public filter: TagQuery; + public filter_type: "Query" = "Query"; + public filter: TagQuery; - constructor(tag: TagQuery) { - this.filter = tag; - } + constructor(tag: TagQuery) { + this.filter = tag; + } - public eq(value: any): boolean { - return (this.filter.tag === value?.name && this.filter.negate === value?.negate) || this.filter.getNormalizedTag() === value; - } + public eq(value: any): boolean { + return (this.filter.tag === value?.name && this.filter.negate === value?.negate) || this.filter.getNormalizedTag() === value; + } - public partiallyEq(value: any): boolean { - return this.filter.tag === value || this.filter.tag === value?.name; - } + public partiallyEq(value: any): boolean { + return this.filter.tag === value || this.filter.tag === value?.name; + } - public getDisplayName(): string { - return this.filter.getNormalizedTag(); - } + public getDisplayName(): string { + return this.filter.getNormalizedTag(); + } - public clone(): FilterExpression { - return new SingleFilterExpression( - new TagQuery(this.filter.tag, this.filter.negate)) - } + public clone(): FilterExpression { + return new SingleFilterExpression( + new TagQuery(this.filter.tag, this.filter.negate)) + } - public queryList(): TagQuery[] { - return [this.filter] - } + public queryList(): TagQuery[] { + return [this.filter] + } } diff --git a/mediarepo-ui/src/app/models/Info.ts b/mediarepo-ui/src/app/models/Info.ts index 82dc61d..bd89577 100644 --- a/mediarepo-ui/src/app/models/Info.ts +++ b/mediarepo-ui/src/app/models/Info.ts @@ -1,4 +1,4 @@ export type Info = { - name: string; - version: string; + name: string; + version: string; } diff --git a/mediarepo-ui/src/app/models/Repository.ts b/mediarepo-ui/src/app/models/Repository.ts index 0e99cb6..020c399 100644 --- a/mediarepo-ui/src/app/models/Repository.ts +++ b/mediarepo-ui/src/app/models/Repository.ts @@ -1,9 +1,9 @@ export class Repository { - constructor( - public name: string, - public address: string | undefined, - public path: string | undefined, - public local: boolean, - ) { - } + constructor( + public name: string, + public address: string | undefined, + public path: string | undefined, + public local: boolean, + ) { + } } diff --git a/mediarepo-ui/src/app/models/Selectable.ts b/mediarepo-ui/src/app/models/Selectable.ts index 198964e..6e64c3a 100644 --- a/mediarepo-ui/src/app/models/Selectable.ts +++ b/mediarepo-ui/src/app/models/Selectable.ts @@ -1,12 +1,12 @@ export class Selectable { - constructor(public data: T, public selected: boolean) { - } + constructor(public data: T, public selected: boolean) { + } - public select() { - this.selected = true; - } + public select() { + this.selected = true; + } - public unselect() { - this.selected = false; - } + public unselect() { + this.selected = false; + } } diff --git a/mediarepo-ui/src/app/models/SortKey.ts b/mediarepo-ui/src/app/models/SortKey.ts index 1fc1523..130b9cd 100644 --- a/mediarepo-ui/src/app/models/SortKey.ts +++ b/mediarepo-ui/src/app/models/SortKey.ts @@ -1,35 +1,35 @@ export class SortKey { - constructor( - public sortType: "Namespace" | "FileName" | "FileSize" | "FileImportedTime" | "FileCreatedTime" | "FileChangeTime" | "FileType" | "NumTags", - public sortDirection: "Ascending" | "Descending", - public namespaceName: string | undefined - ) { - } + constructor( + public sortType: "Namespace" | "FileName" | "FileSize" | "FileImportedTime" | "FileCreatedTime" | "FileChangeTime" | "FileType" | "NumTags", + public sortDirection: "Ascending" | "Descending", + public namespaceName: string | undefined + ) { + } - public toString(): string { - if (this.sortType == "Namespace") { - return `${this.sortType} '${this.namespaceName}' ${this.sortDirection}` - } else { - return `${this.sortType} ${this.sortDirection}` + public toString(): string { + if (this.sortType == "Namespace") { + return `${this.sortType} '${this.namespaceName}' ${this.sortDirection}` + } else { + return `${this.sortType} ${this.sortDirection}` + } } - } - public toBackendType(): any { + public toBackendType(): any { - if (this.sortType == "Namespace") { - return { - "Namespace": { - direction: this.sortDirection, - name: this.namespaceName - } - } - } else { - let returnObj: any = {}; - returnObj[this.sortType] = this.sortDirection; + if (this.sortType == "Namespace") { + return { + "Namespace": { + direction: this.sortDirection, + name: this.namespaceName + } + } + } else { + let returnObj: any = {}; + returnObj[this.sortType] = this.sortDirection; - return returnObj; + return returnObj; + } } - } } diff --git a/mediarepo-ui/src/app/models/Tag.ts b/mediarepo-ui/src/app/models/Tag.ts index 0d6bfca..724a6d6 100644 --- a/mediarepo-ui/src/app/models/Tag.ts +++ b/mediarepo-ui/src/app/models/Tag.ts @@ -1,18 +1,18 @@ export class Tag { - private normalizedTag?: string = undefined; + private normalizedTag?: string = undefined; - constructor( - public id: number, - public name: string, - public namespace: string | undefined - ) { - } + constructor( + public id: number, + public name: string, + public namespace: string | undefined + ) { + } - public getNormalizedOutput(): string { - if (!this.normalizedTag) { - this.normalizedTag = this.namespace ? this.namespace + ':' + this.name : this.name + public getNormalizedOutput(): string { + if (!this.normalizedTag) { + this.normalizedTag = this.namespace ? this.namespace + ":" + this.name : this.name + } + return this.normalizedTag; } - return this.normalizedTag; - } } diff --git a/mediarepo-ui/src/app/models/TagQuery.ts b/mediarepo-ui/src/app/models/TagQuery.ts index fb3bb91..6757559 100644 --- a/mediarepo-ui/src/app/models/TagQuery.ts +++ b/mediarepo-ui/src/app/models/TagQuery.ts @@ -1,16 +1,16 @@ export class TagQuery { - constructor(public tag: string, public negate: boolean) { - } + constructor(public tag: string, public negate: boolean) { + } - public static fromString(tag: string): TagQuery { - if (tag.startsWith("-")) { - return new TagQuery(tag.replace(/^-/g, ''), true); - } else { - return new TagQuery(tag, false); + public static fromString(tag: string): TagQuery { + if (tag.startsWith("-")) { + return new TagQuery(tag.replace(/^-/g, ""), true); + } else { + return new TagQuery(tag, false); + } } - } - public getNormalizedTag(): string { - return this.negate ? "-" + this.tag : this.tag; - } + public getNormalizedTag(): string { + return this.negate ? "-" + this.tag : this.tag; + } } diff --git a/mediarepo-ui/src/app/models/Thumbnail.ts b/mediarepo-ui/src/app/models/Thumbnail.ts index ec756de..bf1c9e5 100644 --- a/mediarepo-ui/src/app/models/Thumbnail.ts +++ b/mediarepo-ui/src/app/models/Thumbnail.ts @@ -1,6 +1,6 @@ export type Thumbnail = { - file_hash: string, - height: number, - width: number, - mime_type: string | undefined + file_hash: string, + height: number, + width: number, + mime_type: string | undefined } diff --git a/mediarepo-ui/src/app/services/error-broker/error-broker.service.spec.ts b/mediarepo-ui/src/app/services/error-broker/error-broker.service.spec.ts index 1425081..c9f3d45 100644 --- a/mediarepo-ui/src/app/services/error-broker/error-broker.service.spec.ts +++ b/mediarepo-ui/src/app/services/error-broker/error-broker.service.spec.ts @@ -1,16 +1,16 @@ -import {TestBed} from '@angular/core/testing'; +import {TestBed} from "@angular/core/testing"; -import {ErrorBrokerService} from './error-broker.service'; +import {ErrorBrokerService} from "./error-broker.service"; -describe('ErrorBrokerService', () => { - let service: ErrorBrokerService; +describe("ErrorBrokerService", () => { + let service: ErrorBrokerService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ErrorBrokerService); - }); + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ErrorBrokerService); + }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); + it("should be created", () => { + expect(service).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/services/error-broker/error-broker.service.ts b/mediarepo-ui/src/app/services/error-broker/error-broker.service.ts index cd5db8d..f5c3d9f 100644 --- a/mediarepo-ui/src/app/services/error-broker/error-broker.service.ts +++ b/mediarepo-ui/src/app/services/error-broker/error-broker.service.ts @@ -1,44 +1,44 @@ -import {Injectable} from '@angular/core'; +import {Injectable} from "@angular/core"; import {listen} from "@tauri-apps/api/event"; @Injectable({ - providedIn: 'root' + providedIn: "root" }) export class ErrorBrokerService { - errorCb: Function | undefined; - infoCb: Function | undefined; + errorCb: Function | undefined; + infoCb: Function | undefined; - constructor() { - this.registerListener(); - } + constructor() { + this.registerListener(); + } - async registerListener() { - const _unlisten = await listen("error", event => { - const payload: any = event.payload; - if (payload.message) { - this.showError(payload) - } else { - this.showError(payload.toString()) - } - }) - } + async registerListener() { + const _unlisten = await listen("error", event => { + const payload: any = event.payload; + if (payload.message) { + this.showError(payload) + } else { + this.showError(payload.toString()) + } + }) + } - showInfo(info: string) { - console.log(info); - if (this.infoCb) { - this.infoCb(info); + showInfo(info: string) { + console.log(info); + if (this.infoCb) { + this.infoCb(info); + } } - } - showError(error: { message: string }) { - console.error(error); - if (this.errorCb) { - if (!error.message) { - this.errorCb({message: error}); - } else { - this.errorCb({...error}); - } + showError(error: { message: string }) { + console.error(error); + if (this.errorCb) { + if (!error.message) { + this.errorCb({message: error}); + } else { + this.errorCb({...error}); + } + } } - } } diff --git a/mediarepo-ui/src/app/services/file/file.helper.ts b/mediarepo-ui/src/app/services/file/file.helper.ts index 8469b58..f5074f5 100644 --- a/mediarepo-ui/src/app/services/file/file.helper.ts +++ b/mediarepo-ui/src/app/services/file/file.helper.ts @@ -4,65 +4,65 @@ import {File} from "../../models/File"; export class FileHelper { - /** - * Opens a dialog to get a download location for the given file - * @param {File} file - */ - public static async getFileDownloadLocation(file: File): Promise { - let extension; + /** + * Opens a dialog to get a download location for the given file + * @param {File} file + */ + public static async getFileDownloadLocation(file: File): Promise { + let extension; - if (file.mime_type) { - extension = FileHelper.getExtensionForMime(file.mime_type); + if (file.mime_type) { + extension = FileHelper.getExtensionForMime(file.mime_type); + } + const downloadDirectory = await downloadDir(); + const suggestionPath = downloadDirectory + file.hash + "." + extension; + + return await dialog.save({ + defaultPath: suggestionPath, + filters: [{ + name: file.mime_type ?? "All", + extensions: [extension ?? "*"] + }, {name: "All", extensions: ["*"]}] + }) } - const downloadDirectory = await downloadDir(); - const suggestionPath = downloadDirectory + file.hash + "." + extension; - return await dialog.save({ - defaultPath: suggestionPath, - filters: [{ - name: file.mime_type ?? "All", - extensions: [extension ?? "*"] - }, {name: "All", extensions: ["*"]}] - }) - } + /** + * Parses a mime into its two components + * @param {string | undefined} mimeType + * @returns {[string, string] | undefined} + */ + public static parseMime(mimeType: string | undefined): [string, string] | undefined { + if (!mimeType) { + return undefined; + } + let mimeParts = mimeType.split("/"); + if (mimeParts.length < 2) { + return undefined; + } + const type = mimeParts[0]; + const subtype = mimeParts[1]; - /** - * Parses a mime into its two components - * @param {string | undefined} mimeType - * @returns {[string, string] | undefined} - */ - public static parseMime(mimeType: string | undefined): [string, string] | undefined { - if (!mimeType) { - return undefined; - } - let mimeParts = mimeType.split("/"); - if (mimeParts.length < 2) { - return undefined; + return [type, subtype]; } - const type = mimeParts[0]; - const subtype = mimeParts[1]; - return [type, subtype]; - } + /** + * Returns the extension for a mime type + * @param {string} mime + * @returns {string | undefined} + * @private + */ + public static getExtensionForMime(mime: string): string | undefined { + let parts = mime.split("/"); - /** - * Returns the extension for a mime type - * @param {string} mime - * @returns {string | undefined} - * @private - */ - public static getExtensionForMime(mime: string): string | undefined { - let parts = mime.split("/"); - - if (parts.length === 2) { - const type = parts[0]; - const subtype = parts[1]; - return FileHelper.convertMimeSubtypeToExtension(subtype); + if (parts.length === 2) { + const type = parts[0]; + const subtype = parts[1]; + return FileHelper.convertMimeSubtypeToExtension(subtype); + } + return undefined; } - return undefined; - } - private static convertMimeSubtypeToExtension(subtype: string): string { - return subtype; - } + private static convertMimeSubtypeToExtension(subtype: string): string { + return subtype; + } } diff --git a/mediarepo-ui/src/app/services/file/file.service.spec.ts b/mediarepo-ui/src/app/services/file/file.service.spec.ts index cc88625..87a2aa2 100644 --- a/mediarepo-ui/src/app/services/file/file.service.spec.ts +++ b/mediarepo-ui/src/app/services/file/file.service.spec.ts @@ -1,16 +1,16 @@ -import {TestBed} from '@angular/core/testing'; +import {TestBed} from "@angular/core/testing"; -import {FileService} from './file.service'; +import {FileService} from "./file.service"; -describe('FileService', () => { - let service: FileService; +describe("FileService", () => { + let service: FileService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(FileService); - }); + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(FileService); + }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); + it("should be created", () => { + expect(service).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/services/file/file.service.ts b/mediarepo-ui/src/app/services/file/file.service.ts index 7fdbe91..b6e7c02 100644 --- a/mediarepo-ui/src/app/services/file/file.service.ts +++ b/mediarepo-ui/src/app/services/file/file.service.ts @@ -1,4 +1,4 @@ -import {Inject, Injectable} from '@angular/core'; +import {Inject, Injectable} from "@angular/core"; import {BehaviorSubject} from "rxjs"; import {File} from "../../models/File"; import {invoke} from "@tauri-apps/api/tauri"; @@ -10,93 +10,93 @@ import {FilterExpression} from "../../models/FilterExpression"; @Injectable({ - providedIn: 'root' + providedIn: "root" }) export class FileService { - displayedFiles = new BehaviorSubject([]); - thumbnailCache: { [key: number]: Thumbnail[] } = {}; + displayedFiles = new BehaviorSubject([]); + thumbnailCache: { [key: number]: Thumbnail[] } = {}; - constructor( - @Inject(DomSanitizer) private sanitizer: DomSanitizer, - private repoService: RepositoryService, - ) { - repoService.selectedRepository.subscribe(_ => this.clearCache()); - } + constructor( + @Inject(DomSanitizer) private sanitizer: DomSanitizer, + private repoService: RepositoryService, + ) { + repoService.selectedRepository.subscribe(_ => this.clearCache()); + } - public clearCache() { - this.thumbnailCache = {}; - } + public clearCache() { + this.thumbnailCache = {}; + } - public async getFiles() { - let all_files = await invoke("plugin:mediarepo|get_all_files"); - this.displayedFiles.next(all_files); - } + public async getFiles() { + let all_files = await invoke("plugin:mediarepo|get_all_files"); + this.displayedFiles.next(all_files); + } - public async findFiles(filters: FilterExpression[], sortBy: SortKey[]) { - console.log(filters); - let files = await invoke("plugin:mediarepo|find_files", - {filters, sortBy: sortBy.map(k => k.toBackendType())}); - this.displayedFiles.next(files); - } + public async findFiles(filters: FilterExpression[], sortBy: SortKey[]) { + console.log(filters); + let files = await invoke("plugin:mediarepo|find_files", + {filters, sortBy: sortBy.map(k => k.toBackendType())}); + this.displayedFiles.next(files); + } - public async updateFileName(file: File, name: string): Promise { - return await invoke("plugin:mediarepo|update_file_name", - {id: file.id, name}) - } + public async updateFileName(file: File, name: string): Promise { + return await invoke("plugin:mediarepo|update_file_name", + {id: file.id, name}) + } - /** - * Builds a safe thumbnail url that accesses custom scheme for thumbnails - * @param {File} file - * @param {number} height - * @param {number} width - * @returns {SafeResourceUrl} - */ - public buildThumbnailUrl(file: File, height: number, width: number): SafeResourceUrl { - return this.sanitizer.bypassSecurityTrustResourceUrl( - `thumb://${file.hash}?width=${250}&height=${250}`) - } + /** + * Builds a safe thumbnail url that accesses custom scheme for thumbnails + * @param {File} file + * @param {number} height + * @param {number} width + * @returns {SafeResourceUrl} + */ + public buildThumbnailUrl(file: File, height: number, width: number): SafeResourceUrl { + return this.sanitizer.bypassSecurityTrustResourceUrl( + `thumb://${file.hash}?width=${250}&height=${250}`) + } - /** - * Builds a safe content url that accesses custom scheme for thumbnails - * @param {File} file - * @returns {SafeResourceUrl} - */ - public buildContentUrl(file: File): SafeResourceUrl { - return this.sanitizer.bypassSecurityTrustResourceUrl( - `content://${file.hash}`) - } + /** + * Builds a safe content url that accesses custom scheme for thumbnails + * @param {File} file + * @returns {SafeResourceUrl} + */ + public buildContentUrl(file: File): SafeResourceUrl { + return this.sanitizer.bypassSecurityTrustResourceUrl( + `content://${file.hash}`) + } - /** - * Saves a file locally - * @param {File} file - * @param {string} targetPath - * @returns {Promise} - */ - public async saveFile(file: File, targetPath: string) { - await invoke("plugin:mediarepo|save_file_locally", - {id: file.id, path: targetPath}) - } + /** + * Saves a file locally + * @param {File} file + * @param {string} targetPath + * @returns {Promise} + */ + public async saveFile(file: File, targetPath: string) { + await invoke("plugin:mediarepo|save_file_locally", + {id: file.id, path: targetPath}) + } - /** - * Deletes all thumbnails of a file - * @param {File} file - * @returns {Promise} - */ - public async deleteThumbnails(file: File) { - await invoke("plugin:mediarepo|delete_thumbnails", {id: file.id}); - } + /** + * Deletes all thumbnails of a file + * @param {File} file + * @returns {Promise} + */ + public async deleteThumbnails(file: File) { + await invoke("plugin:mediarepo|delete_thumbnails", {id: file.id}); + } - /** - * Reads the contents of a file and returns the object url for it - * @param {File} file - * @returns {Promise} - */ - public async readFile(file: File): Promise { - const data = await invoke("plugin:mediarepo|read_file", - {hash: file.hash, mimeType: file.mime_type}); - const blob = new Blob([new Uint8Array(data)], {type: file.mime_type}); - const url = URL?.createObjectURL(blob); - return this.sanitizer.bypassSecurityTrustResourceUrl(url); - } + /** + * Reads the contents of a file and returns the object url for it + * @param {File} file + * @returns {Promise} + */ + public async readFile(file: File): Promise { + const data = await invoke("plugin:mediarepo|read_file", + {hash: file.hash, mimeType: file.mime_type}); + const blob = new Blob([new Uint8Array(data)], {type: file.mime_type}); + const url = URL?.createObjectURL(blob); + return this.sanitizer.bypassSecurityTrustResourceUrl(url); + } } diff --git a/mediarepo-ui/src/app/services/import/import.service.spec.ts b/mediarepo-ui/src/app/services/import/import.service.spec.ts index 3166feb..5ab466c 100644 --- a/mediarepo-ui/src/app/services/import/import.service.spec.ts +++ b/mediarepo-ui/src/app/services/import/import.service.spec.ts @@ -1,16 +1,16 @@ -import {TestBed} from '@angular/core/testing'; +import {TestBed} from "@angular/core/testing"; -import {ImportService} from './import.service'; +import {ImportService} from "./import.service"; -describe('ImportService', () => { - let service: ImportService; +describe("ImportService", () => { + let service: ImportService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ImportService); - }); + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ImportService); + }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); + it("should be created", () => { + expect(service).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/services/import/import.service.ts b/mediarepo-ui/src/app/services/import/import.service.ts index c27761f..292d2ea 100644 --- a/mediarepo-ui/src/app/services/import/import.service.ts +++ b/mediarepo-ui/src/app/services/import/import.service.ts @@ -1,35 +1,35 @@ -import {Injectable} from '@angular/core'; +import {Injectable} from "@angular/core"; import {FileOsMetadata} from "../../models/FileOsMetadata"; import {invoke} from "@tauri-apps/api/tauri"; import {AddFileOptions} from "../../models/AddFileOptions"; import {File} from "../../models/File"; @Injectable({ - providedIn: 'root' + providedIn: "root" }) export class ImportService { - constructor() { - } + constructor() { + } - /** - * Resolves paths from the local file system into a list of files that can be imported - * @param {string[]} paths - * @returns {Promise} - */ - public async resolvePathsToFiles(paths: string[]): Promise { - return await invoke( - "plugin:mediarepo|resolve_paths_to_files", {paths}); - } + /** + * Resolves paths from the local file system into a list of files that can be imported + * @param {string[]} paths + * @returns {Promise} + */ + public async resolvePathsToFiles(paths: string[]): Promise { + return await invoke( + "plugin:mediarepo|resolve_paths_to_files", {paths}); + } - /** - * Imports a file from the local file system - * @param {FileOsMetadata} metadata - * @param {AddFileOptions} options - * @returns {Promise} - */ - public async addLocalFile(metadata: FileOsMetadata, options: AddFileOptions): Promise { - return await invoke("plugin:mediarepo|add_local_file", - {metadata, options}); - } + /** + * Imports a file from the local file system + * @param {FileOsMetadata} metadata + * @param {AddFileOptions} options + * @returns {Promise} + */ + public async addLocalFile(metadata: FileOsMetadata, options: AddFileOptions): Promise { + return await invoke("plugin:mediarepo|add_local_file", + {metadata, options}); + } } diff --git a/mediarepo-ui/src/app/services/repository/repository.service.spec.ts b/mediarepo-ui/src/app/services/repository/repository.service.spec.ts index 7eff2d6..9dc4dd6 100644 --- a/mediarepo-ui/src/app/services/repository/repository.service.spec.ts +++ b/mediarepo-ui/src/app/services/repository/repository.service.spec.ts @@ -1,16 +1,16 @@ -import {TestBed} from '@angular/core/testing'; +import {TestBed} from "@angular/core/testing"; -import {RepositoryService} from './repository.service'; +import {RepositoryService} from "./repository.service"; -describe('RepositoryService', () => { - let service: RepositoryService; +describe("RepositoryService", () => { + let service: RepositoryService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(RepositoryService); - }); + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(RepositoryService); + }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); + it("should be created", () => { + expect(service).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/services/repository/repository.service.ts b/mediarepo-ui/src/app/services/repository/repository.service.ts index b709b47..f7e4ebd 100644 --- a/mediarepo-ui/src/app/services/repository/repository.service.ts +++ b/mediarepo-ui/src/app/services/repository/repository.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable} from "@angular/core"; import {Repository} from "../../models/Repository"; import {BehaviorSubject} from "rxjs"; import {invoke} from "@tauri-apps/api/tauri"; @@ -7,131 +7,133 @@ import {Info} from "../../models/Info"; import {ErrorBrokerService} from "../error-broker/error-broker.service"; @Injectable({ - providedIn: 'root' + providedIn: "root" }) export class RepositoryService { - repositories = new BehaviorSubject([]); - public selectedRepository = new BehaviorSubject( - undefined); + repositories = new BehaviorSubject([]); + public selectedRepository = new BehaviorSubject( + undefined); - constructor(private errorBroker: ErrorBrokerService) { - this.registerListener() - } + constructor(private errorBroker: ErrorBrokerService) { + this.registerListener() + } - /// Registers the info listener - async registerListener() { - await listen("info", (event: { payload: Info }) => { - const message = `Connected to ${event.payload.name}, Version: ${event.payload.version}`; - this.errorBroker.showInfo(message); - }); - } + /// Registers the info listener + async registerListener() { + await listen("info", (event: { payload: Info }) => { + const message = `Connected to ${event.payload.name}, Version: ${event.payload.version}`; + this.errorBroker.showInfo(message); + }); + } - /** - * Loads all repositories stored in the settings - * @returns {Promise} - */ - public async loadRepositories() { - await this.loadSelectedRepository(); - let repos = await invoke("plugin:mediarepo|get_repositories"); - this.repositories.next(repos); - } + /** + * Loads all repositories stored in the settings + * @returns {Promise} + */ + public async loadRepositories() { + await this.loadSelectedRepository(); + let repos = await invoke( + "plugin:mediarepo|get_repositories"); + this.repositories.next(repos); + } - /** - * Sets the active repository - * @param {Repository} repo - * @returns {Promise} - */ - public async setRepository(repo: Repository) { - const selectedRepo = this.selectedRepository.getValue() - if (selectedRepo) { - if (selectedRepo.local) { - await this.closeSelectedRepository(); - } else { - await this.disconnectSelectedRepository(); - } + /** + * Sets the active repository + * @param {Repository} repo + * @returns {Promise} + */ + public async setRepository(repo: Repository) { + const selectedRepo = this.selectedRepository.getValue() + if (selectedRepo) { + if (selectedRepo.local) { + await this.closeSelectedRepository(); + } else { + await this.disconnectSelectedRepository(); + } + } + await invoke("plugin:mediarepo|select_repository", {name: repo.name}); + await this.loadRepositories(); } - await invoke("plugin:mediarepo|select_repository", {name: repo.name}); - await this.loadRepositories(); - } - /** - * Disconnects from a remote repository - * @returns {Promise} - */ - public async disconnectSelectedRepository() { - await invoke("plugin:mediarepo|disconnect_repository"); - await this.loadRepositories(); - } + /** + * Disconnects from a remote repository + * @returns {Promise} + */ + public async disconnectSelectedRepository() { + await invoke("plugin:mediarepo|disconnect_repository"); + await this.loadRepositories(); + } - /** - * Closes a local selected repository - * @returns {Promise} - */ - public async closeSelectedRepository() { - await invoke("plugin:mediarepo|close_local_repository"); - await this.loadRepositories(); - } + /** + * Closes a local selected repository + * @returns {Promise} + */ + public async closeSelectedRepository() { + await invoke("plugin:mediarepo|close_local_repository"); + await this.loadRepositories(); + } - /** - * Adds a respository to the repository list in the settings - * @param {string} name - * @param {string} path - * @param address - * @param local - * @returns {Promise} - */ - public async addRepository(name: string, path: string | undefined, address: string | undefined, local: boolean) { - let repos = await invoke("plugin:mediarepo|add_repository", - {name, path, address, local}); - this.repositories.next(repos); - } + /** + * Adds a respository to the repository list in the settings + * @param {string} name + * @param {string} path + * @param address + * @param local + * @returns {Promise} + */ + public async addRepository(name: string, path: string | undefined, address: string | undefined, local: boolean) { + let repos = await invoke( + "plugin:mediarepo|add_repository", + {name, path, address, local}); + this.repositories.next(repos); + } - /** - * Checks if a daemon is running for the specified address - * @param {string} address - * @returns {Promise} - */ - public async checkDaemonRunning(address: string): Promise { - return await invoke("plugin:mediarepo|check_daemon_running", - {address}); - } + /** + * Checks if a daemon is running for the specified address + * @param {string} address + * @returns {Promise} + */ + public async checkDaemonRunning(address: string): Promise { + return await invoke("plugin:mediarepo|check_daemon_running", + {address}); + } - /** - * Checks if a local repository exists - * @param {string} path - * @returns {Promise} - */ - public async checkLocalRepositoryExists(path: string): Promise { - return await invoke( - "plugin:mediarepo|check_local_repository_exists", {path}) - } + /** + * Checks if a local repository exists + * @param {string} path + * @returns {Promise} + */ + public async checkLocalRepositoryExists(path: string): Promise { + return await invoke( + "plugin:mediarepo|check_local_repository_exists", {path}) + } - /** - * Removes a repository from the list of saved repositories - * @param {string} name - * @returns {Promise} - */ - public async removeRepository(name: string): Promise { - await invoke("plugin:mediarepo|remove_repository", {name}); - await this.loadRepositories(); - } + /** + * Removes a repository from the list of saved repositories + * @param {string} name + * @returns {Promise} + */ + public async removeRepository(name: string): Promise { + await invoke("plugin:mediarepo|remove_repository", {name}); + await this.loadRepositories(); + } - /** - * Starts a daemon for the given repository path - * @param {string} repoPath - * @returns {Promise} - */ - public async startDaemon(repoPath: string): Promise { - await invoke("plugin:mediarepo|start_daemon", {repoPath}) - } + /** + * Starts a daemon for the given repository path + * @param {string} repoPath + * @returns {Promise} + */ + public async startDaemon(repoPath: string): Promise { + await invoke("plugin:mediarepo|start_daemon", {repoPath}) + } - public async initRepository(repoPath: string): Promise { - await invoke("plugin:mediarepo|init_repository", {repoPath}); - } + public async initRepository(repoPath: string): Promise { + await invoke("plugin:mediarepo|init_repository", {repoPath}); + } - async loadSelectedRepository() { - let active_repo = await invoke( - "plugin:mediarepo|get_active_repository"); - this.selectedRepository.next(active_repo); - } + async loadSelectedRepository() { + let active_repo = await invoke( + "plugin:mediarepo|get_active_repository"); + this.selectedRepository.next(active_repo); + } } diff --git a/mediarepo-ui/src/app/services/tab/tab.service.spec.ts b/mediarepo-ui/src/app/services/tab/tab.service.spec.ts index f9d64cf..0a8d2fc 100644 --- a/mediarepo-ui/src/app/services/tab/tab.service.spec.ts +++ b/mediarepo-ui/src/app/services/tab/tab.service.spec.ts @@ -1,16 +1,16 @@ -import {TestBed} from '@angular/core/testing'; +import {TestBed} from "@angular/core/testing"; -import {TabService} from './tab.service'; +import {TabService} from "./tab.service"; -describe('TabService', () => { - let service: TabService; +describe("TabService", () => { + let service: TabService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(TabService); - }); + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(TabService); + }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); + it("should be created", () => { + expect(service).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/services/tab/tab.service.ts b/mediarepo-ui/src/app/services/tab/tab.service.ts index 7bb9f3f..e41ecf9 100644 --- a/mediarepo-ui/src/app/services/tab/tab.service.ts +++ b/mediarepo-ui/src/app/services/tab/tab.service.ts @@ -1,17 +1,17 @@ -import {Injectable} from '@angular/core'; +import {Injectable} from "@angular/core"; import {BehaviorSubject} from "rxjs"; @Injectable({ - providedIn: 'root' + providedIn: "root" }) export class TabService { - public selectedTab = new BehaviorSubject(0); + public selectedTab = new BehaviorSubject(0); - constructor() { - } + constructor() { + } - public setSelectedTab(index: number) { - this.selectedTab.next(index); - } + public setSelectedTab(index: number) { + this.selectedTab.next(index); + } } diff --git a/mediarepo-ui/src/app/services/tag/tag.service.spec.ts b/mediarepo-ui/src/app/services/tag/tag.service.spec.ts index 448cc84..adf89e0 100644 --- a/mediarepo-ui/src/app/services/tag/tag.service.spec.ts +++ b/mediarepo-ui/src/app/services/tag/tag.service.spec.ts @@ -1,16 +1,16 @@ -import {TestBed} from '@angular/core/testing'; +import {TestBed} from "@angular/core/testing"; -import {TagService} from './tag.service'; +import {TagService} from "./tag.service"; -describe('TagService', () => { - let service: TagService; +describe("TagService", () => { + let service: TagService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(TagService); - }); + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(TagService); + }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); + it("should be created", () => { + expect(service).toBeTruthy(); + }); }); diff --git a/mediarepo-ui/src/app/services/tag/tag.service.ts b/mediarepo-ui/src/app/services/tag/tag.service.ts index 31d94d2..439b569 100644 --- a/mediarepo-ui/src/app/services/tag/tag.service.ts +++ b/mediarepo-ui/src/app/services/tag/tag.service.ts @@ -1,41 +1,41 @@ -import {Injectable} from '@angular/core'; +import {Injectable} from "@angular/core"; import {invoke} from "@tauri-apps/api/tauri"; import {Tag} from "../../models/Tag"; import {BehaviorSubject} from "rxjs"; @Injectable({ - providedIn: 'root' + providedIn: "root" }) export class TagService { - public tags: BehaviorSubject = new BehaviorSubject([]); + public tags: BehaviorSubject = new BehaviorSubject([]); - constructor() { - } + constructor() { + } - public async loadTags() { - const tags = await invoke("plugin:mediarepo|get_all_tags"); - this.tags.next(tags.map(t => new Tag(t.id, t.name, t.namespace))); - } + public async loadTags() { + const tags = await invoke("plugin:mediarepo|get_all_tags"); + this.tags.next(tags.map(t => new Tag(t.id, t.name, t.namespace))); + } - public async getTagsForFiles(hashes: string[]): Promise { - let tags: Tag[] = [] - if (hashes.length > 0) { - tags = await invoke("plugin:mediarepo|get_tags_for_files", - {hashes}); + public async getTagsForFiles(hashes: string[]): Promise { + let tags: Tag[] = [] + if (hashes.length > 0) { + tags = await invoke("plugin:mediarepo|get_tags_for_files", + {hashes}); + } + return tags.map(t => new Tag(t.id, t.name, t.namespace)); } - return tags.map(t => new Tag(t.id, t.name, t.namespace)); - } - public async createTags(tags: string[]): Promise { - const resultTags = await invoke("plugin:mediarepo|create_tags", - {tags}); - return resultTags.map(t => new Tag(t.id, t.name, t.namespace)); - } + public async createTags(tags: string[]): Promise { + const resultTags = await invoke("plugin:mediarepo|create_tags", + {tags}); + return resultTags.map(t => new Tag(t.id, t.name, t.namespace)); + } - public async changeFileTags(fileId: number, addedTags: number[], removedTags: number[]): Promise { - const tags = await invoke("plugin:mediarepo|change_file_tags", - {id: fileId, addedTags, removedTags}); - return tags.map(t => new Tag(t.id, t.name, t.namespace)); - } + public async changeFileTags(fileId: number, addedTags: number[], removedTags: number[]): Promise { + const tags = await invoke("plugin:mediarepo|change_file_tags", + {id: fileId, addedTags, removedTags}); + return tags.map(t => new Tag(t.id, t.name, t.namespace)); + } } diff --git a/mediarepo-ui/src/environments/environment.prod.ts b/mediarepo-ui/src/environments/environment.prod.ts index 3612073..5d08331 100644 --- a/mediarepo-ui/src/environments/environment.prod.ts +++ b/mediarepo-ui/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true }; diff --git a/mediarepo-ui/src/environments/environment.ts b/mediarepo-ui/src/environments/environment.ts index f56ff47..458476a 100644 --- a/mediarepo-ui/src/environments/environment.ts +++ b/mediarepo-ui/src/environments/environment.ts @@ -3,7 +3,7 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false }; /* diff --git a/mediarepo-ui/src/main.ts b/mediarepo-ui/src/main.ts index 484b5f3..4596ed5 100644 --- a/mediarepo-ui/src/main.ts +++ b/mediarepo-ui/src/main.ts @@ -1,12 +1,12 @@ -import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {enableProdMode} from "@angular/core"; +import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"; -import {AppModule} from './app/app.module'; -import {environment} from './environments/environment'; +import {AppModule} from "./app/app.module"; +import {environment} from "./environments/environment"; if (environment.production) { - enableProdMode(); + enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); + .catch(err => console.error(err)); diff --git a/mediarepo-ui/src/polyfills.ts b/mediarepo-ui/src/polyfills.ts index ae5b7a7..9295036 100644 --- a/mediarepo-ui/src/polyfills.ts +++ b/mediarepo-ui/src/polyfills.ts @@ -57,7 +57,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js'; // Included with Angular CLI. +import "zone.js"; // Included with Angular CLI. /*************************************************************************************************** diff --git a/mediarepo-ui/src/test.ts b/mediarepo-ui/src/test.ts index 7762aae..f17d41f 100644 --- a/mediarepo-ui/src/test.ts +++ b/mediarepo-ui/src/test.ts @@ -1,11 +1,11 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/testing'; -import {getTestBed} from '@angular/core/testing'; +import "zone.js/testing"; +import {getTestBed} from "@angular/core/testing"; import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from "@angular/platform-browser-dynamic/testing"; declare const require: { context(path: string, deep?: boolean, filter?: RegExp): { @@ -16,12 +16,12 @@ declare const require: { // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), - {teardown: {destroyAfterEach: true}}, + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), + {teardown: {destroyAfterEach: true}}, ); // Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); +const context = require.context("./", true, /\.spec\.ts$/); // And load the modules. context.keys().map(context);