200 lines
9.8 KiB
HTML
200 lines
9.8 KiB
HTML
<div class="container">
|
|
<form [formGroup]="surveyForm" (ngSubmit)="submit()">
|
|
<div class="layout-column gap-4percent">
|
|
<mat-card>
|
|
<mat-card-content>
|
|
<div class="layout-row-wrap gap-2px responsive-column">
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
|
|
<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>
|
|
</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-fill" ="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"
|
|
>
|
|
<div
|
|
cdkDrag
|
|
cdkDragLockAxis="y"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|