@meeovi/layer-lists 1.0.2

package/app/components/related/relatedlists.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <v-sheet class="mx-auto sliderLists row align-items-stretch items-row justify-content-center">
+      <v-toolbar color="transparent">
+        <v-toolbar-title>Public Lists</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 lists" :key="index">
+          <listCard :class="['ma-4', selectedClass]" :list="list" 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'
+
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  const model = ref(null)
+
+  const {
+    data: lists
+  } = await useAsyncData('lists', () => {
+    return $directus.request($readItems('lists', {
+      fields: ['*', {
+        '*': ['*']
+      }],
+      filter: {
+        status: {
+          _eq: 'Public'
+        }
+      },
+    }))
+  })
+</script>

package/app/components/tasks/TaskItem.vue

@@ -0,0 +1,204 @@
+<template>
+  <v-card 
+    :class="{ 'task-completed': task.completed }"
+    class="task-item mb-2"
+    variant="outlined"
+  >
+    <v-card-text class="py-2">
+      <div class="d-flex align-center">
+        <v-checkbox
+          :model-value="task.completed"
+          @update:model-value="toggleComplete"
+          hide-details
+          class="me-3"
+        />
+        
+        <div class="grow">
+          <div 
+            :class="{ 'text-decoration-line-through text-medium-emphasis': task.completed }"
+            class="task-title"
+          >
+            {{ task.title }}
+          </div>
+          
+          <div v-if="task.description" class="text-body-2 text-medium-emphasis mt-1">
+            {{ task.description }}
+          </div>
+          
+          <div class="d-flex align-center mt-2 flex-wrap ga-2">
+            <v-chip
+              v-if="task.priority !== 'medium'"
+              :color="getPriorityColor(task.priority)"
+              size="x-small"
+              variant="tonal"
+            >
+              {{ task.priority }}
+            </v-chip>
+            
+            <v-chip
+              v-if="task.due_date"
+              :color="getDueDateColor(task.due_date)"
+              size="x-small"
+              variant="outlined"
+              prepend-icon="mdi-calendar"
+            >
+              {{ formatDueDate(task.due_date) }}
+            </v-chip>
+            
+            <v-chip
+              v-for="label in task.labels"
+              :key="label"
+              size="x-small"
+              variant="outlined"
+            >
+              {{ label }}
+            </v-chip>
+          </div>
+          
+          <!-- Subtasks -->
+          <div v-if="task.subtasks?.length" class="mt-3">
+            <div class="text-caption text-medium-emphasis mb-1">
+              Subtasks ({{ completedSubtasks }}/{{ task.subtasks.length }})
+            </div>
+            <div class="subtasks">
+              <div
+                v-for="subtask in task.subtasks"
+                :key="subtask.id"
+                class="d-flex align-center py-1"
+              >
+                <v-checkbox
+                  :model-value="subtask.completed"
+                  @update:model-value="toggleSubtask(subtask.id)"
+                  hide-details
+                  density="compact"
+                  class="me-2"
+                />
+                <span 
+                  :class="{ 'text-decoration-line-through text-medium-emphasis': subtask.completed }"
+                  class="text-body-2"
+                >
+                  {{ subtask.title }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="task-actions">
+          <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', task)">
+                <template v-slot:prepend>
+                  <v-icon icon="mdi-pencil" />
+                </template>
+                <v-list-item-title>Edit</v-list-item-title>
+              </v-list-item>
+              
+              <v-list-item @click="$emit('duplicate', task)">
+                <template v-slot:prepend>
+                  <v-icon icon="mdi-content-copy" />
+                </template>
+                <v-list-item-title>Duplicate</v-list-item-title>
+              </v-list-item>
+              
+              <v-divider />
+              
+              <v-list-item @click="$emit('delete', task)" 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>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { format, isToday, isTomorrow, isPast } from 'date-fns'
+
+const props = defineProps({
+  task: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update', 'edit', 'duplicate', 'delete'])
+
+const completedSubtasks = computed(() => {
+  return props.task.subtasks?.filter(st => st.completed).length || 0
+})
+
+const toggleComplete = (completed) => {
+  emit('update', { ...props.task, completed })
+}
+
+const toggleSubtask = (subtaskId) => {
+  const subtasks = props.task.subtasks.map(st => 
+    st.id === subtaskId ? { ...st, completed: !st.completed } : st
+  )
+  emit('update', { ...props.task, subtasks })
+}
+
+const getPriorityColor = (priority) => {
+  const colors = {
+    low: 'blue',
+    medium: 'orange',
+    high: 'red'
+  }
+  return colors[priority] || 'grey'
+}
+
+const getDueDateColor = (dueDate) => {
+  if (!dueDate) return 'grey'
+  
+  const date = new Date(dueDate)
+  if (isPast(date) && !isToday(date)) return 'error'
+  if (isToday(date)) return 'warning'
+  if (isTomorrow(date)) return 'info'
+  return 'success'
+}
+
+const formatDueDate = (dueDate) => {
+  if (!dueDate) return ''
+  
+  const date = new Date(dueDate)
+  if (isToday(date)) return 'Today'
+  if (isTomorrow(date)) return 'Tomorrow'
+  if (isPast(date)) return `Overdue (${format(date, 'MMM d')})`
+  return format(date, 'MMM d')
+}
+</script>
+
+<style scoped>
+.task-completed {
+  opacity: 0.7;
+}
+
+.task-item {
+  transition: all 0.2s ease;
+}
+
+.task-item:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.subtasks {
+  border-left: 2px solid rgba(var(--v-theme-primary), 0.2);
+  padding-left: 12px;
+  margin-left: 8px;
+}
+</style>

package/app/composables/bookmarks/createBookmark.js

@@ -0,0 +1,30 @@
+// composables/createWebsite.js
+import { createItem } from '@directus/sdk';
+
+export default async function createWebsite(websiteData) {
+    const route = useRoute();
+
+    const id = route.params.id;
+    const { $directus } = useNuxtApp();
+  
+    try {
+      const website = await $directus.request(createItem('websites', [
+        {
+          name: websiteData.name,
+          note: websiteData.note,
+          status: websiteData.status,
+          type: websiteData.type,
+          image: websiteData.image,
+          icon: websiteData.icon,
+          slug: websiteData.slug,
+          coverFile: null,
+          username: websiteData.username,
+        }
+      ]));
+      return website;
+    } catch (error) {
+      console.error('Error creating website:', error);
+      throw error;
+    }
+  }
+  

package/app/composables/bookmarks/deleteBookmark.js

@@ -0,0 +1,15 @@
+// composables/deleteWebsite.js
+import { deleteItem } from '@directus/sdk';
+
+export default async function deleteWebsite(websiteId) {
+    const { $directus } = useNuxtApp();
+  
+    try {
+      $directus.request(deleteItem('websites', websiteId));
+      console.log('Bookmark deleted successfully');
+    } catch (error) {
+      console.error('Error deleting bookmark:', error);
+      throw error;
+    }
+  }
+  

package/app/composables/bookmarks/updateBookmark.js

@@ -0,0 +1,15 @@
+// composables/updatePost.js
+import { updateItem } from '@directus/sdk';
+
+export default async function updatePost(websiteId, websiteData) {
+    const { $directus } = useNuxtApp();
+  
+    try {
+      const website = await $directus.request(updateItem('websites', websiteId));
+      return website;
+    } catch (error) {
+      console.error('Error updating bookmark:', error);
+      throw error;
+    }
+  }
+  

package/app/composables/config.ts

@@ -0,0 +1,17 @@
+export interface ListsConfig {
+  provider: string
+  baseUrl?: string
+  apiKey?: string
+}
+
+let config: ListsConfig = {
+  provider: 'memory'
+}
+
+export function setListsConfig(newConfig: Partial<ListsConfig>) {
+  config = { ...config, ...newConfig }
+}
+
+export function getListsConfig(): ListsConfig {
+  return config
+}

package/app/composables/content/uploadFiles.js

@@ -0,0 +1,41 @@
+import { uploadFiles } from '@meeovi/directus-client';
+
+export default async function uploadFile({ imageFile, documentFile, videoFile, audioFile }) {
+    const { $directus } = useNuxtApp();
+    const uploadedFiles = {};
+  
+    try {
+      if (imageFile) {
+        const formDataImage = new FormData();
+        formDataImage.append('file', imageFile);
+        const uploadedImage = await $directus.request(uploadFiles(formDataImage));
+        uploadedFiles.imageId = uploadedImage.id;
+      }
+  
+      if (documentFile) {
+        const formDataDocument = new FormData();
+        formDataDocument.append('file', documentFile);
+        const uploadedDocument = await $directus.request(uploadFiles(formDataDocument));
+        uploadedFiles.documentId = uploadedDocument.id;
+      }
+
+      if (videoFile) {
+        const formDataVideo = new FormData();
+        formDataVideo.append('file', videoFile);
+        const uploadedVideo = await $directus.request(uploadFiles(formDataVideo));
+        uploadedFiles.videoId = uploadedVideo.id;
+      }
+
+      if (audioFile) {
+        const formDataAudio = new FormData();
+        formDataAudio.append('file', audioFile);
+        const uploadedAudio = await $directus.request(uploadFiles(formDataAudio));
+        uploadedFiles.audioId = uploadedAudio.id;
+      }
+  
+      return uploadedFiles;
+    } catch (error) {
+      console.error('Error uploading files:', error);
+      throw error;
+    }
+  }

package/app/composables/globals/useDirectusForm.ts

@@ -0,0 +1 @@
+export * from '#shared/app/composables/globals/useDirectusForm'

package/app/composables/lists/createList.js

@@ -0,0 +1,25 @@
+// composables/createList.js
+import { createItem } from '@directus/sdk';
+
+export default async function createList(listData) {
+    const { $directus } = useNuxtApp();
+    const user = useSupabaseUser();
+
+    const data = {
+      name: listData.name,
+      type: listData.type,
+      status: listData.status,
+      description: listData.description,
+      image: listData.image,
+      user: user.value.id,
+    };
+
+    try {
+      const list = await $directus.request(createItem('lists', data));
+      return list;
+    } catch (error) {
+      console.error('Error creating list:', error);
+      throw error;
+    }
+  }
+  

package/app/composables/lists/deleteList.js

@@ -0,0 +1,14 @@
+// composables/cms/lists/deleteList.js
+import { deleteItem } from '@directus/sdk';
+
+export default async function deleteList(listId) {
+    const { $directus } = useNuxtApp();
+  
+    try {
+        await $directus.request(deleteItem('lists', listId));
+        return true;
+    } catch (error) {
+        console.error('Error deleting list:', error);
+        throw error;
+    }
+}

package/app/composables/lists/updateList.js

@@ -0,0 +1,20 @@
+// composables/updateList.js
+import { updateItem } from '@directus/sdk';
+
+export default async function updateList(listId, listData) {
+    const { $directus } = useNuxtApp();
+  
+    try {
+      const list = await $directus.request(updateItem('lists', listId, listData));
+      return list;
+    } catch (error) {
+      console.error('Error updating list:', {
+        error: error.message,
+        statusCode: error.status,
+        data: error.data,
+        listId,
+        listData
+      });
+      throw error;
+    }    
+  }

package/app/composables/lists/useBookmarks.js

@@ -0,0 +1,69 @@
+export const useBookmarks = () => {
+  const { createList, addToList, getUserLists, removeFromList } = useLists()
+
+  const createBookmarkList = async (name = 'Bookmarks', description = '') => {
+    return await createList({
+      name,
+      description,
+      type: 'bookmarks',
+      visibility: 'private'
+    })
+  }
+
+  const addBookmark = async (listId, bookmarkData) => {
+    const { url, title, description, tags, favicon } = bookmarkData
+    
+    return await addToList(listId, {
+      type: 'bookmark',
+      title,
+      url,
+      description,
+      favicon,
+      tags: tags || [],
+      date_added: new Date().toISOString(),
+      read: false,
+      archived: false
+    })
+  }
+
+  const getUserBookmarkLists = async () => {
+    return await getUserLists('bookmarks')
+  }
+
+  const removeBookmark = async (itemId) => {
+    return await removeFromList(itemId)
+  }
+
+  const markAsRead = async (itemId) => {
+    const { updateListItem } = useLists()
+    return await updateListItem(itemId, { 
+      'content.read': true,
+      'content.date_read': new Date().toISOString()
+    })
+  }
+
+  const archiveBookmark = async (itemId) => {
+    const { updateListItem } = useLists()
+    return await updateListItem(itemId, { 
+      'content.archived': true,
+      'content.date_archived': new Date().toISOString()
+    })
+  }
+
+  const addTagsToBookmark = async (itemId, newTags) => {
+    const { updateListItem } = useLists()
+    return await updateListItem(itemId, { 
+      'content.tags': newTags
+    })
+  }
+
+  return {
+    createBookmarkList,
+    addBookmark,
+    getUserBookmarkLists,
+    removeBookmark,
+    markAsRead,
+    archiveBookmark,
+    addTagsToBookmark
+  }
+}

package/app/composables/lists/useLists.js

@@ -0,0 +1,120 @@
+import { createItem, readItems, readItem, updateItem, deleteItem } from '@directus/sdk'
+
+export const useLists = () => {
+  const { $directus, $readItem } = useNuxtApp()
+
+  // Cache current user to avoid repeated requests
+  let _currentUser = null
+
+  async function ensureCurrentUser() {
+    if (_currentUser) return _currentUser
+    try {
+      const resp = await $directus.request($readItem('users', 'me'))
+      // Directus responses sometimes wrap in { data } or return raw object
+      _currentUser = resp?.data || resp || null
+      return _currentUser
+    } catch (e) {
+      return null
+    }
+  }
+
+  const createList = async (listData) => {
+    const user = await ensureCurrentUser()
+    if (!user) throw new Error('Not logged in')
+
+    const list = await $directus.request(
+      createItem('lists', {
+        ...listData,
+        user_created: user.id,
+        date_created: new Date().toISOString()
+      })
+    )
+    return list
+  }
+
+  const updateList = async (listId, updates) => {
+    return await $directus.request(
+      updateItem('lists', listId, {
+        ...updates,
+        date_updated: new Date().toISOString()
+      })
+    )
+  }
+
+  const deleteList = async (listId) => {
+    return await $directus.request(deleteItem('lists', listId))
+  }
+
+  const getUserLists = async (type = null) => {
+    const user = await ensureCurrentUser()
+    if (!user) return []
+
+    const filter = { user_created: { _eq: user.id } }
+    if (type) filter.type = { _eq: type }
+
+    return await $directus.request(
+      readItems('lists', {
+        filter,
+        sort: ['-date_updated', 'name'],
+        fields: ['*', 'items.*', 'items.content.*']
+      })
+    )
+  }
+
+  const getPublicLists = async (type = null) => {
+    const filter = { visibility: { _eq: 'public' } }
+    if (type) filter.type = { _eq: type }
+
+    return await $directus.request(
+      readItems('lists', {
+        filter,
+        sort: ['-date_updated'],
+        fields: ['*', 'user_created.first_name', 'user_created.last_name']
+      })
+    )
+  }
+
+  const getListById = async (listId) => {
+    return await $directus.request(
+      readItem('lists', listId, {
+        fields: ['*', 'items.*', 'items.content.*', 'user_created.first_name', 'user_created.last_name']
+      })
+    )
+  }
+
+  const addToList = async (listId, contentData) => {
+    return await $directus.request(
+      createItem('list_items', {
+        list: listId,
+        content: contentData,
+        date_created: new Date().toISOString()
+      })
+    )
+  }
+
+  const removeFromList = async (itemId) => {
+    return await $directus.request(deleteItem('list_items', itemId))
+  }
+
+  const updateListItem = async (itemId, updates) => {
+    return await $directus.request(
+      updateItem('list_items', itemId, {
+        ...updates,
+        date_updated: new Date().toISOString()
+      })
+    )
+  }
+
+  return {
+    createList,
+    updateList,
+    deleteList,
+    getUserLists,
+    getPublicLists,
+    getListById,
+    addToList,
+    removeFromList,
+    updateListItem
+  }
+}
+  

package/app/composables/lists/usePlaylist.js

@@ -0,0 +1,64 @@
+export const usePlaylist = () => {
+  const { createList, addToList, getUserLists, getListById } = useLists()
+
+  const createPlaylist = async (name, description = '', visibility = 'private') => {
+    return await createList({
+      name,
+      description,
+      type: 'playlist',
+      visibility,
+      settings: {
+        autoplay: false,
+        shuffle: false,
+        repeat: 'none'
+      }
+    })
+  }
+
+  const addMediaToPlaylist = async (playlistId, mediaData) => {
+    const { url, title, duration, type, thumbnail } = mediaData
+    
+    if (!['audio', 'video'].includes(type)) {
+      throw new Error('Only audio and video files are supported in playlists')
+    }
+
+    return await addToList(playlistId, {
+      type: 'media',
+      title,
+      url,
+      media_type: type,
+      duration,
+      thumbnail,
+      metadata: {
+        artist: mediaData.artist || '',
+        album: mediaData.album || '',
+        genre: mediaData.genre || ''
+      }
+    })
+  }
+
+  const getUserPlaylists = async () => {
+    return await getUserLists('playlist')
+  }
+
+  const getPlaylistWithMedia = async (playlistId) => {
+    const playlist = await getListById(playlistId)
+    if (playlist.type !== 'playlist') {
+      throw new Error('Not a playlist')
+    }
+    return playlist
+  }
+
+  const updatePlaylistSettings = async (playlistId, settings) => {
+    const { updateList } = useLists()
+    return await updateList(playlistId, { settings })
+  }
+
+  return {
+    createPlaylist,
+    addMediaToPlaylist,
+    getUserPlaylists,
+    getPlaylistWithMedia,
+    updatePlaylistSettings
+  }
+}