init

src/app/pages/create-survey/create-survey.page.html

@@ -0,0 +1,131 @@
+<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>