diff options
| -rw-r--r-- | client/package-lock.json | 11 | ||||
| -rw-r--r-- | client/package.json | 1 | ||||
| -rw-r--r-- | client/src/components/ProductCard.vue | 22 | ||||
| -rw-r--r-- | client/src/store/index.js | 17 | ||||
| -rw-r--r-- | client/src/views/Home.vue | 12 |
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> |