update multi-input component

web/ui/dashboard/src/app/components/multi-input/multi-input.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TooltipComponent } from '../tooltip/tooltip.component';
+import { GeneralService } from 'src/app/services/general/general.service';
 
 @Component({
 	selector: 'convoy-multi-input',
@@ -14,12 +15,12 @@ export class MultiInputComponent implements OnInit {
 	@Input('prefilledKeys') prefilledKeys?: string[];
 	@Input('label') label?: string;
 	@Input('tooltip') tooltip?: string;
-	@Input('required') required: 'true' | 'false' = 'false'
+	@Input('required') required: 'true' | 'false' = 'false';
 	@Input('action') action!: 'view' | 'create' | 'update';
 
 	keys: string[] = [];
 
-	constructor() {}
+	constructor(private generalService: GeneralService) {}
 
 	ngOnInit(): void {
 		if (this.prefilledKeys?.length) this.keys = this.prefilledKeys;
@@ -29,22 +30,29 @@ export class MultiInputComponent implements OnInit {
 		const inputField = document.getElementById('input');
 		const inputValue = document.getElementById('input') as HTMLInputElement;
 
+		const commaSeparatedValues = inputValue.value.split(/\s*,\s*/);
+
+		if (commaSeparatedValues && commaSeparatedValues.length > 1) {
+			commaSeparatedValues.forEach(separateValue => {
+				if (!this.keys?.includes(separateValue)) this.keys.push(separateValue);
+			});
+			inputValue.value = '';
+			this.keys = this.keys.filter(e => String(e).trim());
+			this.inputValues.emit(this.keys);
+		}
+
 		inputField?.addEventListener('keydown', e => {
 			const key = e.keyCode || e.charCode;
 			if (key == 8) {
 				e.stopImmediatePropagation();
 				if (this.keys?.length > 0 && !inputValue?.value) this.keys.splice(-1);
 			}
 			if (e.which === 188 || e.key == ' ') {
-				if (this.keys?.includes(inputValue?.value)) {
-					inputValue.value = '';
-					this.keys = this.keys?.filter(e => String(e).trim());
-				} else {
-					this.keys.push(inputValue?.value);
-					inputValue.value = '';
-					this.keys = this.keys.filter(e => String(e).trim());
-					this.inputValues.emit(this.keys);
-				}
+				if (!this.keys?.includes(inputValue?.value)) this.keys.push(inputValue?.value);
+				else this.generalService.showNotification({ message: 'You have entered this key previously', style: 'warning' });
+				inputValue.value = '';
+				this.keys = this.keys.filter(e => String(e).trim());
+				this.inputValues.emit(this.keys);
 				e.preventDefault();
 			}
 		});