forked from surveyjs/survey-library
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Work for surveyjs/survey-creator#3623: rename SurveyAngularModule -> SurveyModule * Angular: implement timer panel * Angular: fix PopupSurveyComponent
- Loading branch information
Showing
12 changed files
with
172 additions
and
43 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
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
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
21 changes: 21 additions & 0 deletions
21
packages/survey-angular-ui/src/components/timer-panel/timer-panel.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,21 @@ | ||
| import { Component, Input } from "@angular/core"; | ||
| import { Base, SurveyTimerModel } from "survey-core"; | ||
| import { BaseAngular } from "../../base-angular"; | ||
|
|
||
| @Component( | ||
| { | ||
| selector: "sv-timer-panel", | ||
| template: "<div class='model.survey.getCss().timerRoot'>{{model.text}}</div>" | ||
| } | ||
| ) | ||
|
|
||
| export class TimerPanelComponent extends BaseAngular<SurveyTimerModel> { | ||
| @Input() model!: SurveyTimerModel; | ||
|
|
||
| protected getStateElement(): Base { | ||
| return this.model; | ||
| } | ||
| protected getModel(): SurveyTimerModel { | ||
| return this.model; | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| <div *ngIf="!!model && model.isShowing" [class]="model.cssRoot" style="position: fixed; bottom: 3px; right: 10px;" [style.width]="model.renderedWidth" [style.maxWidth]="model.renderedWidth"> | ||
| <div [class]="model.cssHeaderRoot"> | ||
| <span (click)="model.changeExpandCollapse()" style="width: 100%; cursor: pointer;"> | ||
| <span style="padding-right:10px" [class]="model.cssHeaderTitle">{{model.locTitle.renderedHtml}}</span> | ||
| <span aria-hidden="true" [class]="model.cssButton"></span> | ||
| <div *ngIf="!!popup && popup.isShowing" [class]="popup.cssRoot" style="position: fixed; bottom: 3px; right: 10px;" [style.width]="popup.renderedWidth" [style.maxWidth]="popup.renderedWidth"> | ||
| <div [class]="popup.cssHeaderRoot"> | ||
| <span (click)="popup.changeExpandCollapse()" style="width: 100%; cursor: pointer;"> | ||
| <span style="padding-right:10px" [class]="popup.cssHeaderTitle">{{popup.locTitle.renderedHtml}}</span> | ||
| <span aria-hidden="true" [class]="popup.cssButton"></span> | ||
| </span> | ||
| <span *ngIf="model.isExpanded" (click)="model.changeExpandCollapse()" style="float: right; cursor: pointer;"> | ||
| <span style="padding-right:10px" [class]="model.cssHeaderTitle">X</span> | ||
| <span *ngIf="popup.isExpanded" (click)="popup.changeExpandCollapse()" style="float: right; cursor: pointer;"> | ||
| <span style="padding-right:10px" [class]="popup.cssHeaderTitle">X</span> | ||
| </span> | ||
| </div> | ||
| <div *ngIf="model.isExpanded" [class]="model.cssBody"> | ||
| <survey [model]="model.survey"></survey> | ||
| <div *ngIf="popup.isExpanded" [class]="popup.cssBody"> | ||
| <survey [model]="popup.survey"></survey> | ||
| </div> | ||
| </div> |
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 |
|---|---|---|
| @@ -1,25 +1,35 @@ | ||
| import { ChangeDetectorRef, Component, Input } from "@angular/core"; | ||
| import { ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from "@angular/core"; | ||
| import { PopupSurveyModel, SurveyModel } from "survey-core"; | ||
| import { BaseAngular } from "./base-angular"; | ||
| @Component({ | ||
| selector: "popup-survey", | ||
| templateUrl: "./popup.survey.component.html", | ||
| styleUrls: ["./popup.survey.component.scss"] | ||
| }) | ||
| export class PopupSurveyComponent extends BaseAngular<PopupSurveyModel> { | ||
| @Input() model!: PopupSurveyModel; | ||
| protected getModel(): PopupSurveyModel { | ||
| return this.model; | ||
| } | ||
| public get survey(): SurveyModel { | ||
| return this.model.survey; | ||
| } | ||
| export class PopupSurveyComponent extends BaseAngular<PopupSurveyModel> implements OnChanges { | ||
| @Input() model!: SurveyModel; | ||
| @Input() isExpanded?: boolean; | ||
| @Input() closeOnCompleteTimeout?: number; | ||
| public popup!: PopupSurveyModel; | ||
|
|
||
| constructor(changeDetectorRef: ChangeDetectorRef) { | ||
| super(changeDetectorRef); | ||
| changeDetectorRef.detach(); | ||
| } | ||
| protected override onModelChanged(): void { | ||
| this.model.isShowing = true; | ||
| protected getModel(): PopupSurveyModel { | ||
| return this.popup; | ||
| } | ||
| ngOnChanges(changes: SimpleChanges): void { | ||
| if(changes["model"]?.currentValue !== changes["model"]?.previousValue) { | ||
| this.popup = new PopupSurveyModel(null, this.model); | ||
| } | ||
| if (this.isExpanded !== undefined) { | ||
| this.popup.isExpanded = this.isExpanded; | ||
| } | ||
| if (this.closeOnCompleteTimeout !== undefined) { | ||
| this.popup.closeOnCompleteTimeout = this.closeOnCompleteTimeout; | ||
| } | ||
| this.popup.isShowing = true; | ||
| this.changeDetectorRef.detectChanges(); | ||
| } | ||
| } |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { TestBed } from "@angular/core/testing"; | ||
| import { SurveyModule } from "src/angular-ui.module"; | ||
| import { PopupSurveyComponent } from "src/popup.survey.component"; | ||
| import { SurveyModel } from "survey-core"; | ||
|
|
||
| describe("popup survey tests", () => { | ||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [SurveyModule], | ||
| }).compileComponents(); | ||
| TestBed; | ||
| }); | ||
| it("check popup survey behavior", () => { | ||
| const fixture = TestBed.createComponent(PopupSurveyComponent); | ||
| const component = fixture.componentInstance; | ||
| let survey1 = new SurveyModel({}); | ||
| let survey2 = new SurveyModel({}); | ||
| component.model = survey1; | ||
| component.isExpanded = false; | ||
| component.ngOnChanges({ model: { | ||
| previousValue: undefined, | ||
| firstChange: true, | ||
| isFirstChange() { | ||
| return true; | ||
| }, | ||
| currentValue: survey1, | ||
| }, | ||
| isExpanded: { | ||
| previousValue: undefined, | ||
| firstChange: true, | ||
| isFirstChange() { | ||
| return true; | ||
| }, | ||
| currentValue: false, | ||
| } }); | ||
| expect(component.popup.isExpanded).toBe(false); | ||
| expect(component.popup.survey).toBe(survey1); | ||
| let previosPopup = component.popup; | ||
| component.model = survey2; | ||
| component.isExpanded = false; | ||
| component.ngOnChanges({ model: { | ||
| previousValue: survey1, | ||
| firstChange: false, | ||
| isFirstChange() { | ||
| return false; | ||
| }, | ||
| currentValue: survey2, | ||
| }, | ||
| isExpanded: { | ||
| previousValue: false, | ||
| firstChange: false, | ||
| isFirstChange() { | ||
| return false; | ||
| }, | ||
| currentValue: false, | ||
| } }); | ||
| expect(component.popup.isExpanded).toBe(false); | ||
| expect(component.popup.survey).toBe(survey2); | ||
| expect(component.popup !== previosPopup).toBe(true); | ||
| previosPopup = component.popup; | ||
| component.model = survey2; | ||
| component.isExpanded = true; | ||
| component.ngOnChanges({ model: { | ||
| previousValue: survey2, | ||
| firstChange: false, | ||
| isFirstChange() { | ||
| return false; | ||
| }, | ||
| currentValue: survey2, | ||
| }, | ||
| isExpanded: { | ||
| previousValue: false, | ||
| firstChange: false, | ||
| isFirstChange() { | ||
| return false; | ||
| }, | ||
| currentValue: true, | ||
| } }); | ||
| expect(component.popup.isExpanded).toBe(true); | ||
| expect(component.popup.survey).toBe(survey2); | ||
| expect(component.popup).toBe(previosPopup); | ||
| previosPopup = component.popup; | ||
|
|
||
| component.isExpanded = false; | ||
| component.model = survey2; | ||
| component.ngOnChanges({ | ||
| isExpanded: { | ||
| previousValue: false, | ||
| firstChange: false, | ||
| isFirstChange() { | ||
| return false; | ||
| }, | ||
| currentValue: false, | ||
| } }); | ||
| expect(component.popup.isExpanded).toBe(false); | ||
| expect(component.popup.survey).toBe(survey2); | ||
| expect(component.popup).toBe(previosPopup); | ||
| }); | ||
| }); |
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