Add frontend wildcard support

TG-17

Signed-off-by: Trivernis <trivernis@protonmail.com>

mediarepo-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediarepo-ui",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

mediarepo-ui/src-tauri/Cargo.lock

@@ -40,7 +40,7 @@ checksum = "8b26702f315f53b6071259e15dd9d64528213b44d61de1ec926eca7715d62203"
 
 [[package]]
 name = "app"
-version = "0.10.0"
+version = "0.10.1"
 dependencies = [
  "mediarepo-api",
  "serde",

mediarepo-ui/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "0.10.0"
+version = "0.10.1"
 description = "A Tauri App"
 authors = [ "you" ]
 license = ""

mediarepo-ui/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
     "package": {
         "productName": "mediarepo-ui",
-        "version": "0.10.0"
+        "version": "0.10.1"
     },
     "build": {
         "distDir": "../dist/mediarepo-ui",
@@ -26,7 +26,7 @@
             "externalBin": [],
             "copyright": "",
             "category": "Productivity",
-            "shortDescription": "A media mangagement tool",
+            "shortDescription": "A media management tool",
             "longDescription": "",
             "deb": {
                 "depends": [],

mediarepo-ui/src/app/components/shared/input/tag-input/tag-input.component.html

@@ -3,7 +3,7 @@
         Enter a tag
     </mat-label>
     <input #tagInput
-           (keydown.enter)="addTagByInput($event)"
+           (keydown)="addTagByInput($event)"
            [formControl]="formControl"
            [matAutocomplete]="auto"
            matInput>

mediarepo-ui/src/app/components/shared/input/tag-input/tag-input.component.ts

@@ -24,6 +24,7 @@ export class TagInputComponent implements OnChanges {
     @Input() availableTags: Tag[] = [];
     @Input() allowNegation: boolean = false;
     @Input() allowInvalid: boolean = false;
+    @Input() allowWildcards: boolean = false;
     @Output() tagAdded = new EventEmitter<string>();
 
     @ViewChild("tagInput") tagInput!: ElementRef<HTMLInputElement>;
@@ -48,9 +49,11 @@ export class TagInputComponent implements OnChanges {
         }
     }
 
-    public addTagByInput(event: any): void {
+    public addTagByInput(event: KeyboardEvent): void {
+        if (event.key === "Enter") {
             this.addTag(this.formControl.value);
         }
+    }
 
     public addTagByAutocomplete(event: MatAutocompleteSelectedEvent): void {
         this.addTag(event.option.value);
@@ -70,18 +73,35 @@ export class TagInputComponent implements OnChanges {
         const negated = normalizedTag.startsWith("-") && this.allowNegation;
         normalizedTag = this.allowNegation ? normalizedTag.replace(/^-/,
             "") : normalizedTag;
+        const containsWildcard = normalizedTag.endsWith("*");
+        normalizedTag = this.allowWildcards ? normalizedTag.replace(/\*\s*$/,
+            "") : normalizedTag;
 
-        return this.tagsForAutocomplete.filter(
+        const autocompleteTags = this.tagsForAutocomplete.filter(
             t => t.includes(normalizedTag))
             .map(t => negated ? "-" + t : t)
             .sort((l, r) => this.compareSuggestionTags(normalizedTag, l, r))
             .slice(0, 20);
+
+        if (containsWildcard) {
+            autocompleteTags.unshift(this.normalizeTag(tag));
+        }
+
+        return autocompleteTags;
     }
 
     private checkTagValid(tag: string): boolean {
         if (this.allowNegation) {
             tag = tag.replace(/^-/, "");
         }
+        if (tag.endsWith("*")) {
+            if (this.allowWildcards) {
+                return this.tagsForAutocomplete.findIndex(
+                    t => t.startsWith(tag.trim().replace(/\*\s*$/, ""))) >= 0;
+            } else {
+                return false;
+            }
+        }
         return this.tagsForAutocomplete.includes(tag);
     }
 

mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html

@@ -14,7 +14,7 @@
             </button>
         </div>
 
-        <app-tag-input (tagAdded)="addSearchTag($event); searchForFiles()" [allowNegation]="true"
+        <app-tag-input [allowWildcards]="true" (tagAdded)="addSearchTag($event); searchForFiles()" [allowNegation]="true"
                        [availableTags]="getValidSearchTags()"
                        class="full-width">
             <button (click)="openFilterDialog()" class="filter-dialog-button" mat-button>

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-dialog.component.html

@@ -13,7 +13,7 @@
         </mat-list>
     </div>
     <mat-divider></mat-divider>
-    <app-tag-input (tagAdded)="this.addFilter($event)" [allowNegation]="true" [availableTags]="this.availableTags"
+    <app-tag-input [allowWildcards]="true" (tagAdded)="this.addFilter($event)" [allowNegation]="true" [availableTags]="this.availableTags"
                    class="tag-input"></app-tag-input>
 </div>
 <div class="dialog-actions" mat-dialog-actions>