Skip to content

R
reybex-educational-app
Commit 04d79a95 authored by esatakpunar's avatar esatakpunar
Browse files
Options

products add and edit properties

parent 20fea156
Show whitespace changes
Inline Side-by-side
Showing with 2216 additions and 2278 deletions
client/src/modules/customers/index.vue
View file @ 04d79a95
...@@ -68,9 +68,7 @@ export default { ...@@ -68,9 +68,7 @@ export default {
</template> </template>
<template v-slot:[`item.actions`]="{ item }"> <template v-slot:[`item.actions`]="{ item }">
<v-icon small class="mr-2" @click="editItem(item)"> <v-icon small class="mr-2"> mdi-pencil </v-icon>
mdi-pencil
</v-icon>
<v-icon small @click="deleteCustomer([item.id])"> mdi-delete </v-icon> <v-icon small @click="deleteCustomer([item.id])"> mdi-delete </v-icon>
</template> </template>
</v-data-table> </v-data-table>
......
client/src/modules/products/index.vue
View file @ 04d79a95
...@@ -11,6 +11,7 @@ export default { ...@@ -11,6 +11,7 @@ export default {
computed: { computed: {
...mapGetters("products", [ ...mapGetters("products", [
"headers", "headers",
"dialogHeaders",
"productList", "productList",
"singleExpand", "singleExpand",
"expanded", "expanded",
...@@ -26,7 +27,8 @@ export default { ...@@ -26,7 +27,8 @@ export default {
"closeDialog", "closeDialog",
"deleteProduct", "deleteProduct",
"deleteMultiProduct", "deleteMultiProduct",
"addProduct", "saveProduct",
"editProduct",
]), ]),
}, },
created() { created() {
...@@ -55,33 +57,36 @@ export default { ...@@ -55,33 +57,36 @@ export default {
<v-toolbar-title>Products</v-toolbar-title> <v-toolbar-title>Products</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider> <v-divider class="mx-4" inset vertical></v-divider>
<v-dialog v-model="dialog" max-width="750px">
<template v-slot:activator="{ on, attrs }">
<v-btn <v-btn
large large
icon icon
color="success" color="success"
class="ml-4" class="white--text"
v-bind="attrs" @click="editProduct()"
v-on="on"
> >
<v-icon>add</v-icon> <v-icon>add</v-icon>
</v-btn> </v-btn>
</template> <v-btn
large
icon
color="red"
class="white--text"
@click="deleteMultiProduct(selected)"
>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{}"> </template>
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="text-h5">Add Product</span> <span class="headline"></span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container grid-list-md>
<v-row> <v-layout wrap>
<template v-for="header in headers"> <template v-for="header in dialogHeaders">
<v-flex <v-flex
xs12 xs12
sm6 sm6
md4 md4
pa-4
:key="header.value" :key="header.value"
v-if="!(header.value === 'actions')" v-if="!(header.value === 'actions')"
> >
...@@ -91,34 +96,29 @@ export default { ...@@ -91,34 +96,29 @@ export default {
></v-text-field> ></v-text-field>
</v-flex> </v-flex>
</template> </template>
</v-row> </v-layout>
</v-container> </v-container>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="blue darken-1" text> Cancel </v-btn> <template>
<v-btn color="blue darken-1" text @click="addProduct()"> <v-btn color="blue darken-1" @click="closeDialog()"
Save >Cancel</v-btn
</v-btn> >
<v-btn color="blue darken-1" @click="saveProduct()">
Save</v-btn
>
</template>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<!-- <v-btn large icon color="success" class="white--text ml-2">
<v-icon>add</v-icon>
</v-btn> -->
<v-btn
large
icon
color="red"
class="white--text ml-2"
@click="deleteMultiProduct(selected)"
>
<v-icon>delete</v-icon> <v-icon>delete</v-icon>
</v-btn> </v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-switch <v-switch
v-model="singleExpand" v-model="singleExpand"
label="Single expand" label="Single expand"
...@@ -133,7 +133,7 @@ export default { ...@@ -133,7 +133,7 @@ export default {
</template> </template>
<template v-slot:[`item.actions`]="{ item }"> <template v-slot:[`item.actions`]="{ item }">
<v-icon small class="mr-2" @click="editItem(item)"> <v-icon small class="mr-2" @click="editProduct(item)">
mdi-pencil mdi-pencil
</v-icon> </v-icon>
<v-icon small @click="deleteProduct([item.id])"> mdi-delete </v-icon> <v-icon small @click="deleteProduct([item.id])"> mdi-delete </v-icon>
......
client/src/modules/products/store/actions.js
View file @ 04d79a95
...@@ -31,6 +31,7 @@ export default { ...@@ -31,6 +31,7 @@ export default {
console.log(e); console.log(e);
}); });
}); });
this.itemList = [];
}, },
deleteMultiProduct({ dispatch }, items) { deleteMultiProduct({ dispatch }, items) {
const itemList = []; const itemList = [];
...@@ -40,16 +41,31 @@ export default { ...@@ -40,16 +41,31 @@ export default {
console.log(itemList); console.log(itemList);
dispatch("deleteProduct", itemList); dispatch("deleteProduct", itemList);
}, },
addProduct({ getters, dispatch }) {
const config = { saveProduct({ getters, dispatch }) {
if (!getters.editedItem.image) {
getters.editedItem.image =
"https://upload.wikimedia.org/wikipedia/commons/7/70/Solid_white.svg";
}
const postConfig = {
method: "post", method: "post",
url: `http://localhost:3000/products/`, url: `http://localhost:3000/products/`,
data: { products: getters.editedItem }, data: getters.editedItem,
};
const putConfig = {
method: "put",
url: `http://localhost:3000/products/${getters.editedItem.id}`,
data: getters.editedItem,
}; };
axios(config).then(() => { axios(!getters.editedItem.id ? postConfig : putConfig).then(() => {
console.log("TESET");
dispatch("fetchProductData"); dispatch("fetchProductData");
}); });
dispatch("closeDialog"); dispatch("closeDialog");
}, },
editProduct({ commit, getters }, item) {
commit("setEditedIndex", getters.productList.indexOf(item));
commit("setEditedItem", Object.assign({}, item));
commit("setDialog", true);
},
}; };
client/src/modules/products/store/getters.js
View file @ 04d79a95
...@@ -16,6 +16,23 @@ export default { ...@@ -16,6 +16,23 @@ export default {
{ text: "Actions", value: "actions", sortable: false }, { text: "Actions", value: "actions", sortable: false },
]; ];
}, },
dialogHeaders() {
return [
{
text: "Product Name",
align: "left",
value: "productName",
type: "text",
},
{ text: "Type", value: "type", type: "text" },
{ text: "Product Material", value: "productMaterial", type: "text" },
{ text: "Department", value: "department", type: "text" },
{ text: "Color", value: "color", type: "text" },
{ text: "Price", value: "price", type: "text" },
{ text: "Image", value: "image", type: "text" },
{ text: "Product Description", value: "productDescription" },
];
},
productList(state) { productList(state) {
return state.productList; return state.productList;
}, },
......
client/src/modules/products/store/mutations.js
View file @ 04d79a95
...@@ -8,4 +8,10 @@ export default { ...@@ -8,4 +8,10 @@ export default {
setDialog(state, value) { setDialog(state, value) {
state.dialog = value; state.dialog = value;
}, },
setEditedIndex(state, index) {
state.editedIndex = index;
},
setEditedItem(state, item) {
state.editedItem = item;
},
}; };
server/db.json
View file @ 04d79a95
...@@ -345,116 +345,6 @@ ...@@ -345,116 +345,6 @@
} }
], ],
"products": [ "products": [
{
"id": "92f396d8-7ef2-4538-8e8c-1eee0e192847",
"color": "pink",
"department": "Automotive",
"price": "168.00",
"productName": "Handcrafted Granite Salad",
"type": "Handmade",
"productDescription": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
"productMaterial": "Concrete",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "8b56e146-8f42-4d16-bf95-cc2ef5b4e4d9",
"color": "violet",
"department": "Outdoors",
"price": "419.00",
"productName": "Incredible Granite Fish",
"type": "Small",
"productDescription": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
"productMaterial": "Soft",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "8fb9e0f2-75c7-46c3-abdc-13eb8849900c",
"color": "indigo",
"department": "Toys",
"price": "827.00",
"productName": "Licensed Soft Pants",
"type": "Handcrafted",
"productDescription": "The Football Is Good For Training And Recreational Purposes",
"productMaterial": "Granite",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "5d0e0ced-5456-4661-b320-6f282ebcc251",
"color": "teal",
"department": "Garden",
"price": "806.00",
"productName": "Ergonomic Rubber Bacon",
"type": "Practical",
"productDescription": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
"productMaterial": "Metal",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "ae1df187-c6fe-48f4-9450-5c45a87b98ad",
"color": "gold",
"department": "Jewelery",
"price": "88.00",
"productName": "Ergonomic Granite Chicken",
"type": "Ergonomic",
"productDescription": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
"productMaterial": "Fresh",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "efa9685a-afab-492c-a75a-5ba76c74d930",
"color": "olive",
"department": "Sports",
"price": "5.00",
"productName": "Incredible Frozen Bike",
"type": "Refined",
"productDescription": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
"productMaterial": "Wooden",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "7e0fe3d9-322a-4e14-850f-46760fa2dba6",
"color": "fuchsia",
"department": "Books",
"price": "398.00",
"productName": "Rustic Soft Sausages",
"type": "Unbranded",
"productDescription": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
"productMaterial": "Steel",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "9f9a0da5-a612-4c81-8fae-b44e0ad09e85",
"color": "red",
"department": "Baby",
"price": "565.00",
"productName": "Fantastic Soft Ball",
"type": "Incredible",
"productDescription": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
"productMaterial": "Concrete",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "c9110e19-b11d-415f-9fb2-1919a3b0cb6b",
"color": "sky blue",
"department": "Health",
"price": "821.00",
"productName": "Intelligent Steel Chicken",
"type": "Tasty",
"productDescription": "The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality",
"productMaterial": "Steel",
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "e7e7882e-c29f-43a2-9726-9e36aae0dbd6",
"color": "cyan",
"department": "Tools",
"price": "154.00",
"productName": "Licensed Wooden Fish",
"type": "Fantastic",
"productDescription": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
"productMaterial": "Concrete",
"image": "http://loremflickr.com/640/480/food"
},
{ {
"id": "fd57bff2-2ba6-4b8d-9291-7fe4ac843667", "id": "fd57bff2-2ba6-4b8d-9291-7fe4ac843667",
"color": "sky blue", "color": "sky blue",
...@@ -598,17 +488,6 @@ ...@@ -598,17 +488,6 @@
"productMaterial": "Granite", "productMaterial": "Granite",
"image": "http://loremflickr.com/640/480/food" "image": "http://loremflickr.com/640/480/food"
}, },
{
"id": "61bb6cfd-55bd-428e-bae1-b812aa4758cc",
"color": "white",
"department": "Computers",
"price": "932.00",
"productName": "Awesome Plastic Pizza",
"type": "Practical",
"productDescription": "The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality",
"productMaterial": "Rubber",
"image": "http://loremflickr.com/640/480/food"
},
{ {
"id": "fd522b5a-e0c0-462b-896f-9775105b5974", "id": "fd522b5a-e0c0-462b-896f-9775105b5974",
"color": "white", "color": "white",
...@@ -874,15 +753,37 @@ ...@@ -874,15 +753,37 @@
"image": "http://loremflickr.com/640/480/food" "image": "http://loremflickr.com/640/480/food"
}, },
{ {
"id": "082c3431-1824-43fe-be38-d08163c5bcaf", "productName": "TEST",
"color": "grey", "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvv0GxOJ0UHvMZ32sOyjEehrwlesGXT0nvaQ1zu0c&s",
"department": "Music", "id": "agBR89p"
"price": "496.00", },
"productName": "Awesome Fresh Bacon", {
"type": "Practical", "productDescription": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content ",
"productDescription": "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles", "image": "https://lh3.googleusercontent.com/2hDpuTi-0AMKvoZJGd-yKWvK4tKdQr_kLIpB_qSeMau2TNGCNidAosMEvrEXFO9G6tmlFlPQplpwiqirgrIPWnCKMvElaYgI-HiVvXc=w600",
"productMaterial": "Cotton", "price": "155",
"image": "http://loremflickr.com/640/480/food" "color": "yellow",
"department": "animation",
"productMaterial": "skin",
"productName": "SHREK",
"type": "BEAR",
"id": "ydrVy70"
},
{
"productName": "SHREK WILL SMITH",
"type": "PLAYER",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWIQtvI4R2veBQody_-coonotC4wtVntt5QCH-ACKXtMnfF5zy7vgqKj-84TGT3GoCD_o&usqp=CAU",
"id": "vnnyXTd"
},
{
"productName": "TESTETEOARSFA",
"image": "https://stickerly.pstatic.net/sticker_pack/PQEbA06NLcQ7reKUeFtK0g/9I87N5/2/08cebe44-befc-4883-b0a8-913d0225db72.png",
"id": "4nyyJf_",
"productDescription": "CILEKTEN BIR KEDI GERCEK OLABILIR MI"
},
{
"productName": "anull image",
"image": "https://upload.wikimedia.org/wikipedia/commons/7/70/Solid_white.svg",
"id": "fDt1Bf_"
} }
], ],
"customers": [ "customers": [
......
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