Arg modifier chip list now supports auto complete and arg description as the chip tooltip

Fixed bug that caused custom args to reset after exiting arg modifier without hitting cancel

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html

@@ -6,20 +6,27 @@
             <div class="col-12">
                 <mat-card class="mat-elevation-z6">
                     <h6 i18n="Simulated args title">Simulated new args</h6>
-                    <mat-form-field style="width: 100%" color="accent">
                     <mat-chip-list class="example-chip" #chipList aria-label="Args array" cdkDropList cdkDropListDisabled
                             cdkDropListOrientation="horizontal"
                             (cdkDropListDropped)="drop($event)">
-                            <mat-chip *ngFor="let arg of args_array; let i = index;" [selectable]="selectable" [removable]="removable" (removed)="remove(i)" cdkDrag>
+                            <mat-chip [matTooltip]="argsByKey[arg] ? argsByKey[arg]['description'] : null" *ngFor="let arg of args_array; let i = index;" [selectable]="selectable" [removable]="removable" (removed)="remove(i)" cdkDrag>
                                 {{arg}}
                                 <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                             </mat-chip>
                         </mat-chip-list>
-                        <input style="width: 100%;" matInput [matChipInputFor]="chipList"
+                    <mat-form-field style="width: 100%" color="accent">
+                        
+                        <input #chipper style="width: 100%;" [formControl]="chipCtrl" matInput [matAutocomplete]="autochip" [matChipInputFor]="chipList"
                             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                             [matChipInputAddOnBlur]="addOnBlur"
                             (matChipInputTokenEnd)="add($event)">
                     </mat-form-field>
+                    <mat-autocomplete #autochip="matAutocomplete">
+                        <mat-option *ngFor="let arg of filteredChipOptions | async" [value]="arg.key">
+                            <span [innerHTML]="arg.key | highlight : chipCtrl.value"></span>
+                            <button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
+                        </mat-option>
+                    </mat-autocomplete>
                 </mat-card>
             </div>
             <div class="col-12">

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject, Pipe, PipeTransform } from '@angular/core';
+import { Component, OnInit, Inject, Pipe, PipeTransform, ViewChild, AfterViewInit } from '@angular/core';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@@ -7,6 +7,7 @@ import { args, args_info } from './youtubedl_args';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators/map';
 import { startWith } from 'rxjs/operators/startWith';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
 @Pipe({ name: 'highlight' })
 export class HighlightPipe implements PipeTransform {
@@ -28,19 +29,23 @@ export class HighlightPipe implements PipeTransform {
   providers: [HighlightPipe],
   styleUrls: ['./arg-modifier-dialog.component.scss'],
 })
-export class ArgModifierDialogComponent implements OnInit {
+export class ArgModifierDialogComponent implements OnInit, AfterViewInit {
   myGroup = new FormControl();
   firstArg = '';
   secondArg = '';
   secondArgEnabled = false;
   modified_args = '';
   stateCtrl = new FormControl();
+  chipCtrl = new FormControl();
   availableArgs = null;
   argsByCategory = null;
+  argsByKey = null;
   argsInfo = null;
   filteredOptions: Observable<any>;
+  filteredChipOptions: Observable<any>;
 
   // chip list
+  chipInput = '';
   visible = true;
   selectable = true;
   removable = true;
@@ -48,6 +53,8 @@ export class ArgModifierDialogComponent implements OnInit {
   args_array = null;
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
+  @ViewChild( 'chipper', {read: MatAutocompleteTrigger})  autoTrigger: MatAutocompleteTrigger;
+
   static forRoot() {
     return {
         ngModule: ArgModifierDialogComponent,
@@ -72,6 +79,21 @@ export class ArgModifierDialogComponent implements OnInit {
         startWith(''),
         map(val => this.filter(val))
       );
+
+    this.filteredChipOptions = this.chipCtrl.valueChanges
+      .pipe(
+        startWith(''),
+        map(val => this.filter(val))
+      );
+  }
+
+  ngAfterViewInit() {
+    this.autoTrigger.panelClosingActions.subscribe( x => {
+      if (this.autoTrigger.activeOption) {
+        console.log(this.autoTrigger.activeOption.value)
+        this.chipCtrl.setValue(this.autoTrigger.activeOption.value)
+      }
+    } )
   }
 
   // autocomplete filter
@@ -92,6 +114,7 @@ export class ArgModifierDialogComponent implements OnInit {
     }
 
     this.modified_args += this.stateCtrl.value + (this.secondArgEnabled ? ',,' + this.secondArg : '');
+    this.generateArgsArray();
   }
 
   canAddArg() {
@@ -118,6 +141,11 @@ export class ArgModifierDialogComponent implements OnInit {
 
     // converts array of arrays to one array
     const singular_arg_array = [].concat.apply([], arg_arrays);
+    const args_by_key = singular_arg_array.reduce((acc, curr) => {
+      acc[curr.key] = curr;
+      return acc;
+    }, {});
+    this.argsByKey = args_by_key;
 
     this.availableArgs = singular_arg_array;
     this.argsByCategory = all_args;

src/app/main/main.component.ts

@@ -1131,7 +1131,7 @@ export class MainComponent implements OnInit {
       }
     });
     dialogRef.afterClosed().subscribe(new_args => {
-      if (new_args !== null) {
+      if (new_args !== null && new_args !== undefined) {
         this.customArgs = new_args;
       }
     });

src/app/settings/settings.component.ts

@@ -144,7 +144,7 @@ export class SettingsComponent implements OnInit {
      }
    });
    dialogRef.afterClosed().subscribe(new_args => {
-    if (new_args !== null) {
+    if (new_args !== null && new_args !== undefined) {
       this.new_config['Downloader']['custom_args'] = new_args;
     }
    });