Merge pull request #4 from KB-iGOT/mentorship-changes

update for mentorship changes

project/ws/app/src/lib/routes/create-mdo/avatar-photo/avatar-photo.component.html

@@ -0,0 +1,23 @@
+<div [ngClass]="{'circle-s' : size=== 's',
+'circle-m' : size=== 'm',
+'circle-l' : size=== 'l',
+'circle-xl' : size=== 'xl',
+'circle-xxl' : size=== 'xxl',
+'circle-l-xs' : size=== 'l-xs',
+'circle-l-s' : size=== 'l-s',
+'circle-xl-s' : size=== 'xl-s',
+'circle-xxl-s': size=== 'xxl-s'}" [ngStyle]="{'background-color':  circleColor }">
+  <img *ngIf="!showInitials" src="{{photoUrl}}" [alt]="photoUrl? '' :(name || userInitials || size || random)">
+
+  <div *ngIf="showInitials" class="initials" i18n-aria-label>
+    {{ userInitials }}
+  </div>
+
+  <!-- <div *ngIf="imageType === 'user-photo'">
+    <img *ngIf="imageUrl" [src]="imageUrl" alt="user-image" class="user-image" [ngClass]="{'user-image-small': imageSize === 'small'}">
+    <div class="user-image" [ngClass]="{'user-image-small': imageSize === 'small'}">
+      <span class="name-initials-image font-normal ws-mat-primary-default-text ws-mat-accent-background"
+      *ngIf="!imageUrl">{{ shortName }}</span>
+    </div>
+  </div> -->
+</div>

project/ws/app/src/lib/routes/create-mdo/avatar-photo/avatar-photo.component.scss

@@ -0,0 +1,200 @@
+@import 'ws-common';
+@import 'ws-vars';
+@import 'ws-mixins';
+
+
+.circle-s {
+  border-radius: 10%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 10%;
+    width: 24px;
+    height: 24px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: 10px;
+    line-height: 12px;
+    letter-spacing: 0.2625px;
+  }
+}
+
+.circle-m {
+  border-radius: 10%;
+  width: 40px !important;
+  height: 40px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 10%;
+    width: 40px;
+    height: 40px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: 14px;
+    line-height: 19px;
+    letter-spacing: 0.2625px;
+  }
+}
+
+.circle-l {
+  border-radius: 10%;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 10%;
+    width: 80px;
+    height: 80px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: 20px;
+    line-height: 19px;
+    letter-spacing: 0.2625px;
+  }
+}
+
+.circle-xl {
+  border-radius: 10%;
+  width: 105px;
+  height: 105px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 10%;
+    width: 105px;
+    height: 105px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: 20px;
+    line-height: 19px;
+    letter-spacing: 0.2625px;
+  }
+}
+
+.circle-xxl {
+  border-radius: 10%;
+  width: 145px;
+  height: 145px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 10%;
+    width: 145px;
+    height: 145px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: 20px;
+    line-height: 19px;
+    letter-spacing: 0.2625px;
+  }
+}
+.circle-l-xs{
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 4px;
+    width: 24px;
+    height: 24px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: $size-s;
+    line-height: $size-s;
+    letter-spacing: 0.2625px;
+  }
+}
+.circle-l-s {
+  border-radius: 4px;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 4px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: $size-l;
+    line-height: $size-l;
+    letter-spacing: 0.2625px;
+  }
+}
+
+.circle-xl-s {
+  border-radius: 4px;
+  width: 152px;
+  height: 125px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 4px;
+    width: 152px;
+    height: 125px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: $size-xl;
+    line-height: $size-xl;
+    letter-spacing: 0.2625px;
+  }
+}
+
+.circle-xxl-s {
+  border-radius: 4px;
+  width: 276px;
+  height: 208px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    border-radius: 4px;
+    width: 276px;
+    height: 208px;
+  }
+
+  .initials {
+    color: #ffffff;
+    font-size: $size-xxl;
+    line-height: $size-xxl;
+    letter-spacing: 0.2625px;
+  }
+}

project/ws/app/src/lib/routes/create-mdo/avatar-photo/avatar-photo.component.ts

@@ -0,0 +1,94 @@
+import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core'
+
+@Component({
+  selector: 'ws-widget-avatar-photo',
+  templateUrl: './avatar-photo.component.html',
+  styleUrls: ['./avatar-photo.component.scss'],
+})
+export class AvatarPhotoComponent implements OnInit, OnChanges {
+  @Input() datalen: any
+
+  @Input()
+  public photoUrl!: string
+
+  @Input()
+  public name!: string
+  @Input() public size = ''
+  @Input() randomColor = false
+  @Input() initials?: string
+  public showInitials = false
+  public circleColor!: string
+  random = Math.random().toString(36).slice(2)
+
+  // public initials!: string
+
+  private colors = [
+    '#EB7181', // red
+    '#306933', // green
+    '#000000', // black
+    '#3670B2', // blue
+    '#4E9E87',
+    '#7E4C8D',
+  ]
+
+  private randomcolors = [
+    '#EB7181', // red
+    '#006400', // green
+    '#000000', // black
+    '#3670B2', // blue
+    '#4E9E87',
+    '#7E4C8D',
+  ]
+
+  ngOnInit() {
+    if (!this.photoUrl) {
+      this.showInitials = true
+      if (!this.initials) {
+        this.createInititals()
+      }
+      if (this.datalen === 1) {
+        this.randomcolors = [
+          '#006400', // green
+        ]
+      }
+      const randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length))
+      this.circleColor = this.colors[randomIndex]
+      if (this.randomColor) {
+        const randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomcolors.length))
+        this.circleColor = this.randomcolors[randomIndex1]
+      }
+    }
+
+  }
+  ngOnChanges(change: SimpleChanges) {
+    if (change.name.currentValue !== change.name.previousValue && !change.name.firstChange) {
+      this.createInititals()
+    }
+  }
+  get userInitials() {
+    return this.initials
+  }
+  private createInititals(): void {
+    let initials = ''
+    const array = `${this.name} `.toString().split(' ')
+    if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+      initials += array[0].charAt(0)
+      initials += array[1].charAt(0)
+    } else {
+      for (let i = 0; i < this.name.length; i += 1) {
+        if (this.name.charAt(i) === ' ') {
+          continue
+        }
+
+        if (this.name.charAt(i) === this.name.charAt(i)) {
+          initials += this.name.charAt(i)
+
+          if (initials.length === 2) {
+            break
+          }
+        }
+      }
+    }
+    this.initials = initials.toUpperCase()
+  }
+}

project/ws/app/src/lib/routes/create-mdo/avatar-photo/avatar-photo.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RouterModule } from '@angular/router'
+import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material'
+import { WidgetResolverModule } from '@sunbird-cb/resolver'
+import { AvatarPhotoComponent } from './avatar-photo.component'
+
+@NgModule({
+  declarations: [AvatarPhotoComponent],
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatRippleModule,
+    WidgetResolverModule,
+  ],
+  exports: [AvatarPhotoComponent],
+  entryComponents: [AvatarPhotoComponent],
+})
+export class AvatarPhotoModule { }

project/ws/app/src/lib/routes/create-mdo/create-mdo.module.ts

@@ -1,28 +1,42 @@
 import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
+import { CommonModule, DatePipe } from '@angular/common'
 import { CreateMDORoutingModule } from './create-mdo-routing.module'
 import { HomeComponent } from './routes/home/home.component'
 import { BtnPageBackModuleAdmin, LeftMenuModule, GroupCheckboxModule, ScrollspyLeftMenuModule } from '@sunbird-cb/collection'
 import { HomeModule } from '../home/home.module'
 import { RouterModule } from '@angular/router'
 import { UsersComponent } from './routes/users/users.component'
 import { UsersService } from './services/users.service'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
+  MatExpansionModule, MatSlideToggleModule, MatOptionModule, MatFormFieldModule, MatPaginatorModule,
+  MatSelectModule, MatChipsModule, MatDatepickerModule, MatAutocompleteModule,
   MatSidenavModule,
   MatIconModule,
   MatProgressSpinnerModule,
+  MatListModule,
+  MatRadioModule,
+  MatDialogModule,
 } from '@angular/material'
 import { MatCardModule } from '@angular/material/card'
 import { RolesAccessComponent } from '../access/routes/roles-access/roles-access.component'
 import { WidgetResolverModule } from '@sunbird-cb/resolver'
 import { UIAdminTableModule } from '../../head/ui-admin-table/ui-admin-table.module'
+import { MentorManageComponent } from './mentor-manage/mentor-manage.component'
+import { SearchComponent } from './search/search.component'
+import { UserCardComponent } from './user-cards/user-card.component'
+import { AvatarPhotoModule } from './avatar-photo/avatar-photo.module'
+import { PipeOrderByModule } from '../home/pipes/pipe-order-by/pipe-order-by.module'
+import { LoaderService } from '../home/services/loader.service'
 
 @NgModule({
-  declarations: [HomeComponent, UsersComponent, RolesAccessComponent],
+  declarations: [HomeComponent, UsersComponent, RolesAccessComponent, MentorManageComponent, SearchComponent, UserCardComponent],
   imports: [CommonModule, CreateMDORoutingModule, BtnPageBackModuleAdmin, LeftMenuModule, WidgetResolverModule,
     MatSidenavModule, MatIconModule, MatProgressSpinnerModule, GroupCheckboxModule, HomeModule, RouterModule, UIAdminTableModule, MatCardModule,
-    ScrollspyLeftMenuModule],
-  exports: [UsersComponent, RolesAccessComponent],
-  providers: [UsersService],
+    ScrollspyLeftMenuModule, FormsModule, MatSelectModule, MatChipsModule, MatDatepickerModule, MatAutocompleteModule,
+    MatExpansionModule, MatSlideToggleModule, MatOptionModule, MatFormFieldModule, MatPaginatorModule, MatListModule, MatRadioModule, MatDialogModule,
+    ReactiveFormsModule, PipeOrderByModule, AvatarPhotoModule],
+  exports: [UsersComponent, RolesAccessComponent, MentorManageComponent, SearchComponent, UserCardComponent, AvatarPhotoModule],
+  providers: [UsersService, LoaderService, DatePipe],
 })
 export class CreateMDOModule { }