Skip to content

Commit

Permalink
✨ update listing
Browse files Browse the repository at this point in the history
  • Loading branch information
neilitalia committed Oct 18, 2021
1 parent cf2551c commit 7584ca3
Show file tree
Hide file tree
Showing 11 changed files with 373 additions and 9 deletions.
25 changes: 25 additions & 0 deletions client/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default {
authenticated: (state) => state.auth.authenticated,
listingStatus: (state) => state.sell.listingStatus,
profileStatus: (state) => state.profile.profileStatus,
editListingStatus: (state) => state.editListing.editListingStatus,
user: (state) => state.auth.user,
stripe: (state) => state.stripe.stripe,
}),
Expand Down Expand Up @@ -201,6 +202,29 @@ export default {
});
}
},
editListingStatus() {
if (this.editListingStatus === "Updated") {
this.$vs.notification({
progress: "auto",
color: "#B5E27A",
position: "bottom-center",
title: "We got your update!",
onDestroy: () => {
this.setEditListingStatus(null);
},
});
} else if (this.editListingStatus === "Failed") {
this.$vs.notification({
progress: "auto",
position: "bottom-center",
title: "Oops!",
text: "Something went wrong, try again.",
onDestroy: () => {
this.setEditListingStatus(null);
},
});
}
},
stripe() {
if (this.stripe.url) {
this.$vs.notification({
Expand All @@ -221,6 +245,7 @@ export default {
methods: {
...mapActions("auth", ["checkSession"]),
...mapActions("sell", ["setListingStatus"]),
...mapActions("editListing", ["setEditListingStatus"]),
...mapActions("profile", [
"getUserInfo",
"getListingsByUser",
Expand Down
172 changes: 172 additions & 0 deletions client/src/components/EditListingDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<template>
<vs-dialog
not-padding
scroll
overflow-hidden
@close="handleClose"
v-model="openEditDialog"
class="center grid"
>
<vs-row vs-justify="space-between" v-if="apiResponse">
<vs-col vs-type="flex" vs-justify="center" vs-align="center" w="6">
<div class="con-image">
<img
v-if="!apiResponse.image_listing.length"
:src="placeholder"
alt="Plant placeholder image"
/>
<img
v-else
:src="awsBaseUrl + apiResponse.image_listing[0].file_name"
alt="Plant photo"
/>
</div>
</vs-col>
<vs-col vs-type="flex" vs-justify="center" vs-align="center" w="6">
<vs-row justify="center" align="center">
<vs-col vs-type="flex" vs-justify="center" vs-align="center" w="10">
<h2 class="mb-25">Edit your listing</h2>
<vs-input
state="dark"
v-model="title"
label-placeholder="Listing Title"
class="mb-25 listing-title"
maxlength="40"
/>
<vs-input
state="dark"
type="number"
:value="price"
@change="validatePrice"
@blur="validatePrice"
label-placeholder="$ Price"
class="mb-25"
/>
<vs-input
state="dark"
type="number"
:value="quantity"
@change="validateQuantity"
@blur="validateQuantity"
label-placeholder="Quantity"
class="mb-25"
/>
<vs-input
state="dark"
v-model="plant"
label-placeholder="Plant Species"
class="mb-25"
maxlength="40"
/>
<vs-input
state="dark"
type="text"
v-model="description"
label-placeholder="Description"
class="mb-25"
maxlength="100"
/>
<vs-button
@click="submitEditedListing"
:disabled="
!title || !price || !quantity || !description || !plant
"
>
Update Listing
</vs-button>
</vs-col>
</vs-row>
</vs-col>
</vs-row>
</vs-dialog>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { AWS_BASE_URL, IMAGE_PLACEHOLDER_URL } from "../globals";
export default {
name: "EditListingDialog",
data: () => ({
awsBaseUrl: AWS_BASE_URL,
placeholder: IMAGE_PLACEHOLDER_URL,
}),
methods: {
...mapActions("editListing", ["submitEditedListing", "resetEditForm"]),
handleClose() {
this.resetEditForm();
},
validateQuantity(e) {
if (e.target.value >= 0) {
this.quantity = parseInt(e.target.value);
} else {
this.quantity = 0;
}
},
validatePrice(e) {
this.price = parseFloat(e.target.value).toFixed(2);
},
},
computed: {
...mapState({
apiResponse: (state) => state.editListing.apiResponse,
}),
openEditDialog: {
get() {
return this.$store.state.editListing.openEditDialog;
},
set() {
this.$store.commit("editListing/toggleEditDialog");
},
},
title: {
get() {
return this.$store.state.editListing.title;
},
set(value) {
this.$store.commit("editListing/setTitle", value);
},
},
price: {
get() {
return this.$store.state.editListing.price;
},
set(value) {
const price = parseFloat(value).toFixed(2);
this.$store.commit("editListing/setPrice", price);
},
},
quantity: {
get() {
return this.$store.state.editListing.quantity;
},
set(value) {
if (value >= 0) {
const rounded = parseInt(value);
this.$store.commit("editListing/setQuantity", rounded);
} else {
this.$store.commit("editListing/setQuantity", 0);
}
},
},
plant: {
get() {
return this.$store.state.editListing.plant;
},
set(value) {
this.$store.commit("editListing/setPlant", value);
},
},
description: {
get() {
return this.$store.state.editListing.description;
},
set(value) {
this.$store.commit("editListing/setDescription", value);
},
},
},
};
</script>

<style>
</style>
15 changes: 14 additions & 1 deletion client/src/components/ListingCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,12 @@
<span class="span">{{ listing.views }}</span>
</vs-button>
<vs-tooltip v-if="inProfile">
<vs-button class="btn-chat" primary icon>
<vs-button
class="btn-chat"
primary
icon
@click="handleEditClick(listing.id)"
>
<i class="bx bx-edit-alt"></i>
</vs-button>
<template #tooltip> Edit Listing </template>
Expand Down Expand Up @@ -107,6 +112,10 @@ export default {
methods: {
...mapActions("listings", ["setSelectedListing", "getListingDetails"]),
...mapActions("profile", ["toggleDeleteDialog", "setListingIdToDelete"]),
...mapActions("editListing", [
"toggleEditDialog",
"setCurrentDetailsToFields",
]),
...mapActions("cart", [
"removeFromCart",
"incrementCartItem",
Expand All @@ -119,6 +128,10 @@ export default {
this.$store.commit("listings/toggleListingDialog");
}
},
handleEditClick(id) {
this.setCurrentDetailsToFields(id);
this.toggleEditDialog();
},
formatListingDescription() {
return this.$props.listing.description.length > 40
? this.$props.listing.description.substr(0, 40) + "..."
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/SellForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<vs-input
state="dark"
v-model="plant"
label-placeholder="Plant"
label-placeholder="Plant Species"
class="mb-25"
maxlength="40"
/>
Expand Down
8 changes: 7 additions & 1 deletion client/src/components/UserDetails.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="user-details">
<div>
<div class="user-avatar">
<vs-avatar size="70" badge badge-color="#28164F">
<i class="bx bx-user"></i>
<template #badge>
Expand Down Expand Up @@ -43,4 +43,10 @@ export default {
justify-content: space-around;
align-items: center;
}
.user-avatar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
9 changes: 8 additions & 1 deletion client/src/pages/Profile.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
</vs-col>
</vs-row>
<DeleteListingDialog />
<EditListingDialog />
</div>
</template>

Expand All @@ -44,9 +45,15 @@ import { mapActions, mapState } from "vuex";
import ListingCard from "../components/ListingCard";
import UserDetails from "../components/UserDetails";
import DeleteListingDialog from "../components/DeleteListingDialog";
import EditListingDialog from "../components/EditListingDialog";
export default {
name: "Profile",
components: { UserDetails, ListingCard, DeleteListingDialog },
components: {
UserDetails,
ListingCard,
DeleteListingDialog,
EditListingDialog,
},
created() {
this.getUserInfo();
this.getListingsByUser();
Expand Down
10 changes: 10 additions & 0 deletions client/src/services/ListingServices.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,16 @@ export const SubmitNewListing = async (data) => {
return res
}

export const UpdateListing = async (data) => {
const res = await Client.put('/listings/update', data)
.then((res) =>{
return res
}).catch((err)=>{
return err.response
})
return res
}

export const DeleteListing = async (listing_id) => {
const res = await Client.delete(`/listings/delete/${listing_id}`)
.then((res) =>{
Expand Down
4 changes: 3 additions & 1 deletion client/src/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import listings from './modules/listings'
import cart from './modules/cart'
import sell from './modules/sell'
import profile from './modules/profile'
import editListing from './modules/editListing'

Vue.use(Vuex)

Expand All @@ -23,7 +24,8 @@ export default new Vuex.Store({
listings,
cart,
sell,
profile
profile,
editListing
},
strict: debug
})
Loading

0 comments on commit 7584ca3

Please sign in to comment.