history main body started

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

@@ -25,7 +25,100 @@
             </el-card>
           </el-space>
         </el-aside>
-        <el-main>Main</el-main>
+        <el-main>
+          <!-- This is the main body part -->
+          <el-card shadow="never" class="main-card">
+                <span>{{displayPage}} Matched Record Detail</span>
+                <el-form
+                  ref="ruleFormRef"
+                  :model="agreedRecord"
+                  :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="city">
+                    <el-input v-model="agreedRecord.city" :readonly="true" />
+                  </el-form-item>
+
+                  <el-form-item  label="State:" prop="state">
+                    <el-select
+                        v-model="agreedRecord.state"
+                        placeholder="Please select state"
+                        :disabled="true"
+                    >
+                      <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">
+                    <el-form-item prop="startTime">
+                      <el-date-picker
+                        v-model="agreedRecord.startTime"
+                        type="date"
+                        label="Pick a date"
+                        placeholder="Pick a date"
+                        style="width: 100%"
+                        :readonly="true"
+                      />
+                    </el-form-item>
+                  </el-form-item>
+
+                  <el-form-item label="Trip End Time">
+                    <el-form-item prop="endTime">
+                      <el-date-picker
+                        v-model="agreedRecord.endTime"
+                        type="date"
+                        label="Pick a date"
+                        placeholder="Pick a date"
+                        style="width: 100%"
+                        :readonly="true"
+                      />
+                    </el-form-item>
+                  </el-form-item>
+
+                  <!-- Rating and comment when the agreement is due -->
+                  <el-form-item label="Rate Your Visitor:" prop="toVisitorStar" 
+                    v-if="!agreedRecord.onGoing && displayPage==='Offer'" >
+                    <el-rate
+                      v-model="agreedRecord.toVisitorStar"
+                      :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+                      show-text
+                    />
+                  </el-form-item>
+
+                  <el-form-item label="Leave Comment:" prop="toVisitorComment"
+                    v-if="!agreedRecord.onGoing && displayPage==='Offer'">
+
+                  </el-form-item>
+
+                  <el-form-item label="Rate Your Host:" prop="toOfferStar"
+                    v-if="!agreedRecord.onGoing && displayPage==='Wishlist'">
+                    <el-rate
+                      v-model="agreedRecord.toOfferStar"
+                      :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+                      show-text
+                    />
+                  </el-form-item>
+
+                  <el-form-item label="Leave Comment:" prop="toOfferComment"
+                    v-if="!agreedRecord.onGoing && displayPage==='Wishlist'" >
+
+                  </el-form-item>
+
+
+                  <el-button type="primary" v-if="buttonState === 'edit'" @click="onEdit()"
+                  >Edit Comment</el-button>
+                  <el-button type="success" v-if="buttonState === 'update'" @click="updateForm(ruleFormRef)"
+                  >Save</el-button>
+                </el-form>
+              </el-card>
+        </el-main>
       </el-container>
     </el-container>
   </div>
@@ -37,16 +130,20 @@ import { Calendar } from '@element-plus/icons-vue'
 import { reactive, ref, onMounted } from "vue";
 import {AgreedRecordModel} from "@/models/AgreedRecordModel";
 import * as AgreedRecordService from "@/services/AgreedMatchService";
+import type { FormInstance, FormRules } from "element-plus";
+import { USA_STATE_INITAL_LIST } from "@/services/Constans";
 
-let displayPage = null;
+let displayPage = ref("");
 const sideList = reactive({value:[]});
 const agreedRecord = ref(new AgreedRecordModel());
+const buttonState = ref("edit");
 
-const selectItem = (listIdx) => {
-  agreedRecord.value = sideList[listIdx];
+const selectItem = (listIdx:number) => {
+  agreedRecord.value = sideList.value[listIdx];
+  console.log("You selected index: " + listIdx+" , and data is: ", agreedRecord.value)
 }
 
-const handleTabClick = (tabIdx) => {
+const handleTabClick = (tabIdx: number) => {
   if(tabIdx == 0){
     clickOnOfferTab();
   }else if(tabIdx == 1){
@@ -56,7 +153,7 @@ const handleTabClick = (tabIdx) => {
 
 const clickOnOfferTab = async() =>{
   // Load agreed offers from backend
-  displayPage = "offer";
+  displayPage.value = "Offer";
   await AgreedRecordService.getAgreedOfferRecord().then((response)=>{
     console.log("Receiving offer records from backend: ", response);
     if(response["data"]!== null){
@@ -69,11 +166,10 @@ const clickOnOfferTab = async() =>{
 
 const clickOnWishlistTab = async() =>{
   // Load agreed Wishlist from backend
-  displayPage = "wishlist";
-  await AgreedRecordService.getAgreedWishlistRecord().then((response)=>{
-    console.log("Receiving wishlist records from backend: ", response);
-    // remove it when done
-    let testData = {
+  displayPage.value = "Wishlist";
+
+  // remove it when done
+  let testData = {
       "message": "Success",
       "status": "OK",
       "data": [
@@ -95,22 +191,90 @@ const clickOnWishlistTab = async() =>{
         }
       ]
     }
-    if(response === undefined){
-      sideList.value = testData["data"]
-    }
-    // remove it when done
-    if(response["data"]!== null){
-      sideList.value = response["data"];
-    }else{
-      // TODO: display empty page
-    }
-  })
+    
+    sideList.value = testData.data
+    
+
+  // await AgreedRecordService.getAgreedWishlistRecord().then((response)=>{
+  //   console.log("Receiving wishlist records from backend: ", response);
+  //   if(response["data"]!== null){
+  //     sideList.value = response["data"];
+  //   }else{
+  //     // TODO: display empty page
+  //   }
+  // })
 }
 
-const formatDate = (dateString) => {
+const formatDate = (dateString: string) => {
   const date = new Date(dateString);
   return new Intl.DateTimeFormat('en-US').format(date);
 }
+
+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",
+    },
+  ],
+});
+
+const onEdit = () =>{
+  buttonState.value = "update";
+}
+
+const updateForm = async (formEl: FormInstance | undefined) =>{
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      AgreedRecordService.updateRatingInformation( agreedRecord.value).then((response)=>{
+        console.log("Receiving wishlist item data", response);
+        if(response["data"] === null){
+          // TODO: create failed, handle it later
+        }else{
+          buttonState.value = "edit";
+        }
+        console.log("submit!");
+        })
+    } else {
+      console.log("error submit!", fields);
+    }
+    console.log(agreedRecord.value);
+  });
+}
+
 </script>
 
 <style>