Skip to content

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

gitignore added to the main directory

parents
Expand all Show whitespace changes
Inline Side-by-side
Showing with 702 additions and 0 deletions
.gitignore 0 → 100644
View file @ bfa9a0cd
.DS_Store
/server/node_modules
/client/node_modules
client/.gitignore 0 → 100644
View file @ bfa9a0cd
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
client/README.md 0 → 100644
View file @ bfa9a0cd
# client
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
client/babel.config.js 0 → 100644
View file @ bfa9a0cd
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
client/jsconfig.json 0 → 100644
View file @ bfa9a0cd
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
client/package-lock.json 0 → 100644
View file @ bfa9a0cd
This diff is collapsed.
client/package.json 0 → 100644
View file @ bfa9a0cd
{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.26.1",
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vuetify": "^2.6.0",
"vuex": "3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.4.8",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
client/public/index.html 0 → 100644
View file @ bfa9a0cd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
client/src/App.vue 0 → 100644
View file @ bfa9a0cd
<template>
<v-app id="inspire">
<v-app-bar
app
color="white"
flat
>
<v-container class="py-0 fill-height">
<v-avatar
class="mr-10"
color="grey darken-1"
size="32"
></v-avatar>
<h1>mini-reybe<span class="red--text text--lighten-2">x</span></h1>
<v-spacer></v-spacer>
<v-responsive max-width="260">
<v-text-field
dense
flat
hide-details
rounded
solo-inverted
></v-text-field>
</v-responsive>
<v-btn
class="ml-1 blue lighten-1 white--text text--capitalize" rounded
v-for="link in links"
:key="link"
text
>
{{ link }}
</v-btn>
</v-container>
</v-app-bar>
<v-main class="grey lighten-3">
<v-container>
<v-row>
<v-col cols="2">
<v-sheet rounded="lg">
<v-list color="transparent">
<v-list-item
v-for="route in routes"
:key="route.id"
@click="pushRoute(route)"
>
<v-list-item-content>
<v-list-item-title>
{{ route.name }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-list-item
link
color="grey lighten-4"
>
<v-list-item-content>
<v-list-item-title>
Refresh
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-sheet>
</v-col>
<v-col cols="10">
<v-sheet
min-height="90vh"
rounded="lg"
>
<template v-if="activeLink === '/products'">
<Products />
</template>
<template v-if="activeLink === '/customers'">
</template>
<template v-if="activeLink === '/users'">
</template>
</v-sheet>
</v-col>
</v-row>
</v-container>
</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'},
]
}),
methods: {
pushRoute(route) {
console.log('route ', route);
this.activeLink = route.link;
},
},
}
</script>
\ No newline at end of file
client/src/assets/logo.svg 0 → 100644
View file @ bfa9a0cd
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
client/src/components/products/index.vue 0 → 100644
View file @ bfa9a0cd
<script>
import { mapActions, mapState } from 'vuex';
export default {
name: 'product-list',
data() {
return {
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;
},
},
};
</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 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>
<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>
</v-container>
</template>
<style>
</style>
\ No newline at end of file
client/src/main.js 0 → 100644
View file @ bfa9a0cd
import Vue from 'vue'
import App from './App.vue'
import vuetify from '@/plugins/vuetify'
import store from './store'
Vue.config.productionTip = false
new Vue({
vuetify,
store,
render: h => h(App)
}).$mount('#app')
client/src/plugins/vuetify.js 0 → 100644
View file @ bfa9a0cd
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
});
client/src/store/index.js 0 → 100644
View file @ bfa9a0cd
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
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 store = new Vuex.Store({
modules: {
products,
}
})
export default store;
\ No newline at end of file
client/vue.config.js 0 → 100644
View file @ bfa9a0cd
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
client/yarn.lock 0 → 100644
View file @ bfa9a0cd
This diff is collapsed.
server/.gitignore 0 → 100644
View file @ bfa9a0cd
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
server/README.md 0 → 100644
View file @ bfa9a0cd
https://github.com/typicode/json-server
\ No newline at end of file
server/customers.js 0 → 100644
View file @ bfa9a0cd
const { faker } = require('@faker-js/faker');
const generateCustomers = function (itemCount) {
const customers = []
for (let index = 1; index < itemCount; index++) {
customers.push(newFakedCustomer());
}
return customers;
}
function newFakedCustomer() {
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 = generateCustomers
\ No newline at end of file
server/db.json 0 → 100644
View file @ bfa9a0cd
This diff is collapsed.
server/package.json 0 → 100644
View file @ bfa9a0cd
{
"name": "server",
"version": "1.0.0",
"main": "server.js",
"license": "MIT",
"scripts": {
"generate:data": "node server.js",
"generate:products": "json-server products.js",
"generate:users": "json-server users.js",
"generate:customers": "json-server customers.js",
"start": "json-server --watch db.json"
},
"dependencies": {
"fs-extra": "^10.0.1",
"json-server": "^0.17.0"
},
"devDependencies": {
"@faker-js/faker": "^6.1.2"
}
}
server/products.js 0 → 100644
View file @ bfa9a0cd
const { faker } = require('@faker-js/faker');
const generateProducts = function (itemCount) {
const products = []
for (let index = 1; index < itemCount; index++) {
products.push(newFakedProduct());
}
return products
}
function newFakedProduct() {
return {
"id": faker.datatype.uuid(),
"color": faker.commerce.color(),
"department": faker.commerce.department(),
"price": faker.commerce.price(),
"productName": faker.commerce.productName(),
"type": faker.commerce.productAdjective(),
"productDescription": faker.commerce.productDescription(),
"productMaterial": faker.commerce.productMaterial(),
"image": faker.image.food(),
}
}
module.exports = generateProducts
\ No newline at end of file
server/server.js 0 → 100644
View file @ bfa9a0cd
const fs = require('fs');
const generateProducts = require('./products');
const generateUsers = require('./users');
const generateCustomers = require('./customers');
const products = generateProducts(50);
const users = generateUsers(50);
const customers = generateCustomers(50);
const finalOutput = {
users: users,
products: products,
customers: customers,
};
const file = './db.json';
try {
if (fs.existsSync(file)) {
fs.writeFileSync('./db.json', '');
}
} catch(err) {
console.error(err)
}
fs.writeFileSync('./db.json', JSON.stringify(finalOutput, null, 4))
server/users.js 0 → 100644
View file @ bfa9a0cd
const { faker } = require('@faker-js/faker');
const fs = require('fs');
const generateUsers = function (itemCount) {
const users = []
for (let index = 1; index < itemCount; index++) {
users.push(newFakedUser());
}
return users;
}
function newFakedUser() {
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,
"image": faker.image.avatar(),
}
}
module.exports = generateUsers
\ No newline at end of file
server/yarn.lock 0 → 100644
View file @ bfa9a0cd
This diff is collapsed.
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