Merge pull request #187 from mansurskTarento/events

Events
KB-iGOT · Feb 19, 2025 · ae3bb7b · ae3bb7b
2 parents cbe9bdd + ef9c531
commit ae3bb7b
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 130 deletions.
diff --git a/...p/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.html b/...p/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.html
@@ -11,46 +11,47 @@
         <button mat-raised-button class="flex justify-center items-center save-and-exit" (click)="saveAndExit()">Save
           Draft & Exit</button>
       </ng-container>
-      <ng-container *ngIf="currentStepperIndex < 3">
+      <ng-container *ngIf="selectedStepperLable !== 'Preview' && selectedStepperLable !== 'Add Competency'">
         <button mat-raised-button class="flex justify-center items-center next-btn"
           (click)="moveToNextForm()">Next</button>
       </ng-container>
-      <ng-container *ngIf="!showPreview && currentStepperIndex === 3">
+      <ng-container *ngIf="!showPreview && selectedStepperLable === 'Add Competency'">
         <button mat-raised-button class="flex items-center publish-btn" (click)="preview()">Preview</button>
       </ng-container>
-      <ng-container *ngIf="currentStepperIndex >= 3 && openMode === 'edit'">
+      <ng-container
+        *ngIf="(selectedStepperLable === 'Preview' || selectedStepperLable === 'Add Competency') && openMode === 'edit'">
         <button mat-raised-button class="flex items-center publish-btn" (click)="publish()">Send to Publisher</button>
       </ng-container>
     </div>
   </div>
 
   <mat-stepper labelPosition="bottom" [selectedIndex]="currentStepperIndex"
     (selectionChange)="onSelectionChange($event)" class="mx-10" #stepper>
-    <mat-step [stepControl]="eventDetailsForm">
+    <mat-step label="Basic Details">
       <ng-template matStepLabel>Basic Details</ng-template>
       <ws-app-event-basic-details [eventDetails]="eventDetailsForm" [openMode]="openMode"
         [userProfile]="userProfile"></ws-app-event-basic-details>
     </mat-step>
 
-    <mat-step>
+    <!-- <mat-step>
       <ng-template matStepLabel>Add Speaker</ng-template>
       <ws-app-speakers [speakersList]="speakersList" [openMode]="openMode"
         [userProfile]="userProfile"></ws-app-speakers>
-    </mat-step>
+    </mat-step> -->
 
-    <mat-step>
+    <mat-step label="Add Material">
       <ng-template matStepLabel>Add Material</ng-template>
       <ws-app-event-materials [materialsList]="materialsList" [openMode]="openMode"></ws-app-event-materials>
     </mat-step>
 
-    <mat-step>
+    <mat-step label="Add Competency">
       <ng-template matStepLabel>Add Competency</ng-template>
       <ws-app-event-competencies [competenciesList]="competencies" [openMode]="openMode"
         (addCompetencies)="addCompetencies($event)"></ws-app-event-competencies>
     </mat-step>
 
     <ng-container *ngIf="showPreview">
-      <mat-step>
+      <mat-step label="Preview">
         <ng-template matStepLabel>Preview</ng-template>
         <ws-app-events-preview [event]="updatedEventDetails"></ws-app-events-preview>
       </mat-step>

diff --git a/...app/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.ts b/...app/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
+import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core'
 import { EventsService } from '../../services/events.service'
 import { ActivatedRoute, Router } from '@angular/router'
 import * as _ from 'lodash'
@@ -32,6 +32,7 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
   pathUrl = ''
   userProfile: any
   showPreview = false
+  selectedStepperLable = 'Basic Details'
   //#endregion
 
   constructor(
@@ -42,6 +43,7 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     private matSnackBar: MatSnackBar,
     private datePipe: DatePipe,
     private loaderService: LoaderService,
+    private cdr: ChangeDetectorRef
   ) { }
 
   //#region (onInit)
@@ -61,7 +63,7 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       startTime: new FormControl('', [Validators.required]),
       endTime: new FormControl('', [Validators.required]),
       registrationLink: new FormControl('', [Validators.required, Validators.pattern(URL_PATRON)]),
-      recordedLinks: new FormControl(''),
+      recoredEventUrl: new FormControl(''),
       appIcon: new FormControl('', [Validators.required]),
     })
   }
@@ -84,11 +86,12 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
   patchEventDetails() {
     this.eventId = _.get(this.eventDetails, 'identifier')
     const startDate = _.get(this.eventDetails, 'startDate', '')
-    const recordedLinks = _.get(this.eventDetails, 'recordedLinks', [])
-    if (recordedLinks.length > 0) {
+    const registrationLink = _.get(this.eventDetails, 'registrationLink', '')
+    const isYoutubeVideo = registrationLink.toLowerCase().includes('youtube')
+    if (registrationLink && isYoutubeVideo === false) {
       this.eventDetailsForm.controls.registrationLink.clearValidators()
-      this.eventDetailsForm.controls.recordedLinks.setValidators([Validators.required])
-      this.eventDetailsForm.controls.recordedLinks.updateValueAndValidity()
+      this.eventDetailsForm.controls.recoredEventUrl.setValidators([Validators.required])
+      this.eventDetailsForm.controls.recoredEventUrl.updateValueAndValidity()
       this.eventDetailsForm.controls.registrationLink.updateValueAndValidity()
     }
     const eventBaseDetails = {
@@ -99,10 +102,17 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       startDate: startDate ? new Date(startDate) : startDate,
       startTime: _.get(this.eventDetails, 'startTime', ''),
       endTime: _.get(this.eventDetails, 'endTime', ''),
-      registrationLink: _.get(this.eventDetails, 'registrationLink', ''),
-      recordedLinks: _.get(this.eventDetails, 'recordedLinks', []),
+      registrationLink: '',
+      recoredEventUrl: '',
       appIcon: _.get(this.eventDetails, 'appIcon', '')
     }
+    if (registrationLink) {
+      if (isYoutubeVideo) {
+        eventBaseDetails.registrationLink = registrationLink
+      } else {
+        eventBaseDetails.recoredEventUrl = registrationLink
+      }
+    }
     this.eventDetailsForm.setValue(eventBaseDetails)
     this.eventDetailsForm.updateValueAndValidity()
 
@@ -115,14 +125,20 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     if (this.stepper) {
       this.stepper._getIndicatorType = () => 'number'
+      this.cdr.detectChanges()
     }
   }
   //#endregion
 
   //#region (ui interactions)
   onSelectionChange(event: StepperSelectionEvent) {
     this.currentStepperIndex = event.selectedIndex
-    if (this.currentStepperIndex === 4) {
+    if (this.stepper) {
+      const selectedStep = this.stepper.steps.toArray()[this.currentStepperIndex]
+      this.selectedStepperLable = selectedStep.label
+      this.cdr.detectChanges()
+    }
+    if (this.selectedStepperLable === 'Preview') {
       this.updatedEventDetails = this.getFormBodyOfEvent(this.eventDetails['status'])
     }
   }
@@ -144,7 +160,18 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       this.showPreview = true
       this.updatedEventDetails = this.getFormBodyOfEvent(this.eventDetails['status'])
       setTimeout(() => {
-        this.currentStepperIndex = 4
+        let foundIndex = -1
+        if (this.stepper) {
+          const stepersList = this.stepper.steps.toArray()
+          if (stepersList) {
+            foundIndex = stepersList.findIndex((steper) => steper.label === 'Preview')
+          }
+
+          if (foundIndex !== -1) {
+            // this.stepper.selectedIndex = foundIndex
+            this.currentStepperIndex = foundIndex
+          }
+        }
       }, 100)
     }
   }
@@ -157,44 +184,52 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
 
   get canMoveToNext() {
     let currentFormIsValid = false
-    if (this.currentStepperIndex === 0) {
+    if (this.selectedStepperLable === 'Basic Details') {
       if (this.eventDetailsForm.valid) {
         currentFormIsValid = true
       } else {
         this.openSnackBar('Please fill mandatory fields')
       }
-    } else if (this.currentStepperIndex === 1) {
+    } else if (this.selectedStepperLable === 'Add Speaker') {
       if (this.speakersList && this.speakersList.length) {
         currentFormIsValid = true
       } else {
         this.openSnackBar('Please add atleast one speaker')
       }
-    } else if (this.currentStepperIndex === 2) {
-      if (this.materialsList && this.materialsList.length) {
+    } else if (this.selectedStepperLable === 'Add Material') {
+      if (this.isMaterialsValid) {
         currentFormIsValid = true
       } else {
-        this.openSnackBar('Please add atleast one material')
+        this.openSnackBar('Please provied valid name for matrial')
       }
     }
     return currentFormIsValid
   }
 
+  get isMaterialsValid(): boolean {
+    if (this.materialsList && this.materialsList.length > 0 &&
+      this.materialsList.findIndex((material) => !material.title || material.title === '') > -1) {
+      return false
+    }
+    return true
+  }
+
   get canPublish(): boolean {
-    if (this.currentStepperIndex >= 3) {
+    if (this.selectedStepperLable === 'Add Competency' || this.selectedStepperLable === 'Preview') {
       if (this.eventDetailsForm.invalid) {
-        this.openSnackBar('Please fill mandatory fields in basic details')
-        return false
-      }
-      if (!(this.speakersList && this.speakersList.length)) {
-        this.openSnackBar('Please add atleast one speaker in add speakers')
+        this.openSnackBar('Please fill mandatory fields in Basic Details')
         return false
       }
-      if (!(this.materialsList && this.materialsList.length)) {
-        this.openSnackBar('Please add atleast one material in add Material')
+      // if (!(this.speakersList && this.speakersList.length)) {
+      //   this.openSnackBar('Please add atleast one speaker in add speakers')
+      //   return false
+      // }
+      if (!this.isMaterialsValid) {
+        this.openSnackBar('Please provied valid name for matrial in Add Material')
         return false
       }
       if (!(this.competencies && this.competencies.length)) {
-        this.openSnackBar('Please add atleast one competency in add competency')
+        this.openSnackBar('Please add atleast one competency in Add Competency')
         return false
       }
       return true
@@ -253,8 +288,7 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     eventDetails['endDate'] = eventBaseDetails.startDate ? this.datePipe.transform(eventBaseDetails.startDate, 'yyyy-MM-dd') : ''
     eventDetails['startTime'] = startTime
     eventDetails['endTime'] = endTime
-    eventDetails['registrationLink'] = eventBaseDetails.registrationLink
-    eventDetails['recordedLinks'] = eventBaseDetails.recordedLinks
+    eventDetails['registrationLink'] = eventBaseDetails.registrationLink ? eventBaseDetails.registrationLink : eventBaseDetails.recoredEventUrl
     eventDetails['appIcon'] = eventBaseDetails.appIcon
 
     if (status === 'SentToPublish') {

diff --git a/...es/home/routes/events-2/components/event-basic-details/event-basic-details.component.html b/...es/home/routes/events-2/components/event-basic-details/event-basic-details.component.html
@@ -35,6 +35,8 @@
     </div>
     <mat-form-field appearance="outline" class="">
       <input matInput placeholder="Add your event name" formControlName="eventName" maxlength="70">
+      <mat-hint>Only ( a-z/A-Z , 0-9 . - _ $ / : [ ]' ' !) characters are supported</mat-hint>
+      <mat-hint align="end" class="text-sm">{{eventDetails?.controls['eventName']?.value?.length}}/70</mat-hint>
       <mat-error *ngIf="showValidationMsg('eventName','required')">
         Event name is mandatory
       </mat-error>
@@ -43,7 +45,7 @@
       </mat-error>
       <mat-error *ngIf="!showValidationMsg('eventName','pattern')
         && showValidationMsg('eventName','minlength')">
-        Minimum characters left to create {{ 10 - eventDetails?.controls['eventName'].value.length}}
+        Minimum characters left to create {{ 10 - eventDetails?.controls['eventName']?.value?.length}}
       </mat-error>
     </mat-form-field>
   </div>
@@ -58,7 +60,7 @@
         Description is mandatory
       </mat-error>
       <mat-error *ngIf="showValidationMsg('description','minlength')">
-        Minimum characters left to create {{ 250 - eventDetails?.controls['description'].value.length}}
+        Minimum characters left to create {{ 250 - eventDetails?.controls['description']?.value?.length}}
       </mat-error>
     </mat-form-field>
     <span class="description-count flex justify-end">{{eventDetails?.value?.description?.length}}/500</span>
@@ -77,7 +79,7 @@
   </ng-container>
   <ng-template #uploadVideo>
     <div class="upload flex justify-center items-center cursor-pointer dashed-border"
-      [ngClass]="{'disable': openMode === 'view'}" cdkDropList [cdkDropListData]="videoData"
+      [ngClass]="{'disable': openMode === 'view' || disableUpload }" cdkDropList [cdkDropListData]="videoData"
       (cdkDropListDropped)="onVideoSelected($event)" (dragover)="preventDefaultCDK($event)"
       (dragenter)="preventDefaultCDK($event, 'enter')" (dragleave)="preventDefaultCDK($event, 'leave')"
       (drop)="onDrop($event)" onclick="document.getElementById('upload-video').click();">
@@ -91,11 +93,11 @@
       </div>
     </div>
   </ng-template>
-  <div class="flex flex-column gap-2 event-form w-full disable-round">
+  <div class="flex flex-column gap-2 event-form w-full " [ngClass]="{'disableForm': disableUrl}">
     <div class="form-url-lable required">
       or upload from URL
     </div>
-    <mat-form-field appearance="outline" class="">
+    <mat-form-field appearance="outline" class="disable-round">
       <input matInput placeholder="Enter url" formControlName="registrationLink">
       <mat-error *ngIf="showValidationMsg('registrationLink','required')">
         Resource is mandatory
@@ -166,7 +168,7 @@
         <ngx-material-timepicker #startTimepicker (change)="onStartTimeChange($event)" class="eventTimpicker"
           [enableKeyboardInput]="true"></ngx-material-timepicker>
         <mat-error *ngIf="showValidationMsg('startTime','required')">
-          Dtart time is mandatory
+          Start time is mandatory
         </mat-error>
       </mat-form-field>
     </div>
@@ -181,7 +183,7 @@
         <ngx-material-timepicker #endTimepicker (change)="onEndTimeChange($event)"
           [enableKeyboardInput]="true"></ngx-material-timepicker>
         <mat-error *ngIf="showValidationMsg('endTime','required')">
-          Start time is mandatory
+          End time is mandatory
         </mat-error>
       </mat-form-field>
     </div>

diff --git a/...es/home/routes/events-2/components/event-basic-details/event-basic-details.component.scss b/...es/home/routes/events-2/components/event-basic-details/event-basic-details.component.scss
@@ -82,7 +82,7 @@
 
   .disable-round {
     .mat-form-field-outline {
-      border-radius: 20px;
+      border-radius: 23px;
     }
   }
 }