@meeovi/layer-commerce 1.0.3 → 1.0.4

package/app/components/categories/chart/[id].vue

@@ -0,0 +1,200 @@
+<template>
+    <div class="contentPage">
+        <v-row>
+            <v-col cols="12">
+                <v-card :color="chartbar?.color">
+                    <div class="d-flex flex-no-wrap justify-space-between">
+                        <div>
+                            <v-card-title class="text-h5">
+                                {{ chart?.name }}
+                            </v-card-title>
+
+                            <v-card-subtitle>{{ chart?.description }}</v-card-subtitle>
+                        </div>
+
+                        <v-avatar class="ma-3" rounded="0" size="125">
+                            <NuxtImg :src="`${$directus.url}/assets/${chart?.image?.filename_disk}`" />
+                        </v-avatar>
+                    </div>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12">
+                <v-card elevation="0">
+                    <v-tabs v-model="tab" :bg-color="chartbar?.color">
+                        <div v-for="(menu, index) in spacebar?.menus" :key="index">
+                            <v-tab :value="menu?.value">{{ menu?.name }}</v-tab>
+                        </div>
+                    </v-tabs>
+
+                    <v-card-text>
+                        <v-tabs-window v-model="tab">
+                            <v-tabs-window-item :value="chartbar?.menus[0]?.value">
+                                <!-- Weekly Chart Table -->
+                                <WeeklyChart :data="topProducts" />
+                            </v-tabs-window-item>
+                            <v-tabs-window-item :value="chartbar?.menus[1]?.value">
+                                <!-- Monthly Chart Table -->
+                                <MonthlyChart :data="topProducts" />
+                            </v-tabs-window-item>
+                            <v-tabs-window-item :value="chartbar?.menus[2]?.value">
+                                <!-- Yearly Chart Table -->
+                                <YearlyChart :data="topProducts" />
+                            </v-tabs-window-item>
+
+                            <v-tabs-window-item :value="chartbar?.menus[3]?.value">
+                                <v-row>
+                                    <v-col v-for="charts in charts" :key="charts">
+                                        <charts :chart="charts" />
+                                    </v-col>
+                                </v-row>
+                            </v-tabs-window-item>
+                        </v-tabs-window>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed
+    } from 'vue'
+    import WeeklyChart from '@/components/charts/weeklyChart.vue'
+    import MonthlyChart from '@/components/charts/monthlyChart.vue'
+    import YearlyChart from '@/components/charts/yearlyChart.vue'
+
+    const tab = ref('weekly')
+    const route = useRoute()
+    const topProducts = ref([]);
+
+    // Add new reactive references
+    const filterOptions = ref({
+        category: null,
+        timeRange: 'weekly'
+    })
+
+    const sortOptions = ref({
+        field: 'sales',
+        order: 'desc'
+    })
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: chart
+    } = await useAsyncData('chart', () => {
+        return $directus.request($readItem('musicchart', route.params.id, {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: charts
+    } = await useAsyncData('charts', () => {
+        return $directus.request($readItems('musicchart', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: chartbar
+    } = await useAsyncData('chartbar', () => {
+        return $directus.request($readItem('navigation', '53'))
+    })
+
+    const categories = ref([]) // Will be populated from your products data
+
+    // Calculate helper functions
+    const calculateTrend = (current, previous) => {
+        if (current > previous) return 'up';
+        if (current < previous) return 'down';
+        return 'stable';
+    };
+
+    const calculateWeeksOnChart = (firstAppearance) => {
+        const now = new Date();
+        const start = new Date(firstAppearance);
+        return Math.floor((now - start) / (7 * 24 * 60 * 60 * 1000));
+    };
+
+    // Modify your existing fetchChartData function
+    const fetchChartData = async (timeframe) => {
+        try {
+            const now = new Date();
+            let startDate;
+
+            // Determine the start date based on the timeframe
+            if (timeframe === "weekly") {
+                startDate = new Date(now.setDate(now.getDate() - 7));
+            } else if (timeframe === "monthly") {
+                startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+            } else if (timeframe === "yearly") {
+                startDate = new Date(now.getFullYear(), 0, 1);
+            }
+
+            const {
+                data
+            } = await useAsyncData("productChart", () => {
+                return $directus.request(
+                    $readItems("products", {
+                        sort: ["-sales"],
+                        limit: 100,
+                        filter: {
+                            created_on: {
+                                _gte: startDate.toISOString(),
+                            },
+                        },
+                    })
+                );
+            });
+
+            // Process the data and calculate fields
+            const processedData = data.value.map((product) => ({
+                ...product,
+                trend: calculateTrend(product.currentSales, product.previousSales),
+                weeksOnChart: calculateWeeksOnChart(product.firstAppearance),
+            }));
+
+            // Update top products and categories
+            topProducts.value = processedData;
+            categories.value = [...new Set(processedData.map((p) => p.category))];
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+        }
+    };
+
+    // Watch for tab changes to update data
+    watch(tab, (newValue) => {
+        fetchChartData(newValue);
+    });
+
+    // Filter and sort products
+    const sortedAndFilteredProducts = computed(() => {
+        let filtered = [...topProducts.value];
+
+        if (filterOptions.value.category) {
+            filtered = filtered.filter(
+                (product) => product.category === filterOptions.value.category
+            );
+        }
+
+        return filtered.sort((a, b) => {
+            const aValue = a[sortOptions.value.field];
+            const bValue = b[sortOptions.value.field];
+
+            return sortOptions.value.order === 'asc' ?
+                aValue - bValue :
+                bValue - aValue;
+        });
+    });

package/app/components/categories/chart/add-chart.vue

@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <form @submit.prevent="createActivityAndRefresh">
+            <v-card>
+                <v-card-text>
+                    <v-text-field v-model="chartData.name" id="chartName" label="Chart Name*" required />
+                    <v-textarea v-model="chartData.description" label="What's happening?*" variant="outlined"
+                        required></v-textarea>
+                    <v-row>
+                        <v-col cols="6">
+                            <v-select v-model="chartData.type" label="What type of chart is this?"
+                                :items="['Notes', 'News']" />
+                        </v-col>
+                        <v-col cols="6">
+                            <v-select v-model="chartData.status" label="Is this chart public or private?"
+                                :items="['Public', 'Private']" />
+                        </v-col>
+                        <v-col cols="12">
+                            <v-file-input @change="handleImageUpload" clearable density="compact"
+                                prepend-icon="fas fa-image" accept="image/*" label="Image" variant="solo-inverted" />
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+                <v-divider class="mt-12"></v-divider>
+                <v-card-actions>
+                    <v-btn color="blue-darken-1" variant="text" @click="dialog = false">
+                        Close
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue-darken-1" variant="text" type="submit" @click="reset = false">
+                        Reset
+                    </v-btn>
+                    <v-btn color="blue-darken-1" variant="text" type="submit" @click="createNewChart">
+                        Create
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </form>
+    </div>
+</template>
+
+<script>
+    export default {
+        methods: {
+            reset() {
+                this.$refs.form.reset()
+            },
+        },
+    }
+</script>
+
+<script setup>
+    import {
+        ref
+    } from 'vue';
+    import {
+        useRoute    } from 'vue-router';
+    import uploadFiles from '#shared/app/composables/globals/uploadFiles';
+    import createChart from '@/composables/charts/createChart';
+
+    // Make sure your props are properly defined
+    // Update props to include spaces_id
+    const props = defineProps({
+        spaces_id: {
+            type: String,
+            required: true
+        }
+    });
+
+    const { user } = useSupabaseAuth()
+
+    const route = useRoute();
+
+
+    const chartData = ref({
+        name: '',
+        description: '',
+        type: '',
+        status: '',
+        image: '',
+        reactions: '',
+        color: '',
+        coverFile: null,
+        avatarFile: null,
+        creator: user?.email,
+    })
+
+    const dialog = ref(false);
+
+    const imageFile = ref(null);
+    const documentFile = ref(null);
+
+    // Emit event for parent component updates
+    const emit = defineEmits(['chart-created']);
+
+    const handleImageUpload = (event) => {
+        imageFile.value = event.target.files[0];
+    };
+
+
+    const createNewChart = async () => {
+    try {
+        // Upload files if any
+        const uploadedFiles = await uploadFiles({
+            imageFile: imageFile.value,
+            documentFile: documentFile.value,
+        });
+
+        // Update chart data with uploaded files
+        if (uploadedFiles) {
+            chartData.value.image = uploadedFiles.imageId;
+            chartData.value.media = uploadedFiles.documentId;
+        }
+
+        // Set spaces_id in chartData to link chart to the space
+        chartData.value.spaces_id = props.spaces_id;
+
+        // Create the chart with space relationship
+        const chart = await createChart(chartData.value);
+
+        console.log('Created Chart:', chart);
+
+        // Emit event to refresh parent component
+        emit('chart-created', chart);
+
+        // Close dialog and reset form
+        dialog.value = false;
+        reset();
+
+        // Optional: Redirect to the space page
+        router.push(`/departments/categories/chart/${props.spaces_id}`);
+    } catch (error) {
+        console.error('Error creating chart:', error);
+        // Add error handling here
+    }
+};
+
+    // Add watch to update spaces_id if props change
+    watch(() => props.spaces_id, (newSpaceId) => {
+        chartData.value.spaces_id = newSpaceId;
+    });
+</script>

package/app/components/categories/chart/chart.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="contentPage">
+        <v-toolbar :style="`background-color: ${chart?.color}`" :title="chart?.name"></v-toolbar>
+        <v-table class="charttable">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th class="text-left">
+                        This Week
+                    </th>
+                    <th class="text-left">Name</th>
+                    <th class="text-left">
+                        Award
+                    </th>
+                    <th class="text-left">
+                        Last Week
+                    </th>
+                    <th class="text-left">
+                        Peak Position
+                    </th>
+                    <th class="text-left">
+                        Weeks on Chart
+                    </th>
+                    <th class="text-left">
+                        Buy
+                    </th>
+                    <th class="text-left"><share /></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(products, index) in chart?.products?.products_id" :key="index">
+                    <td class="chartnumber">
+                        <h1>{{ chart?.thisWeek }}</h1>
+                    </td>
+                    <td>
+                        <v-avatar :image="products?.image?.filename_disk" rounded="0" size="130"></v-avatar>
+                    </td>
+                    <td>
+                        <v-list>
+                            <v-list-item>
+                                <v-list-item-title>{{ products?.name }}</v-list-item-title>
+                                <div v-for="product in products?.product_types?.product_types_id" :key="product">
+                                  <v-list-item-subtitle>{{ product?.name }}</v-list-item-subtitle>  
+                                </div>
+                            </v-list-item>
+                        </v-list>
+                    </td>
+                    <td>
+                        <v-avatar icon="fas fa-star" :style="`color: ${chart?.award}`"></v-avatar>
+                    </td>
+                    <td>
+                        <h5>{{ chart?.last_week }}</h5>
+                    </td>
+                    <td>
+                        <h5>{{ chart?.peak_position }}</h5>
+                    </td>
+                    <td>
+                        <h5>{{ chart?.weeks_on_chart }}</h5>
+                    </td>
+                    <td>
+                        <v-btn href="" icon="fas fa-shopping-cart"></v-btn>
+                    </td>
+                </tr>
+            </tbody>
+        </v-table>
+        <relatedchart />
+        <relatedproducts /><!---->
+        <recentlyviewed /><!---->
+    </div>
+</template>
+
+<script setup>
+    import share from '#social/app/components/blocks/share.vue'
+    import relatedchart from '../../related/relatedcharts.vue'
+    import relatedproducts from '#commerce/app/components/related/relatedproducts.vue'
+    import recentlyviewed from '#commerce/app/components/catalog/product/recentlyviewed.vue'
+
+
+useHead({
+    title: computed(() => chart?.value?.name || 'Chart Page')
+  });
+</script>

package/app/components/categories/chart/monthlyChart.vue

@@ -0,0 +1,46 @@
+<template>
+    <v-table fixed-header>
+        <thead>
+            <tr>
+                <th class="text-left">Position</th>
+                <th class="text-left">Product</th>
+                <th class="text-left">Sales</th>
+                <th class="text-left">Last Week</th>
+                <th class="text-left">Peak Position</th>
+                <th class="text-left">Weeks on Chart</th>
+                <th class="text-left">Trend</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(product, index) in data" :key="product.id">
+                <td>{{ index + 1 }}</td>
+                <td>
+                    <div class="d-flex align-center">
+                        <v-img :src="product.image" width="50" height="50" class="mr-3" />
+                        <div>
+                            <div class="font-weight-bold">{{ product.name }}</div>
+                            <div class="text-caption">{{ product.category }}</div>
+                        </div>
+                    </div>
+                </td>
+                <td>{{ product.sales }}</td>
+                <td>
+                    <v-chip :color="getPositionColor(product.lastWeek, index + 1)" size="small">
+                        {{ product.lastWeek }}
+                    </v-chip>
+                </td>
+                <td>{{ product.peakPosition }}</td>
+                <td>{{ product.weeksOnChart }}</td>
+                <td>
+                    <v-icon :color="getTrendColor(product.trend)">{{ getTrendIcon(product.trend) }}</v-icon>
+                </td>
+            </tr>
+        </tbody>
+    </v-table>
+</template>
+
+<script setup>
+    defineProps({
+        data: Array, // Accepts the chart data
+    });
+</script>

package/app/components/categories/chart/weeklyChart.vue

@@ -0,0 +1,46 @@
+<template>
+    <v-table fixed-header>
+        <thead>
+            <tr>
+                <th class="text-left">Position</th>
+                <th class="text-left">Product</th>
+                <th class="text-left">Sales</th>
+                <th class="text-left">Last Week</th>
+                <th class="text-left">Peak Position</th>
+                <th class="text-left">Weeks on Chart</th>
+                <th class="text-left">Trend</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(product, index) in data" :key="product.id">
+                <td>{{ index + 1 }}</td>
+                <td>
+                    <div class="d-flex align-center">
+                        <v-img :src="product.image" width="50" height="50" class="mr-3" />
+                        <div>
+                            <div class="font-weight-bold">{{ product.name }}</div>
+                            <div class="text-caption">{{ product.category }}</div>
+                        </div>
+                    </div>
+                </td>
+                <td>{{ product.sales }}</td>
+                <td>
+                    <v-chip :color="getPositionColor(product.lastWeek, index + 1)" size="small">
+                        {{ product.lastWeek }}
+                    </v-chip>
+                </td>
+                <td>{{ product.peakPosition }}</td>
+                <td>{{ product.weeksOnChart }}</td>
+                <td>
+                    <v-icon :color="getTrendColor(product.trend)">{{ getTrendIcon(product.trend) }}</v-icon>
+                </td>
+            </tr>
+        </tbody>
+    </v-table>
+</template>
+
+<script setup>
+    defineProps({
+        data: Array, // Accepts the chart data
+    });
+</script>

package/app/components/categories/chart/yearlyChart.vue

@@ -0,0 +1,46 @@
+<template>
+    <v-table fixed-header>
+        <thead>
+            <tr>
+                <th class="text-left">Position</th>
+                <th class="text-left">Product</th>
+                <th class="text-left">Sales</th>
+                <th class="text-left">Last Week</th>
+                <th class="text-left">Peak Position</th>
+                <th class="text-left">Weeks on Chart</th>
+                <th class="text-left">Trend</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(product, index) in data" :key="product.id">
+                <td>{{ index + 1 }}</td>
+                <td>
+                    <div class="d-flex align-center">
+                        <v-img :src="product.image" width="50" height="50" class="mr-3" />
+                        <div>
+                            <div class="font-weight-bold">{{ product.name }}</div>
+                            <div class="text-caption">{{ product.category }}</div>
+                        </div>
+                    </div>
+                </td>
+                <td>{{ product.sales }}</td>
+                <td>
+                    <v-chip :color="getPositionColor(product.lastWeek, index + 1)" size="small">
+                        {{ product.lastWeek }}
+                    </v-chip>
+                </td>
+                <td>{{ product.peakPosition }}</td>
+                <td>{{ product.weeksOnChart }}</td>
+                <td>
+                    <v-icon :color="getTrendColor(product.trend)">{{ getTrendIcon(product.trend) }}</v-icon>
+                </td>
+            </tr>
+        </tbody>
+    </v-table>
+</template>
+
+<script setup>
+    defineProps({
+        data: Array, // Accepts the chart data
+    });
+</script>

package/app/components/categories/charts.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+      <!---->
+      <v-card elevation="0">
+          <v-toolbar :title="chartbar?.name" color="#1F7087">
+              <v-dialog min-width="500">
+                  <template v-slot:activator="{ props: activatorProps }">
+                      <v-btn v-bind="activatorProps" prepend-icon="fas:fa fa-plus" title="Create a Chart"
+                          variant="flat">Create a Chart
+                      </v-btn>
+                  </template>
+
+                  <template v-slot:default="{ isActive }">
+                      <createchart />
+                  </template>
+              </v-dialog>
+          </v-toolbar>
+
+          <v-tabs v-model="tab" bg-color="#1F7087">
+              <div v-for="(menu, index) in chartbar?.menus" :key="index">
+                  <v-tab :value="menu?.value">{{ menu?.name }}</v-tab>
+              </div>
+          </v-tabs>
+
+          <v-card-text>
+              <v-tabs-window v-model="tab">
+                  <v-tabs-window-item value="one">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="4" v-for="(charts, index) in charts" :key="index">
+                              <chart :chart="charts" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+
+                  <v-tabs-window-item value="two">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="4" v-for="(charts, index) in videocharts" :key="index">
+                              <chart :chart="charts" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+
+                  <v-tabs-window-item value="three">
+                      <v-row style="padding-top: 15px;">
+                          <v-col cols="4" v-for="(charts, index) in mycharts" :key="index">
+                              <chart :chart="charts" />
+                          </v-col>
+                      </v-row>
+                  </v-tabs-window-item>
+              </v-tabs-window>
+          </v-card-text>
+      </v-card>
+  </div>
+</template>
+
+<script setup>
+  import chart from './chart/chart.vue'
+  import createchart from './chart/add-chart.vue'
+  import { ref } from 'vue'
+  import {
+      useUserStore
+  } from '../../../../auth/app/stores/user'
+  
+  const userStore = useUserStore()
+
+  const tab = ref(null);
+  const {
+      $directus,
+      $readItems,
+      $readItem
+  } = useNuxtApp()
+
+  const {
+      data: charts
+  } = await useAsyncData('charts', () => {
+      return $directus.request($readItems('musicchart', {
+          fields: ['*', { '*': ['*'] }]
+      }))
+  })
+
+  const {
+      data: videocharts
+  } = await useAsyncData('videocharts', () => {
+      return $directus.request($readItems('musicchart', {
+          filter: {
+              type: {
+                  _eq: "Video"
+              }
+          }
+      }))
+  })
+
+  const {
+      data: mycharts
+  } = await useAsyncData('mycharts', () => {
+      return $directus.request($readItems('musicchart', {
+          filter: {
+              creator: {
+                  _eq: `${userStore?.email?.value}`
+              }
+          }
+      }))
+  })
+
+  const {
+      data: chartbar
+  } = await useAsyncData('chartbar', () => {
+      return $directus.request($readItem('navigation', '33'))
+  })
+
+  definePageMeta({
+      middleware: ['authenticated'],
+  })
+
+  useHead({
+      title: 'Charts',
+  })
+</script>