Fix favoriting lists
This commit is contained in:
parent
4fa2f08975
commit
64a2720ad0
|
@ -209,15 +209,6 @@ export default {
|
||||||
this.$store.commit(CURRENT_LIST, {})
|
this.$store.commit(CURRENT_LIST, {})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
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>
|
</script>
|
||||||
|
|
|
@ -1,142 +1,142 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="{'is-active': menuActive}" class="namespace-container">
|
<div :class="{'is-active': menuActive}" class="namespace-container">
|
||||||
<div class="menu top-menu">
|
<div class="menu top-menu">
|
||||||
<router-link :to="{name: 'home'}" class="logo">
|
<router-link :to="{name: 'home'}" class="logo">
|
||||||
<img alt="Vikunja" src="/images/logo-full.svg"/>
|
<img alt="Vikunja" src="/images/logo-full.svg"/>
|
||||||
|
</router-link>
|
||||||
|
<ul class="menu-list">
|
||||||
|
<li>
|
||||||
|
<router-link :to="{ name: 'home'}">
|
||||||
|
<span class="icon">
|
||||||
|
<icon icon="calendar"/>
|
||||||
|
</span>
|
||||||
|
Overview
|
||||||
</router-link>
|
</router-link>
|
||||||
<ul class="menu-list">
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'home'}">
|
<router-link :to="{ name: 'tasks.range', params: {type: 'week'}}">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<icon icon="calendar"/>
|
<icon icon="calendar-week"/>
|
||||||
</span>
|
</span>
|
||||||
Overview
|
Next Week
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'tasks.range', params: {type: 'week'}}">
|
<router-link :to="{ name: 'tasks.range', params: {type: 'month'}}">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<icon icon="calendar-week"/>
|
<icon :icon="['far', 'calendar-alt']"/>
|
||||||
</span>
|
</span>
|
||||||
Next Week
|
Next Month
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'tasks.range', params: {type: 'month'}}">
|
<router-link :to="{ name: 'teams.index'}">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<icon :icon="['far', 'calendar-alt']"/>
|
<icon icon="users"/>
|
||||||
</span>
|
</span>
|
||||||
Next Month
|
Teams
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'teams.index'}">
|
<router-link :to="{ name: 'namespaces.index'}">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<icon icon="users"/>
|
<icon icon="layer-group"/>
|
||||||
</span>
|
</span>
|
||||||
Teams
|
Namespaces & Lists
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'namespaces.index'}">
|
<router-link :to="{ name: 'labels.index'}">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<icon icon="layer-group"/>
|
<icon icon="tags"/>
|
||||||
</span>
|
</span>
|
||||||
Namespaces & Lists
|
Labels
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
</ul>
|
||||||
<router-link :to="{ name: 'labels.index'}">
|
</div>
|
||||||
<span class="icon">
|
|
||||||
<icon icon="tags"/>
|
|
||||||
</span>
|
|
||||||
Labels
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<aside class="menu namespaces-lists">
|
<aside class="menu namespaces-lists">
|
||||||
<template v-for="n in namespaces">
|
<template v-for="n in namespaces">
|
||||||
<div :key="n.id">
|
<div :key="n.id">
|
||||||
<router-link
|
<router-link
|
||||||
:to="{name: 'namespace.edit', params: {id: n.id} }"
|
:to="{name: 'namespace.edit', params: {id: n.id} }"
|
||||||
class="nsettings"
|
class="nsettings"
|
||||||
v-if="n.id > 0"
|
v-if="n.id > 0"
|
||||||
v-tooltip.right="'Settings'">
|
v-tooltip.right="'Settings'">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<icon icon="cog"/>
|
<icon icon="cog"/>
|
||||||
</span>
|
</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link
|
<router-link
|
||||||
:key="n.id + 'list.create'"
|
:key="n.id + 'list.create'"
|
||||||
:to="{ name: 'list.create', params: { id: n.id} }"
|
:to="{ name: 'list.create', params: { id: n.id} }"
|
||||||
class="nsettings"
|
class="nsettings"
|
||||||
v-if="n.id > 0"
|
v-if="n.id > 0"
|
||||||
v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
|
v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<icon icon="plus"/>
|
<icon icon="plus"/>
|
||||||
</span>
|
</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
<label
|
<label
|
||||||
:for="n.id + 'checker'"
|
:for="n.id + 'checker'"
|
||||||
class="menu-label"
|
class="menu-label"
|
||||||
v-tooltip="n.title + ' (' + n.lists.length + ')'">
|
v-tooltip="n.title + ' (' + n.lists.length + ')'">
|
||||||
<span class="name">
|
<span class="name">
|
||||||
<span
|
<span
|
||||||
:style="{ backgroundColor: n.hexColor }"
|
:style="{ backgroundColor: n.hexColor }"
|
||||||
class="color-bubble"
|
class="color-bubble"
|
||||||
v-if="n.hexColor !== ''">
|
v-if="n.hexColor !== ''">
|
||||||
</span>
|
</span>
|
||||||
{{ n.title }} ({{ n.lists.length }})
|
{{ n.title }} ({{ n.lists.length }})
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
:id="n.id + 'checker'"
|
:id="n.id + 'checker'"
|
||||||
:key="n.id + 'checker'"
|
:key="n.id + 'checker'"
|
||||||
checked="checked"
|
checked="checked"
|
||||||
class="checkinput"
|
class="checkinput"
|
||||||
type="checkbox"/>
|
type="checkbox"/>
|
||||||
<div :key="n.id + 'child'" class="more-container">
|
<div :key="n.id + 'child'" class="more-container">
|
||||||
<ul class="menu-list can-be-hidden">
|
<ul class="menu-list can-be-hidden">
|
||||||
<template v-for="l in n.lists">
|
<template v-for="l in n.lists">
|
||||||
<!-- This is a bit ugly but vue wouldn't want to let me filter this - probably because the lists
|
<!-- This is a bit ugly but vue wouldn't want to let me filter this - probably because the lists
|
||||||
are nested inside of the namespaces makes it a lot harder.-->
|
are nested inside of the namespaces makes it a lot harder.-->
|
||||||
<li :key="l.id" v-if="!l.isArchived">
|
<li :key="l.id" v-if="!l.isArchived">
|
||||||
<router-link
|
<router-link
|
||||||
class="list-menu-link"
|
class="list-menu-link"
|
||||||
:class="{'router-link-exact-active': currentList.id === l.id}"
|
:class="{'router-link-exact-active': currentList.id === l.id}"
|
||||||
:to="{ name: 'list.index', params: { listId: l.id} }"
|
:to="{ name: 'list.index', params: { listId: l.id} }"
|
||||||
tag="span"
|
tag="span"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
:style="{ backgroundColor: l.hexColor }"
|
:style="{ backgroundColor: l.hexColor }"
|
||||||
class="color-bubble"
|
class="color-bubble"
|
||||||
v-if="l.hexColor !== ''">
|
v-if="l.hexColor !== ''">
|
||||||
</span>
|
</span>
|
||||||
<span class="list-menu-title">
|
<span class="list-menu-title">
|
||||||
{{ l.title }}
|
{{ l.title }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
:class="{'is-favorite': l.isFavorite}"
|
:class="{'is-favorite': l.isFavorite}"
|
||||||
@click.stop="toggleFavoriteList(l)"
|
@click.stop="toggleFavoriteList(l)"
|
||||||
class="favorite">
|
class="favorite">
|
||||||
<icon icon="star" v-if="l.isFavorite"/>
|
<icon icon="star" v-if="l.isFavorite"/>
|
||||||
<icon :icon="['far', 'star']" v-else/>
|
<icon :icon="['far', 'star']" v-else/>
|
||||||
</span>
|
</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
<label :for="n.id + 'checker'" class="hidden-hint">
|
<label :for="n.id + 'checker'" class="hidden-hint">
|
||||||
Show hidden lists ({{ n.lists.length }})...
|
Show hidden lists ({{ n.lists.length }})...
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</aside>
|
</aside>
|
||||||
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">Powered by Vikunja</a>
|
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">Powered by Vikunja</a>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -154,5 +154,16 @@ export default {
|
||||||
background: 'background',
|
background: 'background',
|
||||||
menuActive: MENU_ACTIVE,
|
menuActive: MENU_ACTIVE,
|
||||||
}),
|
}),
|
||||||
|
methods: {
|
||||||
|
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>
|
</script>
|
||||||
|
|
Reference in New Issue
Block a user