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 {
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-icon small class="mr-2" @click="editItem(item)">
mdi-pencil
</v-icon>
<v-icon small class="mr-2"> mdi-pencil </v-icon>
<v-icon small @click="deleteCustomer([item.id])"> mdi-delete </v-icon>
</template>
</v-data-table>
......
client/src/modules/products/index.vue
View file @ 04d79a95
......@@ -11,6 +11,7 @@ export default {
computed: {
...mapGetters("products", [
"headers",
"dialogHeaders",
"productList",
"singleExpand",
"expanded",
......@@ -26,7 +27,8 @@ export default {
"closeDialog",
"deleteProduct",
"deleteMultiProduct",
"addProduct",
"saveProduct",
"editProduct",
]),
},
created() {
......@@ -55,33 +57,36 @@ export default {
<v-toolbar-title>Products</v-toolbar-title>
<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
large
icon
color="success"
class="ml-4"
v-bind="attrs"
v-on="on"
class="white--text"
@click="editProduct()"
>
<v-icon>add</v-icon>
</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-title>
<span class="text-h5">Add Product</span>
<span class="headline"></span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<template v-for="header in headers">
<v-container grid-list-md>
<v-layout wrap>
<template v-for="header in dialogHeaders">
<v-flex
xs12
sm6
md4
pa-4
:key="header.value"
v-if="!(header.value === 'actions')"
>
......@@ -91,34 +96,29 @@ export default {
></v-text-field>
</v-flex>
</template>
</v-row>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text> Cancel </v-btn>
<v-btn color="blue darken-1" text @click="addProduct()">
Save
</v-btn>
<template>
<v-btn color="blue darken-1" @click="closeDialog()"
>Cancel</v-btn
>
<v-btn color="blue darken-1" @click="saveProduct()">
Save</v-btn
>
</template>
</v-card-actions>
</v-card>
</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-btn>
<v-spacer></v-spacer>
<v-switch
v-model="singleExpand"
label="Single expand"
......@@ -133,7 +133,7 @@ export default {
</template>
<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
</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 {
console.log(e);
});
});
this.itemList = [];
},
deleteMultiProduct({ dispatch }, items) {
const itemList = [];
......@@ -40,16 +41,31 @@ export default {
console.log(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",
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(() => {
console.log("TESET");
axios(!getters.editedItem.id ? postConfig : putConfig).then(() => {
dispatch("fetchProductData");
});
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 {
{ 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) {
return state.productList;
},
......
client/src/modules/products/store/mutations.js
View file @ 04d79a95
......@@ -8,4 +8,10 @@ export default {
setDialog(state, 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 @@
}
],
"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",
"color": "sky blue",
......@@ -598,17 +488,6 @@
"productMaterial": "Granite",
"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",
"color": "white",
......@@ -874,15 +753,37 @@
"image": "http://loremflickr.com/640/480/food"
},
{
"id": "082c3431-1824-43fe-be38-d08163c5bcaf",
"color": "grey",
"department": "Music",
"price": "496.00",
"productName": "Awesome Fresh Bacon",
"type": "Practical",
"productDescription": "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
"productMaterial": "Cotton",
"image": "http://loremflickr.com/640/480/food"
"productName": "TEST",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvv0GxOJ0UHvMZ32sOyjEehrwlesGXT0nvaQ1zu0c&s",
"id": "agBR89p"
},
{
"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 ",
"image": "https://lh3.googleusercontent.com/2hDpuTi-0AMKvoZJGd-yKWvK4tKdQr_kLIpB_qSeMau2TNGCNidAosMEvrEXFO9G6tmlFlPQplpwiqirgrIPWnCKMvElaYgI-HiVvXc=w600",
"price": "155",
"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": [
......
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