Skip to content

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

prepared all sources

parent 02fd433d
Show whitespace changes
Inline Side-by-side
Showing with 74 additions and 407 deletions
client/src/main.js
View file @ ec0ed253
import Vue from 'vue'
import App from './App.vue'
import App from './modules/app'
import vuetify from '@/plugins/vuetify'
import store from './store'
import router from './router'
......
client/src/App.vue → client/src/modules/app/index.vue
View file @ ec0ed253
<script>
export default {
name: 'App',
data: () => ({
activeLink: '/',
links: [
'Profile',
],
routes: [
{ id: 1, name: 'products', link: '/products'},
{ id: 2, name: 'customers', link: '/customers'},
{ id: 3, name: 'users', link: '/users'},
{ id: 4, name: 'vendors', link: '/vendors'},
]
}),
created() {
console.log(this);
},
methods: {
pushRoute(route) {
console.log('route ', route);
this.activeLink = route.link;
this.$router.push(route.link);
},
},
}
</script>
<template>
<v-app id="inspire">
<v-app-bar
......@@ -93,34 +121,3 @@
</v-main>
</v-app>
</template>
<script>
// import Products from './components/products';
export default {
components: {
// Products,
},
data: () => ({
activeLink: '/',
links: [
'Profile',
],
routes: [
{ id: 1, name: 'products', link: '/products'},
{ id: 2, name: 'customers', link: '/customers'},
{ id: 3, name: 'users', link: '/users'},
]
}),
created() {
console.log(this);
},
methods: {
pushRoute(route) {
console.log('route ', route);
this.activeLink = route.link;
this.$router.push(route.link);
},
},
}
</script>
\ No newline at end of file
client/src/modules/products/components/EditProductDialog.vue deleted 100644 → 0
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/modules/products/index.vue deleted 100644 → 0
View file @ 02fd433d
<script>
import { mapActions, mapState } from 'vuex';
export default {
name: 'product-list',
components: {
EditProductDialog: () => import('./components/EditProductDialog'),
},
data() {
return {
isCreatedMode: false,
isLoading: false,
headers: [
{ text: 'Actions', value: 'actions' },
{ text: 'Image', value: 'image', width: 200},
{ text: 'Name', value: 'productName' },
{ text: 'Description', value: 'productDescription', width: 300 },
{ text: 'Price', value: 'price' },
{ text: 'Material', value: 'productMaterial' },
{ text: 'type', value: 'type' },
],
isNewProductDialogVisible: false,
editedProduct: {},
};
},
computed: {
...mapState(['products']),
},
created() {
this.fetchMaterials();
},
methods: {
...mapActions('products', ['fetchProducts']),
fetchMaterials() {
return this.fetchProducts();
},
editItem(item) {
this.editedProduct = item;
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;
},
},
};
</script>
<template>
<v-container grid-list-xs fluid>
<div v-if="products.hasError">An error occured while fetching data</div>
<template v-else>
<v-toolbar class="mb-1" color="default" dense>
<v-btn
@click="createNewProduct"
class="text-capitalize"
depressed
color="success">
<v-icon>mdi-plus</v-icon>&nbsp;New Product
</v-btn>
</v-toolbar>
<v-data-table
fixed-header
:headers="headers"
:items="products.data"
:loading="products.isLoading"
:items-per-page="25"
item-key="id"
height="75vh"
class="elevation-1"
>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="product in items" :key="product.id">
<td>
<v-icon
small
class="mr-2"
@click="editItem(product)"
>
mdi-pencil
</v-icon>
<v-icon
small
@click="deleteItem(item)"
>
mdi-delete
</v-icon>
</td>
<td>
<v-img
lazy-src="https://picsum.photos/id/11/10/6"
max-height="100"
max-width="150"
:src="product.image"
></v-img>
</td>
<td>{{ product.productName }}</td>
<td>{{ product.productDescription }}</td>
<td>{{ product.price }}</td>
<td>{{ product.productMaterial }}</td>
<td>{{ product.type }}</td>
</tr>
</tbody>
</template>
</v-data-table>
</template>
<edit-product-dialog
v-if="isNewProductDialogVisible"
:is-created-mode="isCreatedMode"
:product="editedProduct"
@close="closeAndRefresh"
@saved="saveProductAndRefersh"
/>
</v-container>
</template>
<style>
</style>
\ No newline at end of file
client/src/modules/products/store/actions.js deleted 100644 → 0
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/mutations.js deleted 100644 → 0
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 deleted 100644 → 0
View file @ 02fd433d
export default() => ({
isLoading: false,
data: [],
hasError: false,
});
client/src/router/index.js
View file @ ec0ed253
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
Vue.use(VueRouter)
......@@ -12,18 +11,13 @@ const routes = [
component: HomeView
},
{
path: '/products/:a?',
path: '/products',
name: 'products',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../modules/products')
// component: () => import(/* webpackChunkName: "about" */ '../modules/products')
},
{
path: '/products/:a',
name: 'about',
component: AboutView,
}
]
const router = new VueRouter({
......
client/src/store/index.js
View file @ ec0ed253
import Vue from 'vue'
import Vuex from 'vuex'
import products from '../modules/products/store';
import Vue from 'vue';
import Vuex from 'vuex';
import app from '../modules/app/store';
Vue.use(Vuex)
// const products = {
// namespaced: true,
// state: () => ({
// isLoading: false,
// data: [],
// hasError: false,
// }),
// mutations: {
// setData(state, payload) {
// state.data = payload;
// },
// setIsLoading(state, payload) {
// state.isLoading = payload;
// },
// setHasError(state, payload) {
// state.hasError = payload;
// }
// },
// actions: {
// 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);
// })
// },
// },
// getters: {}
// }
const storeOptions = {
modules: {
products,
app,
}
};
export default new Vuex.Store(storeOptions);
\ No newline at end of file
server/server.js
View file @ ec0ed253
......@@ -3,14 +3,18 @@ const fs = require('fs');
const generateProducts = require('./products');
const generateUsers = require('./users');
const generateCustomers = require('./customers');
const generateVendors = require('./vendors');
const products = generateProducts(50);
const users = generateUsers(50);
const customers = generateCustomers(50);
const vendors = generateVendors(50);
const finalOutput = {
users: users,
products: products,
customers: customers,
vendors: vendors,
};
const file = './db.json';
......
server/vendors.js 0 → 100644
View file @ ec0ed253
const { faker } = require('@faker-js/faker');
const generateVendors = function (itemCount) {
const vendors = []
for (let index = 1; index < itemCount; index++) {
customers.push(newFakedVendor());
}
return vendors;
}
function newFakedVendor() {
const firstName = faker.name.firstName();
const lastName = faker.name.lastName();
const email = faker.internet.email();
const id = faker.datatype.uuid();
return {
"id": id,
"firstName": firstName,
"lastName": lastName,
"email": email,
"country": faker.address.country(),
"city": faker.address.cityName(),
"image": faker.image.avatar(),
}
}
module.exports = generateVendors
\ 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