Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in
Toggle navigation
R
reybex-educational-app
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Packages
Packages
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
M. Esat Akpunar
reybex-educational-app
Commits
ec0ed253
Commit
ec0ed253
authored
Apr 13, 2022
by
Abdelkarim Ben Karroum
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
prepared all sources
parent
02fd433d
Hide whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
74 additions
and
407 deletions
+74
-407
main.js
client/src/main.js
+1
-1
index.vue
client/src/modules/app/index.vue
+28
-31
actions.js
client/src/modules/app/store/actions.js
+3
-0
index.js
client/src/modules/app/store/index.js
+0
-0
mutations.js
client/src/modules/app/store/mutations.js
+1
-0
state.js
client/src/modules/app/store/state.js
+1
-0
EditProductDialog.vue
client/src/modules/products/components/EditProductDialog.vue
+0
-160
index.vue
client/src/modules/products/index.vue
+0
-134
actions.js
client/src/modules/products/store/actions.js
+0
-17
mutations.js
client/src/modules/products/store/mutations.js
+0
-11
state.js
client/src/modules/products/store/state.js
+0
-5
index.js
client/src/router/index.js
+2
-8
index.js
client/src/store/index.js
+4
-40
server.js
server/server.js
+4
-0
vendors.js
server/vendors.js
+30
-0
No files found.
client/src/main.js
View file @
ec0ed253
import
Vue
from
'vue'
import
Vue
from
'vue'
import
App
from
'./
App.vue
'
import
App
from
'./
modules/app
'
import
vuetify
from
'@/plugins/vuetify'
import
vuetify
from
'@/plugins/vuetify'
import
store
from
'./store'
import
store
from
'./store'
import
router
from
'./router'
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
>
<
template
>
<v-app
id=
"inspire"
>
<v-app
id=
"inspire"
>
<v-app-bar
<v-app-bar
...
@@ -93,34 +121,3 @@
...
@@ -93,34 +121,3 @@
</v-main>
</v-main>
</v-app>
</v-app>
</template>
</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/app/store/actions.js
0 → 100644
View file @
ec0ed253
export
default
{
};
client/src/modules/
products
/store/index.js
→
client/src/modules/
app
/store/index.js
View file @
ec0ed253
File moved
client/src/modules/app/store/mutations.js
0 → 100644
View file @
ec0ed253
export
default
{};
client/src/modules/app/store/state.js
0 → 100644
View file @
ec0ed253
export
default
()
=>
({});
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>
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
Vue
from
'vue'
import
VueRouter
from
'vue-router'
import
VueRouter
from
'vue-router'
import
HomeView
from
'../views/HomeView.vue'
import
HomeView
from
'../views/HomeView.vue'
import
AboutView
from
'../views/AboutView.vue'
Vue
.
use
(
VueRouter
)
Vue
.
use
(
VueRouter
)
...
@@ -12,18 +11,13 @@ const routes = [
...
@@ -12,18 +11,13 @@ const routes = [
component
:
HomeView
component
:
HomeView
},
},
{
{
path
:
'/products
/:a?
'
,
path
:
'/products'
,
name
:
'products'
,
name
:
'products'
,
// 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" */
'../modules/products'
)
//
component: () => import(/* webpackChunkName: "about" */ '../modules/products')
},
},
{
path
:
'/products/:a'
,
name
:
'about'
,
component
:
AboutView
,
}
]
]
const
router
=
new
VueRouter
({
const
router
=
new
VueRouter
({
...
...
client/src/store/index.js
View file @
ec0ed253
import
Vue
from
'vue'
import
Vue
from
'vue'
;
import
Vuex
from
'vuex'
import
Vuex
from
'vuex'
;
import
products
from
'../modules/products
/store'
;
import
app
from
'../modules/app
/store'
;
Vue
.
use
(
Vuex
)
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
=
{
const
storeOptions
=
{
modules
:
{
modules
:
{
products
,
app
,
}
}
};
};
export
default
new
Vuex
.
Store
(
storeOptions
);
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');
...
@@ -3,14 +3,18 @@ const fs = require('fs');
const
generateProducts
=
require
(
'./products'
);
const
generateProducts
=
require
(
'./products'
);
const
generateUsers
=
require
(
'./users'
);
const
generateUsers
=
require
(
'./users'
);
const
generateCustomers
=
require
(
'./customers'
);
const
generateCustomers
=
require
(
'./customers'
);
const
generateVendors
=
require
(
'./vendors'
);
const
products
=
generateProducts
(
50
);
const
products
=
generateProducts
(
50
);
const
users
=
generateUsers
(
50
);
const
users
=
generateUsers
(
50
);
const
customers
=
generateCustomers
(
50
);
const
customers
=
generateCustomers
(
50
);
const
vendors
=
generateVendors
(
50
);
const
finalOutput
=
{
const
finalOutput
=
{
users
:
users
,
users
:
users
,
products
:
products
,
products
:
products
,
customers
:
customers
,
customers
:
customers
,
vendors
:
vendors
,
};
};
const
file
=
'./db.json'
;
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment