events timpicker issue fixes, added rejection and prewview in progress

project/ws/app/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.html

@@ -11,14 +11,14 @@
         <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="currentStepperIndex < 3">
         <button mat-raised-button class="flex justify-center items-center next-btn"
           (click)="moveToNextForm()">Next</button>
       </ng-container>
       <ng-container *ngIf="!showPreview && currentStepperIndex === 3">
         <button mat-raised-button class="flex items-center publish-btn" (click)="preview()">Preview</button>
       </ng-container>
-      <ng-container *ngIf="showPreview && showPublish">
+      <ng-container *ngIf="this.currentStepperIndex === 3 || this.currentStepperIndex === 4">
         <button mat-raised-button class="flex items-center publish-btn" (click)="publish()">Send to Publisher</button>
       </ng-container>
     </div>
@@ -45,13 +45,22 @@
 
     <mat-step>
       <ng-template matStepLabel>Add Competency</ng-template>
-      <ng-container *ngIf="showPreview; else add_competencies">
+      <ws-app-event-competencies [competenciesList]="competencies" [openMode]="openMode"
+        (addCompetencies)="addCompetencies($event)"></ws-app-event-competencies>
+      <!-- <ng-container *ngIf="showPreview; else add_competencies">
         <ws-app-events-preview [event]="updatedEventDetails"></ws-app-events-preview>
       </ng-container>
       <ng-template #add_competencies>
         <ws-app-event-competencies [competenciesList]="competencies" [openMode]="openMode"
           (addCompetencies)="addCompetencies($event)"></ws-app-event-competencies>
-      </ng-template>
+      </ng-template> -->
     </mat-step>
+
+    <ng-container *ngIf="showPreview">
+      <mat-step>
+        <ng-template matStepLabel>Preview</ng-template>
+        <ws-app-events-preview [event]="updatedEventDetails"></ws-app-events-preview>
+      </mat-step>
+    </ng-container>
   </mat-stepper>
 </div>

project/ws/app/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.ts

@@ -57,7 +57,7 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       startDate: new FormControl('', [Validators.required]),
       startTime: new FormControl('', [Validators.required]),
       endTime: new FormControl('', [Validators.required]),
-      resourceUrl: new FormControl(''),
+      resourceUrl: new FormControl('', [Validators.required]),
       // uploadUrl: new FormControl(''),
       appIcon: new FormControl('', [Validators.required]),
     })
@@ -110,27 +110,32 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
   //#region (ui interactions)
   onSelectionChange(event: StepperSelectionEvent) {
     this.currentStepperIndex = event.selectedIndex
-    this.showPreview = false
   }
 
   navigateBack() {
     this.router.navigate([`/app/home/events/${this.pathUrl}`])
   }
 
   moveToNextForm() {
+    this.eventDetailsForm.markAllAsTouched()
+    this.eventDetailsForm.updateValueAndValidity()
     if (this.canMoveToNext || this.openMode === 'view') {
       this.currentStepperIndex = this.currentStepperIndex + 1
     }
   }
 
   preview() {
     this.showPreview = true
-    this.updatedEventDetails = this.getFormBodyOfEvent()
+    this.updatedEventDetails = this.getFormBodyOfEvent(this.eventDetails['status'])
+    setTimeout(() => {
+      this.currentStepperIndex = 4
+    }, 100)
   }
 
   publish() {
-    this.eventDetails['status'] = 'SentToPublish'
-    this.saveAndExit()
+    if (this.canPublish) {
+      this.saveAndExit('SentToPublish')
+    }
   }
 
   get canMoveToNext() {
@@ -151,15 +156,22 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     return currentFormIsValid
   }
 
-  get showPublish(): boolean {
+  get canPublish(): boolean {
     if (this.currentStepperIndex === 3) {
       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')
         return false
       }
       if (!(this.materialsList && this.materialsList.length)) {
+        this.openSnackBar('Please add atleast one material')
+        return false
+      }
+      if (!(this.competencies && this.competencies.length)) {
+        this.openSnackBar('Please add atleast one competency')
         return false
       }
       return true
@@ -171,19 +183,18 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     this.competencies = competencies
   }
 
-  saveAndExit(navigateBack = true) {
+  saveAndExit(status = 'Draft') {
     const formBody = {
       request: {
-        event: this.getFormBodyOfEvent()
+        event: this.getFormBodyOfEvent(status)
       }
     }
     this.eventSvc.updateEvent(formBody, this.eventId).subscribe({
       next: res => {
         if (res) {
-          this.openSnackBar('Event details saved successfully')
-          if (navigateBack) {
-            this.navigateBack()
-          }
+          const successMessage = status === 'Draft' ? 'Event details saved successfully' : 'Event details sent for approval successfully'
+          this.openSnackBar(successMessage)
+          this.navigateBack()
         }
       },
       error: (error: HttpErrorResponse) => {
@@ -193,7 +204,7 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     })
   }
 
-  getFormBodyOfEvent() {
+  getFormBodyOfEvent(status: string) {
     const eventDetails: any = JSON.parse(JSON.stringify(this.eventDetails))
     const eventBaseDetails = this.eventDetailsForm.value
     let startTime = ''
@@ -224,6 +235,8 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       eventDetails['competencies_v6'] = this.competencies
     }
 
+    eventDetails['status'] = status
+
     return eventDetails
   }
 

project/ws/app/src/lib/routes/home/routes/events-2/components/event-basic-details/event-basic-details.component.html

@@ -20,7 +20,7 @@
         (change)="onFileSelected(file.files);">
       <div class="flex flex-column items-center gap-2">
         <img src="/assets/icons/upload-upward-arrow.svg" alt="icon">
-        <span class="text-sm font-bold text-blue">Upload Images <strong class="text-red-700">*</strong></span>
+        <span class="text-sm font-bold text-blue">Upload Image <strong class="text-red-700">*</strong></span>
         <span class="text-xs font-normal">Supported file types: PNG, JPG</span>
         <span class="text-xs font-normal">Max Size - 400MB</span>
       </div>
@@ -53,7 +53,7 @@
   </div>
 
   <div class="flex flex-column gap-2 event-form w-full disable-round">
-    <div class="form-url-lable">
+    <div class="form-url-lable required">
       upload from URL
     </div>
     <mat-form-field appearance="outline" class="">
@@ -96,7 +96,7 @@
   </div>
 
   <div class="flex flex-row gap-4">
-    <div class="flex flex-column gap-2 event-form w-full disable-round">
+    <div class="flex flex-column gap-2 event-form w-full disable-round eventTimpicker">
       <div class="form-lable required">
         Date
       </div>
@@ -114,10 +114,12 @@
       <div class="form-lable required">
         Start Time
       </div>
-      <mat-form-field appearance="outline" class="">
-        <input matInput placeholder="Enter Start Date" formControlName="startTime" [ngxTimepicker]="startTimepicker">
+      <mat-form-field appearance="outline">
+        <input matInput placeholder="Enter Start Time" formControlName="startTime" [ngxTimepicker]="startTimepicker"
+          [max]="maxTimeToStart" readonly>
         <ngx-material-timepicker-toggle [for]="startTimepicker" matSuffix></ngx-material-timepicker-toggle>
-        <ngx-material-timepicker #startTimepicker></ngx-material-timepicker>
+        <ngx-material-timepicker #startTimepicker (change)="onStartTimeChange($event)" class="eventTimpicker"
+          [enableKeyboardInput]="true"></ngx-material-timepicker>
         <mat-error *ngIf="showValidationMsg('startTime','required')">
           start time is mandatory
         </mat-error>
@@ -128,9 +130,11 @@
         End Time
       </div>
       <mat-form-field appearance="outline" class="">
-        <input matInput placeholder="Enter Start Date" formControlName="endTime" [ngxTimepicker]="endTimepicker">
+        <input matInput placeholder="Enter End Time" formControlName="endTime" [ngxTimepicker]="endTimepicker"
+          [min]="minTimeToEnd" readonly>
         <ngx-material-timepicker-toggle [for]="endTimepicker" matSuffix></ngx-material-timepicker-toggle>
-        <ngx-material-timepicker #endTimepicker></ngx-material-timepicker>
+        <ngx-material-timepicker #endTimepicker (change)="onEndTimeChange($event)"
+          [enableKeyboardInput]="true"></ngx-material-timepicker>
         <mat-error *ngIf="showValidationMsg('endTime','required')">
           start time is mandatory
         </mat-error>

project/ws/app/src/lib/routes/home/routes/events-2/components/event-basic-details/event-basic-details.component.scss

@@ -102,3 +102,11 @@
     display: none;
   }
 }
+
+::ng-deep ngx-material-timepicker-content{
+  --button-color: #1B4CA1 !important;
+  --dial-background-color: #1B4CA1 !important;
+  --dial-editable-active-color: #1B4CA1 !important;
+  --clock-hand-color: #1B4CA1 !important;
+}
+

project/ws/app/src/lib/routes/home/routes/events-2/components/event-basic-details/event-basic-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { MatLegacySnackBar } from '@angular/material/legacy-snack-bar'
 import * as _ from 'lodash'
@@ -7,13 +7,14 @@ import { EventsService } from '../../services/events.service'
 import { map, mergeMap } from 'rxjs/operators'
 import { environment } from '../../../../../../../../../../../src/environments/environment'
 import { HttpErrorResponse } from '@angular/common/http'
+import moment from 'moment'
 
 @Component({
   selector: 'ws-app-event-basic-details',
   templateUrl: './event-basic-details.component.html',
   styleUrls: ['./event-basic-details.component.scss']
 })
-export class EventBasicDetailsComponent implements OnInit {
+export class EventBasicDetailsComponent implements OnInit, OnChanges {
 
   //#region (global variables)
   @Input() eventDetails!: FormGroup
@@ -22,14 +23,82 @@ export class EventBasicDetailsComponent implements OnInit {
 
   evntCategorysList = ['Webinar', 'Karmayogi Talks', 'Karmayogi Saptah']
   todayDate = new Date()
+
+  maxTimeToStart = '11:30 pm'
+  minTimeToEnd = '12:30 am'
+  timeGap = 15
+
   //#endregion
 
   constructor(
     private matSnackBar: MatLegacySnackBar,
     private eventSvc: EventsService
   ) { }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.eventDetails) {
+      const startTime = _.get(this.eventDetails, 'value.startTime')
+      if (startTime) {
+        this.eventDetails.controls.startTime.patchValue(this.convertTo12HourFormat(startTime))
+      }
+
+      const endTime = _.get(this.eventDetails, 'value.endTime')
+      if (endTime) {
+        this.eventDetails.controls.endTime.patchValue(this.convertTo12HourFormat(endTime))
+      }
+    }
+  }
+
+  convertTo12HourFormat(timeWithTimezone: string): string {
+    const time = timeWithTimezone.split('+')[0]
+    const [hours, minutes] = time.split(':')
+    let hour = parseInt(hours)
+    let period = 'AM'
+    if (hour >= 12) {
+      period = 'PM'
+      if (hour > 12) {
+        hour -= 12
+      }
+    } else if (hour === 0) {
+      hour = 12
+    }
+    const formattedTime = `${hour}:${minutes} ${period}`
+    return formattedTime
+  }
+
   ngOnInit(): void {
+    if (this.eventDetails.controls.startTime) {
+      this.eventDetails.controls.startTime.valueChanges.subscribe((time) => {
+        this.generatMinTimeToEnd(time)
+      })
+    }
+  }
+
+
+  generatMinTimeToEnd(time: string) {
+    let [timePart, period] = time.split(' ')
+    let [hours, minutes] = timePart.split(':').map(Number)
+    minutes += this.timeGap
+    if (minutes >= 60) {
+      minutes -= 60
+      hours += 1
+    }
+    if (hours > 12) {
+      hours -= 12
+      if (period === 'AM') {
+        period = 'PM'
+      } else {
+        period = 'AM'
+      }
+    }
+    if (hours === 12 && minutes === 0) {
+      period = period === 'AM' ? 'PM' : 'AM'
+    }
+    const formattedTime = `${hours}:${minutes < 10 ? '0' + minutes : minutes} ${period}`
+    this.minTimeToEnd = formattedTime
+    if (this.eventDetails.controls.startTime) {
+      this.eventDetails.controls.endTime.patchValue('')
+    }
   }
 
   get appIconName(): string {
@@ -142,6 +211,26 @@ export class EventBasicDetailsComponent implements OnInit {
     return showMsg
   }
 
+  onStartTimeChange(event: any) {
+    const startTime = event ? event.formatted : ''
+    if (startTime) {
+      const minEndTime = this.calculateMinEndTime(startTime)
+      this.minTimeToEnd = minEndTime
+      if (this.eventDetails) {
+        const endTimeControl = this.eventDetails.get('endTime')
+        if (endTimeControl) {
+          endTimeControl.setValue('')
+        }
+      }
+    }
+  }
+
+  calculateMinEndTime(startTime: string): string {
+    const startMoment = moment(startTime, 'HH:mm')
+    const minEndTimeMoment = startMoment.add(30, 'minutes')
+    return minEndTimeMoment.format('HH:mm')
+  }
+
   private openSnackBar(message: string) {
     this.matSnackBar.open(message)
   }