@meeovi/layer-lists 1.0.2

package/app/components/features/archived.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="features4 start cid-v0Her0Ajsb" id="features04-1">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 content-head">
+                        <div class="mbr-section-head mb-5">
+                            <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
+                                <strong>My Archived Lists</strong>
+                            </h4>
+
+                            <div class="row">
+                                <div class="item features-image col-12 col-md-6 col-lg-4" v-for="list in archived" :key="list.id">
+                                    <listCard :list="list" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import listCard from '~/components/related/list.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: archived
+    } = await useAsyncData('archived', () => {
+        return $directus.request($readItems('lists', {
+            filter: {
+                user: {
+                    _eq: userDisplayName.value,
+                },
+                status: {
+                    _eq: "Archived",
+                }
+            },
+        }))
+    })
+
+    useHead({
+        title: 'My Archived Lists - Meeovi Tasks'
+    })
+</script>

package/app/components/features/bookmarks.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="features4 start cid-v0Her0Ajsb" id="features04-1">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 content-head">
+                        <div class="mbr-section-head mb-5">
+                            <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
+                                <strong>My Bookmarks</strong>
+                            </h4>
+
+                            <div class="row">
+                                <div class="item features-image col-12 col-md-6 col-lg-4" v-for="bookmark in bookmarks" :key="bookmark.id">
+                                    <bookmarkCard :bookmark="bookmark" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import bookmarkCard from '~/components/related/bookmark.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: bookmarks
+    } = await useAsyncData('bookmarks', () => {
+        return $directus.request($readItems('lists', {
+            filter: {
+                creator: {
+                    _eq: userDisplayName.value,
+                },
+                type: {
+                    _eq: "bookmark",
+                }
+            },
+        }))
+    })
+
+    useHead({
+        title: 'My Bookmarks Lists - Meeovi Tasks'
+    })
+</script>

package/app/components/features/lists.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="features4 start cid-v0Her0Ajsb" id="features04-1">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 content-head">
+                        <div class="mbr-section-head mb-5">
+                            <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
+                                <strong>My Lists</strong>
+                            </h4>
+
+                            <div class="row">
+                                <div class="item features-image col-12 col-md-6 col-lg-4" v-for="list in myLists" :key="list.id">
+                                    <listCard :list="list" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import listCard from '~/components/related/list.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: myLists
+    } = await useAsyncData('myLists', () => {
+        return $directus.request($readItems('lists', {
+            filter: {
+                user: {
+                    _eq: userDisplayName.value,
+                }
+            },
+        }))
+    })
+
+    useHead({
+        title: 'My Lists - Meeovi Tasks'
+    })
+</script>

package/app/components/features/starred.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="features4 start cid-v0Her0Ajsb" id="features04-1">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 content-head">
+                        <div class="mbr-section-head mb-5">
+                            <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
+                                <strong>My Starred Lists</strong>
+                            </h4>
+
+                            <div class="row">
+                                <div class="item features-image col-12 col-md-6 col-lg-4" v-for="list in starred" :key="list.id">
+                                    <listCard :list="list" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import listCard from '~/components/related/list.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: starred
+    } = await useAsyncData('starred', () => {
+        return $directus.request($readItems('lists', {
+            filter: {
+                user: {
+                    _eq: userDisplayName.value,
+                },
+                favorite: {
+                    _eq: "yes",
+                }
+            },
+        }))
+    })
+
+    useHead({
+        title: 'My Starred Lists - Meeovi Tasks'
+    })
+</script>

package/app/components/lists/ListItemCard.vue

@@ -0,0 +1,190 @@
+<template>
+  <v-card class="list-item-card" :class="`item-type-${item.content.type}`">
+    <!-- Media Item -->
+    <div v-if="item.content.type === 'media'">
+      <v-img
+        :src="item.content.thumbnail || '/default-media.png'"
+        height="200"
+        cover
+      >
+        <div class="d-flex align-end fill-height">
+          <v-chip color="primary" size="small" class="ma-2">
+            {{ item.content.media_type }}
+          </v-chip>
+        </div>
+      </v-img>
+      
+      <v-card-title class="text-truncate">{{ item.content.title }}</v-card-title>
+      <v-card-subtitle v-if="item.content.metadata?.artist">
+        {{ item.content.metadata.artist }}
+      </v-card-subtitle>
+    </div>
+
+    <!-- Bookmark Item -->
+    <div v-else-if="item.content.type === 'bookmark'">
+      <v-card-title class="d-flex align-center">
+        <v-img
+          :src="item.content.favicon || '/default-favicon.png'"
+          width="16"
+          height="16"
+          class="me-2"
+        />
+        <span class="text-truncate">{{ item.content.title }}</span>
+      </v-card-title>
+      
+      <v-card-text>
+        <p class="text-body-2 text-truncate">{{ item.content.description }}</p>
+        <div class="d-flex align-center mt-2">
+          <v-chip
+            v-for="tag in item.content.tags?.slice(0, 2)"
+            :key="tag"
+            size="x-small"
+            class="me-1"
+          >
+            {{ tag }}
+          </v-chip>
+          <v-chip
+            v-if="item.content.read"
+            color="success"
+            size="x-small"
+            variant="outlined"
+          >
+            Read
+          </v-chip>
+        </div>
+      </v-card-text>
+    </div>
+
+    <!-- Product/Wishlist Item -->
+    <div v-else-if="item.content.type === 'product'">
+      <v-img
+        :src="item.content.image || '/default-product.png'"
+        height="200"
+        cover
+      >
+        <div class="d-flex align-end fill-height">
+          <v-chip
+            :color="getPriorityColor(item.content.priority)"
+            size="small"
+            class="ma-2"
+          >
+            {{ item.content.priority }}
+          </v-chip>
+        </div>
+      </v-img>
+      
+      <v-card-title class="text-truncate">{{ item.content.title }}</v-card-title>
+      <v-card-subtitle v-if="item.content.price">
+        ${{ item.content.price }}
+      </v-card-subtitle>
+    </div>
+
+    <!-- Default Item -->
+    <div v-else>
+      <v-img
+        v-if="item.content.image"
+        :src="item.content.image"
+        height="200"
+        cover
+      />
+      
+      <v-card-title class="text-truncate">{{ item.content.title }}</v-card-title>
+      <v-card-text v-if="item.content.description">
+        <p class="text-body-2">{{ item.content.description }}</p>
+      </v-card-text>
+    </div>
+
+    <!-- Actions -->
+    <v-card-actions>
+      <v-btn
+        v-if="item.content.url"
+        :href="item.content.url"
+        target="_blank"
+        variant="text"
+        size="small"
+        prepend-icon="mdi-open-in-new"
+      >
+        Open
+      </v-btn>
+      
+      <v-spacer />
+      
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn
+            icon="mdi-dots-vertical"
+            variant="text"
+            size="small"
+            v-bind="props"
+          />
+        </template>
+        
+        <v-list>
+          <v-list-item @click="$emit('edit', item)">
+            <template v-slot:prepend>
+              <v-icon icon="mdi-pencil" />
+            </template>
+            <v-list-item-title>Edit</v-list-item-title>
+          </v-list-item>
+          
+          <v-divider />
+          
+          <v-list-item @click="$emit('delete', item.id)" class="text-error">
+            <template v-slot:prepend>
+              <v-icon icon="mdi-delete" color="error" />
+            </template>
+            <v-list-item-title>Delete</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  listType: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['edit', 'delete'])
+
+const getPriorityColor = (priority) => {
+  const colors = {
+    low: 'blue',
+    medium: 'orange',
+    high: 'red'
+  }
+  return colors[priority] || 'grey'
+}
+</script>
+
+<style scoped>
+.list-item-card {
+  height: 100%;
+  transition: all 0.2s ease;
+}
+
+.list-item-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.item-type-media {
+  border-left: 4px solid rgb(var(--v-theme-purple));
+}
+
+.item-type-bookmark {
+  border-left: 4px solid rgb(var(--v-theme-orange));
+}
+
+.item-type-product {
+  border-left: 4px solid rgb(var(--v-theme-pink));
+}
+</style>

package/app/components/lists/add-bookmark.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 Bookmark
+        </v-btn>
+      </template>
+      <v-card class="b-1">
+        <v-card-title>
+          <h3>Create New Bookmark</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 websiteFields" :key="field.field" :field="field" v-model="form[field.field]" />
+            <v-btn type="submit">Submit</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 '../../composables/globals/useDirectusForm'
+
+const dialog = ref(false)
+const { $directus, $readFieldsByCollection } = useNuxtApp()
+
+const { data, error } = await useAsyncData('websites', async () => {
+  return $directus.request($readFieldsByCollection('websites'))
+})
+
+// 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: 'Bookmark not found'
+  })
+}
+
+const websiteFields = data
+
+// use composable for form handling (validation, submit, provide context)
+const { form, formError, formSuccess, submitForm } = useDirectusForm('websites', websiteFields, { clearOnSuccess: true, closeDialogRef: dialog })
+</script>

package/app/components/lists/add-list-item.vue

@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <div v-if="list?.items?.length === 0" class="text-center py-8">
+            <v-icon size="64" color="grey-lighten-1">{{ getListIcon(list?.type) }}</v-icon>
+            <h3 class="text-h6 mt-4 mb-2">No items yet</h3>
+            <p class="text-body-2 text-medium-emphasis mb-4">
+                Add your first item to get started
+            </p>
+            <v-btn color="primary" @click="showAddDialog = true">
+                Add Item
+            </v-btn>
+        </div>
+
+        <div v-else>
+            <!-- Task Items -->
+            <div v-if="list?.type === 'tasks'">
+                <TaskItem v-for="item in list?.items" :key="item?.id" :task="item?.content"
+                    @update="updateTask(item?.id, $event)" @edit="editItem(item)" @duplicate="duplicateItem(item)"
+                    @delete="deleteItem(item?.id)" />
+            </div>
+
+            <!-- Other List Types -->
+            <v-row v-else>
+                <v-col v-for="item in list?.items" :key="item?.id" cols="12" sm="6" md="4" lg="3">
+                    <ListItemCard :item="item" :list-type="list?.type" @edit="editItem(item)"
+                        @delete="deleteItem(item?.id)" />
+                </v-col>
+            </v-row>
+        </div>
+    </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+    computed
+  } from 'vue'
+  //import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
+  import {
+    useDirectusForm
+  } from '../../composables/globals/useDirectusForm'
+  import ListItemCard from './ListItemCard.vue'
+
+  const props = defineProps({
+    modelValue: Boolean,
+    listType: String,
+    listId: String
+  })
+
+  const dialog = ref(false)
+  const {
+    $directus,
+    $readFieldsByCollection
+  } = useNuxtApp()
+
+  const {
+    data,
+    error
+  } = await useAsyncData('listItemsFields', async () => {
+    return $directus.request($readFieldsByCollection('list_items'))
+  })
+
+  // normalize response: Directus may return { data: [...] } or an array directly
+  const listItemFields = computed(() => {
+    const resp = data?.value
+    return resp?.data ?? resp ?? []
+  })
+
+  // guard against undefined/null and empty arrays
+  if (error.value || listItemFields.value == null || listItemFields.value.length === 0) {
+    console.error(error)
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'List not found'
+    })
+  }
+
+  // use composable for form handling (validation, submit, provide context)
+  const {
+    form,
+    formError,
+    formSuccess,
+    submitForm
+  } = useDirectusForm('list_items', listItemFields, {
+    clearOnSuccess: true,
+    closeDialogRef: dialog
+  })
+</script>

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

@@ -0,0 +1,57 @@
+<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 List
+        </v-btn>
+      </template>
+      <v-card class="b-1">
+        <v-card-title>
+          <h3>Create New List</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 listFields" :key="field.field" :field="field" v-model="form[field.field]" />
+            <v-btn type="submit">Submit</v-btn>
+          </form>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
+import { useDirectusForm } from '../../composables/globals/useDirectusForm'
+
+const dialog = ref(false)
+const { $directus, $readFieldsByCollection } = useNuxtApp()
+
+const { data, error } = await useAsyncData('listsFields', async () => {
+  return $directus.request($readFieldsByCollection('lists'))
+})
+
+// normalize response: Directus may return { data: [...] } or an array directly
+const listFields = computed(() => {
+  const resp = data?.value
+  return resp?.data ?? resp ?? []
+})
+
+// guard against undefined/null and empty arrays
+if (error.value || listFields.value == null || listFields.value.length === 0) {
+  console.error(error)
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'List not found'
+  })
+}
+
+
+// use composable for form handling (validation, submit, provide context)
+const { form, formError, formSuccess, submitForm } = useDirectusForm('lists', listFields, { clearOnSuccess: true, closeDialogRef: dialog })
+</script>

package/app/components/lists/lists.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>Lists (stub)</div>
+</template>
+
+<script setup lang="ts">
+</script>