forked from quic-issues/427e7578-d7bf-49c8-aee9-2dd999e25316
132 lines
4.6 KiB
HTML
132 lines
4.6 KiB
HTML
<ion-header>
|
||
<ion-toolbar color="primary">
|
||
<ion-buttons slot="start">
|
||
<ion-button (click)="cancel()">
|
||
<ion-icon slot="icon-only" name="close-outline"></ion-icon>
|
||
</ion-button>
|
||
</ion-buttons>
|
||
<ion-title>{{ isEditMode ? 'Edit Survey' : 'New Survey' }}</ion-title>
|
||
<ion-buttons slot="end">
|
||
<ion-button [disabled]="!isFormValid" (click)="save()" strong>
|
||
{{ isEditMode ? 'Update' : 'Create' }}
|
||
</ion-button>
|
||
</ion-buttons>
|
||
</ion-toolbar>
|
||
</ion-header>
|
||
|
||
<ion-content class="ion-padding">
|
||
|
||
<!-- Survey metadata -->
|
||
<ion-card>
|
||
<ion-card-header>
|
||
<ion-card-title>Survey Details</ion-card-title>
|
||
</ion-card-header>
|
||
<ion-card-content>
|
||
<ion-item lines="none">
|
||
<ion-label position="stacked">Title *</ion-label>
|
||
<ion-input
|
||
[(ngModel)]="title"
|
||
placeholder="e.g. Employee Feedback Q2"
|
||
maxlength="120"
|
||
clearInput="true">
|
||
</ion-input>
|
||
</ion-item>
|
||
<ion-item lines="none">
|
||
<ion-label position="stacked">Description (optional)</ion-label>
|
||
<ion-textarea
|
||
[(ngModel)]="description"
|
||
placeholder="Briefly explain the purpose of this survey…"
|
||
rows="3"
|
||
maxlength="500">
|
||
</ion-textarea>
|
||
</ion-item>
|
||
</ion-card-content>
|
||
</ion-card>
|
||
|
||
<!-- Questions -->
|
||
<ion-card *ngFor="let question of questions; let i = index; trackBy: trackQuestion">
|
||
<ion-card-header>
|
||
<ion-card-subtitle>Question {{ i + 1 }}</ion-card-subtitle>
|
||
<div class="question-actions">
|
||
<ion-button fill="clear" size="small" (click)="moveQuestionUp(i)" [disabled]="i === 0">
|
||
<ion-icon slot="icon-only" name="chevron-up-outline"></ion-icon>
|
||
</ion-button>
|
||
<ion-button fill="clear" size="small" (click)="moveQuestionDown(i)" [disabled]="i === questions.length - 1">
|
||
<ion-icon slot="icon-only" name="chevron-down-outline"></ion-icon>
|
||
</ion-button>
|
||
<ion-button fill="clear" size="small" color="danger" (click)="removeQuestion(i)">
|
||
<ion-icon slot="icon-only" name="trash-outline"></ion-icon>
|
||
</ion-button>
|
||
</div>
|
||
</ion-card-header>
|
||
|
||
<ion-card-content>
|
||
<!-- Question text -->
|
||
<ion-item lines="none">
|
||
<ion-label position="stacked">Question Text *</ion-label>
|
||
<ion-input
|
||
[(ngModel)]="question.text"
|
||
placeholder="Enter your question…"
|
||
maxlength="300">
|
||
</ion-input>
|
||
</ion-item>
|
||
|
||
<!-- Question type -->
|
||
<ion-item lines="none">
|
||
<ion-label position="stacked">Type</ion-label>
|
||
<ion-select [(ngModel)]="question.type" (ionChange)="onTypeChange(question)">
|
||
<ion-select-option value="text">Free Text</ion-select-option>
|
||
<ion-select-option value="multiple_choice">Multiple Choice</ion-select-option>
|
||
<ion-select-option value="yes_no">Yes / No</ion-select-option>
|
||
<ion-select-option value="rating">Rating (1–5)</ion-select-option>
|
||
</ion-select>
|
||
</ion-item>
|
||
|
||
<!-- Multiple choice options -->
|
||
<div *ngIf="question.type === 'multiple_choice'" class="options-section">
|
||
<ion-list-header>
|
||
<ion-label>Answer Options</ion-label>
|
||
</ion-list-header>
|
||
<ion-item
|
||
*ngFor="let option of question.options; let oi = index; trackBy: trackOption"
|
||
lines="none">
|
||
<ion-input
|
||
[(ngModel)]="question.options![oi]"
|
||
[placeholder]="'Option ' + (oi + 1)"
|
||
maxlength="200">
|
||
</ion-input>
|
||
<ion-button
|
||
slot="end"
|
||
fill="clear"
|
||
color="danger"
|
||
size="small"
|
||
(click)="removeOption(question, oi)"
|
||
[disabled]="(question.options?.length ?? 0) <= 2">
|
||
<ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
|
||
</ion-button>
|
||
</ion-item>
|
||
<ion-button fill="clear" size="small" (click)="addOption(question)">
|
||
<ion-icon slot="start" name="add-outline"></ion-icon>
|
||
Add Option
|
||
</ion-button>
|
||
</div>
|
||
|
||
<!-- Required toggle -->
|
||
<ion-item lines="none">
|
||
<ion-label>Required</ion-label>
|
||
<ion-toggle [(ngModel)]="question.required" slot="end"></ion-toggle>
|
||
</ion-item>
|
||
</ion-card-content>
|
||
</ion-card>
|
||
|
||
<!-- Add question button -->
|
||
<ion-button expand="block" fill="outline" (click)="addQuestion()" class="ion-margin-top">
|
||
<ion-icon slot="start" name="add-circle-outline"></ion-icon>
|
||
Add Question
|
||
</ion-button>
|
||
|
||
<!-- Validation hint -->
|
||
<p *ngIf="questions.length === 0" class="hint-text">Add at least one question to continue.</p>
|
||
|
||
</ion-content>
|