aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--client/package-lock.json11
-rw-r--r--client/package.json1
-rw-r--r--client/src/components/ProductCard.vue22
-rw-r--r--client/src/store/index.js17
-rw-r--r--client/src/views/Home.vue12
5 files changed, 52 insertions, 11 deletions
diff --git a/client/package-lock.json b/client/package-lock.json
index 24dc872..b3c84a5 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2489,6 +2489,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
+ "axios": {
+ "version": "0.21.1",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+ "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+ "requires": {
+ "follow-redirects": "^1.10.0"
+ }
+ },
"babel-eslint": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5581,8 +5589,7 @@
"follow-redirects": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
- "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
- "dev": true
+ "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
},
"for-in": {
"version": "1.0.2",
diff --git a/client/package.json b/client/package.json
index 17dc6f0..db66ead 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,6 +9,7 @@
},
"dependencies": {
"@popperjs/core": "^2.9.2",
+ "axios": "^0.21.1",
"bootstrap": "^5.0.2",
"core-js": "^3.6.5",
"validator": "^13.6.0",
diff --git a/client/src/components/ProductCard.vue b/client/src/components/ProductCard.vue
index 57698e5..849c360 100644
--- a/client/src/components/ProductCard.vue
+++ b/client/src/components/ProductCard.vue
@@ -1,9 +1,10 @@
<template>
<div class="card">
- <img :src="productImg" class="card-img-top">
+ <img :src="ImgLink" class="card-img-top">
<div class="card-body">
- <h5 class="card-title">{{ productName }}</h5>
- <a :href="productLink" class="btn btn-dark w-100">Details</a>
+ <h5 class="card-title">{{ Name }}</h5>
+ <p class="card-text">Price: ${{ Price }}</p>
+ <router-link class="btn btn-dark w-100" :to="ProductLink">Details</router-link>
</div>
</div>
</template>
@@ -12,9 +13,18 @@
export default {
name: 'ProductCard',
props: {
- productName: String,
- productImg: String,
- productLink: String
+ Id: String,
+ Name: String,
+ Img: String,
+ Price: Number
+ },
+ computed: {
+ ImgLink() {
+ return `${process.env.VUE_APP_ROOT_API}/${this.Img}`;
+ },
+ ProductLink() {
+ return `/product/${this.Id}`
+ }
}
}
</script>
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 5f05f19..d2fe9b7 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -1,11 +1,26 @@
-import { createStore } from 'vuex'
+import {createStore} from 'vuex'
+import axios from 'axios';
export default createStore({
state: {
+ products: []
+ },
+ getters: {
+ getProducts(state) {
+ return state.products;
+ }
},
mutations: {
+ setProducts(state, products) {
+ state.products = products;
+ }
},
actions: {
+ async pullProducts(context) {
+ await axios.get(`${process.env.VUE_APP_ROOT_API}/products`)
+ .then(response => context.commit('setProducts', response.data))
+ .catch(error => console.error(error));
+ }
},
modules: {
}
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 3e89885..a71d2cb 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,7 +1,7 @@
<template>
<div class="row mt-5">
- <div class="col-lg-3 col-md-4 col-sm-6">
- <ProductCard/>
+ <div v-for="product in products" :key="product._id" class="col-lg-3 col-md-4 col-sm-6">
+ <ProductCard :Id="product._id" :Name="product.name" :Price="product.price" :Img="product.imagePath"/>
</div>
</div>
</template>
@@ -13,6 +13,14 @@ export default {
name: 'Home',
components: {
ProductCard
+ },
+ mounted() {
+ this.$store.dispatch('pullProducts');
+ },
+ computed: {
+ products() {
+ return this.$store.getters.getProducts;
+ }
}
}
</script>