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
c0777a3b
Commit
c0777a3b
authored
Aug 31, 2022
by
esatakpunar
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
product add specific and general filter properties
parent
04d79a95
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
1733 additions
and
1666 deletions
+1733
-1666
index.vue
client/src/modules/products/index.vue
+97
-45
actions.js
client/src/modules/products/store/actions.js
+36
-7
getters.js
client/src/modules/products/store/getters.js
+4
-6
mutations.js
client/src/modules/products/store/mutations.js
+3
-3
state.js
client/src/modules/products/store/state.js
+1
-2
db.json
server/db.json
+1591
-1602
package.json
server/package.json
+1
-1
No files found.
client/src/modules/products/index.vue
View file @
c0777a3b
...
@@ -6,6 +6,10 @@ export default {
...
@@ -6,6 +6,10 @@ export default {
data
()
{
data
()
{
return
{
return
{
selected
:
[],
selected
:
[],
column
:
"all"
,
search
:
""
,
expanded
:
[],
singleExpand
:
true
,
};
};
},
},
computed
:
{
computed
:
{
...
@@ -13,12 +17,17 @@ export default {
...
@@ -13,12 +17,17 @@ export default {
"headers"
,
"headers"
,
"dialogHeaders"
,
"dialogHeaders"
,
"productList"
,
"productList"
,
"
singleExpand
"
,
"
filteredProductList
"
,
"expanded"
,
"dialog"
,
"dialog"
,
"editedItem"
,
"editedItem"
,
"editedIndex"
,
"editedIndex"
,
]),
]),
indexofColumn
()
{
return
this
.
dialogHeaders
.
findIndex
(
(
header
)
=>
this
.
column
==
header
.
value
);
},
},
},
methods
:
{
methods
:
{
...
mapActions
(
"products"
,
[
...
mapActions
(
"products"
,
[
...
@@ -29,10 +38,11 @@ export default {
...
@@ -29,10 +38,11 @@ export default {
"deleteMultiProduct"
,
"deleteMultiProduct"
,
"saveProduct"
,
"saveProduct"
,
"editProduct"
,
"editProduct"
,
"filterProduct"
,
]),
]),
},
},
created
()
{
created
()
{
this
.
fetchProductData
();
this
.
fetchProductData
(
{
searchInput
:
""
,
filterColumn
:
"id"
}
);
},
},
};
};
</
script
>
</
script
>
...
@@ -73,6 +83,18 @@ export default {
...
@@ -73,6 +83,18 @@ export default {
class=
"white--text"
class=
"white--text"
@
click=
"deleteMultiProduct(selected)"
@
click=
"deleteMultiProduct(selected)"
>
>
<v-icon>
delete
</v-icon>
</v-btn>
<v-btn
icon
large
color=
"blue-grey"
class=
"white--text"
@
click=
"fetchProductData"
>
<v-icon>
refresh
</v-icon>
</v-btn>
<v-dialog
v-model=
"dialog"
max-width=
"500px"
>
<v-dialog
v-model=
"dialog"
max-width=
"500px"
>
<template
v-slot:activator=
"
{}">
</
template
>
<template
v-slot:activator=
"
{}">
</
template
>
<v-card>
<v-card>
...
@@ -88,7 +110,12 @@ export default {
...
@@ -88,7 +110,12 @@ export default {
sm6
sm6
md4
md4
:key=
"header.value"
:key=
"header.value"
v-if=
"!(header.value === 'actions')"
v-if=
"
!(
header.value === 'actions' ||
header.value === 'all'
)
"
>
>
<v-text-field
<v-text-field
v-model=
"editedItem[header.value]"
v-model=
"editedItem[header.value]"
...
@@ -114,9 +141,6 @@ export default {
...
@@ -114,9 +141,6 @@ export default {
</v-card>
</v-card>
</v-dialog>
</v-dialog>
<v-icon>
delete
</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-switch
<v-switch
...
@@ -126,10 +150,38 @@ export default {
...
@@ -126,10 +150,38 @@ export default {
@
change=
"toggleSingleExpand"
@
change=
"toggleSingleExpand"
></v-switch>
></v-switch>
</v-toolbar>
</v-toolbar>
<v-toolbar
flat
>
<v-select
label=
"Header Name"
v-model=
"column"
:items=
"dialogHeaders"
item-text=
"text"
item-value=
"value"
class=
"mt-5"
></v-select>
<v-text-field
:type=
"headers[indexofColumn].type"
label=
"Search"
v-model=
"search"
single-line
outline
hide-details
class=
"ml-4"
></v-text-field>
<v-btn
@
click=
"
fetchProductData({ searchInput: search, filterColumn: column })
"
class=
"ml-4"
large
>
Search
</v-btn>
</v-toolbar>
</template>
</template>
<
template
v-slot:
[`
item
.
image
`]="{
item
}"
>
<
template
v-slot:
[`
item
.
image
`]="{
item
}"
>
<img
width=
"75"
:src=
"`$
{item.image}`" />
<img
width=
"75"
:src=
"`$
{item.image}`"
v-if="item.image"
/>
</
template
>
</
template
>
<
template
v-slot:
[`
item
.
actions
`]="{
item
}"
>
<
template
v-slot:
[`
item
.
actions
`]="{
item
}"
>
...
...
client/src/modules/products/store/actions.js
View file @
c0777a3b
import
axios
from
"axios"
;
import
axios
from
"axios"
;
export
default
{
export
default
{
fetchProductData
({
commit
})
{
fetchProductData
({
dispatch
,
commit
},
data
=
{})
{
let
query
;
if
(
data
.
filterColumn
==
"all"
)
{
query
=
"q="
+
data
.
searchInput
;
}
else
if
(
data
.
filterColumn
)
{
query
=
data
.
filterColumn
+
"_like="
+
data
.
searchInput
;
}
axios
axios
.
get
(
"http://localhost:3000/products"
)
.
get
(
`http://localhost:3000/products?
${
query
}
`
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
commit
(
"setProductList"
,
response
.
data
);
commit
(
"setProductList"
,
response
.
data
);
console
.
log
(
"searchInput"
,
data
.
searchInput
);
console
.
log
(
"filterColumn"
,
data
.
filterColumn
);
dispatch
(
"filterProduct"
,
{
searchInput
:
""
});
})
})
.
catch
((
e
)
=>
{
.
catch
((
e
)
=>
{
console
.
log
(
e
);
console
.
log
(
e
);
});
});
},
},
toggleSingleExpand
({
commit
})
{
toggleSingleExpand
({
commit
})
{
commit
(
"setSingleExpand"
);
commit
(
"setSingleExpand"
);
},
},
...
@@ -25,7 +36,7 @@ export default {
...
@@ -25,7 +36,7 @@ export default {
axios
axios
.
delete
(
`http://localhost:3000/products/
${
id
}
`
)
.
delete
(
`http://localhost:3000/products/
${
id
}
`
)
.
then
(()
=>
{
.
then
(()
=>
{
dispatch
(
"fetchProductData"
);
dispatch
(
"fetchProductData"
,
{}
);
})
})
.
catch
((
e
)
=>
{
.
catch
((
e
)
=>
{
console
.
log
(
e
);
console
.
log
(
e
);
...
@@ -33,6 +44,7 @@ export default {
...
@@ -33,6 +44,7 @@ export default {
});
});
this
.
itemList
=
[];
this
.
itemList
=
[];
},
},
deleteMultiProduct
({
dispatch
},
items
)
{
deleteMultiProduct
({
dispatch
},
items
)
{
const
itemList
=
[];
const
itemList
=
[];
items
.
forEach
((
item
)
=>
{
items
.
forEach
((
item
)
=>
{
...
@@ -43,20 +55,18 @@ export default {
...
@@ -43,20 +55,18 @@ export default {
},
},
saveProduct
({
getters
,
dispatch
})
{
saveProduct
({
getters
,
dispatch
})
{
if
(
!
getters
.
editedItem
.
image
)
{
getters
.
editedItem
.
image
=
"https://upload.wikimedia.org/wikipedia/commons/7/70/Solid_white.svg"
;
}
const
postConfig
=
{
const
postConfig
=
{
method
:
"post"
,
method
:
"post"
,
url
:
`http://localhost:3000/products/`
,
url
:
`http://localhost:3000/products/`
,
data
:
getters
.
editedItem
,
data
:
getters
.
editedItem
,
};
};
const
putConfig
=
{
const
putConfig
=
{
method
:
"put"
,
method
:
"put"
,
url
:
`http://localhost:3000/products/
${
getters
.
editedItem
.
id
}
`
,
url
:
`http://localhost:3000/products/
${
getters
.
editedItem
.
id
}
`
,
data
:
getters
.
editedItem
,
data
:
getters
.
editedItem
,
};
};
axios
(
!
getters
.
editedItem
.
id
?
postConfig
:
putConfig
).
then
(()
=>
{
axios
(
!
getters
.
editedItem
.
id
?
postConfig
:
putConfig
).
then
(()
=>
{
dispatch
(
"fetchProductData"
);
dispatch
(
"fetchProductData"
);
});
});
...
@@ -68,4 +78,23 @@ export default {
...
@@ -68,4 +78,23 @@ export default {
commit
(
"setEditedItem"
,
Object
.
assign
({},
item
));
commit
(
"setEditedItem"
,
Object
.
assign
({},
item
));
commit
(
"setDialog"
,
true
);
commit
(
"setDialog"
,
true
);
},
},
filterProduct
({
getters
,
commit
},
data
)
{
let
x
;
if
(
!
data
.
searchInput
)
{
x
=
getters
.
productList
;
console
.
log
(
getters
.
productList
);
}
else
{
console
.
log
(
"searchInput"
,
data
.
searchInput
);
console
.
log
(
"filterColumn"
,
data
.
filterColumn
);
x
=
getters
.
productList
.
filter
((
product
)
=>
{
if
(
product
[
data
.
filterColumn
])
{
return
product
[
data
.
filterColumn
]
.
toLowerCase
()
.
includes
(
data
.
searchInput
.
toLowerCase
());
}
});
}
commit
(
"setfilteredProductList"
,
x
);
},
};
};
client/src/modules/products/store/getters.js
View file @
c0777a3b
...
@@ -18,6 +18,7 @@ export default {
...
@@ -18,6 +18,7 @@ export default {
},
},
dialogHeaders
()
{
dialogHeaders
()
{
return
[
return
[
{
text
:
"All Data"
,
value
:
"all"
,
type
:
"text"
},
{
{
text
:
"Product Name"
,
text
:
"Product Name"
,
align
:
"left"
,
align
:
"left"
,
...
@@ -36,12 +37,6 @@ export default {
...
@@ -36,12 +37,6 @@ export default {
productList
(
state
)
{
productList
(
state
)
{
return
state
.
productList
;
return
state
.
productList
;
},
},
singleExpand
(
state
)
{
return
state
.
singleExpand
;
},
expanded
(
state
)
{
return
state
.
expanded
;
},
editedIndex
(
state
)
{
editedIndex
(
state
)
{
return
state
.
editedIndex
;
return
state
.
editedIndex
;
},
},
...
@@ -51,4 +46,7 @@ export default {
...
@@ -51,4 +46,7 @@ export default {
dialog
(
state
)
{
dialog
(
state
)
{
return
state
.
dialog
;
return
state
.
dialog
;
},
},
filteredProductList
(
state
)
{
return
state
.
filteredInventoryList
;
},
};
};
client/src/modules/products/store/mutations.js
View file @
c0777a3b
...
@@ -2,9 +2,6 @@ export default {
...
@@ -2,9 +2,6 @@ export default {
setProductList
(
state
,
data
)
{
setProductList
(
state
,
data
)
{
state
.
productList
=
data
;
state
.
productList
=
data
;
},
},
setSingleExpand
(
state
)
{
state
.
singleExpand
=
!
state
.
singleExpand
;
},
setDialog
(
state
,
value
)
{
setDialog
(
state
,
value
)
{
state
.
dialog
=
value
;
state
.
dialog
=
value
;
},
},
...
@@ -14,4 +11,7 @@ export default {
...
@@ -14,4 +11,7 @@ export default {
setEditedItem
(
state
,
item
)
{
setEditedItem
(
state
,
item
)
{
state
.
editedItem
=
item
;
state
.
editedItem
=
item
;
},
},
setfilteredProductList
(
state
,
data
)
{
state
.
filteredProductList
=
data
;
},
};
};
client/src/modules/products/store/state.js
View file @
c0777a3b
export
default
()
=>
({
export
default
()
=>
({
productList
:
[],
productList
:
[],
expanded
:
[],
filteredProductList
:
[],
singleExpand
:
true
,
editedIndex
:
-
1
,
editedIndex
:
-
1
,
editedItem
:
{},
editedItem
:
{},
dialog
:
false
,
dialog
:
false
,
...
...
server/db.json
View file @
c0777a3b
This source diff could not be displayed because it is too large. You can
view the blob
instead.
server/package.json
View file @
c0777a3b
...
@@ -8,7 +8,7 @@
...
@@ -8,7 +8,7 @@
"generate:products"
:
"json-server products.js"
,
"generate:products"
:
"json-server products.js"
,
"generate:users"
:
"json-server users.js"
,
"generate:users"
:
"json-server users.js"
,
"generate:customers"
:
"json-server customers.js"
,
"generate:customers"
:
"json-server customers.js"
,
"start"
:
"json-server --watch db.json"
"start"
:
"json-server -
H 0.0.0.0 -
-watch db.json"
},
},
"dependencies"
:
{
"dependencies"
:
{
"fs-extra"
:
"^10.0.1"
,
"fs-extra"
:
"^10.0.1"
,
...
...
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