forked from vikunja/frontend
konrad
f2fcf42639
Remove/show favorites namespace if a task/list is the first to being marked as favorite Add special case to prevent marking an archived list as favorite Add marking a task as favorite on namespaces page Prevent toggling the favorite state for the favorites list Add method to toggle list favorite in the menu Add favorite icon to lists in menu Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#237
116 lines
2.9 KiB
Vue
116 lines
2.9 KiB
Vue
<template>
|
|
<div class="content namespaces-list">
|
|
<router-link :to="{name: 'namespace.create'}" class="button is-success new-namespace">
|
|
<span class="icon is-small">
|
|
<icon icon="plus"/>
|
|
</span>
|
|
Create new namespace
|
|
</router-link>
|
|
|
|
<fancycheckbox class="show-archived-check" v-model="showArchived">
|
|
Show Archived
|
|
</fancycheckbox>
|
|
|
|
<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
|
|
<h1>
|
|
<span>{{ n.title }}</span>
|
|
<span class="is-archived" v-if="n.isArchived">
|
|
Archived
|
|
</span>
|
|
</h1>
|
|
|
|
<div class="lists">
|
|
<template v-for="l in n.lists">
|
|
<router-link
|
|
:class="{
|
|
'has-light-text': !colorIsDark(l.hexColor),
|
|
'has-background': typeof backgrounds[l.id] !== 'undefined',
|
|
}"
|
|
:key="`l${l.id}`"
|
|
:style="{
|
|
'background-color': l.hexColor,
|
|
'background-image': typeof backgrounds[l.id] !== 'undefined' ? `url(${backgrounds[l.id]})` : false,
|
|
}"
|
|
:to="{ name: 'list.index', params: { listId: l.id} }"
|
|
class="list"
|
|
tag="span"
|
|
v-if="showArchived ? true : !l.isArchived"
|
|
>
|
|
<div class="is-archived-container">
|
|
<span class="is-archived" v-if="l.isArchived">
|
|
Archived
|
|
</span>
|
|
<span
|
|
:class="{'is-favorite': l.isFavorite, 'is-archived': l.isArchived}"
|
|
@click.stop="toggleFavoriteList(l)"
|
|
class="favorite">
|
|
<icon icon="star" v-if="l.isFavorite"/>
|
|
<icon :icon="['far', 'star']" v-else/>
|
|
</span>
|
|
</div>
|
|
<div class="title">{{ l.title }}</div>
|
|
</router-link>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
import ListService from '../../services/list'
|
|
import Fancycheckbox from '../../components/input/fancycheckbox'
|
|
|
|
export default {
|
|
name: 'ListNamespaces',
|
|
components: {
|
|
Fancycheckbox,
|
|
},
|
|
data() {
|
|
return {
|
|
showArchived: false,
|
|
// listId is the key, the object is the background blob
|
|
backgrounds: {},
|
|
}
|
|
},
|
|
created() {
|
|
this.loadBackgroundsForLists()
|
|
},
|
|
mounted() {
|
|
this.setTitle('Namespaces & Lists')
|
|
},
|
|
computed: mapState({
|
|
namespaces(state) {
|
|
return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
|
|
},
|
|
}),
|
|
methods: {
|
|
loadBackgroundsForLists() {
|
|
const listService = new ListService()
|
|
this.namespaces.forEach(n => {
|
|
n.lists.forEach(l => {
|
|
if (l.backgroundInformation) {
|
|
listService.background(l)
|
|
.then(b => {
|
|
this.$set(this.backgrounds, l.id, b)
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
}
|
|
})
|
|
})
|
|
},
|
|
toggleFavoriteList(list) {
|
|
// The favorites pseudo list is always favorite
|
|
// Archived lists cannot be marked favorite
|
|
if (list.id === -1 || list.isArchived) {
|
|
return
|
|
}
|
|
this.$store.dispatch('lists/toggleListFavorite', list)
|
|
.catch(e => this.error(e, this))
|
|
},
|
|
},
|
|
}
|
|
</script>
|