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 1c0f147..64a26de 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 @@ -6,20 +6,27 @@
Simulated new args
- - - + {{arg}} cancel - + + + + + + + +
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 1ab2b8f..47dcc43 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,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; + filteredChipOptions: Observable; // 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; diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index c2297bc..56decd9 100644 --- a/src/app/main/main.component.ts +++ b/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; } }); diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index 7420ba6..a613357 100644 --- a/src/app/settings/settings.component.ts +++ b/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; } });