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.value"
                  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="Zip Code:" prop="zipCode">
                    <el-input v-model="wishlistItem.zipCode" />
                  </el-form-item>

                  <el-form-item label="State:" prop="state">
                    <el-select
                      v-model="wishlistItem.state"
                      placeholder="Please select state"
                    >
                      <el-option
                        v-for="(state_item, index) in USA_STATE_INITAL_LIST"
                        :label="state_item"
                        :value="state_item"
                      />
                    </el-select>
                  </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, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { WishlistItemModel } from "@/models/WishlistItemModel";
import * as WishlistService from "@/services/WishlistService";
import { USA_STATE_INITAL_LIST } from "@/services/Constans";

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" },
  ],
  zipCode: [
    {
      required: true,
      message: "Please give the stat of the city located.",
      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: uncomment it when API connection ready
const userId = 233;
const wishlistList = reactive({ value: [] });
const wishlistItem = ref(new WishlistItemModel());
wishlistItem.value.wishlistItemId = null;

onMounted(() => {
  WishlistService.getUserWishlistInfo(userId).then((data) => {
    console.log("Receiving wishlist list data", data);
    if (data["data"] === null) {
      wishlistList.value = [];
    } else {
      wishlistList.value;
      wishlistList.value = data["data"];
    }
  });
});

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

function addNewWishlistItem() {
  // TODO: disable it when it already displays the form
  console.log("addNewWishlistItem");
  wishlistItem.value = new WishlistItemModel();
  wishlistItem.value.wishlistItemId = null;
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      WishlistService.createNewWishlistItem(userId, wishlistItem.value).then(
        (data) => {
          console.log("Receiving create wishlist item data", data);
          if (data["data"] === null) {
            // TODO: create failed, handle it later
          } else {
            wishlistItem.value = data["data"];
            wishlistList.value.push(data["data"]);
          }
        }
      );
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
    console.log(wishlistItem.value);
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  // TODO: make it delete to testing, need to change it back
  // if (!formEl) return;
  // formEl.resetFields();
  if (wishlistItem.value.wishlistItemId !== null) {
    WishlistService.deleteWishlistItem(
      userId,
      wishlistItem.value.wishlistItemId
    ).then((data) => {
      console.log("Delete wishlist item", data);
      if (data["data"] === null) {
        // TODO: delete failed or something wrong
      } else {
        wishlistList.value = data["data"];
        addNewWishlistItem();
      }
    });
  }
};

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>