@meeovi/layer-social 1.0.3

package/app/components/features/spaceSections/crud/add-space.vue

@@ -0,0 +1,52 @@
+<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>Create a Space
+        </v-btn>
+      </template>
+      <v-card class="b-1">
+        <v-card-title>
+          <h3>Create New Space</h3>
+        </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 spaceFields" :key="field.field" :field="field" v-model="form[field.field]" />
+            <v-btn type="submit">Create</v-btn>
+          </form>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </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('spaces', async () => {
+  return $directus.request($readFieldsByCollection('spaces'))
+})
+
+// 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: 'Space not found'
+  })
+}
+
+const spaceFields = data
+
+// use composable for form handling (validation, submit, provide context)
+const { form, formError, formSuccess, submitForm } = useDirectusForm('spaces', spaceFields, { clearOnSuccess: true, closeDialogRef: dialog })
+</script>

package/app/components/features/spaceSections/crud/update-space.vue

@@ -0,0 +1,224 @@
+<template>
+  <div>
+      <v-row justify="center">
+          <v-card>
+            <form @submit.prevent="handleSubmit">
+                  <v-toolbar dark color="primary">
+                      <v-card-title>
+                          <span class="text-h6">Update Space</span>
+                      </v-card-title>
+                  </v-toolbar>
+                  <v-card-text>
+                      <v-container>
+                          <v-row>
+                              <v-col cols="12">
+                                  <v-text-field v-model="spaceData.name" id="spaceName" label="Space Name*" required />
+                              </v-col>
+                              <v-col cols="6">
+                                  <v-select v-model="spaceData.type" label="What type of space is this?"
+                                      :items="['Default', 'Audio', 'Video']" />
+                              </v-col>
+                              <v-col cols="6">
+                                  <v-select v-model="spaceData.status" label="Is this space public or private?"
+                                      :items="['Public', 'Private', 'Hidden']" />
+                              </v-col>
+                              <v-col cols="12">
+                                  <v-textarea v-model="spaceData.description" label="Description" id="spaceDescription" />
+                              </v-col>
+                              <v-col cols="6">
+                                  <v-file-input @change="handleImageUpload" clearable density="compact"
+                                      prepend-icon="fas fa-image" accept="image/*" label="Image for Cover"
+                                      variant="solo-inverted" />
+                              </v-col>
+                              <v-col cols="6">
+                                  <v-file-input @change="handleAvatarUpload" clearable density="compact"
+                                      prepend-icon="fas fa-image" accept="image/*" label="Image for Avatar"
+                                      variant="solo-inverted" />
+                              </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="confirmDelete" :loading="deleteLoading">
+                          Delete
+                      </v-btn>
+                      <v-btn color="blue-darken-1" variant="text" @click="resetForm = false">
+                          Reset
+                      </v-btn>
+                      <v-btn color="blue-darken-1" variant="text" type="submit">
+                          Update Space
+                      </v-btn>
+                  </v-card-actions>
+              </form>
+          </v-card>
+      </v-row>
+
+      <!-- Delete Confirmation Dialog -->
+    <v-dialog v-model="deleteDialog" max-width="500px">
+            <v-card>
+                <v-card-title class="text-h5">Delete Space</v-card-title>
+                <v-card-text>
+                    Are you sure you want to delete this space? 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="deleteSpace" :loading="deleteLoading">
+                        Delete
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { readItem, deleteItem, updateItem } from '@meeovi/directus-client'; // Add this import at the top
+import uploadFiles from '#shared/app/composables/globals/uploadFiles';
+import updateSpace from '~/composables/spaces/updateSpace';
+
+const route = useRoute();
+const router = useRouter();
+
+// Add these new refs for delete functionality
+const deleteDialog = ref(false);
+const deleteLoading = ref(false);
+
+const spaceData = ref({
+    id: '', // Add this to store the space ID
+    name: '',
+    type: '',
+    status: '',
+    description: '',
+    image: null,
+});
+
+const dialog = ref(false);
+const includeFiles = ref(true);
+const imageFile = ref(null);
+const loading = ref(false);
+
+// Function to fetch existing space data
+const fetchSpaceData = async () => {
+    try {
+        const { $directus, $readItem } = useNuxtApp();
+        const spaceId = route.params.id; // Assuming you're passing the ID in the route
+        const response = await $directus.request(readItem('spaces', spaceId));
+        
+        // Populate the form with existing data
+        spaceData.value = {
+            id: response.id,
+            name: response.name,
+            type: response.type,
+            status: response.status,
+            description: response.description,
+            image: response.image
+        };
+    } catch (error) {
+        console.error('Error fetching space:', error);
+    }
+};
+
+// Load existing data when component mounts
+onMounted(() => {
+    if (route.params.id) {
+        fetchSpaceData();
+    }
+});
+
+const handleImageUpload = (event) => {
+    imageFile.value = event.target.files[0];
+};
+
+const resetForm = () => {
+    spaceData.value = {
+        name: '',
+        type: '',
+        status: '',
+        description: '',
+        image: null,
+    };
+    imageFile.value = null;
+};
+
+const handleSubmit = async () => {
+    try {
+        loading.value = true;
+        const { $directus } = useNuxtApp();
+
+        // Handle image upload if there's a new image
+        if (imageFile.value) {
+            const uploadedFiles = await uploadFiles({
+                imageFile: imageFile.value,
+            });
+            spaceData.value.image = uploadedFiles.imageId;
+        }
+
+        // Update the space using Directus SDK directly
+        const updatedSpace = await $directus.request(
+            updateItem('spaces', route.params.id, {
+                name: spaceData.value.name,
+                type: spaceData.value.type,
+                status: spaceData.value.status,
+                description: spaceData.value.description,
+                image: spaceData.value.image,
+            })
+        );
+
+        if (updatedSpace) {
+            // Verify the update was successful
+            await fetchSpaceData(); // Refresh the data
+            alert('Space updated successfully');
+            navigateTo('/social/spaces'); // Adjust this path as needed
+        }
+    } catch (error) {
+        console.error('Error updating space:', error);
+        alert('Error updating space: ' + error.message);
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+// Add these new functions for delete functionality
+const confirmDelete = () => {
+    deleteDialog.value = true;
+};
+
+const deleteSpace = async () => {
+    try {
+        deleteLoading.value = true;
+        const { $directus } = useNuxtApp();
+        
+        // Delete the space using the imported deleteItem function
+        await $directus.request(deleteItem('spaces', route.params.id));
+        
+        // Close the delete dialog
+        deleteDialog.value = false;
+        
+        // Show success message
+        alert('Space deleted successfully');
+        
+        // Redirect to spaces page
+        navigateTo('/social/spaces');
+    } catch (error) {
+        console.error('Error deleting space:', error);
+        alert('Error deleting space: ' + error.message);
+    } finally {
+        deleteLoading.value = false;
+    }
+};
+
+const validateForm = () => {
+    if (!spaceData.value.name) {
+        alert('Space name is required');
+        return false;
+    }
+    return true;
+};
+</script>

package/app/components/features/spaceSections/defaultSpaces.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <v-col cols="12">
+            <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-for="space in myDefaultSpaces" :key="space.id"
+                        v-slot="{ isSelected, toggle, selectedClass }">
+                        <spaceCard :space="space" :class="['ma-4', selectedClass]" v-if="isSelected" @click="toggle" />
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-sheet>
+        </v-col>
+
+        <v-row class="member-cards">
+            <v-col cols="3" v-for="space in defaultSpaces" :key="space.id" class="d-inline-block">
+                <spaceCard :space="space" />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import spaceCard from '~/components/related/space.vue'
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const userStore = useUserStore()
+    const userDisplayName = computed(() => {
+        return userStore.user?.name || userStore.user?.username || 'User'
+    })
+    
+    const model = ref(null)
+    
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: myDefaultSpaces
+    } = await useAsyncData('myDefaultSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                owner: {
+                    first_name: {
+                     _eq: userStore?.user?.firstName,   
+                    },
+                    last_name: {
+                        _eq: userStore?.user?.lastName,
+                    }
+                },
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'default'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: defaultSpaces
+    } = await useAsyncData('defaultSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'default'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>

package/app/components/features/spaceSections/imageSpaces.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <v-col cols="12">
+            <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-for="space in myImageSpaces" :key="space.id"
+                        v-slot="{ isSelected, toggle, selectedClass }">
+                        <spaceCard :space="space" :class="['ma-4', selectedClass]" v-if="isSelected" @click="toggle" />
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-sheet>
+        </v-col>
+
+        <v-row class="member-cards">
+            <v-col cols="3" v-for="space in imageSpaces" :key="space.id" class="d-inline-block">
+                <spaceCard :space="space" />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import spaceCard from '~/components/related/space.vue'
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const userStore = useUserStore()
+    const userDisplayName = computed(() => {
+        return userStore.user?.name || userStore.user?.username || 'User'
+    })
+        
+    const model = ref(null)
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: myImageSpaces
+    } = await useAsyncData('myImageSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                owner: {
+                    first_name: {
+                     _eq: userStore?.user?.firstName,   
+                    },
+                    last_name: {
+                        _eq: userStore?.user?.lastName,
+                    }
+                },
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'Images'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: imageSpaces
+    } = await useAsyncData('imageSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'Images'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>

package/app/components/features/spaceSections/textSpaces.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <v-col cols="12">
+            <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-for="space in myTextSpaces" :key="space.id"
+                        v-slot="{ isSelected, toggle, selectedClass }">
+                        <spaceCard :space="space" :class="['ma-4', selectedClass]" v-if="isSelected" @click="toggle" />
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-sheet>
+        </v-col>
+
+        <v-row class="member-cards">
+            <v-col cols="3" v-for="space in textSpaces" :key="space.id" class="d-inline-block">
+                <spaceCard :space="space" />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import spaceCard from '~/components/related/space.vue'
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const userStore = useUserStore()
+    const userDisplayName = computed(() => {
+        return userStore.user?.name || userStore.user?.username || 'User'
+    })
+        
+    const model = ref(null)
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: myTextSpaces
+    } = await useAsyncData('myTextSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                owner: {
+                    first_name: {
+                     _eq: userStore?.user?.firstName,   
+                    },
+                    last_name: {
+                        _eq: userStore?.user?.lastName,
+                    }
+                },
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'Forum'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: textSpaces
+    } = await useAsyncData('textSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'Forum'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>

package/app/components/features/spaceSections/videoSpaces.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <v-col cols="12">
+            <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-for="space in myVideoSpaces" :key="space.id"
+                        v-slot="{ isSelected, toggle, selectedClass }">
+                        <spaceCard :space="space" :class="['ma-4', selectedClass]" v-if="isSelected" @click="toggle" />
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-sheet>
+        </v-col>
+
+        <v-row class="member-cards">
+            <v-col cols="3" v-for="space in videoSpaces" :key="space.id" class="d-inline-block">
+                <spaceCard :space="space" />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import spaceCard from '~/components/related/space.vue'
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const userStore = useUserStore()
+    const userDisplayName = computed(() => {
+        return userStore.user?.name || userStore.user?.username || 'User'
+    })
+        
+    const model = ref(null)
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: myVideoSpaces
+    } = await useAsyncData('myVideoSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                owner: {
+                    first_name: {
+                     _eq: userStore?.user?.firstName,   
+                    },
+                    last_name: {
+                        _eq: userStore?.user?.lastName,
+                    }
+                },
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'Video'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: videoSpaces
+    } = await useAsyncData('videoSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'Video'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>