Upgrading to Angular 20:
Replaced checked in package-lock.json by regenerated one. Ran ng update @angular/core@20 @angular/cli@20 Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11 Ran npm install ngx-mat-select-search@^8.0.2. Ran ng update @angular/material@20. Updated all eslint and typescript to the latest versions. Removed @angular-devkit/schematics. Updated fontawesome. Updated rxjs and tslib. Moved required node version from 16 to 20. Updated jest-preset-angular. Set preserveWhitespaces to false. Corrected two type declarations in two typescript files to make ng serve run without errors. Removed unused angular-devkit/schematics from view-user.component.ts . Updated list of supported browsers. Upgraded prettier. Ran prettier . --write the first time. Ran prettier . --write the second time. Ran ng generate @angular/core:inject with defaults, excepted a handful of files. Fixed remaining eslint problems. Added dist directory to ignores in eslint.config.js. Let prettier fix formatting, almost everything is just line breaks. Made htmlhint ignore @if and @for Angular constructs. Updated node version in Github workflow to 22.12.0 (build.yml). Updated .env.ts. Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd. Merged changes from dev into angular20 branch.
This commit is contained in:
Felix van Hove
@@ -7,32 +7,40 @@
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key" />
|
||||
<mat-error *ngIf="surveyForm.controls.key.hasError('required')">
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
@if (surveyForm.controls.key.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="name" />
|
||||
<mat-error *ngIf="surveyForm.controls.name.hasError('required')">
|
||||
{{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
@if (surveyForm.controls.name.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Country Code' | translate }}</mat-label>
|
||||
<input matInput maxlength="2" required formControlName="countryCode" />
|
||||
<mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
|
||||
{{ 'labels.inputs.Country Code' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="surveyForm.controls.countryCode.hasError('pattern')">
|
||||
{{ 'labels.inputs.Country Code' | translate }}
|
||||
<strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
|
||||
</mat-error>
|
||||
@if (surveyForm.controls.countryCode.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Country Code' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
@if (surveyForm.controls.countryCode.hasError('pattern')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Country Code' | translate }}
|
||||
<strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-98">
|
||||
@@ -40,159 +48,170 @@
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<div
|
||||
class="flex-fill layout-row layout-align-center gap-5px layout-xs-column"
|
||||
*ngIf="!questionDatas.length"
|
||||
>
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[disabled]="
|
||||
!(
|
||||
this.surveyForm.get('key').valid &&
|
||||
this.surveyForm.get('name').valid &&
|
||||
this.surveyForm.get('countryCode').valid
|
||||
)
|
||||
"
|
||||
(click)="addQuestion()"
|
||||
>
|
||||
{{ 'labels.buttons.Proceed' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
@if (!questionDatas.length) {
|
||||
<div class="flex-fill layout-row layout-align-center gap-5px layout-xs-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[disabled]="
|
||||
!(
|
||||
this.surveyForm.get('key').valid &&
|
||||
this.surveyForm.get('name').valid &&
|
||||
this.surveyForm.get('countryCode').valid
|
||||
)
|
||||
"
|
||||
(click)="addQuestion()"
|
||||
>
|
||||
{{ 'labels.buttons.Proceed' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" class="layout-column gap-4percent">
|
||||
<mat-card
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
formArrayName="questionDatas"
|
||||
*ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
|
||||
>
|
||||
<mat-card-content>
|
||||
<div class="flex-fill gap-2percent responsive-column layout-row-wrap" [formGroupName]="questionIndex">
|
||||
<div class="flex-98 layout-row-wrap gap-2percent align-between align-items-center">
|
||||
<h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
(click)="removeQuestion(questionIndex)"
|
||||
[disabled]="questionDatas.controls.length === 1"
|
||||
>
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key" />
|
||||
<mat-error *ngIf="question.controls.key.hasError('required')">
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="text" />
|
||||
<mat-error *ngIf="question.controls.text.hasError('required')">
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-98">
|
||||
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
<div class="flex-98 layout-row align-between align-items-center">
|
||||
<h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Option' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
cdkDropList
|
||||
(cdkDropListDropped)="dropResponse($event, questionIndex)"
|
||||
class="flex-fill layout-row-wrap gap-2percent"
|
||||
>
|
||||
@for (question of questionDatas.controls; track question; let questionIndex = $index; let isLast = $last) {
|
||||
<mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas">
|
||||
<mat-card-content>
|
||||
<div class="flex-fill gap-2percent responsive-column layout-row-wrap" [formGroupName]="questionIndex">
|
||||
<div class="flex-98 layout-row-wrap gap-2percent align-between align-items-center">
|
||||
<h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
(click)="removeQuestion(questionIndex)"
|
||||
[disabled]="questionDatas.controls.length === 1"
|
||||
>
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key" />
|
||||
@if (question.controls.key.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="text" />
|
||||
@if (question.controls.text.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-98">
|
||||
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
formControlName="description"
|
||||
cdkTextareaAutosize
|
||||
cdkAutosizeMinRows="2"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
<div class="flex-98 layout-row align-between align-items-center">
|
||||
<h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Option' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
cdkDropList
|
||||
(cdkDropListDropped)="dropResponse($event, questionIndex)"
|
||||
class="flex-fill layout-row-wrap gap-2percent"
|
||||
formArrayName="responseDatas"
|
||||
*ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
|
||||
>
|
||||
<div class="flex-fill layout-row-wrap gap-2percent" [formGroupName]="responseIndex">
|
||||
<mat-form-field class="flex-43">
|
||||
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
|
||||
<input matInput required formControlName="text" />
|
||||
<mat-error *ngIf="response.controls.text.hasError('required')">
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-43">
|
||||
<mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
|
||||
<input matInput required formControlName="value" />
|
||||
<mat-error *ngIf="response.controls.value.hasError('required')">
|
||||
{{ 'labels.inputs.Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="response.controls.value.hasError('pattern')">
|
||||
{{ 'labels.inputs.Value' | translate }}
|
||||
<strong>{{ 'labels.commons.must be an integer between -9999 and 9999' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="flex-8">
|
||||
<div class="delete-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
color="warn"
|
||||
mat-icon-button
|
||||
[matTooltip]="'labels.buttons.Delete' | translate"
|
||||
matTooltipPosition="above"
|
||||
(click)="removeResponse(getResponseDatas(questionIndex), responseIndex)"
|
||||
[disabled]="getResponseDatas(questionIndex).controls.length === 1"
|
||||
>
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
@for (
|
||||
response of getResponseDatas(questionIndex).controls;
|
||||
track response;
|
||||
let responseIndex = $index
|
||||
) {
|
||||
<div
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
class="flex-fill layout-row-wrap gap-2percent"
|
||||
formArrayName="responseDatas"
|
||||
>
|
||||
<div class="flex-fill layout-row-wrap gap-2percent" [formGroupName]="responseIndex">
|
||||
<mat-form-field class="flex-43">
|
||||
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
|
||||
<input matInput required formControlName="text" />
|
||||
@if (response.controls.text.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-43">
|
||||
<mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
|
||||
<input matInput required formControlName="value" />
|
||||
@if (response.controls.value.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
@if (response.controls.value.hasError('pattern')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Value' | translate }}
|
||||
<strong>{{
|
||||
'labels.commons.must be an integer between -9999 and 9999' | translate
|
||||
}}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<div class="flex-8">
|
||||
<div class="delete-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
color="warn"
|
||||
mat-icon-button
|
||||
[matTooltip]="'labels.buttons.Delete' | translate"
|
||||
matTooltipPosition="above"
|
||||
(click)="removeResponse(getResponseDatas(questionIndex), responseIndex)"
|
||||
[disabled]="getResponseDatas(questionIndex).controls.length === 1"
|
||||
>
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<div>
|
||||
@if (isLast) {
|
||||
<mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
|
||||
<button type="button" mat-raised-button (click)="cancelSurvey()">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addQuestion()">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<div>
|
||||
<mat-card-actions *ngIf="isLast" class="layout-row layout-xs-column layout-align-center gap-5px">
|
||||
<button type="button" mat-raised-button (click)="cancelSurvey()">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addQuestion()">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</mat-card>
|
||||
</mat-card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import {
|
||||
UntypedFormGroup,
|
||||
UntypedFormBuilder,
|
||||
@@ -42,24 +42,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
]
|
||||
})
|
||||
export class CreateSurveyComponent implements OnInit {
|
||||
private formBuilder = inject(UntypedFormBuilder);
|
||||
private systemService = inject(SystemService);
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
dialog = inject(MatDialog);
|
||||
|
||||
/** Survey form. */
|
||||
surveyForm: UntypedFormGroup;
|
||||
|
||||
/**
|
||||
* @param {FormBuilder} formBuilder Form Builder.
|
||||
* @param {SystemService} systemService System Service.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
* @param {Router} router Router for navigation.
|
||||
* @param {MatDialog} dialog Dialog reference.
|
||||
*/
|
||||
constructor(
|
||||
private formBuilder: UntypedFormBuilder,
|
||||
private systemService: SystemService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
public dialog: MatDialog
|
||||
) {}
|
||||
|
||||
/**
|
||||
* Creates the survey form.
|
||||
*/
|
||||
@@ -84,7 +75,8 @@ export class CreateSurveyComponent implements OnInit {
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern('^\\s*([A-Za-z]{2})?\\s*$')]
|
||||
Validators.pattern('^\\s*([A-Za-z]{2})?\\s*$')
|
||||
]
|
||||
],
|
||||
description: [''],
|
||||
questionDatas: this.formBuilder.array([])
|
||||
@@ -163,7 +155,8 @@ export class CreateSurveyComponent implements OnInit {
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern('^\\s*[-]?\\d{0,4}\\s*$')]
|
||||
Validators.pattern('^\\s*[-]?\\d{0,4}\\s*$')
|
||||
]
|
||||
],
|
||||
sequenceNo: ['']
|
||||
});
|
||||
|
||||
@@ -7,32 +7,40 @@
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key" />
|
||||
<mat-error *ngIf="surveyForm.controls.key.hasError('required')">
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
@if (surveyForm.controls.key.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="name" />
|
||||
<mat-error *ngIf="surveyForm.controls.name.hasError('required')">
|
||||
{{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
@if (surveyForm.controls.name.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Country Code' | translate }} </mat-label>
|
||||
<input matInput maxlength="2" required formControlName="countryCode" />
|
||||
<mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
|
||||
{{ 'labels.inputs.Country Code' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="surveyForm.controls.countryCode.hasError('pattern')">
|
||||
{{ 'labels.inputs.Country Code' | translate }}
|
||||
<strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
|
||||
</mat-error>
|
||||
@if (surveyForm.controls.countryCode.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Country Code' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
@if (surveyForm.controls.countryCode.hasError('pattern')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Country Code' | translate }}
|
||||
<strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-98">
|
||||
@@ -44,131 +52,143 @@
|
||||
</mat-card>
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" class="layout-column gap-4percent">
|
||||
<mat-card
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
formArrayName="questionDatas"
|
||||
*ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
|
||||
>
|
||||
<mat-card-content>
|
||||
<div class="flex-fill gap-2percent responsive-column layout-row-wrap" [formGroupName]="questionIndex">
|
||||
<div class="flex-98 layout-row-wrap gap-2percent align-between align-items-center">
|
||||
<h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
(click)="removeQuestion(questionIndex)"
|
||||
[disabled]="questionDatas.controls.length === 1"
|
||||
>
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key" />
|
||||
<mat-error *ngIf="question.get('key').hasError('required')">
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="text" />
|
||||
<mat-error *ngIf="question.get('text').hasError('required')">
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-98">
|
||||
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
<div class="flex-98 layout-row align-between align-items-center">
|
||||
<h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Option' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
cdkDropList
|
||||
(cdkDropListDropped)="dropResponse($event, questionIndex)"
|
||||
class="flex-fill layout-row-wrap gap-2percent"
|
||||
>
|
||||
@for (question of questionDatas.controls; track question; let questionIndex = $index; let isLast = $last) {
|
||||
<mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas">
|
||||
<mat-card-content>
|
||||
<div class="flex-fill gap-2percent responsive-column layout-row-wrap" [formGroupName]="questionIndex">
|
||||
<div class="flex-98 layout-row-wrap gap-2percent align-between align-items-center">
|
||||
<h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
(click)="removeQuestion(questionIndex)"
|
||||
[disabled]="questionDatas.controls.length === 1"
|
||||
>
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key" />
|
||||
@if (question.get('key').hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="text" />
|
||||
@if (question.get('text').hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-98">
|
||||
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
formControlName="description"
|
||||
cdkTextareaAutosize
|
||||
cdkAutosizeMinRows="2"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
<div class="flex-98 layout-row align-between align-items-center">
|
||||
<h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Option' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
cdkDropList
|
||||
(cdkDropListDropped)="dropResponse($event, questionIndex)"
|
||||
class="flex-fill layout-row-wrap gap-2percent"
|
||||
formArrayName="responseDatas"
|
||||
*ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
|
||||
>
|
||||
<div class="flex-fill layout-row-wrap gap-2percent" [formGroupName]="responseIndex">
|
||||
<mat-form-field class="flex-43">
|
||||
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
|
||||
<input matInput required formControlName="text" />
|
||||
<mat-error *ngIf="response.get('text').hasError('required')">
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-43">
|
||||
<mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
|
||||
<input matInput required formControlName="value" />
|
||||
<mat-error *ngIf="response.get('value').hasError('required')">
|
||||
{{ 'labels.inputs.Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="response.get('value').hasError('pattern')">
|
||||
{{ 'labels.inputs.Value' | translate
|
||||
}}<strong>{{ 'labels.commons.must be an integer between -9999 and 9999' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="flex-8">
|
||||
<div class="delete-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
color="warn"
|
||||
mat-icon-button
|
||||
[matTooltip]="'labels.buttons.Delete' | translate"
|
||||
matTooltipPosition="above"
|
||||
(click)="removeResponse(getResponseDatas(questionIndex), responseIndex)"
|
||||
[disabled]="getResponseDatas(questionIndex).controls.length === 1"
|
||||
>
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
@for (
|
||||
response of getResponseDatas(questionIndex).controls;
|
||||
track response;
|
||||
let responseIndex = $index
|
||||
) {
|
||||
<div
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
class="flex-fill layout-row-wrap gap-2percent"
|
||||
formArrayName="responseDatas"
|
||||
>
|
||||
<div class="flex-fill layout-row-wrap gap-2percent" [formGroupName]="responseIndex">
|
||||
<mat-form-field class="flex-43">
|
||||
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
|
||||
<input matInput required formControlName="text" />
|
||||
@if (response.get('text').hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-43">
|
||||
<mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
|
||||
<input matInput required formControlName="value" />
|
||||
@if (response.get('value').hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
@if (response.get('value').hasError('pattern')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Value' | translate
|
||||
}}<strong>{{
|
||||
'labels.commons.must be an integer between -9999 and 9999' | translate
|
||||
}}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<div class="flex-8">
|
||||
<div class="delete-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
color="warn"
|
||||
mat-icon-button
|
||||
[matTooltip]="'labels.buttons.Delete' | translate"
|
||||
matTooltipPosition="above"
|
||||
(click)="removeResponse(getResponseDatas(questionIndex), responseIndex)"
|
||||
[disabled]="getResponseDatas(questionIndex).controls.length === 1"
|
||||
>
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<div>
|
||||
@if (isLast) {
|
||||
<mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
|
||||
<button type="button" mat-raised-button (click)="cancelSurvey()">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addQuestion()">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">
|
||||
{{ 'labels.text.Edit Survey' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<div>
|
||||
<mat-card-actions *ngIf="isLast" class="layout-row layout-xs-column layout-align-center gap-5px">
|
||||
<button type="button" mat-raised-button (click)="cancelSurvey()">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addQuestion()">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">
|
||||
{{ 'labels.text.Edit Survey' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</mat-card>
|
||||
</mat-card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Angular Imports */
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, inject } from '@angular/core';
|
||||
import {
|
||||
UntypedFormGroup,
|
||||
UntypedFormBuilder,
|
||||
@@ -46,6 +46,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
]
|
||||
})
|
||||
export class EditSurveyComponent {
|
||||
private formBuilder = inject(UntypedFormBuilder);
|
||||
private systemService = inject(SystemService);
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
dialog = inject(MatDialog);
|
||||
|
||||
/** Survey form. */
|
||||
surveyForm: UntypedFormGroup;
|
||||
|
||||
@@ -56,13 +62,7 @@ export class EditSurveyComponent {
|
||||
* @param {Router} router Router for navigation.
|
||||
* @param {MatDialog} dialog Dialog reference.
|
||||
*/
|
||||
constructor(
|
||||
private formBuilder: UntypedFormBuilder,
|
||||
private systemService: SystemService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
public dialog: MatDialog
|
||||
) {
|
||||
constructor() {
|
||||
this.createSurveyForm();
|
||||
this.route.data.subscribe((data: { survey: any }) => {
|
||||
this.prepareSurveyForm(data.survey);
|
||||
@@ -128,7 +128,8 @@ export class EditSurveyComponent {
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern('^\\s*([A-Za-z]{2})?\\s*$')]
|
||||
Validators.pattern('^\\s*([A-Za-z]{2})?\\s*$')
|
||||
]
|
||||
],
|
||||
description: [''],
|
||||
questionDatas: this.formBuilder.array([])
|
||||
@@ -207,7 +208,8 @@ export class EditSurveyComponent {
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern('^\\s*[-]?\\d{0,4}\\s*$')]
|
||||
Validators.pattern('^\\s*[-]?\\d{0,4}\\s*$')
|
||||
]
|
||||
],
|
||||
sequenceNo: ['']
|
||||
});
|
||||
|
||||
@@ -56,22 +56,16 @@
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Action' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let survey">
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="!isActive(survey.validFrom, survey.validTo)"
|
||||
color="accent"
|
||||
(click)="activate(survey); $event.stopPropagation()"
|
||||
>
|
||||
<fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Activate' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="isActive(survey.validFrom, survey.validTo)"
|
||||
color="warn"
|
||||
(click)="deactivate(survey); $event.stopPropagation()"
|
||||
>
|
||||
<fa-icon icon="lock" class="m-r-10"></fa-icon>{{ 'labels.buttons.Deactivate' | translate }}
|
||||
</button>
|
||||
@if (!isActive(survey.validFrom, survey.validTo)) {
|
||||
<button mat-button color="accent" (click)="activate(survey); $event.stopPropagation()">
|
||||
<fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Activate' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (isActive(survey.validFrom, survey.validTo)) {
|
||||
<button mat-button color="warn" (click)="deactivate(survey); $event.stopPropagation()">
|
||||
<fa-icon icon="lock" class="m-r-10"></fa-icon>{{ 'labels.buttons.Deactivate' | translate }}
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild, inject } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
||||
import {
|
||||
@@ -50,6 +50,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
]
|
||||
})
|
||||
export class ManageSurveysComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private systemService = inject(SystemService);
|
||||
|
||||
/* Surveys data */
|
||||
surveysData: any;
|
||||
/* Columns to be displayed in manage surveys data table */
|
||||
@@ -73,10 +76,7 @@ export class ManageSurveysComponent implements OnInit {
|
||||
* Retrieves the surveys data from `resolve`.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
*/
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private systemService: SystemService
|
||||
) {
|
||||
constructor() {
|
||||
this.route.data.subscribe((data: { surveys: any }) => {
|
||||
this.surveysData = data.surveys;
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Angular Imports */
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
|
||||
/** rxjs Imports */
|
||||
import { Observable } from 'rxjs';
|
||||
@@ -12,10 +12,7 @@ import { SystemService } from '../system.service';
|
||||
*/
|
||||
@Injectable()
|
||||
export class ManageSurveysResolver {
|
||||
/**
|
||||
* @param {SystemService} systemService System service.
|
||||
*/
|
||||
constructor(private systemService: SystemService) {}
|
||||
private systemService = inject(SystemService);
|
||||
|
||||
/**
|
||||
* Returns the Surveys data.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Angular Imports */
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot } from '@angular/router';
|
||||
|
||||
/** rxjs Imports */
|
||||
@@ -13,10 +13,7 @@ import { SystemService } from '../system.service';
|
||||
*/
|
||||
@Injectable()
|
||||
export class SurveyResolver {
|
||||
/**
|
||||
* @param {SystemService} systemService System service.
|
||||
*/
|
||||
constructor(private systemService: SystemService) {}
|
||||
private systemService = inject(SystemService);
|
||||
|
||||
/**
|
||||
* Returns the Survey data.
|
||||
|
||||
@@ -56,53 +56,58 @@
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="survey-questions" *ngFor="let questionData of surveyData.questionDatas; index as i">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div>{{ 'labels.heading.Question' | translate }}: {{ i + 1 }}</div>
|
||||
<div class="layout-row" id="key-text">
|
||||
<div class="flex-25 header">
|
||||
<b>{{ 'labels.inputs.Key' | translate }}:</b>
|
||||
@for (questionData of surveyData.questionDatas; track questionData; let i = $index) {
|
||||
<div class="survey-questions">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div>{{ 'labels.heading.Question' | translate }}: {{ i + 1 }}</div>
|
||||
<div class="layout-row" id="key-text">
|
||||
<div class="flex-25 header">
|
||||
<b>{{ 'labels.inputs.Key' | translate }}:</b>
|
||||
</div>
|
||||
<div class="flex-40 flex-50-lt-md">
|
||||
{{ questionData.key }}
|
||||
</div>
|
||||
<div class="flex-40 flex-lt-md-50 header">
|
||||
<b>{{ 'labels.inputs.Text' | translate }}:</b>
|
||||
</div>
|
||||
<div class="flex-40 flex-50-lt-md">
|
||||
{{ questionData.text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-40 flex-50-lt-md">
|
||||
{{ questionData.key }}
|
||||
<div class="layout-row" id="description">
|
||||
<div class="flex-20 flex-50-lt-md header">
|
||||
<b>{{ 'labels.inputs.Description' | translate }}:</b>
|
||||
</div>
|
||||
<div class="flex-40 flex-50-lt-md">
|
||||
{{ questionData.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-40 flex-lt-md-50 header">
|
||||
<b>{{ 'labels.inputs.Text' | translate }}:</b>
|
||||
<div class="layout-column" id="questionaire">
|
||||
<div>
|
||||
<b>{{ 'labels.inputs.Option' | translate }}: </b>
|
||||
</div>
|
||||
<table id="response">
|
||||
<tr>
|
||||
@for (column of displayedColumns; track column) {
|
||||
<th>{{ column | titlecase }}</th>
|
||||
}
|
||||
</tr>
|
||||
@for (row of questionData.responseDatas; track row) {
|
||||
<tr>
|
||||
@for (column of displayedColumns; track column) {
|
||||
<td>
|
||||
{{ row[column] }}
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex-40 flex-50-lt-md">
|
||||
{{ questionData.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-row" id="description">
|
||||
<div class="flex-20 flex-50-lt-md header">
|
||||
<b>{{ 'labels.inputs.Description' | translate }}:</b>
|
||||
</div>
|
||||
|
||||
<div class="flex-40 flex-50-lt-md">
|
||||
{{ questionData.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-column" id="questionaire">
|
||||
<div>
|
||||
<b>{{ 'labels.inputs.Option' | translate }}: </b>
|
||||
</div>
|
||||
<table id="response">
|
||||
<tr>
|
||||
<th *ngFor="let column of displayedColumns">{{ column | titlecase }}</th>
|
||||
</tr>
|
||||
<tr *ngFor="let row of questionData.responseDatas">
|
||||
<td *ngFor="let column of displayedColumns">
|
||||
{{ row[column] }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Angular Imports */
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
@@ -8,7 +8,7 @@ import { SystemService } from 'app/system/system.service';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatCard, MatCardHeader, MatCardTitle, MatCardContent } from '@angular/material/card';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import { NgFor, TitleCasePipe } from '@angular/common';
|
||||
import { TitleCasePipe } from '@angular/common';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -28,6 +28,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
]
|
||||
})
|
||||
export class ViewSurveyComponent {
|
||||
private route = inject(ActivatedRoute);
|
||||
private systemService = inject(SystemService);
|
||||
private dialog = inject(MatDialog);
|
||||
private router = inject(Router);
|
||||
|
||||
/** Survey Data */
|
||||
surveyData: any;
|
||||
|
||||
@@ -44,12 +49,7 @@ export class ViewSurveyComponent {
|
||||
* @param {MatDialog} dialog Dialog Reference.
|
||||
* @param {Router} router Router for navigation.
|
||||
*/
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private systemService: SystemService,
|
||||
private dialog: MatDialog,
|
||||
private router: Router
|
||||
) {
|
||||
constructor() {
|
||||
this.route.data.subscribe((data: { survey: any }) => {
|
||||
this.surveyData = data.survey;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user