Skip to content

R
reybex-educational-app
Commit 02fd433d authored by Abdelkarim Ben Karroum's avatar Abdelkarim Ben Karroum
Browse files
Options

state management with modules implemented

parent c187f68d
Show whitespace changes
Inline Side-by-side
Showing with 382 additions and 42 deletions
client/src/App.vue
View file @ 02fd433d
...@@ -112,6 +112,9 @@ ...@@ -112,6 +112,9 @@
{ id: 3, name: 'users', link: '/users'}, { id: 3, name: 'users', link: '/users'},
] ]
}), }),
created() {
console.log(this);
},
methods: { methods: {
pushRoute(route) { pushRoute(route) {
console.log('route ', route); console.log('route ', route);
......
client/src/modules/products/components/EditProductDialog.vue 0 → 100644
View file @ 02fd433d
<script>
export default {
name: 'EditProductDialog',
props: {
product: {
type: Object,
default: () => ({}),
},
isCreatedMode: {
type: Boolean,
required: true,
},
},
data() {
return {
formData: {
productName: '',
productDescription: '',
price: '',
productMaterial: '',
type: '',
},
isNewProductDialogVisible: false,
};
},
computed: {
productTitle() {
return `${this.formData.productName} - ${this.formData.type}`
},
},
watch: {
// 'formData.price': function (newVal) {
// console.log('newVal ', newVal);
// },
// formData(newVal) {
// console.log('newVal ', newVal);
// },
formData: {
deep: true,
handler(newVal) {
console.log('newVal ', newVal);
},
}
},
mounted() {
if(!this.isCreatedMode) this.formData = {...this.product};
this.isNewProductDialogVisible = true;
},
methods: {
updateName(value) {
console.log('params')
this.formData.name = value;
},
close() {
this.isNewProductDialogVisible = false;
this.$emit('close', { requireRefresh: true });
},
saveProduct() {
this.$emit('saved', this.formData);
this.close();
},
},
}
</script>
<template>
<v-dialog v-model="isNewProductDialogVisible" max-width="600">
<v-card>
<v-card-title>
<span class="text-h5">{{ productTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="formData.productName"
label="Name"
required outlined
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="formData.productDescription"
label="Description"
required outlined
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="formData.price"
label="Price"
required outlined
type="number"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="formData.productMaterial"
label="Material"
required outlined
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="formData.type"
label="Type"
required outlined
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="red darken-1"
text
@click="close"
>
Close
</v-btn>
<v-btn
class="success"
text
@click="saveProduct"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<style>
</style>
\ No newline at end of file
client/src/components/products/index.vue → client/src/modules/products/index.vue
View file @ 02fd433d
...@@ -3,8 +3,12 @@ import { mapActions, mapState } from 'vuex'; ...@@ -3,8 +3,12 @@ import { mapActions, mapState } from 'vuex';
export default { export default {
name: 'product-list', name: 'product-list',
components: {
EditProductDialog: () => import('./components/EditProductDialog'),
},
data() { data() {
return { return {
isCreatedMode: false,
isLoading: false, isLoading: false,
headers: [ headers: [
{ text: 'Actions', value: 'actions' }, { text: 'Actions', value: 'actions' },
...@@ -33,6 +37,23 @@ export default { ...@@ -33,6 +37,23 @@ export default {
editItem(item) { editItem(item) {
this.editedProduct = item; this.editedProduct = item;
this.isNewProductDialogVisible = true; this.isNewProductDialogVisible = true;
this.isCreatedMode = false;
},
createNewProduct() {
this.editedProduct = {};
this.isNewProductDialogVisible = true;
this.isCreatedMode = true;
},
closeAndRefresh(params) {
const { requireRefresh } = params; // object destructuring
// console.log('t' , requireRefresh)
this.isNewProductDialogVisible = false;
if(requireRefresh) this.fetchMaterials();
console.log('params ', params);
},
saveProductAndRefersh(params) {
console.log('params ', params);
this.isNewProductDialogVisible = false;
}, },
}, },
}; };
...@@ -43,7 +64,11 @@ export default { ...@@ -43,7 +64,11 @@ export default {
<div v-if="products.hasError">An error occured while fetching data</div> <div v-if="products.hasError">An error occured while fetching data</div>
<template v-else> <template v-else>
<v-toolbar class="mb-1" color="default" dense> <v-toolbar class="mb-1" color="default" dense>
<v-btn class="text-capitalize" depressed color="success"> <v-btn
@click="createNewProduct"
class="text-capitalize"
depressed
color="success">
<v-icon>mdi-plus</v-icon>&nbsp;New Product <v-icon>mdi-plus</v-icon>&nbsp;New Product
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
...@@ -92,108 +117,15 @@ export default { ...@@ -92,108 +117,15 @@ export default {
</tbody> </tbody>
</template> </template>
</v-data-table> </v-data-table>
<v-dialog v-model="isNewProductDialogVisible" max-width="600">
<v-card>
<v-card-title>
<span class="text-h5">New product</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="editedProduct.productName"
label="Product name"
required outlined
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="editedProduct.productName"
label="Name"
required outlined
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="editedProduct.productDescription"
label="Description"
required outlined
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="editedProduct.price"
label="Price"
required outlined
type="number"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="editedProduct.productMaterial"
label="Material"
required outlined
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4">
<v-text-field
v-model="editedProduct.type"
label="Type"
required outlined
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="red darken-1"
text
@click="isNewProductDialogVisible = false"
>
Close
</v-btn>
<v-btn
class="success"
text
@click="isNewProductDialogVisible = false"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template> </template>
<edit-product-dialog
v-if="isNewProductDialogVisible"
:is-created-mode="isCreatedMode"
:product="editedProduct"
@close="closeAndRefresh"
@saved="saveProductAndRefersh"
/>
</v-container> </v-container>
</template> </template>
......
client/src/modules/products/store/actions.js 0 → 100644
View file @ 02fd433d
import axios from 'axios';
export default {
fetchProducts({ commit }, params) {
commit('setIsLoading', true);
return axios.get('http://localhost:3000/products', params)
.then(({ data }) => {
commit('setData', data);
})
.catch(() => {
commit('setHasError', true);
})
.finally(() => {
commit('setIsLoading', false);
})
},
};
client/src/modules/products/store/index.js 0 → 100644
View file @ 02fd433d
import state from './state';
import actions from './actions';
import mutations from './mutations';
export default {
namespaced: true,
state,
getters: {},
actions,
mutations,
};
client/src/modules/products/store/mutations.js 0 → 100644
View file @ 02fd433d
export default {
setData(state, payload) {
state.data = payload;
},
setIsLoading(state, payload) {
state.isLoading = payload;
},
setHasError(state, payload) {
state.hasError = payload;
}
};
client/src/modules/products/store/state.js 0 → 100644
View file @ 02fd433d
export default() => ({
isLoading: false,
data: [],
hasError: false,
});
client/src/router/index.js
View file @ 02fd433d
...@@ -17,10 +17,10 @@ const routes = [ ...@@ -17,10 +17,10 @@ const routes = [
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../components/products') component: () => import(/* webpackChunkName: "about" */ '../modules/products')
}, },
{ {
path: '/products/:a?', path: '/products/:a',
name: 'about', name: 'about',
component: AboutView, component: AboutView,
} }
......
client/src/store/index.js
View file @ 02fd433d
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import axios from 'axios' import products from '../modules/products/store';
Vue.use(Vuex) Vue.use(Vuex)
const products = { // const products = {
namespaced: true, // namespaced: true,
state: () => ({ // state: () => ({
isLoading: false, // isLoading: false,
data: [], // data: [],
hasError: false, // hasError: false,
}), // }),
mutations: { // mutations: {
setData(state, payload) { // setData(state, payload) {
state.data = payload; // state.data = payload;
}, // },
setIsLoading(state, payload) { // setIsLoading(state, payload) {
state.isLoading = payload; // state.isLoading = payload;
}, // },
setHasError(state, payload) { // setHasError(state, payload) {
state.hasError = payload; // state.hasError = payload;
} // }
}, // },
actions: { // actions: {
fetchProducts({ commit }, params) { // fetchProducts({ commit }, params) {
commit('setIsLoading', true); // commit('setIsLoading', true);
return axios.get('http://localhost:3000/products', params) // return axios.get('http://localhost:3000/products', params)
.then(({ data }) => { // .then(({ data }) => {
commit('setData', data); // commit('setData', data);
}) // })
.catch(() => { // .catch(() => {
commit('setHasError', true); // commit('setHasError', true);
}) // })
.finally(() => { // .finally(() => {
commit('setIsLoading', false); // commit('setIsLoading', false);
}) // })
}, // },
}, // },
getters: {} // getters: {}
} // }
const store = new Vuex.Store({ const storeOptions = {
modules: { modules: {
products, products,
} }
}) };
export default new Vuex.Store(storeOptions);
export default store; \ No newline at end of file
\ No newline at end of file
Markdown is supported
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