File

src/app/plugins/profile/components/create-user/create-user.component.ts

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

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 :
Name Type Optional
resourceService ResourceService No
toasterService ToasterService No
profileService ProfileService No
formBuilder UntypedFormBuilder No
router Router No
userService UserService No
orgDetailsService OrgDetailsService No
channelService ChannelService No
frameworkService FrameworkService No
utilService UtilService No
formService FormService No
activatedRoute ActivatedRoute No
navigationhelperService NavigationHelperService No
tncService TncService No
managedUserService ManagedUserService No
layoutService LayoutService No
_sanitizer DomSanitizer No

Methods

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 :
Name Optional
createUserRequest No
userProfileData No
Returns : void
setTelemetryData
setTelemetryData()
Returns : void

Properties

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}}&lrm;</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 *;

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""