@mframework/layer-commerce 0.0.7 → 0.0.8

package/app/components/catalog/product/update-attribute.vue

@@ -0,0 +1,118 @@
+<template>
+    <v-row justify="center">
+        <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition">
+            <template v-slot:activator="{ props }">
+                <v-btn v-bind="props" class="rightAddBtn">
+                    <v-icon start icon="fas:fa fa-plus"></v-icon>Add Attribute
+                </v-btn>
+            </template>
+            <v-card>
+                <form method="post" @v-on:submit.prevent="addAttribute()">
+                    <v-toolbar dark color="primary">
+                        <v-btn icon dark @click="dialog = false">
+                            <v-icon icon="fas:fa fa-circle-xmark"></v-icon>
+                        </v-btn>
+                        <v-card-title>
+                            <span class="text-h6">Create new Attribute</span>
+                        </v-card-title>
+                    </v-toolbar>
+                    <v-card-text>
+                        <v-container>
+                            <v-row>
+                                <v-col cols="12">
+                                    <v-text-field v-model="name" id="addressName" label="Attribute Name*" required></v-text-field>
+                                </v-col>
+                                <v-col cols="12">
+                                    <v-textarea v-model="content" label="Description" id="addressDescription">
+                                    </v-textarea>
+                                </v-col>
+                                <v-col cols="6">
+                                    <v-text-field v-model="meta_title" label="Meta Name" id="addressName"></v-text-field>
+                                </v-col>
+                                <v-col cols="6">
+                                    <v-text-field v-model="meta_keywords" label="Meta Keywords"></v-text-field>
+                                </v-col>
+                                <v-col cols="12">
+                                    <v-textarea v-model="meta_description" label="Meta Description" id="addressDescription"></v-textarea>
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                        <small>*indicates required field</small>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="blue-darken-1" variant="text" @click="dialog = false">
+                            Close
+                        </v-btn>
+                        <v-btn color="blue-darken-1" variant="text" @click="dialog = false">
+                            Save
+                        </v-btn>
+                    </v-card-actions>
+                </form>
+            </v-card>
+        </v-dialog>
+    </v-row>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    
+
+    const config = useRuntimeConfig();
+    const name = ref('');
+    const content = ref('');
+    const dialog = ref(false);
+    const notifications = ref(false);
+    const sound = ref(true);
+    const widgets = ref(false);
+    const slug = ref('');
+    const type = ref('');
+    const errorMessage = ref('');
+    const successMessage = ref('');
+
+    const createAttribute = async () => {
+        try {
+            const response = await $fetch(`${config.public.wordpressUrl}/wp-json/dokan/v1/products/attributes`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${config.public.wordpressToken}`
+                },
+                body: JSON.stringify({
+                    name: name.value,
+                    slug: slug.value,
+                    type: type.value,
+                    status: 'publish',
+                })
+            })
+
+            console.log(response);
+
+            if (response.id) {
+                successMessage.value = 'Attribute created successfully!'
+                errorMessage.value = ''
+            } else {
+                throw new Error('Failed to create attribute')
+            }
+        } catch (error) {
+            console.error('Error creating attribute:', error);
+            if (error.response) {
+                console.error('Error response:', error.response);
+                if (error.response.status === 403) {
+                    errorMessage.value = 'You do not have permission to create a attribute.'
+                } else {
+                    errorMessage.value = `Error: ${error.response.status} ${error.response.statusText}`
+                }
+            } else {
+                errorMessage.value = error.message
+            }
+            successMessage.value = ''
+        }
+    }
+
+    useHead({
+        title: 'Create Attribute',
+    })
+</script>

package/app/components/catalog/product/update-product.vue

@@ -0,0 +1,372 @@
+<template>
+    <div>
+        <form>
+            <v-toolbar dark color="rgb(var(--v-theme-primary))!important">
+                <v-card-title>
+                    <span class="text-h6">Update Product</span>
+                </v-card-title>
+            </v-toolbar>
+            <v-card-text>
+                <v-container>
+                    <v-row>
+                        <v-col cols="12">
+                            <v-text-field v-model="searchSku" label="Search Product by SKU" append-icon="mdi-magnify"
+                                @click:append="fetchProduct(searchSku)"></v-text-field>
+                        </v-col>
+                        <v-col cols="12">
+                            <h5>Basic Information</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+                        <v-col cols="6">
+                            <v-select v-model="status" :items="['Enable', 'Disable']" label="Status*"></v-select>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-select v-model="type" :items="['simple', 'configurable', 'virtual', 'downloadable']"
+                                label="Product Type*"></v-select>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-text-field v-model="name" label="Product Name*" required></v-text-field>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-text-field v-model="sku" type="number" label="SKU*" required></v-text-field>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-text-field v-model="price" type="number" label="Price*" required></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-select v-model="tax_class" :items="[
+    { text: 'None', value: 0 },
+    { text: 'Taxable Goods', value: 2 },
+    { text: 'Shipping', value: 4 }
+]" label="Tax Class"></v-select>
+
+                        </v-col>
+                        <v-col cols="6">
+                            <v-text-field v-model="quantity_per_source" type="number" label="Quantity"></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-text-field v-model="weight" type="number" label="Weight"></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-text-field v-model="height" type="number" label="Height"></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-autocomplete v-model="catalog_visibility" :items="['public', 'private']"
+                                label="Visibility">
+                            </v-autocomplete>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-autocomplete v-model="categories" :items="['public']" label="Categories">
+                            </v-autocomplete>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-autocomplete v-model="manufacture" :items="['public']" label="Manufacture">
+                            </v-autocomplete>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-autocomplete v-model="country" :items="['public']" label="Country of Manufacture">
+                            </v-autocomplete>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-select v-model="tax_status" :items="['0-17']" label="Tags">
+                            </v-select>
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Content</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="12">
+                            <v-textarea v-model="short_description" label="Short Description*"></v-textarea>
+                        </v-col>
+                        <v-col cols="12">
+                            <h6>Description</h6>
+                            <editor />
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Images and Files</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="12">
+                            <v-file-input label="Product Image*" multiple required></v-file-input>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-file-input label="Product Thumbnails" multiple></v-file-input>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-file-input label="Product Files" multiple></v-file-input>
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Related Products, Up-Sells, and Cross-Sells</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="12">
+                            <v-select v-model="related_ids" :items="['0-17']" label="Related Products">
+                            </v-select>
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Other Information</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="6">
+                            <v-text-field v-model="width" type="number" label="Part Number"></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-text-field v-model="manufacturer_part_number" type="number"
+                                label="Manufacturer Part Number"></v-text-field>
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Downloadable Information</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="6">
+                            <v-select v-model="format" :items="['Downloadable', 'Not Downloadable']" label="format">
+                            </v-select>
+                        </v-col>
+                    </v-row>
+                </v-container>
+                <small>*indicates required field</small>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red-darken-1" variant="text" @click="deleteProduct">
+                    Delete
+                </v-btn>
+                <v-btn color="blue-darken-1" variant="text" @click="dialog = false">
+                    Close
+                </v-btn>
+                <v-btn color="blue-darken-1" variant="text" @click="updateProduct">
+                    Update Product
+                </v-btn>
+            </v-card-actions>
+
+        </form>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+
+    import editor from '~/components/partials/globals/editor.vue'
+
+    const config = useRuntimeConfig();
+    const name = ref('');
+    const status = ref('');
+    const short_description = ref('');
+    const description = ref('');
+    const type = ref('');
+    const sku = ref('');
+    const image = ref('');
+    const height = ref('');
+    const weight = ref('');
+    const tax_status = ref('');
+    const price = ref('');
+    const tax_class = ref('');
+    const catalog_visibility = ref('');
+    const related_ids = ref('');
+    const categories = ref('');
+    const manufacture = ref('');
+    const country = ref('');
+    const brand = ref('');
+    const width = ref('');
+    const format = ref('');
+    const errorMessage = ref('');
+    const successMessage = ref('');
+    const searchSku = ref('');
+
+    const updateProduct = async () => {
+        try {
+            const UPDATE_PRODUCT = `
+            mutation updateProduct(
+                $sku: String!
+                $name: String
+                $price: Float
+                $status: Int
+                $weight: Float
+                $description: String
+                $short_description: String
+                $tax_class_id: Int
+            ) {
+                updateSimpleProduct(
+                    input: {
+                        sku: $sku
+                        name: $name
+                        price: $price
+                        status: $status
+                        weight: $weight
+                        description: { html: $description }
+                        short_description: { html: $short_description }
+                        tax_class_id: $tax_class_id
+                    }
+                ) {
+                    product {
+                        id
+                        name
+                        sku
+                        price {
+                            regularPrice {
+                                amount {
+                                    value
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        `;
+
+            const variables = {
+                sku: sku.value,
+                name: name.value,
+                price: parseFloat(price.value),
+                status: status.value === 'Enable' ? 1 : 2,
+                weight: parseFloat(weight.value),
+                description: description.value,
+                short_description: short_description.value,
+                tax_class_id: parseInt(tax_class.value)
+            };
+
+            const response = await fetch(`${config.public.commerceUrl}/graphql`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${config.public.commerceApiToken}`
+                },
+                body: JSON.stringify({
+                    query: UPDATE_PRODUCT,
+                    variables
+                })
+            });
+
+            const result = await response.json();
+            if (result.errors) {
+                throw new Error(result.errors[0].message);
+            }
+
+            successMessage.value = 'Product updated successfully';
+        } catch (error) {
+            errorMessage.value = error.message;
+        }
+    };
+
+    const deleteProduct = async () => {
+        try {
+            const DELETE_PRODUCT = `
+            mutation deleteProduct($sku: String!) {
+                deleteProducts(
+                    skus: [$sku]
+                ) {
+                    result
+                }
+            }
+        `;
+
+            const variables = {
+                sku: sku.value
+            };
+
+            const response = await fetch(`${config.public.commerceUrl}/graphql`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${config.public.commerceApiToken}`
+                },
+                body: JSON.stringify({
+                    query: DELETE_PRODUCT,
+                    variables
+                })
+            });
+
+            const result = await response.json();
+            if (result.errors) {
+                throw new Error(result.errors[0].message);
+            }
+
+            successMessage.value = 'Product deleted successfully';
+        } catch (error) {
+            errorMessage.value = error.message;
+        }
+    };
+
+    // Add a method to fetch product data for editing
+    const fetchProduct = async (sku) => {
+        try {
+            const GET_PRODUCT = `
+            query getProduct($sku: String!) {
+                products(filter: { sku: { eq: $sku } }) {
+                    items {
+                        name
+                        sku
+                        price {
+                            regularPrice {
+                                amount {
+                                    value
+                                }
+                            }
+                        }
+                        status
+                        weight
+                        description {
+                            html
+                        }
+                        short_description {
+                            html
+                        }
+                        tax_class_id
+                    }
+                }
+            }
+        `;
+
+            const response = await fetch(`${config.public.commerceUrl}/graphql`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${config.public.commerceApiToken}`
+                },
+                body: JSON.stringify({
+                    query: GET_PRODUCT,
+                    variables: {
+                        sku
+                    }
+                })
+            });
+
+            const result = await response.json();
+            if (result.errors) {
+                throw new Error(result.errors[0].message);
+            }
+
+            const product = result.data.products.items[0];
+            if (product) {
+                // After successful update or delete
+                dialog.value = false;
+                name.value = product.name;
+                sku.value = product.sku;
+                price.value = product.price.regularPrice.amount.value;
+                status.value = product.status === 1 ? 'Enable' : 'Disable';
+                weight.value = product.weight;
+                description.value = product.description.html;
+                short_description.value = product.short_description.html;
+                tax_class.value = product.tax_class_id;
+            }
+        } catch (error) {
+            errorMessage.value = error.message;
+        }
+    };
+
+    useHead({
+        title: 'Update Product',
+    })
+</script>

package/app/components/catalog/product/update-showcase.vue

@@ -0,0 +1,153 @@
+<template>
+    <div>
+        <v-card elevation="0">
+            <v-toolbar title="Update A Showcase"></v-toolbar>
+            <v-form @submit.prevent="updateShowcase">
+                <v-container>
+                    <v-row>
+                        <v-col cols="6">
+                            <v-text-field v-model="title" label="Showcase Name" required></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-combobox v-model="type" label="Status" :items="['Public', 'Private']"></v-combobox>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-file-input clearable label="Showcase Image"></v-file-input>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-textarea v-model="description" label="Showcase Description"></v-textarea>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-card title="Choose a Product for your Showcase">
+                                <v-card-text>
+                                    <v-text-field density="compact" variant="solo" label="Search Meeovi for products"
+                                        append-inner-icon="fas:fa fa-search" single-line hide-details
+                                        @click:append-inner="onClick"></v-text-field>
+                                    <v-spacer></v-spacer>
+                                    <div class="d-flex pa-4">
+                                        <v-checkbox-btn v-model="includeFiles" class="pe-2" color="orange">
+                                        </v-checkbox-btn>
+                                        <!--<NuxtLink :to="`/product/${products.id}`">
+                                        <v-card class="ma-4" height="580" width="250" @click="toggle">
+                                            <NuxtImg loading="lazy" class="align-end text-white" height="280"
+                                                :src="`${products.featuredAsset.preview}`" :alt="products.name" cover />
+
+                                            <v-card-title class="pt-4">
+                                                {{ products.name }}
+                                            </v-card-title>
+
+                                            <v-card-text>
+                                                <div>Sku: {{ products.variants.sku }}</div>
+                                            </v-card-text>
+
+                                            <v-card-actions>
+                                                <v-card-title>$ {{ products.variants.price }}
+                                                </v-card-title>
+                                            </v-card-actions>
+                                            <div class="d-flex fill-height align-center justify-center">
+                                                <v-scale-transition>
+                                                    <v-icon v-if="isSelected" color="white" size="48"
+                                                        icon="mdi-close-circle-outline"></v-icon>
+                                                </v-scale-transition>
+                                            </div>
+                                        </v-card>
+                                    </NuxtLink>-->
+                                    </div>
+                                </v-card-text>
+                            </v-card>
+                        </v-col>
+                    </v-row>
+                </v-container>
+
+                <v-divider class="mt-12"></v-divider>
+                <v-card-actions>
+                    <v-btn color="blue-darken-1" variant="text" type="submit" @click.prevent="deleteShowcaseAndRefresh">
+                        Delete
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue-darken-1" variant="text" type="submit" @click.prevent="updateShowcaseAndRefresh">
+                        Update
+                    </v-btn>
+                </v-card-actions>
+            </v-form>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import { useRoute, useRouter } from 'vue-router';
+/*import { UPDATE_SHOWCASE, DELETE_SHOWCASE } from '#graphql/cms/queries/showcases'
+
+const route = useRoute();
+const router = useRouter();
+const id = route.params.id;
+
+const dialog = ref(false)
+const includeFiles = ref(true)
+const enabled = ref(false)
+const name = ref('');
+const title = ref('');
+const color = ref('');
+const colortext = ref('');
+const showcaseFields = ref('');
+const description = ref('');
+const image = ref('');
+const rating = ref('');
+const products = ref('');
+
+const { client: apolloClient } = useApolloClient();
+
+const updateShowcase = async () => {
+  try {
+    const { data } = await apolloClient.mutate({
+      mutation: UPDATE_SHOWCASE,
+      variables: {
+        name: name.value,
+        title: title.value,
+        color: showcaseFields.color.value,
+        colortext: showcaseFields.colortext.value,
+        description: showcaseFields.description.value,
+        image: showcaseFields.image.node.sourceUrl,
+        id: id,
+      },
+    });
+    console.log('Showcase updated:', data.updateShowcase.showcase);
+  } catch (error) {
+    console.error('Error updating showcase:', error);
+  }
+};
+
+const deleteShowcase = async () => {
+  try {
+    const { data } = await apolloClient.mutate({
+      mutation: DELETE_SHOWCASE,
+      variables: {
+        id: id,
+      },
+    });
+    console.log('Showcase deleted:', data.deleteShowcase.showcase.id);
+  } catch (error) {
+    console.error('Error deleting showcase:', error);
+  }
+};
+
+const deleteShowcaseAndRefresh = async () => {
+  await deleteShowcase();
+  router.push('/product/showcase/showcases');  // Refresh the current route
+};
+
+const updateShowcaseAndRefresh = async () => {
+  await updateShowcase();
+  router.go(0);  // Refresh the current route
+};
+
+const reset = () => {
+  router.go(0);
+};*/
+
+    useHead({
+        title: 'Update Showcase',
+    })
+</script>