Skip to content

Commit

Permalink
fixing video issue and view mode issues and sorting
Browse files Browse the repository at this point in the history
  • Loading branch information
@mansurskTarento
mansurskTarento committed Feb 18, 2025
1 parent 826fd76 commit 1ba8cf5
Show file tree
Hide file tree
Showing 7 changed files with 91 additions and 78 deletions.
2 changes: 1 addition & 1 deletion ...p/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<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="this.currentStepperIndex === 3 || this.currentStepperIndex === 4">
<ng-container *ngIf="currentStepperIndex >= 3 && openMode === 'edit'">
<button mat-raised-button class="flex items-center publish-btn" (click)="publish()">Send to Publisher</button>
</ng-container>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...app/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,6 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
eventCategory: _.get(this.eventDetails, 'resourceType', ''),
streamType: _.get(this.eventDetails, 'streamType', ''),//new key to add
startDate: startDate ? new Date(startDate) : startDate,
endDate: startDate ? new Date(startDate) : startDate,
startTime: _.get(this.eventDetails, 'startTime', ''),
endTime: _.get(this.eventDetails, 'endTime', ''),
registrationLink: _.get(this.eventDetails, 'registrationLink', ''),
Expand Down Expand Up @@ -250,6 +249,7 @@ export class CreateEventComponent implements OnInit, AfterViewInit {
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['startTime'] = startTime
eventDetails['endTime'] = endTime
eventDetails['registrationLink'] = eventBaseDetails.registrationLink
Expand Down
12 changes: 8 additions & 4 deletions ...utes/home/routes/events-2/components/event-competencies/event-competencies.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<div class="competency-details flex-grow">
<div class="mt-4 flex justify-between">
<div class="title">Add Competency</div>
<div class="add-theme" (click)="showAddCompetencyDialog()">Add Competency</div>
<ng-container *ngIf="openMode === 'edit'">
<button mat-button class="add-theme" (click)="showAddCompetencyDialog()">Add Competency</button>
</ng-container>
</div>
<div class="add-theme-sec mt-4" *ngIf="competencies?.length">
<div class="" *ngFor="let competency of competencies, let index=c">
Expand All @@ -16,9 +18,11 @@
<div>{{competency.competencyAreaName}}</div>
</div>
</div>
<div>
<mat-icon class="cursor-pointer" (click)="removeNode(competency)">delete</mat-icon>
</div>
<ng-container *ngIf="openMode === 'edit'">
<div>
<mat-icon class="cursor-pointer" (click)="removeNode(competency)">delete</mat-icon>
</div>
</ng-container>
</div>
<ng-container *ngIf="competency?.themes?.length">
<div class="themes-card" *ngFor="let theme of competency.themes, let i=index">
Expand Down
131 changes: 66 additions & 65 deletions ...p/src/lib/routes/home/routes/events-2/components/events-table/events-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,81 +13,82 @@

<div class="example-table-container">
<ng-container *ngIf="!showLoader; else tableLoader">
<mat-table #table matSort [dataSource]="dataSource" class="example-table table1 responsiveTable"
*ngIf="dataSource.filteredData.length > 0">
<ng-container *ngIf="dataSource.filteredData.length > 0">
<mat-table #table matSort [dataSource]="dataSource" class="example-table table1 responsiveTable">

<ng-container matColumnDef="{{col.key}}" *ngFor="let col of tableColumns">
<ng-container [ngSwitch]="col.cellType">
<ng-container *ngSwitchCase="'text'">
<mat-header-cell *matHeaderCellDef mat-sort-header class="table-header-text"> {{col.displayName}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="py-2 flex flex-row gap-2">
<ng-container *ngIf="col.imageKey">
<img class="imageCell py-2" [src]="element[col.imageKey]" alt="logo">
</ng-container>
<span [ngClass]="col.cellClass" class="cources-table-cell">
{{element[col.key]}}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="{{col.key}}" *ngFor="let col of tableColumns">
<ng-container [ngSwitch]="col.cellType">
<ng-container *ngSwitchCase="'text'">
<mat-header-cell *matHeaderCellDef mat-sort-header class="table-header-text"> {{col.displayName}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="py-2 flex flex-row gap-2">
<ng-container *ngIf="col.imageKey">
<img class="imageCell py-2" [src]="element[col.imageKey]" alt="logo">
</ng-container>
<span [ngClass]="col.cellClass" class="cources-table-cell">
{{element[col.key]}}
</span>
</mat-cell>
</ng-container>

<ng-container *ngSwitchCase="'date'">
<mat-header-cell *matHeaderCellDef mat-sort-header class="table-header-text table-date-header">
{{col.displayName}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="table-date-column">
<span [ngClass]="col.cellClass" class="cources-table-cell">
{{element[col.key]}}
</span>
</mat-cell>
</ng-container>
<ng-container *ngSwitchCase="'date'">
<mat-header-cell *matHeaderCellDef class="table-header-text table-date-header">
{{col.displayName}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="table-date-column">
<span [ngClass]="col.cellClass" class="cources-table-cell">
{{element[col.key]}}
</span>
</mat-cell>
</ng-container>

<ng-container *ngSwitchCase="'number'">
<mat-header-cell *matHeaderCellDef mat-sort-header class="table-header-text table-number-cell">
{{col.displayName}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="table-number-cell">
<span [ngClass]="col.cellClass" class="cources-table-cell">
{{element[col.key]}}
</span>
</mat-cell>
</ng-container>
<ng-container *ngSwitchCase="'number'">
<mat-header-cell *matHeaderCellDef mat-sort-header class="table-header-text table-number-cell">
{{col.displayName}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="table-number-cell">
<span [ngClass]="col.cellClass" class="cources-table-cell">
{{element[col.key]}}
</span>
</mat-cell>
</ng-container>

<ng-container *ngSwitchCase="'menu'">
<mat-header-cell *matHeaderCellDef class="table-header-text flex justify-center table-menu-header">
{{col.displayName}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="justify-center table-menu-column">
<ng-container *ngSwitchCase="'menu'">
<mat-header-cell *matHeaderCellDef class="table-header-text flex justify-center table-menu-header">
{{col.displayName}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="justify-center table-menu-column">

<mat-icon mat-icon-button i18n-aria-label aria-label="action items" [matMenuTriggerFor]="cardMenu"
class="horizontalMenu"> more_horiz
</mat-icon>
<mat-menu #cardMenu="matMenu">
<ng-template matMenuContent>
<ng-container *ngFor="let item of menuItems">
<div mat-menu-item [ngClass]="{'disableMenu': element['disableMenu']}"
[disabled]="element['disableMenu'] === true" (click)="buttonClick(item.action, element)">
<button class="flex item-btn items-center" mat-icon-button i18n-aria-label
aria-label="Analytics">
<mat-icon *ngIf="item.icon" class="menu-item-icon">{{item.icon}}</mat-icon>
{{item.btnText}}
</button>
</div>
</ng-container>
</ng-template>
</mat-menu>
</mat-cell>
</ng-container>
<mat-icon mat-icon-button i18n-aria-label aria-label="action items" [matMenuTriggerFor]="cardMenu"
class="horizontalMenu"> more_horiz
</mat-icon>
<mat-menu #cardMenu="matMenu">
<ng-template matMenuContent>
<ng-container *ngFor="let item of menuItems">
<div mat-menu-item [ngClass]="{'disableMenu': element['disableMenu']}"
[disabled]="element['disableMenu'] === true" (click)="buttonClick(item.action, element)">
<button class="flex item-btn items-center" mat-icon-button i18n-aria-label
aria-label="Analytics">
<mat-icon *ngIf="item.icon" class="menu-item-icon">{{item.icon}}</mat-icon>
{{item.btnText}}
</button>
</div>
</ng-container>
</ng-template>
</mat-menu>
</mat-cell>
</ng-container>

</ng-container>
</ng-container>
</ng-container>

<mat-header-row *matHeaderRowDef="columnsList"></mat-header-row>
<mat-header-row *matHeaderRowDef="columnsList"></mat-header-row>

<mat-row *matRowDef="let row; columns: columnsList">
</mat-row>
<mat-row *matRowDef="let row; columns: columnsList">
</mat-row>

</mat-table>
</mat-table>
</ng-container>
<div class="no-cbp-data" *ngIf="dataSource.filteredData.length === 0 && searchControl.value">
<div class="mat-subheading-1 margin-remove">No results found</div>
<div>Try adjusting your search to find what you are looking for.</div>
Expand Down
9 changes: 7 additions & 2 deletions ...app/src/lib/routes/home/routes/events-2/components/events-table/events-table.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
import { FormControl } from '@angular/forms'
import { PageEvent } from '@angular/material/paginator'
import { MatTableDataSource } from '@angular/material/table'
import _ from 'lodash'
import { debounceTime } from 'rxjs/operators'
import { events } from '../../models/events.model'
import { MatSort } from '@angular/material/sort'

@Component({
selector: 'ws-app-events-table',
templateUrl: './events-table.component.html',
styleUrls: ['./events-table.component.scss']
})
export class EventsTableComponent implements OnInit, OnChanges {
@ViewChild(MatSort, { static: false }) sort!: MatSort
@Input() tableData!: events.tableData
@Input() data?: []
@Input() paginationDetails: events.pagination = {
Expand Down Expand Up @@ -58,8 +60,11 @@ export class EventsTableComponent implements OnInit, OnChanges {
if (changes.tableData) {
this.getFinalColumns()
}
if (changes.data) {
if (changes.data && this.dataSource) {
this.dataSource.data = this.data
setTimeout(() => {
this.dataSource.sort = this.sort
}, 10)
}
}

Expand Down
9 changes: 5 additions & 4 deletions .../src/lib/routes/home/routes/events-2/dialogs/youtube-player/youtube-player.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
<div class="title font-bold">{{eventData?.name}}</div>
<mat-icon class="pointer" (click)="closeDialog()">close</mat-icon>
</div>
{{videoLink | json}}
<div *ngIf="!youtubeURL" class="pb-4">
<video width="100%" height="500px" disablePictureInPicture="true" controls controlsList="nodownload"
[autoplay]="true">
<source [src]="videoLink.changingThisBreaksApplicationSecurity" type="video/mp4">
</video>
</div>
<div [hidden]='!youtubeURL' id='youtubeTag' class="pb-4">
<iframe class="uploadedVideo" width="100%" [src]="iframeSrc"></iframe>
</div>
<ng-container *ngIf="youtubeURL">
<div id='youtubeTag' class="pb-4">
<iframe class="uploadedVideo" width="100%" [src]="iframeSrc"></iframe>
</div>
</ng-container>
4 changes: 3 additions & 1 deletion project/ws/app/src/lib/routes/home/routes/events-2/events-2.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker'
import { RejectionReasonComponent } from './dialogs/rejection-reason/rejection-reason.component'
import { CarouselModule } from 'ngx-owl-carousel-o'
import { DragDropModule } from '@angular/cdk/drag-drop'
import { MatSortModule } from '@angular/material/sort'


@NgModule({
Expand Down Expand Up @@ -94,7 +95,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop'
WidgetResolverModule,
NgxMaterialTimepickerModule,
CarouselModule,
DragDropModule
DragDropModule,
MatSortModule
],
providers: [
DatePipe,
Expand Down

0 comments on commit 1ba8cf5

Please sign in to comment.