Merge pull request #340 from Cafnanc/release-2.6.0

Release 2.6.0

angular.json

@@ -153,7 +153,7 @@
   },
   "cli": {
     "analytics": false,
-    "defaultCollection": "@angular-eslint/schematics"
+    "defaultCollection": "@ionic/angular-toolkit"
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule),
+    canActivate: [PrivateGuard]
   },
   {
     path: CommonRoutes.AUTH,

src/app/core/constants/urlConstants.ts

@@ -54,6 +54,9 @@ export const urlConstants = {
         ADMIN_BULK_UPLOAD: "/user/v1/org-admin/bulkUserCreate",
         ADMIN_DOWNLOAD_SAMPLE_CSV: "/user/v1/cloud-services/file/getSampleCSV",
         CREATED_SESSION_BY_SESSION_MANAGER:"/mentoring/v1/manage-sessions/createdSessions?page=",
+        MENTEES_LIST: "/mentoring/v1/mentees/list?page=",
+        MENTORS_LIST: "/mentoring/v1/mentors/list?page=",
+        FILTER_LIST: "/mentoring/v1/profile/filterList?",
         DOWNLOAD_CREATED_SESSION_LIST_BY_SESSION_MANAGER:"/mentoring/v1/manage-sessions/downloadSessions?"
     }
 };

src/app/core/services/util/util.service.ts

@@ -142,4 +142,36 @@ export class UtilService {
   isMobile(){
     return /iPhone|iPad|iPod|Android/i.test(window.navigator.userAgent);
   }
+
+  getFormatedFilterData(filterData, formData) {;
+    const result = [];
+    for (const key in filterData) {
+      if (key !== 'entity_types') {
+        const title = key.charAt(0).toUpperCase() + key.slice(1);
+        const name = key;
+        const options = filterData[key].map(item => ({
+          id: item.id,
+          label: item.name,
+          value: item.code
+        }));
+        const type = formData.filters[key].find(obj => obj.key === name).type;
+        result.push({ title, name, options, type });
+      } else {
+        for (const filterKey in filterData[key]) {
+          filterData[key][filterKey].forEach(entityType => {
+              const title = entityType.label;
+              const name = filterKey;
+              const type = formData.filters.entity_types.find(obj => obj.key === name).type;
+              const options = entityType.entities.map(entity => ({
+                  id: entity.id,
+                  label: entity.label,
+                  value: entity.value
+              }));
+              result.push({ title, name, options, type });
+          });
+        }
+      }
+    }
+    return result;
+  }
 }

src/app/pages/create-session/create-session.page.html

@@ -16,7 +16,7 @@
         <ion-content class="ion-padding">
           <app-profile-image *ngIf="showForm" [profileImageData]='profileImageData' [uploadImage]="true" (imageUploadEvent)="imageUploadEvent($event)" (imageRemoveEvent)="imageRemoveEvent($event)"></app-profile-image>
           <div *ngIf="formData && showForm">
-            <app-dynamic-form [jsonFormData]="formData" #form1 (formValid)="isValid($event)"> </app-dynamic-form>
+            <app-dynamic-form [jsonFormData]="formData" #form1 (formValid)="isValid($event)" (formValueChanged)="formValueChanged($event)"> </app-dynamic-form>
           </div>
         </ion-content>
       </ion-list>

src/app/pages/create-session/create-session.page.ts

@@ -18,6 +18,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { PLATFORMS } from 'src/app/core/constants/formConstant';
 import { FormService } from 'src/app/core/services/form/form.service';
 import { map } from 'rxjs/operators';
+import { Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-create-session',
@@ -305,7 +306,23 @@ export class CreateSessionPage implements OnInit {
       })
     }
   }
+
   compareWithFn(o1, o2) {
     return o1 === o2;
   };
+
+  formValueChanged(event){
+    let dependedControlIndex = this.formData.controls.findIndex(formControl => formControl.name === event.dependedChild)
+    let dependedControl = this.form1.myForm.get(event.dependedChild)
+    if(event.value == 'public'){
+      this.formData.controls[dependedControlIndex].validators['required'] = false
+      dependedControl.setValidators(null);
+      dependedControl.setErrors(null)
+      dependedControl.updateValueAndValidity();
+    } else {
+      this.formData.controls[dependedControlIndex].validators['required'] = true
+      dependedControl.setValidators([Validators.required]);
+      dependedControl.updateValueAndValidity();
+    }
+  }
 }

src/app/pages/tabs/home/home.page.html

@@ -119,5 +119,4 @@ <h3>
   <div *ngIf="!sessions">
     <app-skeleton [type]="SKELETON.HOME_SKELETON" [repetition]="4"></app-skeleton>
   </div>
-  <h1>r-2.6.0</h1>
 </ion-content>

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

@@ -8,11 +8,19 @@
           myForm.get(control.name).touched && myForm.get(control.name).invalid
       }"
     >
-    <ion-label
-        position="stacked"
-        *ngIf="control.label !== '' && !['rating'].includes(control.type) && !['chip'].includes(control.type)" 
-        >{{ control.label }} <span *ngIf="control?.validators['required']==true" class="star-icon-red">*</span></ion-label
-      >
+    <div *ngIf="control.label !== '' && !['rating'].includes(control.type) && !['chip'].includes(control.type) && !['search'].includes(control.type)" style="display: flex; align-items: center;">
+      <ion-label position="stacked">
+        {{ control.label }}&nbsp;<span *ngIf="control?.validators['required']==true" class="star-icon-red">*</span>
+      </ion-label>
+      <ion-icon *ngIf="control?.info" id="{{control.name}}" class="info" name="information-circle"></ion-icon>
+      <ion-popover trigger="{{control.name}}" triggerAction="hover">
+        <ng-template>
+          <ion-content class="ion-padding">
+            <div class="ion-padding-bottom" *ngFor="let info of control.info"><span class="popover-header">{{info?.header}}:</span> {{info?.message}}</div>
+          </ion-content>
+        </ng-template>
+      </ion-popover>
+    </div>
       <ion-input
         *ngIf="
           control.type==='text' && control?.isNumberOnly
@@ -32,7 +40,6 @@
             'password',
             'email',
             'number',
-            'search',
             'tel',
             'url',
             'secretCode'
@@ -127,6 +134,11 @@
         [showAddOption]="control.meta.showAddOption"
         [validators]="control.validators"
       ></app-input-chip>
+      <app-search-and-select
+        *ngIf="control.type === 'search'"
+        [formControlName]="control.name"
+        [control]="control"
+      ></app-search-and-select>
       <ion-icon
         size="small"
         slot="end"
@@ -135,14 +147,6 @@
         class="icon"
         (click)="hideShowPassword(control)"
       ></ion-icon>
-      <ion-icon 
-      slot="end"
-      size="small"
-      name="information-circle"
-      *ngIf="control.type === 'secretCode'"
-      class="icon"
-      (click)="alertToast()"
-      ></ion-icon>
       <app-star-rating
         *ngIf="control.type === 'rating'"
         [formControlName]="control.name"

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

@@ -75,4 +75,14 @@ mat-form-field {
 
 mat-datepicker-toggle {
   font-size: 20px;
+}
+
+.info {
+  font-size: 24px !important;
+  margin-top: 5px;
+  z-index: 1000;
+}
+
+.popover-header {
+  font-weight: bold;
 }

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

@@ -14,6 +14,7 @@ import { ToastService } from 'src/app/core/services';
 import { ThemePalette } from '@angular/material/core';
 import { MatDatepicker } from '@angular/material/datepicker';
 import { NGX_MAT_DATE_FORMATS, NgxMatDateFormats, NgxMatDatetimePicker } from '@angular-material-components/datetime-picker';
+import { debounceTime } from 'rxjs/operators';
 
 interface JsonFormValidators {
   min?: number;
@@ -64,11 +65,12 @@ interface JsonFormControls {
   showSelectAll?: boolean;
   multiple?:boolean;
   placeHolder?: string;
+  displayFormat?: string;
   dependedChild?: string;
-  info?: Array<object>;
-  meta?: object;
-  displayFormat?: string
-  dependedParent?:string;
+  dependedParent?: string;
+  meta?: Object;
+  multiSelect?: boolean;
+  info?: Array<object>
 }
 export interface JsonFormData {
   controls: JsonFormControls[];
@@ -100,6 +102,9 @@ const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
 export class DynamicFormComponent implements OnInit {
   @Input() jsonFormData: any;
   @Input() readonly: any = false;
+  @Output() formValid = new EventEmitter()
+  @Output() onEnter = new EventEmitter()
+  @Output() formValueChanged = new EventEmitter()
   @ViewChild('picker') picker: MatDatepicker<Date>;
 
   public showSpinners = true;
@@ -120,8 +125,6 @@ export class DynamicFormComponent implements OnInit {
   dependedChildDate="";
   dependedParent: any;
   dependedParentDate: any;
-  @Output() formValid = new EventEmitter()
-  @Output() onEnter = new EventEmitter()
 
   constructor(private fb: FormBuilder, private toast: ToastService) {}
   ngOnInit() {
@@ -221,9 +224,6 @@ export class DynamicFormComponent implements OnInit {
     control.type = control.type === 'text' ? 'password' : 'text';
     control.showPasswordIcon = true;
   }
-  alertToast(){
-    this.toast.showToast("Please refer to the on-boarding email for your secret code", "success")
-  }
 
   dateSelected(event, control){
     const indexToEdit = this.jsonFormData.controls.findIndex(formControl => formControl.name === control.name);
@@ -250,6 +250,7 @@ export class DynamicFormComponent implements OnInit {
     if (indexToEdit !== -1) {
       this.jsonFormData.controls[indexToEdit].value = event.detail.value
     }
+    this.formValueChanged.emit(control)
   }
 
   removeSpace(event: any){

src/app/shared/components/filters/filters.component.html

@@ -0,0 +1,15 @@
+<ion-header *ngIf="filterData">
+  <div class="ion-padding-start wrapper-class ion-padding-bottom">
+    <ion-label class="header">{{"FILTER"|translate}}</ion-label>
+    <ion-label class="underline" (click)="clearAll()">{{"CLEAR_ALL"|translate}}</ion-label>
+  </div>
+</ion-header>
+<ion-content *ngIf="filterData">
+  <div class="ion-padding-start ion-padding-top" *ngFor="let filter of filterData">
+    <ion-label class="sub-header">{{filter?.title}}</ion-label>
+    <div class="ion-padding-top d-flex flex-align-items-center" *ngFor="let data of filter.options">
+      <ion-checkbox slot="start" [(ngModel)]="data.selected" (ionChange)="onFilterChange()"></ion-checkbox>
+      <ion-label class="ion-padding-start">{{data?.name || data?.label}}</ion-label>
+    </div>
+  </div>
+</ion-content>

src/app/shared/components/filters/filters.component.scss

@@ -0,0 +1,21 @@
+.header {
+    font-weight: bold;
+    font-size: 17px;
+    letter-spacing: 1px;
+}
+.wrapper-class {
+    display: flex;
+    justify-content: space-between;
+}
+.underline {
+    border-bottom: 1px solid black;
+}
+.sub-header {
+    font-weight: bold;
+    font-size: 16px;
+    padding-bottom: 16px;
+    // letter-spacing: 1px;
+}
+ion-checkbox {
+    --border-color: var(--ion-color-primary)
+}

src/app/shared/components/filters/filters.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FiltersComponent } from './filters.component';
+
+describe('FiltersComponent', () => {
+  let component: FiltersComponent;
+  let fixture: ComponentFixture<FiltersComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FiltersComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FiltersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/filters/filters.component.ts

@@ -0,0 +1,40 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import * as _ from 'lodash';
+
+@Component({
+  selector: 'app-filters',
+  templateUrl: './filters.component.html',
+  styleUrls: ['./filters.component.scss'],
+})
+export class FiltersComponent implements OnInit {
+  @Input() filterData: any;
+  @Output() filtersChanged = new EventEmitter<any>();
+
+  ogArrObj: any;
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log(this.filterData)
+    this.ogArrObj = _.cloneDeep(this.filterData);
+  }
+
+
+  clearAll() {
+    this.filterData = _.cloneDeep(this.ogArrObj)
+    this.filtersChanged.emit([])
+  }
+
+  onFilterChange() {
+    const selectedOptionsByCategory = {};
+    this.filterData.forEach(category => {
+      const selectedOptions = category.options.filter(option => option.selected);
+      if (selectedOptions.length > 0) {
+        const optionsWithCategory = selectedOptions.map(option => ({ ...option, categoryName: category.name }));
+        selectedOptionsByCategory[category.name] = selectedOptionsByCategory[category.name] || [];
+        selectedOptionsByCategory[category.name].push(...optionsWithCategory);
+      }
+    });
+    this.filtersChanged.emit(selectedOptionsByCategory);
+  }
+}

src/app/shared/components/generic-table/generic-table.component.html

@@ -27,9 +27,12 @@
           <td mat-cell (click)="onCellClick(column.name,element[column.name],element)" *matCellDef="let element">{{
             element[column.name] }}</td>
         </div>
-        <div *ngIf="column.type == 'object'">
-          <td mat-cell (click)="onCellClick(column.name,element[column.name],element)" *matCellDef="let element">{{
-            element[column.name].label }}</td>
+        <div *ngIf="column.type == 'array'">
+          <td mat-cell (click)="onCellClick(column.name,a,element)" *matCellDef="let element">
+            <div *ngFor="let a of element[column.name]">
+              {{a.label}}
+            </div>
+          </td>
         </div>
         <div *ngIf="column.type == 'button'">
           <td mat-cell *matCellDef="let element">

src/app/shared/components/generic-table/generic-table.component.scss

@@ -1,4 +1,3 @@
-
 table {
     width: 100%;
   margin-bottom: 20px;
@@ -119,6 +118,11 @@ ion-popover {
     max-width: 80px;
   }
 }
+.header-container{
+  display: grid;
+  grid-template-columns: auto auto auto;
+  height: 50px;
+}
 .header{
   display: flex;
   align-items: center;

src/app/shared/components/index.ts

@@ -13,4 +13,5 @@ export * from "./generic-header/generic-header.component";
 export * from "./filter/filter.component";
 export * from "./expandable-card/expandable-card.component"
 export * from "./persona-selection-card/persona-selection-card.component"
-export * from "./generic-profile-header/generic-profile-header.component"
+export * from "./generic-profile-header/generic-profile-header.component"
+export * from "./filters/filters.component"