-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2562 from IDEMSInternational/feature-kw-check-in-…
…component Kuwait Theme: Activity Check-in component
- Loading branch information
Showing
7 changed files
with
291 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
.../components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| @if (locked()) { | ||
| <div | ||
| class="activity-container" | ||
| [attr.data-language-direction]="templateTranslateService.languageDirection()" | ||
| > | ||
| @if (params.countdownStartDate) { | ||
| <div class="progress-tracker"> | ||
| <div class="progress-bar-container"> | ||
| <div | ||
| class="progress-bar" | ||
| [ngStyle]="{ | ||
| width: progressPercentage() + '%' | ||
| }" | ||
| ></div> | ||
| </div> | ||
| <div class="countdown-text">{{ countdownText() }}</div> | ||
| </div> | ||
| } | ||
|
|
||
| <div class="image"> | ||
| <img [src]="params.lockedImageAsset | plhAsset" /> | ||
| </div> | ||
| <div class="details"> | ||
| <div class="title"> | ||
| <h4>{{ params.title }}</h4> | ||
| </div> | ||
| <div class="icon"> | ||
| <img [src]="params.lockedIconAsset | plhAsset" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } @else { | ||
| <div | ||
| class="activity-container" | ||
| (click)="triggerActions('click')" | ||
| [attr.data-language-direction]="templateTranslateService.languageDirection()" | ||
| > | ||
| <div class="wrapper unlocked"> | ||
| <div class="image"> | ||
| <img [src]="params.unlockedImageAsset | plhAsset" /> | ||
| </div> | ||
| <div class="details"> | ||
| <div class="title"> | ||
| <h4>{{ params.title }}</h4> | ||
| </div> | ||
| <div class="icon"> | ||
| <img [src]="params.unlockedIconAsset | plhAsset" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } |
85 changes: 85 additions & 0 deletions
85
.../components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| .activity-container { | ||
| max-width: 168px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| .progress-tracker { | ||
| width: 100%; | ||
| padding: 0 12px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: center; | ||
| .progress-bar-container { | ||
| width: 40%; | ||
| background-color: var(--ion-color-gray-200); | ||
| height: 14px; | ||
| border-radius: 50px; | ||
| overflow: hidden; | ||
| .progress-bar { | ||
| border-radius: 50px; | ||
| height: 100%; | ||
| background-color: #e0b160; | ||
| transition: | ||
| width 0.5s ease, | ||
| background-color 0.5s ease; | ||
| } | ||
| } | ||
| .countdown-text { | ||
| margin-left: 8px; | ||
| color: var(--ion-color-gray-600); | ||
| font-weight: var(--font-weight-medium); | ||
| } | ||
| } | ||
| .image { | ||
| height: 150px; | ||
| img { | ||
| padding: 4px; | ||
| height: 100%; | ||
| width: 100%; | ||
| object-fit: contain; | ||
| } | ||
| } | ||
| .details { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: fit-content; | ||
| margin: 0 auto; | ||
| .title h4 { | ||
| text-align: center; | ||
| color: var(--ion-color-gray-600); | ||
| font-weight: var(--font-weight-bold); | ||
| } | ||
| .icon { | ||
| display: flex; | ||
| align-items: center; | ||
| margin: 0 4px; | ||
| img { | ||
| width: 28px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .activity-container[data-language-direction~="rtl"] { | ||
| .progress-tracker { | ||
| .progress-bar-container { | ||
| margin-right: 0; | ||
| margin-left: 6px; | ||
| } | ||
| } | ||
| .image { | ||
| -webkit-transform: scaleX(-1); | ||
| transform: scaleX(-1); | ||
| } | ||
| .details { | ||
| .icon { | ||
| img { | ||
| -webkit-transform: scaleX(-1); | ||
| transform: scaleX(-1); | ||
| } | ||
| } | ||
| } | ||
| } |
24 changes: 24 additions & 0 deletions
24
...mponents/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; | ||
| import { IonicModule } from "@ionic/angular"; | ||
|
|
||
| import { PlhActivityCheckInComponent } from "./activity-check-in.component"; | ||
|
|
||
| describe("ActivityCheckInComponent", () => { | ||
| let component: PlhActivityCheckInComponent; | ||
| let fixture: ComponentFixture<PlhActivityCheckInComponent>; | ||
|
|
||
| beforeEach(waitForAsync(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [PlhActivityCheckInComponent], | ||
| imports: [IonicModule.forRoot()], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(PlhActivityCheckInComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| })); | ||
|
|
||
| it("should create", () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
124 changes: 124 additions & 0 deletions
124
...es/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import { Component, computed, OnInit, signal } from "@angular/core"; | ||
| import { addDays, differenceInCalendarDays, isValid, parseISO, startOfDay } from "date-fns"; | ||
| import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; | ||
| import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service"; | ||
| import { | ||
| getNumberParamFromTemplateRow, | ||
| getParamFromTemplateRow, | ||
| getStringParamFromTemplateRow, | ||
| } from "src/app/shared/utils"; | ||
|
|
||
| interface IActivityCheckInParams { | ||
| /* TEMPLATE PARAMETER: "title". The title attached at the bottom of the component */ | ||
| title?: string; | ||
| /* TEMPLATE PARAMETER: "locked_icon_asset". The icon that shows when the activity is locked */ | ||
| lockedIconAsset?: string; | ||
| /* TEMPLATE PARAMETER: "locked_image_asset". The illustration that shows when the activity is locked */ | ||
| lockedImageAsset?: string; | ||
| /* TEMPLATE PARAMETER: "unlocked_icon_asset". The icon that shows when the activity is unlocked */ | ||
| unlockedIconAsset?: string; | ||
| /* TEMPLATE PARAMETER: "unlocked_image_asset". The illustration that shows when the activity is locked */ | ||
| unlockedImageAsset?: string; | ||
| /* TEMPLATE PARAMETER: "countdown_start_date". The date when the countdown is initially started */ | ||
| countdownStartDate?: Date; | ||
| /* TEMPLATE PARAMETER: "countdown_days". The number of days after the start date that the activity is unlocked */ | ||
| countDownDays?: number; | ||
| /* TEMPLATE PARAMETER: "countdown_text_list". A list of text strings relating to the number of days left to countdown, in order from fewest to most */ | ||
| countdownTextList?: string[]; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: "plh-activity-check-in", | ||
| templateUrl: "./activity-check-in.component.html", | ||
| styleUrls: ["./activity-check-in.component.scss"], | ||
| }) | ||
| export class PlhActivityCheckInComponent extends TemplateBaseComponent implements OnInit { | ||
| params: Partial<IActivityCheckInParams> = {}; | ||
|
|
||
| daysUntilUnlock = signal(Infinity); | ||
| locked = computed(() => { | ||
| // If no start date is provided, activity should be locked | ||
| if (!this.params.countdownStartDate) return true; | ||
| return this.daysUntilUnlock() && this.daysUntilUnlock() > 0; | ||
| }); | ||
| countdownText = computed(() => { | ||
| const targetIndex = Math.min( | ||
| this.daysUntilUnlock() - 1, | ||
| this.params.countdownTextList.length - 1 | ||
| ); | ||
| return this.params.countdownTextList[targetIndex]; | ||
| }); | ||
| progressPercentage = computed(() => { | ||
| if (this.daysUntilUnlock() === Infinity) return 0; | ||
| return ( | ||
| ((this.params.countDownDays - (this.daysUntilUnlock() || 0)) / this.params.countDownDays) * | ||
| 100 | ||
| ); | ||
| }); | ||
|
|
||
| constructor(public templateTranslateService: TemplateTranslateService) { | ||
| super(); | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| this.getParams(); | ||
| this.calculateDaysUntilUnlock(); | ||
| } | ||
|
|
||
| private getParams() { | ||
| this.params.title = getStringParamFromTemplateRow(this._row, "title", null); | ||
| this.params.lockedIconAsset = getStringParamFromTemplateRow( | ||
| this._row, | ||
| "locked_icon_asset", | ||
| null | ||
| ); | ||
| this.params.lockedImageAsset = getStringParamFromTemplateRow( | ||
| this._row, | ||
| "locked_image_asset", | ||
| null | ||
| ); | ||
| this.params.unlockedIconAsset = getStringParamFromTemplateRow( | ||
| this._row, | ||
| "unlocked_icon_asset", | ||
| null | ||
| ); | ||
| this.params.unlockedImageAsset = getStringParamFromTemplateRow( | ||
| this._row, | ||
| "unlocked_image_asset", | ||
| null | ||
| ); | ||
| this.params.countDownDays = getNumberParamFromTemplateRow(this._row, "countdown_days", 6); | ||
| const countdownStartDate = getParamFromTemplateRow(this._row, "countdown_start_date", null); | ||
| let parsedDate = null; | ||
| if (countdownStartDate) { | ||
| const attemptDate = new Date(countdownStartDate); | ||
| if (isValid(attemptDate)) { | ||
| parsedDate = attemptDate; | ||
| } else { | ||
| const attemptISO = parseISO(countdownStartDate); | ||
| if (isValid(attemptISO)) { | ||
| parsedDate = attemptISO; | ||
| } | ||
| } | ||
| } | ||
| this.params.countdownStartDate = parsedDate; | ||
|
|
||
| let countdownTextList = getParamFromTemplateRow(this._row, "countdown_text_list", []); | ||
| if (typeof countdownTextList === "string") { | ||
| countdownTextList = countdownTextList.split(",").map((text) => text.trim()); | ||
| } | ||
| this.params.countdownTextList = countdownTextList; | ||
| } | ||
|
|
||
| private calculateDaysUntilUnlock() { | ||
| if (this.params.countDownDays === 0) this.daysUntilUnlock.set(0); | ||
| if (this.params.countdownStartDate && this.params.countDownDays) { | ||
| const unlockDate = addDays(this.params.countdownStartDate, this.params.countDownDays); | ||
| const daysRemaining = differenceInCalendarDays( | ||
| startOfDay(unlockDate), | ||
| startOfDay(new Date()) | ||
| ); | ||
| this.daysUntilUnlock.set(Math.max(daysRemaining, 0)); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters