build: Use prettier for html
Stop ignoring html files in prettier and fix existing issues.
This commit is contained in:
Ralph Hopman
@@ -1,39 +1,37 @@
|
||||
<div class="container">
|
||||
|
||||
<form [formGroup]="surveyForm" (ngSubmit)="submit()">
|
||||
|
||||
<div fxLayout="column" fxLayoutGap="4%">
|
||||
|
||||
<mat-card>
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key">
|
||||
<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>
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="name">
|
||||
<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>
|
||||
{{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Country Code' | translate }}</mat-label>
|
||||
<input matInput maxlength="2" required formControlName="countryCode">
|
||||
<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>
|
||||
{{ '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>
|
||||
{{ 'labels.inputs.Country Code' | translate }}
|
||||
<strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
@@ -42,48 +40,80 @@
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<div fxFlexFill fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *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}}
|
||||
<div
|
||||
fxFlexFill
|
||||
fxLayout="row"
|
||||
fxLayout.xs="column"
|
||||
fxLayoutAlign="center"
|
||||
fxLayoutGap="5px"
|
||||
*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>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
</mat-card>
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
|
||||
|
||||
<mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas" *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast">
|
||||
|
||||
<mat-card
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
formArrayName="questionDatas"
|
||||
*ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
|
||||
>
|
||||
<mat-card-content>
|
||||
|
||||
<div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
|
||||
|
||||
<div
|
||||
fxFlexFill
|
||||
fxLayoutGap="2%"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayout="row wrap"
|
||||
[formGroupName]="questionIndex"
|
||||
>
|
||||
<div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between 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">
|
||||
<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}}
|
||||
{{ 'labels.buttons.Delete' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key">
|
||||
<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>
|
||||
{{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48">
|
||||
<mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="text">
|
||||
<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>
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
@@ -95,75 +125,95 @@
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
<div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mat-h4">{{'labels.heading.Options' | translate}}</h4>
|
||||
<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}}
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Option' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropResponse($event, questionIndex)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
|
||||
|
||||
<div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
|
||||
|
||||
<div
|
||||
cdkDropList
|
||||
(cdkDropListDropped)="dropResponse($event, questionIndex)"
|
||||
fxFlexFill
|
||||
fxLayout="row wrap"
|
||||
fxLayoutGap="2%"
|
||||
>
|
||||
<div
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
fxFlexFill
|
||||
fxLayout="row wrap"
|
||||
fxLayoutGap="2%"
|
||||
formArrayName="responseDatas"
|
||||
*ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
|
||||
>
|
||||
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
|
||||
|
||||
<mat-form-field fxFlex="43%">
|
||||
<mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
|
||||
<input matInput required formControlName="text">
|
||||
<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>
|
||||
{{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="43%">
|
||||
<mat-label>{{'labels.inputs.Value' | translate}}</mat-label>
|
||||
<input matInput required formControlName="value">
|
||||
<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>
|
||||
{{ '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>
|
||||
{{ 'labels.inputs.Value' | translate }}
|
||||
<strong>{{ 'labels.commons.must be an integer between -9999 and 9999' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div fxFlex="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">
|
||||
<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>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
<div>
|
||||
|
||||
<mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
||||
<button type="button" mat-raised-button (click)="cancelSurvey()">{{'labels.buttons.Cancel' | translate}}</button>
|
||||
<button type="button" mat-raised-button color="primary"(click)="addQuestion()">
|
||||
<mat-card-actions
|
||||
*ngIf="isLast"
|
||||
fxLayout="row"
|
||||
fxLayout.xs="column"
|
||||
fxLayoutAlign="center"
|
||||
fxLayoutGap="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}}
|
||||
{{ 'labels.buttons.Add' | translate }} {{ 'labels.heading.Question' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">{{'labels.buttons.Submit' | translate}}</button>
|
||||
</mat-card-actions>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,39 +1,91 @@
|
||||
<div class="container">
|
||||
<form [formGroup]="surveyForm" (ngSubmit)="submit()">
|
||||
<div fxLayout="column" fxLayoutGap="4%">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
<mat-form-field fxFlex="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>
|
||||
</mat-form-field>
|
||||
|
||||
<form [formGroup]="surveyForm" (ngSubmit)="submit()">
|
||||
<mat-form-field fxFlex="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>
|
||||
</mat-form-field>
|
||||
|
||||
<div fxLayout="column" fxLayoutGap="4%">
|
||||
<mat-form-field fxFlex="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>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-card>
|
||||
<mat-form-field fxFlex="98%">
|
||||
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
|
||||
<mat-card
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
formArrayName="questionDatas"
|
||||
*ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
|
||||
>
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
<div
|
||||
fxFlexFill
|
||||
fxLayoutGap="2%"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayout="row wrap"
|
||||
[formGroupName]="questionIndex"
|
||||
>
|
||||
<div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between 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 fxFlex="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-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 fxFlex="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>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="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-form-field fxFlex="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>
|
||||
|
||||
@@ -42,121 +94,98 @@
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
</mat-card>
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
|
||||
|
||||
<mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas" *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast">
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
<div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
|
||||
|
||||
<div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between 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 fxFlex="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 fxFlex="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 fxFlex="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 fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between 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)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
|
||||
|
||||
<div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
|
||||
|
||||
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
|
||||
|
||||
<mat-form-field fxFlex="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 fxFlex="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 fxFlex="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>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
<div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between 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>
|
||||
|
||||
</mat-card-content>
|
||||
<div
|
||||
cdkDropList
|
||||
(cdkDropListDropped)="dropResponse($event, questionIndex)"
|
||||
fxFlexFill
|
||||
fxLayout="row wrap"
|
||||
fxLayoutGap="2%"
|
||||
>
|
||||
<div
|
||||
cdkDrag
|
||||
cdkDragLockAxis="y"
|
||||
fxFlexFill
|
||||
fxLayout="row wrap"
|
||||
fxLayoutGap="2%"
|
||||
formArrayName="responseDatas"
|
||||
*ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
|
||||
>
|
||||
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
|
||||
<mat-form-field fxFlex="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>
|
||||
|
||||
<div>
|
||||
|
||||
<mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="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>
|
||||
<mat-form-field fxFlex="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 fxFlex="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>
|
||||
</mat-card-content>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-card-actions
|
||||
*ngIf="isLast"
|
||||
fxLayout="row"
|
||||
fxLayout.xs="column"
|
||||
fxLayoutAlign="center"
|
||||
fxLayoutGap="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>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,71 +1,84 @@
|
||||
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
|
||||
<button mat-raised-button color="primary" [routerLink]="['create']">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{'labels.buttons.Create Surveys' | translate}}
|
||||
{{ 'labels.buttons.Create Surveys' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div fxLayout="row">
|
||||
<mat-form-field fxFlex>
|
||||
<mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)">
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
<ng-container matColumnDef="key">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Key' | translate}} </th>
|
||||
<td mat-cell *matCellDef="let survey"> {{ survey.key }} </td>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Key' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let survey">{{ survey.key }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
|
||||
<td mat-cell *matCellDef="let survey"> {{ survey.name }} </td>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let survey">{{ survey.name }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="description">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let survey"> {{ survey.description }} </td>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Description' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let survey">{{ survey.description }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="countryCode">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Country Code' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let survey"> {{ survey.countryCode }} </td>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Country Code' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let survey">{{ survey.countryCode }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let survey">
|
||||
<div [className]="isActive(survey.validFrom, survey.validTo) ? 'enabled' : 'disabled'">
|
||||
<fa-icon matTooltip="{{ !isActive(survey.validFrom, survey.validTo) ? ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate) }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
|
||||
</div>
|
||||
<div [className]="isActive(survey.validFrom, survey.validTo) ? 'enabled' : 'disabled'">
|
||||
<fa-icon
|
||||
matTooltip="{{
|
||||
!isActive(survey.validFrom, survey.validTo)
|
||||
? ('labels.inputs.Disabled' | translate)
|
||||
: ('labels.inputs.Enabled' | translate)
|
||||
}}"
|
||||
matTooltipPosition="right"
|
||||
icon="circle"
|
||||
size="lg"
|
||||
></fa-icon>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Action' | translate}} </th>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let survey; columns: displayedColumns;" [routerLink]="[survey.id]" class="select-row"></tr>
|
||||
|
||||
<tr mat-row *matRowDef="let survey; columns: displayedColumns" [routerLink]="[survey.id]" class="select-row"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,33 +1,32 @@
|
||||
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
|
||||
<button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_REPORT'" (click)="onEdit()">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{'labels.buttons.Edit' | translate }}
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container m-b-20">
|
||||
<mat-card>
|
||||
<mat-card-header fxLayout="column">
|
||||
<mat-card-title>{{'labels.buttons.Survey' | translate }}</mat-card-title>
|
||||
<mat-card-title>{{ 'labels.buttons.Survey' | translate }}</mat-card-title>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="row wrap" class="content">
|
||||
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
|
||||
<b>{{'labels.inputs.Key' | translate}}:</b>
|
||||
<b>{{ 'labels.inputs.Key' | translate }}:</b>
|
||||
</div>
|
||||
|
||||
<div fxFlex="60%" fxFlex.lt-md="50%">
|
||||
{{surveyData.key}}
|
||||
{{ surveyData.key }}
|
||||
</div>
|
||||
|
||||
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
|
||||
<b>{{'labels.inputs.Name' | translate}}:</b>
|
||||
<b>{{ 'labels.inputs.Name' | translate }}:</b>
|
||||
</div>
|
||||
|
||||
<div fxFlex="60%" fxFlex.lt-md="50%">
|
||||
{{surveyData.name}}
|
||||
{{ surveyData.name }}
|
||||
</div>
|
||||
|
||||
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
|
||||
@@ -35,7 +34,7 @@
|
||||
</div>
|
||||
|
||||
<div fxFlex="60%" fxFlex.lt-md="50%">
|
||||
{{surveyData.countryCode}}
|
||||
{{ surveyData.countryCode }}
|
||||
</div>
|
||||
|
||||
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
|
||||
@@ -43,15 +42,11 @@
|
||||
</div>
|
||||
|
||||
<div fxFlex="60%" fxFlex.lt-md="50%">
|
||||
{{surveyData.description}}
|
||||
{{ surveyData.description }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container m-b-20">
|
||||
@@ -64,21 +59,21 @@
|
||||
<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>{{ 'labels.heading.Question' | translate }}: {{ i + 1 }}</div>
|
||||
<div fxLayout="row" id="key_text">
|
||||
<div fxFlex="25%" fxFlex.lt-md="50%" class="header">
|
||||
<b>{{'labels.inputs.Key' | translate}}:</b>
|
||||
<b>{{ 'labels.inputs.Key' | translate }}:</b>
|
||||
</div>
|
||||
|
||||
<div fxFlex="40%" fxFlex.lt-md="50%">
|
||||
{{questionData.key}}
|
||||
{{ questionData.key }}
|
||||
</div>
|
||||
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
|
||||
<b>{{'labels.inputs.Text' | translate}}:</b>
|
||||
<b>{{ 'labels.inputs.Text' | translate }}:</b>
|
||||
</div>
|
||||
|
||||
<div fxFlex="40%" fxFlex.lt-md="50%">
|
||||
{{questionData.text}}
|
||||
{{ questionData.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" id="description">
|
||||
@@ -87,18 +82,20 @@
|
||||
</div>
|
||||
|
||||
<div fxFlex="40%" fxFlex.lt-md="50%">
|
||||
{{questionData.description}}
|
||||
{{ questionData.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="column" id="questionaire">
|
||||
<div><b>{{'labels.inputs.Option' | translate}}: </b></div>
|
||||
<div>
|
||||
<b>{{ 'labels.inputs.Option' | translate }}: </b>
|
||||
</div>
|
||||
<table id="response">
|
||||
<tr>
|
||||
<th *ngFor="let column of displayedColumns">{{column | titlecase}}</th>
|
||||
<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]}}
|
||||
{{ row[column] }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user