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

WishListPage and OfferPage service done. Now move to backend service.

parent c6d9da1e
No related branches found
No related tags found
3 merge requests!27Sprint 1 done,!20WishListPage and OfferPage UI done.,!14Offer page frontend + backend + DB connection done
Hide whitespace changes
Inline Side-by-side
Showing
with 332 additions and 196 deletions
.idea/workspace.xml
+ 15
− 6
View file @ b834a36a
......@@ -4,13 +4,13 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b729e076-3c33-49b4-9d1d-ab622bea054d" name="Changes" comment="Change service to ts">
<change afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/OfferPageService.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/WishlistService.ts" afterDir="false" />
<list default="true" id="b729e076-3c33-49b4-9d1d-ab622bea054d" name="Changes" comment="WishListPage and OfferPage service done. Now move to backend service.">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/components/OfferPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/components/OfferPage.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/components/WishlistPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/components/WishlistPage.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/models/OfferFormModel.ts" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/models/OfferFormModel.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/OfferPageService.ts" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/OfferPageService.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/ServerHttpService.ts" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/ServerHttpService.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/WishlistService.ts" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/WishlistService.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
......@@ -142,7 +142,14 @@
<option name="project" value="LOCAL" />
<updated>1666222640794</updated>
</task>
<option name="localTasksCounter" value="6" />
<task id="LOCAL-00006" summary="WishListPage and OfferPage UI done.&#10;But ref&lt;FormInstance&gt; has problem, need to check.">
<created>1666242778588</created>
<option name="number" value="00006" />
<option name="presentableId" value="LOCAL-00006" />
<option name="project" value="LOCAL" />
<updated>1666242778588</updated>
</task>
<option name="localTasksCounter" value="7" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
......@@ -170,7 +177,9 @@
<MESSAGE value="WishListPage router done" />
<MESSAGE value="WishListPage side list UI done" />
<MESSAGE value="WishListPage whole UI done." />
<option name="LAST_COMMIT_MESSAGE" value="WishListPage whole UI done." />
<MESSAGE value="WishListPage and OfferPage UI done.&#10;But ref&lt;FormInstance&gt; has problem, need to check." />
<MESSAGE value="WishListPage and OfferPage service done. Now move to backend service." />
<option name="LAST_COMMIT_MESSAGE" value="WishListPage and OfferPage service done. Now move to backend service." />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />
......
FrontendFolder/switch-room/src/components/OfferPage.vue
+ 84
− 60
View file @ b834a36a
......@@ -28,32 +28,37 @@
<el-input v-model="ruleForm.zipCode" placeholder="24061.." />
</el-col>
</el-form-item>
<el-form-item label="Space Type" prop="spaceType">
<el-select
v-model="ruleForm.spaceType"
placeholder="Please select your Space Type"
>
<el-option label="Apartment (No Roommates)" value="apt-single" />
<el-option
label="Apartment (Shared with Roommates)"
value="apt-share"
/>
<el-option label="Townhouse (No Roommates)" value="th-single" />
<el-option
label="Townhouse (Shared with Roommates)"
value="th-share"
/>
<el-option
label="Single Family House (No Roommates)"
value="sfh-single"
/>
<el-option
label="Single Family House (Shared with Roommates)"
value="sfh-share"
/>
<el-option label="Other" value="other" />
</el-select>
</el-form-item>
<el-col :span="24">
<el-form-item label="Space Type" prop="spaceType">
<el-select
v-model="ruleForm.spaceType"
placeholder="Please select your Space Type"
>
<el-option
label="Apartment (No Roommates)"
value="apt-single"
/>
<el-option
label="Apartment (Shared with Roommates)"
value="apt-share"
/>
<el-option label="Townhouse (No Roommates)" value="th-single" />
<el-option
label="Townhouse (Shared with Roommates)"
value="th-share"
/>
<el-option
label="Single Family House (No Roommates)"
value="sfh-single"
/>
<el-option
label="Single Family House (Shared with Roommates)"
value="sfh-share"
/>
<el-option label="Other" value="other" />
</el-select>
</el-form-item>
</el-col>
<el-form-item
label="Other Type"
v-if="ruleForm.spaceType === 'other'"
......@@ -91,7 +96,7 @@
<span class="text-gray-500"> To </span>
</el-col>
<el-col :span="7">
<el-form-item prop="availableTimeEnd">
<el-form-item prop="_availableTimeEnd">
<el-date-picker
v-model="ruleForm.availableTimeEnd"
label="Pick a time"
......@@ -105,7 +110,7 @@
label="Max Number of People"
:required="ruleForm.offering"
v-if="ruleForm.offering"
prop="maxNumberOfPeople"
prop="_maxNumberOfPeople"
>
<el-col :span="4">
<el-input v-model="ruleForm.maxNumberOfPeople" />
......@@ -140,13 +145,15 @@
</el-row>
</template>
<script lang="ts">
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { OfferFormModel } from "@/models/OfferFormModel";
import { defineComponent } from "vue";
import * as OfferPageService from "@/services/OfferPageService";
// Form verification relate field
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
spaceLocateCity: [
{
......@@ -171,35 +178,52 @@ const rules = reactive<FormRules>({
},
],
});
// TODO: uncomment it when API connection ready
const userId = -1;
//const ruleForm = reactive(OfferPageService.getUserOfferInfoFromServer(-1));
const ruleForm = reactive(new OfferFormModel());
const currentUserId = -1;
const ruleFormRef = ref<FormInstance>();
const formSize = ref("default");
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
let result = OfferPageService.createNewUserOffer(userId, ruleForm);
// TODO: Check the return result
console.log("submit!");
} else {
console.log("error submit!", fields);
}
console.log(ruleForm);
});
};
export default defineComponent({
data() {
return {
ruleForm: new OfferFormModel(),
rules,
ruleFormRef,
//ruleForm: OfferPageService.getUserOfferInfoFromServer(currentUserId),
};
},
methods: {
async submitForm(formEl: FormInstance | undefined) {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
console.log("submitted!", fields);
} else {
console.log("error submit!", fields);
}
});
},
resetForm(formEl: FormInstance | undefined) {
if (!formEl) return;
formEl.resetFields();
},
},
});
const updateFrom = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
let result = OfferPageService.updateOffer(userId, ruleForm);
// TODO: Check the return result
console.log("update submit!");
} else {
console.log("error submit!", fields);
}
console.log(ruleForm);
});
};
const deleteFrom = () => {
// TODO: Check the return result
let result = OfferPageService.deleteOffer(userId, ruleForm.offerId);
console.log("Record deleted");
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const options = Array.from({ length: 10000 }).map((_, idx) => ({
value: `${idx + 1}`,
label: `${idx + 1}`,
}));
</script>
FrontendFolder/switch-room/src/components/WishlistPage.vue
+ 93
− 57
View file @ b834a36a
......@@ -22,7 +22,9 @@
>
<span>{{ item.cityName }}</span>
<div class="bottom">
<time class="time">"2077-7-77 to 2077-7-77"</time>
<time class="time"
>"{{ item.startTime }} to {{ item.endTime }}"</time
>
</div>
</el-card>
<el-card
......@@ -106,7 +108,7 @@
</el-row>
</template>
<script lang="ts">
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { WishlistItemModel } from "@/models/WishlistItemModel";
......@@ -114,30 +116,6 @@ import { defineComponent } from "vue";
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
let wishlistList = [
{
wishlistId: 1,
userId: 1,
cityName: "Example City Name1",
state: "Example State",
stateCode: 51,
startTime: "date1",
endTime: "date2",
details: "Plans",
},
{
wishlistId: 2,
userId: 1,
cityName: "Example City Name2",
state: "Example State",
stateCode: 51,
startTime: "date1",
endTime: "date2",
details: "Plans",
},
];
const rules = reactive<FormRules>({
cityName: [
{
......@@ -172,39 +150,97 @@ const rules = reactive<FormRules>({
],
});
export default defineComponent({
data() {
return {
wishlistItem: new WishlistItemModel(),
wishlistList,
rules,
};
// TODO: when API ready, change to service
const wishlistList = reactive([
{
wishlistId: 1,
userId: 1,
cityName: "Example City Name1",
state: "Example State",
stateCode: 51,
startTime: "date1",
endTime: "date2",
details: "Plans",
},
methods: {
selectItem(idx: number) {
console.log("Selected wishlist Item: " + idx);
this.wishlistItem = wishlistList[idx];
},
addNewWishlistItem() {
console.log("addNewWishlistItem");
this.wishlistItem = new WishlistItemModel();
},
async submitForm(formEl: FormInstance | undefined) {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
console.log("submit!");
} else {
console.log("error submit!", fields);
}
});
},
resetForm(formEl: FormInstance | undefined) {
if (!formEl) return;
formEl.resetFields();
},
{
wishlistId: 2,
userId: 1,
cityName: "Example City Name2",
state: "Example State",
stateCode: 51,
startTime: "date1",
endTime: "date2",
details: "Plans",
},
});
]);
// TODO: when API ready, change to service
const wishlistItem = ref(new WishlistItemModel());
function selectItem(idx: number) {
console.log("Selected wishlist Item: " + idx);
wishlistItem.value = reactive(wishlistList[idx]);
}
function addNewWishlistItem() {
console.log("addNewWishlistItem");
wishlistItem.value = new WishlistItemModel();
}
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);
}
console.log(wishlistItem.value);
});
};
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 defineComponent({
// data() {
// return {
// wishlistItem: new WishlistItemModel(),
// wishlistList,
// rules,
// };
// },
// methods: {
// selectItem(idx: number) {
// console.log("Selected wishlist Item: " + idx);
// this.wishlistItem = wishlistList[idx];
// },
// addNewWishlistItem() {
// console.log("addNewWishlistItem");
// this.wishlistItem = new WishlistItemModel();
// },
// async submitForm(formEl: FormInstance | undefined) {
// if (!formEl) return;
// await formEl.validate((valid, fields) => {
// if (valid) {
// console.log("submit!");
// } else {
// console.log("error submit!", fields);
// }
// });
// },
// resetForm(formEl: FormInstance | undefined) {
// if (!formEl) return;
// formEl.resetFields();
// },
// },
// });
</script>
<style scoped>
......
FrontendFolder/switch-room/src/services/OfferPageService.ts
+ 10
− 4
View file @ b834a36a
/**
* This calss will fatch and send user offer data from back end
* This class will fetch and send user offer data from back end
*/
import * as serverHttpService from "./ServerHttpService";
......@@ -39,7 +39,13 @@ export function updateOffer(userId: number, offerForm: OfferFormModel) {
* @param offerId form id
*/
export function deleteOffer(userId: number, offerId: number) {
return serverHttpService.Delete(
baseUrl + "/deleteOffer" + userId + "/" + offerId
);
const urlPath = baseUrl + "/deleteOffer/" + userId + "?offerId=" + offerId;
return serverHttpService.Delete(urlPath);
}
/*
Change logs:
Date | Author | Description
2022-10-20 | Fangzheng Zhang | create class and init
*/
FrontendFolder/switch-room/src/services/ServerHttpService.ts
+ 68
− 69
View file @ b834a36a
......@@ -6,91 +6,90 @@
import * as Constants from "./Constans";
function Get(path: string) {
const url = Constants.Server_URL + path;
console.log("GET from: " + url);
const url = encodeURIComponent(Constants.Server_URL + path);
console.log("GET from: " + url);
return fetch(url, {
method: "GET",
return fetch(url, {
method: "GET",
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error(
"Unable to receive GET request from server with url:" + url
);
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error(
"Unable to receive GET request from server with url:" + url
);
})
.catch((reason) => {
console.log("Error on GET request", reason);
});
.catch((reason) => {
console.log("Error on GET request", reason);
});
}
function Post(path: string, bodyData: any) {
const url = Constants.Server_URL + path;
console.log("POST from: " + url);
return fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(bodyData),
const url = encodeURIComponent(Constants.Server_URL + path);
console.log("POST from: " + url);
return fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(bodyData),
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error(
"Unable to receive POST request from server with url:" + url
);
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error(
"Unable to receive POST request from server with url:" + url
);
})
.catch((reason) => {
console.log("Error on POST request", reason);
});
.catch((reason) => {
console.log("Error on POST request", reason);
});
}
function Put(path: string, bodyData: any) {
const url = Constants.Server_URL + path;
console.log("PUT from: " + url);
return fetch(url, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(bodyData),
const url = encodeURIComponent(Constants.Server_URL + path);
console.log("PUT from: " + url);
return fetch(url, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(bodyData),
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error(
"Unable to receive PUT request from server with url:" + url
);
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error(
"Unable to receive PUT request from server with url:" + url
);
})
.catch((reason) => {
console.log("Error on PUT request", reason);
});
.catch((reason) => {
console.log("Error on PUT request", reason);
});
}
function Delete(path: string) {
const url = Constants.Server_URL + path;
console.log("Delete from: " + url);
return fetch(url, {
method: "Delete",
const url = encodeURIComponent(Constants.Server_URL + path);
console.log("Delete from: " + url);
return fetch(url, {
method: "Delete",
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error(
"Unable to receive DELETE request from server with url:" + url
);
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error(
"Unable to receive DELETE request from server with url:" + url
);
})
.catch((reason) => {
console.log("Error on DELETE request", reason);
});
.catch((reason) => {
console.log("Error on DELETE request", reason);
});
}
export { Get, Post, Put, Delete };
/*
......
FrontendFolder/switch-room/src/services/WishlistService.ts
+ 62
− 0
View file @ b834a36a
/**
* This class will fetch and send user wishlist data from back end
*/
import * as serverHttpService from "./ServerHttpService";
import { WishlistItemModel } from "@/models/WishlistItemModel";
const baseUrl = "wishlist";
/**
* This function will fetch users wishlist item list
* @param userId user's id
*/
export function getUserWishlistInfo(userId: number) {
return serverHttpService.Get(baseUrl + "/" + userId);
}
/**
* Send new wishlistItem information to server to create new record
* @param userId user's id
* @param wishlistItem new wishlistItem
*/
export function createNewWishlistItem(
userId: number,
wishlistItem: WishlistItemModel
) {
return serverHttpService.Post(baseUrl + "/newWishlistItem", wishlistItem);
}
/**
* Update an sexist wishlistItem
* @param userId user's id
* @param wishlistItem changed wishlistItem
*/
export function updateWishlistItem(
userId: number,
wishlistItem: WishlistItemModel
) {
return serverHttpService.Post(baseUrl + "/updateWishlistItem", wishlistItem);
}
/**
* Remove one of user's wishlistItem from DB
* @param userId user's id
* @param wishlistItemId wishlist Item's Id
*/
export function deleteWishlistItem(userId: number, wishlistItemId: number) {
const urlPath =
baseUrl +
"/deleteWishlistItem/" +
userId +
"?wishlistItemId=" +
wishlistItemId;
return serverHttpService.Delete(urlPath);
}
/*
Change logs:
Date | Author | Description
2022-10-20 | Fangzheng Zhang | create class and init
*/
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