max tags

src/app/pages/entry/edit/edit.page.html

@@ -31,7 +31,8 @@
           </mat-error>
         </mat-form-field>
 
-        <ui-tagspicker [(model)]="entry.tags" placeholder="{{'submission.tags' | i18n}}"></ui-tagspicker>
+        <ui-tagspicker [(model)]="entry.tags" placeholder="{{'submission.tags' | i18n}}" [max]="settings.maxTags">
+        </ui-tagspicker>
 
       </mat-card-content>
       <mat-card-actions>

src/app/pages/entry/edit/edit.page.ts

@@ -7,6 +7,7 @@ import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { TagsService } from 'src/app/services/tags.service';
+import { SettingsService } from 'src/app/services/settings.service';
 
 @Component({
   selector: 'page-entry-edit',
@@ -23,11 +24,13 @@ export class PageEntryEdit implements OnInit {
   working: boolean = false;
   success: boolean = false;
   form: FormGroup;
+  settings: any;
   readonly tagsSeparatorKeysCodes = [ ENTER, COMMA, SPACE ] as const;
   @ViewChild('formDirective') private formDirective: NgForm;
 
   constructor(private entriesService: EntriesService,
     private tagsService: TagsService,
+    private settingsService: SettingsService,
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private snackBar: MatSnackBar) { }
@@ -40,6 +43,10 @@ export class PageEntryEdit implements OnInit {
       text: [ '', Validators.nullValidator ],
     });
 
+    this.settingsService.settings.subscribe((settings) => {
+      this.settings = settings;
+    });
+
     this.form.get('entryType').disable();
 
     this.form.get('entryType').valueChanges.subscribe((value) => {

src/app/pages/submission/submission.page.html

@@ -38,7 +38,8 @@
           </mat-error>
         </mat-form-field>
 
-        <ui-tagspicker [(model)]="tags" placeholder="{{'submission.tags' | i18n}}"></ui-tagspicker>
+        <ui-tagspicker [(model)]="tags" placeholder="{{'submission.tags' | i18n}}" [max]="settings.maxTags">
+        </ui-tagspicker>
 
       </mat-card-content>
       <mat-card-actions>

src/app/pages/submission/submission.page.ts

@@ -5,6 +5,7 @@ import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
 import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { MatChipInputEvent } from '@angular/material/chips';
+import { SettingsService } from 'src/app/services/settings.service';
 
 @Component({
   selector: 'page-submission',
@@ -19,9 +20,11 @@ export class PageSubmission implements OnInit {
   form: FormGroup;
   readonly tagsSeparatorKeysCodes = [ ENTER, COMMA, SPACE ] as const;
   tags: string[] = [];
+  settings: any;
   @ViewChild('formDirective') private formDirective: NgForm;
 
   constructor(private entriesService: EntriesService,
+    private settingsService: SettingsService,
     private router: Router,
     private formBuilder: FormBuilder) { }
 
@@ -33,6 +36,10 @@ export class PageSubmission implements OnInit {
       text: [ '', Validators.nullValidator ],
     });
 
+    this.settingsService.settings.subscribe((settings) => {
+      this.settings = settings;
+    });
+
     this.form.get('entryType').setValue(this.entryType);
 
     this.form.get('entryType').valueChanges.subscribe((value) => {

src/app/ui/entries/entries.ui.html

@@ -25,7 +25,7 @@
         <mat-icon>filter_alt</mat-icon>
       </a>
       <div *ngIf="filterOpen">
-        <ui-tagspicker [(model)]="entries.filter.tag" singleton="true" placeholder="{{'entries.filter.tag' | i18n}}" [change]="boundTagspickerChange"></ui-tagspicker>
+        <ui-tagspicker [(model)]="entries.filter.tag" max="1" placeholder="{{'entries.filter.tag' | i18n}}" [change]="boundTagspickerChange"></ui-tagspicker>
 
         <mat-form-field>
           <input matInput [matDatepicker]="picker" [value]="entries && entries.filter && entries.filter.date"

src/app/ui/entries/entries.ui.scss

@@ -27,4 +27,8 @@ mat-chip mat-icon.mat-icon-inline {
 
 .mat-option .mat-icon {
   margin-right: -2px;
+}
+
+ui-tagspicker {
+  display: inline-block;
 }

src/app/ui/entries/entries.ui.ts

@@ -23,21 +23,13 @@ export class UiEntries implements OnInit {
   searchTags: Observable<Object>;
   boundTagspickerChange: Function;
 
-  searchFormControl = new FormControl();
 
-  readonly separatorKeysCodes = [ ENTER, COMMA, SPACE ] as const;
 
   constructor(private tagsService: TagsService) { }
 
   ngOnInit(): void {
     this.checkFilterOpen();
     this.boundTagspickerChange = this.tagspickerChange.bind(this);
-    this.searchTags = this.searchFormControl
-      .valueChanges
-      .pipe(
-        debounceTime(300),
-        switchMap(value => this.tagsService.search(value))
-      );
   }
 
   checkFilterOpen() {
@@ -54,7 +46,7 @@ export class UiEntries implements OnInit {
 
   tagspickerChange(value: any) {
     console.log("change", value);
-    this.setFilter('tag', value);
+    this.setFilter('tag', value[0]);
   }
 
   setFilter(key: string, value) {

src/app/ui/tags/tagspicker.ui.html

@@ -1,4 +1,4 @@
-<mat-form-field [ngClass]="singleton ? 'singleton' : ''">
+<mat-form-field>
   <mat-chip-list #tagList>
     <mat-chip *ngFor="let tag of tags" [removable]="true" (removed)="removeTag(tag)">
       <mat-icon inline="true">tag</mat-icon>{{tag}}
@@ -6,9 +6,10 @@
         <mat-icon>cancel</mat-icon>
       </button>
     </mat-chip>
-    <input *ngIf="!singleton || !tags || tags.length < 1" #tagsInput placeholder="{{placeholder}}"
+    <input *ngIf="max == 0 || !tags || tags.length < max" #tagsInput placeholder="{{placeholder}}"
       [formControl]="searchFormControl" [matAutocomplete]="auto" [matChipInputFor]="tagList"
       [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addInputTag($event)">
+      <mat-hint *ngIf="max > 1" align="end">{{tags && tags.length || 0}}/{{max}}</mat-hint>
   </mat-chip-list>
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addOptionTag($event)">
     <mat-option *ngFor="let option of searchTags | async" [value]="option">

src/app/ui/tags/tagspicker.ui.ts

@@ -18,7 +18,7 @@ export class UiTagsPicker implements OnInit {
   @Input() change: Function;
   @Input() model: any;
   @Input() placeholder: string;
-  @Input() singleton: boolean = false;
+  @Input() max: number = 0;
   tags: string[] = [];
   searchTags: Observable<Object>;
 
@@ -37,13 +37,7 @@ export class UiTagsPicker implements OnInit {
         switchMap(value => this.tagsService.search(value))
       );
 
-    if (this.singleton) {
-      if (this.model) {
-        this.tags = [ this.model ];
-      }
-    } else {
-      this.tags = this.model || [];
-    }
+    this.tags = this.model || [];
   }
 
   addTag(tag: string) {
@@ -51,14 +45,11 @@ export class UiTagsPicker implements OnInit {
       tag = tag.replace('#', '');
     }
     tag = tag.split('#').join('-');
-    if (tag && this.tags.indexOf(tag) == -1) {
+    if (tag && this.tags.indexOf(tag) == -1 && (this.max == 0 || this.tags.length < this.max)) {
       this.tags.push(tag);
     }
-    if (this.singleton) {
-      this.model = this.tags && this.tags[ 0 ] || undefined;
-    } else {
-      this.model = this.tags;
-    }
+
+    this.model = this.tags;
     if (this.change) {
       this.change(this.model);
     }
@@ -80,11 +71,7 @@ export class UiTagsPicker implements OnInit {
       this.tags.splice(index, 1);
     }
 
-    if (this.singleton) {
-      this.model = undefined;
-    } else {
-      this.model = this.tags;
-    }
+    this.model = this.tags;
 
     if (this.change) {
       this.change(this.model);