SearchFlight.vue

<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <div class="grid-content ep-bg-purple" />
    </el-col>
    <el-col :span="12">
      <el-card style="width: 160%">
        <template #header>
          <div class="card-header">
            <span>Search Flight</span>
          </div>
        </template>

        <el-form
          ref="ruleFormRef"
          :model="flightForm"
          :rules="rules"
          label-width="auto"
          :label-position="labelPosition"
          :size="size"
          status-icon
        >
          <el-form-item label="Departure:" prop="departure">
            <el-input
              v-model="flightForm.departure"
              placeholder="Please Enter Departure Airport Code"
            />
          </el-form-item>

          <el-form-item label="Destination:" prop="destination">
            <el-input
              v-model="flightForm.destination"
              placeholder="Please Enter Arrival Airport Code"
            />
          </el-form-item>

          <el-form-item label="Date:" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="flightForm.date1"
                  type="date"
                  label="travel date"
                  placeholder="Please Pick a Travel Date"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem"
              >-</el-col
            >
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-date-picker
                  v-model="flightForm.date2"
                  label="return dime"
                  placeholder="Please Pick a Return Date"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item :inline="true">
            <el-form-item label="Adults:">
              <el-input-number
                v-model="flightForm.numAdults"
                :min="1"
                :max="10"
                @change="handleChange"
              />
            </el-form-item>
            <el-col
              class="text-center"
              :span="1"
              style="margin: 0 0.5rem"
            ></el-col>
            <el-form-item label="Seniors:">
              <el-input-number
                v-model="flightForm.numSeniors"
                :min="0"
                :max="10"
                @change="handleChange"
              />
            </el-form-item>
          </el-form-item>

          <el-form-item label="Class:" prop="classOfService">
            <el-select
              v-model="flightForm.classOfService"
              placeholder="please select your class"
              style="width: 50%"
            >
              <el-option label="First" value="FIRST" />
              <el-option label="Business" value="BUSINESS" />
              <el-option label="Premium Economy" value="PREMIUM_ECONOMY" />
              <el-option label="Economy" value="ECONOMY" />
            </el-select>
          </el-form-item>

          <el-form-item div="Button">
            <el-button type="primary" @click.prevent="submitForm(ruleFormRef)"
              >Search</el-button
            >
            <el-button @click="resetForm(ruleFormRef)">Cancel</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { FlightFormModel } from "@/models/FlightFormModel";
import * as FlightTicketService from "@/services/FlightTicketService";

const size = ref("large");
const labelPosition = ref("left");
const ruleFormRef = ref<FormInstance>();

let flightForm = ref(new FlightFormModel());
// const flightForm = reactive({
//   departure: '',
//   destination: '',
//   date1: '',
//   date2: '',
//   numAdults: '',
//   numSeniors:'',
//   classOfService:'',
// })

const rules = reactive<FormRules>({
  departure: [
    {
      required: true,
      message: "Please input airport code",
      trigger: "blur",
    },
  ],
  destination: [
    {
      required: true,
      message: "Please input airport code",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  classOfService: [
    {
      required: true,
      message: "Please select a class",
      trigger: "change",
    },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let result = FlightTicketService.createNewFlight(flightForm);
      // TODO: Check the return result
      // console.log("Form Data before save in DB: ",flightForm.value);
      FlightTicketService.createNewFlight(flightForm.value).then((data) => {
        console.log("Save search flight data: ", data);
      });
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
    console.log(flightForm);
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style>
button {
  margin-left: 35%;
}
</style>