@meeovi/layer-lists 1.0.2

package/app/components/lists/listsettings.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+      <v-card elevation="0">
+          <v-toolbar title="Update A List"></v-toolbar>
+          <v-form @submit.prevent="createList">
+              <v-container>
+                  <v-row>
+                      <v-col cols="6">
+                          <v-text-field v-model="title" label="List Name" required></v-text-field>
+                      </v-col>
+                      <v-col cols="6">
+                          <v-combobox v-model="type" label="Type" :items="['List', 'Registry', 'Playlist', 'Todo']"></v-combobox>
+                      </v-col>
+                      <v-col cols="12">
+                          <v-file-input clearable label="List Image"></v-file-input>
+                      </v-col>
+                      <v-col cols="12">
+                          <v-textarea v-model="description" label="List Description"></v-textarea>
+                      </v-col>
+                      <v-col cols="12">
+                          <v-card title="Choose a Product for your List">
+                              <v-card-text>
+                                  <v-text-field density="compact" variant="solo" label="Search Meeovi for products"
+                                      append-inner-icon="fas:fa fa-search" single-line hide-details
+                                      @click:append-inner="onClick"></v-text-field>
+                                  <v-spacer></v-spacer>
+                                  <div class="d-flex pa-4">
+                                      <v-checkbox-btn v-model="includeFiles" class="pe-2" color="orange">
+                                      </v-checkbox-btn>
+                                      <!--<NuxtLink :to="`/product/${products.id}`">
+                                      <v-card class="ma-4" height="580" width="250" @click="toggle">
+                                          <NuxtImg loading="lazy" class="align-end text-white" height="280"
+                                              :src="`${products.featuredAsset.preview}`" :alt="products.name" cover />
+
+                                          <v-card-title class="pt-4">
+                                              {{ products.name }}
+                                          </v-card-title>
+
+                                          <v-card-text>
+                                              <div>Sku: {{ products.variants.sku }}</div>
+                                          </v-card-text>
+
+                                          <v-card-actions>
+                                              <v-card-title>$ {{ products.variants.price }}
+                                              </v-card-title>
+                                          </v-card-actions>
+                                          <div class="d-flex fill-height align-center justify-center">
+                                              <v-scale-transition>
+                                                  <v-icon v-if="isSelected" color="white" size="48"
+                                                      icon="mdi-close-circle-outline"></v-icon>
+                                              </v-scale-transition>
+                                          </div>
+                                      </v-card>
+                                  </NuxtLink>-->
+                                  </div>
+                              </v-card-text>
+                          </v-card>
+                      </v-col>
+                  </v-row>
+              </v-container>
+
+              <v-divider class="mt-12"></v-divider>
+              <v-card-actions>
+                  <v-btn color="blue-darken-1" variant="text" type="submit" @click="reset = false">
+                      Delete
+                  </v-btn>
+                  <v-spacer></v-spacer>
+                  <v-btn color="blue-darken-1" variant="text" type="submit">
+                      Update
+                  </v-btn>
+              </v-card-actions>
+          </v-form>
+      </v-card>
+  </div>
+</template>
+
+<script setup>
+  import {
+      ref
+  } from 'vue'
+  
+
+  const config = useRuntimeConfig();
+  const dialog = ref(false);
+  const includeFiles = ref(true);
+  const enabled = ref(false);
+  const title = ref('');
+  const acf = ref('');
+  const ispublic = ref('');
+  const description = ref('');
+  const type = ref('');
+  const products = ref('');
+  const owner = ref('');
+  const image = ref('');
+  const errorMessage = ref('');
+  const successMessage = ref('');
+
+  const updatelist = async () => {
+      try {
+          const response = await $fetch(`${config.apiUrl}/wp-json/wp/v2/list`, {
+              method: 'PUT',
+              headers: {
+                  'Content-Type': 'application/json',
+                  'Authorization': `Bearer ${config.wordpressToken}`
+              },
+              body: JSON.stringify({
+                  title: title.value,
+                  ispublic: ispublic.value,
+                  description: description.value,
+                  image: image.value,
+                  type: type.value,
+                  products: products.value,
+                  owner: owner.value,
+                  status: 'publish',
+              })
+          })
+
+          console.log(response);
+
+          if (response.id) {
+              successMessage.value = 'List updated successfully!'
+              errorMessage.value = ''
+          } else {
+              throw new Error('Failed to update list')
+          }
+      } catch (error) {
+          console.error('Error updating list:', error);
+          if (error.response) {
+              console.error('Error response:', error.response);
+              if (error.response.status === 403) {
+                  errorMessage.value = 'You do not have permission to update a list.'
+              } else {
+                  errorMessage.value = `Error: ${error.response.status} ${error.response.statusText}`
+              }
+          } else {
+              errorMessage.value = error.message
+          }
+          successMessage.value = ''
+      }
+  }
+
+  useHead({
+      title: 'Update List',
+  })
+</script>

package/app/components/lists/update-bookmark.vue

@@ -0,0 +1,267 @@
+<template>
+    <div>
+        <v-row justify="center">
+            <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition" @show="fetchBookmarkData">
+                <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props">
+                        <v-icon start icon="fas:fa fa-plus"></v-icon>Update Address
+                    </v-btn>
+                </template>
+                <v-card>
+                    <form @submit.prevent="handleSubmit">
+                        <v-card>
+                            <v-card-text>
+                                <v-row>
+                                    <v-col cols="6"><v-text-field v-model="bookmarkData.name" id="bookmarkName"
+                                            label="Bookmark Name*" required /></v-col>
+                                    <v-col cols="6"><v-text-field v-model="bookmarkData.url" id="bookmarkUrl"
+                                            label="Bookmark Url*" required /></v-col>
+                                    <v-col cols="6">
+                                        <v-select v-model="bookmarkData.type" label="What type of bookmark is this?"
+                                            :items="['Website', 'Password']" />
+                                    </v-col>
+                                    <v-col cols="6">
+                                        <v-select v-model="bookmarkData.status"
+                                            label="Is this bookmark public or private?"
+                                            :items="['Public', 'Private']" />
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <v-file-input @change="handleImageUpload" clearable density="compact"
+                                            prepend-icon="fas:fa fa-image" accept="image/*" label="Image"
+                                            variant="solo-inverted" />
+                                    </v-col>
+                                    <v-col cols="12"><v-textarea v-model="bookmarkData.note" label="Note"
+                                            variant="outlined"></v-textarea></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 Bookmark
+                                </v-btn>
+                                <v-btn color="blue-darken-1" variant="text" type="submit">
+                                    Update Bookmark
+                                </v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </form>
+
+                    <!-- Delete Confirmation Dialog -->
+                    <v-dialog v-model="deleteDialog" max-width="500px">
+                        <v-card>
+                            <v-card-title class="text-h5">Delete Bookmark</v-card-title>
+                            <v-card-text>
+                                Are you sure you want to delete this bookmark? 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="deleteBookmark" :loading="deleteLoading">
+                                    Delete
+                                </v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </v-dialog>
+                </v-card>
+            </v-dialog>
+        </v-row>
+    </div>
+</template>
+
+<script>
+    export default {
+        methods: {
+            reset() {
+                this.$refs.form.reset()
+            },
+        },
+    }
+</script>
+
+<script setup>
+    import {
+        ref
+    } from 'vue';
+    import {
+        useRoute,
+        useRouter
+    } from 'vue-router';
+    import uploadFiles from '~/app/composables/content/uploadFiles';
+    import updateBookmark from '~/app/composables/bookmarks/updateBookmark';
+    import {
+        updateItem,
+        deleteItem
+    } from '@meeovi/directus-client';
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const userStore = useUserStore()
+
+    const userDisplayName = computed(() => {
+        return userStore.user?.name || userStore.user?.username || 'User'
+    })
+
+    const route = useRoute();
+
+    const id = route.params.id;
+
+    // Add these new refs for delete functionality
+    const deleteDialog = ref(false);
+    const deleteLoading = ref(false);
+
+    const bookmarkData = ref({
+        name: '',
+        url: '',
+        type: '',
+        status: '',
+        note: '',
+        image: null,
+        username: userDisplayName,
+    })
+
+    const dialog = ref(false);
+    const location = ref('bottom');
+
+    const imageFile = ref(null);
+    const loading = ref(false);
+
+    // Function to fetch existing bookmark data
+    const fetchBookmarkData = async () => {
+        try {
+            const {
+                $directus,
+                $readItem
+            } = useNuxtApp();
+            const bookmarkId = route.params.id;
+
+            if (!bookmarkId) return;
+
+            const response = await $directus.request($readItem('websites', bookmarkId));
+
+            if (response) {
+                bookmarkData.value = {
+                    id: response.id,
+                    name: response.name || '',
+                    type: response.type || '',
+                    status: response.status || '',
+                    note: response.note || '',
+                    image: response.image || '',
+                    url: response.url || '',
+                    username: response.username || userDisplayName
+                };
+            }
+        } catch (error) {
+            console.error('Error fetching bookmark:', error);
+        }
+    };
+
+    // Load existing data when component mounts
+    onMounted(() => {
+        if (route.params.id) {
+            fetchBookmarkData();
+        }
+    });
+    // Emit event for parent component updates
+    const emit = defineEmits(['bookmark-updated']);
+
+    const handleImageUpload = (event) => {
+        imageFile.value = event.target.files[0];
+    };
+
+    const handleSubmit = async () => {
+        try {
+            loading.value = true;
+
+            const {
+                $directus
+            } = useNuxtApp();
+
+            // Prepare update data
+            const updateData = {
+                id: bookmarkData.value.id,
+                name: bookmarkData.value.name,
+                type: bookmarkData.value.type,
+                status: bookmarkData.value.status,
+                note: bookmarkData.value.note,
+                image: bookmarkData.value.image,
+                url: bookmarkData.value.url,
+            };
+
+            // 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 bookmark using Directus updateItem
+            const updatedBookmark = await $directus.request(
+                updateItem('websites', route.params.id, updateData)
+            );
+
+            if (updatedBookmark) {
+                // Refresh the bookmark data
+                await fetchBookmarkData();
+
+                // Show success message
+                alert('Bookmark updated successfully');
+            } else {
+                throw new Error('Failed to update bookmark');
+            }
+
+        } catch (error) {
+            console.error('Error updating bookmark:', error);
+            alert('Error updating bookmark: ' + error.message);
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    // Remove the onMounted hook since we'll use the dialog @show event instead
+    // Instead, watch for dialog changes
+    watch(dialog, (newValue) => {
+    if (newValue && route.params.id) {
+        fetchBookmarkData();
+    }
+    });
+
+    // Add these new functions for delete functionality
+    const confirmDelete = () => {
+        deleteDialog.value = true;
+    };
+
+    const deleteBookmark = async () => {
+        try {
+            deleteLoading.value = true;
+            const {
+                $directus
+            } = useNuxtApp();
+
+            // Delete the bookmark using the imported deleteItem function
+            await $directus.request(deleteItem('websites', route.params.id));
+
+            // Close the delete dialog
+            deleteDialog.value = false;
+
+            // Show success message
+            alert('Bookmark deleted successfully');
+
+            // Redirect to bookmarks page
+            navigateTo('/commerce/lists');
+        } catch (error) {
+            console.error('Error deleting bookmark:', error);
+            alert('Error deleting bookmark: ' + error.message);
+        } finally {
+            deleteLoading.value = false;
+        }
+    };
+</script>

package/app/components/lists/update-list.vue

@@ -0,0 +1,192 @@
+<template>
+    <div>
+        <v-row justify="center">
+            <v-card>
+                <form @submit.prevent="handleSubmit">
+                    <v-toolbar dark color="primary">
+                        <v-btn icon dark @click="dialog = false">
+                            <v-icon icon="fas:fa fa-circle-xmark"></v-icon>
+                        </v-btn>
+                        <v-card-title>
+                            <span class="text-h6">Create a new Space</span>
+                        </v-card-title>
+                    </v-toolbar>
+                    <v-card-text>
+                        <v-container>
+                            <v-row>
+                                <v-col cols="12">
+                                    <v-text-field v-model="listData.name" label="List Name" required></v-text-field>
+                                </v-col>
+                                <v-col cols="6">
+                                    <v-select v-model="listData.type" label="Type"
+                                        :items="['List', 'Registry', 'Playlist', 'Todo']"></v-select>
+                                </v-col>
+                                <v-col cols="6">
+                                    <v-select v-model="listData.status" label="Status"
+                                        :items="['Public', 'Private']"></v-select>
+                                </v-col>
+                                <v-col cols="12">
+                                    <v-file-input @change="handleImageUpload" clearable
+                                        density="compact" prepend-icon="fas:fa fa-image" accept="image/*"
+                                        label="Image for List" variant="solo-inverted" />
+                                </v-col>
+                                <v-col cols="12">
+                                    <v-textarea v-model="listData.description" label="List Description"></v-textarea>
+                                </v-col>
+                                <v-col cols="12">
+                                    <v-card title="Choose a Product for your List">
+                                        <v-card-text>
+                                            <v-text-field density="compact" variant="solo"
+                                                label="Search Meeovi for products" append-inner-icon="fas:fa fa-search"
+                                                single-line hide-details></v-text-field>
+                                            <div class="d-flex pa-4">
+                                                <v-checkbox-btn v-model="includeFiles" class="pe-2" color="orange">
+                                                </v-checkbox-btn>
+                                                <!--<NuxtLink :to="`/product/${products.id}`">
+                                        <v-card class="ma-4" height="580" width="250" @click="toggle">
+                                            <NuxtImg loading="lazy" class="align-end text-white" height="280"
+                                                :src="`${products.featuredAsset.preview}`" :alt="products.name" cover />
+
+                                            <v-card-title class="pt-4">
+                                                {{ products.name }}
+                                            </v-card-title>
+
+                                            <v-card-text>
+                                                <div>Sku: {{ products.variants.sku }}</div>
+                                            </v-card-text>
+
+                                            <v-card-actions>
+                                                <v-card-title>$ {{ products.variants.price }}
+                                                </v-card-title>
+                                            </v-card-actions>
+                                            <div class="d-flex fill-height align-center justify-center">
+                                                <v-scale-transition>
+                                                    <v-icon v-if="isSelected" color="white" size="48"
+                                                        icon="mdi-close-circle-outline"></v-icon>
+                                                </v-scale-transition>
+                                            </div>
+                                        </v-card>
+                                    </NuxtLink>-->
+                                            </div>
+                                        </v-card-text>
+                                    </v-card>
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                        <small>*indicates required field</small>
+                    </v-card-text>
+                    <v-divider class="mt-12"></v-divider>
+                    <v-card-actions>
+                        <v-btn color="blue-darken-1" variant="text" type="submit" @click="resetForm = false">
+                            Reset
+                        </v-btn>
+                        <v-btn color="blue-darken-1" variant="text" type="submit">
+                            Update
+                        </v-btn>
+                    </v-card-actions>
+                </form>
+            </v-card>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import uploadFiles from '~//composables/uploadFiles';
+import updateList from '~/app/composables/lists/updateList';
+
+const route = useRoute();
+const router = useRouter();
+
+const listData = ref({
+    id: '', // Add this to store the list 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 list data
+const fetchListData = 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('lists', listId));
+        
+        // Populate the form with existing data
+        listData.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 list:', error);
+    }
+};
+
+// Load existing data when component mounts
+onMounted(() => {
+    if (route.params.id) {
+        fetchListData();
+    }
+});
+
+const handleImageUpload = (event) => {
+    imageFile.value = event.target.files[0];
+};
+
+const resetForm = () => {
+    listData.value = {
+        name: '',
+        type: '',
+        status: '',
+        description: '',
+        image: null,
+    };
+    imageFile.value = null;
+};
+
+const handleSubmit = async () => {
+    try {
+        loading.value = true;
+
+        // Handle image upload if there's a new image
+        if (imageFile.value) {
+            const uploadedFiles = await uploadFiles({
+                imageFile: imageFile.value,
+            });
+            listData.value.image = uploadedFiles.imageId;
+        }
+
+        // Update the list
+        const updatedList = await updateList(route.params.id, {
+            name: listData.value.name,
+            type: listData.value.type,
+            status: listData.value.status,
+            description: listData.value.description,
+            image: listData.value.image,
+        });
+
+        console.log('List updated successfully:', updatedList);
+        
+        // Show success message (you can implement your preferred notification system)
+        alert('List updated successfully');
+
+    } catch (error) {
+        console.error('Error updating list:', error);
+        alert('Error updating list: ' + error.message);
+    } finally {
+        loading.value = false;
+    }
+};
+</script>