diff --git a/mediarepo-ui/package.json b/mediarepo-ui/package.json index 0b68184..0bcd415 100644 --- a/mediarepo-ui/package.json +++ b/mediarepo-ui/package.json @@ -17,6 +17,7 @@ "@angular/common": "~12.2.0", "@angular/compiler": "~12.2.0", "@angular/core": "~12.2.0", + "@angular/flex-layout": "^12.0.0-beta.35", "@angular/forms": "~12.2.0", "@angular/material": "12.2.9", "@angular/platform-browser": "~12.2.0", diff --git a/mediarepo-ui/src-tauri/Cargo.lock b/mediarepo-ui/src-tauri/Cargo.lock index 312f22f..f823db1 100644 --- a/mediarepo-ui/src-tauri/Cargo.lock +++ b/mediarepo-ui/src-tauri/Cargo.lock @@ -1581,7 +1581,7 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f" [[package]] name = "mediarepo-api" version = "0.1.0" -source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=547947b05a28bb8a9191d3691d91dc7e3c68af0f#547947b05a28bb8a9191d3691d91dc7e3c68af0f" +source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=476b9d152457f78c73f6f6a36c2421cbce9c9194#476b9d152457f78c73f6f6a36c2421cbce9c9194" dependencies = [ "async-trait", "chrono", diff --git a/mediarepo-ui/src-tauri/Cargo.toml b/mediarepo-ui/src-tauri/Cargo.toml index 52a2d26..2ce7fe9 100644 --- a/mediarepo-ui/src-tauri/Cargo.toml +++ b/mediarepo-ui/src-tauri/Cargo.toml @@ -30,7 +30,7 @@ features = ["env-filter"] [dependencies.mediarepo-api] git = "https://github.com/Trivernis/mediarepo-api.git" -rev = "547947b05a28bb8a9191d3691d91dc7e3c68af0f" +rev = "476b9d152457f78c73f6f6a36c2421cbce9c9194" features = ["tauri-plugin"] [features] diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts index e386a8f..62057b4 100644 --- a/mediarepo-ui/src/app/app.module.ts +++ b/mediarepo-ui/src/app/app.module.ts @@ -30,6 +30,8 @@ import {MatAutocompleteModule} from "@angular/material/autocomplete"; import { FileSearchComponent } from './components/file-search/file-search.component'; import {MatTabsModule} from "@angular/material/tabs"; import { SearchPageComponent } from './pages/home/search-page/search-page.component'; +import {FlexModule, GridModule} from "@angular/flex-layout"; +import {MatRippleModule} from "@angular/material/core"; @NgModule({ declarations: [ @@ -64,7 +66,10 @@ import { SearchPageComponent } from './pages/home/search-page/search-page.compon MatChipsModule, MatIconModule, MatAutocompleteModule, - MatTabsModule + MatTabsModule, + FlexModule, + GridModule, + MatRippleModule ], providers: [], bootstrap: [AppComponent] diff --git a/mediarepo-ui/src/app/components/file-search/file-search.component-theme.scss b/mediarepo-ui/src/app/components/file-search/file-search.component-theme.scss new file mode 100644 index 0000000..7f06ba8 --- /dev/null +++ b/mediarepo-ui/src/app/components/file-search/file-search.component-theme.scss @@ -0,0 +1,32 @@ +@use 'sass:map'; +@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'); + + .tag-input-item { + background-color: dimgrey; + border-radius: 1em; + } + + mat-form-field:focus { + background-color: dimgrey; + } +} + +@mixin typography($theme) { +} + +@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); + } +} diff --git a/mediarepo-ui/src/app/components/file-search/file-search.component.html b/mediarepo-ui/src/app/components/file-search/file-search.component.html index 783e932..e76577f 100644 --- a/mediarepo-ui/src/app/components/file-search/file-search.component.html +++ b/mediarepo-ui/src/app/components/file-search/file-search.component.html @@ -1,20 +1,20 @@ - - - - {{tag.getNormalizedTag()}} - - - - +
+
+
{{tag.getNormalizedTag()}}
+
+
+ + + + Enter tags to filter for + + [formControl]="formControl"/> {{tag}} diff --git a/mediarepo-ui/src/app/components/file-search/file-search.component.scss b/mediarepo-ui/src/app/components/file-search/file-search.component.scss index 47109f6..88db06f 100644 --- a/mediarepo-ui/src/app/components/file-search/file-search.component.scss +++ b/mediarepo-ui/src/app/components/file-search/file-search.component.scss @@ -1,7 +1,46 @@ -#tag-search { - width: 100%; +.full-width { + min-width: 100%; + width: auto; } -.full-width { +.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; +} + +.tag-input-list-and-actions { + 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; +} + +.tag-input-list-inner { + 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; } diff --git a/mediarepo-ui/src/app/components/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/file-search/file-search.component.ts index a8baa87..3ca84a9 100644 --- a/mediarepo-ui/src/app/components/file-search/file-search.component.ts +++ b/mediarepo-ui/src/app/components/file-search/file-search.component.ts @@ -1,9 +1,13 @@ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import { + AfterViewChecked, + Component, + ElementRef, + ViewChild +} from '@angular/core'; import {TagService} from "../../services/tag/tag.service"; import {FileService} from "../../services/file/file.service"; import {FormControl} from "@angular/forms"; -import {COMMA, ENTER} from "@angular/cdk/keycodes"; -import {MatChipInputEvent} from "@angular/material/chips"; +import {COMMA} from "@angular/cdk/keycodes"; import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete"; import {map, startWith} from "rxjs/operators"; import {Observable} from "rxjs"; @@ -14,7 +18,10 @@ import {TagQuery} from "../../models/TagQuery"; templateUrl: './file-search.component.html', styleUrls: ['./file-search.component.scss'] }) -export class FileSearchComponent { +export class FileSearchComponent implements AfterViewChecked { + public ngAfterViewChecked(): void { + this.inputList.nativeElement.scrollLeft = this.inputList.nativeElement.scrollWidth; + } public searchInputSeparators = [COMMA]; public formControl = new FormControl(); @@ -22,15 +29,19 @@ export class FileSearchComponent { public suggestionTags: Observable; private allTags: string[] = []; - @ViewChild('tagInput') tagInput!: ElementRef; + @ViewChild("tagInput") tagInput!: ElementRef; + @ViewChild("tagInputList") inputList!: ElementRef; constructor(private tagService: TagService, private fileService: FileService) { this.tagService.tags.subscribe( (tag) => this.allTags = tag.map(t => t.getNormalizedOutput())); - this.suggestionTags = this.formControl.valueChanges.pipe(startWith(null), map( - (tag: string | null) => tag ? this.allTags.filter( - (t: string) => t.includes(tag.replace(/^-/g, ''))).map((t) => tag.startsWith("-")? "-" + t : t).slice(0, 20) : this.allTags.slice(0, 20))); + this.suggestionTags = this.formControl.valueChanges.pipe(startWith(null), + map( + (tag: string | null) => tag ? this.allTags.filter( + (t: string) => t.includes(tag.replace(/^-/g, ''))) + .map((t) => tag.startsWith("-") ? "-" + t : t) + .slice(0, 20) : this.allTags.slice(0, 20))); } public async searchForFiles() { @@ -45,6 +56,11 @@ export class FileSearchComponent { } } + async removeAllSearchTags() { + this.searchTags = []; + await this.searchForFiles(); + } + async removeSearchTag(tag: TagQuery) { const index = this.searchTags.indexOf(tag); if (index >= 0) { @@ -53,13 +69,15 @@ export class FileSearchComponent { await this.searchForFiles(); } - async addSearchTagByChip(event: MatChipInputEvent) { - const tag = event.value.trim(); - if (tag.length > 0 && this.allTags.includes(tag.replace(/-/g, ''))) { - this.addSearchTag(tag); - event.chipInput?.clear(); - this.formControl.setValue(null); - await this.searchForFiles(); } + async addSearchTagByInput(event: KeyboardEvent) { + if (event.key === "Enter") { + const tag = (this.formControl.value as string ?? "").trim(); + if (tag.length > 0 && this.allTags.includes(tag.replace(/-/g, ''))) { + this.addSearchTag(tag); + this.formControl.setValue(null); + await this.searchForFiles(); + } + } } async addSearchTagByAutocomplete(event: MatAutocompleteSelectedEvent) { @@ -67,5 +85,6 @@ export class FileSearchComponent { this.addSearchTag(tag); this.formControl.setValue(null); this.tagInput.nativeElement.value = ''; - await this.searchForFiles(); } + await this.searchForFiles(); + } } diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html index 050dbb4..f22dc4a 100644 --- a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html +++ b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html @@ -1,8 +1,10 @@ -
- -
+
+
+ +
+

Selection Tags

diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss index 0596f00..179cb35 100644 --- a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss +++ b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss @@ -1,14 +1,28 @@ -#file-tag-list { - height: calc(100% - 8em); - overflow: auto; -} - .drawer-sidebar-inner { height: 100%; width: 100%; display: block; } +#file-search-input { + width: 100%; + overflow: hidden; +} + +app-file-search { + display: block; + width: 100%; +} + +#file-tag-list { + height: 100%; + overflow-y: auto; +} + +mat-selection-list { + height: 100%; +} + mat-drawer { height: 100%; width: 25%; diff --git a/mediarepo-ui/src/app/services/dataloader/dataloader.service.ts b/mediarepo-ui/src/app/services/dataloader/dataloader.service.ts index 208b6da..ecd78ef 100644 --- a/mediarepo-ui/src/app/services/dataloader/dataloader.service.ts +++ b/mediarepo-ui/src/app/services/dataloader/dataloader.service.ts @@ -18,7 +18,7 @@ export class DataloaderService { public async loadData() { try { await this.tagService.loadTags(); - await this.fileService.getFiles(); + await this.fileService.findFiles([]); } catch (err) { this.erroBroker.showError(err); } diff --git a/mediarepo-ui/src/app/services/file/file.service.ts b/mediarepo-ui/src/app/services/file/file.service.ts index 439e96b..833b50c 100644 --- a/mediarepo-ui/src/app/services/file/file.service.ts +++ b/mediarepo-ui/src/app/services/file/file.service.ts @@ -23,7 +23,14 @@ export class FileService { } public async findFiles(tags: TagQuery[]) { - let files = await invoke("plugin:mediarepo|find_files", {tags}); + const sortBy: any[] = [ + {Namespace: {tag: "creator", direction: "Descending"}}, + {Namespace: {tag: "series", direction: "Ascending"}}, + {Namespace: {tag: "title", direction: "Ascending"}}, + {Namespace: {tag: "page", direction: "Ascending"}}, + {Namespace: {tag: "panel", direction: "Ascending"}}, + ]; + let files = await invoke("plugin:mediarepo|find_files", {tags, sortBy}); this.displayedFiles.next(files); } diff --git a/mediarepo-ui/src/styles.scss b/mediarepo-ui/src/styles.scss index 7d686ba..a251b62 100644 --- a/mediarepo-ui/src/styles.scss +++ b/mediarepo-ui/src/styles.scss @@ -2,6 +2,7 @@ @use "~@angular/material" as mat; @use 'src/app/app.component-theme' as app; @use 'src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme' as file-grid-entry; +@use 'src/app/components/file-search/file-search.component-theme' as file-search; @include mat.core(); $theme: mat.define-dark-theme(( @@ -9,7 +10,7 @@ $theme: mat.define-dark-theme(( primary: mat.define-palette(mat.$deep-purple-palette), accent: mat.define-palette(mat.$green-palette), warn: mat.define-palette(mat.$red-palette), - background: mat.define-palette(mat.$grey-palette) + background: mat.define-palette(mat.$blue-grey-palette) ), typography: mat.define-typography-config( $font-family: 'Noto Sans', @@ -19,3 +20,4 @@ $theme: mat.define-dark-theme(( @include mat.all-component-themes($theme); @include app.theme($theme); @include file-grid-entry.theme($theme); +@include file-search.theme($theme); diff --git a/mediarepo-ui/yarn.lock b/mediarepo-ui/yarn.lock index 1621deb..fcc1285 100644 --- a/mediarepo-ui/yarn.lock +++ b/mediarepo-ui/yarn.lock @@ -264,6 +264,13 @@ dependencies: tslib "^2.2.0" +"@angular/flex-layout@^12.0.0-beta.35": + version "12.0.0-beta.35" + resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-12.0.0-beta.35.tgz#b52c3c82608cbb92a119f8dcde2a5b98186fe558" + integrity sha512-nPi2MGDFuCacwWHqxF/G7lUJd2X99HbLjjUvKXnyLwyCIVgH1sfS52su2wYbVYWJRqAVAB2/VMlrtW8Khr8hDA== + dependencies: + tslib "^2.1.0" + "@angular/forms@~12.2.0": version "12.2.9" resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-12.2.9.tgz#6d39b03413e420d3c3914ac018bc6f6f90ead39a"