Merge pull request #174 from mansurskTarento/events

Events
KB-iGOT · Feb 14, 2025 · 7212498 · 7212498
2 parents b876aa0 + 20ada53
commit 7212498
Show file tree

Hide file tree

Showing 75 changed files with 6,221 additions and 3 deletions.
diff --git a/project/ws/app/src/lib/routes/home/home.rounting.module.ts b/project/ws/app/src/lib/routes/home/home.rounting.module.ts
@@ -325,6 +325,10 @@ const routes: Routes = [
           module: 'Home',
         },
       },
+      {
+        path: 'events',
+        loadChildren: () => import('./routes/events-2/events-2.module').then(m => m.Events2Module),
+      },
       {
         path: 'reports-section',
         component: ReportsSectionComponent,

diff --git a/project/ws/app/src/lib/routes/home/resolvers/config-resolve.service.ts b/project/ws/app/src/lib/routes/home/resolvers/config-resolve.service.ts
@@ -3,8 +3,7 @@ import { Injectable, SkipSelf } from '@angular/core'
 import { Observable, of } from 'rxjs'
 import { ConfigurationsService } from '@sunbird-cb/utils'
 @Injectable()
-export class ConfigResolveService
-   {
+export class ConfigResolveService {
   constructor(
     @SkipSelf() private confService: ConfigurationsService,
   ) { }

diff --git a/...lib/routes/home/routes/events-2/components/card-competency/card-competency.component.html b/...lib/routes/home/routes/events-2/components/card-competency/card-competency.component.html
@@ -0,0 +1,28 @@
+<div [@expandCollapse]="isExpanded ? 'expanded' : 'collapsed'" [ngClass]="{'expanded': isExpanded}">
+  <div class="competency-passbook-theme"
+    [ngClass]="{'behavioural': (widgetData?.competencyArea?.toLowerCase() === 'behavioural' || widgetData?.competencyArea?.toLowerCase() === 'behavioral'), 'functional': widgetData?.competencyArea?.toLowerCase() === 'functional', 'domain': widgetData?.competencyArea?.toLowerCase() === 'domain', 'shadow-md': isExpanded}">
+    <div class="detail">
+      <div class="flex flex-col gap-2">
+        <div class="text-base font-bold ellipsis" title="{{ widgetData?.content?.key }}">{{ widgetData?.content?.key }}
+        </div>
+        <div class="flex flex-wrap gap-4 chip-container">
+          <ng-container *ngFor="let subTheme of widgetData?.content?.value; let i = index">
+            <div class="chip rounded-full text-xs"
+              [ngClass]="{'hidden': (i >= 1 && !isExpanded), 'chip-ellipsis': !isExpanded && widgetData?.content?.value?.length > 1 }"
+              title="{{ subTheme }}">
+              {{ subTheme }}
+            </div>
+          </ng-container>
+          <div class="flex items-center ws-mat-default-text underline cursor-pointer text-xs"
+            *ngIf="widgetData?.content?.value?.length > 1 && !isExpanded" (click)="handleToggleSize()">
+            View more
+          </div>
+          <div class="flex items-center ws-mat-default-text underline cursor-pointer text-xs" *ngIf="isExpanded"
+            (click)="handleToggleSize()">
+            View less
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/...lib/routes/home/routes/events-2/components/card-competency/card-competency.component.scss b/...lib/routes/home/routes/events-2/components/card-competency/card-competency.component.scss
@@ -0,0 +1,79 @@
+.behavioural {
+    background-color: #F8B861;
+}
+
+.functional {
+    background-color: #E24577;
+}
+
+.domain {
+    background-color: #7B47A4;
+}
+
+.competency-passbook-theme {
+    width: 100%;
+    max-width: 344px;
+    min-width: 320px;
+    height: 92px;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 12px;
+    border-bottom-left-radius: 12px;
+    border-top-left-radius: 8px;
+}
+
+.ellipsis {
+    white-space: nowrap;
+    width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.detail {
+    width: 100%;
+    max-width: 344px;
+    background-color: rgb(255, 255, 255);
+    border-radius: 8px;
+    position: relative;
+    top: 4px;
+    height: inherit;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+
+    &>div {
+        padding: 12px 16px 16px 16px;
+    }
+
+    .chip-container {
+        .chip {
+            border: 1px solid #1B4CA1;
+            color: #1B4CA1;
+            line-height: 14px;
+            padding: 4px 8px;
+            white-space: normal;
+        }
+    }
+}
+
+.chip-ellipsis {
+    white-space: nowrap !important;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.expanded {
+    padding-bottom: 12px;
+
+    .competency-passbook-theme {
+        max-width: 372px;
+        width: 100%;
+        min-height: 92px;
+        height: auto;
+
+        .detail {
+            width: 100%;
+            max-width: inherit;
+            min-height: inherit;
+            height: inherit;
+        }
+    }
+}
diff --git a/.../routes/home/routes/events-2/components/card-competency/card-competency.component.spec.ts b/.../routes/home/routes/events-2/components/card-competency/card-competency.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardCompetencyComponent } from './card-competency.component';
+
+describe('CardCompetencyComponent', () => {
+  let component: CardCompetencyComponent;
+  let fixture: ComponentFixture<CardCompetencyComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CardCompetencyComponent]
+    });
+    fixture = TestBed.createComponent(CardCompetencyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...c/lib/routes/home/routes/events-2/components/card-competency/card-competency.component.ts b/...c/lib/routes/home/routes/events-2/components/card-competency/card-competency.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { trigger, state, style, animate, transition } from '@angular/animations'
+// import { NsWidgetResolver, WidgetBaseComponent } from '@sunbird-cb/resolver'
+// import { NsCardContent } from '@sunbird-cb/utils/lib/services/card-content.model'
+// import { NsCardContent } from '../card-content-v2/card-content-v2.model'
+// import { NsWidgetResolver, WidgetBaseComponent } from '@ws-widget/resolver'
+
+@Component({
+  selector: 'ws-widget-card-competency',
+  templateUrl: './card-competency.component.html',
+  styleUrls: ['./card-competency.component.scss'],
+  animations: [
+    trigger('expandCollapse', [
+      state('collapsed', style({
+        height: '104px',
+        width: '320px',
+      })),
+      state('expanded', style({
+        minHeight: '120px',
+        width: '372px',
+        height: 'auto',
+      })),
+      transition('collapsed <=> expanded', [
+        animate('0.5s'),
+      ]),
+    ]),
+  ],
+})
+
+export class CardCompetencyComponent implements OnInit {
+
+  @Input() widgetData!: any
+  @Input() competencyArea = ''
+  isExpanded = false
+
+  constructor() {
+    // super()
+  }
+
+  ngOnInit() {
+  }
+
+  handleToggleSize(_viewMore: any): void {
+    this.isExpanded = !this.isExpanded
+  }
+}
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
@@ -0,0 +1,66 @@
+<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>
+      <span class="event-text">Event</span>
+      <mat-icon class="chevron-arrow">chevron_right</mat-icon>
+      <span class="event-builder-text">Event Builder</span>
+    </div>
+    <div class="flex gap-4">
+      <ng-container *ngIf="openMode === 'edit'">
+        <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">
+        <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="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>
+  </div>
+
+  <mat-stepper labelPosition="bottom" [selectedIndex]="currentStepperIndex"
+    (selectionChange)="onSelectionChange($event)" class="mx-10" #stepper>
+    <mat-step [stepControl]="eventDetailsForm">
+      <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>
+      <ng-template matStepLabel>Add Speaker</ng-template>
+      <ws-app-speakers [speakersList]="speakersList" [openMode]="openMode"
+        [userProfile]="userProfile"></ws-app-speakers>
+    </mat-step>
+
+    <mat-step>
+      <ng-template matStepLabel>Add Material</ng-template>
+      <ws-app-event-materials [materialsList]="materialsList" [openMode]="openMode"></ws-app-event-materials>
+    </mat-step>
+
+    <mat-step>
+      <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">
+      <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>
diff --git a/...p/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.scss b/...p/src/lib/routes/home/routes/events-2/components/create-event/create-event.component.scss
@@ -0,0 +1,89 @@
+.breadcrum {
+  height: 65px;
+  border-bottom: 1px solid #00000014;
+
+  .back-arrow {
+    color: #000000DE !important;
+    font-size: 24px;
+    cursor: pointer;
+  }
+
+  .event-text {
+    /* stylelint-disable */
+    font: 400 14px Lato;
+    /* stylelint-enable */
+  }
+
+  .chevron-arrow {
+    color: #1B4CA1;
+  }
+
+  .event-builder-text {
+    /* stylelint-disable */
+    font: 700 14px Lato;
+    /* stylelint-enable */
+    color: #1B4CA1;
+  }
+
+  .save-and-exit {
+    width: 140px;
+    height: 32px;
+    border-radius: 17px;
+    border: 1px solid #1B4CA1;
+    color: #1B4CA1 !important;
+    /* stylelint-disable */
+    font: 700 14px Lato;
+    /* stylelint-enable */
+  }
+
+  .next-btn {
+    width: 65px;
+    height: 32px;
+    border-radius: 17px;
+    background-color: #1B4CA1 !important;
+    color: #FFFFFF !important;
+    /* stylelint-disable */
+    font: 700 14px Lato;
+    /* stylelint-enable */
+  }
+
+  .publish-btn {
+    height: 32px;
+    border-radius: 17px;
+    background-color: #1B4CA1 !important;
+    color: #FFFFFF !important;
+    /* stylelint-disable */
+    font: 700 14px Lato;
+    /* stylelint-enable */
+    padding: 0px 10px;
+  }
+}
+
+:host ::ng-deep .events {
+  .mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container {
+    width: calc(100% - 400px);
+    min-width: 800px;
+    align-self: center;
+  }
+  .mat-step-icon {
+    width: 25px;
+    height: 25px;
+    border-radius: 12.5px;
+    color: #FFFFFF;
+    /* stylelint-disable */
+    font: 700 14px Lato;
+    /* stylelint-enable */
+  }
+
+  .mat-step-icon-selected {
+    background-color: #F3962F!important;
+  }
+
+  // .mat-step-icon-completed {
+  //   background-color: #1D8923!important;
+  // }
+
+  .mat-step-icon:not(.mat-step-icon-selected):not(.mat-step-icon-completed) {
+    background-color: #96ADD4!important;
+  }
+}
diff --git a/...rc/lib/routes/home/routes/events-2/components/create-event/create-event.component.spec.ts b/...rc/lib/routes/home/routes/events-2/components/create-event/create-event.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateEventComponent } from './create-event.component';
+
+describe('CreateEventComponent', () => {
+  let component: CreateEventComponent;
+  let fixture: ComponentFixture<CreateEventComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateEventComponent]
+    });
+    fixture = TestBed.createComponent(CreateEventComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});