forked from vikunja/frontend
konrad
6b1ebbabb7
Fix saving Cleanup Fix single value prepare Add prepare percent done stub Fix populating filters with saved values when editing for single values Fix populating filters with saved values when editing Add edit filter view page Hide adding new tasks to pseudolists Make sure all filter values are passed as strings as per requirement from the api Add redirect to list after creating it Add creating saved filter Add filter by percent done Add end date filter Add start date filter Add extra checkbox to enable/disable priority filter Add changing priority Add more filter stubs Fix dates for filters Add saved filter create form Add include nulls and concat to filter options Add new saved filter component Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#239 Co-Authored-By: konrad <konrad@kola-entertainments.de> Co-Committed-By: konrad <konrad@kola-entertainments.de>
122 lines
3.1 KiB
Vue
122 lines
3.1 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>
|
|
<router-link :to="{name: 'filters.create'}" class="button is-primary new-namespace">
|
|
<span class="icon is-small">
|
|
<icon icon="filter"/>
|
|
</span>
|
|
Create a new saved filter
|
|
</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>
|