src/app/plugins/profile/components/create-user/create-user.component.ts
OnInit
selector | app-create-user |
styleUrls | ./create-user.component.scss |
templateUrl | ./create-user.component.html |
Properties |
|
Methods |
constructor(resourceService: ResourceService, toasterService: ToasterService, profileService: ProfileService, formBuilder: UntypedFormBuilder, router: Router, userService: UserService, orgDetailsService: OrgDetailsService, channelService: ChannelService, frameworkService: FrameworkService, utilService: UtilService, formService: FormService, activatedRoute: ActivatedRoute, navigationhelperService: NavigationHelperService, tncService: TncService, managedUserService: ManagedUserService, layoutService: LayoutService, _sanitizer: DomSanitizer)
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
Parameters :
|
enableSubmitButton |
enableSubmitButton()
|
Returns :
void
|
getFormDetails |
getFormDetails()
|
Returns :
void
|
goBack |
goBack()
|
Returns :
void
|
initializeFormFields |
initializeFormFields()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
onCancel |
onCancel()
|
Returns :
void
|
onSubmitForm |
onSubmitForm()
|
Returns :
void
|
registerUser | ||||||
registerUser(createUserRequest, userProfileData)
|
||||||
Parameters :
Returns :
void
|
setTelemetryData |
setTelemetryData()
|
Returns :
void
|
Public _sanitizer |
Type : DomSanitizer
|
Public channelService |
Type : ChannelService
|
enableSubmitBtn |
Default value : false
|
formData |
Public formService |
Type : FormService
|
Public frameworkService |
Type : FrameworkService
|
instance |
Type : string
|
layoutConfiguration |
Type : any
|
Public layoutService |
Type : LayoutService
|
Public navigationhelperService |
Type : NavigationHelperService
|
Public orgDetailsService |
Type : OrgDetailsService
|
pageId |
Type : string
|
Default value : 'create-managed-user'
|
Public profileService |
Type : ProfileService
|
Public resourceService |
Type : ResourceService
|
Public router |
Type : Router
|
sbFormBuilder |
Type : UntypedFormBuilder
|
showLoader |
Default value : true
|
submitCancelInteractEdata |
Type : IInteractEventEdata
|
submitInteractEdata |
Type : IInteractEventEdata
|
telemetryImpression |
Type : IImpressionEventInput
|
Public tncService |
Type : TncService
|
Public toasterService |
Type : ToasterService
|
Public unsubscribe |
Default value : new Subject<void>()
|
userDetailsForm |
Type : UntypedFormGroup
|
Public userService |
Type : UserService
|
Public utilService |
Type : UtilService
|
import { Component, OnInit, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import {InterpolatePipe, ResourceService, ToasterService, ServerResponse, UtilService, NavigationHelperService, LayoutService } from '@sunbird/shared';
import { ProfileService } from './../../services';
import { UntypedFormBuilder, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import * as _ from 'lodash-es';
import { takeUntil } from 'rxjs/operators';
import { IInteractEventEdata, IImpressionEventInput } from '@sunbird/telemetry';
import {
OrgDetailsService,
ChannelService,
FrameworkService,
UserService,
FormService,
TncService,
ManagedUserService
} from '@sunbird/core';
import { ActivatedRoute, Router } from '@angular/router';
import { map } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'app-create-user',
templateUrl: './create-user.component.html',
styleUrls: ['./create-user.component.scss']
})
export class CreateUserComponent implements OnInit {
userDetailsForm: UntypedFormGroup;
sbFormBuilder: UntypedFormBuilder;
enableSubmitBtn = false;
instance: string;
formData;
showLoader = true;
telemetryImpression: IImpressionEventInput;
submitInteractEdata: IInteractEventEdata;
submitCancelInteractEdata: IInteractEventEdata;
layoutConfiguration: any;
public unsubscribe = new Subject<void>();
pageId = 'create-managed-user';
constructor(public resourceService: ResourceService, public toasterService: ToasterService,
public profileService: ProfileService, formBuilder: UntypedFormBuilder, public router: Router,
public userService: UserService, public orgDetailsService: OrgDetailsService, public channelService: ChannelService,
public frameworkService: FrameworkService, public utilService: UtilService, public formService: FormService,
private activatedRoute: ActivatedRoute, public navigationhelperService: NavigationHelperService,
public tncService: TncService, private managedUserService: ManagedUserService, public layoutService: LayoutService,
public _sanitizer: DomSanitizer) {
this.sbFormBuilder = formBuilder;
}
ngOnInit() {
this.navigationhelperService.setNavigationUrl();
this.setTelemetryData();
this.instance = _.upperCase(this.resourceService.instance || 'SUNBIRD');
this.getFormDetails();
this.layoutConfiguration = this.layoutService.initlayoutConfig();
this.layoutService.switchableLayout().
pipe(takeUntil(this.unsubscribe)).subscribe(layoutConfig => {
if (layoutConfig != null) {
this.layoutConfiguration = layoutConfig.layout;
}
});
}
goBack() {
this.navigationhelperService.goBack();
}
setTelemetryData() {
this.telemetryImpression = {
context: {
env: this.activatedRoute.snapshot.data.telemetry.env
},
edata: {
type: this.activatedRoute.snapshot.data.telemetry.type,
pageid: this.pageId,
subtype: this.activatedRoute.snapshot.data.telemetry.subtype,
uri: this.router.url,
duration: this.navigationhelperService.getPageLoadTime()
}
};
this.submitInteractEdata = {
id: 'submit-create-managed-user',
type: 'click',
pageid: this.pageId
};
this.submitCancelInteractEdata = {
id: 'cancel-create-managed-user',
type: 'click',
pageid: this.pageId
};
}
getFormDetails() {
const formServiceInputParams = {
formType: 'user',
formAction: 'create',
contentType: 'child',
component: 'portal'
};
this.formService.getFormConfig(formServiceInputParams, this.userService.hashTagId).subscribe((formData) => {
this.formData = formData;
this.initializeFormFields();
}, (err) => {
this.toasterService.error(_.get(this.resourceService, 'messages.emsg.m0005'));
this.showLoader = false;
});
}
initializeFormFields() {
const formGroupObj = {};
for (const key of this.formData) {
if (key.visible && key.required) {
formGroupObj[key.code] = new UntypedFormControl(null, [Validators.required]);
} else if (key.visible) {
formGroupObj[key.code] = new UntypedFormControl(null);
}
}
this.userDetailsForm = this.sbFormBuilder.group(formGroupObj, {
validator: (formControl) => {
const nameCtrl = formControl.controls.name;
if (_.trim(nameCtrl.value) === '') {
nameCtrl.setErrors({ required: true });
}
return null;
}
});
this.showLoader = false;
this.enableSubmitBtn = (this.userDetailsForm.status === 'VALID');
this.enableSubmitButton();
}
enableSubmitButton() {
this.userDetailsForm.valueChanges.subscribe(val => {
this.enableSubmitBtn = (this.userDetailsForm.status === 'VALID');
});
}
onCancel() {
this.navigationhelperService.navigateToLastUrl();
}
onSubmitForm() {
this.enableSubmitBtn = false;
this.userDetailsForm.value.name = this._sanitizer.sanitize(SecurityContext.HTML,this.userDetailsForm.value.name);
const createUserRequest = {
request: {
firstName: this.userDetailsForm.controls?.name.value,
managedBy: this.managedUserService.getUserId()
}
};
this.managedUserService.getParentProfile().subscribe((userProfileData) => {
if (!_.isEmpty(_.get(userProfileData, 'userLocations'))) {
createUserRequest.request['profileLocation'] = _.map(_.get(userProfileData, 'userLocations'), function(location) { return {code: location.code, type: location.type}; });
}
if (_.get(userProfileData, 'framework') && !_.isEmpty(_.get(userProfileData, 'framework'))) {
createUserRequest.request['framework'] = _.get(userProfileData, 'framework');
}
this.registerUser(createUserRequest, userProfileData);
});
}
registerUser(createUserRequest, userProfileData) {
this.userService.registerUser(createUserRequest).subscribe((resp: ServerResponse) => {
this.managedUserService.updateUserList({
firstName: this.userDetailsForm.controls?.name.value,
identifier: _.get(resp, 'result.userId'),
id: _.get(resp, 'result.userId'),
managedBy: this.managedUserService.getUserId()
});
const filterPipe = new InterpolatePipe();
const successMessage = filterPipe.transform(_.get(this.resourceService, 'messages.imsg.m0096'),
'{firstName}', this.userDetailsForm.controls?.name.value);
this.toasterService.custom({
message: successMessage,
class: 'sb-toaster sb-toast-success sb-toast-normal'
});
this.router.navigate(['/profile/choose-managed-user']);
}, (err) => {
if (_.get(err, 'error.params.status') === 'MANAGED_USER_LIMIT_EXCEEDED') {
this.toasterService.error(_.get(this.resourceService, 'messages.fmsg.m0100'));
} else {
this.toasterService.error(this.resourceService.messages.fmsg.m0085);
}
this.enableSubmitBtn = true;
}
);
}
}
<div [appTelemetryImpression]="telemetryImpression">
<!--profile Content Header -->
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<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>
<span>{{resourceService?.frmelmnts?.btn?.back}}</span>
</button>
<div class="content-header__content w-100 ml-16">
<div class="d-flex flex-dc flex-basis-1 mr-32 min-w-0 content-header__content__title">
<div class="content-header__title font-weight-bold ellipsis text-left" tabindex="0" role="heading" aria-level="2">{{resourceService?.frmelmnts?.lbl?.createUser}}</div>
</div>
</div>
</div>
</div>
<div [ngClass]="layoutConfiguration ? 'sbt-inside-page-container' : ''">
<div class="ui container py-16" *ngIf="showLoader">
<app-loader></app-loader>
</div>
<div class="user-profile-box p-0" *ngIf="!showLoader">
<div class="d-flex flex-jc-space-between py-16 px-16">
<div role="heading" aria-level="1" class="user-profile-box__title">{{resourceService?.frmelmnts?.lbl?.createUser}}</div>
</div>
<div class="twelve wide column p-0 mx-16 mb-8 text-center"><img src="../../assets/images/profile-icon.svg" alt="profile-icon"
width="88px"></div>
<form class="sb-form mb-16 px-16" [formGroup]="userDetailsForm">
<div class="ui stackable grid m-0" *ngFor="let field of formData">
<div class="twelve wide column p-0" *ngIf="field.inputType==='input' && field.visible===true">
<div class="d-flex fields-selection p-0">
<div class="sb-field field-focus mb-8 w-100">
<input
[ngClass]="{'orange-border': userDetailsForm.controls[field.code].touched && userDetailsForm.controls[field.code].errors}"
class="sb-form-control" formControlName="{{field.code}}" aria-label="Enter Name" type="text" name="{{field.code}}"
placeholder="{{field.description}}">
<label
*ngIf="!(userDetailsForm.controls[field.code].touched && userDetailsForm.controls[field.code].errors)"
class="font-weight-normal">{{field.name}}<span class="sb-color-warning">*</span></label>
<label *ngIf="userDetailsForm.controls[field.code].touched && userDetailsForm.controls[field.code].errors"
class="font-weight-normal orange text">{{resourceService?.frmelmnts?.lbl?.nameRequired}}</label>
</div>
</div>
<p class="fsmall my-8 text-left line-height-normal">
{{resourceService?.frmelmnts?.lbl?.preferenceCanBeUpdated}}‎</p>
</div>
</div>
</form>
<div class="user-profile-box__actions pb-16 px-16">
<button appTelemetryInteract appOnlineOnly [telemetryInteractEdata]="submitInteractEdata" [disabled]="!enableSubmitBtn"
(click)="onSubmitForm()" tabindex="0" type="submit" [ngClass]="{'sb-btn-disabled': !enableSubmitBtn}"
class="sb-btn sb-btn-normal sb-btn-primary">
{{resourceService?.frmelmnts?.lbl?.addUser}}
</button>
<button appTelemetryInteract [telemetryInteractEdata]="submitCancelInteractEdata" appTelemetryInteract
type="button" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8" tabindex="0" (click)="onCancel()">
{{resourceService?.frmelmnts.btn.cancel}}</button>
</div>
</div>
</div>
</div>
./create-user.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use 'pages/user-mgmt' as *;