Skip to content
Snippets Groups Projects
Commit fb9ee85d authored by fz2907's avatar fz2907
Browse files

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

Add readonly and disabled to offer and wishlist pages so user only allowed to change in certain state
parent d5d81e18
No related branches found
No related tags found
2 merge requests!34Sprint 2 done,!311. add vuex
Hide whitespace changes
Inline Side-by-side
Showing
with 87 additions and 33 deletions
BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/WishlistPageController.java
+ 2
− 2
View file @ fb9ee85d
......@@ -75,10 +75,10 @@ public class WishlistPageController {
}
@DeleteMapping("/deleteWishlistItem/{wishlistItemId}")
public ResponseModel deleteWishlistItem(@PathVariable Long wishlistItemId,
@CookieValue(value = "userId") Long userId){
public ResponseModel deleteWishlistItem(@PathVariable Long wishlistItemId){
ResponseModel responseModel = new ResponseModel();
try{
Long userId = wishlistPageService.getPairedUserId(wishlistItemId);
wishlistPageService.deleteWishlistItem(wishlistItemId);
responseModel.setMessage("Success");
responseModel.setStatus(HttpStatus.OK);
......
BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/repositories/UserOfferWishlistLookUpRepository.java
+ 1
− 1
View file @ fb9ee85d
......@@ -8,7 +8,7 @@ import java.util.List;
public interface UserOfferWishlistLookUpRepository extends JpaRepository<UserOfferWishlistLookUpModel, Long> {
List<UserOfferWishlistLookUpModel> findAllByUserId(Long userId);
UserOfferModel findByWishlistItemId(Long wishlistItemId);
UserOfferWishlistLookUpModel findByWishlistItemId(Long wishlistItemId);
void deleteByWishlistItemId(Long wishlistItemId);
}
BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/WishlistPageService.java
+ 4
− 0
View file @ fb9ee85d
......@@ -91,6 +91,10 @@ public class WishlistPageService {
return wishlistItemRepository.findByWishlistItemId(wishlistItemId);
}
public Long getPairedUserId( Long wishlistItemId ){
return userOfferWishlistLookUpRepository.findByWishlistItemId(wishlistItemId).getUserId();
}
/**
* This function will take a UserOfferModel. it will fill the StateCode with it first,
......
FrontendFolder/switch-room/src/components/OfferPage.vue
+ 12
− 7
View file @ fb9ee85d
......@@ -20,14 +20,16 @@
>
<el-form-item label="Located City" prop="spaceLocateCity">
<el-col :span="8">
<el-input v-model="ruleForm.spaceLocateCity" />
<el-input v-model="ruleForm.spaceLocateCity" :readonly="buttonState === 'edit'"/>
</el-col>
</el-form-item>
<el-form-item label="State" prop="state">
<el-col :span="8">
<el-select
v-model="ruleForm.state"
placeholder="Select state">
placeholder="Select state"
:disabled="buttonState === 'edit'"
>
<el-option v-for="(state_item, index) in USA_STATE_INITAL_LIST"
:label="state_item" :value="state_item" />
</el-select>
......@@ -35,7 +37,7 @@
</el-form-item>
<el-form-item label="Zip Code" prop="zipCode">
<el-col :span="5">
<el-input v-model="ruleForm.zipCode" placeholder="24061.." />
<el-input v-model="ruleForm.zipCode" placeholder="24061" :readonly="buttonState === 'edit'"/>
</el-col>
</el-form-item>
<el-col :span="24">
......@@ -43,6 +45,7 @@
<el-select
v-model="ruleForm.spaceType"
placeholder="Please select your Space Type"
:disabled="buttonState === 'edit'"
>
<el-option
label="Apartment (No Roommates)"
......@@ -75,13 +78,13 @@
:required="ruleForm.spaceType === 'other'"
>
<el-col :span="8">
<el-input v-model="ruleForm.otherSpaceType" />
<el-input v-model="ruleForm.otherSpaceType" :readonly="buttonState === 'edit'"/>
</el-col>
</el-form-item>
<el-form-item label="Space Available for Offering?">
<el-col :span="2">
<el-form-item prop="offering">
<el-switch v-model="ruleForm.offering" />
<el-switch v-model="ruleForm.offering" :disabled="buttonState === 'edit'"/>
</el-form-item>
</el-col>
</el-form-item>
......@@ -99,6 +102,7 @@
label="Pick a date"
placeholder="Pick a date"
style="width: 100%"
:readonly="buttonState === 'edit'"
/>
</el-form-item>
</el-col>
......@@ -112,6 +116,7 @@
label="Pick a time"
placeholder="Pick a time"
style="width: 100%"
:readonly="buttonState === 'edit'"
/>
</el-form-item>
</el-col>
......@@ -123,14 +128,14 @@
prop="maxNumberOfPeople"
>
<el-col :span="4">
<el-input v-model="ruleForm.maxNumberOfPeople" />
<el-input v-model="ruleForm.maxNumberOfPeople" :readonly="buttonState === 'edit'"/>
</el-col>
</el-form-item>
<el-form-item></el-form-item>
<el-form-item label="Space Details:" prop="spaceDetails">
<el-col :span="16"
><el-input v-model="ruleForm.spaceDetails" type="textarea"
><el-input v-model="ruleForm.spaceDetails" type="textarea" :readonly="buttonState === 'edit'"
/></el-col>
</el-form-item>
<el-form-item v-if="buttonState === 'create'">
......
FrontendFolder/switch-room/src/components/WishlistPage.vue
+ 68
− 23
View file @ fb9ee85d
......@@ -20,10 +20,10 @@
style="width: 280px"
@click="selectItem(index)"
>
<span>{{ item.cityName }}</span>
<span>{{ item.cityName }}, {{ item.state }}</span>
<div class="bottom">
<time class="time"
>"{{ item.startTime }} to {{ item.endTime }}"</time
>"{{ formatDate(item.startTime) }} to {{ formatDate(item.endTime) }}"</time
>
</div>
</el-card>
......@@ -54,17 +54,19 @@
<el-form-item></el-form-item>
<el-form-item label="City Name:" prop="cityName">
<el-input v-model="wishlistItem.cityName" />
<el-input v-model="wishlistItem.cityName" :readonly="buttonState === 'edit'" />
</el-form-item>
<el-form-item label="Zip Code:" prop="zipCode">
<el-input v-model="wishlistItem.zipCode" />
<el-input v-model="wishlistItem.zipCode" :readonly="buttonState === 'edit'"/>
</el-form-item>
<el-form-item label="State:" prop="state">
<el-form-item label="State:" prop="state">
<el-select
v-model="wishlistItem.state"
placeholder="Please select state">
placeholder="Please select state"
:disabled="buttonState === 'edit'"
>
<el-option v-for="(state_item, index) in USA_STATE_INITAL_LIST"
:label="state_item" :value="state_item" />
</el-select>
......@@ -78,6 +80,7 @@
label="Pick a date"
placeholder="Pick a date"
style="width: 100%"
:readonly="buttonState === 'edit'"
/>
</el-form-item>
</el-form-item>
......@@ -90,6 +93,7 @@
label="Pick a date"
placeholder="Pick a date"
style="width: 100%"
:readonly="buttonState === 'edit'"
/>
</el-form-item>
</el-form-item>
......@@ -99,13 +103,18 @@
v-model="wishlistItem.details"
type="textarea"
placeholder="Trip plan or want to visit places..."
:readonly="buttonState === 'edit'"
/>
</el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>Create</el-button
>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
<el-button type="primary" v-if="buttonState === 'create'" @click="submitForm(ruleFormRef)"
>Create</el-button>
<el-button type="primary" v-if="buttonState === 'edit'" @click="onEdit(ruleFormRef)"
>Edit</el-button>
<el-button type="success" v-if="buttonState === 'update'" @click="updateForm(ruleFormRef)"
>Save</el-button>
<el-button type="danger" v-if="buttonState === 'update'" @click="deleteForm(ruleFormRef)">
Delete</el-button>
</el-form>
</el-card>
</el-main>
......@@ -167,30 +176,44 @@ const rules = reactive<FormRules>({
],
});
// TODO: uncomment it when API connection ready
const userId = 233;
const wishlistList = reactive({value:[]});
const wishlistItem = ref(new WishlistItemModel());
wishlistItem.value.wishlistItemId = null;
let buttonState = ref("create");
let selectedIdx = 0;
onMounted(() => {
WishlistService.getUserWishlistInfo().then((data)=>{
wishlistInitLoad();
})
const onEdit = () =>{
buttonState.value = "update";
}
const wishlistInitLoad = async() =>{
await WishlistService.getUserWishlistInfo().then((data)=>{
console.log("Receiving wishlist list data", data);
if(data["data"] === null){
if(data["data"] === null || data["data"].length === 0){
wishlistList.value = [];
buttonState.value = "create";
}else{
wishlistList.value
wishlistList.value = data["data"];
selectItem(0);
buttonState.value = "edit";
}
})
}
})
const formatDate = (dateString) => {
const date = new Date(dateString);
return new Intl.DateTimeFormat('en-US').format(date);
}
function selectItem(idx: number) {
console.log("Selected wishlist Item: " + idx);
wishlistItem.value = reactive(wishlistList.value[idx]);
buttonState.value = "edit";
selectedIdx = idx;
}
function addNewWishlistItem() {
......@@ -198,7 +221,9 @@ function addNewWishlistItem() {
console.log("addNewWishlistItem");
wishlistItem.value = new WishlistItemModel();
wishlistItem.value.wishlistItemId = null;
buttonState.value = "create";
}
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
......@@ -210,6 +235,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
}else{
wishlistItem.value = data["data"];
wishlistList.value.push(data["data"]);
buttonState.value = "edit";
}
})
console.log("submit!");
......@@ -220,12 +246,31 @@ const submitForm = async (formEl: FormInstance | undefined) => {
});
};
const resetForm = (formEl: FormInstance | undefined) => {
// TODO: make it delete to testing, need to change it back
// if (!formEl) return;
// formEl.resetFields();
const updateForm = async (formEl: FormInstance | undefined) =>{
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
WishlistService.createNewWishlistItem( wishlistItem.value).then((data)=>{
console.log("Receiving wishlist item data", data);
if(data["data"] === null){
// TODO: create failed, handle it later
}else{
wishlistItem.value = data["data"];
wishlistList.value[selectedIdx] = data["data"];
buttonState.value = "edit";
}
})
console.log("submit!");
} else {
console.log("error submit!", fields);
}
console.log(wishlistItem.value);
});
}
const deleteForm = async (formEl: FormInstance | undefined) => {
if(wishlistItem.value.wishlistItemId !== null){
WishlistService.deleteWishlistItem( wishlistItem.value.wishlistItemId).then((data)=>{
await WishlistService.deleteWishlistItem( wishlistItem.value.wishlistItemId).then((data)=>{
console.log("Delete wishlist item", data);
if(data["data"] === null){
// TODO: delete failed or something wrong
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment