@mframework/layer-commerce 0.0.7 → 0.0.8

package/app/components/catalog/product/productSpecs.vue

@@ -0,0 +1,116 @@
+<template>
+  <v-table>
+    <tbody>
+      <tr>
+        <th>Released</th>
+        <td>{{ new Date(product?.created_at).toLocaleDateString() }}</td>
+      </tr>
+      <tr>
+        <th>Updated</th>
+        <td>{{ new Date(product?.updated_at).toLocaleDateString() }}</td>
+      </tr>
+      <tr>
+        <th>Name</th>
+        <td>{{ product?.name }}</td>
+      </tr>
+      <tr>
+        <th>Category Name</th>
+        <td><div style="display: inline-block;" v-for="categories in product?.categories" :key="categories">{{ categories?.categories_id?.name.join(', ') }}</div></td>
+      </tr>
+      <tr>
+        <th>Price</th>
+        <td>
+          <strong><div style="display: inline-block;" v-for="currency in product?.currency" :key="currency">{{ currency?.currency_id?.symbol }}</div></strong>
+          {{ product?.price }}
+        </td>
+      </tr>
+      <tr>
+        <th>Average Rating</th>
+        <td><ratings :rating="product?.rating" /></td>
+      </tr>
+      <tr>
+        <th># of Reviews</th>
+        <td>{{ product?.review_count }}</td>
+      </tr>
+      <tr>
+        <th>Sku</th>
+        <td>{{ product?.sku }}</td>
+      </tr>
+      <tr>
+        <th>How many items are left?</th>
+        <td>{{ product?.stock }}</td>
+      </tr>
+      <tr>
+        <th>Visibility</th>
+        <td>{{ product?.visibility }}</td>
+      </tr>
+      <tr>
+        <th>Weight</th>
+        <td>{{ product?.weight }}</td>
+      </tr>
+      <tr>
+        <th>Height</th>
+        <td>{{ product?.height }}</td>
+      </tr>
+      <tr>
+        <th>Format</th>
+        <td v-dompurify-html="product?.format"></td>
+      </tr>
+      <tr>
+        <th>Product Color</th>
+        <td>{{ product?.color }}</td>
+      </tr>
+      <tr>
+        <th>Product Size</th>
+        <td>{{ product?.size }}</td>
+      </tr>
+      <tr>
+        <th>Product Manufacturer</th>
+        <td>{{ product?.manufacturer?.manufacturer_id?.name }}</td>
+      </tr>
+      <tr>
+        <th>Product Description</th>
+        <td><div v-dompurify-html="product?.content"></div></td>
+      </tr>
+      <tr>
+        <th>Is Gift Message Available</th>
+        <td>{{ product?.gift_message_available }}</td>
+      </tr>
+      <tr>
+        <th>Special to Date</th>
+        <td><div style="display: inline-block;" v-for="currency in product?.currency" :key="currency">{{ currency?.currency_id?.symbol }}</div> {{ product?.special_to_date }}</td>
+      </tr>
+      <tr>
+        <th>Special Price</th>
+        <td><div style="display: inline-block;" v-for="currency in product?.currency" :key="currency">{{ currency?.currency_id?.symbol }}</div> {{ product?.special_price  }}</td>
+      </tr>
+      <tr>
+        <th>Is Featured</th>
+        <td>{{ product?.is_featured }}</td>
+      </tr>
+      <tr>
+        <th>Product URL Key</th>
+        <td>{{ product?.url_key }}</td>
+      </tr>
+      <tr>
+        <th>Product URL Path</th>
+        <td>{{ product?.url_path }}</td>
+      </tr>
+      <tr>
+        <th>Product Gift Message Availability</th>
+        <td>{{ product?.gift_message_available }}</td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup>
+import ratings from '../../partials/ratings.vue'
+
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true,
+  },
+});
+</script>

package/app/components/catalog/product/radiostation.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <v-card color="#b02564">
+            <div class="d-flex flex-no-wrap justify-space-between">
+                <div>
+                    <v-card-title class="text-h5">
+                        {{ radio?.name }}
+                    </v-card-title>
+
+                    <v-card-subtitle>{{ radio?.description }}</v-card-subtitle>
+
+                    <v-card-actions>
+                        <v-btn class="ms-2" size="small" text="LISTEN" variant="outlined"
+                            :href="`/departments/categories/station/${radio?.id}`"></v-btn>
+                    </v-card-actions>
+                </div>
+
+                <v-avatar class="ma-3" rounded="0" size="125">
+                    <NuxtImg :src="`${$directus.url}/assets/${radio?.image?.filename_disk}`" />
+                </v-avatar>
+            </div>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        radio: {
+            type: Object,
+            required: true,
+        },
+    });
+    const {
+        radio
+    } = props;
+</script>

package/app/components/catalog/product/recentlyviewed.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
+      data-sortbtn="btn-primary">
+      <div class="container-fluid">
+        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
+          Recently Viewed</h2>
+        <div class="underline align-left pb-3">
+          <div class="line"></div>
+        </div>
+        <v-sheet class="mx-auto">
+          <v-slide-group v-model="model" class="pa-4" show-arrows>
+            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
+              v-for="(products, index) in recentlyViewed" :key="index">
+              <productCard :product="products" :class="['ma-4', selectedClass]" @click="toggle" />
+
+              <div class="d-flex fill-height align-center justify-center">
+                <v-scale-transition>
+                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-slide-group-item>
+          </v-slide-group>
+        </v-sheet>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+  import productCard from './productCard.vue'
+
+  const model = ref(null)
+
+  import { onMounted } from 'vue'
+  import { useRecentlyViewed } from '#commerce/app/composables/products/useRecentlyViewed'
+
+  const { products: recentlyViewed, load } = useRecentlyViewed()
+
+  onMounted(() => {
+    load()
+  })
+</script>

package/app/components/catalog/product/relatedbrands.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
+      data-sortbtn="btn-primary">
+      <div class="container-fluid">
+        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
+          Related Brands</h2>
+        <div class="underline align-left pb-3">
+          <div class="line"></div>
+        </div>
+        <v-sheet class="mx-auto">
+          <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
+              v-for="(brand, index) in relatedbrands" :key="index">
+              <brandCard :product="brand" :class="['ma-4', selectedClass]" @click="toggle" />
+
+              <div class="d-flex fill-height align-center justify-center">
+                <v-scale-transition>
+                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-slide-group-item>
+          </v-slide-group>
+        </v-sheet>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import brandCard from '../../related/brandCard.vue'
+
+  const model = ref(null)
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  const {
+    data: relatedbrands
+  } = await useAsyncData('relatedbrands', () => {
+    return $directus.request($readItems('brands', {
+      fields: ['*',
+        'image.*',
+      ],
+      limit: 10,
+      filter: {
+        status: {
+          _eq: "published"
+        }
+      }
+    }))
+  })
+</script>

package/app/components/catalog/product/relatedproducts.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
+      data-sortbtn="btn-primary">
+      <div class="container-fluid">
+        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
+          Related Products</h2>
+        <div class="underline align-left pb-3">
+          <div class="line"></div>
+        </div>
+        <v-sheet class="mx-auto">
+          <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
+              v-for="(products, index) in related" :key="index">
+              <productCard :product="products" :class="['ma-4', selectedClass]" @click="toggle" />
+
+              <div class="d-flex fill-height align-center justify-center">
+                <v-scale-transition>
+                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-slide-group-item>
+          </v-slide-group>
+        </v-sheet>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import productCard from './productCard.vue'
+
+  const model = ref(null)
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  const {
+    data: related
+  } = await useAsyncData('related', () => {
+    return $directus.request($readItems('products', {
+      fields: ['*',
+        'products.products_id.*',
+        'products.products_id.image.*',
+        'currency.currency_id.*',
+        'brands.brands_id.*',
+        'image.*',
+      ],
+      limit: 10,
+      filter: {
+        status: {
+          _eq: "published"
+        }
+      }
+    }))
+  })
+</script>

package/app/components/catalog/product/relatedstations.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <v-sheet class="mx-auto row align-items-stretch items-row">
+      <v-toolbar title="Radio Stations from the community" color="transparent">
+        <NuxtLink to="/departments/categories/stations/">All Radio Stations</NuxtLink>
+      </v-toolbar>
+      <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+        <v-slide-group-item v-slot="{ toggle, selectedClass }" v-for="(result, index) in stationSlide" :key="index">
+          <stations style="margin: 10px;" :radio="result" :class="['ma-4', selectedClass]" @click="toggle" />
+        </v-slide-group-item>
+      </v-slide-group>
+    </v-sheet>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+  } from 'vue';
+  import stations from './radiostation.vue'
+
+  const model = ref(null);
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  const {
+    data: stationSlide
+  } = await useAsyncData('stationSlide', () => {
+    return $directus.request($readItems('radios', {
+      fields: ['*', { '*': ['*'] }],
+      filter: {
+        status: {
+          _eq: "published"
+        }
+      }
+    }))
+  })
+</script>

package/app/components/catalog/product/shippingOptions.vue

@@ -0,0 +1,41 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <h6>Delivery</h6>
+        </v-col>
+
+        <v-col cols="12">
+            <v-select v-model="selected" :items="shippingOptions" item-title="name" item-value="id"
+                label="Select Delivery Method" single-line variant="solo" :loading="loading"
+                :disabled="loading || shippingOptions.length === 0"></v-select>
+        </v-col>
+    </v-row>
+</template>
+
+<script setup>
+import { onMounted, watch } from 'vue'
+import { useShippingSelection } from '~/app/composables/cart/useShippingSelection'
+
+const props = defineProps({
+    modelValue: { type: [String, Number, null], default: null }
+})
+const emit = defineEmits(['shippingOption-selected', 'update:modelValue'])
+
+const { shippingOptions, selected, loading, load } = useShippingSelection(props.modelValue)
+
+onMounted(() => {
+    load()
+})
+
+watch(() => props.modelValue, (val) => {
+    if (val === selected.value) return
+    selected.value = val
+})
+
+watch(selected, async (val) => {
+    const option = shippingOptions.value.find((s) => s.id === val) || null
+    // update parent v-model
+    emit('update:modelValue', val)
+    emit('shippingOption-selected', option)
+})
+</script>

package/app/components/catalog/product/sizeOptions.vue

@@ -0,0 +1,47 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <h6>Size</h6>
+        </v-col>
+
+        <v-col cols="12">
+            <v-select v-model="selectedSize" :items="sizes" label="Select Size" item-value="id" item-title="name" single-line variant="solo" />
+        </v-col>
+    </v-row>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+const emit = defineEmits(['size-selected'])
+const sizes = ref([])
+const selectedSize = ref(null)
+
+
+const nuxtApp = useNuxtApp()
+const { $directus, $readItems } = nuxtApp
+
+const loadSizes = async () => {
+    try {
+        const res = await $directus.request($readItems('attributes', {
+            filter: {
+                attribute_code: { _eq: 'size' }
+            },
+            sort: ['id']
+        }))
+
+        const attr = (res && res[0]) || null
+        const opts = attr?.options || []
+        sizes.value = opts.map((o, i) => ({ id: `${attr?.id || 'size'}-${i}`, name: o.name }))
+    } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to load size attributes', e)
+        sizes.value = []
+    }
+}
+
+watch(selectedSize, (newSize) => emit('size-selected', newSize))
+
+onMounted(() => {
+    loadSizes()
+})
+</script>

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

@@ -0,0 +1,209 @@
+<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 Set
+                </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 Set</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>
+ /*   import gql from "graphql-tag";
+    import findManyCategories from "#graphql/query/findManyCategories"
+
+    const ADD_CATEGORIES = gql `
+    mutation createOneCategories($name: String!, $content: String, $image: String, $meta_title: String, $meta_keywords: String, $meta_description:String){
+    createOneCategories(data: {name: $name, content: $content, image: $image, meta_description: $meta_description, meta_keywords: $meta_keywords, meta_title: $meta_title}) {
+      name
+        content
+        image
+        meta_description
+        meta_keywords
+        meta_title
+}
+    }`; */
+
+    export default {
+        data() {
+            return {
+                dialog: false,
+                notifications: false,
+                sound: true,
+                widgets: false,
+            /*    name: ' ',
+                content: ' ',
+                image: ' ',
+                meta_description: ' ',
+                meta_keywords: ' ',
+                meta_title: ' ' */
+            }
+        },
+      /*  methods: {
+            addAttribute() {
+                const name = this.name;
+                const content = this.content;
+                const image = this.image;
+                // eslint-disable-next-line camelcase
+                const meta_title = this.meta_title;
+                // eslint-disable-next-line camelcase
+                const meta_keywords = this.meta_keywords;
+                // eslint-disable-next-line camelcase
+                const meta_description = this.meta_description;
+                this.$apollo.mutate({
+                    mutation: ADD_CATEGORIES,
+                    variables: {
+                        name,
+                        content,
+                        image,
+                        meta_description,
+                        meta_keywords,
+                        meta_title,
+                    },
+                    update: (store, {
+                        data: {
+                            addAttribute
+                        }
+                    }) => {
+                        // Read data from store for this query
+                        const data = store.readQuery({
+                            query: findManyCategories,
+                            variables: {
+                                first: 5,
+                                skip: 0,
+                                orderBy: 'createdAt_DESC'
+                            }
+                        })
+                        data.allCategories.push(addAttribute)
+                        store.writeQuery({
+                            query: findManyCategories,
+                            variables: {
+                                first: 5,
+                                skip: 0,
+                                orderBy: 'createdAt_DESC'
+                            },
+                            data
+                        })
+                    }
+                }).then((_data) => {
+                    this.$router.push({
+                        path: '~/content/categories'
+                    })
+                }).catch(error => console.error(error));
+                this.name = ' ';
+                this.content = ' ';
+                this.image = ' ';
+                this.meta_description = ' ';
+                this.meta_keywords = ' ';
+                this.meta_title = ' ';
+            },
+        }, */
+    }
+</script>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    
+
+    const config = useRuntimeConfig();
+    const name = ref('');
+    const slug = ref('');
+    const type = ref('');
+    const description = ref('');
+    const errorMessage = ref('');
+    const successMessage = ref('');
+
+    const createAttribute = async () => {
+        try {
+            const response = await $fetch(`${config.public.wordpressUrl}/wp-json/dokan/v1/products/attributes/${attribute.id}/terms`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${config.public.wordpressToken}`
+                },
+                body: JSON.stringify({
+                    name: name.value,
+                    slug: slug.value,
+                    type: type.value,
+                    description: description.value,
+                    description: description.value,
+                    status: 'publish',
+                })
+            })
+
+            console.log(response);
+
+            if (response.id) {
+                successMessage.value = 'Attribute Term created successfully!'
+                errorMessage.value = ''
+            } else {
+                throw new Error('Failed to create attribute term')
+            }
+        } catch (error) {
+            console.error('Error creating attribute term:', 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 term.'
+                } else {
+                    errorMessage.value = `Error: ${error.response.status} ${error.response.statusText}`
+                }
+            } else {
+                errorMessage.value = error.message
+            }
+            successMessage.value = ''
+        }
+    }
+
+    useHead({
+        title: 'Create Attribute Term',
+    })
+</script>