Merge pull request #191 from mansurskTarento/events

Events

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

@@ -1,7 +1,7 @@
 <div class="w-full flex flex-column events">
   <div class="breadcrum flex items-center justify-between">
     <div class="flex gap-2 items-center">
-      <mat-icon class="back-arrow" (click)="navigateBack()">arrow_back</mat-icon>
+      <mat-icon class="back-arrow" (click)="openConforamtionPopup()">arrow_back</mat-icon>
       <span class="event-text">Event</span>
       <mat-icon class="chevron-arrow">chevron_right</mat-icon>
       <span class="event-builder-text">Event Builder</span>

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

@@ -10,6 +10,8 @@ import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack
 import { HttpErrorResponse } from '@angular/common/http'
 import { DatePipe } from '@angular/common'
 import { LoaderService } from '../../../../../../../../../../../src/app/services/loader.service'
+import { MatLegacyDialog } from '@angular/material/legacy-dialog'
+import { ConfirmDialogComponent } from '../../../../../workallocation-v2/components/confirm-dialog/confirm-dialog.component'
 
 @Component({
   selector: 'ws-app-create-event',
@@ -43,7 +45,8 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     private matSnackBar: MatSnackBar,
     private datePipe: DatePipe,
     private loaderService: LoaderService,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private dialog: MatLegacyDialog
   ) { }
 
   //#region (onInit)
@@ -143,6 +146,46 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     }
   }
 
+  openConforamtionPopup() {
+    if (this.openMode === 'edit') {
+      const dialgData = {
+        dialogType: 'warning',
+        icon: {
+          iconName: 'error_outline',
+          iconClass: 'warning-icon'
+        },
+        message: 'Are you sure you want to exit without saving?',
+        buttonsList: [
+          {
+            btnAction: false,
+            displayText: 'No',
+            btnClass: 'btn-outline-primary'
+          },
+          {
+            btnAction: true,
+            displayText: 'Yes',
+            btnClass: 'successBtn'
+          },
+        ]
+      }
+
+      const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+        width: '500px',
+        height: '210px',
+        data: dialgData,
+        autoFocus: false
+      })
+
+      dialogRef.afterClosed().subscribe((btnAction: any) => {
+        if (btnAction) {
+          this.navigateBack()
+        }
+      })
+    } else {
+      this.navigateBack()
+    }
+  }
+
   navigateBack() {
     this.router.navigate([`/app/home/events/${this.pathUrl}`])
   }
@@ -200,15 +243,16 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       if (this.isMaterialsValid) {
         currentFormIsValid = true
       } else {
-        this.openSnackBar('Please provied valid name for matrial')
+        this.openSnackBar('Please provied valid name and matrial')
       }
     }
     return currentFormIsValid
   }
 
   get isMaterialsValid(): boolean {
     if (this.materialsList && this.materialsList.length > 0 &&
-      this.materialsList.findIndex((material) => !material.title || material.title === '') > -1) {
+      this.materialsList.findIndex((material) => !material.title || material.title === '') > -1 ||
+      this.materialsList.findIndex((material) => !material.content || material.content === '') > -1) {
       return false
     }
     return true
@@ -225,7 +269,7 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       //   return false
       // }
       if (!this.isMaterialsValid) {
-        this.openSnackBar('Please provied valid name for matrial in Add Material')
+        this.openSnackBar('Please provied valid name and matrial in Add Material')
         return false
       }
       if (!(this.competencies && this.competencies.length)) {
@@ -273,19 +317,30 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     const eventDetails: any = JSON.parse(JSON.stringify(this.eventDetails))
     const eventBaseDetails = this.eventDetailsForm.value
     let startTime = ''
+    let endTime = ''
+    let startDateTime = ''
+    let endDateTime = ''
+    let startDate = eventBaseDetails.startDate ? this.datePipe.transform(eventBaseDetails.startDate, 'yyyy-MM-dd') : ''
     if (eventBaseDetails.startTime) {
       startTime = this.getFormatedTime(eventBaseDetails.startTime)
     }
-    let endTime = ''
     if (eventBaseDetails.endTime) {
       endTime = this.getFormatedTime(eventBaseDetails.endTime)
     }
+    if (startDate) {
+      if (startTime) {
+        startDateTime = this.combineDateAndTime(startDate, startTime)
+      }
+      if (endTime) {
+        endDateTime = this.combineDateAndTime(startDate, endTime)
+      }
+    }
     eventDetails['name'] = eventBaseDetails.eventName
     eventDetails['description'] = eventBaseDetails.description
     eventDetails['resourceType'] = eventBaseDetails.eventCategory
     eventDetails['streamType'] = eventBaseDetails.streamType
-    eventDetails['startDate'] = eventBaseDetails.startDate ? this.datePipe.transform(eventBaseDetails.startDate, 'yyyy-MM-dd') : ''
-    eventDetails['endDate'] = eventBaseDetails.startDate ? this.datePipe.transform(eventBaseDetails.startDate, 'yyyy-MM-dd') : ''
+    eventDetails['startDate'] = startDate
+    eventDetails['endDate'] = startDate
     eventDetails['startTime'] = startTime
     eventDetails['endTime'] = endTime
     eventDetails['registrationLink'] = eventBaseDetails.registrationLink ? eventBaseDetails.registrationLink : eventBaseDetails.recoredEventUrl
@@ -304,6 +359,15 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     if (this.competencies) {
       eventDetails['competencies_v6'] = this.competencies
     }
+    if (startTime && endTime) {
+      eventDetails['duration'] = this.getTimeDifferenceInMinutes(startTime, endTime)
+    }
+    if (startDateTime) {
+      eventDetails['startDateTime'] = startDateTime
+    }
+    if (endDateTime) {
+      eventDetails['endDateTime'] = endDateTime
+    }
 
     eventDetails['status'] = status
 
@@ -340,6 +404,22 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     return `${hoursFormatted}:${minutesFormatted}:${seconds}`
   }
 
+  getTimeDifferenceInMinutes(time1: string, time2: string): number {
+    const time1Date = new Date(`1970-01-01T${time1}`)
+    const time2Date = new Date(`1970-01-01T${time2}`)
+
+    const diffInMilliseconds = time2Date.getTime() - time1Date.getTime()
+
+    return diffInMilliseconds / (1000 * 60)
+  }
+
+  combineDateAndTime(date: string, time: string): string {
+    const combinedDateTime = `${date}T${time}`
+    const dateObj = new Date(combinedDateTime)
+    const isoString = dateObj.toISOString()
+    return isoString.replace('Z', '+0000')
+  }
+
   //#endregion
 
   private openSnackBar(message: string) {

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

@@ -149,7 +149,7 @@
       </div>
       <mat-form-field appearance="outline" class="">
         <input matInput [matDatepicker]="startDate" [min]="todayDate" placeholder="Enter Start Date"
-          formControlName="startDate">
+          formControlName="startDate" readonly>
         <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
         <mat-datepicker #startDate></mat-datepicker>
         <mat-error *ngIf="showValidationMsg('startDate','required')">
@@ -163,7 +163,7 @@
       </div>
       <mat-form-field appearance="outline">
         <input matInput placeholder="Enter Start Time" formControlName="startTime" [ngxTimepicker]="startTimepicker"
-          [max]="maxTimeToStart" readonly>
+          [max]="maxTimeToStart" [min]="minTimeToStart" readonly>
         <ngx-material-timepicker-toggle [for]="startTimepicker" matSuffix></ngx-material-timepicker-toggle>
         <ngx-material-timepicker #startTimepicker (change)="onStartTimeChange($event)" class="eventTimpicker"
           [enableKeyboardInput]="true"></ngx-material-timepicker>

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

@@ -9,6 +9,7 @@ import { environment } from '../../../../../../../../../../../src/environments/e
 import { HttpErrorResponse } from '@angular/common/http'
 import moment from 'moment'
 import { LoaderService } from '../../../../../../../../../../../src/app/services/loader.service'
+import { DatePipe } from '@angular/common'
 
 @Component({
   selector: 'ws-app-event-basic-details',
@@ -26,6 +27,7 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
   todayDate = new Date()
 
   maxTimeToStart = '11:45 pm'
+  minTimeToStart: string | null = '12:00 am'
   minTimeToEnd = '12:15 am'
   timeGap = 15
   disableUpload = false
@@ -36,7 +38,8 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
   constructor(
     private matSnackBar: MatLegacySnackBar,
     private eventSvc: EventsService,
-    private loaderService: LoaderService
+    private loaderService: LoaderService,
+    private datePipe: DatePipe,
   ) { }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -45,17 +48,23 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
       if (startTime) {
         const convertedStartTime = this.convertTo12HourFormat(startTime)
         this.eventDetails.controls.startTime.patchValue(convertedStartTime)
-        setTimeout(() => {
-          const resetEndTime = false
-          this.generatMinTimeToEnd(convertedStartTime, resetEndTime)
-        }, 100)
+        if (this.openMode === 'edit') {
+          setTimeout(() => {
+            const resetEndTime = false
+            this.generatMinTimeToEnd(convertedStartTime, resetEndTime)
+          }, 100)
+        }
       }
 
       const endTime = _.get(this.eventDetails, 'value.endTime')
       if (endTime) {
         this.eventDetails.controls.endTime.patchValue(this.convertTo12HourFormat(endTime))
       }
 
+      if (_.get(this.eventDetails, 'value.startDate') && this.openMode === 'edit') {
+        this.checkMinTimeToStart(_.get(this.eventDetails, 'value.startDate'))
+      }
+
       if (_.get(this.eventDetails, 'value.registrationLink') && _.get(this.eventDetails, 'value.registrationLink') !== '') {
         this.disableUpload = true
       } else if (_.get(this.eventDetails, 'value.recoredEventUrl') && _.get(this.eventDetails, 'value.recoredEventUrl').length) {
@@ -82,29 +91,77 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
   }
 
   ngOnInit(): void {
-    if (this.eventDetails.controls.startTime) {
-      this.eventDetails.controls.startTime.valueChanges.subscribe((time) => {
-        this.generatMinTimeToEnd(time)
-      })
-    }
-    if (this.eventDetails.controls.registrationLink) {
-      this.eventDetails.controls.registrationLink.valueChanges.subscribe((url) => {
-        if (url && url !== '') {
-          if (this.disableUpload === false) {
-            this.disableUpload = true
-            this.eventDetails.controls.recoredEventUrl.patchValue('')
-            this.eventDetails.controls.recoredEventUrl.clearValidators()
-            this.eventDetails.controls.registrationLink.setValidators([Validators.required, Validators.pattern(URL_PATRON)])
-            this.eventDetails.controls.recoredEventUrl.updateValueAndValidity()
-            this.eventDetails.controls.registrationLink.updateValueAndValidity()
+    if (this.eventDetails && this.eventDetails.controls && this.openMode === 'edit') {
+      if (this.eventDetails.controls.startDate) {
+        this.eventDetails.controls.startDate.valueChanges.subscribe((date) => {
+          this.checkMinTimeToStart(date)
+        })
+      }
+      if (this.eventDetails.controls.startTime) {
+        this.eventDetails.controls.startTime.valueChanges.subscribe((time) => {
+          this.generatMinTimeToEnd(time)
+        })
+      }
+      if (this.eventDetails.controls.registrationLink) {
+        this.eventDetails.controls.registrationLink.valueChanges.subscribe((url) => {
+          if (url && url !== '') {
+            if (this.disableUpload === false) {
+              this.disableUpload = true
+              this.eventDetails.controls.recoredEventUrl.patchValue('')
+              this.eventDetails.controls.recoredEventUrl.clearValidators()
+              this.eventDetails.controls.registrationLink.setValidators([Validators.required, Validators.pattern(URL_PATRON)])
+              this.eventDetails.controls.recoredEventUrl.updateValueAndValidity()
+              this.eventDetails.controls.registrationLink.updateValueAndValidity()
+            }
+          } else {
+            this.disableUpload = false
           }
-        } else {
-          this.disableUpload = false
-        }
-      })
+        })
+      }
+    }
+  }
+
+  checkMinTimeToStart(selectedDate: any) {
+    const todayFormatted = this.datePipe.transform(new Date(), 'yyyy-MM-dd')
+    const inputDateFormatted = this.datePipe.transform(selectedDate, 'yyyy-MM-dd')
+    if (todayFormatted === inputDateFormatted) {
+      this.generatMinTimeToStart()
+    } else {
+      this.minTimeToStart = '12:00 am'
     }
   }
 
+  generatMinTimeToStart() {
+    const formattedTime = this.datePipe.transform(new Date(), 'h:mm a')
+    this.minTimeToStart = formattedTime
+    if (_.get(this.eventDetails, 'controls.startTime.value')) {
+      if (this.isTimeLessThanNow(_.get(this.eventDetails, 'controls.startTime.value'))) {
+        this.eventDetails.controls.startTime.patchValue('')
+        this.eventDetails.controls.endTime.patchValue('')
+      }
+    }
+  }
+
+  isTimeLessThanNow(givenTime: string): boolean {
+    const datePipe = new DatePipe('en-US')
+    const currentTime = datePipe.transform(new Date(), 'h:mm a') as string
+    const currentMinutes = this.timeToMinutes(currentTime)
+    const givenMinutes = this.timeToMinutes(givenTime)
+
+    return givenMinutes < currentMinutes
+  }
+
+  timeToMinutes(time: string): number {
+    const [timePart, period] = time.split(' ')
+    const [hours, minutes] = timePart.split(':').map(Number)
+
+    let totalMinutes = hours % 12 * 60 + minutes // Convert to 24-hour format
+    if (period === 'PM') {
+      totalMinutes += 12 * 60 // Add 12 hours if PM
+    }
+
+    return totalMinutes
+  }
 
   generatMinTimeToEnd(time: string, resetEndTime = true) {
     let [timePart, period] = time.split(' ')

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

@@ -18,7 +18,7 @@
               <div>{{competency?.competencyAreaName}}</div>
             </div>
           </div>
-          <div>
+          <div *ngIf="openMode === 'edit'">
             <mat-icon class="cursor-pointer" (click)="removeNode(competency)">delete</mat-icon>
           </div>
         </div>
@@ -40,7 +40,7 @@
               </div>
               <div>
                 <mat-icon class="cursor-pointer" (click)="removeTheme(competency, theme)"
-                  *ngIf="competency?.themes?.length > 1">delete</mat-icon>
+                  *ngIf="competency?.themes?.length > 1 && openMode === 'edit'">delete</mat-icon>
               </div>
             </div>
             <ng-container *ngIf="theme?.subThems?.length">
@@ -56,7 +56,7 @@
                     </div>
                   </div>
                   <div>
-                    <mat-icon class="cursor-pointer" *ngIf="theme?.subThems?.length > 1"
+                    <mat-icon class="cursor-pointer" *ngIf="theme?.subThems?.length > 1 && openMode === 'edit'"
                       (click)="removeSubTheme(competency, theme, subTheme)">delete</mat-icon>
                   </div>
                 </div>