From 050416773496748d39aa5a9a92d50091be185d6c Mon Sep 17 00:00:00 2001
From: Tzahi12345 <tzahi2@hotmail.com>
Date: Mon, 4 May 2020 15:39:33 -0400
Subject: [PATCH] Arg modifier improvements: args are now shown as removable
 chips which can be directly typed as well (w/o using the adder)

---
 src/app/app.module.ts                         |  2 +
 .../arg-modifier-dialog.component.html        | 15 ++++++-
 .../arg-modifier-dialog.component.ts          | 44 ++++++++++++++++++-
 src/app/main/main.component.ts                |  4 +-
 src/app/settings/settings.component.ts        |  4 +-
 5 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 96b91b07..501a6458 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -52,6 +52,7 @@ import { SubscriptionFileCardComponent } from './subscription/subscription-file-
 import { SubscriptionInfoDialogComponent } from './dialogs/subscription-info-dialog/subscription-info-dialog.component';
 import { SettingsComponent } from './settings/settings.component';
 import { CheckOrSetPinDialogComponent } from './dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
+import {MatChipsModule} from '@angular/material/chips';
 
 import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
@@ -141,6 +142,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
+    MatChipsModule,
     DragDropModule,
     ClipboardModule,
     VgCoreModule,
diff --git a/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html b/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html
index b86db126..1c0f1477 100644
--- a/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html
+++ b/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html
@@ -7,7 +7,18 @@
                 <mat-card class="mat-elevation-z6">
                     <h6 i18n="Simulated args title">Simulated new args</h6>
                     <mat-form-field style="width: 100%" color="accent">
-                        <textarea [disabled]="true" matInput>{{modified_args}}</textarea>
+                        <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>
+                                {{arg}}
+                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+                            </mat-chip>
+                        </mat-chip-list>
+                        <input style="width: 100%;" matInput [matChipInputFor]="chipList"
+                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                            [matChipInputAddOnBlur]="addOnBlur"
+                            (matChipInputTokenEnd)="add($event)">
                     </mat-form-field>
                 </mat-card>
             </div>
@@ -63,6 +74,6 @@
 </mat-dialog-content>
 
 <mat-dialog-actions>
-    <button mat-button mat-dialog-close><ng-container i18n="Arg modifier cancel button">Cancel</ng-container></button>
+    <button mat-button [mat-dialog-close]="null"><ng-container i18n="Arg modifier cancel button">Cancel</ng-container></button>
     <button mat-button color="accent" [mat-dialog-close]="modified_args"><ng-container i18n="Arg modifier modify button">Modify</ng-container></button>
 </mat-dialog-actions>
\ No newline at end of file
diff --git a/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts b/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts
index a5df6e2a..1ab2b8f7 100644
--- a/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts
+++ b/src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts
@@ -1,5 +1,7 @@
-import { Component, OnInit, Inject, Pipe, PipeTransform, NgModule } from '@angular/core';
+import { Component, OnInit, Inject, Pipe, PipeTransform } 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';
 import { FormControl } from '@angular/forms';
 import { args, args_info } from './youtubedl_args';
 import { Observable } from 'rxjs';
@@ -38,6 +40,14 @@ export class ArgModifierDialogComponent implements OnInit {
   argsInfo = null;
   filteredOptions: Observable<any>;
 
+  // chip list
+  visible = true;
+  selectable = true;
+  removable = true;
+  addOnBlur = false;
+  args_array = null;
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+
   static forRoot() {
     return {
         ngModule: ArgModifierDialogComponent,
@@ -51,6 +61,7 @@ export class ArgModifierDialogComponent implements OnInit {
   ngOnInit(): void {
     if (this.data) {
       this.modified_args = this.data.initial_args;
+      this.generateArgsArray();
     }
 
     this.getAllPossibleArgs();
@@ -117,4 +128,35 @@ export class ArgModifierDialogComponent implements OnInit {
     this.stateCtrl.setValue(arg_key);
   }
 
+  // chip list functions
+
+  add(event) {
+    const input = event.input;
+    const arg = event.value;
+    this.args_array.push(arg);
+    if (this.modified_args.length > 0) {
+      this.modified_args += ',,'
+    }
+    this.modified_args += arg;
+    if (input) { input.value = ''; }
+  }
+
+  remove(arg_index) {
+    this.args_array.splice(arg_index, 1);
+    this.modified_args = this.args_array.join(',,');
+  }
+
+  generateArgsArray() {
+    if (this.modified_args.trim().length === 0) {
+      this.args_array = [];
+      return;
+    }
+    this.args_array = this.modified_args.split(',,');
+  }
+
+  drop(event: CdkDragDrop<any>) {
+    moveItemInArray(this.args_array, event.previousIndex, event.currentIndex);
+    this.modified_args = this.args_array.join(',,');
+  }
+
 }
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index 147c6793..c2297bc5 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -1131,8 +1131,8 @@ export class MainComponent implements OnInit {
       }
     });
     dialogRef.afterClosed().subscribe(new_args => {
-      if (new_args) {
-       this.customArgs = new_args;
+      if (new_args !== null) {
+        this.customArgs = new_args;
       }
     });
   }
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
index bc0ec810..7420ba68 100644
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -144,9 +144,9 @@ export class SettingsComponent implements OnInit {
      }
    });
    dialogRef.afterClosed().subscribe(new_args => {
-     if (new_args) {
+    if (new_args !== null) {
       this.new_config['Downloader']['custom_args'] = new_args;
-     }
+    }
    });
  }