WishListPage whole UI done.

FrontendFolder/switch-room/src/components/WishlistPage.vue

@@ -5,7 +5,7 @@
       <el-card style="width: 100%">
         <template #header>
           <div class="card-header">
-            <span>Your Offer Information</span>
+            <span>Your Wishlist Information</span>
           </div>
         </template>
 
@@ -15,23 +15,84 @@
             <el-aside width="300px">
               <el-space direction="vertical" width="100%">
                 <el-card
-                  v-for="wishlistListItem in wishlistList"
+                  v-for="(item, index) in wishlistList"
                   shadow="hover"
                   style="width: 280px"
+                  @click="selectItem(index)"
                 >
-                  <span>{{ wishlistListItem.cityName }}</span>
+                  <span>{{ item.cityName }}</span>
                   <div class="bottom">
                     <time class="time">"2077-7-77 to 2077-7-77"</time>
                   </div>
                 </el-card>
-                <el-card shadow="hover" style="width: 280px">
-                  <el-icon><Plus /></el-icon
-                  ><span> + Add New Item To Wishlist</span>
+                <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>Main</el-main>
+            <el-main>
+              <el-card shadow="never">
+                <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>
@@ -40,10 +101,14 @@
   </el-row>
 </template>
 
-<script>
-import { reactive } from "vue";
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import type { FormInstance, FormRules } from "element-plus";
+
+const formSize = ref("default");
+const ruleFormRef = ref<FormInstance>();
 
-let wishlistList = reactive([
+let wishlistList = [
   {
     wishlistItem_Id: 1,
     cityName: "Example City Name1",
@@ -60,14 +125,94 @@ let wishlistList = reactive([
     endTime: "date2",
     details: "Plans",
   },
-]);
+];
 
-export default {
-  name: "WishListPage",
-  data() {
-    return { wishlistList };
-  },
+const wishlistItem = reactive({
+  wishlistItem_Id: 1,
+  cityName: "Example City Name1",
+  state: "Example State",
+  startTime: "date1",
+  endTime: "date2",
+  details: "Plans",
+});
+
+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",
+    },
+  ],
+});
+
+const selectItem = (idx: number) => {
+  console.log("Selected wishlist Item: " + idx);
 };
+
+const addNewWishlistItem = () => {
+  console.log("addNewWishlistItem");
+};
+
+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);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+  value: `${idx + 1}`,
+  label: `${idx + 1}`,
+}));
+
+// export default {
+//   name: "WishListPage",
+//   data() {
+//     return { wishlistList };
+//   },
+//   methods: {
+//     selectItem(idx) {
+//       console.log("Selected wishlist Item: " + idx);
+//     },
+//     addNewWishlistItem() {
+//       console.log("addNewWishlistItem");
+//     },
+//   },
+// };
 </script>
 
 <style scoped>
@@ -83,4 +228,7 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+.el-main {
+  --el-main-padding: 0px;
+}
 </style>