tango-app-ui-manage-users 3.7.0-alpha.6 → 3.7.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/tango-manage-users/add-user-popup/add-user-popup.component.mjs +1 -16
- package/esm2022/lib/components/tango-manage-users/assign-store-popup/assign-store-popup.component.mjs +5 -5
- package/esm2022/lib/components/tango-manage-users/brand-user/brand-user.component.mjs +10 -6
- package/esm2022/lib/components-v2/add-users/add-users.component.mjs +4 -4
- package/esm2022/lib/components-v2/teams-creation/teams-creation.component.mjs +11 -17
- package/esm2022/lib/components-v2/teams-list/teams-list.component.mjs +4 -4
- package/esm2022/lib/services-v2/manage-users.service.mjs +2 -2
- package/fesm2022/tango-app-ui-manage-users.mjs +30 -47
- package/fesm2022/tango-app-ui-manage-users.mjs.map +1 -1
- package/lib/components/tango-manage-users/brand-user/brand-user.component.d.ts +1 -0
- package/lib/components-v2/add-users/add-users.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -76,7 +76,7 @@ class ManageUsersService {
|
|
|
76
76
|
updateTeam(data) {
|
|
77
77
|
return this.http
|
|
78
78
|
.put(`${this.teamsApiUrl}/update/${data.teamId}`, data)
|
|
79
|
-
.pipe(map((response) => response)
|
|
79
|
+
.pipe(map((response) => response));
|
|
80
80
|
}
|
|
81
81
|
getAllTeamsList(params) {
|
|
82
82
|
return this.http.post(`${this.teamsApiUrl}/AllteamsList`, params);
|
|
@@ -912,15 +912,15 @@ class AddUsersComponent {
|
|
|
912
912
|
this.ts.getErrorToast("Special characters are not allowed.");
|
|
913
913
|
}
|
|
914
914
|
}
|
|
915
|
-
|
|
915
|
+
preventClose(event) {
|
|
916
916
|
event.preventDefault();
|
|
917
917
|
}
|
|
918
918
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddUsersComponent, deps: [{ token: ManageUsersService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbActiveModal }, { token: i3.FormBuilder }, { token: UserService }, { token: i4.ToastService }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
919
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddUsersComponent, selector: "lib-add-users", inputs: { type: "type", user: "user", userType: "userType", data: "data" }, ngImport: i0, template: "<div class=\"card pt-0 pb-3 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5 d-flex\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"row w-100\">\r\n <div *ngIf=\"type!=='view' && type!=='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n User</a>\r\n <div class=\"sub-title\">Please add your user details</div>\r\n </div>\r\n <!-- <div *ngIf=\"type==='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit User Details</a>\r\n <div class=\"sub-title\">Please Edit your user details</div>\r\n </div> -->\r\n <div *ngIf=\"type==='view' && type !=='edit'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n <div class=\"sub-title\">View your user details</div>\r\n </div>\r\n <ng-container *ngIf=\"operationType!=='view'\">\r\n <div *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit && type ==='view' && type !=='edit' && user?.role !== 'superadmin'\" class=\"col-md-3 text-end px-0\" (click)=\"editUser()\">\r\n <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3833_85908)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3833_85908\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></button>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"type==='edit' && type !=='view'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n <div class=\"sub-title\">Edit your user details</div>\r\n </div>\r\n <div class=\"w-100 h-0px scroll\">\r\n <div class=\"mt-5\" *ngIf=\"userForm\">\r\n <form [formGroup]=\"userForm\" novalidate=\"novalidate\" (keypress)=\"preventDefault($event)\" class=\"\">\r\n <div class=\"row px-0 me-3\">\r\n <!-- User Name Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"username\" class=\"form-label\">User Name <span class=\"alert-required text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"userName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\" (paste)=\"omitSpecialCharPaste($event)\">\r\n <div *ngIf=\"userForm.get('userName')?.invalid && (userForm.get('userName')?.dirty)\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('userName')?.errors?.['required']\">User Name is required.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Email Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required text-danger\">*</span></label>\r\n <input type=\"email\" class=\"form-control\" id=\"email\" formControlName=\"email\" autocomplete=\"off\">\r\n <div *ngIf=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('email')?.errors?.['required']\">Email is required.</small>\r\n <small *ngIf=\"userForm.get('email')?.errors?.['pattern']\">Invalid email format.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Number Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"contact\" class=\"form-label\">Contact Number <span class=\"alert-required text-danger\">*</span></label>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n <select class=\"form-select ps-3 pe-8\" id=\"inputGroupSelect01\" formControlName=\"countryCode\">\r\n <option *ngFor=\"let country of countryList\" [value]=\"country.phonecode\">\r\n {{country.name}} ({{country.phonecode}})\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n <input type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\"\r\n id=\"mobileNumber\" autocomplete=\"off\" formControlName=\"mobileNumber\" minlength=\"8\" maxlength=\"13\">\r\n <div *ngIf=\"userForm.get('mobileNumber')?.invalid && userForm.get('mobileNumber')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['required']\">Contact Number is required.</small>\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['minlength']\">Contact Number must be at least 8 digits.</small>\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['maxlength']\">Contact Number cannot exceed 13 digits.</small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Role Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"role\" class=\"form-label\">Role <span class=\"alert-required text-danger\">*</span></label>\r\n <select class=\"form-select\" formControlName=\"role\" (change)=\"onRoleChange(userForm.get('role')?.value)\">\r\n <option value=\"admin\">Admin</option>\r\n <option value=\"user\">User</option>\r\n </select>\r\n <div *ngIf=\"userForm.get('role')?.invalid && userForm.get('role')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('role')?.errors?.['required']\">Role is required.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Add to Team Field -->\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\" *ngIf=\"this.userType !=='tango'\">\r\n <label for=\"teamLead\" class=\"form-label teams-title\">Add to a team</label>\r\n <team-select [items]=\"teamList\" [multi]=\"true\" [searchField]=\"'teamName'\" [idField]=\"'_id'\" [disabled]=\"type === 'view' ? true : false\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedUser\"></team-select>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"userForm.get('role')?.value === 'admin'\">\r\n\r\n <h3 class=\"teams-title\" *ngIf=\"getPermissions().length\">Access for Admin</h3>\r\n <ng-container *ngIf=\"getPermissions().length\">\r\n <ng-container formArrayName=\"rolespermission\">\r\n <ng-container *ngFor=\"let rolespermission of getPermissions().controls; let i = index\" [formGroupName]=\"i\">\r\n <div class=\"table-responsive my-2 me-3\">\r\n <div class=\"row w-100\">\r\n <div class=\"title-header mt-4 ms-2\">\r\n {{ camelCaseToText(rolespermission.get('featureName')?.value) }}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"rolespermission.get('modules')\" formArrayName=\"modules\">\r\n <ng-container *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n <table class=\"w-100\">\r\n <tbody>\r\n <tr *ngIf=\"rolespermission.get('featureName')?.value !== 'TangoAdmin'\">\r\n <td class=\"w-50\">{{ camelCaseToText(modules.get('name')?.value) }}</td>\r\n <td class=\"text-start\">\r\n <div class=\"d-inline-flex align-items-center\">\r\n <input type=\"checkbox\" formControlName=\"isAdd\" class=\"cursor-pointer\" (change)=\"handleViewChange(modules)\">\r\n <label class=\"global-label ms-2 mt-auto\">Add</label>\r\n </div>\r\n </td>\r\n <td class=\"text-start\">\r\n <div class=\"d-inline-flex align-items-center\">\r\n <input formControlName=\"isEdit\" type=\"checkbox\" class=\"cursor-pointer\" (change)=\"handleEditChange(modules)\">\r\n <label class=\"global-label ms-2 mt-auto\">Edit</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n <div *ngIf=\"rolespermission.get('featureName')?.value === 'TangoAdmin'\" class=\"row w-100 text-nowrap\">\r\n <div class=\"col-md-4\" *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n <div class=\"d-inline-flex mt-3\">\r\n <input type=\"checkbox\" class=\"cursor-pointer\" formControlName=\"isEdit\">\r\n <label class=\"global-label mb-5 mx-2 mt-1\" style=\"text-wrap:nowrap\">\r\n {{ camelCaseToText(modules.get('name')?.value) }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"type!=='view'\" class=\"d-flex my-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\"\r\n (click)=\"onSubmit()\" [disabled]=\"userForm.invalid || type === 'view'\">Submit</button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}input[type=checkbox]{width:18px!important;height:18px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0;padding-top:12px;padding-right:6px}.global-label{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500;line-height:24px}.w-25{width:40%!important}td{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important;line-height:24px}tr,.add-team{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}input[disabled]{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected", "deselected", "deselectedAll"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
919
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddUsersComponent, selector: "lib-add-users", inputs: { type: "type", user: "user", userType: "userType", data: "data" }, ngImport: i0, template: "<div class=\"card pt-0 pb-3 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5 d-flex\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"row w-100\">\r\n <div *ngIf=\"type!=='view' && type!=='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n User</a>\r\n <div class=\"sub-title\">Please add your user details</div>\r\n </div>\r\n <!-- <div *ngIf=\"type==='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit User Details</a>\r\n <div class=\"sub-title\">Please Edit your user details</div>\r\n </div> -->\r\n <div *ngIf=\"type==='view' && type !=='edit'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n <div class=\"sub-title\">View your user details</div>\r\n </div>\r\n <ng-container *ngIf=\"operationType!=='view'\">\r\n <div *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit && type ==='view' && type !=='edit' && user?.role !== 'superadmin' && user?.isActive == true\" class=\"col-md-3 text-end px-0\" (click)=\"editUser()\">\r\n <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3833_85908)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3833_85908\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></button>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"type==='edit' && type !=='view'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n <div class=\"sub-title\">Edit your user details</div>\r\n </div>\r\n <div class=\"w-100 h-0px scroll\">\r\n <div class=\"mt-5\" *ngIf=\"userForm\">\r\n <form [formGroup]=\"userForm\" novalidate=\"novalidate\" (keydown.enter)=\"preventClose($event)\" class=\"\">\r\n <div class=\"row px-0 me-3\">\r\n <!-- User Name Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"username\" class=\"form-label\">User Name <span class=\"alert-required text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"userName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\" (paste)=\"omitSpecialCharPaste($event)\">\r\n <div *ngIf=\"userForm.get('userName')?.invalid && (userForm.get('userName')?.dirty)\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('userName')?.errors?.['required']\">User Name is required.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Email Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required text-danger\">*</span></label>\r\n <input type=\"email\" class=\"form-control\" id=\"email\" formControlName=\"email\" autocomplete=\"off\">\r\n <div *ngIf=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('email')?.errors?.['required']\">Email is required.</small>\r\n <small *ngIf=\"userForm.get('email')?.errors?.['pattern']\">Invalid email format.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Number Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"contact\" class=\"form-label\">Contact Number <span class=\"alert-required text-danger\">*</span></label>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n <select class=\"form-select ps-3 pe-8\" id=\"inputGroupSelect01\" formControlName=\"countryCode\">\r\n <option *ngFor=\"let country of countryList\" [value]=\"country.phonecode\">\r\n {{country.name}} ({{country.phonecode}})\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n <input type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\"\r\n id=\"mobileNumber\" autocomplete=\"off\" formControlName=\"mobileNumber\" minlength=\"8\" maxlength=\"13\">\r\n <div *ngIf=\"userForm.get('mobileNumber')?.invalid && userForm.get('mobileNumber')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['required']\">Contact Number is required.</small>\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['minlength']\">Contact Number must be at least 8 digits.</small>\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['maxlength']\">Contact Number cannot exceed 13 digits.</small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Role Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"role\" class=\"form-label\">Role <span class=\"alert-required text-danger\">*</span></label>\r\n <select class=\"form-select\" formControlName=\"role\" (change)=\"onRoleChange(userForm.get('role')?.value)\">\r\n <option value=\"admin\">Admin</option>\r\n <option value=\"user\">User</option>\r\n </select>\r\n <div *ngIf=\"userForm.get('role')?.invalid && userForm.get('role')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('role')?.errors?.['required']\">Role is required.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Add to Team Field -->\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\" *ngIf=\"this.userType !=='tango'\">\r\n <label for=\"teamLead\" class=\"form-label teams-title\">Add to a team</label>\r\n <team-select [items]=\"teamList\" [multi]=\"true\" [searchField]=\"'teamName'\" [idField]=\"'_id'\" [disabled]=\"type === 'view' ? true : false\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedUser\"></team-select>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"userForm.get('role')?.value === 'admin'\">\r\n\r\n <h3 class=\"teams-title\" *ngIf=\"getPermissions().length\">Access for Admin</h3>\r\n <ng-container *ngIf=\"getPermissions().length\">\r\n <ng-container formArrayName=\"rolespermission\">\r\n <ng-container *ngFor=\"let rolespermission of getPermissions().controls; let i = index\" [formGroupName]=\"i\">\r\n <div class=\"table-responsive my-2 me-3\">\r\n <div class=\"row w-100\">\r\n <div class=\"title-header mt-4 ms-2\">\r\n {{ camelCaseToText(rolespermission.get('featureName')?.value) }}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"rolespermission.get('modules')\" formArrayName=\"modules\">\r\n <ng-container *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n <table class=\"w-100\">\r\n <tbody>\r\n <tr *ngIf=\"rolespermission.get('featureName')?.value !== 'TangoAdmin'\">\r\n <td class=\"w-50\">{{ camelCaseToText(modules.get('name')?.value) }}</td>\r\n <td class=\"text-start\">\r\n <div class=\"d-inline-flex align-items-center\">\r\n <input type=\"checkbox\" formControlName=\"isAdd\" class=\"cursor-pointer\" (change)=\"handleViewChange(modules)\">\r\n <label class=\"global-label ms-2 mt-auto\">Add</label>\r\n </div>\r\n </td>\r\n <td class=\"text-start\">\r\n <div class=\"d-inline-flex align-items-center\">\r\n <input formControlName=\"isEdit\" type=\"checkbox\" class=\"cursor-pointer\" (change)=\"handleEditChange(modules)\">\r\n <label class=\"global-label ms-2 mt-auto\">Edit</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n <div *ngIf=\"rolespermission.get('featureName')?.value === 'TangoAdmin'\" class=\"row w-100 text-nowrap\">\r\n <div class=\"col-md-4\" *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n <div class=\"d-inline-flex mt-3\">\r\n <input type=\"checkbox\" class=\"cursor-pointer\" formControlName=\"isEdit\">\r\n <label class=\"global-label mb-5 mx-2 mt-1\" style=\"text-wrap:nowrap\">\r\n {{ camelCaseToText(modules.get('name')?.value) }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"type!=='view'\" class=\"d-flex my-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\"\r\n (click)=\"onSubmit()\" [disabled]=\"userForm.invalid || type === 'view'\">Submit</button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}input[type=checkbox]{width:18px!important;height:18px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0;padding-top:12px;padding-right:6px}.global-label{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500;line-height:24px}.w-25{width:40%!important}td{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important;line-height:24px}tr,.add-team{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}input[disabled]{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected", "deselected", "deselectedAll"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
920
920
|
}
|
|
921
921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddUsersComponent, decorators: [{
|
|
922
922
|
type: Component,
|
|
923
|
-
args: [{ selector: 'lib-add-users', template: "<div class=\"card pt-0 pb-3 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5 d-flex\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"row w-100\">\r\n <div *ngIf=\"type!=='view' && type!=='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n User</a>\r\n <div class=\"sub-title\">Please add your user details</div>\r\n </div>\r\n <!-- <div *ngIf=\"type==='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit User Details</a>\r\n <div class=\"sub-title\">Please Edit your user details</div>\r\n </div> -->\r\n <div *ngIf=\"type==='view' && type !=='edit'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n <div class=\"sub-title\">View your user details</div>\r\n </div>\r\n <ng-container *ngIf=\"operationType!=='view'\">\r\n <div *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit && type ==='view' && type !=='edit' && user?.role !== 'superadmin'\" class=\"col-md-3 text-end px-0\" (click)=\"editUser()\">\r\n <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3833_85908)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3833_85908\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></button>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"type==='edit' && type !=='view'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n <div class=\"sub-title\">Edit your user details</div>\r\n </div>\r\n <div class=\"w-100 h-0px scroll\">\r\n <div class=\"mt-5\" *ngIf=\"userForm\">\r\n <form [formGroup]=\"userForm\" novalidate=\"novalidate\" (keypress)=\"preventDefault($event)\" class=\"\">\r\n <div class=\"row px-0 me-3\">\r\n <!-- User Name Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"username\" class=\"form-label\">User Name <span class=\"alert-required text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"userName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\" (paste)=\"omitSpecialCharPaste($event)\">\r\n <div *ngIf=\"userForm.get('userName')?.invalid && (userForm.get('userName')?.dirty)\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('userName')?.errors?.['required']\">User Name is required.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Email Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required text-danger\">*</span></label>\r\n <input type=\"email\" class=\"form-control\" id=\"email\" formControlName=\"email\" autocomplete=\"off\">\r\n <div *ngIf=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('email')?.errors?.['required']\">Email is required.</small>\r\n <small *ngIf=\"userForm.get('email')?.errors?.['pattern']\">Invalid email format.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Number Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"contact\" class=\"form-label\">Contact Number <span class=\"alert-required text-danger\">*</span></label>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n <select class=\"form-select ps-3 pe-8\" id=\"inputGroupSelect01\" formControlName=\"countryCode\">\r\n <option *ngFor=\"let country of countryList\" [value]=\"country.phonecode\">\r\n {{country.name}} ({{country.phonecode}})\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n <input type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\"\r\n id=\"mobileNumber\" autocomplete=\"off\" formControlName=\"mobileNumber\" minlength=\"8\" maxlength=\"13\">\r\n <div *ngIf=\"userForm.get('mobileNumber')?.invalid && userForm.get('mobileNumber')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['required']\">Contact Number is required.</small>\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['minlength']\">Contact Number must be at least 8 digits.</small>\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['maxlength']\">Contact Number cannot exceed 13 digits.</small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Role Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"role\" class=\"form-label\">Role <span class=\"alert-required text-danger\">*</span></label>\r\n <select class=\"form-select\" formControlName=\"role\" (change)=\"onRoleChange(userForm.get('role')?.value)\">\r\n <option value=\"admin\">Admin</option>\r\n <option value=\"user\">User</option>\r\n </select>\r\n <div *ngIf=\"userForm.get('role')?.invalid && userForm.get('role')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('role')?.errors?.['required']\">Role is required.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Add to Team Field -->\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\" *ngIf=\"this.userType !=='tango'\">\r\n <label for=\"teamLead\" class=\"form-label teams-title\">Add to a team</label>\r\n <team-select [items]=\"teamList\" [multi]=\"true\" [searchField]=\"'teamName'\" [idField]=\"'_id'\" [disabled]=\"type === 'view' ? true : false\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedUser\"></team-select>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"userForm.get('role')?.value === 'admin'\">\r\n\r\n <h3 class=\"teams-title\" *ngIf=\"getPermissions().length\">Access for Admin</h3>\r\n <ng-container *ngIf=\"getPermissions().length\">\r\n <ng-container formArrayName=\"rolespermission\">\r\n <ng-container *ngFor=\"let rolespermission of getPermissions().controls; let i = index\" [formGroupName]=\"i\">\r\n <div class=\"table-responsive my-2 me-3\">\r\n <div class=\"row w-100\">\r\n <div class=\"title-header mt-4 ms-2\">\r\n {{ camelCaseToText(rolespermission.get('featureName')?.value) }}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"rolespermission.get('modules')\" formArrayName=\"modules\">\r\n <ng-container *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n <table class=\"w-100\">\r\n <tbody>\r\n <tr *ngIf=\"rolespermission.get('featureName')?.value !== 'TangoAdmin'\">\r\n <td class=\"w-50\">{{ camelCaseToText(modules.get('name')?.value) }}</td>\r\n <td class=\"text-start\">\r\n <div class=\"d-inline-flex align-items-center\">\r\n <input type=\"checkbox\" formControlName=\"isAdd\" class=\"cursor-pointer\" (change)=\"handleViewChange(modules)\">\r\n <label class=\"global-label ms-2 mt-auto\">Add</label>\r\n </div>\r\n </td>\r\n <td class=\"text-start\">\r\n <div class=\"d-inline-flex align-items-center\">\r\n <input formControlName=\"isEdit\" type=\"checkbox\" class=\"cursor-pointer\" (change)=\"handleEditChange(modules)\">\r\n <label class=\"global-label ms-2 mt-auto\">Edit</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n <div *ngIf=\"rolespermission.get('featureName')?.value === 'TangoAdmin'\" class=\"row w-100 text-nowrap\">\r\n <div class=\"col-md-4\" *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n <div class=\"d-inline-flex mt-3\">\r\n <input type=\"checkbox\" class=\"cursor-pointer\" formControlName=\"isEdit\">\r\n <label class=\"global-label mb-5 mx-2 mt-1\" style=\"text-wrap:nowrap\">\r\n {{ camelCaseToText(modules.get('name')?.value) }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"type!=='view'\" class=\"d-flex my-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\"\r\n (click)=\"onSubmit()\" [disabled]=\"userForm.invalid || type === 'view'\">Submit</button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}input[type=checkbox]{width:18px!important;height:18px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0;padding-top:12px;padding-right:6px}.global-label{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500;line-height:24px}.w-25{width:40%!important}td{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important;line-height:24px}tr,.add-team{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}input[disabled]{pointer-events:none;opacity:.5}\n"] }]
|
|
923
|
+
args: [{ selector: 'lib-add-users', template: "<div class=\"card pt-0 pb-3 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5 d-flex\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"row w-100\">\r\n <div *ngIf=\"type!=='view' && type!=='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n User</a>\r\n <div class=\"sub-title\">Please add your user details</div>\r\n </div>\r\n <!-- <div *ngIf=\"type==='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit User Details</a>\r\n <div class=\"sub-title\">Please Edit your user details</div>\r\n </div> -->\r\n <div *ngIf=\"type==='view' && type !=='edit'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n <div class=\"sub-title\">View your user details</div>\r\n </div>\r\n <ng-container *ngIf=\"operationType!=='view'\">\r\n <div *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit && type ==='view' && type !=='edit' && user?.role !== 'superadmin' && user?.isActive == true\" class=\"col-md-3 text-end px-0\" (click)=\"editUser()\">\r\n <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3833_85908)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3833_85908\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></button>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"type==='edit' && type !=='view'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n <div class=\"sub-title\">Edit your user details</div>\r\n </div>\r\n <div class=\"w-100 h-0px scroll\">\r\n <div class=\"mt-5\" *ngIf=\"userForm\">\r\n <form [formGroup]=\"userForm\" novalidate=\"novalidate\" (keydown.enter)=\"preventClose($event)\" class=\"\">\r\n <div class=\"row px-0 me-3\">\r\n <!-- User Name Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"username\" class=\"form-label\">User Name <span class=\"alert-required text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"userName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\" (paste)=\"omitSpecialCharPaste($event)\">\r\n <div *ngIf=\"userForm.get('userName')?.invalid && (userForm.get('userName')?.dirty)\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('userName')?.errors?.['required']\">User Name is required.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Email Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required text-danger\">*</span></label>\r\n <input type=\"email\" class=\"form-control\" id=\"email\" formControlName=\"email\" autocomplete=\"off\">\r\n <div *ngIf=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('email')?.errors?.['required']\">Email is required.</small>\r\n <small *ngIf=\"userForm.get('email')?.errors?.['pattern']\">Invalid email format.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Contact Number Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"contact\" class=\"form-label\">Contact Number <span class=\"alert-required text-danger\">*</span></label>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n <select class=\"form-select ps-3 pe-8\" id=\"inputGroupSelect01\" formControlName=\"countryCode\">\r\n <option *ngFor=\"let country of countryList\" [value]=\"country.phonecode\">\r\n {{country.name}} ({{country.phonecode}})\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n <input type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\"\r\n id=\"mobileNumber\" autocomplete=\"off\" formControlName=\"mobileNumber\" minlength=\"8\" maxlength=\"13\">\r\n <div *ngIf=\"userForm.get('mobileNumber')?.invalid && userForm.get('mobileNumber')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['required']\">Contact Number is required.</small>\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['minlength']\">Contact Number must be at least 8 digits.</small>\r\n <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['maxlength']\">Contact Number cannot exceed 13 digits.</small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Role Field -->\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"role\" class=\"form-label\">Role <span class=\"alert-required text-danger\">*</span></label>\r\n <select class=\"form-select\" formControlName=\"role\" (change)=\"onRoleChange(userForm.get('role')?.value)\">\r\n <option value=\"admin\">Admin</option>\r\n <option value=\"user\">User</option>\r\n </select>\r\n <div *ngIf=\"userForm.get('role')?.invalid && userForm.get('role')?.touched\" class=\"text-danger\">\r\n <small *ngIf=\"userForm.get('role')?.errors?.['required']\">Role is required.</small>\r\n </div>\r\n </div>\r\n \r\n <!-- Add to Team Field -->\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\" *ngIf=\"this.userType !=='tango'\">\r\n <label for=\"teamLead\" class=\"form-label teams-title\">Add to a team</label>\r\n <team-select [items]=\"teamList\" [multi]=\"true\" [searchField]=\"'teamName'\" [idField]=\"'_id'\" [disabled]=\"type === 'view' ? true : false\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedUser\"></team-select>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"userForm.get('role')?.value === 'admin'\">\r\n\r\n <h3 class=\"teams-title\" *ngIf=\"getPermissions().length\">Access for Admin</h3>\r\n <ng-container *ngIf=\"getPermissions().length\">\r\n <ng-container formArrayName=\"rolespermission\">\r\n <ng-container *ngFor=\"let rolespermission of getPermissions().controls; let i = index\" [formGroupName]=\"i\">\r\n <div class=\"table-responsive my-2 me-3\">\r\n <div class=\"row w-100\">\r\n <div class=\"title-header mt-4 ms-2\">\r\n {{ camelCaseToText(rolespermission.get('featureName')?.value) }}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"rolespermission.get('modules')\" formArrayName=\"modules\">\r\n <ng-container *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n <table class=\"w-100\">\r\n <tbody>\r\n <tr *ngIf=\"rolespermission.get('featureName')?.value !== 'TangoAdmin'\">\r\n <td class=\"w-50\">{{ camelCaseToText(modules.get('name')?.value) }}</td>\r\n <td class=\"text-start\">\r\n <div class=\"d-inline-flex align-items-center\">\r\n <input type=\"checkbox\" formControlName=\"isAdd\" class=\"cursor-pointer\" (change)=\"handleViewChange(modules)\">\r\n <label class=\"global-label ms-2 mt-auto\">Add</label>\r\n </div>\r\n </td>\r\n <td class=\"text-start\">\r\n <div class=\"d-inline-flex align-items-center\">\r\n <input formControlName=\"isEdit\" type=\"checkbox\" class=\"cursor-pointer\" (change)=\"handleEditChange(modules)\">\r\n <label class=\"global-label ms-2 mt-auto\">Edit</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n <div *ngIf=\"rolespermission.get('featureName')?.value === 'TangoAdmin'\" class=\"row w-100 text-nowrap\">\r\n <div class=\"col-md-4\" *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n <div class=\"d-inline-flex mt-3\">\r\n <input type=\"checkbox\" class=\"cursor-pointer\" formControlName=\"isEdit\">\r\n <label class=\"global-label mb-5 mx-2 mt-1\" style=\"text-wrap:nowrap\">\r\n {{ camelCaseToText(modules.get('name')?.value) }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"type!=='view'\" class=\"d-flex my-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\"\r\n (click)=\"onSubmit()\" [disabled]=\"userForm.invalid || type === 'view'\">Submit</button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}input[type=checkbox]{width:18px!important;height:18px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0;padding-top:12px;padding-right:6px}.global-label{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500;line-height:24px}.w-25{width:40%!important}td{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important;line-height:24px}tr,.add-team{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}input[disabled]{pointer-events:none;opacity:.5}\n"] }]
|
|
924
924
|
}], ctorParameters: () => [{ type: ManageUsersService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbActiveModal }, { type: i3.FormBuilder }, { type: UserService }, { type: i4.ToastService }, { type: i2.GlobalStateService }], propDecorators: { type: [{
|
|
925
925
|
type: Input
|
|
926
926
|
}], user: [{
|
|
@@ -1116,24 +1116,10 @@ class AddUserPopupComponent {
|
|
|
1116
1116
|
complete: () => { },
|
|
1117
1117
|
});
|
|
1118
1118
|
}
|
|
1119
|
-
// toggleCollapse(id: string): void {
|
|
1120
|
-
// if (this.isExpanded(id)) {
|
|
1121
|
-
// this.expandedItems = this.expandedItems.filter((item) => item !== id);
|
|
1122
|
-
// } else {
|
|
1123
|
-
// this.expandedItems.push(id);
|
|
1124
|
-
// }
|
|
1125
|
-
// }
|
|
1126
1119
|
toggleCollapse(index) {
|
|
1127
1120
|
this.isExpanded[index] = !this.isExpanded[index];
|
|
1128
1121
|
}
|
|
1129
|
-
// isExpanded(id: string): boolean {
|
|
1130
|
-
// return this.expandedItems.includes(id);
|
|
1131
|
-
// }
|
|
1132
|
-
// getArrowIcon(id: string): string {
|
|
1133
|
-
// return this.isExpanded(id) ? "fa-chevron-up" : "fa-chevron-down";
|
|
1134
|
-
// }
|
|
1135
1122
|
addSingleUser() {
|
|
1136
|
-
// this.activeModal.close("");
|
|
1137
1123
|
let obj = {
|
|
1138
1124
|
type: 'add'
|
|
1139
1125
|
};
|
|
@@ -1145,7 +1131,6 @@ class AddUserPopupComponent {
|
|
|
1145
1131
|
});
|
|
1146
1132
|
const data = "single user";
|
|
1147
1133
|
this.dataTosingleuser.emit(data);
|
|
1148
|
-
// this.showsingleuser = true;
|
|
1149
1134
|
}
|
|
1150
1135
|
addUserSubmit() {
|
|
1151
1136
|
this.userService.createUser({ ...this.userForm.value, ...{ clientId: this.$headerFilters.client ? this.$headerFilters.client : this.user_data.clientId } }).subscribe({
|
|
@@ -1692,7 +1677,7 @@ class AssignStorePopupComponent {
|
|
|
1692
1677
|
}
|
|
1693
1678
|
getteamsList() {
|
|
1694
1679
|
this.userService
|
|
1695
|
-
.getAssignteams({ clientId: this.$headerFilters.client })
|
|
1680
|
+
.getAssignteams({ clientId: this.$headerFilters.client, userEmail: this.user?.email })
|
|
1696
1681
|
.subscribe({
|
|
1697
1682
|
next: (res) => {
|
|
1698
1683
|
if (res && res.code == 200) {
|
|
@@ -2008,7 +1993,7 @@ class AssignStorePopupComponent {
|
|
|
2008
1993
|
if (this.uploadPopUp) {
|
|
2009
1994
|
this.uploadPopUp.dismiss();
|
|
2010
1995
|
}
|
|
2011
|
-
this.uploadPopUp = this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static' });
|
|
1996
|
+
this.uploadPopUp = this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static', size: 'lg', windowClass: 'custom-modal-width' });
|
|
2012
1997
|
}
|
|
2013
1998
|
assignSubmit() {
|
|
2014
1999
|
this.apiData = this.selectedValuesArray[0].map((el) => {
|
|
@@ -2117,13 +2102,13 @@ class AssignStorePopupComponent {
|
|
|
2117
2102
|
this.activeModal.close('submit');
|
|
2118
2103
|
}
|
|
2119
2104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AssignStorePopupComponent, deps: [{ token: UserService }, { token: i0.ChangeDetectorRef }, { token: i4.ToastService }, { token: i1$1.NgbActiveModal }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
2120
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AssignStorePopupComponent, selector: "lib-assign-store-popup", inputs: { user: "user" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }], ngImport: i0, template: "<div class=\"card assign-store py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/assign-adduser.svg\">\r\n </div> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n<rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n<rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n<path d=\"M32 37V35C32 33.9391 31.5786 32.9217 30.8284 32.1716C30.0783 31.4214 29.0609 31 28 31H21C19.9391 31 18.9217 31.4214 18.1716 32.1716C17.4214 32.9217 17 33.9391 17 35V37M36 24V30M39 27H33M28.5 23C28.5 25.2091 26.7091 27 24.5 27C22.2909 27 20.5 25.2091 20.5 23C20.5 20.7909 22.2909 19 24.5 19C26.7091 19 28.5 20.7909 28.5 23Z\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n </div>\r\n <a class=\"title mb-3\">Assign {{(select ==='clusters' ? 'as lead to' : 'as user to') | titlecase}}</a>\r\n <!-- <span class=\"sub-title my-2\">Please assign the {{select === 'stores' ? 'store' :(select ==='users' ? 'user' : 'cluster')}}</span> -->\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap \">\r\n\r\n <li class=\"nav-item nav-item1\" (click)=\"select='stores'; storesType($event)\">\r\n <a [ngClass]=\"select === 'stores' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer tab-title me-6\">Stores</a>\r\n </li>\r\n <li class=\"nav-item nav-item1\" (click)=\"select='clusters'; storesType($event)\"><a\r\n [ngClass]=\"select === 'clusters' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer no-border tab-title me-6\">Cluster</a>\r\n </li>\r\n <li class=\"nav-item nav-item1\" (click)=\"select='teams'; storesType($event)\"><a\r\n [ngClass]=\"select === 'teams' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer no-border tab-title me-6\">Teams</a>\r\n </li>\r\n </ul>\r\n <div *ngIf=\"select ==='stores'\" class=\"w-100 my-5\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[0]?.Stores?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-group-select [items]=\"dataObject[0]?.Stores\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onstoreSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[0]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n <div *ngIf=\"select ==='clusters'\" class=\"w-100 my-5\"> \r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[1]?.clusters?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"dataObject[1]?.clusters\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'clusterName'\"\r\n [idField]=\"'clusterName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[1]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n <div *ngIf=\"select ==='teams'\" class=\"w-100 my-5\"> \r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[2]?.teams?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-group-select [items]=\"dataObject[2]?.teams\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'teamName'\"\r\n [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[2]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n\r\n <h2 class=\"store-info fw-bold\">\r\n @if(select ==='stores') {\r\n Store \r\n } @else if(select ==='clusters') {\r\n Cluster\r\n }@else if(select ==='teams') {\r\n Teams\r\n }\r\n Information\r\n </h2>\r\n\r\n <section *ngIf=\"select ==='stores'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th>SPOC Name</th>\r\n <th>Store ID</th>\r\n <th>Application ID</th>\r\n <th>Location</th>\r\n </tr>\r\n </thead>\r\n <tbody> \r\n <tr *ngFor=\"let store of stores;let i=index\">\r\n <td>{{store?.spocName}}</td>\r\n <td>{{store?.storeId}}</td>\r\n <td>{{store?.appId}}</td>\r\n <td>{{store?.location}}</td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[0].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned to the above stores.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='clusters'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th class=\"ms-5\">Cluster Name</th>\r\n <th>Stores</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let cluster of this.selectedValuesArray[1];let i=index;\">\r\n <td class=\"ms-5\">{{cluster?.clusterName}}</td>\r\n <td>{{cluster?.storeNames}} <span *ngIf=\"cluster?.storeListCount > 2\" class=\"justify-content-center align-items-center blend-mode ms-3\">+{{cluster?.storeListCount - 2}}</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[1].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned as a member to the above\r\n clusters.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='teams'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th class=\"ms-5\">Team Name</th>\r\n <th>Users</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let team of this.selectedValuesArray[2];let i=index;\">\r\n <td class=\"ms-5\">{{team?.teamName}}</td>\r\n <td>{{team?.userNames}} <span *ngIf=\"team?.userListCount > 2\" class=\"justify-content-center align-items-center blend-mode ms-3\">+{{team?.userListCount - 2}}</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[2].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned as a member to the above\r\n teams.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='stores'\" class=\"w-100\">\r\n <div class=\"position-relative my-5\">\r\n <hr class=\"hr m-0 border border-gray-400 border-1\">\r\n <div class=\"position-absolute position-or px-10\">or</div>\r\n </div>\r\n <div class=\"d-flex justify-content-start align-items-center\">\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold fs-6\">\r\n <li class=\"user-text\">Use the template to upload multiple stores to users at once.</li>\r\n <li class=\"user-text my-2\"><span class=\"user-text\">Download the template here - </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/storeListTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li> \r\n </ol>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 ms-3 right-bar py-5 d-flex justify-content-center align-items-center flex-column\" >\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n class=\"btn-check\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"persona\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\" class=\" w-50 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n </section>\r\n\r\n <div class=\"d-flex mb-10 w-100 mt-10\" role=\"cluster\">\r\n <button class=\"btn btn-outline w-100 mx-3\" (click)=\"closeModal()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 mx-3\" (click)=\"onSubmit()\">Submit</button>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Bulk Assign</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to assign {{getStoreCounts(excelData)}} {{getStoreCounts(excelData) > 1 ? 'Stores' : 'Store'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup();model.close()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"proceedSubmit();model.close()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".assign-store .form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.assign-store .store-info{color:var(--Gray-700, #344054)!important;font-size:18px!important;font-weight:600;line-height:28px}.assign-store .table-title{line-height:24px!important;color:var(--Gray-500, #344054)!important;font-size:16px!important;font-weight:500!important}.assign-store .table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important}.assign-store .bg-assign-user{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);height:68px;padding:6px 8px 6px 16px}.assign-store td{padding:16px 24px!important}.assign-store .blend-mode{mix-blend-mode:multiply;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-weight:500;line-height:18px;padding:2px 8px}.scroll{overflow-y:auto;overflow-x:hidden}.radio-custom{opacity:0;position:absolute}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:5px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom+.radio-custom-label:before{content:\"\";background:#fff;border:2px solid #00A3FF;display:inline-block;vertical-align:middle;width:20px;height:20px;padding:2px;margin-right:10px;text-align:center}.radio-custom+.radio-custom-label:before{border-radius:50%}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff}.text-muted{content:\"\";margin-top:5.1px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);display:inline-block;vertical-align:middle;width:20px;height:20px;padding:2px;margin-left:0;text-align:center}.ms-0{margin-left:-.75rem!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;min-height:auto!important;max-height:285px!important;overflow:auto;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;width:90%}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.nav-item1 .nav-link1.active{border:none;border-radius:0;background:var(--Primary-50, #EAF8FF);border-bottom:2px solid #009BF3!important;padding:12px}.nav-item1 .nav-link1:hover{border:none}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.position-or{left:50%;top:-10px;background:#fff;transform:translate(-50%)}.subtitle{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:400;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
2105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AssignStorePopupComponent, selector: "lib-assign-store-popup", inputs: { user: "user" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }], ngImport: i0, template: "<div class=\"card assign-store py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/assign-adduser.svg\">\r\n </div> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n<rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n<rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n<path d=\"M32 37V35C32 33.9391 31.5786 32.9217 30.8284 32.1716C30.0783 31.4214 29.0609 31 28 31H21C19.9391 31 18.9217 31.4214 18.1716 32.1716C17.4214 32.9217 17 33.9391 17 35V37M36 24V30M39 27H33M28.5 23C28.5 25.2091 26.7091 27 24.5 27C22.2909 27 20.5 25.2091 20.5 23C20.5 20.7909 22.2909 19 24.5 19C26.7091 19 28.5 20.7909 28.5 23Z\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n </div>\r\n <a class=\"title mb-3\">Assign {{(select ==='clusters' ? 'as lead to' : 'as user to') | titlecase}}</a>\r\n <!-- <span class=\"sub-title my-2\">Please assign the {{select === 'stores' ? 'store' :(select ==='users' ? 'user' : 'cluster')}}</span> -->\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap \">\r\n\r\n <li class=\"nav-item nav-item1\" (click)=\"select='stores'; storesType($event)\">\r\n <a [ngClass]=\"select === 'stores' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer tab-title me-6\">Stores</a>\r\n </li>\r\n <li class=\"nav-item nav-item1\" (click)=\"select='clusters'; storesType($event)\"><a\r\n [ngClass]=\"select === 'clusters' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer no-border tab-title me-6\">Cluster</a>\r\n </li>\r\n <li class=\"nav-item nav-item1\" (click)=\"select='teams'; storesType($event)\"><a\r\n [ngClass]=\"select === 'teams' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer no-border tab-title me-6\">Teams</a>\r\n </li>\r\n </ul>\r\n <div *ngIf=\"select ==='stores'\" class=\"w-100 my-5\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[0]?.Stores?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-group-select [items]=\"dataObject[0]?.Stores\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onstoreSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[0]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n <div *ngIf=\"select ==='clusters'\" class=\"w-100 my-5\"> \r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[1]?.clusters?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"dataObject[1]?.clusters\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'clusterName'\"\r\n [idField]=\"'clusterName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[1]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n <div *ngIf=\"select ==='teams'\" class=\"w-100 my-5\"> \r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[2]?.teams?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-group-select [items]=\"dataObject[2]?.teams\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'teamName'\"\r\n [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[2]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n\r\n <h2 class=\"store-info fw-bold\">\r\n @if(select ==='stores') {\r\n Store \r\n } @else if(select ==='clusters') {\r\n Cluster\r\n }@else if(select ==='teams') {\r\n Teams\r\n }\r\n Information\r\n </h2>\r\n\r\n <section *ngIf=\"select ==='stores'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th>SPOC Name</th>\r\n <th>Store ID</th>\r\n <th>Application ID</th>\r\n <th>Location</th>\r\n </tr>\r\n </thead>\r\n <tbody> \r\n <tr *ngFor=\"let store of stores;let i=index\">\r\n <td>{{store?.spocName}}</td>\r\n <td>{{store?.storeId}}</td>\r\n <td>{{store?.appId}}</td>\r\n <td>{{store?.location}}</td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[0].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned to the above stores.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='clusters'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th class=\"ms-5\">Cluster Name</th>\r\n <th>Stores</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let cluster of this.selectedValuesArray[1];let i=index;\">\r\n <td class=\"ms-5\">{{cluster?.clusterName}}</td>\r\n <td>{{cluster?.storeNames}} <span *ngIf=\"cluster?.storeListCount > 2\" class=\"justify-content-center align-items-center blend-mode ms-3\">+{{cluster?.storeListCount - 2}}</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[1].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned as a member to the above\r\n clusters.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='teams'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th class=\"ms-5\">Team Name</th>\r\n <th>Users</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let team of this.selectedValuesArray[2];let i=index;\">\r\n <td class=\"ms-5\">{{team?.teamName}}</td>\r\n <td>{{team?.userNames}} <span *ngIf=\"team?.userListCount > 2\" class=\"justify-content-center align-items-center blend-mode ms-3\">+{{team?.userListCount - 2}}</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[2].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned as a member to the above\r\n teams.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='stores'\" class=\"w-100\">\r\n <div class=\"position-relative my-5\">\r\n <hr class=\"hr m-0 border border-gray-400 border-1\">\r\n <div class=\"position-absolute position-or px-10\">or</div>\r\n </div>\r\n <div class=\"d-flex justify-content-start align-items-center\">\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold fs-6\">\r\n <li class=\"user-text\">Use the template to upload multiple stores to users at once.</li>\r\n <li class=\"user-text my-2\"><span class=\"user-text\">Download the template here - </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/storeListTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li> \r\n </ol>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 ms-3 right-bar py-5 d-flex justify-content-center align-items-center flex-column\" >\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n class=\"btn-check\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"persona\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\" class=\" w-50 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n </section>\r\n\r\n <div class=\"d-flex mb-10 w-100 mt-10\" role=\"cluster\">\r\n <button class=\"btn btn-outline w-100 mx-3\" (click)=\"closeModal()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 mx-3\" (click)=\"onSubmit()\">Submit</button>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Bulk Assign</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to assign {{getStoreCounts(excelData)}} {{getStoreCounts(excelData) > 1 ? 'Stores' : 'Store'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify-content-end flex-wrap gap-2 pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup();model.close()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"proceedSubmit();model.close()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click();\">Reupload</button>\r\n <input style=\"display: none;;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".assign-store .form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.assign-store .store-info{color:var(--Gray-700, #344054)!important;font-size:18px!important;font-weight:600;line-height:28px}.assign-store .table-title{line-height:24px!important;color:var(--Gray-500, #344054)!important;font-size:16px!important;font-weight:500!important}.assign-store .table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important}.assign-store .bg-assign-user{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);height:68px;padding:6px 8px 6px 16px}.assign-store td{padding:16px 24px!important}.assign-store .blend-mode{mix-blend-mode:multiply;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-weight:500;line-height:18px;padding:2px 8px}.scroll{overflow-y:auto;overflow-x:hidden}.radio-custom{opacity:0;position:absolute}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:5px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom+.radio-custom-label:before{content:\"\";background:#fff;border:2px solid #00A3FF;display:inline-block;vertical-align:middle;width:20px;height:20px;padding:2px;margin-right:10px;text-align:center}.radio-custom+.radio-custom-label:before{border-radius:50%}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff}.text-muted{content:\"\";margin-top:5.1px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);display:inline-block;vertical-align:middle;width:20px;height:20px;padding:2px;margin-left:0;text-align:center}.ms-0{margin-left:-.75rem!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;min-height:auto!important;max-height:285px!important;overflow:auto;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;width:90%}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.nav-item1 .nav-link1.active{border:none;border-radius:0;background:var(--Primary-50, #EAF8FF);border-bottom:2px solid #009BF3!important;padding:12px}.nav-item1 .nav-link1:hover{border:none}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.position-or{left:50%;top:-10px;background:#fff;transform:translate(-50%)}.subtitle{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:400;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
2121
2106
|
}
|
|
2122
2107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AssignStorePopupComponent, decorators: [{
|
|
2123
2108
|
type: Component,
|
|
2124
2109
|
args: [{ selector: "lib-assign-store-popup", host: {
|
|
2125
2110
|
'(document:click)': 'onClick($event)',
|
|
2126
|
-
}, template: "<div class=\"card assign-store py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/assign-adduser.svg\">\r\n </div> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n<rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n<rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n<path d=\"M32 37V35C32 33.9391 31.5786 32.9217 30.8284 32.1716C30.0783 31.4214 29.0609 31 28 31H21C19.9391 31 18.9217 31.4214 18.1716 32.1716C17.4214 32.9217 17 33.9391 17 35V37M36 24V30M39 27H33M28.5 23C28.5 25.2091 26.7091 27 24.5 27C22.2909 27 20.5 25.2091 20.5 23C20.5 20.7909 22.2909 19 24.5 19C26.7091 19 28.5 20.7909 28.5 23Z\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n </div>\r\n <a class=\"title mb-3\">Assign {{(select ==='clusters' ? 'as lead to' : 'as user to') | titlecase}}</a>\r\n <!-- <span class=\"sub-title my-2\">Please assign the {{select === 'stores' ? 'store' :(select ==='users' ? 'user' : 'cluster')}}</span> -->\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap \">\r\n\r\n <li class=\"nav-item nav-item1\" (click)=\"select='stores'; storesType($event)\">\r\n <a [ngClass]=\"select === 'stores' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer tab-title me-6\">Stores</a>\r\n </li>\r\n <li class=\"nav-item nav-item1\" (click)=\"select='clusters'; storesType($event)\"><a\r\n [ngClass]=\"select === 'clusters' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer no-border tab-title me-6\">Cluster</a>\r\n </li>\r\n <li class=\"nav-item nav-item1\" (click)=\"select='teams'; storesType($event)\"><a\r\n [ngClass]=\"select === 'teams' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer no-border tab-title me-6\">Teams</a>\r\n </li>\r\n </ul>\r\n <div *ngIf=\"select ==='stores'\" class=\"w-100 my-5\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[0]?.Stores?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-group-select [items]=\"dataObject[0]?.Stores\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onstoreSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[0]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n <div *ngIf=\"select ==='clusters'\" class=\"w-100 my-5\"> \r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[1]?.clusters?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"dataObject[1]?.clusters\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'clusterName'\"\r\n [idField]=\"'clusterName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[1]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n <div *ngIf=\"select ==='teams'\" class=\"w-100 my-5\"> \r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[2]?.teams?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-group-select [items]=\"dataObject[2]?.teams\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'teamName'\"\r\n [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[2]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n\r\n <h2 class=\"store-info fw-bold\">\r\n @if(select ==='stores') {\r\n Store \r\n } @else if(select ==='clusters') {\r\n Cluster\r\n }@else if(select ==='teams') {\r\n Teams\r\n }\r\n Information\r\n </h2>\r\n\r\n <section *ngIf=\"select ==='stores'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th>SPOC Name</th>\r\n <th>Store ID</th>\r\n <th>Application ID</th>\r\n <th>Location</th>\r\n </tr>\r\n </thead>\r\n <tbody> \r\n <tr *ngFor=\"let store of stores;let i=index\">\r\n <td>{{store?.spocName}}</td>\r\n <td>{{store?.storeId}}</td>\r\n <td>{{store?.appId}}</td>\r\n <td>{{store?.location}}</td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[0].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned to the above stores.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='clusters'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th class=\"ms-5\">Cluster Name</th>\r\n <th>Stores</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let cluster of this.selectedValuesArray[1];let i=index;\">\r\n <td class=\"ms-5\">{{cluster?.clusterName}}</td>\r\n <td>{{cluster?.storeNames}} <span *ngIf=\"cluster?.storeListCount > 2\" class=\"justify-content-center align-items-center blend-mode ms-3\">+{{cluster?.storeListCount - 2}}</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[1].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned as a member to the above\r\n clusters.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='teams'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th class=\"ms-5\">Team Name</th>\r\n <th>Users</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let team of this.selectedValuesArray[2];let i=index;\">\r\n <td class=\"ms-5\">{{team?.teamName}}</td>\r\n <td>{{team?.userNames}} <span *ngIf=\"team?.userListCount > 2\" class=\"justify-content-center align-items-center blend-mode ms-3\">+{{team?.userListCount - 2}}</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[2].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned as a member to the above\r\n teams.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='stores'\" class=\"w-100\">\r\n <div class=\"position-relative my-5\">\r\n <hr class=\"hr m-0 border border-gray-400 border-1\">\r\n <div class=\"position-absolute position-or px-10\">or</div>\r\n </div>\r\n <div class=\"d-flex justify-content-start align-items-center\">\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold fs-6\">\r\n <li class=\"user-text\">Use the template to upload multiple stores to users at once.</li>\r\n <li class=\"user-text my-2\"><span class=\"user-text\">Download the template here - </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/storeListTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li> \r\n </ol>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 ms-3 right-bar py-5 d-flex justify-content-center align-items-center flex-column\" >\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n class=\"btn-check\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"persona\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\" class=\" w-50 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n </section>\r\n\r\n <div class=\"d-flex mb-10 w-100 mt-10\" role=\"cluster\">\r\n <button class=\"btn btn-outline w-100 mx-3\" (click)=\"closeModal()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 mx-3\" (click)=\"onSubmit()\">Submit</button>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Bulk Assign</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to assign {{getStoreCounts(excelData)}} {{getStoreCounts(excelData) > 1 ? 'Stores' : 'Store'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup();model.close()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"proceedSubmit();model.close()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".assign-store .form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.assign-store .store-info{color:var(--Gray-700, #344054)!important;font-size:18px!important;font-weight:600;line-height:28px}.assign-store .table-title{line-height:24px!important;color:var(--Gray-500, #344054)!important;font-size:16px!important;font-weight:500!important}.assign-store .table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important}.assign-store .bg-assign-user{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);height:68px;padding:6px 8px 6px 16px}.assign-store td{padding:16px 24px!important}.assign-store .blend-mode{mix-blend-mode:multiply;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-weight:500;line-height:18px;padding:2px 8px}.scroll{overflow-y:auto;overflow-x:hidden}.radio-custom{opacity:0;position:absolute}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:5px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom+.radio-custom-label:before{content:\"\";background:#fff;border:2px solid #00A3FF;display:inline-block;vertical-align:middle;width:20px;height:20px;padding:2px;margin-right:10px;text-align:center}.radio-custom+.radio-custom-label:before{border-radius:50%}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff}.text-muted{content:\"\";margin-top:5.1px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);display:inline-block;vertical-align:middle;width:20px;height:20px;padding:2px;margin-left:0;text-align:center}.ms-0{margin-left:-.75rem!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;min-height:auto!important;max-height:285px!important;overflow:auto;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;width:90%}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.nav-item1 .nav-link1.active{border:none;border-radius:0;background:var(--Primary-50, #EAF8FF);border-bottom:2px solid #009BF3!important;padding:12px}.nav-item1 .nav-link1:hover{border:none}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.position-or{left:50%;top:-10px;background:#fff;transform:translate(-50%)}.subtitle{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:400;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}\n"] }]
|
|
2111
|
+
}, template: "<div class=\"card assign-store py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/assign-adduser.svg\">\r\n </div> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n<rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n<rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n<path d=\"M32 37V35C32 33.9391 31.5786 32.9217 30.8284 32.1716C30.0783 31.4214 29.0609 31 28 31H21C19.9391 31 18.9217 31.4214 18.1716 32.1716C17.4214 32.9217 17 33.9391 17 35V37M36 24V30M39 27H33M28.5 23C28.5 25.2091 26.7091 27 24.5 27C22.2909 27 20.5 25.2091 20.5 23C20.5 20.7909 22.2909 19 24.5 19C26.7091 19 28.5 20.7909 28.5 23Z\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n </div>\r\n <a class=\"title mb-3\">Assign {{(select ==='clusters' ? 'as lead to' : 'as user to') | titlecase}}</a>\r\n <!-- <span class=\"sub-title my-2\">Please assign the {{select === 'stores' ? 'store' :(select ==='users' ? 'user' : 'cluster')}}</span> -->\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap \">\r\n\r\n <li class=\"nav-item nav-item1\" (click)=\"select='stores'; storesType($event)\">\r\n <a [ngClass]=\"select === 'stores' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer tab-title me-6\">Stores</a>\r\n </li>\r\n <li class=\"nav-item nav-item1\" (click)=\"select='clusters'; storesType($event)\"><a\r\n [ngClass]=\"select === 'clusters' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer no-border tab-title me-6\">Cluster</a>\r\n </li>\r\n <li class=\"nav-item nav-item1\" (click)=\"select='teams'; storesType($event)\"><a\r\n [ngClass]=\"select === 'teams' ? 'active' : ''\"\r\n class=\"nav-link nav-link1 cursor-pointer no-border tab-title me-6\">Teams</a>\r\n </li>\r\n </ul>\r\n <div *ngIf=\"select ==='stores'\" class=\"w-100 my-5\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[0]?.Stores?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-group-select [items]=\"dataObject[0]?.Stores\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onstoreSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[0]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n <div *ngIf=\"select ==='clusters'\" class=\"w-100 my-5\"> \r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[1]?.clusters?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"dataObject[1]?.clusters\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'clusterName'\"\r\n [idField]=\"'clusterName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[1]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n <div *ngIf=\"select ==='teams'\" class=\"w-100 my-5\"> \r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(dataObject[2]?.teams?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-group-select [items]=\"dataObject[2]?.teams\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'teamName'\"\r\n [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n [selectedValues]=\"selectedValuesArray[2]\">\r\n </lib-group-select>\r\n </div>\r\n </div>\r\n\r\n <h2 class=\"store-info fw-bold\">\r\n @if(select ==='stores') {\r\n Store \r\n } @else if(select ==='clusters') {\r\n Cluster\r\n }@else if(select ==='teams') {\r\n Teams\r\n }\r\n Information\r\n </h2>\r\n\r\n <section *ngIf=\"select ==='stores'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th>SPOC Name</th>\r\n <th>Store ID</th>\r\n <th>Application ID</th>\r\n <th>Location</th>\r\n </tr>\r\n </thead>\r\n <tbody> \r\n <tr *ngFor=\"let store of stores;let i=index\">\r\n <td>{{store?.spocName}}</td>\r\n <td>{{store?.storeId}}</td>\r\n <td>{{store?.appId}}</td>\r\n <td>{{store?.location}}</td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[0].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned to the above stores.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='clusters'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th class=\"ms-5\">Cluster Name</th>\r\n <th>Stores</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let cluster of this.selectedValuesArray[1];let i=index;\">\r\n <td class=\"ms-5\">{{cluster?.clusterName}}</td>\r\n <td>{{cluster?.storeNames}} <span *ngIf=\"cluster?.storeListCount > 2\" class=\"justify-content-center align-items-center blend-mode ms-3\">+{{cluster?.storeListCount - 2}}</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[1].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned as a member to the above\r\n clusters.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='teams'\" class=\"w-100\">\r\n <div class=\"table-responsive h-200px mb-3 scroll\">\r\n <table class=\"table bottom-border mt-2 mb-4\">\r\n <thead>\r\n <tr>\r\n <th class=\"ms-5\">Team Name</th>\r\n <th>Users</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let team of this.selectedValuesArray[2];let i=index;\">\r\n <td class=\"ms-5\">{{team?.teamName}}</td>\r\n <td>{{team?.userNames}} <span *ngIf=\"team?.userListCount > 2\" class=\"justify-content-center align-items-center blend-mode ms-3\">+{{team?.userListCount - 2}}</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n @if (selectedValuesArray[2].length) {\r\n <div class=\"d-flex align-items-center bg-assign-user w-100 mb-5 mx-2\">\r\n <span><svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M23.3327 24V22.6667C23.3327 21.9594 23.0517 21.2811 22.5516 20.781C22.0515 20.281 21.3733 20 20.666 20H15.3327C14.6254 20 13.9472 20.281 13.4471 20.781C12.947 21.2811 12.666 21.9594 12.666 22.6667V24M20.666 14.6667C20.666 16.1394 19.4721 17.3333 17.9993 17.3333C16.5266 17.3333 15.3327 16.1394 15.3327 14.6667C15.3327 13.1939 16.5266 12 17.9993 12C19.4721 12 20.666 13.1939 20.666 14.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"mt-2 form-check-label ms-5\">The user {{user?.userName}} is assigned as a member to the above\r\n teams.</span>\r\n </div>\r\n }\r\n </section>\r\n <section *ngIf=\"select ==='stores'\" class=\"w-100\">\r\n <div class=\"position-relative my-5\">\r\n <hr class=\"hr m-0 border border-gray-400 border-1\">\r\n <div class=\"position-absolute position-or px-10\">or</div>\r\n </div>\r\n <div class=\"d-flex justify-content-start align-items-center\">\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold fs-6\">\r\n <li class=\"user-text\">Use the template to upload multiple stores to users at once.</li>\r\n <li class=\"user-text my-2\"><span class=\"user-text\">Download the template here - </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/storeListTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li> \r\n </ol>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 ms-3 right-bar py-5 d-flex justify-content-center align-items-center flex-column\" >\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n class=\"btn-check\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"persona\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\" class=\" w-50 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n </section>\r\n\r\n <div class=\"d-flex mb-10 w-100 mt-10\" role=\"cluster\">\r\n <button class=\"btn btn-outline w-100 mx-3\" (click)=\"closeModal()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 mx-3\" (click)=\"onSubmit()\">Submit</button>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Bulk Assign</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to assign {{getStoreCounts(excelData)}} {{getStoreCounts(excelData) > 1 ? 'Stores' : 'Store'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify-content-end flex-wrap gap-2 pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup();model.close()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"proceedSubmit();model.close()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click();\">Reupload</button>\r\n <input style=\"display: none;;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".assign-store .form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.assign-store .store-info{color:var(--Gray-700, #344054)!important;font-size:18px!important;font-weight:600;line-height:28px}.assign-store .table-title{line-height:24px!important;color:var(--Gray-500, #344054)!important;font-size:16px!important;font-weight:500!important}.assign-store .table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important}.assign-store .bg-assign-user{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);height:68px;padding:6px 8px 6px 16px}.assign-store td{padding:16px 24px!important}.assign-store .blend-mode{mix-blend-mode:multiply;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-weight:500;line-height:18px;padding:2px 8px}.scroll{overflow-y:auto;overflow-x:hidden}.radio-custom{opacity:0;position:absolute}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:5px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom+.radio-custom-label:before{content:\"\";background:#fff;border:2px solid #00A3FF;display:inline-block;vertical-align:middle;width:20px;height:20px;padding:2px;margin-right:10px;text-align:center}.radio-custom+.radio-custom-label:before{border-radius:50%}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff}.text-muted{content:\"\";margin-top:5.1px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);display:inline-block;vertical-align:middle;width:20px;height:20px;padding:2px;margin-left:0;text-align:center}.ms-0{margin-left:-.75rem!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;min-height:auto!important;max-height:285px!important;overflow:auto;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;width:90%}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.nav-item1 .nav-link1.active{border:none;border-radius:0;background:var(--Primary-50, #EAF8FF);border-bottom:2px solid #009BF3!important;padding:12px}.nav-item1 .nav-link1:hover{border:none}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.position-or{left:50%;top:-10px;background:#fff;transform:translate(-50%)}.subtitle{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:400;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}\n"] }]
|
|
2127
2112
|
}], ctorParameters: () => [{ type: UserService }, { type: i0.ChangeDetectorRef }, { type: i4.ToastService }, { type: i1$1.NgbActiveModal }, { type: i1$1.NgbModal }], propDecorators: { user: [{
|
|
2128
2113
|
type: Input
|
|
2129
2114
|
}], inputFile: [{
|
|
@@ -3032,6 +3017,9 @@ class TeamsCreationComponent {
|
|
|
3032
3017
|
this.ts.getPrimaryToast("Team Updated Successfully");
|
|
3033
3018
|
this.activeModal.close('submit');
|
|
3034
3019
|
}
|
|
3020
|
+
}, (error) => {
|
|
3021
|
+
console.log("error", error);
|
|
3022
|
+
this.ts.getErrorToast(error?.error?.error?.error || error?.error?.error);
|
|
3035
3023
|
});
|
|
3036
3024
|
}
|
|
3037
3025
|
else {
|
|
@@ -3042,7 +3030,7 @@ class TeamsCreationComponent {
|
|
|
3042
3030
|
}
|
|
3043
3031
|
}, (error) => {
|
|
3044
3032
|
console.log("error", error);
|
|
3045
|
-
this.ts.getErrorToast(error?.error?.error?.error);
|
|
3033
|
+
this.ts.getErrorToast(error?.error?.error?.error || error?.error?.error);
|
|
3046
3034
|
});
|
|
3047
3035
|
}
|
|
3048
3036
|
}
|
|
@@ -3093,13 +3081,10 @@ class TeamsCreationComponent {
|
|
|
3093
3081
|
return;
|
|
3094
3082
|
}
|
|
3095
3083
|
const requiredKeys = ['User Name/Email Id']; // Must always be present
|
|
3096
|
-
// const optionalKeys = ['userPhone', 'city'] : ['city'];
|
|
3097
3084
|
const isValid = data.some((item) => {
|
|
3098
3085
|
const keys = Object.keys(item);
|
|
3099
3086
|
const hasRequiredKeys = requiredKeys.every(key => keys.includes(key));
|
|
3100
|
-
const allKeysAreAllowed = keys.every(key => requiredKeys.includes(key)
|
|
3101
|
-
// || optionalKeys.includes(key)
|
|
3102
|
-
);
|
|
3087
|
+
const allKeysAreAllowed = keys.every(key => requiredKeys.includes(key));
|
|
3103
3088
|
return hasRequiredKeys && allKeysAreAllowed;
|
|
3104
3089
|
});
|
|
3105
3090
|
if (!isValid) {
|
|
@@ -3108,11 +3093,6 @@ class TeamsCreationComponent {
|
|
|
3108
3093
|
}
|
|
3109
3094
|
let processedArray = [];
|
|
3110
3095
|
let errMsgs = [];
|
|
3111
|
-
// for (let i = 0; i < data.length; i++) {
|
|
3112
|
-
// processedArray.push({
|
|
3113
|
-
// value: data[i]['User Name/Email Id'],
|
|
3114
|
-
// })
|
|
3115
|
-
// }
|
|
3116
3096
|
data?.forEach((element, index) => {
|
|
3117
3097
|
if (element?.['User Name/Email Id'] == '' || element?.['User Name/Email Id'] == null) {
|
|
3118
3098
|
error.push(`Invalid User Name/Email Id - C${index + 2}`);
|
|
@@ -3145,6 +3125,8 @@ class TeamsCreationComponent {
|
|
|
3145
3125
|
.subscribe({
|
|
3146
3126
|
next: (res) => {
|
|
3147
3127
|
if (res && res.code == 200) {
|
|
3128
|
+
this.excelError = [];
|
|
3129
|
+
this.uploadErrors = [];
|
|
3148
3130
|
this.afterUpload = res?.data?.result;
|
|
3149
3131
|
this.afterUplload();
|
|
3150
3132
|
}
|
|
@@ -3179,9 +3161,6 @@ class TeamsCreationComponent {
|
|
|
3179
3161
|
},
|
|
3180
3162
|
});
|
|
3181
3163
|
}
|
|
3182
|
-
// .catch((error) => {
|
|
3183
|
-
// this.ts.getErrorToast("Unable to create stores!");
|
|
3184
|
-
// });
|
|
3185
3164
|
};
|
|
3186
3165
|
}
|
|
3187
3166
|
}
|
|
@@ -3197,7 +3176,7 @@ class TeamsCreationComponent {
|
|
|
3197
3176
|
if (this.uploadPopUp) {
|
|
3198
3177
|
this.uploadPopUp.dismiss();
|
|
3199
3178
|
}
|
|
3200
|
-
this.uploadPopUp = this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static' });
|
|
3179
|
+
this.uploadPopUp = this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static', size: 'lg', windowClass: 'custom-modal-width' });
|
|
3201
3180
|
}
|
|
3202
3181
|
getStoreCounts(data) {
|
|
3203
3182
|
const uniqueUserNames = new Set(data?.map((item) => item['User Name/Email Id']));
|
|
@@ -3218,11 +3197,11 @@ class TeamsCreationComponent {
|
|
|
3218
3197
|
event.preventDefault(); // Stops the modal from closing
|
|
3219
3198
|
}
|
|
3220
3199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TeamsCreationComponent, deps: [{ token: i4.ToastService }, { token: i3$1.Router }, { token: i1$1.NgbActiveModal }, { token: ManageUsersService }, { token: i2.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
3221
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TeamsCreationComponent, selector: "lib-teams-creation", inputs: { teamData: "teamData", type: "type", teamsUsers: "teamsUsers" }, viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }, { propertyName: "confirmDelete", first: true, predicate: ["confirmDelete"], descendants: true }], ngImport: i0, template: "<div class=\"card pt-0 pb-3 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M20.5 23.6816C18.8425 23.6816 17.5 22.2133 17.5 20.4004C17.5 18.5875 18.8425 17.1191 20.5 17.1191C22.1575 17.1191 23.5 18.5875 23.5 20.4004C23.5 22.2133 22.1575 23.6816 20.5 23.6816ZM35.6483 23.6816C33.9908 23.6816 32.6483 22.2133 32.6483 20.4004C32.6483 18.5875 33.9908 17.1191 35.6483 17.1191C37.3058 17.1191 38.6483 18.5875 38.6483 20.4004C38.6483 22.2133 37.3058 23.6816 35.6483 23.6816ZM31.509 26.3066C31.509 28.4805 29.8965 30.2441 27.909 30.2441C25.9215 30.2441 24.309 28.4805 24.309 26.3066C24.309 24.1328 25.9215 22.3691 27.909 22.3691C29.8965 22.3691 31.509 24.1328 31.509 26.3066Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M20.0013 25.7559C17.7925 25.7559 16 27.7164 16 30.1322C16 30.6121 16.36 31.0059 16.7988 31.0059H24.8013H24.8275C23.8338 30.042 23.2038 28.6352 23.2038 27.0684C23.2038 26.7566 23.2263 26.449 23.275 26.1537C22.765 25.8994 22.1988 25.7559 21.6025 25.7559H20.0013Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M31.1725 31.0059H31.1987H39.2012C39.64 31.0059 40 30.6162 40 30.1322C40 27.7164 38.2075 25.7559 35.9987 25.7559H34.3975C33.8012 25.7559 33.235 25.8953 32.725 26.1537C32.77 26.4531 32.7963 26.7566 32.7963 27.0684C32.7963 28.6352 32.17 30.042 31.1725 31.0059Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M25.7988 32.3183C23.0388 32.3183 20.8 34.767 20.8 37.7857C20.8 38.3928 21.25 38.8809 21.8013 38.8809H34.1987C34.7537 38.8809 35.2 38.3887 35.2 37.7857C35.2 34.767 32.9613 32.3183 30.2013 32.3183H25.7988Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\" *ngIf=\"type === 'create'\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Create Team</a>\r\n <div class=\"sub-title\">Group multiple users to create a team for easier management</div>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"type === 'edit'\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit Team</a>\r\n <div class=\"sub-title\">Group multiple users to edit a team for easier management</div>\r\n </div>\r\n\r\n\r\n <div class=\"w-100 h-500px scroll\">\r\n <div class=\"mt-5\">\r\n <form (keydown.enter)=\"preventClose($event)\">\r\n <div class=\"row px-0 me-3\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"teamName\" class=\"form-label\">Team Name<span class=\"mandtryclr ms-1\">*</span></label>\r\n <input type=\"text\" [(ngModel)]=\"teamName\" [ngModelOptions]=\"{standalone: true}\"\r\n class=\"form-control\" id=\"teamName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"teamlead\" class=\"form-label\">Team Lead Email<span class=\"mandtryclr ms-1\">*</span></label>\r\n <!-- <team-select [items]=\"teamleadList\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [idField]=\"'userId'\" (selected)=\"onTeamSelect($event)\" (deselected)=\"TeamUnselect($event)\" (deselectedAll)=\"TeamUnselectAll($event)\"\r\n [selectedValues]=\"selectedTeam\"></team-select> -->\r\n <lib-chip-select [items]=\"teamleadList\" [multi]=\"true\" [searchField]=\"['userName']\" [searchKey]=\"['email']\"\r\n [idField]=\"'userId'\" (selected)=\"onTeamSelect($event)\" (removed)=\"removedChip($event)\"\r\n [selectedValues]=\"selectedTeam\"></lib-chip-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"userlead\" class=\"form-label\">Select Users<span class=\"mandtryclr ms-1\">*</span>\r\n </label>\r\n <team-select [items]=\"userList\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [idField]=\"'userId'\" (selected)=\"onUserSelect($event)\" (deselected)=\"UserUnselect($event)\" (deselectedAll)=\"UserUnselectAll($event)\"\r\n [selectedValues]=\"selectedUsers\"></team-select>\r\n </div>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"280\" height=\"2\" viewBox=\"0 0 280 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"280\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-15 or-color\">Or </span> <span class=\"line-bg \"><svg width=\"280\"\r\n height=\"2\" viewBox=\"0 0 280 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"280\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold fs-6\">\r\n <li class=\"user-text\">Use the template to upload multiple users at once.</li>\r\n <li class=\"user-text my-3\"><span class=\"user-text\">Download the template here -\r\n </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/teamsUploadTemplate.xlsx\"\r\n download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li>\r\n </ol>\r\n </div>\r\n </div>\r\n <div\r\n class=\"mt-3 ms-3 right-bar py-10 d-flex justify-content-center align-items-center flex-column\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_account_team_size_select_upload\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n value=\"personal\" class=\"btn-check\" ng-reflect-name=\"accountType\"\r\n ng-reflect-form-control-name=\"accountType\" (change)=\"onUploadTemplate($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_account_team_size_select_upload\" class=\" w-50 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5 mt-5\">\r\n <label for=\"userlead\" class=\"form-label\">Description (optional)</label>\r\n <textarea id=\"description\" [(ngModel)]=\"description\"\r\n [ngModelOptions]=\"{standalone: true}\" name=\"description\" class=\"form-control\"\r\n rows=\"5\" cols=\"50\" placeholder=\"Enter a description...\"></textarea>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"mt-3 ms-3 right-bar py-10 d-flex justify-content-center align-items-center flex-column\" >\r\n <svg width=\"47\" height=\"46\" viewBox=\"0 0 47 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3.5\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\"/>\r\n <rect x=\"3.5\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\"/>\r\n <g clip-path=\"url(#clip0_2176_18901)\">\r\n <path d=\"M26.8333 26.3332L23.5 22.9999M23.5 22.9999L20.1666 26.3332M23.5 22.9999V30.4999M30.4916 28.3249C31.3044 27.8818 31.9465 27.1806 32.3165 26.3321C32.6866 25.4835 32.7635 24.5359 32.5351 23.6388C32.3068 22.7417 31.7862 21.9462 31.0555 21.3778C30.3248 20.8094 29.4257 20.5005 28.5 20.4999H27.45C27.1977 19.5243 26.7276 18.6185 26.0749 17.8507C25.4222 17.0829 24.604 16.4731 23.6817 16.0671C22.7594 15.661 21.7571 15.4694 20.7501 15.5065C19.743 15.5436 18.7575 15.8085 17.8676 16.2813C16.9777 16.7541 16.2066 17.4225 15.6122 18.2362C15.0177 19.05 14.6155 19.9879 14.4358 20.9794C14.256 21.9709 14.3034 22.9903 14.5743 23.961C14.8452 24.9316 15.3327 25.8281 16 26.5832\" stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2176_18901\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5 13)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\"><input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUploadTemplate($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />Click to upload</span> <span class=\"ms-2\">or drag and drop</span></div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </div> -->\r\n </div>\r\n <div class=\"d-flex my-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" *ngIf=\"!isEdit\"\r\n (click)=\"onCreateTeam()\" [disabled]=\"!selectedUsers.length||!selectedTeam.length|| !teamName\">Create\r\n Team</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" *ngIf=\"isEdit\"\r\n (click)=\"onCreateTeam()\" [disabled]=\"!selectedUsers.length ||!selectedTeam.length||!teamName\">Update\r\n Team</button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Users</span></div>\r\n </div>\r\n <div class=\"card-body popup-scroll pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails();model.close()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_upload\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUploadTemplate($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}.or-color{color:var(--Gray-700, #344054)!important;text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.custom-ordered-list{list-style-type:decimal}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.mandtryclr{color:red}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected", "deselected", "deselectedAll"] }, { kind: "component", type: ChipSelectComponent, selector: "lib-chip-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "badgeValue", "searchKey"], outputs: ["selected"] }] });
|
|
3200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TeamsCreationComponent, selector: "lib-teams-creation", inputs: { teamData: "teamData", type: "type", teamsUsers: "teamsUsers" }, viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }, { propertyName: "confirmDelete", first: true, predicate: ["confirmDelete"], descendants: true }], ngImport: i0, template: "<div class=\"card pt-0 pb-3 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M20.5 23.6816C18.8425 23.6816 17.5 22.2133 17.5 20.4004C17.5 18.5875 18.8425 17.1191 20.5 17.1191C22.1575 17.1191 23.5 18.5875 23.5 20.4004C23.5 22.2133 22.1575 23.6816 20.5 23.6816ZM35.6483 23.6816C33.9908 23.6816 32.6483 22.2133 32.6483 20.4004C32.6483 18.5875 33.9908 17.1191 35.6483 17.1191C37.3058 17.1191 38.6483 18.5875 38.6483 20.4004C38.6483 22.2133 37.3058 23.6816 35.6483 23.6816ZM31.509 26.3066C31.509 28.4805 29.8965 30.2441 27.909 30.2441C25.9215 30.2441 24.309 28.4805 24.309 26.3066C24.309 24.1328 25.9215 22.3691 27.909 22.3691C29.8965 22.3691 31.509 24.1328 31.509 26.3066Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M20.0013 25.7559C17.7925 25.7559 16 27.7164 16 30.1322C16 30.6121 16.36 31.0059 16.7988 31.0059H24.8013H24.8275C23.8338 30.042 23.2038 28.6352 23.2038 27.0684C23.2038 26.7566 23.2263 26.449 23.275 26.1537C22.765 25.8994 22.1988 25.7559 21.6025 25.7559H20.0013Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M31.1725 31.0059H31.1987H39.2012C39.64 31.0059 40 30.6162 40 30.1322C40 27.7164 38.2075 25.7559 35.9987 25.7559H34.3975C33.8012 25.7559 33.235 25.8953 32.725 26.1537C32.77 26.4531 32.7963 26.7566 32.7963 27.0684C32.7963 28.6352 32.17 30.042 31.1725 31.0059Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M25.7988 32.3183C23.0388 32.3183 20.8 34.767 20.8 37.7857C20.8 38.3928 21.25 38.8809 21.8013 38.8809H34.1987C34.7537 38.8809 35.2 38.3887 35.2 37.7857C35.2 34.767 32.9613 32.3183 30.2013 32.3183H25.7988Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\" *ngIf=\"type === 'create'\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Create Team</a>\r\n <div class=\"sub-title\">Group multiple users to create a team for easier management</div>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"type === 'edit'\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit Team</a>\r\n <div class=\"sub-title\">Group multiple users to edit a team for easier management</div>\r\n </div>\r\n\r\n\r\n <div class=\"w-100 h-500px scroll\">\r\n <div class=\"mt-5\">\r\n <form (keydown.enter)=\"preventClose($event)\">\r\n <div class=\"row px-0 me-3\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"teamName\" class=\"form-label\">Team Name<span class=\"mandtryclr ms-1\">*</span></label>\r\n <input type=\"text\" [(ngModel)]=\"teamName\" [ngModelOptions]=\"{standalone: true}\"\r\n class=\"form-control\" id=\"teamName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"teamlead\" class=\"form-label\">Team Lead Email<span class=\"mandtryclr ms-1\">*</span></label>\r\n <lib-chip-select [items]=\"teamleadList\" [multi]=\"true\" [searchField]=\"['userName']\" [searchKey]=\"['email']\"\r\n [idField]=\"'userId'\" (selected)=\"onTeamSelect($event)\" (removed)=\"removedChip($event)\"\r\n [selectedValues]=\"selectedTeam\"></lib-chip-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"userlead\" class=\"form-label\">Select Users<span class=\"mandtryclr ms-1\">*</span>\r\n </label>\r\n <team-select [items]=\"userList\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [idField]=\"'userId'\" (selected)=\"onUserSelect($event)\" (deselected)=\"UserUnselect($event)\" (deselectedAll)=\"UserUnselectAll($event)\"\r\n [selectedValues]=\"selectedUsers\"></team-select>\r\n </div>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"280\" height=\"2\" viewBox=\"0 0 280 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"280\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-15 or-color\">Or </span> <span class=\"line-bg \"><svg width=\"280\"\r\n height=\"2\" viewBox=\"0 0 280 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"280\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold fs-6\">\r\n <li class=\"user-text\">Use the template to upload multiple users at once.</li>\r\n <li class=\"user-text my-3\"><span class=\"user-text\">Download the template here -\r\n </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/teamsUploadTemplate.xlsx\"\r\n download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li>\r\n </ol>\r\n </div>\r\n </div>\r\n <div\r\n class=\"mt-3 ms-3 right-bar py-10 d-flex justify-content-center align-items-center flex-column\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_account_team_size_select_upload\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n value=\"personal\" class=\"btn-check\" ng-reflect-name=\"accountType\"\r\n ng-reflect-form-control-name=\"accountType\" (change)=\"onUploadTemplate($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_account_team_size_select_upload\" class=\" w-50 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5 mt-5\">\r\n <label for=\"userlead\" class=\"form-label\">Description (optional)</label>\r\n <textarea id=\"description\" [(ngModel)]=\"description\"\r\n [ngModelOptions]=\"{standalone: true}\" name=\"description\" class=\"form-control\"\r\n rows=\"5\" cols=\"50\" placeholder=\"Enter a description...\"></textarea>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"d-flex my-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" *ngIf=\"!isEdit\"\r\n (click)=\"onCreateTeam()\" [disabled]=\"!selectedUsers.length||!selectedTeam.length|| !teamName\">Create\r\n Team</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" *ngIf=\"isEdit\"\r\n (click)=\"onCreateTeam()\" [disabled]=\"!selectedUsers.length ||!selectedTeam.length||!teamName\">Update\r\n Team</button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Users</span></div>\r\n </div>\r\n <div class=\"card-body popup-scroll pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold w-100 text-error\">{{uploadErrors?.doesNotExists?.length +uploadErrors?.duplicate?.length +uploadErrors?.inActive?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold mt-1 text-error\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to add {{getStoreCounts(excelData)}} {{getStoreCounts(excelData) > 1 ? 'Users' : 'User'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">User doesn't exists !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.duplicate?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Duplicate records found !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.duplicate; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">User is inactive !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify-content-end flex-wrap gap-2 pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails();model.close()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n <input style=\"display: none;\" #file1 type=\"file\" id=\"kt_account_team_size_select_upload\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUploadTemplate($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}.or-color{color:var(--Gray-700, #344054)!important;text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.custom-ordered-list{list-style-type:decimal}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.mandtryclr{color:red}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected", "deselected", "deselectedAll"] }, { kind: "component", type: ChipSelectComponent, selector: "lib-chip-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "badgeValue", "searchKey"], outputs: ["selected"] }] });
|
|
3222
3201
|
}
|
|
3223
3202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TeamsCreationComponent, decorators: [{
|
|
3224
3203
|
type: Component,
|
|
3225
|
-
args: [{ selector: 'lib-teams-creation', template: "<div class=\"card pt-0 pb-3 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M20.5 23.6816C18.8425 23.6816 17.5 22.2133 17.5 20.4004C17.5 18.5875 18.8425 17.1191 20.5 17.1191C22.1575 17.1191 23.5 18.5875 23.5 20.4004C23.5 22.2133 22.1575 23.6816 20.5 23.6816ZM35.6483 23.6816C33.9908 23.6816 32.6483 22.2133 32.6483 20.4004C32.6483 18.5875 33.9908 17.1191 35.6483 17.1191C37.3058 17.1191 38.6483 18.5875 38.6483 20.4004C38.6483 22.2133 37.3058 23.6816 35.6483 23.6816ZM31.509 26.3066C31.509 28.4805 29.8965 30.2441 27.909 30.2441C25.9215 30.2441 24.309 28.4805 24.309 26.3066C24.309 24.1328 25.9215 22.3691 27.909 22.3691C29.8965 22.3691 31.509 24.1328 31.509 26.3066Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M20.0013 25.7559C17.7925 25.7559 16 27.7164 16 30.1322C16 30.6121 16.36 31.0059 16.7988 31.0059H24.8013H24.8275C23.8338 30.042 23.2038 28.6352 23.2038 27.0684C23.2038 26.7566 23.2263 26.449 23.275 26.1537C22.765 25.8994 22.1988 25.7559 21.6025 25.7559H20.0013Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M31.1725 31.0059H31.1987H39.2012C39.64 31.0059 40 30.6162 40 30.1322C40 27.7164 38.2075 25.7559 35.9987 25.7559H34.3975C33.8012 25.7559 33.235 25.8953 32.725 26.1537C32.77 26.4531 32.7963 26.7566 32.7963 27.0684C32.7963 28.6352 32.17 30.042 31.1725 31.0059Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M25.7988 32.3183C23.0388 32.3183 20.8 34.767 20.8 37.7857C20.8 38.3928 21.25 38.8809 21.8013 38.8809H34.1987C34.7537 38.8809 35.2 38.3887 35.2 37.7857C35.2 34.767 32.9613 32.3183 30.2013 32.3183H25.7988Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\" *ngIf=\"type === 'create'\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Create Team</a>\r\n <div class=\"sub-title\">Group multiple users to create a team for easier management</div>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"type === 'edit'\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit Team</a>\r\n <div class=\"sub-title\">Group multiple users to edit a team for easier management</div>\r\n </div>\r\n\r\n\r\n <div class=\"w-100 h-500px scroll\">\r\n <div class=\"mt-5\">\r\n <form (keydown.enter)=\"preventClose($event)\">\r\n <div class=\"row px-0 me-3\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"teamName\" class=\"form-label\">Team Name<span class=\"mandtryclr ms-1\">*</span></label>\r\n <input type=\"text\" [(ngModel)]=\"teamName\" [ngModelOptions]=\"{standalone: true}\"\r\n class=\"form-control\" id=\"teamName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"teamlead\" class=\"form-label\">Team Lead Email<span class=\"mandtryclr ms-1\">*</span></label>\r\n <!-- <team-select [items]=\"teamleadList\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [idField]=\"'userId'\" (selected)=\"onTeamSelect($event)\" (deselected)=\"TeamUnselect($event)\" (deselectedAll)=\"TeamUnselectAll($event)\"\r\n [selectedValues]=\"selectedTeam\"></team-select> -->\r\n <lib-chip-select [items]=\"teamleadList\" [multi]=\"true\" [searchField]=\"['userName']\" [searchKey]=\"['email']\"\r\n [idField]=\"'userId'\" (selected)=\"onTeamSelect($event)\" (removed)=\"removedChip($event)\"\r\n [selectedValues]=\"selectedTeam\"></lib-chip-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"userlead\" class=\"form-label\">Select Users<span class=\"mandtryclr ms-1\">*</span>\r\n </label>\r\n <team-select [items]=\"userList\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [idField]=\"'userId'\" (selected)=\"onUserSelect($event)\" (deselected)=\"UserUnselect($event)\" (deselectedAll)=\"UserUnselectAll($event)\"\r\n [selectedValues]=\"selectedUsers\"></team-select>\r\n </div>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"280\" height=\"2\" viewBox=\"0 0 280 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"280\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-15 or-color\">Or </span> <span class=\"line-bg \"><svg width=\"280\"\r\n height=\"2\" viewBox=\"0 0 280 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"280\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold fs-6\">\r\n <li class=\"user-text\">Use the template to upload multiple users at once.</li>\r\n <li class=\"user-text my-3\"><span class=\"user-text\">Download the template here -\r\n </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/teamsUploadTemplate.xlsx\"\r\n download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li>\r\n </ol>\r\n </div>\r\n </div>\r\n <div\r\n class=\"mt-3 ms-3 right-bar py-10 d-flex justify-content-center align-items-center flex-column\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_account_team_size_select_upload\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n value=\"personal\" class=\"btn-check\" ng-reflect-name=\"accountType\"\r\n ng-reflect-form-control-name=\"accountType\" (change)=\"onUploadTemplate($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_account_team_size_select_upload\" class=\" w-50 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5 mt-5\">\r\n <label for=\"userlead\" class=\"form-label\">Description (optional)</label>\r\n <textarea id=\"description\" [(ngModel)]=\"description\"\r\n [ngModelOptions]=\"{standalone: true}\" name=\"description\" class=\"form-control\"\r\n rows=\"5\" cols=\"50\" placeholder=\"Enter a description...\"></textarea>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"mt-3 ms-3 right-bar py-10 d-flex justify-content-center align-items-center flex-column\" >\r\n <svg width=\"47\" height=\"46\" viewBox=\"0 0 47 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3.5\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\"/>\r\n <rect x=\"3.5\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\"/>\r\n <g clip-path=\"url(#clip0_2176_18901)\">\r\n <path d=\"M26.8333 26.3332L23.5 22.9999M23.5 22.9999L20.1666 26.3332M23.5 22.9999V30.4999M30.4916 28.3249C31.3044 27.8818 31.9465 27.1806 32.3165 26.3321C32.6866 25.4835 32.7635 24.5359 32.5351 23.6388C32.3068 22.7417 31.7862 21.9462 31.0555 21.3778C30.3248 20.8094 29.4257 20.5005 28.5 20.4999H27.45C27.1977 19.5243 26.7276 18.6185 26.0749 17.8507C25.4222 17.0829 24.604 16.4731 23.6817 16.0671C22.7594 15.661 21.7571 15.4694 20.7501 15.5065C19.743 15.5436 18.7575 15.8085 17.8676 16.2813C16.9777 16.7541 16.2066 17.4225 15.6122 18.2362C15.0177 19.05 14.6155 19.9879 14.4358 20.9794C14.256 21.9709 14.3034 22.9903 14.5743 23.961C14.8452 24.9316 15.3327 25.8281 16 26.5832\" stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2176_18901\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5 13)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\"><input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUploadTemplate($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />Click to upload</span> <span class=\"ms-2\">or drag and drop</span></div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </div> -->\r\n </div>\r\n <div class=\"d-flex my-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" *ngIf=\"!isEdit\"\r\n (click)=\"onCreateTeam()\" [disabled]=\"!selectedUsers.length||!selectedTeam.length|| !teamName\">Create\r\n Team</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" *ngIf=\"isEdit\"\r\n (click)=\"onCreateTeam()\" [disabled]=\"!selectedUsers.length ||!selectedTeam.length||!teamName\">Update\r\n Team</button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Users</span></div>\r\n </div>\r\n <div class=\"card-body popup-scroll pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails();model.close()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_upload\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUploadTemplate($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}.or-color{color:var(--Gray-700, #344054)!important;text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.custom-ordered-list{list-style-type:decimal}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.mandtryclr{color:red}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}\n"] }]
|
|
3204
|
+
args: [{ selector: 'lib-teams-creation', template: "<div class=\"card pt-0 pb-3 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M20.5 23.6816C18.8425 23.6816 17.5 22.2133 17.5 20.4004C17.5 18.5875 18.8425 17.1191 20.5 17.1191C22.1575 17.1191 23.5 18.5875 23.5 20.4004C23.5 22.2133 22.1575 23.6816 20.5 23.6816ZM35.6483 23.6816C33.9908 23.6816 32.6483 22.2133 32.6483 20.4004C32.6483 18.5875 33.9908 17.1191 35.6483 17.1191C37.3058 17.1191 38.6483 18.5875 38.6483 20.4004C38.6483 22.2133 37.3058 23.6816 35.6483 23.6816ZM31.509 26.3066C31.509 28.4805 29.8965 30.2441 27.909 30.2441C25.9215 30.2441 24.309 28.4805 24.309 26.3066C24.309 24.1328 25.9215 22.3691 27.909 22.3691C29.8965 22.3691 31.509 24.1328 31.509 26.3066Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M20.0013 25.7559C17.7925 25.7559 16 27.7164 16 30.1322C16 30.6121 16.36 31.0059 16.7988 31.0059H24.8013H24.8275C23.8338 30.042 23.2038 28.6352 23.2038 27.0684C23.2038 26.7566 23.2263 26.449 23.275 26.1537C22.765 25.8994 22.1988 25.7559 21.6025 25.7559H20.0013Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M31.1725 31.0059H31.1987H39.2012C39.64 31.0059 40 30.6162 40 30.1322C40 27.7164 38.2075 25.7559 35.9987 25.7559H34.3975C33.8012 25.7559 33.235 25.8953 32.725 26.1537C32.77 26.4531 32.7963 26.7566 32.7963 27.0684C32.7963 28.6352 32.17 30.042 31.1725 31.0059Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M25.7988 32.3183C23.0388 32.3183 20.8 34.767 20.8 37.7857C20.8 38.3928 21.25 38.8809 21.8013 38.8809H34.1987C34.7537 38.8809 35.2 38.3887 35.2 37.7857C35.2 34.767 32.9613 32.3183 30.2013 32.3183H25.7988Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\" *ngIf=\"type === 'create'\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Create Team</a>\r\n <div class=\"sub-title\">Group multiple users to create a team for easier management</div>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"type === 'edit'\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit Team</a>\r\n <div class=\"sub-title\">Group multiple users to edit a team for easier management</div>\r\n </div>\r\n\r\n\r\n <div class=\"w-100 h-500px scroll\">\r\n <div class=\"mt-5\">\r\n <form (keydown.enter)=\"preventClose($event)\">\r\n <div class=\"row px-0 me-3\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"teamName\" class=\"form-label\">Team Name<span class=\"mandtryclr ms-1\">*</span></label>\r\n <input type=\"text\" [(ngModel)]=\"teamName\" [ngModelOptions]=\"{standalone: true}\"\r\n class=\"form-control\" id=\"teamName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"teamlead\" class=\"form-label\">Team Lead Email<span class=\"mandtryclr ms-1\">*</span></label>\r\n <lib-chip-select [items]=\"teamleadList\" [multi]=\"true\" [searchField]=\"['userName']\" [searchKey]=\"['email']\"\r\n [idField]=\"'userId'\" (selected)=\"onTeamSelect($event)\" (removed)=\"removedChip($event)\"\r\n [selectedValues]=\"selectedTeam\"></lib-chip-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"userlead\" class=\"form-label\">Select Users<span class=\"mandtryclr ms-1\">*</span>\r\n </label>\r\n <team-select [items]=\"userList\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [idField]=\"'userId'\" (selected)=\"onUserSelect($event)\" (deselected)=\"UserUnselect($event)\" (deselectedAll)=\"UserUnselectAll($event)\"\r\n [selectedValues]=\"selectedUsers\"></team-select>\r\n </div>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"280\" height=\"2\" viewBox=\"0 0 280 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"280\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-15 or-color\">Or </span> <span class=\"line-bg \"><svg width=\"280\"\r\n height=\"2\" viewBox=\"0 0 280 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"280\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold fs-6\">\r\n <li class=\"user-text\">Use the template to upload multiple users at once.</li>\r\n <li class=\"user-text my-3\"><span class=\"user-text\">Download the template here -\r\n </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/teamsUploadTemplate.xlsx\"\r\n download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li>\r\n </ol>\r\n </div>\r\n </div>\r\n <div\r\n class=\"mt-3 ms-3 right-bar py-10 d-flex justify-content-center align-items-center flex-column\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_account_team_size_select_upload\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n value=\"personal\" class=\"btn-check\" ng-reflect-name=\"accountType\"\r\n ng-reflect-form-control-name=\"accountType\" (change)=\"onUploadTemplate($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_account_team_size_select_upload\" class=\" w-50 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5 mt-5\">\r\n <label for=\"userlead\" class=\"form-label\">Description (optional)</label>\r\n <textarea id=\"description\" [(ngModel)]=\"description\"\r\n [ngModelOptions]=\"{standalone: true}\" name=\"description\" class=\"form-control\"\r\n rows=\"5\" cols=\"50\" placeholder=\"Enter a description...\"></textarea>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"d-flex my-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" *ngIf=\"!isEdit\"\r\n (click)=\"onCreateTeam()\" [disabled]=\"!selectedUsers.length||!selectedTeam.length|| !teamName\">Create\r\n Team</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" *ngIf=\"isEdit\"\r\n (click)=\"onCreateTeam()\" [disabled]=\"!selectedUsers.length ||!selectedTeam.length||!teamName\">Update\r\n Team</button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Users</span></div>\r\n </div>\r\n <div class=\"card-body popup-scroll pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold w-100 text-error\">{{uploadErrors?.doesNotExists?.length +uploadErrors?.duplicate?.length +uploadErrors?.inActive?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold mt-1 text-error\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to add {{getStoreCounts(excelData)}} {{getStoreCounts(excelData) > 1 ? 'Users' : 'User'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">User doesn't exists !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.duplicate?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Duplicate records found !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.duplicate; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">User is inactive !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify-content-end flex-wrap gap-2 pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails();model.close()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n <input style=\"display: none;\" #file1 type=\"file\" id=\"kt_account_team_size_select_upload\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUploadTemplate($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}.or-color{color:var(--Gray-700, #344054)!important;text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.custom-ordered-list{list-style-type:decimal}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.mandtryclr{color:red}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}\n"] }]
|
|
3226
3205
|
}], ctorParameters: () => [{ type: i4.ToastService }, { type: i3$1.Router }, { type: i1$1.NgbActiveModal }, { type: ManageUsersService }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }], propDecorators: { inputFile: [{
|
|
3227
3206
|
type: ViewChild,
|
|
3228
3207
|
args: ["inputFile"]
|
|
@@ -3687,7 +3666,7 @@ class BrandUserComponent {
|
|
|
3687
3666
|
centered: true,
|
|
3688
3667
|
size: 'lg'
|
|
3689
3668
|
};
|
|
3690
|
-
if (user.role
|
|
3669
|
+
if (user.role === 'admin' && user.isActive == true && this.gs?.userAccess?.value?.Global_User_isEdit) {
|
|
3691
3670
|
modalOptions.backdrop = 'static';
|
|
3692
3671
|
}
|
|
3693
3672
|
const modalRef = this.modalService.open(AddUsersComponent, modalOptions);
|
|
@@ -3908,7 +3887,7 @@ class BrandUserComponent {
|
|
|
3908
3887
|
}
|
|
3909
3888
|
}
|
|
3910
3889
|
bulkAssignasxlsx() {
|
|
3911
|
-
this.modalService.open(this.bulkUpload, { centered: true
|
|
3890
|
+
this.modalService.open(this.bulkUpload, { centered: true });
|
|
3912
3891
|
}
|
|
3913
3892
|
addSingleUser() {
|
|
3914
3893
|
}
|
|
@@ -3919,6 +3898,10 @@ class BrandUserComponent {
|
|
|
3919
3898
|
const uniqueUserNames = new Set(data?.map((item) => item['Store Name/Store Id']));
|
|
3920
3899
|
return uniqueUserNames.size;
|
|
3921
3900
|
}
|
|
3901
|
+
getEmailCounts(data) {
|
|
3902
|
+
const uniqueUserNames = new Set(data?.map((item) => item['Email']));
|
|
3903
|
+
return uniqueUserNames.size;
|
|
3904
|
+
}
|
|
3922
3905
|
onUpload1(e) {
|
|
3923
3906
|
let data;
|
|
3924
3907
|
let error = [];
|
|
@@ -4086,7 +4069,7 @@ class BrandUserComponent {
|
|
|
4086
4069
|
}
|
|
4087
4070
|
afterUplload(data) {
|
|
4088
4071
|
this.excelError = data;
|
|
4089
|
-
this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static' });
|
|
4072
|
+
this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static', size: 'lg', windowClass: 'custom-modal-width' });
|
|
4090
4073
|
}
|
|
4091
4074
|
userStatusChange(user, i) {
|
|
4092
4075
|
const modalRef = this.modalService.open(AlertPopupComponent, { centered: true, size: 'md', backdrop: "static" });
|
|
@@ -4233,11 +4216,11 @@ class BrandUserComponent {
|
|
|
4233
4216
|
});
|
|
4234
4217
|
}
|
|
4235
4218
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BrandUserComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.PageInfoService }, { token: i0.ChangeDetectorRef }, { token: ExcelService }, { token: i2.GlobalStateService }, { token: i4.ToastService }, { token: UserService }, { token: i3$1.Router }, { token: i3$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
4236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BrandUserComponent, selector: "lib-brand-user", outputs: { dataToParent: "dataToParent" }, viewQueries: [{ propertyName: "bulkUpload", first: true, predicate: ["bulkUpload"], descendants: true }, { propertyName: "inputFile1", first: true, predicate: ["inputFile1"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"receivedData !=='Role Value'\">\r\n <div class=\"\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- <span class=\"card-label mb-2\">Users</span>\r\n <span class=\"text-sub mb-2\">{{pagination?.totalCount ? pagination?.totalCount :'0'}} total users</span> -->\r\n </h3>\r\n <div class=\"card-toolbar rightcorner \">\r\n <div *ngIf=\"!createTeam\" class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <lib-filters [dataObject]=\"dataObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <button *ngIf=\"!loading && !noData\" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n \r\n \r\n <button type=\"button\" (click)=\"bulkAssignasxlsx()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><span class=\"ms-2\">Bulk Assign</span> </button>\r\n\r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" type=\"button\" (click)=\"users('add')\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Add User</span> </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"createTeam\" class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"createTeams()\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"!loading && !noData\" class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span\r\n class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\"\r\n [(ngModel)]=\"selectAllChecked\" class=\"cursor-pointer\"></span>\r\n\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('userName')\">Name\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'userName' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'userName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('email')\">Email\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'email' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'email' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('mobileNumber')\">Contact Number\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'mobileNumber' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'mobileNumber' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('role')\">Roles\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'role' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'role' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Assigned To </th>\r\n <th style=\"line-height: 21px !important;\">As a Lead To </th>\r\n <th style=\"line-height: 21px !important;\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"fw-semibold\">\r\n <ng-container *ngFor=\"let user of userList;let i=index;\">\r\n <tr>\r\n <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input\r\n type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.checked\"\r\n (click)=\"onSelectedTeams(user,i)\"></span></td>\r\n <td>{{user?.userName}}</td>\r\n <td>{{ getMaskedValue(user?.email, userInfo?.role) }}</td>\r\n <td>{{ getMaskedMobile(user?.mobileNumber, userInfo?.role) }}</td>\r\n <td *ngIf=\"user?.role ==='superadmin'\">Super Admin</td>\r\n <td *ngIf=\"user?.role !=='superadmin'\">{{user?.role | titlecase}}</td>\r\n <td><span class=\"badge badge-light-primary\">{{user?.assignedStores||0}} Stores</span> <span class=\"badge badge-light-info\">{{user?.teamCount||0}} Teams</span></td>\r\n <td><span class=\"badge badge-light-purple\">{{user?.clusterCount||0}} Clusters</span> <span class=\"badge badge-light-info\">{{user?.teamlead||0}} Teams</span></td>\r\n <!-- <td>{{user?.teamCount||0}}</td> -->\r\n\r\n <td>\r\n <div class=\"d-flex\">\r\n <!-- @if ((gs.userAccess | async)?.manage_users_isEdit) {\r\n <span class=\"me-3 cursor-pointer\" (click)=\"users('edit',user)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M9.66675 3.33333H3.83341C3.39139 3.33333 2.96746 3.50893 2.6549 3.82149C2.34234 4.13405 2.16675 4.55797 2.16675 5V16.6667C2.16675 17.1087 2.34234 17.5326 2.6549 17.8452C2.96746 18.1577 3.39139 18.3333 3.83341 18.3333H15.5001C15.9421 18.3333 16.366 18.1577 16.6786 17.8452C16.9912 17.5326 17.1667 17.1087 17.1667 16.6667V10.8333M15.9167 2.08333C16.2483 1.75181 16.6979 1.56557 17.1667 1.56557C17.6356 1.56557 18.0852 1.75181 18.4167 2.08333C18.7483 2.41485 18.9345 2.86449 18.9345 3.33333C18.9345 3.80217 18.7483 4.25181 18.4167 4.58333L10.5001 12.5L7.16675 13.3333L8.00008 10L15.9167 2.08333Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n } -->\r\n <span class=\"mx-3 cursor-pointer\" (click)=\"Viewusers('view',user)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1995_16400)\">\r\n <path\r\n d=\"M1.33325 10C1.33325 10 4.66658 3.33337 10.4999 3.33337C16.3333 3.33337 19.6666 10 19.6666 10C19.6666 10 16.3333 16.6667 10.4999 16.6667C4.66658 16.6667 1.33325 10 1.33325 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.4999 12.5C11.8806 12.5 12.9999 11.3808 12.9999 10C12.9999 8.61933 11.8806 7.50004 10.4999 7.50004C9.11921 7.50004 7.99992 8.61933 7.99992 10C7.99992 11.3808 9.11921 12.5 10.4999 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1995_16400\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n @if ((gs.userAccess | async)?.Global_User_isEdit) {\r\n <span class=\"mx-3 cursor-pointer\" *ngIf=\"userInfo.role!=='user'\">\r\n <button type=\"button\" (click)=\"assignStore(user)\"\r\n [disabled]=\"!user?.isActive || user?.role ==='superadmin'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span class=\"mx-2\">Assign</span>\r\n </button>\r\n </span>\r\n }\r\n <span class=\"form-check form-switch\" *ngIf=\"userInfo.role!=='user'\">\r\n <input class=\"form-check-input mt-3\" type=\"checkbox\" role=\"switch\" id=\"support\"\r\n [disabled]=\"!((gs.userAccess | async)?.Global_User_isEdit)\"\r\n (change)=\"userStatusChange(user,i)\" [(ngModel)]=\"userList[i].isActive\">\r\n @if (userList[i].isActive) {\r\n Active\r\n } @else {\r\n Deactive\r\n }\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <lib-pagination *ngIf=\"userList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer mb-10\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"receivedData !=='Role Value'\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <div class=\"card p-5\">\r\n <div class=\"border-0\">\r\n <h3 class=\"title fw-bold\">Roles & Permission</h3>\r\n <h6 class=\"sub-title fw-normal\">{{rolesCount || 0}} total roles</h6>\r\n </div>\r\n <div class=\"card-body px-0\">\r\n <div class=\"flex-column align-items-start\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4 border-val mx-3 mb-7 py-7\" *ngFor=\"let obj of roles\">\r\n\r\n <a *ngIf=\"obj.roleName ==='superadmin'\" class=\"role-title my-2 cursor-pointer\" >Super Admin</a>\r\n <a *ngIf=\"obj.roleName !=='superadmin'\" class=\"role-title my-2 cursor-pointer\">{{obj.roleName |\r\n titlecase}}</a> \r\n <div *ngIf=\"obj.roleName ==='superadmin'\" class=\"sub-title fw-semibold my-5\">Oversees all the operations and controls the entire functionality of the dashboard</div>\r\n <div *ngIf=\"obj.roleName ==='admin'\" class=\"sub-title fw-semibold my-5\">Manages specific operations, permissions, and can change setting for assigned locations</div>\r\n <div *ngIf=\"obj.roleName ==='user'\" class=\"sub-title fw-semibold my-5\">Access to specific location and will be able to view dashboard</div>\r\n <div><span class=\"me-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.count || 0}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Role Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-roles-permission-table (dataEvent)=\"receiveData($event)\"></lib-roles-permission-table>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<ng-template #bulkUpload let-modal>\r\n <div class=\"card-body flex-column p-9\">\r\n <div class=\"header-title\">Bulk Assign</div>\r\n <div class=\"d-flex justify-content-start align-items-center\">\r\n <div class=\"fw-bold text-gray-500 mt-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold px-5 fs-6\">\r\n <li class=\"user-text\">Use the template below to assign multiple users to multiple stores at once.</li>\r\n <li class=\"user-text my-3\"><span class=\"user-text\">Download the template here - </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/BulkAssignTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li> \r\n </ol>\r\n </div>\r\n </div>\r\n <div class=\" w-100 right-bar d-flex justify-content-center align-items-center flex-column\" >\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal1\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal1\"\r\n class=\"btn-check\"\r\n (change)=\"onUpload1($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile1 />\r\n <label for=\"kt_create_account_form_account_type_personal1\" class=\" w-1-0 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title mb-3\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n <div class=\"w-100 d-flex justify-content-between mt-5\">\r\n <button class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.close()\"> Cancel\r\n </button>\r\n <button class=\"btn btn-default btn-primary w-50 ms-2\" (click)=\"modal.close()\"> Submit\r\n </button> \r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Bulk Assign</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to assign {{getStoreCounts(excelData)}} {{getStoreCounts(excelData) > 1 ? 'Stores' : 'Store'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"proceedSubmit()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload1($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}td{padding:16px 24px!important;line-height:36px!important}.img-src{width:25%;height:20%}.border-val{padding:10px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #344054);font-size:16px;font-weight:600;line-height:24px}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.rotate{rotate:180deg;transition:1s}.p-4{padding:.85rem!important}.inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.header-title{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.subtitle{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:400;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "component", type: RolesPermissionTableComponent, selector: "lib-roles-permission-table", outputs: ["dataEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
4219
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BrandUserComponent, selector: "lib-brand-user", outputs: { dataToParent: "dataToParent" }, viewQueries: [{ propertyName: "bulkUpload", first: true, predicate: ["bulkUpload"], descendants: true }, { propertyName: "inputFile1", first: true, predicate: ["inputFile1"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"receivedData !=='Role Value'\">\r\n <div class=\"\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n </h3>\r\n <div class=\"card-toolbar rightcorner \">\r\n <div *ngIf=\"!createTeam\" class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <lib-filters [dataObject]=\"dataObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <button *ngIf=\"!loading && !noData\" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n \r\n \r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" type=\"button\" (click)=\"bulkAssignasxlsx()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><span class=\"ms-2\">Bulk Assign</span> </button>\r\n\r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" type=\"button\" (click)=\"users('add')\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Add User</span> </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"createTeam\" class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"createTeams()\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"!loading && !noData\" class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span\r\n class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\"\r\n [(ngModel)]=\"selectAllChecked\" class=\"cursor-pointer\"></span>\r\n\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('userName')\">Name\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'userName' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'userName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('email')\">Email\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'email' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'email' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('mobileNumber')\">Contact Number\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'mobileNumber' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'mobileNumber' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('role')\">Roles\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'role' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'role' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Assigned To </th>\r\n <th style=\"line-height: 21px !important;\">As a Lead To </th>\r\n <th style=\"line-height: 21px !important;\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"fw-semibold\">\r\n <ng-container *ngFor=\"let user of userList;let i=index;\">\r\n <tr>\r\n <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input\r\n type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.checked\"\r\n (click)=\"onSelectedTeams(user,i)\"></span></td>\r\n <td>{{user?.userName}}</td>\r\n <td>{{ getMaskedValue(user?.email, userInfo?.role) }}</td>\r\n <td>{{ getMaskedMobile(user?.mobileNumber, userInfo?.role) }}</td>\r\n <td *ngIf=\"user?.role ==='superadmin'\">Super Admin</td>\r\n <td *ngIf=\"user?.role !=='superadmin'\">{{user?.role | titlecase}}</td>\r\n <td><span class=\"badge badge-light-primary\">{{user?.assignedStores||0}} Stores</span> <span class=\"badge badge-light-info\">{{user?.teamCount||0}} Teams</span></td>\r\n <td><span class=\"badge badge-light-purple\">{{user?.clusterCount||0}} Clusters</span> <span class=\"badge badge-light-info\">{{user?.teamlead||0}} Teams</span></td>\r\n\r\n <td>\r\n <div class=\"d-flex\">\r\n <span class=\"mx-3 cursor-pointer\" (click)=\"Viewusers('view',user)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1995_16400)\">\r\n <path\r\n d=\"M1.33325 10C1.33325 10 4.66658 3.33337 10.4999 3.33337C16.3333 3.33337 19.6666 10 19.6666 10C19.6666 10 16.3333 16.6667 10.4999 16.6667C4.66658 16.6667 1.33325 10 1.33325 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.4999 12.5C11.8806 12.5 12.9999 11.3808 12.9999 10C12.9999 8.61933 11.8806 7.50004 10.4999 7.50004C9.11921 7.50004 7.99992 8.61933 7.99992 10C7.99992 11.3808 9.11921 12.5 10.4999 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1995_16400\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n @if ((gs.userAccess | async)?.Global_User_isEdit) {\r\n <span class=\"mx-3 cursor-pointer\" *ngIf=\"userInfo.role!=='user'\">\r\n <button type=\"button\" (click)=\"assignStore(user)\"\r\n [disabled]=\"!user?.isActive || user?.role ==='superadmin'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span class=\"mx-2\">Assign</span>\r\n </button>\r\n </span>\r\n }\r\n <span class=\"form-check form-switch\" *ngIf=\"userInfo.role!=='user'\">\r\n <input class=\"form-check-input mt-3\" type=\"checkbox\" role=\"switch\" id=\"support\"\r\n [disabled]=\"!((gs.userAccess | async)?.Global_User_isEdit)\"\r\n (change)=\"userStatusChange(user,i)\" [(ngModel)]=\"userList[i].isActive\">\r\n @if (userList[i].isActive) {\r\n Active\r\n } @else {\r\n Deactive\r\n }\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <lib-pagination *ngIf=\"userList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer mb-10\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Role Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-roles-permission-table (dataEvent)=\"receiveData($event)\"></lib-roles-permission-table>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<ng-template #bulkUpload let-modal>\r\n <div class=\"card-body flex-column p-9\">\r\n <div class=\"header-title\">Bulk Assign</div>\r\n <div class=\"d-flex justify-content-start align-items-center\">\r\n <div class=\"fw-bold text-gray-500 mt-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold px-5 fs-6\">\r\n <li class=\"user-text\">Use the template below to assign multiple users to multiple stores at once.</li>\r\n <li class=\"user-text my-3\"><span class=\"user-text\">Download the template here - </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/BulkAssignTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li> \r\n </ol>\r\n </div>\r\n </div>\r\n <div class=\" w-100 right-bar d-flex justify-content-center align-items-center flex-column\" >\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal1\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal1\"\r\n class=\"btn-check\"\r\n (change)=\"onUpload1($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile1 />\r\n <label for=\"kt_create_account_form_account_type_personal1\" class=\" w-1-0 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title mb-3\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Bulk Assign</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getEmailCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold w-100 text-error\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold mt-1 text-error\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to assign {{getEmailCounts(excelData)}} {{getEmailCounts(excelData) > 1 ? 'Users' : 'User'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify-content-end flex-wrap gap-2 pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default btn-primary\" (click)=\"proceedSubmit()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click();\">Reupload</button>\r\n <input style=\"display: none;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload1($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}td{padding:16px 24px!important;line-height:36px!important}.img-src{width:25%;height:20%}.border-val{padding:10px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #344054);font-size:16px;font-weight:600;line-height:24px}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.rotate{rotate:180deg;transition:1s}.p-4{padding:.85rem!important}.inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.header-title{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.subtitle{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:400;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "component", type: RolesPermissionTableComponent, selector: "lib-roles-permission-table", outputs: ["dataEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
4237
4220
|
}
|
|
4238
4221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BrandUserComponent, decorators: [{
|
|
4239
4222
|
type: Component,
|
|
4240
|
-
args: [{ selector: 'lib-brand-user', template: "<div *ngIf=\"receivedData !=='Role Value'\">\r\n <div class=\"\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- <span class=\"card-label mb-2\">Users</span>\r\n <span class=\"text-sub mb-2\">{{pagination?.totalCount ? pagination?.totalCount :'0'}} total users</span> -->\r\n </h3>\r\n <div class=\"card-toolbar rightcorner \">\r\n <div *ngIf=\"!createTeam\" class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <lib-filters [dataObject]=\"dataObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <button *ngIf=\"!loading && !noData\" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n \r\n \r\n <button type=\"button\" (click)=\"bulkAssignasxlsx()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><span class=\"ms-2\">Bulk Assign</span> </button>\r\n\r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" type=\"button\" (click)=\"users('add')\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Add User</span> </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"createTeam\" class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"createTeams()\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"!loading && !noData\" class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span\r\n class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\"\r\n [(ngModel)]=\"selectAllChecked\" class=\"cursor-pointer\"></span>\r\n\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('userName')\">Name\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'userName' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'userName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('email')\">Email\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'email' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'email' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('mobileNumber')\">Contact Number\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'mobileNumber' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'mobileNumber' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('role')\">Roles\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'role' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'role' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Assigned To </th>\r\n <th style=\"line-height: 21px !important;\">As a Lead To </th>\r\n <th style=\"line-height: 21px !important;\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"fw-semibold\">\r\n <ng-container *ngFor=\"let user of userList;let i=index;\">\r\n <tr>\r\n <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input\r\n type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.checked\"\r\n (click)=\"onSelectedTeams(user,i)\"></span></td>\r\n <td>{{user?.userName}}</td>\r\n <td>{{ getMaskedValue(user?.email, userInfo?.role) }}</td>\r\n <td>{{ getMaskedMobile(user?.mobileNumber, userInfo?.role) }}</td>\r\n <td *ngIf=\"user?.role ==='superadmin'\">Super Admin</td>\r\n <td *ngIf=\"user?.role !=='superadmin'\">{{user?.role | titlecase}}</td>\r\n <td><span class=\"badge badge-light-primary\">{{user?.assignedStores||0}} Stores</span> <span class=\"badge badge-light-info\">{{user?.teamCount||0}} Teams</span></td>\r\n <td><span class=\"badge badge-light-purple\">{{user?.clusterCount||0}} Clusters</span> <span class=\"badge badge-light-info\">{{user?.teamlead||0}} Teams</span></td>\r\n <!-- <td>{{user?.teamCount||0}}</td> -->\r\n\r\n <td>\r\n <div class=\"d-flex\">\r\n <!-- @if ((gs.userAccess | async)?.manage_users_isEdit) {\r\n <span class=\"me-3 cursor-pointer\" (click)=\"users('edit',user)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M9.66675 3.33333H3.83341C3.39139 3.33333 2.96746 3.50893 2.6549 3.82149C2.34234 4.13405 2.16675 4.55797 2.16675 5V16.6667C2.16675 17.1087 2.34234 17.5326 2.6549 17.8452C2.96746 18.1577 3.39139 18.3333 3.83341 18.3333H15.5001C15.9421 18.3333 16.366 18.1577 16.6786 17.8452C16.9912 17.5326 17.1667 17.1087 17.1667 16.6667V10.8333M15.9167 2.08333C16.2483 1.75181 16.6979 1.56557 17.1667 1.56557C17.6356 1.56557 18.0852 1.75181 18.4167 2.08333C18.7483 2.41485 18.9345 2.86449 18.9345 3.33333C18.9345 3.80217 18.7483 4.25181 18.4167 4.58333L10.5001 12.5L7.16675 13.3333L8.00008 10L15.9167 2.08333Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n } -->\r\n <span class=\"mx-3 cursor-pointer\" (click)=\"Viewusers('view',user)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1995_16400)\">\r\n <path\r\n d=\"M1.33325 10C1.33325 10 4.66658 3.33337 10.4999 3.33337C16.3333 3.33337 19.6666 10 19.6666 10C19.6666 10 16.3333 16.6667 10.4999 16.6667C4.66658 16.6667 1.33325 10 1.33325 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.4999 12.5C11.8806 12.5 12.9999 11.3808 12.9999 10C12.9999 8.61933 11.8806 7.50004 10.4999 7.50004C9.11921 7.50004 7.99992 8.61933 7.99992 10C7.99992 11.3808 9.11921 12.5 10.4999 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1995_16400\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n @if ((gs.userAccess | async)?.Global_User_isEdit) {\r\n <span class=\"mx-3 cursor-pointer\" *ngIf=\"userInfo.role!=='user'\">\r\n <button type=\"button\" (click)=\"assignStore(user)\"\r\n [disabled]=\"!user?.isActive || user?.role ==='superadmin'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span class=\"mx-2\">Assign</span>\r\n </button>\r\n </span>\r\n }\r\n <span class=\"form-check form-switch\" *ngIf=\"userInfo.role!=='user'\">\r\n <input class=\"form-check-input mt-3\" type=\"checkbox\" role=\"switch\" id=\"support\"\r\n [disabled]=\"!((gs.userAccess | async)?.Global_User_isEdit)\"\r\n (change)=\"userStatusChange(user,i)\" [(ngModel)]=\"userList[i].isActive\">\r\n @if (userList[i].isActive) {\r\n Active\r\n } @else {\r\n Deactive\r\n }\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <lib-pagination *ngIf=\"userList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer mb-10\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"receivedData !=='Role Value'\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <div class=\"card p-5\">\r\n <div class=\"border-0\">\r\n <h3 class=\"title fw-bold\">Roles & Permission</h3>\r\n <h6 class=\"sub-title fw-normal\">{{rolesCount || 0}} total roles</h6>\r\n </div>\r\n <div class=\"card-body px-0\">\r\n <div class=\"flex-column align-items-start\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4 border-val mx-3 mb-7 py-7\" *ngFor=\"let obj of roles\">\r\n\r\n <a *ngIf=\"obj.roleName ==='superadmin'\" class=\"role-title my-2 cursor-pointer\" >Super Admin</a>\r\n <a *ngIf=\"obj.roleName !=='superadmin'\" class=\"role-title my-2 cursor-pointer\">{{obj.roleName |\r\n titlecase}}</a> \r\n <div *ngIf=\"obj.roleName ==='superadmin'\" class=\"sub-title fw-semibold my-5\">Oversees all the operations and controls the entire functionality of the dashboard</div>\r\n <div *ngIf=\"obj.roleName ==='admin'\" class=\"sub-title fw-semibold my-5\">Manages specific operations, permissions, and can change setting for assigned locations</div>\r\n <div *ngIf=\"obj.roleName ==='user'\" class=\"sub-title fw-semibold my-5\">Access to specific location and will be able to view dashboard</div>\r\n <div><span class=\"me-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.count || 0}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Role Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-roles-permission-table (dataEvent)=\"receiveData($event)\"></lib-roles-permission-table>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<ng-template #bulkUpload let-modal>\r\n <div class=\"card-body flex-column p-9\">\r\n <div class=\"header-title\">Bulk Assign</div>\r\n <div class=\"d-flex justify-content-start align-items-center\">\r\n <div class=\"fw-bold text-gray-500 mt-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold px-5 fs-6\">\r\n <li class=\"user-text\">Use the template below to assign multiple users to multiple stores at once.</li>\r\n <li class=\"user-text my-3\"><span class=\"user-text\">Download the template here - </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/BulkAssignTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li> \r\n </ol>\r\n </div>\r\n </div>\r\n <div class=\" w-100 right-bar d-flex justify-content-center align-items-center flex-column\" >\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal1\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal1\"\r\n class=\"btn-check\"\r\n (change)=\"onUpload1($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile1 />\r\n <label for=\"kt_create_account_form_account_type_personal1\" class=\" w-1-0 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title mb-3\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n <!-- <span class=\"ms-2\">or drag and drop</span> -->\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n <div class=\"w-100 d-flex justify-content-between mt-5\">\r\n <button class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.close()\"> Cancel\r\n </button>\r\n <button class=\"btn btn-default btn-primary w-50 ms-2\" (click)=\"modal.close()\"> Submit\r\n </button> \r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Bulk Assign</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to assign {{getStoreCounts(excelData)}} {{getStoreCounts(excelData) > 1 ? 'Stores' : 'Store'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"proceedSubmit()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload1($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}td{padding:16px 24px!important;line-height:36px!important}.img-src{width:25%;height:20%}.border-val{padding:10px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #344054);font-size:16px;font-weight:600;line-height:24px}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.rotate{rotate:180deg;transition:1s}.p-4{padding:.85rem!important}.inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.header-title{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.subtitle{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:400;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}\n"] }]
|
|
4223
|
+
args: [{ selector: 'lib-brand-user', template: "<div *ngIf=\"receivedData !=='Role Value'\">\r\n <div class=\"\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n </h3>\r\n <div class=\"card-toolbar rightcorner \">\r\n <div *ngIf=\"!createTeam\" class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <lib-filters [dataObject]=\"dataObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <button *ngIf=\"!loading && !noData\" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n \r\n \r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" type=\"button\" (click)=\"bulkAssignasxlsx()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><span class=\"ms-2\">Bulk Assign</span> </button>\r\n\r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" type=\"button\" (click)=\"users('add')\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Add User</span> </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"createTeam\" class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"createTeams()\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"!loading && !noData\" class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span\r\n class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\"\r\n [(ngModel)]=\"selectAllChecked\" class=\"cursor-pointer\"></span>\r\n\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('userName')\">Name\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'userName' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'userName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('email')\">Email\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'email' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'email' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('mobileNumber')\">Contact Number\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'mobileNumber' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'mobileNumber' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('role')\">Roles\r\n <svg [ngClass]=\"userList_req?.sortColumName === 'role' && userList_req?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"userList_req?.sortColumName === 'role' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Assigned To </th>\r\n <th style=\"line-height: 21px !important;\">As a Lead To </th>\r\n <th style=\"line-height: 21px !important;\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"fw-semibold\">\r\n <ng-container *ngFor=\"let user of userList;let i=index;\">\r\n <tr>\r\n <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input\r\n type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.checked\"\r\n (click)=\"onSelectedTeams(user,i)\"></span></td>\r\n <td>{{user?.userName}}</td>\r\n <td>{{ getMaskedValue(user?.email, userInfo?.role) }}</td>\r\n <td>{{ getMaskedMobile(user?.mobileNumber, userInfo?.role) }}</td>\r\n <td *ngIf=\"user?.role ==='superadmin'\">Super Admin</td>\r\n <td *ngIf=\"user?.role !=='superadmin'\">{{user?.role | titlecase}}</td>\r\n <td><span class=\"badge badge-light-primary\">{{user?.assignedStores||0}} Stores</span> <span class=\"badge badge-light-info\">{{user?.teamCount||0}} Teams</span></td>\r\n <td><span class=\"badge badge-light-purple\">{{user?.clusterCount||0}} Clusters</span> <span class=\"badge badge-light-info\">{{user?.teamlead||0}} Teams</span></td>\r\n\r\n <td>\r\n <div class=\"d-flex\">\r\n <span class=\"mx-3 cursor-pointer\" (click)=\"Viewusers('view',user)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1995_16400)\">\r\n <path\r\n d=\"M1.33325 10C1.33325 10 4.66658 3.33337 10.4999 3.33337C16.3333 3.33337 19.6666 10 19.6666 10C19.6666 10 16.3333 16.6667 10.4999 16.6667C4.66658 16.6667 1.33325 10 1.33325 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.4999 12.5C11.8806 12.5 12.9999 11.3808 12.9999 10C12.9999 8.61933 11.8806 7.50004 10.4999 7.50004C9.11921 7.50004 7.99992 8.61933 7.99992 10C7.99992 11.3808 9.11921 12.5 10.4999 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1995_16400\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n @if ((gs.userAccess | async)?.Global_User_isEdit) {\r\n <span class=\"mx-3 cursor-pointer\" *ngIf=\"userInfo.role!=='user'\">\r\n <button type=\"button\" (click)=\"assignStore(user)\"\r\n [disabled]=\"!user?.isActive || user?.role ==='superadmin'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span class=\"mx-2\">Assign</span>\r\n </button>\r\n </span>\r\n }\r\n <span class=\"form-check form-switch\" *ngIf=\"userInfo.role!=='user'\">\r\n <input class=\"form-check-input mt-3\" type=\"checkbox\" role=\"switch\" id=\"support\"\r\n [disabled]=\"!((gs.userAccess | async)?.Global_User_isEdit)\"\r\n (change)=\"userStatusChange(user,i)\" [(ngModel)]=\"userList[i].isActive\">\r\n @if (userList[i].isActive) {\r\n Active\r\n } @else {\r\n Deactive\r\n }\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <lib-pagination *ngIf=\"userList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer mb-10\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Role Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-roles-permission-table (dataEvent)=\"receiveData($event)\"></lib-roles-permission-table>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<ng-template #bulkUpload let-modal>\r\n <div class=\"card-body flex-column p-9\">\r\n <div class=\"header-title\">Bulk Assign</div>\r\n <div class=\"d-flex justify-content-start align-items-center\">\r\n <div class=\"fw-bold text-gray-500 mt-6\">\r\n <ol class=\"custom-ordered-list text-gray-400 fw-bold px-5 fs-6\">\r\n <li class=\"user-text\">Use the template below to assign multiple users to multiple stores at once.</li>\r\n <li class=\"user-text my-3\"><span class=\"user-text\">Download the template here - </span>\r\n <a class=\"ms-1\" href=\"../../../assets/files/BulkAssignTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text my-3\">Add your data to the Template File</li>\r\n <li class=\"user-text my-3\">Upload it below for processing</li> \r\n </ol>\r\n </div>\r\n </div>\r\n <div class=\" w-100 right-bar d-flex justify-content-center align-items-center flex-column\" >\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal1\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal1\"\r\n class=\"btn-check\"\r\n (change)=\"onUpload1($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile1 />\r\n <label for=\"kt_create_account_form_account_type_personal1\" class=\" w-1-0 p-4\"><span\r\n class=\"fw-bold text-center w-100 fs-4\">\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4047_40566)\">\r\n <path\r\n d=\"M26.3333 26.3334L23 23M23 23L19.6666 26.3334M23 23V30.5M29.9916 28.325C30.8044 27.8819 31.4465 27.1808 31.8165 26.3322C32.1866 25.4837 32.2635 24.5361 32.0351 23.6389C31.8068 22.7418 31.2862 21.9463 30.5555 21.3779C29.8248 20.8095 28.9257 20.5006 28 20.5H26.95C26.6977 19.5244 26.2276 18.6186 25.5749 17.8509C24.9222 17.0831 24.104 16.4732 23.1817 16.0672C22.2594 15.6612 21.2571 15.4695 20.2501 15.5066C19.243 15.5437 18.2575 15.8086 17.3676 16.2814C16.4777 16.7542 15.7066 17.4226 15.1122 18.2363C14.5177 19.0501 14.1155 19.988 13.9358 20.9795C13.756 21.9711 13.8034 22.9905 14.0743 23.9611C14.3452 24.9317 14.8327 25.8282 15.5 26.5834\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4047_40566\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"nodata-title mb-3\"><span class=\"click-upload cursor-pointer\">Click to\r\n upload</span>\r\n </div>\r\n <div class=\"nodata-sub\">the data added template file for processing.</div>\r\n </span>\r\n </label>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Bulk Assign</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getEmailCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-70px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold w-100 text-error\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold mt-1 text-error\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to assign {{getEmailCounts(excelData)}} {{getEmailCounts(excelData) > 1 ? 'Users' : 'User'}}. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify-content-end flex-wrap gap-2 pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default btn-primary\" (click)=\"proceedSubmit()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click();\">Reupload</button>\r\n <input style=\"display: none;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload1($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}td{padding:16px 24px!important;line-height:36px!important}.img-src{width:25%;height:20%}.border-val{padding:10px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #344054);font-size:16px;font-weight:600;line-height:24px}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.rotate{rotate:180deg;transition:1s}.p-4{padding:.85rem!important}.inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.right-bar{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.click-upload{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.header-title{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.subtitle{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.config-heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:400;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}\n"] }]
|
|
4241
4224
|
}], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.PageInfoService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i2.GlobalStateService }, { type: i4.ToastService }, { type: UserService }, { type: i3$1.Router }, { type: i3$1.ActivatedRoute }], propDecorators: { dataToParent: [{
|
|
4242
4225
|
type: Output
|
|
4243
4226
|
}], bulkUpload: [{
|
|
@@ -5366,7 +5349,7 @@ class TeamsListComponent {
|
|
|
5366
5349
|
afterUplload(data) {
|
|
5367
5350
|
console.log('this.excelError', this.excelError);
|
|
5368
5351
|
this.excelError = data;
|
|
5369
|
-
this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static' });
|
|
5352
|
+
this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static', size: 'lg', windowClass: 'custom-modal-width' });
|
|
5370
5353
|
}
|
|
5371
5354
|
getStoreCounts(data) {
|
|
5372
5355
|
const uniqueUserNames = new Set(data?.map((item) => item.clusterName));
|
|
@@ -5411,11 +5394,11 @@ class TeamsListComponent {
|
|
|
5411
5394
|
this.modalService.dismissAll();
|
|
5412
5395
|
}
|
|
5413
5396
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TeamsListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ManageUsersService }, { token: ExcelService }, { token: i2.GlobalStateService }, { token: i4.ToastService }, { token: i3$1.Router }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
5414
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TeamsListComponent, selector: "lib-teams-list", outputs: { dataTo: "dataTo" }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipContents", first: true, predicate: ["tooltipContents"], descendants: true }, { propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }, { propertyName: "confirmDelete", first: true, predicate: ["confirmDelete"], descendants: true }], ngImport: i0, template: "<div>\r\n <div class=\"\" *ngIf=\"!loading && !viewTeams&&!showcreatebutton\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n </h3>\r\n <div class=\"card-toolbar rightcorner\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 \">\r\n <span *ngIf=\"!selectedUsers?.length\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input *ngIf=\"!selectedUsers?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n <button *ngIf=\"!loading && !noData&& !selectedUsers?.length \" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline px-4 py-3 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd && teamsList.length>0 && !selectedUsers?.length\" type=\"button\" (click)=\"openTeam()\" class=\"btn btn-sm py-3 btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n <div *ngIf=\"selectedUsers?.length\" class=\"btn-delete cursor-pointer px-5 mx-2 rounded-3 text-nowrap\" (click)=\"DeleteAllTeam()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M2.5 4.99996H4.16667M4.16667 4.99996H17.5M4.16667 4.99996V16.6666C4.16667 17.1087 4.34226 17.5326 4.65482 17.8451C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8451C15.6577 17.5326 15.8333 17.1087 15.8333 16.6666V4.99996H4.16667ZM6.66667 4.99996V3.33329C6.66667 2.89127 6.84226 2.46734 7.15482 2.15478C7.46738 1.84222 7.89131 1.66663 8.33333 1.66663H11.6667C12.1087 1.66663 12.5326 1.84222 12.8452 2.15478C13.1577 2.46734 13.3333 2.89127 13.3333 3.33329V4.99996M8.33333 9.16663V14.1666M11.6667 9.16663V14.1666\" stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\">Delete All</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"card-header border-0 pt-3 left-move\">\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 \">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n <button *ngIf=\"!loading && !noData \" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n <button type=\"button\" (click)=\"createTeam()\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <div *ngIf=\"!loading && !noData && !viewTeams&&teamsList.length>0\" class=\"card-body p-0\">\r\n <div *ngIf=\"selectedUsers?.length\" class=\"alert-box\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\">\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\"/>\r\n <g clip-path=\"url(#clip0_12293_6263)\">\r\n <path d=\"M25.1666 17.3866V18C25.1658 19.4376 24.7003 20.8364 23.8395 21.9878C22.9787 23.1393 21.7688 23.9816 20.3902 24.3892C19.0115 24.7968 17.5381 24.7479 16.1896 24.2497C14.841 23.7515 13.6897 22.8307 12.9072 21.6247C12.1248 20.4186 11.7531 18.992 11.8477 17.5575C11.9423 16.123 12.4981 14.7575 13.4321 13.6647C14.3662 12.5718 15.6284 11.8102 17.0307 11.4934C18.433 11.1766 19.9001 11.3215 21.2133 11.9066M25.1666 12.6666L18.4999 19.34L16.4999 17.34\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12293_6263\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10.5 10)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span><span>{{selectedUsers.length === teamsList.length ? 'All ' : 'Totally '}}</span>{{selectedUsers.length}} {{ selectedUsers.length > 1 ? 'Clusters' : 'Cluster'}} on this page are selected.</span><span *ngIf=\"!clustersAllselect || getCheckedClusterCount(this.clustersAllselect) < pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('selectAll')\">Select all {{pagination.totalCount}} Clusters filtered</span>\r\n <span *ngIf=\"clustersAllselect && getCheckedClusterCount(this.clustersAllselect) === pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('unselect')\">Unselect all {{pagination.totalCount}} Clusters filtered</span>\r\n <span></span>\r\n </div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\" [(ngModel)]=\"selectAllChecked\"\r\n class=\"cursor-pointer\"></span>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('teamName')\">Team Name\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'teamName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'teamName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('userscount')\">Users\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'userscount' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'userscount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Lead Name\r\n <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leadName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'leadName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Lead Email\r\n <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leademail' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'leademail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('description')\">Description\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'description' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'description' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"fw-semibold\">\r\n <ng-container *ngFor=\"let user of teamsList;let i=index;\">\r\n <tr>\r\n <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.isChecked\" (click)=\"onSelectedTeam(user,i)\"></span></td>\r\n <td>{{user?.teamName}}</td>\r\n <td>{{user?.userscount}}</td>\r\n <!-- <td>{{user?.leadName}}<span *ngIf=\"user?.Teamleadcount>0\"> +{{user?.Teamleadcount}}</span>\r\n </td> -->\r\n <td><div class=\"mx-2\">\r\n <div class=\"table-title\">\r\n <span class=\"camerastatus\">\r\n <span>\r\n {{ user?.leadName[0]?user?.leadName[0]:\"--\" }}\r\n </span>\r\n <span *ngIf=\"user?.leadName.length > 1\">\r\n +{{ user.leadName.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n <!-- <ng-template #tooltipContent>\r\n <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n <span class=\"w-100\">{{ user.leadName}}</span>\r\n <span *ngIf=\"user.leademail.length > 1\">\r\n +{{ user.leademail.length - 1 }} more\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </div>\r\n </div></td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{user?.leademail.slice(0,1) | uppercase }}\r\n </span>\r\n </span>\r\n </div> -->\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\" *ngIf=\"user?.leademail.length>0\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{ user?.leademail[0]?.substring(0, 2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"mx-2\">\r\n <div class=\"table-title\">\r\n <span class=\"camerastatus\">\r\n <span>\r\n {{ getMaskedValue(user?.leademail[0] ,users?.role) }}\r\n </span>\r\n <span *ngIf=\"user?.leademail.length > 1\">\r\n +{{ user.leademail.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n <!-- <ng-template #tooltipContents>\r\n <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n <span class=\"w-100\">{{ user.leademail}}</span>\r\n </div>\r\n </ng-template> -->\r\n </div>\r\n </div>\r\n <span *ngIf=\"user?.Teamleadcount>0\">+{{user?.Teamleadcount}}</span>\r\n </div>\r\n </td>\r\n <td class=\"description\">{{user?.description ? user?.description : \"--\"}}</td>\r\n <td>\r\n <span class=\"me-3 cursor-pointer\" (click)=\"viewTeamsdata(user)\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"eye\">\r\n <g id=\"Icon\">\r\n <path\r\n d=\"M0.833374 10.0002C0.833374 10.0002 4.16671 3.3335 10 3.3335C15.8334 3.3335 19.1667 10.0002 19.1667 10.0002C19.1667 10.0002 15.8334 16.6668 10 16.6668C4.16671 16.6668 0.833374 10.0002 0.833374 10.0002Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10 12.5002C11.3808 12.5002 12.5 11.3809 12.5 10.0002C12.5 8.61945 11.3808 7.50016 10 7.50016C8.61933 7.50016 7.50004 8.61945 7.50004 10.0002C7.50004 11.3809 8.61933 12.5002 10 12.5002Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"me-3 cursor-pointer\" (click)=\"editTeamsdata(user)\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_2181_11160)\">\r\n <path\r\n d=\"M24.1666 12.4999C24.3855 12.2811 24.6453 12.1074 24.9313 11.989C25.2173 11.8705 25.5238 11.8096 25.8333 11.8096C26.1428 11.8096 26.4493 11.8705 26.7353 11.989C27.0213 12.1074 27.2811 12.2811 27.5 12.4999C27.7188 12.7188 27.8924 12.9786 28.0109 13.2646C28.1294 13.5506 28.1903 13.8571 28.1903 14.1666C28.1903 14.4761 28.1294 14.7826 28.0109 15.0686C27.8924 15.3546 27.7188 15.6144 27.5 15.8333L16.25 27.0833L11.6666 28.3333L12.9166 23.7499L24.1666 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2181_11160\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"cursor-pointer\" (click)=\"deleteTeam(user)\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12.5 14.9998H14.1667M14.1667 14.9998H27.5M14.1667 14.9998V26.6665C14.1667 27.1085 14.3423 27.5325 14.6548 27.845C14.9674 28.1576 15.3913 28.3332 15.8333 28.3332H24.1667C24.6087 28.3332 25.0326 28.1576 25.3452 27.845C25.6577 27.5325 25.8333 27.1085 25.8333 26.6665V14.9998H14.1667ZM16.6667 14.9998V13.3332C16.6667 12.8911 16.8423 12.4672 17.1548 12.1547C17.4674 11.8421 17.8913 11.6665 18.3333 11.6665H21.6667C22.1087 11.6665 22.5326 11.8421 22.8452 12.1547C23.1577 12.4672 23.3333 12.8911 23.3333 13.3332V14.9998M18.3333 19.1665V24.1665M21.6667 19.1665V24.1665\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData && !viewTeams&&teamsList.length>0\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <lib-pagination *ngIf=\"teamsList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer mb-10\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"noData&&!showcreatebutton\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- <div *ngIf=\"showcreatebutton\" class=\"row\">\r\n <div class=\"ms-3 right-bar py-7 d-flex justify-content-center align-items-center flex-column\">\r\n <svg width=\"160\" height=\"120\" viewBox=\"0 0 160 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"82\" cy=\"52\" r=\"52\" fill=\"#EAECF0\" />\r\n <g filter=\"url(#filter0_dd_1030_48016)\">\r\n <path\r\n d=\"M47.7266 79.1098L80.9651 63.6104C82.6339 62.8322 83.3559 60.8485 82.5777 59.1797L62.9484 17.0845L49.6563 12.2466L22.4611 24.9279C20.7923 25.7061 20.0703 27.6898 20.8485 29.3586L43.2959 77.4971C44.074 79.166 46.0577 79.888 47.7266 79.1098Z\"\r\n fill=\"url(#paint0_linear_1030_48016)\" />\r\n <path d=\"M49.6567 12.2471L62.9489 17.085L53.8838 21.3121L49.6567 12.2471Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <g filter=\"url(#filter1_dd_1030_48016)\">\r\n <path\r\n d=\"M63.6163 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6228 8H63.6163C61.7749 8 60.2822 9.49271 60.2822 11.3341V64.4491C60.2822 66.2904 61.7749 67.7831 63.6163 67.7831Z\"\r\n fill=\"url(#paint1_linear_1030_48016)\" />\r\n <path d=\"M93.6226 8L103.625 18.0022H93.6226V8Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <g filter=\"url(#filter2_dd_1030_48016)\">\r\n <path\r\n d=\"M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z\"\r\n fill=\"url(#paint2_linear_1030_48016)\" />\r\n <path d=\"M134.936 22.0898L139.773 35.382L130.708 31.1549L134.936 22.0898Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <circle cx=\"27\" cy=\"11\" r=\"5\" fill=\"#F2F4F7\" />\r\n <circle cx=\"24\" cy=\"109\" r=\"7\" fill=\"#F2F4F7\" />\r\n <circle cx=\"151\" cy=\"35\" r=\"7\" fill=\"#F2F4F7\" />\r\n <circle cx=\"140\" cy=\"8\" r=\"4\" fill=\"#F2F4F7\" />\r\n <g filter=\"url(#filter3_b_1030_48016)\">\r\n <rect x=\"58\" y=\"62\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#344054\" fill-opacity=\"0.4\" />\r\n <path\r\n d=\"M74.5 81.6816C72.8425 81.6816 71.5 80.2133 71.5 78.4004C71.5 76.5875 72.8425 75.1191 74.5 75.1191C76.1575 75.1191 77.5 76.5875 77.5 78.4004C77.5 80.2133 76.1575 81.6816 74.5 81.6816ZM89.6483 81.6816C87.9908 81.6816 86.6483 80.2133 86.6483 78.4004C86.6483 76.5875 87.9908 75.1191 89.6483 75.1191C91.3058 75.1191 92.6483 76.5875 92.6483 78.4004C92.6483 80.2133 91.3058 81.6816 89.6483 81.6816ZM85.509 84.3066C85.509 86.4805 83.8965 88.2441 81.909 88.2441C79.9215 88.2441 78.309 86.4805 78.309 84.3066C78.309 82.1328 79.9215 80.3691 81.909 80.3691C83.8965 80.3691 85.509 82.1328 85.509 84.3066Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M74.0013 83.7559C71.7925 83.7559 70 85.7164 70 88.1322C70 88.6121 70.36 89.0059 70.7988 89.0059H78.8013H78.8275C77.8338 88.042 77.2038 86.6352 77.2038 85.0684C77.2038 84.7566 77.2263 84.449 77.275 84.1537C76.765 83.8994 76.1988 83.7559 75.6025 83.7559H74.0013Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M85.1725 89.0059H85.1987H93.2012C93.64 89.0059 94 88.6162 94 88.1322C94 85.7164 92.2075 83.7559 89.9987 83.7559H88.3975C87.8012 83.7559 87.235 83.8953 86.725 84.1537C86.77 84.4531 86.7963 84.7566 86.7963 85.0684C86.7963 86.6352 86.17 88.042 85.1725 89.0059Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M79.7988 90.3183C77.0388 90.3183 74.8 92.767 74.8 95.7857C74.8 96.3928 75.25 96.8809 75.8013 96.8809H88.1987C88.7537 96.8809 89.2 96.3887 89.2 95.7857C89.2 92.767 86.9613 90.3183 84.2013 90.3183H79.7988Z\"\r\n fill=\"#D0D5DD\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_dd_1030_48016\" x=\"-0.560547\" y=\"8.01953\" width=\"104.547\" height=\"112.499\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter1_dd_1030_48016\" x=\"40.2822\" y=\"8\" width=\"83.3428\" height=\"99.7832\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter2_dd_1030_48016\" x=\"59.4526\" y=\"8\" width=\"104.547\" height=\"112.499\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter3_b_1030_48016\" x=\"50\" y=\"54\" width=\"64\" height=\"64\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"4\" />\r\n <feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <linearGradient id=\"paint0_linear_1030_48016\" x1=\"45.7738\" y1=\"79.2396\" x2=\"19.2853\" y2=\"31.4523\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear_1030_48016\" x1=\"61.7916\" y1=\"67.0755\" x2=\"57.9807\" y2=\"12.571\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear_1030_48016\" x1=\"81.1199\" y1=\"62.1785\" x2=\"100.701\" y2=\"11.17\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title\">Start by creating a team</div>\r\n <div class=\"nodata-sub mt-2\">Any team created will track here.</div>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-center align-items-center mt-3 mb-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-25 me-3\">How to create?</button>\r\n <button [disabled]=\"!(gs.userAccess |async)?.Global_User_isAdd\" class=\"btn btn-primary w-25 ms-3\" id=\"alert-toast\" (click)=\"createTeam()\"><span class=\"mx-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>Create\r\n Team</button>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"card-body d-flex flex-center flex-column p-9\" *ngIf=\"showcreatebutton\">\r\n <div class=\"mb-5\">\r\n <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\"/>\r\n <path d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add teams </a>\r\n <div class=\"fw-bold text-gray-800 my-6\">\r\n <ul class=\"custom-ordered-list text-gray-800 fw-bold fs-6\">\r\n <li class=\"user-text mb-2\">Use the template to upload multiple Teams at once.</li>\r\n <li class=\"user-text mb-2\">Download the template here -\r\n <a href=\"./../../assets/files/teamsBulkUploadTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text mb-2\">Add your data to the Template File</li>\r\n <li class=\"user-text mb-2\">Upload it below for processing</li>\r\n </ul>\r\n </div>\r\n <div class=\"d-flex flex-center flex-column mb-5\" style=\"width: 57% !important;\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\"\r\n class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n class=\"fw-bold fs-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n <span class=\"text-white mx-2\">Upload To Add Multiple Teams</span></span>\r\n </label>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" (click)=\"createTeam()\"\r\n class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n <label for=\"kt_account_team_size_select_1\"\r\n class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-bold fs-4 mx-2\">\r\n Add Single Team</span></label>\r\n </div>\r\n \r\n \r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"viewTeams && !showcreatebutton\">\r\n <lib-viewteams-list [teamData]=\"this.selectedTeam\"></lib-viewteams-list>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Teams</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError?.error?.length ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError?.error?.length ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError?.error?.length\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError?.error?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError?.error?.length\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError?.error?.length\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmDelete let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"mt-3\">\r\n <div class=\"mt-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEE4E2\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FEF3F2\" stroke-width=\"8\"/>\r\n <path d=\"M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#D92D20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"config-heading fw-semibold mt-3 w-auto\">Delete {{teamId?.length}} {{teamId?.length > 1 ? 'Teams' : 'Team'}}? </div></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"mt-5\">\r\n <div class=\"subtitle\" style=\"font-weight: 400;\">Are you sure you want to delete the selected team? This action cannot be undone.</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify justify-content-between pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline w-50 me-2\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-3 btn-default btn-danger w-50 ms-2\" (click)=\"model.close('submit')\">Delete</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}.left-move{justify-content:end}.img-src{width:25%;height:20%}.w-25{width:15%!important}td.description{overflow:hidden;text-overflow:ellipsis;max-width:100px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rotate{rotate:180deg;transition:1s}td{line-height:30px}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.btn-delete{border:1px solid var(--Error-50, #FEF3F2);background:var(--Error-50, #FEF3F2);padding:12px 14px;box-shadow:0 1px 2px #1018280d;color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px}.alert-box{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Gray-100, #F2F4F7);box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 8px 6px 16px;justify-content:center;align-items:center;cursor:pointer;gap:8px;align-self:stretch;color:var(--Gray-500, #667085);font-size:14px;font-weight:600}.alert-box .selectAll{color:var(--Primary-700, #009BF3);font-size:15px;font-weight:700;text-decoration-line:underline;text-decoration-thickness:auto;text-underline-offset:auto}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:500!important;line-height:20px!important}.config-heading{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ViewteamsListComponent, selector: "lib-viewteams-list", inputs: ["teamData"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }] });
|
|
5397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TeamsListComponent, selector: "lib-teams-list", outputs: { dataTo: "dataTo" }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipContents", first: true, predicate: ["tooltipContents"], descendants: true }, { propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }, { propertyName: "confirmDelete", first: true, predicate: ["confirmDelete"], descendants: true }], ngImport: i0, template: "<div>\r\n <div class=\"\" *ngIf=\"!loading && !viewTeams&&!showcreatebutton\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n </h3>\r\n <div class=\"card-toolbar rightcorner\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 \">\r\n <span *ngIf=\"!selectedUsers?.length\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input *ngIf=\"!selectedUsers?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n <button *ngIf=\"!loading && !noData&& !selectedUsers?.length \" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline px-4 py-3 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd && teamsList.length>0 && !selectedUsers?.length\" type=\"button\" (click)=\"openTeam()\" class=\"btn btn-sm py-3 btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n <div *ngIf=\"selectedUsers?.length\" class=\"btn-delete cursor-pointer px-5 mx-2 rounded-3 text-nowrap\" (click)=\"DeleteAllTeam()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M2.5 4.99996H4.16667M4.16667 4.99996H17.5M4.16667 4.99996V16.6666C4.16667 17.1087 4.34226 17.5326 4.65482 17.8451C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8451C15.6577 17.5326 15.8333 17.1087 15.8333 16.6666V4.99996H4.16667ZM6.66667 4.99996V3.33329C6.66667 2.89127 6.84226 2.46734 7.15482 2.15478C7.46738 1.84222 7.89131 1.66663 8.33333 1.66663H11.6667C12.1087 1.66663 12.5326 1.84222 12.8452 2.15478C13.1577 2.46734 13.3333 2.89127 13.3333 3.33329V4.99996M8.33333 9.16663V14.1666M11.6667 9.16663V14.1666\" stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\">Delete All</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"card-header border-0 pt-3 left-move\">\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 \">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n <button *ngIf=\"!loading && !noData \" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n <button type=\"button\" (click)=\"createTeam()\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <div *ngIf=\"!loading && !noData && !viewTeams&&teamsList.length>0\" class=\"card-body p-0\">\r\n <div *ngIf=\"selectedUsers?.length\" class=\"alert-box\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\">\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\"/>\r\n <g clip-path=\"url(#clip0_12293_6263)\">\r\n <path d=\"M25.1666 17.3866V18C25.1658 19.4376 24.7003 20.8364 23.8395 21.9878C22.9787 23.1393 21.7688 23.9816 20.3902 24.3892C19.0115 24.7968 17.5381 24.7479 16.1896 24.2497C14.841 23.7515 13.6897 22.8307 12.9072 21.6247C12.1248 20.4186 11.7531 18.992 11.8477 17.5575C11.9423 16.123 12.4981 14.7575 13.4321 13.6647C14.3662 12.5718 15.6284 11.8102 17.0307 11.4934C18.433 11.1766 19.9001 11.3215 21.2133 11.9066M25.1666 12.6666L18.4999 19.34L16.4999 17.34\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12293_6263\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10.5 10)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span><span>{{selectedUsers.length === teamsList.length ? 'All ' : 'Totally '}}</span>{{selectedUsers.length}} {{ selectedUsers.length > 1 ? 'Clusters' : 'Cluster'}} on this page are selected.</span><span *ngIf=\"!clustersAllselect || getCheckedClusterCount(this.clustersAllselect) < pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('selectAll')\">Select all {{pagination.totalCount}} Clusters filtered</span>\r\n <span *ngIf=\"clustersAllselect && getCheckedClusterCount(this.clustersAllselect) === pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('unselect')\">Unselect all {{pagination.totalCount}} Clusters filtered</span>\r\n <span></span>\r\n </div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\" [(ngModel)]=\"selectAllChecked\"\r\n class=\"cursor-pointer\"></span>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('teamName')\">Team Name\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'teamName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'teamName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('userscount')\">Users\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'userscount' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'userscount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Lead Name\r\n <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leadName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'leadName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Lead Email\r\n <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leademail' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'leademail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('description')\">Description\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'description' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'description' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"fw-semibold\">\r\n <ng-container *ngFor=\"let user of teamsList;let i=index;\">\r\n <tr>\r\n <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.isChecked\" (click)=\"onSelectedTeam(user,i)\"></span></td>\r\n <td>{{user?.teamName}}</td>\r\n <td>{{user?.userscount}}</td>\r\n <!-- <td>{{user?.leadName}}<span *ngIf=\"user?.Teamleadcount>0\"> +{{user?.Teamleadcount}}</span>\r\n </td> -->\r\n <td><div class=\"mx-2\">\r\n <div class=\"table-title\">\r\n <span class=\"camerastatus\">\r\n <span>\r\n {{ user?.leadName[0]?user?.leadName[0]:\"--\" }}\r\n </span>\r\n <span *ngIf=\"user?.leadName.length > 1\">\r\n +{{ user.leadName.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n <!-- <ng-template #tooltipContent>\r\n <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n <span class=\"w-100\">{{ user.leadName}}</span>\r\n <span *ngIf=\"user.leademail.length > 1\">\r\n +{{ user.leademail.length - 1 }} more\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </div>\r\n </div></td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{user?.leademail.slice(0,1) | uppercase }}\r\n </span>\r\n </span>\r\n </div> -->\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\" *ngIf=\"user?.leademail.length>0\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{ user?.leademail[0]?.substring(0, 2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"mx-2\">\r\n <div class=\"table-title\">\r\n <span class=\"camerastatus\">\r\n <span>\r\n {{ getMaskedValue(user?.leademail[0] ,users?.role) }}\r\n </span>\r\n <span *ngIf=\"user?.leademail.length > 1\">\r\n +{{ user.leademail.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n <!-- <ng-template #tooltipContents>\r\n <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n <span class=\"w-100\">{{ user.leademail}}</span>\r\n </div>\r\n </ng-template> -->\r\n </div>\r\n </div>\r\n <span *ngIf=\"user?.Teamleadcount>0\">+{{user?.Teamleadcount}}</span>\r\n </div>\r\n </td>\r\n <td class=\"description\">{{user?.description ? user?.description : \"--\"}}</td>\r\n <td>\r\n <span class=\"me-3 cursor-pointer\" (click)=\"viewTeamsdata(user)\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"eye\">\r\n <g id=\"Icon\">\r\n <path\r\n d=\"M0.833374 10.0002C0.833374 10.0002 4.16671 3.3335 10 3.3335C15.8334 3.3335 19.1667 10.0002 19.1667 10.0002C19.1667 10.0002 15.8334 16.6668 10 16.6668C4.16671 16.6668 0.833374 10.0002 0.833374 10.0002Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10 12.5002C11.3808 12.5002 12.5 11.3809 12.5 10.0002C12.5 8.61945 11.3808 7.50016 10 7.50016C8.61933 7.50016 7.50004 8.61945 7.50004 10.0002C7.50004 11.3809 8.61933 12.5002 10 12.5002Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"me-3 cursor-pointer\" (click)=\"editTeamsdata(user)\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_2181_11160)\">\r\n <path\r\n d=\"M24.1666 12.4999C24.3855 12.2811 24.6453 12.1074 24.9313 11.989C25.2173 11.8705 25.5238 11.8096 25.8333 11.8096C26.1428 11.8096 26.4493 11.8705 26.7353 11.989C27.0213 12.1074 27.2811 12.2811 27.5 12.4999C27.7188 12.7188 27.8924 12.9786 28.0109 13.2646C28.1294 13.5506 28.1903 13.8571 28.1903 14.1666C28.1903 14.4761 28.1294 14.7826 28.0109 15.0686C27.8924 15.3546 27.7188 15.6144 27.5 15.8333L16.25 27.0833L11.6666 28.3333L12.9166 23.7499L24.1666 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2181_11160\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"cursor-pointer\" (click)=\"deleteTeam(user)\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12.5 14.9998H14.1667M14.1667 14.9998H27.5M14.1667 14.9998V26.6665C14.1667 27.1085 14.3423 27.5325 14.6548 27.845C14.9674 28.1576 15.3913 28.3332 15.8333 28.3332H24.1667C24.6087 28.3332 25.0326 28.1576 25.3452 27.845C25.6577 27.5325 25.8333 27.1085 25.8333 26.6665V14.9998H14.1667ZM16.6667 14.9998V13.3332C16.6667 12.8911 16.8423 12.4672 17.1548 12.1547C17.4674 11.8421 17.8913 11.6665 18.3333 11.6665H21.6667C22.1087 11.6665 22.5326 11.8421 22.8452 12.1547C23.1577 12.4672 23.3333 12.8911 23.3333 13.3332V14.9998M18.3333 19.1665V24.1665M21.6667 19.1665V24.1665\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData && !viewTeams&&teamsList.length>0\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <lib-pagination *ngIf=\"teamsList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer mb-10\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"noData&&!showcreatebutton\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- <div *ngIf=\"showcreatebutton\" class=\"row\">\r\n <div class=\"ms-3 right-bar py-7 d-flex justify-content-center align-items-center flex-column\">\r\n <svg width=\"160\" height=\"120\" viewBox=\"0 0 160 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"82\" cy=\"52\" r=\"52\" fill=\"#EAECF0\" />\r\n <g filter=\"url(#filter0_dd_1030_48016)\">\r\n <path\r\n d=\"M47.7266 79.1098L80.9651 63.6104C82.6339 62.8322 83.3559 60.8485 82.5777 59.1797L62.9484 17.0845L49.6563 12.2466L22.4611 24.9279C20.7923 25.7061 20.0703 27.6898 20.8485 29.3586L43.2959 77.4971C44.074 79.166 46.0577 79.888 47.7266 79.1098Z\"\r\n fill=\"url(#paint0_linear_1030_48016)\" />\r\n <path d=\"M49.6567 12.2471L62.9489 17.085L53.8838 21.3121L49.6567 12.2471Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <g filter=\"url(#filter1_dd_1030_48016)\">\r\n <path\r\n d=\"M63.6163 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6228 8H63.6163C61.7749 8 60.2822 9.49271 60.2822 11.3341V64.4491C60.2822 66.2904 61.7749 67.7831 63.6163 67.7831Z\"\r\n fill=\"url(#paint1_linear_1030_48016)\" />\r\n <path d=\"M93.6226 8L103.625 18.0022H93.6226V8Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <g filter=\"url(#filter2_dd_1030_48016)\">\r\n <path\r\n d=\"M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z\"\r\n fill=\"url(#paint2_linear_1030_48016)\" />\r\n <path d=\"M134.936 22.0898L139.773 35.382L130.708 31.1549L134.936 22.0898Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <circle cx=\"27\" cy=\"11\" r=\"5\" fill=\"#F2F4F7\" />\r\n <circle cx=\"24\" cy=\"109\" r=\"7\" fill=\"#F2F4F7\" />\r\n <circle cx=\"151\" cy=\"35\" r=\"7\" fill=\"#F2F4F7\" />\r\n <circle cx=\"140\" cy=\"8\" r=\"4\" fill=\"#F2F4F7\" />\r\n <g filter=\"url(#filter3_b_1030_48016)\">\r\n <rect x=\"58\" y=\"62\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#344054\" fill-opacity=\"0.4\" />\r\n <path\r\n d=\"M74.5 81.6816C72.8425 81.6816 71.5 80.2133 71.5 78.4004C71.5 76.5875 72.8425 75.1191 74.5 75.1191C76.1575 75.1191 77.5 76.5875 77.5 78.4004C77.5 80.2133 76.1575 81.6816 74.5 81.6816ZM89.6483 81.6816C87.9908 81.6816 86.6483 80.2133 86.6483 78.4004C86.6483 76.5875 87.9908 75.1191 89.6483 75.1191C91.3058 75.1191 92.6483 76.5875 92.6483 78.4004C92.6483 80.2133 91.3058 81.6816 89.6483 81.6816ZM85.509 84.3066C85.509 86.4805 83.8965 88.2441 81.909 88.2441C79.9215 88.2441 78.309 86.4805 78.309 84.3066C78.309 82.1328 79.9215 80.3691 81.909 80.3691C83.8965 80.3691 85.509 82.1328 85.509 84.3066Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M74.0013 83.7559C71.7925 83.7559 70 85.7164 70 88.1322C70 88.6121 70.36 89.0059 70.7988 89.0059H78.8013H78.8275C77.8338 88.042 77.2038 86.6352 77.2038 85.0684C77.2038 84.7566 77.2263 84.449 77.275 84.1537C76.765 83.8994 76.1988 83.7559 75.6025 83.7559H74.0013Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M85.1725 89.0059H85.1987H93.2012C93.64 89.0059 94 88.6162 94 88.1322C94 85.7164 92.2075 83.7559 89.9987 83.7559H88.3975C87.8012 83.7559 87.235 83.8953 86.725 84.1537C86.77 84.4531 86.7963 84.7566 86.7963 85.0684C86.7963 86.6352 86.17 88.042 85.1725 89.0059Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M79.7988 90.3183C77.0388 90.3183 74.8 92.767 74.8 95.7857C74.8 96.3928 75.25 96.8809 75.8013 96.8809H88.1987C88.7537 96.8809 89.2 96.3887 89.2 95.7857C89.2 92.767 86.9613 90.3183 84.2013 90.3183H79.7988Z\"\r\n fill=\"#D0D5DD\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_dd_1030_48016\" x=\"-0.560547\" y=\"8.01953\" width=\"104.547\" height=\"112.499\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter1_dd_1030_48016\" x=\"40.2822\" y=\"8\" width=\"83.3428\" height=\"99.7832\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter2_dd_1030_48016\" x=\"59.4526\" y=\"8\" width=\"104.547\" height=\"112.499\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter3_b_1030_48016\" x=\"50\" y=\"54\" width=\"64\" height=\"64\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"4\" />\r\n <feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <linearGradient id=\"paint0_linear_1030_48016\" x1=\"45.7738\" y1=\"79.2396\" x2=\"19.2853\" y2=\"31.4523\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear_1030_48016\" x1=\"61.7916\" y1=\"67.0755\" x2=\"57.9807\" y2=\"12.571\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear_1030_48016\" x1=\"81.1199\" y1=\"62.1785\" x2=\"100.701\" y2=\"11.17\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title\">Start by creating a team</div>\r\n <div class=\"nodata-sub mt-2\">Any team created will track here.</div>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-center align-items-center mt-3 mb-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-25 me-3\">How to create?</button>\r\n <button [disabled]=\"!(gs.userAccess |async)?.Global_User_isAdd\" class=\"btn btn-primary w-25 ms-3\" id=\"alert-toast\" (click)=\"createTeam()\"><span class=\"mx-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>Create\r\n Team</button>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"card-body d-flex flex-center flex-column p-9\" *ngIf=\"showcreatebutton\">\r\n <div class=\"mb-5\">\r\n <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\"/>\r\n <path d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add teams </a>\r\n <div class=\"fw-bold text-gray-800 my-6\">\r\n <ul class=\"custom-ordered-list text-gray-800 fw-bold fs-6\">\r\n <li class=\"user-text mb-2\">Use the template to upload multiple Teams at once.</li>\r\n <li class=\"user-text mb-2\">Download the template here -\r\n <a href=\"./../../assets/files/teamsBulkUploadTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text mb-2\">Add your data to the Template File</li>\r\n <li class=\"user-text mb-2\">Upload it below for processing</li>\r\n </ul>\r\n </div>\r\n <div class=\"d-flex flex-center flex-column mb-5\" style=\"width: 57% !important;\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\"\r\n class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n class=\"fw-bold fs-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n <span class=\"text-white mx-2\">Upload To Add Multiple Teams</span></span>\r\n </label>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" (click)=\"createTeam()\"\r\n class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n <label for=\"kt_account_team_size_select_1\"\r\n class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-bold fs-4 mx-2\">\r\n Add Single Team</span></label>\r\n </div>\r\n \r\n \r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"viewTeams && !showcreatebutton\">\r\n <lib-viewteams-list [teamData]=\"this.selectedTeam\"></lib-viewteams-list>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Teams</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError?.error?.length ? 'error-heading':''\" class=\"fw-semibold w-100 text-error\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError?.error?.length ? 'excel-error':''\" class=\"fw-semibold mt-1 text-error\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError?.error?.length\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError?.error?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify-content-end flex-wrap gap-2 pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError?.error?.length\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError?.error?.length\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n <input style=\"display: none;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmDelete let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"mt-3\">\r\n <div class=\"mt-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEE4E2\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FEF3F2\" stroke-width=\"8\"/>\r\n <path d=\"M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#D92D20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"config-heading fw-semibold mt-3 w-auto\">Delete {{teamId?.length}} {{teamId?.length > 1 ? 'Teams' : 'Team'}}? </div></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"mt-5\">\r\n <div class=\"subtitle\" style=\"font-weight: 400;\">Are you sure you want to delete the selected team? This action cannot be undone.</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify justify-content-between pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline w-50 me-2\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-3 btn-default btn-danger w-50 ms-2\" (click)=\"model.close('submit')\">Delete</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}.left-move{justify-content:end}.img-src{width:25%;height:20%}.w-25{width:15%!important}td.description{overflow:hidden;text-overflow:ellipsis;max-width:100px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rotate{rotate:180deg;transition:1s}td{line-height:30px}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.btn-delete{border:1px solid var(--Error-50, #FEF3F2);background:var(--Error-50, #FEF3F2);padding:12px 14px;box-shadow:0 1px 2px #1018280d;color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px}.alert-box{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Gray-100, #F2F4F7);box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 8px 6px 16px;justify-content:center;align-items:center;cursor:pointer;gap:8px;align-self:stretch;color:var(--Gray-500, #667085);font-size:14px;font-weight:600}.alert-box .selectAll{color:var(--Primary-700, #009BF3);font-size:15px;font-weight:700;text-decoration-line:underline;text-decoration-thickness:auto;text-underline-offset:auto}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:500!important;line-height:20px!important}.config-heading{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ViewteamsListComponent, selector: "lib-viewteams-list", inputs: ["teamData"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }] });
|
|
5415
5398
|
}
|
|
5416
5399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TeamsListComponent, decorators: [{
|
|
5417
5400
|
type: Component,
|
|
5418
|
-
args: [{ selector: 'lib-teams-list', template: "<div>\r\n <div class=\"\" *ngIf=\"!loading && !viewTeams&&!showcreatebutton\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n </h3>\r\n <div class=\"card-toolbar rightcorner\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 \">\r\n <span *ngIf=\"!selectedUsers?.length\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input *ngIf=\"!selectedUsers?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n <button *ngIf=\"!loading && !noData&& !selectedUsers?.length \" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline px-4 py-3 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd && teamsList.length>0 && !selectedUsers?.length\" type=\"button\" (click)=\"openTeam()\" class=\"btn btn-sm py-3 btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n <div *ngIf=\"selectedUsers?.length\" class=\"btn-delete cursor-pointer px-5 mx-2 rounded-3 text-nowrap\" (click)=\"DeleteAllTeam()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M2.5 4.99996H4.16667M4.16667 4.99996H17.5M4.16667 4.99996V16.6666C4.16667 17.1087 4.34226 17.5326 4.65482 17.8451C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8451C15.6577 17.5326 15.8333 17.1087 15.8333 16.6666V4.99996H4.16667ZM6.66667 4.99996V3.33329C6.66667 2.89127 6.84226 2.46734 7.15482 2.15478C7.46738 1.84222 7.89131 1.66663 8.33333 1.66663H11.6667C12.1087 1.66663 12.5326 1.84222 12.8452 2.15478C13.1577 2.46734 13.3333 2.89127 13.3333 3.33329V4.99996M8.33333 9.16663V14.1666M11.6667 9.16663V14.1666\" stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\">Delete All</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"card-header border-0 pt-3 left-move\">\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 \">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n <button *ngIf=\"!loading && !noData \" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n <button type=\"button\" (click)=\"createTeam()\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <div *ngIf=\"!loading && !noData && !viewTeams&&teamsList.length>0\" class=\"card-body p-0\">\r\n <div *ngIf=\"selectedUsers?.length\" class=\"alert-box\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\">\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\"/>\r\n <g clip-path=\"url(#clip0_12293_6263)\">\r\n <path d=\"M25.1666 17.3866V18C25.1658 19.4376 24.7003 20.8364 23.8395 21.9878C22.9787 23.1393 21.7688 23.9816 20.3902 24.3892C19.0115 24.7968 17.5381 24.7479 16.1896 24.2497C14.841 23.7515 13.6897 22.8307 12.9072 21.6247C12.1248 20.4186 11.7531 18.992 11.8477 17.5575C11.9423 16.123 12.4981 14.7575 13.4321 13.6647C14.3662 12.5718 15.6284 11.8102 17.0307 11.4934C18.433 11.1766 19.9001 11.3215 21.2133 11.9066M25.1666 12.6666L18.4999 19.34L16.4999 17.34\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12293_6263\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10.5 10)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span><span>{{selectedUsers.length === teamsList.length ? 'All ' : 'Totally '}}</span>{{selectedUsers.length}} {{ selectedUsers.length > 1 ? 'Clusters' : 'Cluster'}} on this page are selected.</span><span *ngIf=\"!clustersAllselect || getCheckedClusterCount(this.clustersAllselect) < pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('selectAll')\">Select all {{pagination.totalCount}} Clusters filtered</span>\r\n <span *ngIf=\"clustersAllselect && getCheckedClusterCount(this.clustersAllselect) === pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('unselect')\">Unselect all {{pagination.totalCount}} Clusters filtered</span>\r\n <span></span>\r\n </div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\" [(ngModel)]=\"selectAllChecked\"\r\n class=\"cursor-pointer\"></span>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('teamName')\">Team Name\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'teamName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'teamName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('userscount')\">Users\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'userscount' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'userscount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Lead Name\r\n <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leadName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'leadName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Lead Email\r\n <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leademail' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'leademail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('description')\">Description\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'description' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'description' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"fw-semibold\">\r\n <ng-container *ngFor=\"let user of teamsList;let i=index;\">\r\n <tr>\r\n <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.isChecked\" (click)=\"onSelectedTeam(user,i)\"></span></td>\r\n <td>{{user?.teamName}}</td>\r\n <td>{{user?.userscount}}</td>\r\n <!-- <td>{{user?.leadName}}<span *ngIf=\"user?.Teamleadcount>0\"> +{{user?.Teamleadcount}}</span>\r\n </td> -->\r\n <td><div class=\"mx-2\">\r\n <div class=\"table-title\">\r\n <span class=\"camerastatus\">\r\n <span>\r\n {{ user?.leadName[0]?user?.leadName[0]:\"--\" }}\r\n </span>\r\n <span *ngIf=\"user?.leadName.length > 1\">\r\n +{{ user.leadName.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n <!-- <ng-template #tooltipContent>\r\n <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n <span class=\"w-100\">{{ user.leadName}}</span>\r\n <span *ngIf=\"user.leademail.length > 1\">\r\n +{{ user.leademail.length - 1 }} more\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </div>\r\n </div></td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{user?.leademail.slice(0,1) | uppercase }}\r\n </span>\r\n </span>\r\n </div> -->\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\" *ngIf=\"user?.leademail.length>0\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{ user?.leademail[0]?.substring(0, 2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"mx-2\">\r\n <div class=\"table-title\">\r\n <span class=\"camerastatus\">\r\n <span>\r\n {{ getMaskedValue(user?.leademail[0] ,users?.role) }}\r\n </span>\r\n <span *ngIf=\"user?.leademail.length > 1\">\r\n +{{ user.leademail.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n <!-- <ng-template #tooltipContents>\r\n <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n <span class=\"w-100\">{{ user.leademail}}</span>\r\n </div>\r\n </ng-template> -->\r\n </div>\r\n </div>\r\n <span *ngIf=\"user?.Teamleadcount>0\">+{{user?.Teamleadcount}}</span>\r\n </div>\r\n </td>\r\n <td class=\"description\">{{user?.description ? user?.description : \"--\"}}</td>\r\n <td>\r\n <span class=\"me-3 cursor-pointer\" (click)=\"viewTeamsdata(user)\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"eye\">\r\n <g id=\"Icon\">\r\n <path\r\n d=\"M0.833374 10.0002C0.833374 10.0002 4.16671 3.3335 10 3.3335C15.8334 3.3335 19.1667 10.0002 19.1667 10.0002C19.1667 10.0002 15.8334 16.6668 10 16.6668C4.16671 16.6668 0.833374 10.0002 0.833374 10.0002Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10 12.5002C11.3808 12.5002 12.5 11.3809 12.5 10.0002C12.5 8.61945 11.3808 7.50016 10 7.50016C8.61933 7.50016 7.50004 8.61945 7.50004 10.0002C7.50004 11.3809 8.61933 12.5002 10 12.5002Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"me-3 cursor-pointer\" (click)=\"editTeamsdata(user)\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_2181_11160)\">\r\n <path\r\n d=\"M24.1666 12.4999C24.3855 12.2811 24.6453 12.1074 24.9313 11.989C25.2173 11.8705 25.5238 11.8096 25.8333 11.8096C26.1428 11.8096 26.4493 11.8705 26.7353 11.989C27.0213 12.1074 27.2811 12.2811 27.5 12.4999C27.7188 12.7188 27.8924 12.9786 28.0109 13.2646C28.1294 13.5506 28.1903 13.8571 28.1903 14.1666C28.1903 14.4761 28.1294 14.7826 28.0109 15.0686C27.8924 15.3546 27.7188 15.6144 27.5 15.8333L16.25 27.0833L11.6666 28.3333L12.9166 23.7499L24.1666 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2181_11160\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"cursor-pointer\" (click)=\"deleteTeam(user)\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12.5 14.9998H14.1667M14.1667 14.9998H27.5M14.1667 14.9998V26.6665C14.1667 27.1085 14.3423 27.5325 14.6548 27.845C14.9674 28.1576 15.3913 28.3332 15.8333 28.3332H24.1667C24.6087 28.3332 25.0326 28.1576 25.3452 27.845C25.6577 27.5325 25.8333 27.1085 25.8333 26.6665V14.9998H14.1667ZM16.6667 14.9998V13.3332C16.6667 12.8911 16.8423 12.4672 17.1548 12.1547C17.4674 11.8421 17.8913 11.6665 18.3333 11.6665H21.6667C22.1087 11.6665 22.5326 11.8421 22.8452 12.1547C23.1577 12.4672 23.3333 12.8911 23.3333 13.3332V14.9998M18.3333 19.1665V24.1665M21.6667 19.1665V24.1665\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData && !viewTeams&&teamsList.length>0\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <lib-pagination *ngIf=\"teamsList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer mb-10\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"noData&&!showcreatebutton\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- <div *ngIf=\"showcreatebutton\" class=\"row\">\r\n <div class=\"ms-3 right-bar py-7 d-flex justify-content-center align-items-center flex-column\">\r\n <svg width=\"160\" height=\"120\" viewBox=\"0 0 160 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"82\" cy=\"52\" r=\"52\" fill=\"#EAECF0\" />\r\n <g filter=\"url(#filter0_dd_1030_48016)\">\r\n <path\r\n d=\"M47.7266 79.1098L80.9651 63.6104C82.6339 62.8322 83.3559 60.8485 82.5777 59.1797L62.9484 17.0845L49.6563 12.2466L22.4611 24.9279C20.7923 25.7061 20.0703 27.6898 20.8485 29.3586L43.2959 77.4971C44.074 79.166 46.0577 79.888 47.7266 79.1098Z\"\r\n fill=\"url(#paint0_linear_1030_48016)\" />\r\n <path d=\"M49.6567 12.2471L62.9489 17.085L53.8838 21.3121L49.6567 12.2471Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <g filter=\"url(#filter1_dd_1030_48016)\">\r\n <path\r\n d=\"M63.6163 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6228 8H63.6163C61.7749 8 60.2822 9.49271 60.2822 11.3341V64.4491C60.2822 66.2904 61.7749 67.7831 63.6163 67.7831Z\"\r\n fill=\"url(#paint1_linear_1030_48016)\" />\r\n <path d=\"M93.6226 8L103.625 18.0022H93.6226V8Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <g filter=\"url(#filter2_dd_1030_48016)\">\r\n <path\r\n d=\"M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z\"\r\n fill=\"url(#paint2_linear_1030_48016)\" />\r\n <path d=\"M134.936 22.0898L139.773 35.382L130.708 31.1549L134.936 22.0898Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <circle cx=\"27\" cy=\"11\" r=\"5\" fill=\"#F2F4F7\" />\r\n <circle cx=\"24\" cy=\"109\" r=\"7\" fill=\"#F2F4F7\" />\r\n <circle cx=\"151\" cy=\"35\" r=\"7\" fill=\"#F2F4F7\" />\r\n <circle cx=\"140\" cy=\"8\" r=\"4\" fill=\"#F2F4F7\" />\r\n <g filter=\"url(#filter3_b_1030_48016)\">\r\n <rect x=\"58\" y=\"62\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#344054\" fill-opacity=\"0.4\" />\r\n <path\r\n d=\"M74.5 81.6816C72.8425 81.6816 71.5 80.2133 71.5 78.4004C71.5 76.5875 72.8425 75.1191 74.5 75.1191C76.1575 75.1191 77.5 76.5875 77.5 78.4004C77.5 80.2133 76.1575 81.6816 74.5 81.6816ZM89.6483 81.6816C87.9908 81.6816 86.6483 80.2133 86.6483 78.4004C86.6483 76.5875 87.9908 75.1191 89.6483 75.1191C91.3058 75.1191 92.6483 76.5875 92.6483 78.4004C92.6483 80.2133 91.3058 81.6816 89.6483 81.6816ZM85.509 84.3066C85.509 86.4805 83.8965 88.2441 81.909 88.2441C79.9215 88.2441 78.309 86.4805 78.309 84.3066C78.309 82.1328 79.9215 80.3691 81.909 80.3691C83.8965 80.3691 85.509 82.1328 85.509 84.3066Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M74.0013 83.7559C71.7925 83.7559 70 85.7164 70 88.1322C70 88.6121 70.36 89.0059 70.7988 89.0059H78.8013H78.8275C77.8338 88.042 77.2038 86.6352 77.2038 85.0684C77.2038 84.7566 77.2263 84.449 77.275 84.1537C76.765 83.8994 76.1988 83.7559 75.6025 83.7559H74.0013Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M85.1725 89.0059H85.1987H93.2012C93.64 89.0059 94 88.6162 94 88.1322C94 85.7164 92.2075 83.7559 89.9987 83.7559H88.3975C87.8012 83.7559 87.235 83.8953 86.725 84.1537C86.77 84.4531 86.7963 84.7566 86.7963 85.0684C86.7963 86.6352 86.17 88.042 85.1725 89.0059Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M79.7988 90.3183C77.0388 90.3183 74.8 92.767 74.8 95.7857C74.8 96.3928 75.25 96.8809 75.8013 96.8809H88.1987C88.7537 96.8809 89.2 96.3887 89.2 95.7857C89.2 92.767 86.9613 90.3183 84.2013 90.3183H79.7988Z\"\r\n fill=\"#D0D5DD\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_dd_1030_48016\" x=\"-0.560547\" y=\"8.01953\" width=\"104.547\" height=\"112.499\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter1_dd_1030_48016\" x=\"40.2822\" y=\"8\" width=\"83.3428\" height=\"99.7832\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter2_dd_1030_48016\" x=\"59.4526\" y=\"8\" width=\"104.547\" height=\"112.499\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter3_b_1030_48016\" x=\"50\" y=\"54\" width=\"64\" height=\"64\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"4\" />\r\n <feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <linearGradient id=\"paint0_linear_1030_48016\" x1=\"45.7738\" y1=\"79.2396\" x2=\"19.2853\" y2=\"31.4523\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear_1030_48016\" x1=\"61.7916\" y1=\"67.0755\" x2=\"57.9807\" y2=\"12.571\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear_1030_48016\" x1=\"81.1199\" y1=\"62.1785\" x2=\"100.701\" y2=\"11.17\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title\">Start by creating a team</div>\r\n <div class=\"nodata-sub mt-2\">Any team created will track here.</div>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-center align-items-center mt-3 mb-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-25 me-3\">How to create?</button>\r\n <button [disabled]=\"!(gs.userAccess |async)?.Global_User_isAdd\" class=\"btn btn-primary w-25 ms-3\" id=\"alert-toast\" (click)=\"createTeam()\"><span class=\"mx-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>Create\r\n Team</button>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"card-body d-flex flex-center flex-column p-9\" *ngIf=\"showcreatebutton\">\r\n <div class=\"mb-5\">\r\n <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\"/>\r\n <path d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add teams </a>\r\n <div class=\"fw-bold text-gray-800 my-6\">\r\n <ul class=\"custom-ordered-list text-gray-800 fw-bold fs-6\">\r\n <li class=\"user-text mb-2\">Use the template to upload multiple Teams at once.</li>\r\n <li class=\"user-text mb-2\">Download the template here -\r\n <a href=\"./../../assets/files/teamsBulkUploadTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text mb-2\">Add your data to the Template File</li>\r\n <li class=\"user-text mb-2\">Upload it below for processing</li>\r\n </ul>\r\n </div>\r\n <div class=\"d-flex flex-center flex-column mb-5\" style=\"width: 57% !important;\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\"\r\n class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n class=\"fw-bold fs-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n <span class=\"text-white mx-2\">Upload To Add Multiple Teams</span></span>\r\n </label>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" (click)=\"createTeam()\"\r\n class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n <label for=\"kt_account_team_size_select_1\"\r\n class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-bold fs-4 mx-2\">\r\n Add Single Team</span></label>\r\n </div>\r\n \r\n \r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"viewTeams && !showcreatebutton\">\r\n <lib-viewteams-list [teamData]=\"this.selectedTeam\"></lib-viewteams-list>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Teams</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError?.error?.length ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError?.error?.length ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError?.error?.length\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError?.error?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError?.error?.length\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError?.error?.length\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmDelete let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"mt-3\">\r\n <div class=\"mt-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEE4E2\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FEF3F2\" stroke-width=\"8\"/>\r\n <path d=\"M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#D92D20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"config-heading fw-semibold mt-3 w-auto\">Delete {{teamId?.length}} {{teamId?.length > 1 ? 'Teams' : 'Team'}}? </div></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"mt-5\">\r\n <div class=\"subtitle\" style=\"font-weight: 400;\">Are you sure you want to delete the selected team? This action cannot be undone.</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify justify-content-between pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline w-50 me-2\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-3 btn-default btn-danger w-50 ms-2\" (click)=\"model.close('submit')\">Delete</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}.left-move{justify-content:end}.img-src{width:25%;height:20%}.w-25{width:15%!important}td.description{overflow:hidden;text-overflow:ellipsis;max-width:100px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rotate{rotate:180deg;transition:1s}td{line-height:30px}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.btn-delete{border:1px solid var(--Error-50, #FEF3F2);background:var(--Error-50, #FEF3F2);padding:12px 14px;box-shadow:0 1px 2px #1018280d;color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px}.alert-box{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Gray-100, #F2F4F7);box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 8px 6px 16px;justify-content:center;align-items:center;cursor:pointer;gap:8px;align-self:stretch;color:var(--Gray-500, #667085);font-size:14px;font-weight:600}.alert-box .selectAll{color:var(--Primary-700, #009BF3);font-size:15px;font-weight:700;text-decoration-line:underline;text-decoration-thickness:auto;text-underline-offset:auto}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:500!important;line-height:20px!important}.config-heading{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px!important}\n"] }]
|
|
5401
|
+
args: [{ selector: 'lib-teams-list', template: "<div>\r\n <div class=\"\" *ngIf=\"!loading && !viewTeams&&!showcreatebutton\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n </h3>\r\n <div class=\"card-toolbar rightcorner\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 \">\r\n <span *ngIf=\"!selectedUsers?.length\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input *ngIf=\"!selectedUsers?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n <button *ngIf=\"!loading && !noData&& !selectedUsers?.length \" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline px-4 py-3 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd && teamsList.length>0 && !selectedUsers?.length\" type=\"button\" (click)=\"openTeam()\" class=\"btn btn-sm py-3 btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n <div *ngIf=\"selectedUsers?.length\" class=\"btn-delete cursor-pointer px-5 mx-2 rounded-3 text-nowrap\" (click)=\"DeleteAllTeam()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M2.5 4.99996H4.16667M4.16667 4.99996H17.5M4.16667 4.99996V16.6666C4.16667 17.1087 4.34226 17.5326 4.65482 17.8451C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8451C15.6577 17.5326 15.8333 17.1087 15.8333 16.6666V4.99996H4.16667ZM6.66667 4.99996V3.33329C6.66667 2.89127 6.84226 2.46734 7.15482 2.15478C7.46738 1.84222 7.89131 1.66663 8.33333 1.66663H11.6667C12.1087 1.66663 12.5326 1.84222 12.8452 2.15478C13.1577 2.46734 13.3333 2.89127 13.3333 3.33329V4.99996M8.33333 9.16663V14.1666M11.6667 9.16663V14.1666\" stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\">Delete All</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"card-header border-0 pt-3 left-move\">\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 \">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n <button *ngIf=\"!loading && !noData \" type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n <button type=\"button\" (click)=\"createTeam()\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <div *ngIf=\"!loading && !noData && !viewTeams&&teamsList.length>0\" class=\"card-body p-0\">\r\n <div *ngIf=\"selectedUsers?.length\" class=\"alert-box\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\">\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\"/>\r\n <g clip-path=\"url(#clip0_12293_6263)\">\r\n <path d=\"M25.1666 17.3866V18C25.1658 19.4376 24.7003 20.8364 23.8395 21.9878C22.9787 23.1393 21.7688 23.9816 20.3902 24.3892C19.0115 24.7968 17.5381 24.7479 16.1896 24.2497C14.841 23.7515 13.6897 22.8307 12.9072 21.6247C12.1248 20.4186 11.7531 18.992 11.8477 17.5575C11.9423 16.123 12.4981 14.7575 13.4321 13.6647C14.3662 12.5718 15.6284 11.8102 17.0307 11.4934C18.433 11.1766 19.9001 11.3215 21.2133 11.9066M25.1666 12.6666L18.4999 19.34L16.4999 17.34\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12293_6263\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10.5 10)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span><span>{{selectedUsers.length === teamsList.length ? 'All ' : 'Totally '}}</span>{{selectedUsers.length}} {{ selectedUsers.length > 1 ? 'Clusters' : 'Cluster'}} on this page are selected.</span><span *ngIf=\"!clustersAllselect || getCheckedClusterCount(this.clustersAllselect) < pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('selectAll')\">Select all {{pagination.totalCount}} Clusters filtered</span>\r\n <span *ngIf=\"clustersAllselect && getCheckedClusterCount(this.clustersAllselect) === pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('unselect')\">Unselect all {{pagination.totalCount}} Clusters filtered</span>\r\n <span></span>\r\n </div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\" [(ngModel)]=\"selectAllChecked\"\r\n class=\"cursor-pointer\"></span>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('teamName')\">Team Name\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'teamName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'teamName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('userscount')\">Users\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'userscount' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'userscount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Lead Name\r\n <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leadName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'leadName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Lead Email\r\n <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leademail' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'leademail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('description')\">Description\r\n <svg [ngClass]=\"reqdata?.sortColumName === 'description' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"reqdata?.sortColumName === 'description' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th style=\"line-height: 21px !important;\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"fw-semibold\">\r\n <ng-container *ngFor=\"let user of teamsList;let i=index;\">\r\n <tr>\r\n <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.isChecked\" (click)=\"onSelectedTeam(user,i)\"></span></td>\r\n <td>{{user?.teamName}}</td>\r\n <td>{{user?.userscount}}</td>\r\n <!-- <td>{{user?.leadName}}<span *ngIf=\"user?.Teamleadcount>0\"> +{{user?.Teamleadcount}}</span>\r\n </td> -->\r\n <td><div class=\"mx-2\">\r\n <div class=\"table-title\">\r\n <span class=\"camerastatus\">\r\n <span>\r\n {{ user?.leadName[0]?user?.leadName[0]:\"--\" }}\r\n </span>\r\n <span *ngIf=\"user?.leadName.length > 1\">\r\n +{{ user.leadName.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n <!-- <ng-template #tooltipContent>\r\n <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n <span class=\"w-100\">{{ user.leadName}}</span>\r\n <span *ngIf=\"user.leademail.length > 1\">\r\n +{{ user.leademail.length - 1 }} more\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </div>\r\n </div></td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{user?.leademail.slice(0,1) | uppercase }}\r\n </span>\r\n </span>\r\n </div> -->\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\" *ngIf=\"user?.leademail.length>0\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{ user?.leademail[0]?.substring(0, 2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"mx-2\">\r\n <div class=\"table-title\">\r\n <span class=\"camerastatus\">\r\n <span>\r\n {{ getMaskedValue(user?.leademail[0] ,users?.role) }}\r\n </span>\r\n <span *ngIf=\"user?.leademail.length > 1\">\r\n +{{ user.leademail.length - 1 }}\r\n </span>\r\n </span>\r\n\r\n <!-- <ng-template #tooltipContents>\r\n <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n <span class=\"w-100\">{{ user.leademail}}</span>\r\n </div>\r\n </ng-template> -->\r\n </div>\r\n </div>\r\n <span *ngIf=\"user?.Teamleadcount>0\">+{{user?.Teamleadcount}}</span>\r\n </div>\r\n </td>\r\n <td class=\"description\">{{user?.description ? user?.description : \"--\"}}</td>\r\n <td>\r\n <span class=\"me-3 cursor-pointer\" (click)=\"viewTeamsdata(user)\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"eye\">\r\n <g id=\"Icon\">\r\n <path\r\n d=\"M0.833374 10.0002C0.833374 10.0002 4.16671 3.3335 10 3.3335C15.8334 3.3335 19.1667 10.0002 19.1667 10.0002C19.1667 10.0002 15.8334 16.6668 10 16.6668C4.16671 16.6668 0.833374 10.0002 0.833374 10.0002Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10 12.5002C11.3808 12.5002 12.5 11.3809 12.5 10.0002C12.5 8.61945 11.3808 7.50016 10 7.50016C8.61933 7.50016 7.50004 8.61945 7.50004 10.0002C7.50004 11.3809 8.61933 12.5002 10 12.5002Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"me-3 cursor-pointer\" (click)=\"editTeamsdata(user)\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_2181_11160)\">\r\n <path\r\n d=\"M24.1666 12.4999C24.3855 12.2811 24.6453 12.1074 24.9313 11.989C25.2173 11.8705 25.5238 11.8096 25.8333 11.8096C26.1428 11.8096 26.4493 11.8705 26.7353 11.989C27.0213 12.1074 27.2811 12.2811 27.5 12.4999C27.7188 12.7188 27.8924 12.9786 28.0109 13.2646C28.1294 13.5506 28.1903 13.8571 28.1903 14.1666C28.1903 14.4761 28.1294 14.7826 28.0109 15.0686C27.8924 15.3546 27.7188 15.6144 27.5 15.8333L16.25 27.0833L11.6666 28.3333L12.9166 23.7499L24.1666 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2181_11160\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"cursor-pointer\" (click)=\"deleteTeam(user)\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12.5 14.9998H14.1667M14.1667 14.9998H27.5M14.1667 14.9998V26.6665C14.1667 27.1085 14.3423 27.5325 14.6548 27.845C14.9674 28.1576 15.3913 28.3332 15.8333 28.3332H24.1667C24.6087 28.3332 25.0326 28.1576 25.3452 27.845C25.6577 27.5325 25.8333 27.1085 25.8333 26.6665V14.9998H14.1667ZM16.6667 14.9998V13.3332C16.6667 12.8911 16.8423 12.4672 17.1548 12.1547C17.4674 11.8421 17.8913 11.6665 18.3333 11.6665H21.6667C22.1087 11.6665 22.5326 11.8421 22.8452 12.1547C23.1577 12.4672 23.3333 12.8911 23.3333 13.3332V14.9998M18.3333 19.1665V24.1665M21.6667 19.1665V24.1665\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData && !viewTeams&&teamsList.length>0\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n <lib-pagination *ngIf=\"teamsList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer mb-10\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"noData&&!showcreatebutton\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- <div *ngIf=\"showcreatebutton\" class=\"row\">\r\n <div class=\"ms-3 right-bar py-7 d-flex justify-content-center align-items-center flex-column\">\r\n <svg width=\"160\" height=\"120\" viewBox=\"0 0 160 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"82\" cy=\"52\" r=\"52\" fill=\"#EAECF0\" />\r\n <g filter=\"url(#filter0_dd_1030_48016)\">\r\n <path\r\n d=\"M47.7266 79.1098L80.9651 63.6104C82.6339 62.8322 83.3559 60.8485 82.5777 59.1797L62.9484 17.0845L49.6563 12.2466L22.4611 24.9279C20.7923 25.7061 20.0703 27.6898 20.8485 29.3586L43.2959 77.4971C44.074 79.166 46.0577 79.888 47.7266 79.1098Z\"\r\n fill=\"url(#paint0_linear_1030_48016)\" />\r\n <path d=\"M49.6567 12.2471L62.9489 17.085L53.8838 21.3121L49.6567 12.2471Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <g filter=\"url(#filter1_dd_1030_48016)\">\r\n <path\r\n d=\"M63.6163 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6228 8H63.6163C61.7749 8 60.2822 9.49271 60.2822 11.3341V64.4491C60.2822 66.2904 61.7749 67.7831 63.6163 67.7831Z\"\r\n fill=\"url(#paint1_linear_1030_48016)\" />\r\n <path d=\"M93.6226 8L103.625 18.0022H93.6226V8Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <g filter=\"url(#filter2_dd_1030_48016)\">\r\n <path\r\n d=\"M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z\"\r\n fill=\"url(#paint2_linear_1030_48016)\" />\r\n <path d=\"M134.936 22.0898L139.773 35.382L130.708 31.1549L134.936 22.0898Z\" fill=\"#D0D5DD\" />\r\n </g>\r\n <circle cx=\"27\" cy=\"11\" r=\"5\" fill=\"#F2F4F7\" />\r\n <circle cx=\"24\" cy=\"109\" r=\"7\" fill=\"#F2F4F7\" />\r\n <circle cx=\"151\" cy=\"35\" r=\"7\" fill=\"#F2F4F7\" />\r\n <circle cx=\"140\" cy=\"8\" r=\"4\" fill=\"#F2F4F7\" />\r\n <g filter=\"url(#filter3_b_1030_48016)\">\r\n <rect x=\"58\" y=\"62\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#344054\" fill-opacity=\"0.4\" />\r\n <path\r\n d=\"M74.5 81.6816C72.8425 81.6816 71.5 80.2133 71.5 78.4004C71.5 76.5875 72.8425 75.1191 74.5 75.1191C76.1575 75.1191 77.5 76.5875 77.5 78.4004C77.5 80.2133 76.1575 81.6816 74.5 81.6816ZM89.6483 81.6816C87.9908 81.6816 86.6483 80.2133 86.6483 78.4004C86.6483 76.5875 87.9908 75.1191 89.6483 75.1191C91.3058 75.1191 92.6483 76.5875 92.6483 78.4004C92.6483 80.2133 91.3058 81.6816 89.6483 81.6816ZM85.509 84.3066C85.509 86.4805 83.8965 88.2441 81.909 88.2441C79.9215 88.2441 78.309 86.4805 78.309 84.3066C78.309 82.1328 79.9215 80.3691 81.909 80.3691C83.8965 80.3691 85.509 82.1328 85.509 84.3066Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M74.0013 83.7559C71.7925 83.7559 70 85.7164 70 88.1322C70 88.6121 70.36 89.0059 70.7988 89.0059H78.8013H78.8275C77.8338 88.042 77.2038 86.6352 77.2038 85.0684C77.2038 84.7566 77.2263 84.449 77.275 84.1537C76.765 83.8994 76.1988 83.7559 75.6025 83.7559H74.0013Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M85.1725 89.0059H85.1987H93.2012C93.64 89.0059 94 88.6162 94 88.1322C94 85.7164 92.2075 83.7559 89.9987 83.7559H88.3975C87.8012 83.7559 87.235 83.8953 86.725 84.1537C86.77 84.4531 86.7963 84.7566 86.7963 85.0684C86.7963 86.6352 86.17 88.042 85.1725 89.0059Z\"\r\n fill=\"#D0D5DD\" />\r\n <path\r\n d=\"M79.7988 90.3183C77.0388 90.3183 74.8 92.767 74.8 95.7857C74.8 96.3928 75.25 96.8809 75.8013 96.8809H88.1987C88.7537 96.8809 89.2 96.3887 89.2 95.7857C89.2 92.767 86.9613 90.3183 84.2013 90.3183H79.7988Z\"\r\n fill=\"#D0D5DD\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_dd_1030_48016\" x=\"-0.560547\" y=\"8.01953\" width=\"104.547\" height=\"112.499\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter1_dd_1030_48016\" x=\"40.2822\" y=\"8\" width=\"83.3428\" height=\"99.7832\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter2_dd_1030_48016\" x=\"59.4526\" y=\"8\" width=\"104.547\" height=\"112.499\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <filter id=\"filter3_b_1030_48016\" x=\"50\" y=\"54\" width=\"64\" height=\"64\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"4\" />\r\n <feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur_1030_48016\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur_1030_48016\" result=\"shape\" />\r\n </filter>\r\n <linearGradient id=\"paint0_linear_1030_48016\" x1=\"45.7738\" y1=\"79.2396\" x2=\"19.2853\" y2=\"31.4523\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear_1030_48016\" x1=\"61.7916\" y1=\"67.0755\" x2=\"57.9807\" y2=\"12.571\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear_1030_48016\" x1=\"81.1199\" y1=\"62.1785\" x2=\"100.701\" y2=\"11.17\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#E4E7EC\" />\r\n <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title\">Start by creating a team</div>\r\n <div class=\"nodata-sub mt-2\">Any team created will track here.</div>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-center align-items-center mt-3 mb-10\" role=\"group\">\r\n <button class=\"btn btn-outline w-25 me-3\">How to create?</button>\r\n <button [disabled]=\"!(gs.userAccess |async)?.Global_User_isAdd\" class=\"btn btn-primary w-25 ms-3\" id=\"alert-toast\" (click)=\"createTeam()\"><span class=\"mx-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>Create\r\n Team</button>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"card-body d-flex flex-center flex-column p-9\" *ngIf=\"showcreatebutton\">\r\n <div class=\"mb-5\">\r\n <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\"/>\r\n <path d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add teams </a>\r\n <div class=\"fw-bold text-gray-800 my-6\">\r\n <ul class=\"custom-ordered-list text-gray-800 fw-bold fs-6\">\r\n <li class=\"user-text mb-2\">Use the template to upload multiple Teams at once.</li>\r\n <li class=\"user-text mb-2\">Download the template here -\r\n <a href=\"./../../assets/files/teamsBulkUploadTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li class=\"user-text mb-2\">Add your data to the Template File</li>\r\n <li class=\"user-text mb-2\">Upload it below for processing</li>\r\n </ul>\r\n </div>\r\n <div class=\"d-flex flex-center flex-column mb-5\" style=\"width: 57% !important;\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\"\r\n class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n class=\"fw-bold fs-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n <span class=\"text-white mx-2\">Upload To Add Multiple Teams</span></span>\r\n </label>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" (click)=\"createTeam()\"\r\n class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n <label for=\"kt_account_team_size_select_1\"\r\n class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-bold fs-4 mx-2\">\r\n Add Single Team</span></label>\r\n </div>\r\n \r\n \r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"viewTeams && !showcreatebutton\">\r\n <lib-viewteams-list [teamData]=\"this.selectedTeam\"></lib-viewteams-list>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Teams</span></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError?.error?.length ? 'error-heading':''\" class=\"fw-semibold w-100 text-error\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError?.error?.length ? 'excel-error':''\" class=\"fw-semibold mt-1 text-error\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError?.error?.length\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n \r\n </div>\r\n <div *ngIf=\"excelError?.error?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify-content-end flex-wrap gap-2 pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError?.error?.length\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError?.error?.length\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n <input style=\"display: none;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n (change)=\"onUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmDelete let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"mt-3\">\r\n <div class=\"mt-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEE4E2\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FEF3F2\" stroke-width=\"8\"/>\r\n <path d=\"M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#D92D20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"config-heading fw-semibold mt-3 w-auto\">Delete {{teamId?.length}} {{teamId?.length > 1 ? 'Teams' : 'Team'}}? </div></div>\r\n </div>\r\n <div class=\"card-body pt-0 popup-scroll\">\r\n <div class=\"mt-5\">\r\n <div class=\"subtitle\" style=\"font-weight: 400;\">Are you sure you want to delete the selected team? This action cannot be undone.</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 d-flex justify justify-content-between pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline w-50 me-2\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-3 btn-default btn-danger w-50 ms-2\" (click)=\"model.close('submit')\">Delete</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}.left-move{justify-content:end}.img-src{width:25%;height:20%}.w-25{width:15%!important}td.description{overflow:hidden;text-overflow:ellipsis;max-width:100px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rotate{rotate:180deg;transition:1s}td{line-height:30px}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.btn-delete{border:1px solid var(--Error-50, #FEF3F2);background:var(--Error-50, #FEF3F2);padding:12px 14px;box-shadow:0 1px 2px #1018280d;color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px}.alert-box{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Gray-100, #F2F4F7);box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 8px 6px 16px;justify-content:center;align-items:center;cursor:pointer;gap:8px;align-self:stretch;color:var(--Gray-500, #667085);font-size:14px;font-weight:600}.alert-box .selectAll{color:var(--Primary-700, #009BF3);font-size:15px;font-weight:700;text-decoration-line:underline;text-decoration-thickness:auto;text-underline-offset:auto}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:500!important;line-height:20px!important}.config-heading{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px!important}\n"] }]
|
|
5419
5402
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ManageUsersService }, { type: ExcelService }, { type: i2.GlobalStateService }, { type: i4.ToastService }, { type: i3$1.Router }, { type: i1$1.NgbModal }], propDecorators: { dataTo: [{
|
|
5420
5403
|
type: Output
|
|
5421
5404
|
}], tooltipContent: [{
|