Comment basic feature is done, need more testing and some help UI

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/AgreedRecordController.java

@@ -5,6 +5,7 @@ import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
 import org.springframework.web.bind.annotation.*;
+import vt.CS5934.SwitchRoom.models.AgreedRecordModel;
 import vt.CS5934.SwitchRoom.models.ResponseModel;
 import vt.CS5934.SwitchRoom.services.CommentRatingService;
 
@@ -53,4 +54,21 @@ public class AgreedRecordController {
             return responseModel;
         }
     }
+
+    @PostMapping("/updateCommentItem")
+    public ResponseModel updateRecordCommentAndRating(@RequestBody AgreedRecordModel agreedRecordModel){
+        ResponseModel responseModel = new ResponseModel();
+        try{
+            responseModel.setMessage("Success");
+            responseModel.setStatus(HttpStatus.OK);
+            responseModel.setData(commentRatingService.saveNewCommentAndRating(agreedRecordModel));
+            return responseModel;
+        }catch (Exception e){
+            logger.error("Error in getWishlistList: "+e);
+            responseModel.setMessage("updateRecordCommentAndRating Failed, Reason: " + e);
+            responseModel.setStatus(HttpStatus.NOT_FOUND);
+            responseModel.setData(null);
+            return responseModel;
+        }
+    }
 }

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/CommentRatingService.java

@@ -35,23 +35,7 @@ public class CommentRatingService {
         }
     }
 
-    public void addCommentToHost(String comment, Long agreedRecordId){
-        Optional<AgreedRecordModel> record = agreedRecordRepository.findById(agreedRecordId);
-        record.ifPresent(item -> item.setToOfferComment(comment));
-    }
-
-    public void addRatingToHost(int rating, Long agreedRecordId){
-        Optional<AgreedRecordModel> record = agreedRecordRepository.findById(agreedRecordId);
-        record.ifPresent(item -> item.setToOfferStar(rating));
-    }
-
-    public void addCommentToVisitor(String comment, Long agreedRecordId){
-        Optional<AgreedRecordModel> record = agreedRecordRepository.findById(agreedRecordId);
-        record.ifPresent(item -> item.setToVisitorComment(comment));
-    }
-
-    public void addRatingToVisitor(int rating, Long agreedRecordId){
-        Optional<AgreedRecordModel> record = agreedRecordRepository.findById(agreedRecordId);
-        record.ifPresent(item -> item.setToVisitorStar(rating));
+    public AgreedRecordModel saveNewCommentAndRating(AgreedRecordModel agreedRecordModel){
+        return agreedRecordRepository.save(agreedRecordModel);
     }
 }

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

@@ -27,7 +27,8 @@
         </el-aside>
         <el-main>
           <!-- This is the main body part -->
-          <el-card shadow="never" class="main-card">
+          <el-empty v-if="sideList.value.length===0" />
+          <el-card shadow="never" class="main-card" v-if="sideList.value.length>0">
                 <span>{{displayPage}} Matched Record Detail</span>
                 <el-form
                   ref="ruleFormRef"
@@ -89,12 +90,17 @@
                       v-model="agreedRecord.toVisitorStar"
                       :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
                       show-text
+                      :disabled="buttonState === 'edit'"
                     />
                   </el-form-item>
 
                   <el-form-item label="Leave Comment:" prop="toVisitorComment"
                     v-if="!agreedRecord.onGoing && displayPage==='Offer'">
-
+                    <el-input
+                        v-model="agreedRecord.toVisitorComment"
+                        type="textarea"
+                        :readonly="buttonState === 'edit'"
+                    />
                   </el-form-item>
 
                   <el-form-item label="Rate Your Host:" prop="toOfferStar"
@@ -103,12 +109,17 @@
                       v-model="agreedRecord.toOfferStar"
                       :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
                       show-text
+                      :disabled="buttonState === 'edit'"
                     />
                   </el-form-item>
 
                   <el-form-item label="Leave Comment:" prop="toOfferComment"
                     v-if="!agreedRecord.onGoing && displayPage==='Wishlist'" >
-
+                    <el-input
+                        v-model="agreedRecord.toOfferComment"
+                        type="textarea"
+                        :readonly="buttonState === 'edit'"
+                    />
                   </el-form-item>
 
 
@@ -133,11 +144,16 @@ import * as AgreedRecordService from "@/services/AgreedMatchService";
 import type { FormInstance, FormRules } from "element-plus";
 import { USA_STATE_INITAL_LIST } from "@/services/Constans";
 
+const ruleFormRef = ref<FormInstance>();
 let displayPage = ref("");
 const sideList = reactive({value:[]});
 const agreedRecord = ref(new AgreedRecordModel());
 const buttonState = ref("edit");
 
+onMounted(() => {
+  handleTabClick(0);
+})
+
 const selectItem = (listIdx:number) => {
   agreedRecord.value = sideList.value[listIdx];
   console.log("You selected index: " + listIdx+" , and data is: ", agreedRecord.value)
@@ -156,10 +172,12 @@ const clickOnOfferTab = async() =>{
   displayPage.value = "Offer";
   await AgreedRecordService.getAgreedOfferRecord().then((response)=>{
     console.log("Receiving offer records from backend: ", response);
-    if(response["data"]!== null){
+    if(response["data"]!== null && response["data"].length > 0){
       sideList.value = response["data"];
+      selectItem(0);
     }else{
-      // TODO: display empty page
+      agreedRecord.value = new AgreedRecordModel();
+      sideList.value = [];
     }
   })
 }
@@ -168,41 +186,16 @@ const clickOnWishlistTab = async() =>{
   // Load agreed Wishlist from backend
   displayPage.value = "Wishlist";
 
-  // remove it when done
-  let testData = {
-      "message": "Success",
-      "status": "OK",
-      "data": [
-        {
-          "id": 1,
-          "stateCityCode": 1,
-          "state": "VA",
-          "city": "Chantilly",
-          "wishlistId": 1,
-          "wishlistUserId": 1,
-          "offerId": 2,
-          "startTime": "2022-11-07T04:56:25.000+00:00",
-          "endTime": "2022-11-11T04:55:50.000+00:00",
-          "toOfferStar": 5,
-          "toVisitorStar": 5,
-          "toOfferComment": null,
-          "toVisitorComment": null,
-          "onGoing": true
-        }
-      ]
+  await AgreedRecordService.getAgreedWishlistRecord().then((response)=>{
+    console.log("Receiving wishlist records from backend: ", response);
+    if(response["data"]!== null && response["data"].length > 0){
+      sideList.value = response["data"];
+       selectItem(0);
+    }else{
+     sideList.value = [];
+     agreedRecord.value = new AgreedRecordModel();
     }
-    
-    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: string) => {
@@ -211,44 +204,23 @@ const formatDate = (dateString: string) => {
 }
 
 const rules = reactive<FormRules>({
-  cityName: [
+  toVisitorComment: [
     {
-      required: true,
-      message: "Please give which city you want to visit.",
+      required: false,
+      message: "Please share your experience of the visitor.",
       trigger: "blur",
     },
-    { min: 0, max: 20, message: "Length should be 0 to 20", trigger: "blur" },
+    { min: 0, max: 500, message: "Length should be 0 to 500", trigger: "blur" },
   ],
-  zipCode:[
+  toOfferComment: [
     {
-      required: true,
-      message: "Please give the stat of the city located.",
+      required: false,
+      message: "Please share your experience of this visit.",
       trigger: "blur",
     },
+    { min: 0, max: 500, message: "Length should be 0 to 500", 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 = () =>{
@@ -260,7 +232,7 @@ const updateForm = async (formEl: FormInstance | undefined) =>{
   await formEl.validate((valid, fields) => {
     if (valid) {
       AgreedRecordService.updateRatingInformation( agreedRecord.value).then((response)=>{
-        console.log("Receiving wishlist item data", response);
+        console.log("Receiving updateRatingInformation item data", response);
         if(response["data"] === null){
           // TODO: create failed, handle it later
         }else{

FrontendFolder/switch-room/src/services/AgreedMatchService.ts

 import * as serverHttpService from "./ServerHttpService";
+import {AgreedRecordModel} from "@/models/AgreedRecordModel";
 
 const baseUrl = "agreedRecord";
 
@@ -10,3 +11,6 @@ export function getAgreedWishlistRecord() {
     const urlPath = "/wishlist";
     return serverHttpService.Get(baseUrl + urlPath);
 }
+export function updateRatingInformation(agreedRecord: AgreedRecordModel) {
+    return serverHttpService.Post(baseUrl + "/updateCommentItem", agreedRecord);
+}
\ No newline at end of file