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> <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>