114 lines
3.0 KiB
Vue
Executable File
114 lines
3.0 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import { breakpointsTailwind } from '@vueuse/core'
|
|
import type { Activity } from '~/types'
|
|
import InboxActivity from '~/components/inbox/InboxActivity.vue'
|
|
|
|
|
|
|
|
const tabItems = [{
|
|
label: 'All',
|
|
value: 'all'
|
|
}, {
|
|
label: 'Unread',
|
|
value: 'unread'
|
|
}]
|
|
const selectedTab = ref('all')
|
|
const activities = ref()
|
|
|
|
// const searchKey = "04be59c1f633e2bb434082fc1a6fcc6ce97e3630e3fcf9e814e1f03a386c03e1"
|
|
|
|
// const { data: activities } = await useFetch<Activity[]>('https://search.carpa.com/indexes/activities_ES/search?attributesToRetrieve=["title"]&q=', { default: () => [], headers: {
|
|
// Authorization: `Bearer ${searchKey}`
|
|
// } })
|
|
|
|
const { search, result } = useMeiliSearch('activities_ES')
|
|
|
|
activities.value = await( search('',
|
|
{
|
|
attributesToRetrieve: ['_id', 'title', 'slug', 'date', 'activity', 'city', 'state', 'country'],
|
|
attributesToCrop: ['body:250'],
|
|
attributesToHighlight: ['body'],
|
|
cropLength: 250,
|
|
limit: 30,
|
|
sort: ['date:desc'],
|
|
|
|
}
|
|
|
|
) )
|
|
|
|
// Filter activities based on the selected tab
|
|
const filteredActivities = computed(() => {
|
|
// if (selectedTab.value === 'unread') {
|
|
// return activities.hits.filter(activity => !!activity.unread)
|
|
// }
|
|
console.log( 'Activities', activities )
|
|
return activities.value?.hits
|
|
})
|
|
|
|
const selectedActivity = ref<Activity | null>()
|
|
|
|
const isActivityPanelOpen = computed({
|
|
get() {
|
|
return !!selectedActivity.value
|
|
},
|
|
set(value: boolean) {
|
|
if (!value) {
|
|
selectedActivity.value = null
|
|
}
|
|
}
|
|
})
|
|
|
|
// Reset selected activity if it's not in the filtered activities
|
|
watch(filteredActivities, () => {
|
|
if (!filteredActivities.value.find(activity => activity.id === selectedActivity.value?.id)) {
|
|
selectedActivity.value = null
|
|
}
|
|
})
|
|
|
|
const breakpoints = useBreakpoints(breakpointsTailwind)
|
|
const isMobile = breakpoints.smaller('lg')
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel
|
|
id="inbox-1"
|
|
:default-size="25"
|
|
:min-size="20"
|
|
:max-size="30"
|
|
resizable
|
|
>
|
|
<UDashboardNavbar title="Actividades">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
<template #trailing>
|
|
<UBadge :label="filteredActivities?.length" variant="subtle" />
|
|
</template>
|
|
|
|
<template #right>
|
|
<UTabs
|
|
v-model="selectedTab"
|
|
:items="tabItems"
|
|
:content="false"
|
|
size="xs"
|
|
/>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<InboxList v-model="selectedActivity" :activities="filteredActivities" />
|
|
</UDashboardPanel>
|
|
|
|
<InboxActivity v-if="selectedActivity" :activity="selectedActivity" @close="selectedActivity = null" />
|
|
<div v-else class="hidden lg:flex flex-1 items-center justify-center">
|
|
<UIcon name="i-lucide-inbox" class="size-32 text-dimmed" />
|
|
</div>
|
|
|
|
<ClientOnly>
|
|
<USlideover v-if="isMobile" v-model:open="isActivityPanelOpen">
|
|
<template #content>
|
|
<InboxActivity v-if="selectedActivity" :activity="selectedActivity" @close="selectedActivity = null" />
|
|
</template>
|
|
</USlideover>
|
|
</ClientOnly>
|
|
</template>
|