src/app/modules/manage/components/user-role-assign/user-role-assign.component.ts
OnInit
| selector | app-user-role-assign |
| styleUrls | ./user-role-assign.component.scss |
| templateUrl | ./user-role-assign.component.html |
Properties |
|
Methods |
constructor(searchService: SearchService, userService: UserService, resourceService: ResourceService, permissionService: PermissionService, toasterService: ToasterService, formBuilder: UntypedFormBuilder, route: Router, manageService: ManageService, config: ConfigService)
|
||||||||||||||||||||||||||||||
|
Parameters :
|
| deleteRole | ||||
deleteRole(item)
|
||||
|
Parameters :
Returns :
void
|
| deleteRoleConformed |
deleteRoleConformed()
|
|
Returns :
void
|
| dismiss |
dismiss()
|
|
Returns :
void
|
| dismissRoleAssign |
dismissRoleAssign()
|
|
Returns :
void
|
| editRole | ||||
editRole(item)
|
||||
|
Parameters :
Returns :
void
|
| enableAssignRole |
enableAssignRole()
|
|
Returns :
void
|
| enableButton |
enableButton()
|
|
Returns :
void
|
| getAllRoles | ||||
getAllRoles(removeRoles)
|
||||
|
Parameters :
Returns :
void
|
| getOrgDetails |
getOrgDetails()
|
|
Returns :
void
|
| getRolesReqBody | ||||||||
getRolesReqBody(newRoles, currentRoles, orgId)
|
||||||||
|
Parameters :
Returns :
{}
|
| goBack |
goBack()
|
|
Returns :
void
|
| initializeFormFields |
initializeFormFields()
|
|
Returns :
void
|
| manipulateUserObject | ||||
manipulateUserObject(user)
|
||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onEnter | ||||
onEnter(key)
|
||||
|
Parameters :
Returns :
void
|
| onSubmitForm |
onSubmitForm()
|
|
Returns :
void
|
| redirect |
redirect()
|
|
Returns :
void
|
| updateProfile |
updateProfile()
|
|
Returns :
void
|
| updateRoleForUser | ||||
updateRoleForUser(data)
|
||||
|
Parameters :
Returns :
void
|
| allRoles |
Type : Array<RolesAndPermissions>
|
| avatarConfig |
Type : object
|
Default value : {
size: this.config.constants.SIZE.LARGE,
view: this.config.constants.VIEW.VERTICAL,
isTitle:false
}
|
| enableSubmitBtn |
Default value : false
|
| instance |
Type : string
|
| isEditRole |
Default value : false
|
| item |
Type : any
|
| key |
Type : string
|
| orgList |
Type : []
|
Default value : []
|
| orgName |
Type : []
|
Default value : []
|
| removeRoles |
Type : []
|
Default value : ['ORG_ADMIN', 'SYSTEM_ADMINISTRATION', 'ADMIN', 'PUBLIC']
|
| Private resourceService |
Type : ResourceService
|
| role |
Type : []
|
Default value : []
|
| rootOrgRoles |
Type : []
|
Default value : []
|
| sbFormBuilder |
Type : UntypedFormBuilder
|
| Private searchService |
Type : SearchService
|
| showAssignRole |
Default value : false
|
| showCards |
Default value : false
|
| showDelete |
Default value : false
|
| showingResults |
Default value : false
|
| showNoResult |
Default value : false
|
| Private toasterService |
Type : ToasterService
|
| userAssignedRole |
Type : []
|
Default value : []
|
| userDetailsForm |
Type : UntypedFormGroup
|
| userObj |
Type : any
|
| userRole |
Type : []
|
Default value : []
|
| Private userService |
Type : UserService
|
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UntypedFormBuilder, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { SearchService, UserService, PermissionService, RolesAndPermissions } from '@sunbird/core';
import { ToasterService, ResourceService, ServerResponse,ConfigService } from '@sunbird/shared';
import { ManageService } from '../../services/manage/manage.service';
import * as _ from 'lodash-es';
@Component({
selector: 'app-user-role-assign',
templateUrl: './user-role-assign.component.html',
styleUrls: ['./user-role-assign.component.scss']
})
export class UserRoleAssignComponent implements OnInit {
userDetailsForm: UntypedFormGroup;
sbFormBuilder: UntypedFormBuilder;
showingResults = false;
showCards = false;
showAssignRole = false;
showNoResult = false;
enableSubmitBtn = false;
userRole = [];
removeRoles = ['ORG_ADMIN', 'SYSTEM_ADMINISTRATION', 'ADMIN', 'PUBLIC'];
rootOrgRoles = [];
userObj: any;
key: string;
userAssignedRole = [];
allRoles: Array<RolesAndPermissions>;
private searchService: SearchService;
private toasterService: ToasterService;
private resourceService: ResourceService;
private userService: UserService;
orgList = [];
role = [];
orgName = [];
isEditRole = false;
showDelete = false;
item: any;
instance: string;
avatarConfig = {
size: this.config.constants.SIZE.LARGE,
view: this.config.constants.VIEW.VERTICAL,
isTitle:false
};
constructor(searchService: SearchService,
userService: UserService,
resourceService: ResourceService, private permissionService: PermissionService,
toasterService: ToasterService, formBuilder: UntypedFormBuilder,
private route: Router,
private manageService: ManageService,
private config: ConfigService) {
this.searchService = searchService;
this.toasterService = toasterService;
this.resourceService = resourceService;
this.userService = userService;
this.sbFormBuilder = formBuilder;
this.initializeFormFields();
}
ngOnInit(): void {
this.instance = _.upperFirst(_.toLower(this.resourceService.instance || 'SUNBIRD'));
this.removeRoles = ['ORG_ADMIN', 'SYSTEM_ADMINISTRATION', 'ADMIN', 'PUBLIC'];
this.getAllRoles(this.removeRoles);
this.getOrgDetails();
}
initializeFormFields() {
this.userDetailsForm = new UntypedFormGroup({
role: new UntypedFormControl(''),
orgName: new UntypedFormControl('')
});
}
enableAssignRole() {
this.orgName = []; this.role = [];
this.showAssignRole = !this.showAssignRole ? true : false;
}
editRole(item) {
this.orgName = []; this.role = [];
this.orgName.push(item.orgId);
this.role.push(item.role);
this.showAssignRole = !this.showAssignRole ? true : false;
this.isEditRole = true;
}
deleteRole(item) {
this.showDelete = true;
this.item = item;
}
deleteRoleConformed() {
const item = this.item;
const roleToDelete = [];
roleToDelete.push({
role: item.role,
operation: 'remove',
scope: [{
organisationId: item.orgId
}]
});
const data = { userId: this.userObj.userId, roles: roleToDelete };
this.updateRoleForUser(data);
this.dismiss();
}
dismiss() {
this.item = {};
this.showDelete = false;
}
getOrgDetails() {
if (this.userService && this.userService.userProfile) {
const userRoles = this.userService.userProfile.userOrgDetails;
for (const key in userRoles) {
if (key === 'ORG_ADMIN') {
this.orgList.push(userRoles[key]);
}
}
}
}
dismissRoleAssign() {
this.showAssignRole = false;
this.isEditRole = false;
}
goBack() {
this.showingResults = false;
this.route.navigate(['/manage'], { queryParams: {} });
}
getAllRoles(removeRoles) {
this.permissionService.availableRoles$.subscribe(params => {
this.allRoles = this.permissionService.allRoles;
this.allRoles = _.filter(this.allRoles, (role) => {
return (_.indexOf(removeRoles, role.role) < 0);
});
});
}
onEnter(key) {
this.key = key;
this.showingResults = false;
const searchParams = {
filters: {
userName: this.key
}
};
this.userRole = [];
this.searchService.globalUserSearch(searchParams).subscribe(
(apiResponse) => {
if (apiResponse.result.response.count && apiResponse.result.response.content.length > 0) {
this.showingResults = true;
this.userObj = apiResponse.result.response.content[0];
this.manipulateUserObject(this.userObj);
} else {
this.showNoResult = true;
}
},
err => {
this.toasterService.error(this.resourceService.messages.emsg.m0005);
}
);
}
manipulateUserObject(user) {
this.userAssignedRole = [];
_.forEach(user.roles, (role) => {
let userObj = null;
if (_.findIndex(role.scope, { 'organisationId': this.userService.rootOrgId }) >= 0) {
// this.removeRoles.push(role.role);
userObj = {
role: role.role,
orgName: this.userService.rootOrgName,
orgId: this.userService.rootOrgId
};
this.rootOrgRoles.push(role.role);
_.forEach(this.allRoles, (userRole) => {
if ((userRole.role === role.role)) {
userObj['roleName'] = userRole.roleName;
}
});
this.userRole.push(userObj);
this.userAssignedRole.push(role.role);
}
});
// this.getAllRoles(this.removeRoles);
if (this.userRole.length > 0) {
this.showCards = true;
}
}
onSubmitForm() {
this.updateProfile();
this.enableAssignRole();
}
redirect(): void {
setTimeout(() => {
this.onEnter(this.key);
}, 2000);
}
updateRoleForUser(data) {
this.manageService.updateRoles(data)
.subscribe(
(apiResponse: ServerResponse) => {
this.toasterService.success(this.resourceService.messages.smsg.m0049);
this.redirect();
this.initializeFormFields();
},
err => {
this.toasterService.error(this.resourceService.messages.emsg.m0020);
this.redirect();
}
);
}
updateProfile() {
// create school and roles data
const roles = !_.isEmpty(this.userDetailsForm.controls.role.value) ? this.userDetailsForm.controls.role.value : ['PUBLIC'];
const orgId = !_.isEmpty(this.userDetailsForm.controls.orgName.value) ? this.userDetailsForm.controls.orgName.value[0] : '';
const newRoles = [...roles];
const mainRoles = ['ORG_ADMIN', 'SYSTEM_ADMINISTRATION', 'ADMIN', 'SYSTEM_ADMIN'];
_.remove(newRoles, (role) => {
return _.includes(mainRoles, role);
});
const rolesAdded = _.concat(newRoles, _.intersection(mainRoles, this.rootOrgRoles));
const data = { userId: this.userObj.userId, roles: this.getRolesReqBody(rolesAdded, this.rootOrgRoles, orgId) };
this.updateRoleForUser(data);
}
getRolesReqBody(newRoles, currentRoles, orgId) {
const reqBody = [];
const newlyAddedRoles = newRoles;
_.forEach(newlyAddedRoles, (role) => {
reqBody.push({
role: role,
operation: 'add',
scope: [{
organisationId: orgId
}]
});
});
return reqBody;
}
enableButton() {
if (!_.isEmpty(this.userDetailsForm.controls.role.value) && !_.isEmpty(this.userDetailsForm.controls.orgName.value)) {
this.enableSubmitBtn = true;
} else {
this.enableSubmitBtn = false;
}
}
}
<!-- Admin role page -->
<div class="relative9 sbt-inside-page-container">
<div class="sbt-header-menu-bar">
<div class="ui container d-flex flex-ai-center">
<button class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn sb-btn-round" *ngIf="showingResults" type="button" (click)="goBack()">
<i class="icon-svg icon-svg--xxs icon-back mr-4">
<svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
</button>
<h4 class="text-capitalize" *ngIf="!showingResults">{{resourceService?.frmelmnts?.scttl?.userrole1}}</h4>
<div class="add-adminrole__header my-16 ml-16 d-flex" *ngIf="showingResults">Showing results for <b>"{{userObj.userName}}"</b></div>
</div>
</div>
<div class="ui container">
<div *ngIf="!showingResults">
<div class="ui stackable grid sb-admin-search-container">
<div class="six wide column">
<div class="sb-search-box no-btn mb-16">
<div class="input-div relative">
<input class="sb-search-input" id="search-within-group" type="text" placeholder="Search user by DIKSHA ID"
(keyup.enter)="onEnter(key)" [(ngModel)]="key">
<i aria-hidden="true" class="search icon" (click)="onEnter(key)"></i>
</div>
</div>
</div>
</div>
<div class="no-result-container d-flex flex-dc flex-jc-center p-24 sb-bg-color-white">
<div class="d-flex flex-dc flex-jc-center flex-ai-center" *ngIf="showNoResult">
<div>
<img height="125px" width="150px" src="./assets/images/erroricon.png">
</div>
<div class="my-8 text-center no-result-text">No User found</div>
</div>
</div>
</div>
<div class="add-adminrole" *ngIf="showingResults">
<div class="add-adminrole__content">
<div class="user-details mb-16">
<div class="user-img ml-16">
<sb-avatar class="my-avatar" [config]=avatarConfig initialsSize="1" [initial]="userObj?.firstName[0]"
[attr.title]="userObj?.firstName">
</sb-avatar>
</div>
<div class="user-metadata ml-32">
<div class="user-name text-left">{{userObj.firstName}} {{userObj.lastName}}</div>
<div class="user-info">
<div class="user-id">{{resourceService?.frmelmnts?.lbl?.instacnceId | interpolate:'{instance}': instance }} : {{userObj.userName}}</div>
<!-- <div class="dot-separator"></div>
<div class="user-state">Telengana</div>
<div class="dot-separator"></div>
<div class="user-state">Hyderabad</div> -->
</div>
</div>
</div>
<div class="btn-container ml-24 d-flex">
<button class="sb-btn sb-btn-primary sb-btn-normal sb-left-icon-btn" (click)="enableAssignRole()">+ ADD NEW ROLE</button>
</div>
<div class="user-workexp-container" *ngIf="!showCards"></div>
<div class="user-workexp-container" *ngIf="showCards">
<div class="user-workexp-card" *ngFor="let item of userRole">
<div class="user-workexp">
<div class="user-workexp__header">
<div class="user-workexp__name mr-auto">{{item.roleName}}</div>
<div class="user-workexp__btn"><button
class="sb-btn sb-btn-xs sb-btn-link-primary sb-left-icon-btn cursor-pointer" (click)="editRole(item)">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#edit"></use>
</svg></i><span>{{resourceService?.frmelmnts?.lbl?.edit}}</span> </button></div>
<div class="user-workexp__btn"><button
class="sb-btn sb-btn-xs sb-btn-link-primary sb-left-icon-btn cursor-pointer" (click)="deleteRole(item)">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#delete"></use>
</svg></i><span>{{resourceService?.frmelmnts?.btn?.delete}}</span> </button></div>
</div>
<div class="user-workexp__metadata">
<div class="worked-from">{{item.orgName}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Admin role page end -->
<app-modal-wrapper *ngIf="showAssignRole" [config]="{disableClose: true, size: 'normal'}"
(dismiss)="dismissRoleAssign()">
<ng-template sbModalContent>
<div class="sb-modal">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible normal">
<button aria-label="close dialog" mat-dialog-close class="mat-close-btn">
<span>×</span>
</button>
<!--Header-->
<div class="sb-modal-header" *ngIf="userDetails">
</div>
<!--/Header-->
<!--Content-->
<div class="sb-modal-content" *ngIf="showMainLoader">
<div class="ui grid">
<div class="twelve wide column">
<app-loader></app-loader>
</div>
</div>
</div>
<div class="sb-modal-content o-y-visible" *ngIf="!showMainLoader">
<div class="ui grid">
<div class="ten wide column mb-30">
<span class="ui header" *ngIf="!isEditRole">Add new role</span>
<span class="ui header" *ngIf="isEditRole">Edit role</span>
</div>
</div>
<form class="ui form" [formGroup]="userDetailsForm">
<div class="field">
<label>{{resourceService.frmelmnts?.lbl?.role}}</label>
</div>
<div class="field">
<sui-multi-select [isSearchable]="false" class="selection" [(ngModel)]="role"
(selectedOptionsChange)="enableButton()" formControlName="role" [options]="allRoles"
labelField="roleName" valueField="role" name="role"
placeholder="{{resourceService?.frmelmnts?.btn?.selrole}}" #allroles>
<sui-select-option *ngFor="let role of allroles.filteredOptions"
[ngClass]="{disabled: userAssignedRole.includes(role.role)}" [value]="role"></sui-select-option>
</sui-multi-select>
</div>
<div class="field">
<label>{{resourceService.frmelmnts?.lbl?.orgname}}</label>
</div>
<div class="field">
<sui-multi-select [isSearchable]="false" class="selection" [(ngModel)]="orgName"
(selectedOptionsChange)="enableButton()" formControlName="orgName" [options]="orgList"
labelField="orgName" valueField="orgId" name="orgName"
placeholder="{{resourceService?.frmelmnts?.lbl?.dashboardselectorg}}" #allorgName>
<sui-select-option *ngFor="let org of allorgName.filteredOptions" [value]="org"></sui-select-option>
</sui-multi-select>
</div>
</form>
</div>
<!--/Content-->
<!--Actions-->
<div class="sb-modal-actions">
<button [disabled]="!enableSubmitBtn" appTelemetryInteract
[telemetryInteractObject]="telemetryInteractObject" [telemetryInteractEdata]="submitInteractEdata"
(click)="dismissRoleAssign()" tabindex="0" class="sb-btn sb-btn-normal"
[ngClass]="{'sb-btn-disabled': !enableSubmitBtn}">
{{resourceService.frmelmnts?.btn?.cancel}}
</button>
<button [disabled]="!enableSubmitBtn" appTelemetryInteract
[telemetryInteractObject]="telemetryInteractObject" [telemetryInteractEdata]="submitInteractEdata"
(click)="onSubmitForm()" tabindex="0" class="sb-btn sb-btn-normal sb-btn-primary"
[ngClass]="{'sb-btn-disabled': !enableSubmitBtn}">
{{resourceService.frmelmnts?.btn?.save}}
</button>
</div>
</div>
</div>
<!--/Actions-->
</div>
</ng-template>
</app-modal-wrapper>
<app-modal-wrapper *ngIf="showDelete" [config]="{disableClose: true, size: 'small'}" (dismiss)="dismiss()">
<ng-template sbModalContent>
<div class="sb-modal sb-error">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible small">
<button aria-label="close dialog" mat-dialog-close class="mat-close-btn">
<span>×</span>
</button>
<!--Header-->
<div class="sb-modal-header">
{{resourceService?.frmelmnts?.lbl?.delete}}
</div>
<!--/Header-->
<!--Content-->
<div class="sb-modal-content">
{{resourceService?.frmelmnts?.lbl?.deleteConfirm}}
</div>
<!--/Content-->
<!--Actions-->
<div class="sb-modal-actions">
<button class="sb-btn sb-btn-normal sb-btn-primary" tabindex="0" (click)="deleteRoleConformed()">
{{resourceService?.frmelmnts?.btn?.yes}}
</button>
<button class="sb-btn sb-btn-normal sb-btn-outline-error" (click)="dismiss()" tabindex="0" mat-dialog-close>
{{resourceService?.frmelmnts?.btn?.cancel}}
</button>
</div>
<!--/Actions-->
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
./user-role-assign.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
:host::ng-deep {
.sbt-header-menu-bar {
height: 5.5rem;
background: none;
padding: 0px;
display: flex;
border-radius: 1.5rem 1.5rem 0 0;
padding: 1rem 1rem 1rem 1rem;
overflow: hidden;
overflow-x: auto;
position: relative;
@include respond-below(sm) {
overflow-x: auto;
padding: 1rem 0.5rem 1rem 1rem;
}
}
.sb-btn-round {
// background: var(--white);
border-radius: 50% !important;
box-shadow: var(--sbt-box-shadow-6px) !important;
min-width: auto !important;
padding: 1rem !important;
height: auto !important;
width: auto !important;
}
.add-adminrole {
&__header {
font-size: calculateRem(20px);
}
&__content {
background: var(--white);
box-shadow: calculateRem(6px) calculateRem(6px) calculateRem(2px) 0 rgb(0 0 0 / 10%);
border-radius: calculateRem(12px);
}
}
.user-details,
.user-info,
.user-img,
.user-workexp__header {
display: flex;
align-items: center;
}
.user-details {
padding: calculateRem(24px);
border-bottom: calculateRem(1px) solid var(--rc-e0e0e0);
.user-img {
height: calculateRem(48px);
width: calculateRem(48px);
background-color: var(--rc-E0F1FD);
justify-content: center;
border-radius: 50%;
font-weight: bold;
font-size: calculateRem(24px);
}
.user-name {
font-size: calculateRem(20px);
}
.user-info {
font-size: calculateRem(14px);
color: var(--gray-400);
}
.dot-separator {
width: calculateRem(6px);
height: calculateRem(6px);
background: var(--gray-400);
margin: 0 calculateRem(8px);
border-radius: 50%;
}
}
.user-workexp-container {
padding: calculateRem(16px);
display: flex;
align-items: flex-start;
flex-wrap: wrap;
min-height: calculateRem(400px);
.user-workexp-card {
flex-basis: 25%;
padding: 0 calculateRem(8px);
@include respond-below(sm) {
flex-basis: 100%;
padding: calculateRem(8px);
}
}
.user-workexp {
border: calculateRem(1px) solid var(--rc-e2e3e5);
border-radius: calculateRem(16px);
height: calculateRem(120px);
padding: calculateRem(16px);
font-size: calculateRem(14px);
cursor: pointer;
transition: all ease 0.3s;
&:hover {
transform: scale(1.02);
}
&__name {
font-size: calculateRem(14px);
font-weight: bold;
}
}
}
.sb-search-box{
.sb-search-input {
width: 100%;
font-size: 0.875rem;
}
.icon.search {
right: 1.5rem;
left: inherit;
}
}
.no-result-container {
width: 100%;
height: 100%;
min-height: calculateRem(600px);
margin: 0 auto;
.no-result-text {
color: var(--gray-800);
}
}
@media only screen and (max-width: 767px) {
.ui.stackable.grid>.wide.column {
padding: 0 !important;
}
}
}
::ng-deep {
.sb-members-list-item--medium .sb-member__img {
width: 5rem !important;
height: 5rem !important;
font-size: 3.125rem !important;
}
.sb-members-list-item .sb-member .sb-member__name {
display: none
}
.my-avatar .sb-members-list-item .sb-member__img {
box-shadow: var(--sbt-box-shadow-6px);
}
.sb-members-list-item .sb-member {
padding: 0px
}
}