Merge pull request #180 from mansurskTarento/events

added video upload and imporved add speakers

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

@@ -47,13 +47,6 @@
       <ng-template matStepLabel>Add Competency</ng-template>
       <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> -->
     </mat-step>
 
     <ng-container *ngIf="showPreview">

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

@@ -58,7 +58,8 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       startTime: new FormControl('', [Validators.required]),
       endTime: new FormControl('', [Validators.required]),
       resourceUrl: new FormControl('', [Validators.required]),
-      // uploadUrl: new FormControl(''),
+      uploadUrl: new FormControl(''),
+      resourceUploadType: new FormControl('url'),
       appIcon: new FormControl('', [Validators.required]),
     })
   }
@@ -81,6 +82,13 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
   patchEventDetails() {
     this.eventId = _.get(this.eventDetails, 'identifier')
     const startDate = _.get(this.eventDetails, 'startDate', '')
+    const resourceUploadType = _.get(this.eventDetails, 'resourceUploadType', '')
+    if (resourceUploadType === 'upload') {
+      this.eventDetailsForm.controls.resourceUrl.clearAsyncValidators()
+      this.eventDetailsForm.controls.uploadUrl.setValidators([Validators.required])
+      this.eventDetailsForm.controls.uploadUrl.updateValueAndValidity()
+      this.eventDetailsForm.controls.resourceUrl.updateValueAndValidity()
+    }
     const eventBaseDetails = {
       eventName: _.get(this.eventDetails, 'name', ''),
       description: _.get(this.eventDetails, 'description', ''),
@@ -89,7 +97,9 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
       startDate: startDate ? new Date(startDate) : startDate,
       startTime: _.get(this.eventDetails, 'startTime', ''),
       endTime: _.get(this.eventDetails, 'endTime', ''),
-      resourceUrl: _.get(this.eventDetails, 'resourceUrl', ''),
+      resourceUrl: resourceUploadType === 'url' ? _.get(this.eventDetails, 'resourceUrl', '') : '',
+      uploadUrl: resourceUploadType === 'upload' ? _.get(this.eventDetails, 'resourceUrl', '') : '',
+      resourceUploadType: resourceUploadType,
       appIcon: _.get(this.eventDetails, 'appIcon', '')
     }
     this.eventDetailsForm.setValue(eventBaseDetails)
@@ -145,14 +155,20 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     if (this.currentStepperIndex === 0) {
       if (this.eventDetailsForm.valid) {
         currentFormIsValid = true
+      } else {
+        this.openSnackBar('Please fill mandatory fields')
       }
     } else if (this.currentStepperIndex === 1) {
       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) {
         currentFormIsValid = true
+      } else {
+        this.openSnackBar('Please add atleast one material')
       }
     }
     return currentFormIsValid
@@ -165,15 +181,15 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
         return false
       }
       if (!(this.speakersList && this.speakersList.length)) {
-        this.openSnackBar('Please add atleast one speaker')
+        this.openSnackBar('Please add atleast one speaker in add speakers')
         return false
       }
       if (!(this.materialsList && this.materialsList.length)) {
-        this.openSnackBar('Please add atleast one material')
+        this.openSnackBar('Please add atleast one material in add Material')
         return false
       }
       if (!(this.competencies && this.competencies.length)) {
-        this.openSnackBar('Please add atleast one competency')
+        this.openSnackBar('Please add atleast one competency in add competency')
         return false
       }
       return true
@@ -224,7 +240,8 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
     eventDetails['startDate'] = eventBaseDetails.startDate ? this.datePipe.transform(eventBaseDetails.startDate, 'yyyy-MM-dd') : ''
     eventDetails['startTime'] = startTime
     eventDetails['endTime'] = endTime
-    eventDetails['resourceUrl'] = eventBaseDetails.resourceUrl
+    eventDetails['resourceUrl'] = eventBaseDetails.resourceUploadType === 'url' ? eventBaseDetails.resourceUrl : eventBaseDetails.uploadUrl
+    eventDetails['resourceUploadType'] = eventBaseDetails.resourceUploadType
     eventDetails['appIcon'] = eventBaseDetails.appIcon
 
     if (this.speakersList) {

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

@@ -10,7 +10,7 @@
         <img src="/assets/icons/image.svg" alt="app icon">
         <span class="iconName">{{appIconName}}</span>
       </div>
-      <mat-icon class="remove-app-icon" (click)="removeIcon()">close</mat-icon>
+      <mat-icon class="remove-app-icon" (click)="removeFile('appIcon')">close</mat-icon>
     </div>
   </ng-container>
   <ng-template #uploadIcon>
@@ -52,9 +52,34 @@
     <span class="description-count flex justify-end">{{eventDetails?.value?.description?.length}}/250</span>
   </div>
 
+  <ng-container *ngIf="uploadedVideoName; else uploadVideo">
+    <div class="appIconCard flex justify-between px-2 items-center">
+      <div class="flex gap-2 items-center">
+        <img src="/assets/icons/image.svg" alt="app icon">
+        <span class="iconName">{{uploadedVideoName}}</span>
+      </div>
+      <mat-icon class="remove-app-icon" (click)="removeFile('uploadedVideo')">close</mat-icon>
+    </div>
+  </ng-container>
+  <ng-template #uploadVideo>
+    <div class="upload flex justify-center items-center cursor-pointer dashed-border" 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();">
+      <input #file type="file" name="upload-video" id="upload-video" class="hidden"
+        accept="video/mp4, video/mov, video/avi" (change)="onVideoSelected(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">Select video to upload <strong class="text-red-700">*</strong></span>
+        <span class="text-xs font-normal">or drag and drop here</span>
+        <span class="text-xs font-normal">Max Size - 400MB</span>
+      </div>
+    </div>
+  </ng-template>
   <div class="flex flex-column gap-2 event-form w-full disable-round">
     <div class="form-url-lable required">
-      upload from URL
+      or upload from URL
     </div>
     <mat-form-field appearance="outline" class="">
       <input matInput placeholder="Enter url" formControlName="resourceUrl">

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { FormGroup, Validators } from '@angular/forms'
 import { MatLegacySnackBar } from '@angular/material/legacy-snack-bar'
 import * as _ from 'lodash'
 import { events } from '../../models/events.model'
@@ -72,6 +72,19 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
         this.generatMinTimeToEnd(time)
       })
     }
+    if (this.eventDetails.controls.resourceUrl) {
+      this.eventDetails.controls.resourceUrl.valueChanges.subscribe((url) => {
+        if (url && url !== '') {
+          this.eventDetails.controls.uploadUrl.patchValue('')
+          this.eventDetails.controls.uploadUrl.clearValidators()
+          this.eventDetails.controls.resourceUrl.setValidators([Validators.required])
+          this.eventDetails.controls.resourceUploadType.patchValue('url')
+          this.eventDetails.controls.uploadUrl.updateValueAndValidity()
+          this.eventDetails.controls.resourceUrl.updateValueAndValidity()
+          this.eventDetails.controls.resourceUploadType.updateValueAndValidity()
+        }
+      })
+    }
   }
 
 
@@ -113,10 +126,27 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
     return name
   }
 
-  removeIcon() {
-    if (this.eventDetails.controls.appIcon) {
+  get uploadedVideoName(): string {
+    let name = ''
+    const uploadedVideoUrl = _.get(this.eventDetails, 'value.uploadUrl', '')
+    if (uploadedVideoUrl) {
+      const urlSplit = uploadedVideoUrl.split('_')
+      if (urlSplit.length > 0) {
+        name = urlSplit[urlSplit.length - 1]
+      }
+    }
+    return name
+  }
+
+  removeFile(item = 'appIcon') {
+    if (item === 'appIcon' && this.eventDetails.controls.appIcon) {
       this.eventDetails.controls.appIcon.patchValue('')
       this.eventDetails.controls.appIcon.updateValueAndValidity()
+    } else if (item === 'uploadedVideo' && this.eventDetails.controls.uploadUrl) {
+      this.eventDetails.controls.uploadUrl.patchValue('')
+      this.eventDetails.controls.uploadUrl.updateValueAndValidity()
+      this.eventDetails.controls.resourceUrl.setValidators([Validators.required])
+      this.eventDetails.controls.resourceUrl.updateValueAndValidity()
     }
   }
 
@@ -126,8 +156,8 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
       return
     }
     const mimeType = files[0].type
-    if (mimeType.match(/image\/*/) == null) {
-      this.openSnackBar('Only JPG and PNG files are supported')
+    if (!mimeType.startsWith('video/')) {
+      this.openSnackBar('Only video files are supported')
       return
     }
     const reader = new FileReader()
@@ -139,12 +169,9 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
     }
     reader.readAsDataURL(files[0])
     this.saveImage(imagePath)
-    // reader.onload = _event => {
-    //   this.imgURL = reader.result
-    // }
   }
 
-  saveImage(imagePath: any) {
+  saveImage(imagePath: any, mediaType = 'image') {
     if (imagePath) {
       const org = []
       const createdforarray: any[] = []
@@ -188,9 +215,22 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
               const urlSplice = createdUrl.slice(urlToReplace.length).split('/')
               appIcon = `${environment.domainName}/assets/public/${urlSplice.slice(1).join('/')}`
             }
-            if (this.eventDetails.controls.appIcon) {
-              this.eventDetails.controls.appIcon.patchValue(appIcon)
-              this.eventDetails.controls.appIcon.updateValueAndValidity()
+            if (mediaType === 'image') {
+              if (this.eventDetails.controls.appIcon) {
+                this.eventDetails.controls.appIcon.patchValue(appIcon)
+                this.eventDetails.controls.appIcon.updateValueAndValidity()
+              }
+            } else {
+              if (this.eventDetails.controls.uploadUrl) {
+                this.eventDetails.controls.uploadUrl.patchValue(appIcon)
+                this.eventDetails.controls.uploadUrl.setValidators([Validators.required])
+                this.eventDetails.controls.resourceUrl.patchValue('')
+                this.eventDetails.controls.resourceUrl.clearValidators()
+                this.eventDetails.controls.resourceUploadType.patchValue('upload')
+                this.eventDetails.controls.uploadUrl.updateValueAndValidity()
+                this.eventDetails.controls.resourceUrl.updateValueAndValidity()
+                this.eventDetails.controls.resourceUploadType.updateValueAndValidity()
+              }
             }
           }
         },
@@ -202,6 +242,47 @@ export class EventBasicDetailsComponent implements OnInit, OnChanges {
     }
   }
 
+  preventDefaultCDK(event: DragEvent, isEneter = ''): void {
+    event.preventDefault()
+    event.stopPropagation()
+    if (isEneter) {
+      const dropArea = event.target as HTMLElement
+      dropArea.style.opacity = isEneter === 'enter' ? '0.5' : '1'
+    }
+  }
+
+  onDrop(event: DragEvent): void {
+    this.preventDefaultCDK(event, 'leave')
+
+    const files = event.dataTransfer?.files
+    if (files) {
+      this.onVideoSelected(files)
+    }
+  }
+
+  onVideoSelected(files: any) {
+    let videoPath: any = ''
+    if (files.length === 0) {
+      return
+    }
+    const mimeType = files[0].type
+    if (!mimeType.startsWith('video/')) {
+      this.openSnackBar('Only video files are supported')
+      return
+    }
+    videoPath = files[0]
+
+    const MAX_VIDEO_SIZE = 400 * 1024 * 1024
+
+    if (videoPath.size > MAX_VIDEO_SIZE) {
+      this.openSnackBar('Selected video size exceeds the 400MB limit')
+      videoPath = ''
+      return
+    }
+    const mediaType = 'video'
+    this.saveImage(videoPath, mediaType)
+  }
+
   showValidationMsg(controlName: string, validationType: string): Boolean {
     let showMsg = false
     const control = _.get(this.eventDetails, `controls.${controlName}`)

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

@@ -34,7 +34,7 @@
     <div class="flex flex-row gap-6 fixed-width">
       <div class="toc-content">
         <div class="pb-4 lg:py-4">
-          <mat-tab-group (selectedTabChange)="handleTabChange($event)" [selectedIndex]="selectedTabIndex">
+          <mat-tab-group>
             <mat-tab label="About">
               <ng-container>
                 <div class="flex flex-col my-4 px-4 gap-5">

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

@@ -2,7 +2,6 @@ import { Component, Input } from '@angular/core'
 import { speaker } from '../../models/events.model'
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
 import { AddSpeakersComponent } from '../../dialogs/add-speakers/add-speakers.component'
-import { MatLegacySnackBar } from '@angular/material/legacy-snack-bar'
 
 @Component({
   selector: 'ws-app-speakers',
@@ -16,49 +15,30 @@ export class SpeakersComponent {
 
   constructor(
     private dialog: MatDialog,
-    private matSnackBar: MatLegacySnackBar,
   ) { }
 
   openAddSpeakerPopu() {
-    const dialogRef = this.dialog.open(AddSpeakersComponent, {
+    this.dialog.open(AddSpeakersComponent, {
       panelClass: 'dialog_sidenav',
       width: '600px',
       data: {
-        rootOrgId: this.userProfile ? this.userProfile.rootOrgId : ''
-      }
-    })
-
-    dialogRef.afterClosed().subscribe((speakerDetails: speaker) => {
-      if (speakerDetails) {
-        if (this.speakersList.find((addedSpeaker: any) => addedSpeaker.email.toLowerCase() === speakerDetails.email.toLocaleLowerCase())) {
-          this.speakersList.push(speakerDetails)
-        } else {
-          this.openSnackBar('There is already a speaker with the same email. Please add the speaker with a different email.')
-        }
+        rootOrgId: this.userProfile ? this.userProfile.rootOrgId : '',
+        speakersList: this.speakersList
       }
     })
   }
 
-  editSpeaker(index: number) {
-    if (this.speakersList && this.speakersList[index]) {
-      const dialogRef = this.dialog.open(AddSpeakersComponent, {
+  editSpeaker(speakerIndex: number) {
+    if (this.speakersList && this.speakersList[speakerIndex]) {
+      this.dialog.open(AddSpeakersComponent, {
         panelClass: 'dialog_sidenav',
         data: {
           rootOrgId: this.userProfile ? this.userProfile.rootOrgId : '',
-          speaker: this.speakersList[index]
+          speakerIndex: speakerIndex,
+          speakersList: this.speakersList
         },
         width: '600px'
       })
-
-      dialogRef.afterClosed().subscribe((speakerDetails: speaker) => {
-        if (speakerDetails) {
-          if (this.speakersList.find((addedSpeaker: any) => addedSpeaker.email.toLowerCase() === speakerDetails.email.toLocaleLowerCase())) {
-            this.speakersList[index] = speakerDetails
-          } else {
-            this.openSnackBar('There is already a speaker with the same email. Please update speaker with a different email.')
-          }
-        }
-      })
     }
   }
 
@@ -68,7 +48,4 @@ export class SpeakersComponent {
     }
   }
 
-  private openSnackBar(message: string) {
-    this.matSnackBar.open(message)
-  }
 }