Skip to content

Commit

Permalink
Merge pull request #116 from Sohith-code/self-registration-flow
Browse files Browse the repository at this point in the history
Fix: KB-7629, KB-7657, KB-7654
  • Loading branch information
vishnubansaltarento authored Dec 9, 2024
2 parents c3aaaa7 + 2fc5d45 commit d179a4b
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 61 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
<ng-container *ngFor="let menu of menulist; let mi = index">
<ng-container *ngIf="menu.subMenu">
<mat-accordion [multi]="true" class="custom-leftmenu">
<mat-expansion-panel class="menuPannel bg-gray-accordian" hideToggle="true" [expanded]="false" #example>
<mat-expansion-panel class="menuPannel bg-gray-accordian" hideToggle="true" [expanded]="menu.defaultExpanded"
#example>
<mat-expansion-panel-header>
<mat-panel-title>
<mat-panel-description>
Expand Down
3 changes: 3 additions & 0 deletions project/ws/app/src/lib/routes/home/home.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ import { SurveyFormComponent } from './components/app-survey/survey-form/survey-
import { CapitalizePipe } from './pipe/capitalize.pipe'
import { BulkUploadOdcsComponent } from './routes/odcs-mapping/bulk-upload-odcs/bulk-upload-odcs.component'
import { GroupsGradeComponent } from './components/groups-grade/groups-grade.component'
import { MAT_DATE_LOCALE } from '@angular/material/core'

@NgModule({
declarations: [
Expand Down Expand Up @@ -220,8 +221,10 @@ import { GroupsGradeComponent } from './components/groups-grade/groups-grade.com
UploadService,
TrainingPlanDashboardService,
UsersService,
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class HomeModule {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,76 @@
<div class="flex">

<ng-container>
<div class="w-1/2 p-6 relative form-wrapper">
<ng-container *ngIf="!framewordId">
<img src="/assets/icons/bg-blur-self-registration.png" alt="icon" class="w-full">
<div class="nodata absolute inset-0 flex items-center justify-center">
<div class="flex flex-column items-center justify-center">
<img src="/assets/icons/empty_data.svg" alt="icon" class="mx-auto">
<span class="font-bold text-sm my-4 block">No designation has been imported from iGOT master.</span>
<button mat-flat-button class="mat-btn-outline" (click)="navigateTo('/app/home/org-designations')">Start
Importing</button>
</div>
</div>
</ng-container>
<ng-container *ngIf="framewordId">
<form [formGroup]="selfRegistrationForm">
<div class="create-registration-link">
<div class="flex gap-2 mb-8">
<ng-container *ngIf="customRegistrationLinks?.registrationLink">
<span class="font-semibold fw-montserrat text-lg">Link Status -</span>
<div class="badge flex items-center"
[ngClass]="latestRegisteredData.status && latestRegisteredData.status === 'active' ? 'active':'in-active'">
{{latestRegisteredData.status && latestRegisteredData.status === 'active' ?
'Active': 'None'}}</div>
</ng-container>
<ng-container *ngIf="!isLoading">
<div class="w-1/2 p-6 relative form-wrapper">
<ng-container *ngIf="!framewordId || this.designationsList?.length === 0">
<img src="/assets/icons/bg-blur-self-registration.png" alt="icon" class="w-full">
<div class="nodata absolute inset-0 flex items-center justify-center">
<div class="flex flex-column items-center justify-center">
<img src="/assets/icons/empty_data.svg" alt="icon" class="mx-auto">
<span class="font-bold text-sm my-4 block">No designation has been imported from iGOT master.</span>
<button mat-flat-button class="mat-btn-outline" (click)="navigateTo('/app/home/org-designations')">Start
Importing</button>
</div>
</div>
</ng-container>
<ng-container *ngIf="framewordId && this.designationsList?.length > 0">
<form [formGroup]="selfRegistrationForm">
<div class="create-registration-link">
<div class="flex gap-2 mb-8">
<ng-container *ngIf="customRegistrationLinks?.registrationLink">
<span class="font-semibold fw-montserrat text-lg">Link Status -</span>
<div class="badge flex items-center"
[ngClass]="latestRegisteredData?.status && latestRegisteredData?.status === 'active' ? 'active':'in-active'">
{{latestRegisteredData?.status && latestRegisteredData?.status === 'active' ?
'Active': 'None'}}</div>
</ng-container>
</div>

<div class="flex flex-column gap-1 w-full mat-field-rounded">
<div class="flex items-center gap-1 required">
<span class="lable">Start Date</span>
<div class="flex flex-column gap-1 w-full mat-field-rounded">
<div class="flex items-center gap-1 required">
<span class="lable">Start Date</span>
</div>
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="startDate" [min]="todayDate" placeholder="Enter Start Date"
formControlName="startDate">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="startDate" [min]="todayDate" placeholder="Enter Start Date"
formControlName="startDate">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
</div>
<div class="flex flex-column gap-1 w-full mat-field-rounded">
<div class="flex items-center gap-1 required">
<span class="lable">End Date</span>
<div class="flex flex-column gap-1 w-full mat-field-rounded">
<div class="flex items-center gap-1 required">
<span class="lable">End Date</span>
</div>
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="endDate" placeholder="Enter End Date" formControlName="endDate"
[min]="selfRegistrationForm.get('startDate')?.value">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate></mat-datepicker>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="endDate" placeholder="Enter End Date" formControlName="endDate"
[min]="selfRegistrationForm.get('startDate')?.value">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate></mat-datepicker>
</mat-form-field>
</div>
</div>
<div class="flex items-center justify-center mt-4">
<ng-container *ngIf="!customRegistrationLinks">
<button mat-flat-button class="mat-btn-flat" (click)="generateRegistrationLink()"
[disabled]="selfRegistrationForm.invalid">Generate Link</button>
</ng-container>
<ng-container *ngIf="customRegistrationLinks">
<button mat-flat-button class="mat-btn-outline" (click)="generateRegistrationLink()"
[disabled]="selfRegistrationForm.invalid">Publish New
Link</button>
</ng-container>
</div>
</form>
</ng-container>
</div>
<div class="flex items-center justify-center mt-4">
<ng-container *ngIf="!customRegistrationLinks">
<button mat-flat-button class="mat-btn-flat" (click)="generateRegistrationLink()"
[disabled]="selfRegistrationForm?.invalid">Generate Link</button>
</ng-container>
<ng-container *ngIf="customRegistrationLinks">
<button mat-flat-button class="mat-btn-outline" (click)="generateRegistrationLink()"
[disabled]="selfRegistrationForm?.invalid">Publish New
Link</button>
</ng-container>
</div>
</form>
</ng-container>
</div>
</ng-container>

<ng-container *ngIf="isLoading">
<div class="flex items-center mx-auto">
<mat-spinner [diameter]="30" [strokeWidth]="3"></mat-spinner>
</div>
</ng-container>
</ng-container>

<div class="w-1/2" [ngClass]="customRegistrationLinks ? 'px-4': 'p-4'">
Expand All @@ -77,7 +85,7 @@
<div class="flex justify-between">
<div class="flex gap-3 items-center">
<mat-icon class="mr-2">link</mat-icon>
<a class="brand-color cursor-pointer underline bg-inherit text-sm"
<a class="brand-color cursor-pointer underline bg-inherit text-sm break-word-link"
[href]="customRegistrationLinks?.registrationLink"
target="_blank">{{customRegistrationLinks?.registrationLink}}</a>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
color: #1d8923;
background: #1d892329;
}

&.in-active {
color: #00000099;
background: #00000029;
Expand Down Expand Up @@ -51,4 +52,9 @@
:host ::ng-deep .mdc-button__label {
display: flex;
align-items: center;
}

.break-word-link {
max-width: 470px;
word-wrap: break-word;
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { MatSnackBar } from '@angular/material/snack-bar'
import { Clipboard } from '@angular/cdk/clipboard'
import { LoadingPopupComponent } from '../loading-popup/loading-popup.component'
import { OnboardingService } from '../../../services/onboarding.service'
import { DesignationsService } from '../../designation/services/designations.service'
import _ from 'lodash'

@Component({
selector: 'ws-app-custom-self-registration',
Expand All @@ -24,6 +26,8 @@ export class CustomSelfRegistrationComponent implements OnInit {
registeredLinksList: IRegisteredLinksList[] = []
numberOfUsersOnboarded = 0
latestRegisteredData: IRegisteredLinksList | any = {}
designationsList: any[] = []
isLoading = false
constructor(
public dialog: MatDialog,
private activatedRoute: ActivatedRoute,
Expand All @@ -32,6 +36,8 @@ export class CustomSelfRegistrationComponent implements OnInit {
private snackbar: MatSnackBar,
private clipboard: Clipboard,
private onboardingService: OnboardingService,
private designationsService: DesignationsService,

) { }

ngOnInit(): void {
Expand All @@ -42,7 +48,7 @@ export class CustomSelfRegistrationComponent implements OnInit {
this.initializeForm()

if (this.framewordId && this.configSvc.orgReadData) {
this.getlistOfRegisterationLinks()
this.getFrameworkInfo(this.framewordId)
}
}

Expand All @@ -62,6 +68,7 @@ export class CustomSelfRegistrationComponent implements OnInit {
} else {
this.customRegistrationLinks = undefined
}
this.isLoading = false
},
error: () => {

Expand Down Expand Up @@ -170,4 +177,28 @@ export class CustomSelfRegistrationComponent implements OnInit {
return today <= endDate
}

getFrameworkInfo(frameworkid: string) {
this.isLoading = true
this.designationsService.getFrameworkInfo(frameworkid)
.subscribe({
next: (frameworkResponse) => {
const frameworkDetails = _.get(frameworkResponse, 'result.framework')
const categoriesOfFramework = _.get(frameworkDetails, 'categories', [])
const organisationsList = this.getTermsByCode(categoriesOfFramework, 'org')
this.designationsList = _.get(organisationsList, '[0].children', [])
if (this.designationsList?.length && this.designationsList?.length > 0) {
this.getlistOfRegisterationLinks()
} else {
this.isLoading = false
}
}
})
}

private getTermsByCode(categories: any[], code: string) {
const selectedCategory = categories.filter(
(category: any) => category.code === code
)
return _.get(selectedCategory, '[0].terms', [])
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { SingleUserCreationComponent } from '../users-view/single-user-creation/
import { MatExpansionModule } from '@angular/material/expansion'
import { MatDialogModule } from '@angular/material/dialog'
import { MatSnackBarModule } from '@angular/material/snack-bar'
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'

const routes: Routes = [
{
Expand Down Expand Up @@ -100,7 +101,8 @@ const routes: Routes = [
MatInputModule,
MatExpansionModule,
MatDialogModule,
MatSnackBarModule
MatSnackBarModule,
MatProgressSpinnerModule

],
providers: [MatDialogModule]
Expand Down

0 comments on commit d179a4b

Please sign in to comment.