feat: ListNamespaces script setup (#2389)
Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2389 Reviewed-by: konrad <k@knt.li> Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
parent
ddabd7f63a
commit
ff5d1fc8c1
1 changed files with 23 additions and 38 deletions
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
|
<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
|
||||||
<header class="namespace-header">
|
<header class="namespace-header">
|
||||||
<fancycheckbox v-model="showArchived" @change="saveShowArchivedState" v-cy="'show-archived-check'">
|
<fancycheckbox v-model="showArchived" v-cy="'show-archived-check'">
|
||||||
{{ $t('namespace.showArchived') }}
|
{{ $t('namespace.showArchived') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
|
|
||||||
|
@ -68,46 +68,31 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
import {computed} from 'vue'
|
||||||
|
import {useI18n} from 'vue-i18n'
|
||||||
|
import {useStore} from '@/store'
|
||||||
|
|
||||||
import {mapState} from 'vuex'
|
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
|
||||||
import Fancycheckbox from '../../components/input/fancycheckbox.vue'
|
|
||||||
import {LOADING} from '@/store/mutation-types'
|
|
||||||
import ListCard from '@/components/list/partials/list-card.vue'
|
import ListCard from '@/components/list/partials/list-card.vue'
|
||||||
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
|
|
||||||
import { setTitle } from '@/helpers/setTitle'
|
|
||||||
|
|
||||||
export default defineComponent({
|
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
|
||||||
name: 'ListNamespaces',
|
import {useTitle} from '@/composables/useTitle'
|
||||||
components: {
|
import {useStorage} from '@vueuse/core'
|
||||||
ListCard,
|
|
||||||
Fancycheckbox,
|
const {t} = useI18n()
|
||||||
},
|
const store = useStore()
|
||||||
data() {
|
|
||||||
return {
|
useTitle(() => t('namespace.title'))
|
||||||
showArchived: JSON.parse(localStorage.getItem('showArchived')) ?? false,
|
const showArchived = useStorage('showArchived', false)
|
||||||
}
|
|
||||||
},
|
const loading = computed(() => store.state.loading)
|
||||||
mounted() {
|
const namespaces = computed(() => {
|
||||||
setTitle(this.$t('namespace.title'))
|
return store.state.namespaces.namespaces.filter(n => showArchived.value ? true : !n.isArchived)
|
||||||
},
|
// return store.state.namespaces.namespaces.filter(n => showArchived.value ? true : !n.isArchived).map(n => {
|
||||||
computed: mapState({
|
// n.lists = n.lists.filter(l => !l.isArchived)
|
||||||
namespaces(state) {
|
// return n
|
||||||
return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
|
// })
|
||||||
// return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived).map(n => {
|
|
||||||
// n.lists = n.lists.filter(l => !l.isArchived)
|
|
||||||
// return n
|
|
||||||
// })
|
|
||||||
},
|
|
||||||
loading: LOADING,
|
|
||||||
}),
|
|
||||||
methods: {
|
|
||||||
getNamespaceTitle,
|
|
||||||
saveShowArchivedState() {
|
|
||||||
localStorage.setItem('showArchived', JSON.stringify(this.showArchived))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue