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
02fd433d
Commit
02fd433d
authored
Apr 12, 2022
by
Abdelkarim Ben Karroum
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
state management with modules implemented
parent
c187f68d
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
382 additions
and
42 deletions
+382
-42
App.vue
client/src/App.vue
+3
-0
EditProductDialog.vue
client/src/modules/products/components/EditProductDialog.vue
+160
-0
index.vue
client/src/modules/products/index.vue
+134
-0
actions.js
client/src/modules/products/store/actions.js
+17
-0
index.js
client/src/modules/products/store/index.js
+11
-0
mutations.js
client/src/modules/products/store/mutations.js
+11
-0
state.js
client/src/modules/products/store/state.js
+5
-0
index.js
client/src/router/index.js
+2
-2
index.js
client/src/store/index.js
+39
-40
No files found.
client/src/App.vue
View file @
02fd433d
...
...
@@ -112,6 +112,9 @@
{
id
:
3
,
name
:
'users'
,
link
:
'/users'
},
]
}),
created
()
{
console
.
log
(
this
);
},
methods
:
{
pushRoute
(
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/
component
s/products/index.vue
→
client/src/
module
s/products/index.vue
View file @
02fd433d
...
...
@@ -3,8 +3,12 @@ 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'
},
...
...
@@ -33,6 +37,23 @@ export default {
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
;
},
},
};
...
...
@@ -43,7 +64,11 @@ export default {
<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-btn
@
click=
"createNewProduct"
class=
"text-capitalize"
depressed
color=
"success"
>
<v-icon>
mdi-plus
</v-icon>
New Product
</v-btn>
</v-toolbar>
...
...
@@ -92,108 +117,15 @@ export default {
</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>
<edit-product-dialog
v-if=
"isNewProductDialogVisible"
:is-created-mode=
"isCreatedMode"
:product=
"editedProduct"
@
close=
"closeAndRefresh"
@
saved=
"saveProductAndRefersh"
/>
</v-container>
</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 = [
// 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" */
'../
component
s/products'
)
component
:
()
=>
import
(
/* webpackChunkName: "about" */
'../
module
s/products'
)
},
{
path
:
'/products/:a
?
'
,
path
:
'/products/:a'
,
name
:
'about'
,
component
:
AboutView
,
}
...
...
client/src/store/index.js
View file @
02fd433d
import
Vue
from
'vue'
import
Vuex
from
'vuex'
import
axios
from
'axios'
import
products
from
'../modules/products/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 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
(
{
const
store
Options
=
{
modules
:
{
products
,
}
})
export
default
store
;
\ No newline at end of file
};
export
default
new
Vuex
.
Store
(
storeOptions
);
\ 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