WishlistPage.vue

<template>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="16">
      <el-card style="width: 100%">
        <template #header>
          <div class="card-header">
            <span>Your Wishlist Information</span>
          </div>
        </template>

        <div class="common-layout">
          <el-container>
            <!-- Aside Coding Area -->
            <el-aside width="300px">
              <el-space direction="vertical" width="100%">
                <el-card
                  v-for="(item, index) in wishlistList"
                  shadow="hover"
                  style="width: 280px"
                  @click="selectItem(index)"
                >
                  <span>{{ item.cityName }}</span>
                  <div class="bottom">
                    <time class="time"
                      >"{{ item.startTime }} to {{ item.endTime }}"</time
                    >
                  </div>
                </el-card>
                <el-card
                  shadow="hover"
                  style="width: 280px"
                  @click="addNewWishlistItem()"
                >
                  <el-icon><Plus /></el-icon>
                  <span> + Add New Item To Wishlist</span>
                </el-card>
              </el-space>
            </el-aside>
            <!-- Main Coding Area -->
            <el-main>
              <el-card shadow="never" class="main-card">
                <span>Wishlist Item Detail</span>
                <el-form
                  ref="ruleFormRef"
                  :model="wishlistItem"
                  :rules="rules"
                  label-width="120px"
                  :label-position="'left'"
                  class="demo-ruleForm"
                  :size="formSize"
                  status-icon
                >
                  <el-form-item></el-form-item>

                  <el-form-item label="City Name:" prop="cityName">
                    <el-input v-model="wishlistItem.cityName" />
                  </el-form-item>

                  <el-form-item label="State:" prop="state">
                    <el-input v-model="wishlistItem.state" />
                  </el-form-item>

                  <el-form-item label="Trip Start Time" required>
                    <el-form-item prop="startTime">
                      <el-date-picker
                        v-model="wishlistItem.startTime"
                        type="date"
                        label="Pick a date"
                        placeholder="Pick a date"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label="Trip End Time" required>
                    <el-form-item prop="endTime">
                      <el-date-picker
                        v-model="wishlistItem.endTime"
                        type="date"
                        label="Pick a date"
                        placeholder="Pick a date"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label="Details:" prop="details">
                    <el-input
                      v-model="wishlistItem.details"
                      type="textarea"
                      placeholder="Trip plan or want to visit places..."
                    />
                  </el-form-item>

                  <el-button type="primary" @click="submitForm(ruleFormRef)"
                    >Create</el-button
                  >
                  <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                </el-form>
              </el-card>
            </el-main>
          </el-container>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</template>

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

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  cityName: [
    {
      required: true,
      message: "Please give which city you want to visit.",
      trigger: "blur",
    },
    { min: 0, max: 20, message: "Length should be 0 to 20", trigger: "blur" },
  ],
  state: [
    {
      required: true,
      message: "Please give the stat of the city located.",
      trigger: "blur",
    },
  ],
  startTime: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  endTime: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
});

// TODO: when API ready, change to service
const wishlistList = reactive([
  {
    wishlistId: 1,
    userId: 1,
    cityName: "Example City Name1",
    state: "Example State",
    stateCode: 51,
    startTime: "date1",
    endTime: "date2",
    details: "Plans",
  },
  {
    wishlistId: 2,
    userId: 1,
    cityName: "Example City Name2",
    state: "Example State",
    stateCode: 51,
    startTime: "date1",
    endTime: "date2",
    details: "Plans",
  },
]);

// TODO: when API ready, change to service
const wishlistItem = ref(new WishlistItemModel());

function selectItem(idx: number) {
  console.log("Selected wishlist Item: " + idx);
  wishlistItem.value = reactive(wishlistList[idx]);
}

function addNewWishlistItem() {
  console.log("addNewWishlistItem");
  wishlistItem.value = new WishlistItemModel();
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
    console.log(wishlistItem.value);
  });
};

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

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style scoped>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-main {
  --el-main-padding: 0px 20px 20px 20px;
}

.main-card {
  padding: 0 0 0 20px;
}
</style>