Trivernis
/
mediarepo
mirror of https://github.com/Trivernis/mediarepo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve file search input

Browse Source 
Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent 329962dde2
commit be2608223c
14 changed files with 176 additions and 48 deletions
Show Stats Download Patch File Download Diff File

1
mediarepo-ui/package.json
Unescape Escape View File

@ -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",

2
mediarepo-ui/src-tauri/Cargo.lock generated
Unescape Escape View File

@ -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",

2
mediarepo-ui/src-tauri/Cargo.toml
Unescape Escape View File

@ -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]

7
mediarepo-ui/src/app/app.module.ts
Unescape Escape View File

@ -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]

32
mediarepo-ui/src/app/components/file-search/file-search.component-theme.scss
Unescape Escape View File

@ -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);
}
}

30
mediarepo-ui/src/app/components/file-search/file-search.component.html
Unescape Escape View File

@ -1,20 +1,20 @@
<mat-form-field class="full-width" #tagSearch appearance="fill">
<mat-chip-list #chipList>
<mat-chip *ngFor="let tag of searchTags" (removed)="removeSearchTag(tag)" [removable]="true">
{{tag.getNormalizedTag()}}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
<input matInput
<div class="tag-input-list-and-actions">
<div class="tag-input-list" #tagInputList>
<div class="tag-input-list-inner">
<div class="tag-input-item" *ngFor="let tag of searchTags" mat-ripple (click)="removeSearchTag(tag)">{{tag.getNormalizedTag()}}</div>
</div>
</div>
<button id="delete-all-tags-button" mat-button (click)="removeAllSearchTags()">
<mat-icon>delete-sweep</mat-icon>
</button>
</div>
<mat-form-field class="full-width" appearance="fill">
<mat-label>Enter tags to filter for</mat-label>
<input matInput
#tagInput
[matChipInputFor]="chipList"
[matChipInputAddOnBlur]="true"
[matChipInputSeparatorKeyCodes]="searchInputSeparators"
(keydown)="addSearchTagByInput($event)"
[matAutocomplete]="auto"
[formControl]="formControl"
(matChipInputTokenEnd)="addSearchTagByChip($event)"/>
[formControl]="formControl"/>
<mat-autocomplete #auto (optionSelected)="addSearchTagByAutocomplete($event)">
<mat-option *ngFor="let tag of suggestionTags | async" [value]="tag">
{{tag}}

45
mediarepo-ui/src/app/components/file-search/file-search.component.scss
Unescape Escape View File

@ -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;
}

51
mediarepo-ui/src/app/components/file-search/file-search.component.ts
Unescape Escape View File

@ -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<string[]>;
private allTags: string[] = [];
@ViewChild('tagInput') tagInput!: ElementRef<HTMLInputElement>;
@ViewChild("tagInput") tagInput!: ElementRef<HTMLInputElement>;
@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();
}
}

8
mediarepo-ui/src/app/pages/home/search-page/search-page.component.html
Unescape Escape View File

@ -1,8 +1,10 @@
<mat-drawer-container class="page">
<mat-drawer mode="side" opened>
<div class="drawer-sidebar-inner">
<app-file-search #filesearch></app-file-search>
<div id="file-tag-list">
<div fxLayout="column" class="drawer-sidebar-inner">
<div id="file-search-input" fxFlex="150px">
<app-file-search #filesearch></app-file-search>
</div>
<div id="file-tag-list" fxFlex fxFlexAlign="start" fxFlexFill>
<h1>Selection Tags</h1>
<mat-selection-list [multiple]="false" *ngIf="tags.length > 0"
(selectionChange)="addSearchTagFromList($event)">

24
mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss
Unescape Escape View File

@ -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%;

2
mediarepo-ui/src/app/services/dataloader/dataloader.service.ts
Unescape Escape View File

@ -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);
}

9
mediarepo-ui/src/app/services/file/file.service.ts
Unescape Escape View File

@ -23,7 +23,14 @@ export class FileService {
}
public async findFiles(tags: TagQuery[]) {
let files = await invoke<File[]>("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<File[]>("plugin:mediarepo|find_files", {tags, sortBy});
this.displayedFiles.next(files);
}

4
mediarepo-ui/src/styles.scss
Unescape Escape View File

@ -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);

7
mediarepo-ui/yarn.lock
Unescape Escape View File

@ -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"

Write Preview
Loading…
Cancel
Save