verben-authentication-ui 1.0.23 → 1.0.26

package/fesm2022/verben-authentication-ui-src-lib-components-user-management.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, signal, ViewChild, NgModule } from '@angular/core';
-import { Status, ErrorResponse, ObjectState, ConditionOptions } from 'verben-authentication-ui/src/lib/models';
+import { Injectable, EventEmitter, Component, Input, Output, signal, ViewChild, NgModule } from '@angular/core';
+import { ErrorResponse, SearchOperator, SearchPropertySign, SortDirection, Status, ObjectState, ConditionOptions } from 'verben-authentication-ui/src/lib/models';
+import { Subject } from 'rxjs';
 import * as i7 from 'verben-ng-ui';
 import { DataFilterType, ConditionalOptions, DataTableModule, CardModule, SvgModule, DataViewModule, CardDataViewModule, SortTableModule, VisibleColumnModule, TableFilterModule, DataExportModule, DataXportModule, VerbenaInputModule, VerbenaButtonModule, VerbenaBadgeModule, DropDownModule, VerbenaSwitchModule } from 'verben-ng-ui';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Subject } from 'rxjs';
-import * as i1$1 from '@angular/router';
 import * as i4 from 'verben-authentication-ui/src/lib/services';
+import * as i1$1 from '@angular/router';
 import * as i3 from 'verben-authentication-ui/src/lib/components/user-request-approval';
 import { LibUserRequestApprovalModule } from 'verben-authentication-ui/src/lib/components/user-request-approval';
 import * as i6 from '@angular/common';
@@ -120,74 +120,6 @@ const baseStyle = {
     },
 };
 
-class UserManagementFormComponent {
-    fb;
-    // @Input() roles: Role[] = [];
-    // @Input() status: Status[] = [];
-    set currentData(value) {
-        if (value?.data) {
-            this.form.patchValue({
-                MailAddress: value.data.MailAddress || '',
-                FirstName: value.data.FirstName || '',
-                PhoneNumber: value.data.PhoneNumber || '',
-                // Address: value.data.Address || '',
-                RoleID: value.data.RoleID || '',
-                Tags: value.data.Tags || [],
-                Status: value.data.Status || Status.Active,
-            });
-        }
-        else {
-            this.form.reset();
-        }
-    }
-    roles = [];
-    tags = [];
-    switchView = new EventEmitter();
-    onFormSave = new EventEmitter();
-    form;
-    statusOptions = Object.values(Status);
-    constructor(fb) {
-        this.fb = fb;
-        this.form = this.fb.group({
-            MailAddress: ['', { readonly: true }],
-            FirstName: ['', { readonly: true }],
-            PhoneNumber: ['', { readonly: true }],
-            // Address: ['', { readonly: true }],
-            Status: ['', { readonly: true }],
-            RoleID: [''],
-            Tags: [[]],
-        });
-    }
-    ngOnInit() { }
-    onSave() {
-        if (this.form.valid) {
-            // Emit save event with form value
-            console.log('Form saved:', this.form.value);
-            this.onFormSave.emit(this.form.value);
-        }
-    }
-    onDelete() {
-        // Emit delete event
-        console.log('Delete requested');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: { currentData: "currentData", roles: "roles", tags: "tags" }, outputs: { switchView: "switchView", onFormSave: "onFormSave" }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n  <verbena-input\n    label=\"Name:\"\n    name=\"FirstName\"\n    type=\"text\"\n    formControlName=\"FirstName\"\n  />\n  <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n  />\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"E-Mail Address:\"\n    [type]=\"'email'\"\n    formControlName=\"MailAddress\"\n  />\n  <!-- <verbena-input\n    label=\"Address\"\n    name=\"Address\"\n    type=\"text\"\n    formControlName=\"Address\"\n  /> -->\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down\n      label=\"Role\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"roles\"\n      id=\"role\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      formControlName=\"RoleID\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n\n    <verben-drop-down\n      label=\"Tags\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"true\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"tags\"\n      id=\"tags\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      formControlName=\"Tags\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"false\"\n      [showClear]=\"false\"\n      placeholder=\"\"\n      [(options)]=\"statusOptions\"\n      id=\"status\"\n      formControlName=\"Status\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i7.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-user-request-form', template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n  <verbena-input\n    label=\"Name:\"\n    name=\"FirstName\"\n    type=\"text\"\n    formControlName=\"FirstName\"\n  />\n  <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n  />\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"E-Mail Address:\"\n    [type]=\"'email'\"\n    formControlName=\"MailAddress\"\n  />\n  <!-- <verbena-input\n    label=\"Address\"\n    name=\"Address\"\n    type=\"text\"\n    formControlName=\"Address\"\n  /> -->\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down\n      label=\"Role\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"roles\"\n      id=\"role\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      formControlName=\"RoleID\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n\n    <verben-drop-down\n      label=\"Tags\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"true\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"tags\"\n      id=\"tags\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      formControlName=\"Tags\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"false\"\n      [showClear]=\"false\"\n      placeholder=\"\"\n      [(options)]=\"statusOptions\"\n      id=\"status\"\n      formControlName=\"Status\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { currentData: [{
-                type: Input
-            }], roles: [{
-                type: Input
-            }], tags: [{
-                type: Input
-            }], switchView: [{
-                type: Output
-            }], onFormSave: [{
-                type: Output
-            }] } });
-
 class UserManagementService {
     httpService;
     // private readonly BASE_URL = 'https://auth.white360.net/User';
@@ -262,6 +194,28 @@ class UserManagementService {
         const url = `User/DeleteUsers`;
         return this.httpService.delete(`${url}?data=${userIds.join(',')}`);
     }
+    async loadEntities(entity, fields, env, event = null) {
+        var payload = {
+            Fields: fields,
+            SearchKeyValues: [
+                {
+                    PropertyName: 'Code',
+                    EntityValue: '',
+                    Operator: SearchOperator.And,
+                    Sign: SearchPropertySign.EQ,
+                    Sort: SortDirection.Asc,
+                },
+            ],
+        };
+        const res = await this.httpService.post(`SearchDynamic${entity}/0/0`, payload, env);
+        if (res instanceof ErrorResponse) {
+            return [];
+        }
+        else {
+            var result = res.Result;
+            return result;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementService, deps: [{ token: i4.HttpWebRequestService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementService, providedIn: 'root' });
 }
@@ -272,6 +226,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i4.HttpWebRequestService }] });
 
+class UserManagementFormComponent {
+    fb;
+    userManagementService;
+    envService;
+    // @Input() roles: Role[] = [];
+    // @Input() status: Status[] = [];
+    set currentData(value) {
+        if (value?.data) {
+            // Convert comma-separated warehouse codes back to array for dropdown
+            const warehouseCodes = value.data.Warehouses
+                ? value.data.Warehouses.split(',').filter((code) => code.trim())
+                : [];
+            this.form.patchValue({
+                MailAddress: value.data.MailAddress || '',
+                FirstName: value.data.FirstName || '',
+                PhoneNumber: value.data.PhoneNumber || '',
+                // Address: value.data.Address || '',
+                RoleID: value.data.RoleID || '',
+                Tags: value.data.Tags || [],
+                Status: value.data.Status || Status.Active,
+                Warehouses: warehouseCodes,
+            });
+        }
+        else {
+            this.form.reset();
+        }
+    }
+    roles = [];
+    tags = [];
+    switchView = new EventEmitter();
+    onFormSave = new EventEmitter();
+    form;
+    statusOptions = Object.values(Status);
+    warehouses = [];
+    constructor(fb, userManagementService, envService) {
+        this.fb = fb;
+        this.userManagementService = userManagementService;
+        this.envService = envService;
+        this.form = this.fb.group({
+            MailAddress: ['', { readonly: true }],
+            FirstName: ['', { readonly: true }],
+            PhoneNumber: ['', { readonly: true }],
+            // Address: ['', { readonly: true }],
+            Status: ['', { readonly: true }],
+            RoleID: [''],
+            Tags: [[]],
+            Warehouses: [[]],
+        });
+    }
+    ngOnInit() {
+        this.loadWarehouses();
+    }
+    async loadWarehouses() {
+        try {
+            this.warehouses = await this.userManagementService.loadEntities('Warehouse', ['Name', 'Code'], this.envService.environment.RevenueAPI);
+        }
+        catch (error) {
+            console.error('Error loading warehouses:', error);
+            this.warehouses = [];
+        }
+    }
+    onWarehouseChange(event) {
+        // Convert array of warehouse codes to comma-separated string
+        const selectedCodes = event.value;
+        const commaSeparated = selectedCodes ? selectedCodes.join(',') : '';
+        // Update the form with the comma-separated value for saving
+        this.form.patchValue({
+            Warehouses: commaSeparated
+        }, { emitEvent: false });
+    }
+    onSave() {
+        if (this.form.valid) {
+            // Emit save event with form value
+            console.log('Form saved:', this.form.value);
+            this.onFormSave.emit(this.form.value);
+        }
+    }
+    onDelete() {
+        // Emit delete event
+        console.log('Delete requested');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, deps: [{ token: i1.FormBuilder }, { token: UserManagementService }, { token: i4.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: { currentData: "currentData", roles: "roles", tags: "tags" }, outputs: { switchView: "switchView", onFormSave: "onFormSave" }, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\">\n  <verbena-input label=\"Name:\" name=\"FirstName\" type=\"text\" formControlName=\"FirstName\" />\n  <verbena-input label=\"Phone Number:\" name=\"PhoneNumber\" type=\"tel\" formControlName=\"PhoneNumber\" />\n  <verbena-input name=\"MailAddress\" label=\"E-Mail Address:\" [type]=\"'email'\" formControlName=\"MailAddress\" />\n  <!-- <verbena-input\n    label=\"Address\"\n    name=\"Address\"\n    type=\"text\"\n    formControlName=\"Address\"\n  /> -->\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down label=\"Role\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"roles\" id=\"role\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"RoleID\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n\n    <verben-drop-down label=\"Tags\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"tags\" id=\"tags\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"Tags\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"warehouses\">Warehouses</label>\n\n    <verben-drop-down label=\"Warehouses\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"warehouses\" id=\"warehouses\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"Warehouses\" (onChange)=\"onWarehouseChange($event)\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"false\" [showClear]=\"false\"\n      placeholder=\"\" [(options)]=\"statusOptions\" id=\"status\" formControlName=\"Status\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i7.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-request-form', template: "<form [formGroup]=\"form\" class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\">\n  <verbena-input label=\"Name:\" name=\"FirstName\" type=\"text\" formControlName=\"FirstName\" />\n  <verbena-input label=\"Phone Number:\" name=\"PhoneNumber\" type=\"tel\" formControlName=\"PhoneNumber\" />\n  <verbena-input name=\"MailAddress\" label=\"E-Mail Address:\" [type]=\"'email'\" formControlName=\"MailAddress\" />\n  <!-- <verbena-input\n    label=\"Address\"\n    name=\"Address\"\n    type=\"text\"\n    formControlName=\"Address\"\n  /> -->\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down label=\"Role\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"roles\" id=\"role\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"RoleID\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n\n    <verben-drop-down label=\"Tags\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"tags\" id=\"tags\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"Tags\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"warehouses\">Warehouses</label>\n\n    <verben-drop-down label=\"Warehouses\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"warehouses\" id=\"warehouses\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"Warehouses\" (onChange)=\"onWarehouseChange($event)\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"false\" [showClear]=\"false\"\n      placeholder=\"\" [(options)]=\"statusOptions\" id=\"status\" formControlName=\"Status\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: UserManagementService }, { type: i4.EnvironmentService }], propDecorators: { currentData: [{
+                type: Input
+            }], roles: [{
+                type: Input
+            }], tags: [{
+                type: Input
+            }], switchView: [{
+                type: Output
+            }], onFormSave: [{
+                type: Output
+            }] } });
+
 class UserStatusBadgeComponent {
     status = Status.Active;
     badgeConfig() {
@@ -360,6 +413,7 @@ class UserManagementComponent {
                 Address: this.fb.control(''),
                 RoleID: this.fb.control(''),
                 Tags: this.fb.control([]),
+                Warehouses: this.fb.control(''),
                 Status: this.fb.control(''),
             },
             // validatorOrOpts: null,