Add tag input to file edit sidebar

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent 2fefc65d29
commit 6510e6392a

@ -19,17 +19,7 @@
<mat-divider fxFlex="1em"></mat-divider> <mat-divider fxFlex="1em"></mat-divider>
<div class="tag-input" fxFlex="200px"> <div class="tag-input" fxFlex="200px">
<div class="tag-input-field"> <div class="tag-input-field">
<mat-form-field class="form-field-tag-input" appearance="fill"> <app-tag-input [availableTags]="this.allTags" [allowInvalid]="true" (tagAdded)="this.editTag($event)"></app-tag-input>
<mat-label>{{modeSelect.value}} tag</mat-label>
<input [formControl]="tagInputForm" matInput [matAutocomplete]="auto" (keydown)="this.handleTagInputKeydown($event)" (submit)="this.editTag(tagInputForm.value)">
</mat-form-field>
<mat-autocomplete #auto (optionSelected)="editTagByAutocomplete($event)">
<mat-option *ngFor="let tag of suggestionTags | async" [value]="tag">
{{tag}}
</mat-option>
</mat-autocomplete>
<button mat-icon-button class="add-tag-button"> <button mat-icon-button class="add-tag-button">
<mat-icon *ngIf="editMode === 'Toggle'">change_circle</mat-icon> <mat-icon *ngIf="editMode === 'Toggle'">change_circle</mat-icon>
<mat-icon *ngIf="editMode === 'Add'">add_circle</mat-icon> <mat-icon *ngIf="editMode === 'Add'">add_circle</mat-icon>

@ -1,16 +1,13 @@
.file-metadata, .tag-input { .file-metadata, .tag-input {
width: 100%; width: 100%;
mat-form-field {
mat-form-field, app-tag-input {
width: 100%; width: 100%;
} }
mat-form-field.form-field-mode { mat-form-field.form-field-mode {
width: 10em; width: 10em;
} }
mat-form-field.form-field-tag-input {
}
} }
.file-edit-inner { .file-edit-inner {

@ -6,13 +6,9 @@ import {
SimpleChanges, SimpleChanges,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import {FormControl} from "@angular/forms";
import {File} from "../../models/File"; import {File} from "../../models/File";
import {Tag} from "../../models/Tag"; import {Tag} from "../../models/Tag";
import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
import {Observable} from "rxjs";
import {map, startWith} from "rxjs/operators";
import {TagService} from "../../services/tag/tag.service"; import {TagService} from "../../services/tag/tag.service";
import {FileService} from "../../services/file/file.service"; import {FileService} from "../../services/file/file.service";
@ -26,11 +22,9 @@ export class FileEditComponent implements OnInit, OnChanges {
@Input() files: File[] = []; @Input() files: File[] = [];
public tags: Tag[] = []; public tags: Tag[] = [];
private allTags: Tag[] = []; public allTags: Tag[] = [];
private fileTags: {[key: number]: Tag[]} = {}; private fileTags: {[key: number]: Tag[]} = {};
public suggestionTags: Observable<string[]>;
public tagInputForm = new FormControl("");
public editMode: string = "Toggle"; public editMode: string = "Toggle";
@ViewChild("tagScroll") tagScroll!: CdkVirtualScrollViewport; @ViewChild("tagScroll") tagScroll!: CdkVirtualScrollViewport;
@ -40,10 +34,6 @@ export class FileEditComponent implements OnInit, OnChanges {
private tagService: TagService, private tagService: TagService,
private fileService: FileService, private fileService: FileService,
) { ) {
this.suggestionTags = this.tagInputForm.valueChanges.pipe(startWith(null),
map(
(tag: string | null) => tag ? this.filterSuggestionTag(
tag) : this.allTags.slice(0, 20).map(t => t.getNormalizedOutput())));
} }
async ngOnInit() { async ngOnInit() {
@ -73,11 +63,6 @@ export class FileEditComponent implements OnInit, OnChanges {
} }
} }
public async editTagByAutocomplete($event: MatAutocompleteSelectedEvent) {
const tag = $event.option.value.trim();
await this.editTag(tag);
}
public async editTag(tag: string): Promise<void> { public async editTag(tag: string): Promise<void> {
if (tag.length > 0) { if (tag.length > 0) {
let tagInstance = this.allTags.find(t => t.getNormalizedOutput() === tag); let tagInstance = this.allTags.find(t => t.getNormalizedOutput() === tag);
@ -97,7 +82,6 @@ export class FileEditComponent implements OnInit, OnChanges {
await this.removeTag(tagInstance); await this.removeTag(tagInstance);
break; break;
} }
this.tagInputForm.setValue("");
} }
} }
@ -140,13 +124,6 @@ export class FileEditComponent implements OnInit, OnChanges {
this.mapFileTagsToTagList(); this.mapFileTagsToTagList();
} }
private filterSuggestionTag(tag: string) {
const allTags = this.allTags.map(t => t.getNormalizedOutput());
return allTags.filter(
t => t.includes(tag))
.slice(0, 20);
}
private async loadFileTags() { private async loadFileTags() {
for (const file of this.files) { for (const file of this.files) {
this.fileTags[file.id] = await this.tagService.getTagsForFiles([file.hash]); this.fileTags[file.id] = await this.tagService.getTagsForFiles([file.hash]);
@ -168,10 +145,4 @@ export class FileEditComponent implements OnInit, OnChanges {
} }
this.tags = tags.sort((a, b) => a.getNormalizedOutput().localeCompare(b.getNormalizedOutput())); this.tags = tags.sort((a, b) => a.getNormalizedOutput().localeCompare(b.getNormalizedOutput()));
} }
public async handleTagInputKeydown($event: KeyboardEvent) {
if ($event.key === "Enter") {
await this.editTag(this.tagInputForm.value);
}
}
} }

Loading…
Cancel
Save