@meeovi/layer-lists 1.0.2

package/app/pages/lists/index.vue

@@ -0,0 +1,152 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="header1 cid-v0HengyO4j" id="header01-0">
+            <div class="container-fluid">
+                <div class="row justify-content-left auto-text">
+                    <div v-if="page?.image?.filename_disk" class="col-12 col-md-12 col-lg-8 image-wrapper">
+                        <img class="w-100" :src="`${$directus.url}assets/${page?.image?.filename_disk}`"
+                            :alt="page?.name">
+                    </div>
+                    <div v-else class="col-12 col-md-12 col-lg-8 image-wrapper">
+                        <img class="w-100" src="../../assets/images/background1.jpg" :alt="page?.name">
+                    </div>
+                    <div class="col-12 col-lg col-md-12">
+                        <div class="text-wrapper align-left rightTextColumn">
+                            <h1
+                                class="mbr-section-title text-black align-center mbr-fonts-style mb-4 display-2 auto-text">
+                                <strong>{{ page?.name }}</strong>
+                            </h1>
+                            <p class="mbr-text mbr-fonts-style mb-4 display-7 text-black align-center auto-text"
+                                v-dompurify-html="page?.content"></p>
+                            <createList
+                                class="mbr-section-btn mt-3 mobi-mbri mobi-mbri-plus mbr-iconfont mbr-iconfont-btn" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <v-sheet class="mx-auto sliderLists row align-items-stretch items-row justify-content-center">
+            <v-toolbar color="transparent">
+                <v-toolbar-title>{{ page?.repeaterTextBox?.[0]?.name }}</v-toolbar-title>
+            </v-toolbar>
+            <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="(list, index) in myLists"
+                    :key="index">
+                    <listCard :class="['ma-4', selectedClass]" :list="list" v-if="isSelected" @click="toggle" />
+                </v-slide-group-item>
+            </v-slide-group>
+        </v-sheet>
+
+        <RelatedLists />
+
+        <v-sheet class="mx-auto sliderLists row align-items-stretch items-row justify-content-center">
+            <v-toolbar color="transparent">
+                <v-toolbar-title>{{ page?.repeaterTextBox?.[2]?.name }}</v-toolbar-title>
+            </v-toolbar>
+            <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="(bookmarks, index) in myBookmarks" :key="index">
+                    <listCard :class="['ma-4', selectedClass]" :list="bookmarks" v-if="isSelected" @click="toggle" />
+                </v-slide-group-item>
+            </v-slide-group>
+        </v-sheet>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import listCard from '~/components/related/list.vue'
+    import RelatedLists from '~/components/related/relatedlists.vue'
+    import createList from '~/components/lists/add-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: lists
+    } = await useAsyncData('lists', () => {
+        return $directus.request($readItems('lists', {
+            filter: {
+                status: {
+                    _eq: 'Public'
+                }
+            },
+        }))
+    })
+
+    const {
+        data: myLists
+    } = await useAsyncData('myLists', () => {
+        return $directus.request($readItems('lists', {
+            filter: {
+                user: {
+                    user_id: {
+                        first_name: {
+                            _eq: `${userDisplayName.firstName.value}`
+                        },
+                        last_name: {
+                            _eq: `${userDisplayName.lastName.value}`
+                        }
+                    },
+                },
+            },
+        }))
+    })
+
+    const {
+        data: myBookmarks
+    } = await useAsyncData('myBookmarks', () => {
+        return $directus.request($readItems('lists', {
+            filter: {
+                user: {
+                    user_id: {
+                        first_name: {
+                            _eq: `${userDisplayName.firstName.value}`
+                        },
+                        last_name: {
+                            _eq: `${userDisplayName.lastName.value}`
+                        }
+                    },
+                    lists_type: {
+                        lists_type_id: {
+                            _eq: 'Bookmarks'
+                        }
+                    }
+                },
+            },
+        }))
+    })
+
+    const {
+        data: page
+    } = await useAsyncData('page', () => {
+        return $directus.request($readItems('pages', {
+            filter: {
+                id: {
+                    _eq: 40
+                }
+            },
+            fields: ['*'],
+            limit: 1
+        })).then(response => response?.[0]) // Get first item from response
+    })
+
+    useHead({
+        title: 'Meeovi Tasks'
+    })
+</script>

package/app/pages/lists/list/[...slug].vue

@@ -0,0 +1,233 @@
+<template>
+  <v-container fluid>
+    <div v-if="pending" class="text-center py-8">
+      <v-progress-circular indeterminate color="primary" />
+    </div>
+
+    <div v-else-if="error" class="text-center py-8">
+      <v-alert type="error">Failed to load list</v-alert>
+    </div>
+
+    <div v-else-if="list">
+      <!-- List Header -->
+      <v-toolbar :color="getListColor(list.type)" extended>
+        <v-toolbar-title>{{ list.name }}</v-toolbar-title>
+
+        <template v-slot:extension>
+          <p v-dompurify-html="list?.description"></p>
+        </template>
+
+        <v-chip>{{ list?.type }}</v-chip>
+        <v-chip :color="list?.status === 'public' ? 'success' : 'default'" class="ml-3" variant="outlined">
+          {{ list?.status }}
+        </v-chip>
+
+        <v-btn color="primary" prepend-icon="fas fa-plus" @click="showAddDialog = true">
+          Add Item
+        </v-btn>
+
+        <!-- List Items -->
+        <addList />
+      </v-toolbar>
+    </div>
+
+    <!-- Add Item Dialog -->
+    <listItem v-model="showAddDialog" :list-type="list?.type" :list-id="list?.id" @added="refreshList" />
+
+    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
+      data-sortbtn="btn-primary">
+      <div class="container-fluid">
+        <h2 class="mbr-section-title text-center mbr-fonts-style display-5 auto-text">
+          Items in this {{ list?.type }}</h2>
+        <div class="underline align-center pb-3">
+          <div class="line"></div>
+        </div>
+
+        <v-sheet class="mx-auto">
+          <v-slide-group v-model="model" class="pa-4" show-arrows v-if="list?.products?.length">
+            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
+              v-for="(products, index) in list?.products" :key="index">
+              <productCard :product="products?.products_id" :class="['ma-4', selectedClass]" @click="toggle" />
+
+              <div class="d-flex fill-height align-center justify-center">
+                <v-scale-transition>
+                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-slide-group-item>
+          </v-slide-group>
+
+          <v-slide-group v-model="model" class="pa-4" show-arrows v-else-if="list?.spaces?.length">
+            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }" v-for="(spaces, index) in list?.spaces"
+              :key="index">
+              <spaceCard :space="spaces" :class="['ma-4', selectedClass]" @click="toggle" />
+
+              <div class="d-flex fill-height align-center justify-center">
+                <v-scale-transition>
+                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-slide-group-item>
+          </v-slide-group>
+
+          <v-slide-group v-model="model" class="pa-4" show-arrows v-else-if="list?.shorts?.length">
+            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }" v-for="(shorts, index) in list?.shorts"
+              :key="index">
+              <shortCard :short="shorts?.shorts_id" :class="['ma-4', selectedClass]" @click="toggle" />
+
+              <div class="d-flex fill-height align-center justify-center">
+                <v-scale-transition>
+                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-slide-group-item>
+          </v-slide-group>
+
+          <div v-else class="text-center py-8">
+            <p>No items in this {{ list?.type }}</p>
+          </div>
+        </v-sheet>
+      </div>
+    </section>
+
+    
+  </v-container>
+</template>
+
+<script setup>
+  import {
+    ref,
+    computed
+  } from 'vue'
+  import {
+    useRoute
+  } from 'vue-router'
+  import {
+    useLists
+  } from '@/composables/lists/useLists'
+  import listItem from '@/components/lists/add-list-item.vue'
+  import addList from '@/components/lists/add-list.vue'
+  import productCard from '#commerce/app/components/catalog/product/productCard.vue'
+  import spaceCard from '#social/app/components/related/space.vue'
+  import shortCard from '#social/app/components/related/short.vue'
+
+  const route = useRoute()
+  const {
+    updateListItem,
+    removeFromList
+  } = useLists()
+
+  const showAddDialog = ref(false)
+
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  const slug = computed(() => {
+    const s = route.params.slug
+    return Array.isArray(s) ? s[0] : s
+  })
+
+  const {
+    data: listRaw,
+    pending,
+    error,
+    refresh: refreshList
+  } = await useAsyncData('list', () => {
+    return $directus.request(
+      $readItems('lists', {
+        fields: [
+          '*',
+          'category.categories_id.*',
+          'department.departments_id',
+          'spaces.spaces_id.*',
+          'products.products_id.*',
+          'products.products_id.image.*',
+          'vibez.shorts_id.*',
+          'list_template.templates.*',
+          'image.*',
+          'media.*',
+          'list_items.list_items_id.*',
+          'list_products.list_products_id.*',
+          'user.directus_users.*'
+        ],
+        filter: {
+          slug: {
+            _eq: slug.value
+          }
+        },
+        limit: 1
+      })
+    )
+  })
+
+  const list = computed(() => listRaw.value?.[0] || null)
+
+  const mediaItems = computed(() => {
+    if (list.value?.type !== 'playlist') return []
+    return list.value.items?.filter(item =>
+      item.content.type === 'media' && ['audio', 'video'].includes(item.content.media_type)
+    ).map(item => item.content) || []
+  })
+
+  const getListIcon = (type) => {
+    const icons = {
+      default: 'mdi-format-list-bulleted',
+      playlist: 'mdi-playlist-music',
+      wishlist: 'mdi-heart',
+      bookmarks: 'mdi-bookmark',
+      tasks: 'mdi-check-circle'
+    }
+    return icons[type] || icons.default
+  }
+
+  const getListColor = (type) => {
+    const colors = {
+      default: 'primary',
+      playlist: 'purple',
+      wishlist: 'pink',
+      bookmarks: 'orange',
+      tasks: 'green'
+    }
+    return colors[type] || colors.default
+  }
+
+  const updateTask = async (itemId, taskData) => {
+    try {
+      await updateListItem(itemId, {
+        content: taskData
+      })
+      await refreshList()
+    } catch (error) {
+      console.error('Failed to update task:', error)
+    }
+  }
+
+  const editItem = (item) => {
+    // Handle edit functionality
+    console.log('Edit item:', item)
+  }
+
+  const duplicateItem = (item) => {
+    // Handle duplicate functionality
+    console.log('Duplicate item:', item)
+  }
+
+  const deleteItem = async (itemId) => {
+    try {
+      await removeFromList(itemId)
+      await refreshList()
+    } catch (error) {
+      console.error('Failed to delete item:', error)
+    }
+  }
+
+  useHead({
+    title: computed(() => list.value?.name || 'List')
+  })
+
+  definePageMeta({
+    //middleware: ['authenticated']
+  })
+</script>

package/nuxt.config.ts

@@ -0,0 +1,11 @@
+import {
+  defineNuxtConfig
+} from 'nuxt/config'
+
+export default defineNuxtConfig({
+  $meta: {
+    name: 'lists',
+  },
+
+  runtimeConfig: {}
+})

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@meeovi/layer-lists",
+  "version": "1.0.2",
+  "description": "Official Lists module for the M Framework.",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "lists",
+    "alternate-framework",
+    "nuxt",
+    "layer"
+  ],
+  "author": "Meeovi",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@meeovi/api": "^1.0.1",
+    "@meeovi/layer-social": "^1.0.2",
+    "list.js": "^2.3.1",
+    "nanoid": "^5.1.6"
+  },
+  "devDependencies": {
+    "nuxt": "^4.3.0"
+  }
+}