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:
Dominik Pschenitschni 2022-09-21 14:12:36 +00:00 committed by konrad
parent ddabd7f63a
commit ff5d1fc8c1

View file

@ -1,7 +1,7 @@
<template>
<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
<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') }}
</fancycheckbox>
@ -68,46 +68,31 @@
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
<script setup lang="ts">
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 {LOADING} from '@/store/mutation-types'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import ListCard from '@/components/list/partials/list-card.vue'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import { setTitle } from '@/helpers/setTitle'
export default defineComponent({
name: 'ListNamespaces',
components: {
ListCard,
Fancycheckbox,
},
data() {
return {
showArchived: JSON.parse(localStorage.getItem('showArchived')) ?? false,
}
},
mounted() {
setTitle(this.$t('namespace.title'))
},
computed: mapState({
namespaces(state) {
return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
// return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived).map(n => {
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import {useTitle} from '@/composables/useTitle'
import {useStorage} from '@vueuse/core'
const {t} = useI18n()
const store = useStore()
useTitle(() => t('namespace.title'))
const showArchived = useStorage('showArchived', false)
const loading = computed(() => store.state.loading)
const namespaces = computed(() => {
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 => {
// n.lists = n.lists.filter(l => !l.isArchived)
// return n
// })
},
loading: LOADING,
}),
methods: {
getNamespaceTitle,
saveShowArchivedState() {
localStorage.setItem('showArchived', JSON.stringify(this.showArchived))
},
},
})
</script>