@meeovi/layer-social 1.0.3

package/app/components/features/events.vue

@@ -0,0 +1,107 @@
+<template>
+    <div>
+		<section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+			<div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+			<div class="align-center container">
+				<div class="row justify-content-center">
+					<div class="col-12 col-lg-8">
+						<h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+							<strong> {{ eventsPage?.name }}</strong>
+						</h3>
+						<p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="eventsPage?.content"></p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+        <v-card variant="text" class="lowerBar">
+            <v-toolbar :style="`background-color: ${eventsBar?.color}; color: ${eventsBar?.colortext} !important`">
+                <v-toolbar-title>{{ eventsBar?.name }}</v-toolbar-title>
+
+                <v-tabs v-model="tab" align-tabs="center">
+                    <div v-for="(menu, index) in eventsBar?.menus" :key="index">
+                        <v-tab :value="menu?.value">
+                            <v-btn variant="text"
+                                :style="`color: ${eventsBar?.colortext} !important`">{{ menu?.name }}</v-btn>
+                        </v-tab>
+                    </div>
+                </v-tabs>
+            </v-toolbar>
+        </v-card>
+
+        <v-tabs-window v-model="tab">
+            <v-tabs-window-item :value="eventsBar?.menus?.[0]?.value">
+                <v-sheet class="pa-5">
+                    <h2 class="text-center">All Events</h2>
+                    <v-row class="member-cards">
+                        <v-col cols="3" v-for="event in events" :key="event.id" class="d-inline-block">
+                            <eventCard :event="event" />
+                        </v-col>
+                    </v-row>
+                </v-sheet>
+            </v-tabs-window-item>
+
+            <v-tabs-window-item :value="eventsBar?.menus?.[1]?.value">
+                <v-sheet class="pa-5">
+                    <yourEvents />
+                </v-sheet>
+            </v-tabs-window-item>
+        </v-tabs-window>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import eventCard from '#commerce/app/components/catalog/productCard.vue'
+    import yourEvents from '../event/yourEvents.vue'
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+    const tab = ref(null);
+
+    const {
+        data: eventsBar
+    } = await useAsyncData('eventsBar', () => {
+        return $directus.request($readItem('navigation', '80', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: eventsPage
+    } = await useAsyncData('eventsPage', () => {
+        return $directus.request($readItem('pages', '86', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: events
+    } = await useAsyncData('events', () => {
+        return $directus.request($readItems('products', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                product_types: {
+                    product_types_id: {
+                        _eq: 'Events'
+                    }
+                }
+            }
+        }))
+    })
+
+    useHead({
+        title: 'Meeovi Events',
+    })
+</script>

package/app/components/features/feed/add-post.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-row justify="center">
+      <v-card>
+        <v-card-title>
+          <h4>Create New Note</h4>
+        </v-card-title>
+
+        <v-card-text>
+          <div v-if="formError" class="error">{{ formError }}</div>
+          <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
+          <form @submit.prevent="submitForm">
+            <DirectusFormElement v-for="field in postFields" :key="field.field" :field="field" v-model="form[field.field]" />
+            <v-btn type="submit">Post</v-btn>
+          </form>
+        </v-card-text>
+      </v-card>
+  </v-row>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
+import { useDirectusForm } from '#shared/app/composables/globals/useDirectusForm'
+
+const dialog = ref(false)
+const { $directus, $readFieldsByCollection } = useNuxtApp()
+
+const { data, error } = await useAsyncData('posts', async () => {
+  return $directus.request($readFieldsByCollection('posts'))
+})
+
+// guard against undefined/null data.value and empty arrays
+if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
+  console.error(error)
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Note not found'
+  })
+}
+
+const postFields = data
+
+// use composable for form handling (validation, submit, provide context)
+const { form, formError, formSuccess, submitForm } = useDirectusForm('posts', postFields, { clearOnSuccess: true, closeDialogRef: dialog })
+</script>

package/app/components/features/feed/posts.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <v-card class="features03 healthm5 cid-us2b5LfABW" id="features03-a5" data-sortbtn="btn-primary" width="500px" elevation="0">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-12">
+            <NuxtLink :to="post?.id ? `/social/feed/${post.id}` : '#'">
+              <div class="items-wrapper" style="width: 1820px;">
+                <div class="item features-without-image">
+                  <div class="item-wrapper">
+                    <NuxtImg loading="lazy" :src="`${$directus.url}assets/${post?.image?.filename_disk}`" :alt="post?.title || 'No Title'" />
+                    <div class="card-box">
+                      <p class="item-text mbr-fonts-style display-7">{{ post?.title }}</p>
+                      <p class="item-text mbr-fonts-style display-7">{{ post?.content }}</p>
+                      <div class="people-wrapper">
+                        <div class="people-wrap">
+                          <div class="image-wrap">
+                            <NuxtImg loading="lazy" class="person" src="" :alt="post?.username || 'Anonymous'" />
+                          </div>
+                          <div class="rating-content">
+                            <p class="mbr-rating mbr-fonts-style display-4">
+                              Posted:
+                              {{ post?.date_created ? new Date(post?.date_created).toLocaleDateString() : 'Unknown date' }}
+                            </p>
+                            <p class="item-name mbr-fonts-style display-4">
+                              {{ post?.username || 'Unknown User' }}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import createListBtn from '~/components/partials/globals/createListBtn.vue'
+
+const model = ref(null)
+const props = defineProps({
+  post: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { post } = props;
+</script>

package/app/components/features/feed/relatedposts.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+      <h4>Related Posts</h4>
+      <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="(posts, index) in posts" :key="index">
+          <post :post="posts" />
+        </v-slide-group-item>
+      </v-slide-group>
+    </v-sheet>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref
+  } from 'vue'
+  import post from '~/components/feeds/posts.vue'
+  import {
+    useQuery
+  } from '@vue/apollo-composable'
+    //import {posts} from '~/graphql/cms/queries/posts'  
+
+    const tab = ref(null);
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: posts
+    } = await useAsyncData('posts', () => {
+        return $directus.request($readItems('posts', {
+            fields: ['*', { '*': ['*'] }]
+        }))
+    })
+</script>

package/app/components/features/feed/update-post.vue

@@ -0,0 +1,279 @@
+<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="postData.title" id="postName" label="Post Name*" required />
+                                    <v-textarea v-model="postData.content" label="What's happening?*" variant="outlined"
+                                        required></v-textarea>
+                                    <v-row>
+                                        <v-col cols="6">
+                                            <v-select v-model="postData.type" label="What type of post is this?"
+                                                :items="['Notes', 'News']" />
+                                        </v-col>
+                                        <v-col cols="6">
+                                            <v-select v-model="postData.status" label="Is this post 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 Post
+                                    </v-btn>
+                                    <v-btn color="blue-darken-1" variant="text" type="submit">
+                                        Update Post
+                                    </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 Post</v-card-title>
+                <v-card-text>
+                    Are you sure you want to delete this post? 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="deletePost" :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 updatePost from '~/composables/posts/updatePost';
+    import { updateItem, deleteItem } from '@meeovi/directus-client';
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+    import {
+        useRouter
+    } from 'vue-router'
+
+    const userStore = useUserStore()
+    // 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 userDisplayName = computed(() => {
+        return userStore.user?.name || userStore.user?.username || 'User'
+    })
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const postData = ref({
+        id: '', // Add this to store the post ID
+        title: '',
+        type: '',
+        status: '',
+        content: '',
+        image: null,
+        media: null,
+        audio: null,
+        username: userDisplayName,
+        user_avatar: userStore.user?.photoUrl,
+        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 post data
+    const fetchPostData = 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('posts', listId));
+
+            // Populate the form with existing data
+            postData.value = {
+                id: response.id,
+                title: response.title,
+                type: response.type,
+                status: response.status,
+                content: response.content,
+                image: response.image,
+                audio: response.audio,
+                username: response.username,
+                user_avatar: response.user_avatar,
+            };
+        } catch (error) {
+            console.error('Error fetching post:', error);
+        }
+    };
+
+    // Load existing data when component mounts
+    onMounted(() => {
+        if (route.params.id) {
+            fetchPostData();
+        }
+    });
+
+    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 = () => {
+        postData.value = {
+            id: '', // Add this to store the post ID
+            title: '',
+            type: '',
+            status: '',
+            content: '',
+            image: null,
+            media: null,
+            audio: null,
+        };
+        imageFile.value = null;
+    };
+
+    const handleSubmit = async () => {
+    try {
+        loading.value = true;
+
+        const { $directus } = useNuxtApp();
+        
+        // Prepare update data
+        const updateData = {
+            title: postData.value.title,
+            type: postData.value.type,
+            status: postData.value.status,
+            content: postData.value.content,
+        };
+
+        // 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 post using Directus updateItem
+        const updatedPost = await $directus.request(
+            updateItem('posts', route.params.id, updateData)
+        );
+
+        if (updatedPost) {
+            // Refresh the post data
+            await fetchPostData();
+            
+            // Show success message
+            alert('Post updated successfully');
+        } else {
+            throw new Error('Failed to update post');
+        }
+
+    } catch (error) {
+        console.error('Error updating post:', error);
+        alert('Error updating post: ' + error.message);
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+    // Add these new functions for delete functionality
+    const confirmDelete = () => {
+        deleteDialog.value = true;
+    };
+
+    const deletePost = async () => {
+        try {
+            deleteLoading.value = true;
+            const {
+                $directus
+            } = useNuxtApp();
+
+            // Delete the post using the imported deleteItem function
+            await $directus.request(deleteItem('posts', route.params.id));
+
+            // Close the delete dialog
+            deleteDialog.value = false;
+
+            // Show success message
+            alert('Post deleted successfully');
+
+            // Redirect to posts page
+            navigateTo('/social/newsfeed');
+        } catch (error) {
+            console.error('Error deleting post:', error);
+            alert('Error deleting post: ' + error.message);
+        } finally {
+            deleteLoading.value = false;
+        }
+    };
+</script>

package/app/components/features/feeds.vue

@@ -0,0 +1,148 @@
+<template>
+    <div>
+		<section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+			<div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+			<div class="align-center container">
+				<div class="row justify-content-center">
+					<div class="col-12 col-lg-8">
+						<h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+							<strong> {{ feedsPage?.name }}</strong>
+						</h3>
+						<p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="feedsPage?.content"></p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+        <v-card variant="text">
+            <v-toolbar :style="`background-color: ${feedBar?.color}; color: ${feedBar?.colortext} !important`">
+                <v-toolbar-title>{{ feedBar?.name }}</v-toolbar-title>
+
+
+                <v-tabs v-model="tab" align-tabs="center">
+                    <div v-for="(menu, index) in feedBar?.menus" :key="index">
+                        <v-tab :value="menu?.value">
+                            <v-btn variant="text"
+                                :style="`color: ${feedBar?.colortext} !important`">{{ menu?.name }}</v-btn>
+                        </v-tab>
+                    </div>
+                </v-tabs>
+            </v-toolbar>
+        </v-card>
+
+        <v-tabs-window v-model="tab">
+            <v-tabs-window-item :value="feedBar?.menus?.[0]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="posts?.length">
+                        <v-col class="wrap col-sm-12 col-lg-6 feedPost" v-for="post in posts" :key="post.id">
+                            <postCard :post="post" />
+                        </v-col>
+                    </template>
+                    <div class="center-text" v-else>No Activity yet</div>
+                </v-row>
+            </v-tabs-window-item>
+            <v-tabs-window-item :value="feedBar?.menus?.[1]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="posts?.length">
+                        <v-col class="wrap col-sm-12 col-lg-6 feedPost" v-for="post in posts" :key="post.id">
+                            <postCard :post="post" />
+                        </v-col>
+                    </template>
+                    <div class="center-text" v-else>Not following anyone yet</div>
+                </v-row>
+            </v-tabs-window-item>
+            <v-tabs-window-item :value="feedBar?.menus?.[2]?.value">
+                <v-row class="media-container-row">
+                    <v-col class="wrap col-sm-12 col-lg-6 feedPost" v-if="circles?.length" v-for="circlesPost in circles" :key="circlesPost.id">
+                        <postCard :post="circlesPost?.posts_id" />
+                    </v-col>
+
+                    <div class="center-text" v-else>No Circles yet</div>
+                </v-row>
+            </v-tabs-window-item>
+            <v-tabs-window-item :value="feedBar?.menus?.[3]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="posts?.length">
+                        <v-col class="wrap col-sm-12 col-lg-6 feedPost" v-for="post in posts" :key="post.id">
+                            <postCard :post="post" />
+                        </v-col>
+                    </template>
+                    <div class="center-text" v-else>No Activity yet</div>
+                </v-row>
+            </v-tabs-window-item>
+        </v-tabs-window>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed
+    } from 'vue'
+    import postCard from '~/components/related/post.vue'
+
+    const user = useSupabaseUser()
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+    const tab = ref(null);
+
+    const {
+        data: feedBar
+    } = await useAsyncData('feedBar', async () => {
+        const resp = await $directus.request($readItem('navigation', '32', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+        return resp?.data ?? resp ?? null
+    })
+
+    const {
+        data: feedsPage
+    } = await useAsyncData('feedsPage', () => {
+        return $directus.request($readItem('pages', '34', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: posts
+    } = await useAsyncData('posts', async () => {
+        const resp = await $directus.request($readItems('posts', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: circles
+    } = await useAsyncData('circles', async () => {
+        const resp = await $directus.request($readItems('circles', {
+            fields: [
+                '*', 
+                'posts.posts_id.*',
+                'products.products_id.*',
+                'users.*'
+                
+            ],
+            filter: {
+                creator: {
+                    _eq: user?.id,
+                }
+            }
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    useHead({
+        title: 'Activity Feed',
+    })
+</script>