Mangager session flow

src/app/modules/admin/components/manage-session/manage-session.component.html

@@ -1,11 +1,12 @@
 <app-page-header [config]="headerConfig">
-    <app-searchbar *ngIf="segmentType === 'manage-session'" placeholder="{{'SSESSIONS_MENTOR_SEARCH_PLACEHOLDER' | translate}}" (clearText)="onClearSearch($event)"  (outputData)="searchResults($event)"></app-searchbar>
-
+    @if (segmentType() === 'manage-session') {
+    <app-searchbar placeholder="{{'SSESSIONS_MENTOR_SEARCH_PLACEHOLDER' | translate}}" (clearText)="onClearSearch($event)" (outputData)="searchResults($event)"></app-searchbar>
+    }
 </app-page-header>
 <ion-content>
   <div class="d-flex flex-justify-center">
     <ion-header>
-      <ion-segment (ionChange)="segmentChanged($event)" [value]="segmentType">
+      <ion-segment (ionChange)="segmentChanged($event)" [value]="segmentType()">
         <ion-segment-button value="manage-session" class="normal-case">
           <ion-label>{{ "CREATE_SESSIONS" | translate }}</ion-label>
         </ion-segment-button>
@@ -15,19 +16,20 @@
       </ion-segment>
     </ion-header>
   </div>
-  <div [ngSwitch]="segmentType">
-    <div>
-      <div *ngSwitchCase="'manage-session'">
+
+  @switch (segmentType()) {
+    @case ('manage-session') {
+      <div>
         <ion-card class="session-sqr-card">
           <ion-card-content class="card-content">
             <div class="segment-button d-flex flex-justify-center flex-align-items-flex-end">
               {{"START_CREATE_SESSION"|translate}}
             </div>
             <ion-grid>
               <ion-row class="d-flex flex-justify-center">
-                <ion-col padding size-xs="12" size-sm="12" size-md="8" size-lg="6" align-self-stretch>
+	                <ion-col class="ion-padding" size-xs="12" size-sm="12" size-md="8" size-lg="6" align-self-stretch>
                   <ion-button shape="round" strong="true" class="card-button" (click)="createSession()">
-                    {{"CREATE_SESSION" | translate }} <ion-icon class="create-icon"name="add-circle-outline"></ion-icon>
+                    {{"CREATE_SESSION" | translate }} <ion-icon class="create-icon" name="add-circle-outline"></ion-icon>
                   </ion-button>
                 </ion-col>
               </ion-row>
@@ -40,24 +42,28 @@
             <ion-icon class="ion-funnel-icon" name="funnel"></ion-icon>
           </div>
         </div>
-        <div *ngIf="tableData">
+        @if (tableData()) {
+        <div>
           <app-generic-table [headingText]="headingText"
             [columnData]="columnData"
-            [noDataMessage]="noDataMessage"
-            [tableData]="tableData"
-            [totalCount]="totalCount"
-            (onClickEvent)="onCLickEvent($event)"
+            [noDataMessage]="noDataMessage()"
+            [tableData]="tableData()"
+            [totalCount]="totalCount()"
+            (onClickEvent)="onClickEvent($event)"
             (paginatorChanged)="onPaginatorChange($event)"
             (onSorting)="onSorting($event)"
-            [setPaginatorToFirstpage]="setPaginatorToFirstpage"
+            [setPaginatorToFirstpage]="setPaginatorToFirstpage()"
             [showPaginator]="true">
             <div class="download" (click)="onClickDownload()">{{ download | translate}}</div>
           </app-generic-table>
         </div>
+        }
       </div>
-      <div *ngSwitchCase="'bulk-upload'" class="d-flex flex-justify-center flex-align-items-center">
+    }
+    @case ('bulk-upload') {
+      <div class="d-flex flex-justify-center flex-align-items-center">
         <app-bulk-upload [data]="manageSessionUrls"></app-bulk-upload>
       </div>
-    </div>
-  </div>
-</ion-content>
+    }
+  }
+</ion-content>

src/app/modules/admin/components/manage-session/manage-session.component.spec.ts

@@ -76,7 +76,7 @@ describe('ManageSessionComponent', () => {
       action: 'mentor_name',
       element: { mentor_id: '123' }
     };
-    component.onCLickEvent(data);
+    component.onClickEvent(data);
     expect(mockRouter.navigate).toHaveBeenCalledWith([CommonRoutes.MENTOR_DETAILS, '123']);
   });
 
@@ -85,7 +85,7 @@ describe('ManageSessionComponent', () => {
       action: 'mentee_count',
       element: { id: 'session1' }
     };
-    await component.onCLickEvent(data);
+    await component.onClickEvent(data);
     expect(mockModalController.create).toHaveBeenCalledWith({
       component: MenteeListPopupComponent,
       cssClass: 'large-width-popover-config',
@@ -98,7 +98,7 @@ describe('ManageSessionComponent', () => {
       action: 'DELETE',
       element: { id: 'session1' }
     };
-    await component.onCLickEvent(data);
+    await component.onClickEvent(data);
     expect(mockAdminWorkapceService.deleteSession).toHaveBeenCalledWith('session1');
     expect(mockAdminWorkapceService.createdSessionBySessionManager).toHaveBeenCalledTimes(2); // Init + Refresh
   });
@@ -108,7 +108,7 @@ describe('ManageSessionComponent', () => {
       action: 'EDIT',
       element: { id: 'session1', status: 'Upcoming' }
     };
-    component.onCLickEvent(data);
+    component.onClickEvent(data);
     expect(mockRouter.navigate).toHaveBeenCalledWith([CommonRoutes.CREATE_SESSION], { queryParams: { id: 'session1' } });
   });
 
@@ -170,7 +170,7 @@ describe('ManageSessionComponent', () => {
   it('should change segment', () => {
     const event = { target: { value: 'new-segment' } };
     component.segmentChanged(event as any);
-    expect(component.segmentType).toBe('new-segment');
+    expect(component.segmentType()).toBe('new-segment');
   });
 
   it('should clear search and refresh', () => {
@@ -196,7 +196,7 @@ describe('ManageSessionComponent', () => {
       action: 'DELETE',
       element: { id: 'session1' }
     };
-    await component.onCLickEvent(data);
+    await component.onClickEvent(data);
     expect(mockAdminWorkapceService.deleteSession).toHaveBeenCalledWith('session1');
   });
 
@@ -205,15 +205,15 @@ describe('ManageSessionComponent', () => {
       action: 'mentee_count',
       element: { id: 'session1' }
     };
-    await component.onCLickEvent(data);
+    await component.onClickEvent(data);
     expect(mockModalController.create).toHaveBeenCalled();
   });
   it('should navigate to session details default action', () => {
     const data = {
       action: 'UNKNOWN_ACTION',
       element: { id: 'session1' }
     };
-    component.onCLickEvent(data);
+    component.onClickEvent(data);
     expect(mockRouter.navigate).toHaveBeenCalledWith([CommonRoutes.SESSIONS_DETAILS, 'session1']);
   });
 
@@ -222,7 +222,7 @@ describe('ManageSessionComponent', () => {
       action: 'EDIT',
       element: { id: 'session1', status: 'Live' }
     };
-    component.onCLickEvent(data);
+    component.onClickEvent(data);
     expect(mockRouter.navigate).toHaveBeenCalledWith([CommonRoutes.CREATE_SESSION], { queryParams: { id: 'session1', type: 'segment' } });
   });
 
@@ -240,7 +240,7 @@ describe('ManageSessionComponent', () => {
       }]
     }));
     await component.fetchSessionList();
-    expect(component.tableData[0].action).toEqual(component.actionButtons['LIVE']);
+    expect(component.tableData()[0].action).toEqual(component.actionButtons['LIVE']);
   });
 
   it('should handle fetchSessionList with UPCOMING status', async () => {
@@ -257,7 +257,7 @@ describe('ManageSessionComponent', () => {
       }]
     }));
     await component.fetchSessionList();
-    expect(component.tableData[0].action).toEqual(component.actionButtons['UPCOMING']);
+    expect(component.tableData()[0].action).toEqual(component.actionButtons['UPCOMING']);
   });
 
   it('should handle fetchSessionList with COMPLETED status', async () => {
@@ -274,7 +274,7 @@ describe('ManageSessionComponent', () => {
       }]
     }));
     await component.fetchSessionList();
-    expect(component.tableData[0].action).toEqual(component.actionButtons['COMPLETED']);
+    expect(component.tableData()[0].action).toEqual(component.actionButtons['COMPLETED']);
   });
 
   it('should handle fetchSessionList with empty data', async () => {
@@ -283,8 +283,8 @@ describe('ManageSessionComponent', () => {
       data: []
     }));
     await component.fetchSessionList();
-    expect(component.tableData).toEqual([]);
-    expect(component.noDataMessage).toBe('SEARCH_RESULT_NOT_FOUND');
+    expect(component.tableData()).toEqual([]);
+    expect(component.noDataMessage()).toBe('SEARCH_RESULT_NOT_FOUND');
   });
 
   it('should handle filter modal dismissal with role closed', async () => {

src/app/modules/admin/components/manage-session/manage-session.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, signal } from '@angular/core';
 import { Router } from '@angular/router';
 import { AdminWorkapceService } from 'src/app/core/services/admin-workspace/admin-workapce.service';
 import { CommonRoutes } from 'src/global.routes';
@@ -13,12 +13,11 @@ import { urlConstants } from 'src/app/core/constants/urlConstants';
     styleUrls: ['./manage-session.component.scss'],
     standalone: false
 })
-export class ManageSessionComponent implements OnInit {
+export class ManageSessionComponent {
   public headerConfig: any = {
     menu: true,
     notification: true,
     headerColor: 'primary',
-    // label: 'MANAGE_SESSION'
   };
   receivedEventData: any;
 
@@ -27,16 +26,21 @@ export class ManageSessionComponent implements OnInit {
     uploadCsvApiUrl: urlConstants.API_URLS.SESSION_BULK_UPLOAD
   }
 
-  constructor(private adminWorkapceService: AdminWorkapceService, private router: Router, private modalCtrl: ModalController) { }
+  constructor(
+    private adminWorkapceService: AdminWorkapceService,
+    private router: Router,
+    private modalCtrl: ModalController
+  ) { }
+
   headingText = "SESSION_LIST"
   download = "DOWNLOAD";
   page = 1;
   limit = 5;
   searchText: string = '';
   type = "";
-  totalCount: any;
+  totalCount = signal<any>(null);
   sortingData: any;
-  setPaginatorToFirstpage:any = false;
+  setPaginatorToFirstpage = signal<any>(false);
   columnData = [
     { name: 'id', displayName: 'Session Id', type: 'text'},
     { name: 'title', displayName: 'Session name', type: 'text', sortingData: [{ sort_by: 'title', order: 'ASC', label: 'A -> Z' }, { sort_by: 'title', order: 'DESC', label: 'Z -> A' }] },
@@ -86,26 +90,22 @@ export class ManageSessionComponent implements OnInit {
         "type": "checkbox"
       }
     ]
-  tableData: any;
+  tableData = signal<any>(null);
   dummyTableData: any = false;
-  noDataMessage: any;
-  segmentType = 'manage-session';
+  noDataMessage = signal<any>(null);
+  segmentType = signal<'manage-session' | 'bulk-upload'>('manage-session');
   filteredDatas = []
   actionButtons = {
     'UPCOMING': [{ icon: 'eye', cssColor: 'white-color' , action:'VIEW'}, { icon: 'create', cssColor: 'white-color' ,action:'EDIT'}, { icon: 'trash', cssColor: 'white-color',action:'DELETE' }],
     'LIVE': [{ icon: 'eye', cssColor: 'white-color' ,action:'VIEW'}, { icon: 'create', cssColor: 'white-color' ,action:'EDIT'}],
     'COMPLETED': [{ icon: 'eye', cssColor: 'white-color' ,action:'VIEW'}]
   };
 
-  async ngOnInit() {
-    this.fetchSessionList()
-  }
-
   async ionViewWillEnter() {
     this.fetchSessionList()
   }
 
-  async onCLickEvent(data: any) {
+  async onClickEvent(data: any) {
     this.receivedEventData = data;
     switch (this.receivedEventData.action) {
       case 'mentor_name':
@@ -143,7 +143,7 @@ export class ManageSessionComponent implements OnInit {
   }
 
   onPaginatorChange(data: any) {
-    this.setPaginatorToFirstpage= false;
+    this.setPaginatorToFirstpage.set(false);
     this.page = data.page;
     this.limit = data.pageSize
     this.fetchSessionList()
@@ -152,20 +152,20 @@ export class ManageSessionComponent implements OnInit {
   onSorting(data: any) {
     this.sortingData = data;
     this.page=1;
-    this.setPaginatorToFirstpage= true
+    this.setPaginatorToFirstpage.set(true);
     this.fetchSessionList()
   }
 
   onSearch() {
     this.page = 1;
-    this.setPaginatorToFirstpage = true
+    this.setPaginatorToFirstpage.set(true);
     this.fetchSessionList()
   }
 
   searchResults(event) {
     this.searchText= event.searchText;
     this.page = 1;
-    this.setPaginatorToFirstpage = true
+    this.setPaginatorToFirstpage.set(true);
     this.fetchSessionList()
   }
 
@@ -190,7 +190,7 @@ export class ManageSessionComponent implements OnInit {
         }
       }
       this.page = 1;
-      this.setPaginatorToFirstpage = true
+      this.setPaginatorToFirstpage.set(true);
       this.fetchSessionList()
     });
     modal.present()
@@ -202,7 +202,7 @@ export class ManageSessionComponent implements OnInit {
   async fetchSessionList() {
     var obj = { page: this.page, limit: this.limit, status: this.type, order: this.sortingData?.order, sort_by: this.sortingData?.sort_by, searchText: this.searchText, filteredData:this.filteredDatas };
     var response = await this.adminWorkapceService.createdSessionBySessionManager(obj);
-    this.totalCount = response.count;
+    this.totalCount.set(response.count);
     let data = response.data
     if (data && data.length) {
       data.forEach((ele) => {
@@ -217,15 +217,15 @@ export class ManageSessionComponent implements OnInit {
         ele.duration_in_minutes =Math.round(ele?.duration_in_minutes) 
       });
     }
-    this.tableData = data;
-    this.noDataMessage = this.searchText ? "SEARCH_RESULT_NOT_FOUND" : "SEARCH_RESULT_NOT_FOUND"
+    this.tableData.set(data);
+    this.noDataMessage.set(this.searchText ? "SEARCH_RESULT_NOT_FOUND" : "SEARCH_RESULT_NOT_FOUND");
   }
 
   createSession(){
       this.router.navigate([`${CommonRoutes.CREATE_SESSION}`], { queryParams: { source: 'manage' } }); 
   } 
   segmentChanged(event){
-    this.segmentType = event.target.value;
+    this.segmentType.set(event.target.value);
   }
 
     onClearSearch($event: string) {

src/app/shared/components/dynamic-form/dynamic-form.component.ts

@@ -138,7 +138,7 @@ export class DynamicFormComponent implements OnInit {
   hiddenLabelTypes = ['rating', 'chip', 'search'];
 
   constructor(private fb: UntypedFormBuilder, private toast: ToastService,
-        private attachment: AttachmentService
+        private attachment: AttachmentService, private cdr: ChangeDetectorRef
   ) {}
   ngOnInit() {
     this.jsonFormData.controls.find((element, index) => {
@@ -154,6 +154,7 @@ export class DynamicFormComponent implements OnInit {
     setTimeout(() => {
       this.createForm(this.jsonFormData.controls);
       this.showForm = true;
+      this.cdr.detectChanges();
     });
   }