122 lines
2.3 KiB
Vue
122 lines
2.3 KiB
Vue
<template>
|
|
<DashboardWidget :items="items"
|
|
:loading="loading"
|
|
:show-more-text="t('notes', 'notes')"
|
|
:show-more-url="showMoreUrl"
|
|
>
|
|
<template v-slot:default="{ item }">
|
|
<DashboardWidgetItem
|
|
:target-url="getItemTargetUrl(item)"
|
|
:main-text="item.title"
|
|
:sub-text="subtext(item)"
|
|
>
|
|
<template v-slot:avatar>
|
|
<div
|
|
class="note-item"
|
|
:class="{ 'note-item-favorite': item.favorite, 'note-item-no-favorites': !hasFavorites }"
|
|
/>
|
|
</template>
|
|
</DashboardWidgetItem>
|
|
</template>
|
|
<template v-slot:empty-content>
|
|
<EmptyContent icon="icon-notes">
|
|
<template #desc>
|
|
<p class="notes-empty-content-label">
|
|
{{ t('notes', 'No notes yet') }}
|
|
</p>
|
|
<p>
|
|
<a :href="createNoteUrl" class="button">{{ t('note', 'New note') }}</a>
|
|
</p>
|
|
</template>
|
|
</EmptyContent>
|
|
</template>
|
|
</DashboardWidget>
|
|
</template>
|
|
|
|
<script>
|
|
import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
|
|
import { EmptyContent } from '@nextcloud/vue'
|
|
import { generateUrl } from '@nextcloud/router'
|
|
import { getDashboardData, categoryLabel } from '../NotesService'
|
|
|
|
export default {
|
|
name: 'Dashboard',
|
|
|
|
components: {
|
|
DashboardWidget,
|
|
DashboardWidgetItem,
|
|
EmptyContent,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
items: [],
|
|
hasMoreItems: false,
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
showMoreUrl() {
|
|
return this.hasMoreItems ? generateUrl('/apps/notes') : null
|
|
},
|
|
|
|
hasFavorites() {
|
|
return this.items.length > 0 && this.items[0].favorite
|
|
},
|
|
|
|
createNoteUrl() {
|
|
return generateUrl('/apps/notes/new')
|
|
},
|
|
|
|
getItemTargetUrl() {
|
|
return (note) => {
|
|
return generateUrl('/apps/notes/note/' + note.id)
|
|
}
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.loadDashboardData()
|
|
},
|
|
|
|
methods: {
|
|
loadDashboardData() {
|
|
getDashboardData().then(data => {
|
|
this.items = data.items
|
|
this.hasMoreItems = data.hasMoreItems
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
subtext(item) {
|
|
return item.excerpt ? item.excerpt : categoryLabel(item.category)
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.note-item-favorite {
|
|
background: var(--icon-star-dark-fc0);
|
|
}
|
|
|
|
.note-item {
|
|
width: 44px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
flex-shrink: 0;
|
|
background-size: 50%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.note-item-no-favorites {
|
|
display: none;
|
|
}
|
|
|
|
.notes-empty-content-label {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|