vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Move list settings to dropdown component

This commit is contained in:
kolaente 2021-01-30 13:30:33 +01:00
parent f49bc6242b
commit 87ad9e5390
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 61 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/list/list-settings-dropdown.vue
View File

@ -1,85 +1,71 @@
<template>
<div class="dropdown is-right is-active" ref="dropdown">
<div class="dropdown-trigger">
<icon icon="ellipsis-h" @click="listSettingsOpen = !listSettingsOpen" class="icon"/>
</div>
<transition name="fade">
<div class="dropdown-menu" v-if="listSettingsOpen">
<div class="dropdown-content">
<template v-if="isSavedFilter">
<router-link
:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
class="dropdown-item">
Edit this filter
</router-link>
<router-link
:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
class="dropdown-item">
Delete this filter
</router-link>
</template>
<template v-if="list.isArchived">
<router-link
:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
class="dropdown-item">
Un-Archive this list
</router-link>
</template>
<template v-else>
<router-link
:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
class="dropdown-item">
Edit this list
</router-link>
<router-link
:to="{ name: `${listRoutePrefix}.settings.background`, params: { listId: list.id } }"
v-if="backgroundsEnabled"
class="dropdown-item">
Set list background
</router-link>
<router-link
:to="{ name: `${listRoutePrefix}.settings.share`, params: { listId: list.id } }"
class="dropdown-item">
Share this list
</router-link>
<router-link
:to="{ name: `${listRoutePrefix}.settings.duplicate`, params: { listId: list.id } }"
class="dropdown-item">
Duplicate this list
</router-link>
<router-link
:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
class="dropdown-item">
Archive this list
</router-link>
<router-link
:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
class="dropdown-item">
Delete this list
</router-link>
</template>
</div>
</div>
</transition>
</div>
<dropdown>
<template v-if="isSavedFilter">
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
>
Edit this filter
</dropdown-item>
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
>
Delete this filter
</dropdown-item>
</template>
<template v-if="list.isArchived">
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
>
Un-Archive this list
</dropdown-item>
</template>
<template v-else>
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
>
Edit this list
</dropdown-item>
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.background`, params: { listId: list.id } }"
v-if="backgroundsEnabled"
>
Set list background
</dropdown-item>
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.share`, params: { listId: list.id } }"
>
Share this list
</dropdown-item>
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.duplicate`, params: { listId: list.id } }"
>
Duplicate this list
</dropdown-item>
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
>
Archive this list
</dropdown-item>
<dropdown-item
:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
>
Delete this list
</dropdown-item>
</template>
</dropdown>
</template>
<script>
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
import Dropdown from '@/components/misc/dropdown'
import DropdownItem from '@/components/misc/dropdown-item'
export default {
name: 'list-settings-dropdown',
data() {
return {
listSettingsOpen: false,
}
},
mounted() {
document.addEventListener('click', this.hide)
},
beforeDestroy() {
document.removeEventListener('click', this.hide)
components: {
DropdownItem,
Dropdown,
},
props: {
list: {
@ -93,11 +79,11 @@ export default {
listRoutePrefix() {
let name = 'list'
if(this.$route.name.startsWith('list.')) {
if (this.$route.name.startsWith('list.')) {
name = this.$route.name
}
if(this.isSavedFilter) {
if (this.isSavedFilter) {
name = name.replace('list.', 'filter.')
}
@ -107,14 +93,5 @@ export default {
return getSavedFilterIdFromListId(this.list.id) > 0
},
},
methods: {
hide(e) {
if (this.listSettingsOpen) {
closeWhenClickedOutside(e, this.$refs.dropdown, () => {
this.listSettingsOpen = false
})
}
},
},
}
</script>