@meeovi/layer-departments 1.0.0

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

@@ -0,0 +1,278 @@
+<template>
+    <div>
+        <v-dialog max-width="500">
+            <template v-slot:activator="{ props: activatorProps }">
+                <v-btn color="primary" v-bind="activatorProps" icon="fas fa-gear" size="medium"
+                    title="Open Settings"></v-btn>
+            </template>
+
+            <template v-slot:default="{ isActive }">
+                <v-card title="Dialog">
+                    <v-card-text>
+                        <form @submit.prevent="handleSubmit">
+                            <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-col cols="12">
+                                            <v-file-input @change="handleMediaUpload" chips multiple clearable
+                                                density="compact" prepend-icon="fas fa-video" accept="video/*"
+                                                label="Live Video" variant="solo-inverted">
+                                            </v-file-input>
+                                        </v-col>
+                                        <v-col cols="12">
+                                            <v-file-input @change="handleAudioUpload" chips multiple clearable
+                                                density="compact" prepend-icon="fas fa-microphone" accept="audio/*"
+                                                label="Audio" variant="solo-inverted">
+                                            </v-file-input>
+                                        </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="isActive.value = false">
+                                        Close
+                                    </v-btn>
+                                    <v-spacer></v-spacer>
+                                    <v-btn color="blue-darken-1" variant="text" type="submit" @click="confirmDelete"
+                                        :loading="deleteLoading">
+                                        Delete Chart
+                                    </v-btn>
+                                    <v-btn color="blue-darken-1" variant="text" type="submit">
+                                        Update Chart
+                                    </v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </form>
+                    </v-card-text>
+                </v-card>
+            </template>
+        </v-dialog>
+
+        <!-- Delete Confirmation Dialog -->
+        <v-dialog v-model="deleteDialog" max-width="500px">
+            <v-card>
+                <v-card-title class="text-h5">Delete Chart</v-card-title>
+                <v-card-text>
+                    Are you sure you want to delete this chart? This action cannot be undone.
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue-darken-1" variant="text" @click="deleteDialog = false">
+                        Cancel
+                    </v-btn>
+                    <v-btn color="error" variant="text" @click="deleteChart" :loading="deleteLoading">
+                        Delete
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue';
+        import uploadFiles from '../../../composables/globals/uploadFiles'
+    import updateChart from '~/composables/charts/updateChart';
+    import { updateItem, deleteItem } from '@meeovi/directus-client';
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+    import {
+        useRouter
+    } from 'vue-router'
+
+    // Make sure your props are properly defined
+    // Update props to include space_id
+    const props = defineProps({
+        space_id: {
+            type: String,
+            required: true
+        }
+    });
+
+    // Add these new refs for delete functionality
+    const deleteDialog = ref(false);
+    const deleteLoading = ref(false);
+
+    const { user } = useSupabaseAuth()
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const chartData = ref({
+        id: '', // Add this to store the chart ID
+        name: '',
+        type: '',
+        status: '',
+        description: '',
+        color: '',
+        image: null,
+        media: null,
+        audio: null,
+        username: user?.email,
+        space_id: props.space_id, // Initialize with the space_id from props
+    });
+
+    const dialog = ref(false);
+    const includeFiles = ref(true);
+    const imageFile = ref(null);
+    const audioFile = ref(null);
+    const loading = ref(false);
+
+    // Function to fetch existing chart data
+    const fetchChartData = async () => {
+        try {
+            const {
+                $directus,
+                $readItem,
+            } = useNuxtApp();
+            const listId = route.params.id; // Assuming you're passing the ID in the route
+            const response = await $directus.request($readItem('musicchart', listId));
+
+            // Populate the form with existing data
+            chartData.value = {
+                id: response.id,
+                name: response.name,
+                type: response.type,
+                status: response.status,
+                description: response.description,
+                color: response.color,
+                image: response.image,
+                audio: response.audio,
+                username: response.username
+            };
+        } catch (error) {
+            console.error('Error fetching chart:', error);
+        }
+    };
+
+    // Load existing data when component mounts
+    onMounted(() => {
+        if (route.params.id) {
+            fetchChartData();
+        }
+    });
+
+    const handleImageUpload = (event) => {
+        imageFile.value = event.target.files[0];
+    };
+
+    const handleMediaUpload = (event) => {
+        imageFile.value = event.target.files[0];
+    };
+
+    const handleAudioUpload = (event) => {
+        audioFile.value = event.target.files[0];
+    };
+
+    const resetForm = () => {
+        chartData.value = {
+            id: '', // Add this to store the chart ID
+            name: '',
+            type: '',
+            status: '',
+            description: '',
+            color: '',
+            image: null,
+            media: null,
+            audio: null,
+        };
+        imageFile.value = null;
+    };
+
+    const handleSubmit = async () => {
+    try {
+        loading.value = true;
+
+        const { $directus } = useNuxtApp();
+        
+        // Prepare update data
+        const updateData = {
+            name: chartData.value.name,
+            type: chartData.value.type,
+            status: chartData.value.status,
+            description: chartData.value.description,
+            color: chartData.value.color
+        };
+
+        // Handle image upload if there's a new image
+        if (imageFile.value) {
+            const uploadedFiles = await uploadFiles({
+                imageFile: imageFile.value,
+            });
+            updateData.image = uploadedFiles.imageId;
+        }
+
+        // Update the chart using Directus updateItem
+        const updatedChart = await $directus.request(
+            updateItem('charts', route.params.id, updateData)
+        );
+
+        if (updatedChart) {
+            // Refresh the chart data
+            await fetchChartData();
+            
+            // Show success message
+            alert('Chart updated successfully');
+        } else {
+            throw new Error('Failed to update chart');
+        }
+
+    } catch (error) {
+        console.error('Error updating chart:', error);
+        alert('Error updating chart: ' + error.message);
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+    // Add these new functions for delete functionality
+    const confirmDelete = () => {
+        deleteDialog.value = true;
+    };
+
+    const deleteChart = async () => {
+        try {
+            deleteLoading.value = true;
+            const {
+                $directus
+            } = useNuxtApp();
+
+            // Delete the chart using the imported deleteItem function
+            await $directus.request(deleteItem('musicchart', route.params.id));
+
+            // Close the delete dialog
+            deleteDialog.value = false;
+
+            // Show success message
+            alert('Chart deleted successfully');
+
+            // Redirect to charts page
+            navigateTo('/social/newsfeed');
+        } catch (error) {
+            console.error('Error deleting chart:', error);
+            alert('Error deleting chart: ' + error.message);
+        } finally {
+            deleteLoading.value = false;
+        }
+    };
+</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>

package/app/components/categories/deals.vue

@@ -0,0 +1,101 @@
+<template>
+    <div>
+        <v-card elevation="0" style="min-height: 100vh !important;">
+            <v-layout>
+                <v-main>
+                    <v-tabs center-active v-model="tab" bg-color="transparent">
+                        <div v-for="(menu, index) in dealbar?.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="dealbar?.menus[0]?.value">
+                                <v-row>
+                                    <v-col cols="3" v-for="products in dealsProducts" :key="products">
+                                        <productCard :product="products" />
+                                    </v-col>
+                                </v-row>
+                            </v-tabs-window-item>
+
+                            <v-tabs-window-item :value="dealbar?.menus[1]?.value">
+                                <v-row>
+                                    <v-col cols="3" v-for="products in dollar" :key="products">
+                                        <productCard :product="products" />
+                                    </v-col>
+                                </v-row>
+                            </v-tabs-window-item>
+                        </v-tabs-window>
+                    </v-card-text>
+                </v-main>
+            </v-layout>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import productCard from '#commerce/app/components/catalog/product/productCard.vue'
+
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: dealbar
+    } = await useAsyncData('dealbar', () => {
+        return $directus.request($readItem('navigation', '49', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: dealsProducts
+    } = await useAsyncData('dealsProducts', () => {
+        return $directus.request($readItems('products', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                price: {
+                    _lte: 20
+                }
+            }
+        }))
+    })
+
+    const {
+        data: dollar
+    } = await useAsyncData('dollar', () => {
+        return $directus.request($readItems('products', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                price: {
+                    _lte: 1
+                }
+            }
+        }))
+    })    
+
+    const tab = ref(null)
+    const props = defineProps({
+        category: {
+            type: Number,
+            required: true,
+        },
+    });
+
+    useHead({
+        title: 'Deals',
+    })
+</script>

package/app/components/categories/eats.vue

@@ -0,0 +1,49 @@
+<template :style="`background: ${categoryEats?.color}`">
+    <div>
+        <v-toolbar :title="`Meeovi ${categoryEats?.name}`" :color="categoryEats?.color" :style="`color: ${categoryEats?.colortext}; font: bold;`"></v-toolbar>
+        <v-row class="eatsPage">
+            <v-col cols="12" v-for="(eats, index) in eats" :key="index">
+                <shorts :short="eats" />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import shorts from '#social/app/components/features/vibeSections/shorts.vue'
+    //import share from '~/components/partials/globals/share.vue'
+
+    const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: eats
+    } = await useAsyncData('eats', () => {
+        return $directus.request($readItems('shorts', {
+            filter: {
+                type: {
+                    _eq: 'Eats'
+                },
+                status: {
+                    _eq: 'Published'
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: categoryEats
+    } = await useAsyncData('categoryEats', () => {
+        return $directus.request($readItem('categories', '152', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>