Add create, edit and delete button on the offer page and tested.

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

@@ -63,13 +63,13 @@ public class OfferPageController {
     }
 
     @PostMapping("/updateOffer")
-    public ResponseModel updateUserOffer(UserOfferModel offerModel){
+    public ResponseModel updateUserOffer(@RequestBody UserOfferModel offerModel){
         offerPageService.removeOfferFromMatchedTable(offerModel.getUserId());
         return createNewUserOffer(offerModel);
     }
 
-    @DeleteMapping
-    public ResponseModel deleteUserOffer(@CookieValue(value = "userId") Long userId){
+    @DeleteMapping("/deleteOffer/{userId}")
+    public ResponseModel deleteUserOffer(@PathVariable Long userId){
         ResponseModel responseModel = new ResponseModel();
         try{
             offerPageService.deleteUserOffer(userId);

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

@@ -135,14 +135,17 @@
           </el-form-item>
           <el-form-item v-if="buttonState === 'create'">
             <el-button type="primary" @click="submitForm(ruleFormRef)"
-              >Create</el-button
-            >
+              >Create</el-button>
             <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
           </el-form-item>
+          <el-form-item v-if="buttonState === 'edit'">
+            <el-button type="primary" @click="editForm()"
+            >Edit</el-button>
+          </el-form-item>
           <el-form-item v-if="buttonState === 'update'">
-            <el-button type="success" @click="updateFrom(ruleFormRef)"
+            <el-button type="success" @click="updateForm(ruleFormRef)"
             >Save</el-button>
-            <el-button type="danger" @click="deleteFrom(ruleFormRef)">Delete</el-button>
+            <el-button type="danger" @click="deleteForm(ruleFormRef)">Delete</el-button>
           </el-form-item>
 
         </el-form>
@@ -208,20 +211,24 @@ let ruleForm = ref(new OfferFormModel());
 let buttonState = ref("create");
 
 onMounted(() => {
-OfferPageService.getUserOfferInfoFromServer().then( (data) => {
-  console.log("Receive user offer data: ", data);
-  if(data["data"] === null){
-    // TODO: Handle fetch error
-  }else{
-    ruleForm.value = data["data"];
-    if(ruleForm.value.spaceLocateCity == null || ruleForm.value.spaceLocateCity == ""){
-      buttonState.value = "create";
+  loadInitPage();
+})
+
+const loadInitPage = async () =>{
+  await OfferPageService.getUserOfferInfoFromServer().then( (data) => {
+    console.log("Receive user offer data: ", data);
+    if(data["data"] === null){
+      // TODO: Handle fetch error
     }else{
-      buttonState.value = "update";
+      ruleForm.value = data["data"];
+      if(ruleForm.value.spaceLocateCity == null || ruleForm.value.spaceLocateCity == ""){
+        buttonState.value = "create";
+      }else{
+        buttonState.value = "edit";
+      }
     }
-  }
-  })
-})
+  });
+}
 
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
@@ -232,6 +239,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       OfferPageService.createNewUserOffer(ruleForm.value).then((data) => {
         console.log("Save user offer data: ", data);
         ruleForm.value = data["data"];
+        buttonState.value = "edit";
       })
       console.log("submit!");
     } else {
@@ -240,7 +248,11 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   });
 };
 
-const updateFrom = async (formEl: FormInstance | undefined) => {
+const editForm = () => {
+  buttonState.value = "update";
+}
+
+const updateForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
@@ -248,25 +260,28 @@ const updateFrom = async (formEl: FormInstance | undefined) => {
       OfferPageService.updateOffer(ruleForm.value).then((data) =>{
         console.log("Update user offer data: ", data);
         ruleForm.value = data["data"];
+        buttonState.value = "edit";
       })
     } else {
       console.log("error submit!", fields);
     }
-
   });
 };
 
-const deleteFrom = () => {
+const deleteForm = async(formEl: FormInstance | undefined) => {
   // TODO: Check the return result
-  OfferPageService.deleteOffer().then((data) =>{
+  await OfferPageService.deleteOffer(ruleForm.value.userId).then((data) =>{
     console.log("Deleting Offer Record");
     console.log("Message: " + data["message"]);
+    resetForm();
+    buttonState.value = "create";
   });
 };
 
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
+const resetForm = () => {
+  let userId = ruleForm.value.userId;
+  ruleForm.value = new OfferFormModel();
+  ruleForm.value.userId = userId;
 };
 
 const options = Array.from({ length: 10000 }).map((_, idx) => ({

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

@@ -38,8 +38,8 @@ export function updateOffer(offerForm: OfferFormModel) {
  * @param userId user's id
  * @param offerId form id
  */
-export function deleteOffer() {
-  const urlPath = baseUrl + "/deleteOffer";
+export function deleteOffer(userId : number) {
+  const urlPath = baseUrl + "/deleteOffer/"+userId;
   return serverHttpService.Delete(urlPath);
 }