2020-06-16 22:20:37 +00:00
|
|
|
<template>
|
2022-01-05 12:46:33 +00:00
|
|
|
<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
|
|
|
|
<header class="namespace-header">
|
2022-09-21 14:12:36 +00:00
|
|
|
<fancycheckbox v-model="showArchived" v-cy="'show-archived-check'">
|
2022-01-05 12:46:33 +00:00
|
|
|
{{ $t('namespace.showArchived') }}
|
|
|
|
</fancycheckbox>
|
|
|
|
|
|
|
|
<div class="action-buttons">
|
|
|
|
<x-button :to="{name: 'filters.create'}" icon="filter">
|
|
|
|
{{ $t('filters.create.title') }}
|
|
|
|
</x-button>
|
|
|
|
<x-button :to="{name: 'namespace.create'}" icon="plus" v-cy="'new-namespace'">
|
|
|
|
{{ $t('namespace.create.title') }}
|
|
|
|
</x-button>
|
|
|
|
</div>
|
|
|
|
</header>
|
2020-06-16 22:20:37 +00:00
|
|
|
|
2022-11-15 16:25:52 +00:00
|
|
|
<p v-if="namespaces.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
|
2021-06-23 23:24:57 +00:00
|
|
|
{{ $t('namespace.noneAvailable') }}
|
2022-11-15 16:25:52 +00:00
|
|
|
<BaseButton :to="{name: 'namespace.create'}">
|
2021-06-23 23:24:57 +00:00
|
|
|
{{ $t('namespace.create.title') }}.
|
2022-11-15 16:25:52 +00:00
|
|
|
</BaseButton>
|
2021-01-17 19:21:33 +00:00
|
|
|
</p>
|
|
|
|
|
2022-01-16 17:05:12 +00:00
|
|
|
<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
|
2021-01-17 17:57:57 +00:00
|
|
|
<x-button
|
2022-11-15 16:25:52 +00:00
|
|
|
v-if="n.id > 0 && n.lists.length > 0"
|
2021-11-17 17:04:53 +00:00
|
|
|
:to="{name: 'list.create', params: {namespaceId: n.id}}"
|
2021-01-17 17:57:57 +00:00
|
|
|
class="is-pulled-right"
|
2022-01-04 18:58:06 +00:00
|
|
|
variant="secondary"
|
2021-01-17 17:57:57 +00:00
|
|
|
icon="plus"
|
|
|
|
>
|
2021-06-23 23:24:57 +00:00
|
|
|
{{ $t('list.create.header') }}
|
2021-01-17 17:57:57 +00:00
|
|
|
</x-button>
|
2021-01-30 20:18:30 +00:00
|
|
|
<x-button
|
2022-11-15 16:25:52 +00:00
|
|
|
v-if="n.isArchived"
|
2021-01-30 20:18:30 +00:00
|
|
|
:to="{name: 'namespace.settings.archive', params: {id: n.id}}"
|
|
|
|
class="is-pulled-right mr-4"
|
2022-01-04 18:58:06 +00:00
|
|
|
variant="secondary"
|
2021-01-30 20:18:30 +00:00
|
|
|
icon="archive"
|
|
|
|
>
|
2021-06-23 23:24:57 +00:00
|
|
|
{{ $t('namespace.unarchive') }}
|
2021-01-30 20:18:30 +00:00
|
|
|
</x-button>
|
2021-01-17 11:09:29 +00:00
|
|
|
|
2022-01-05 12:46:33 +00:00
|
|
|
<h2 class="namespace-title">
|
|
|
|
<span v-cy="'namespace-title'">{{ getNamespaceTitle(n) }}</span>
|
2022-11-15 16:25:52 +00:00
|
|
|
<span v-if="n.isArchived" class="is-archived">
|
2021-06-23 23:24:57 +00:00
|
|
|
{{ $t('namespace.archived') }}
|
2020-06-16 22:20:37 +00:00
|
|
|
</span>
|
2022-01-05 12:46:33 +00:00
|
|
|
</h2>
|
2020-06-16 22:20:37 +00:00
|
|
|
|
2022-11-15 16:25:52 +00:00
|
|
|
<p v-if="n.lists.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
|
2021-06-24 13:39:26 +00:00
|
|
|
{{ $t('namespace.noLists') }}
|
2022-11-15 16:25:52 +00:00
|
|
|
<BaseButton :to="{name: 'list.create', params: {namespaceId: n.id}}">
|
2021-06-23 23:24:57 +00:00
|
|
|
{{ $t('namespace.createList') }}
|
2022-11-15 16:25:52 +00:00
|
|
|
</BaseButton>
|
2021-01-17 19:21:33 +00:00
|
|
|
</p>
|
|
|
|
|
2022-11-15 16:25:52 +00:00
|
|
|
<ListCardGrid v-else
|
|
|
|
:lists="n.lists"
|
|
|
|
:show-archived="showArchived"
|
|
|
|
/>
|
2022-01-16 17:05:12 +00:00
|
|
|
</section>
|
2020-06-16 22:20:37 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-09-21 14:12:36 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
import {computed} from 'vue'
|
|
|
|
import {useI18n} from 'vue-i18n'
|
2022-02-15 12:07:59 +00:00
|
|
|
|
2022-11-15 16:25:52 +00:00
|
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
2022-09-21 14:12:36 +00:00
|
|
|
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
|
2022-11-15 16:25:52 +00:00
|
|
|
import ListCardGrid from '@/components/list/partials/ListCardGrid.vue'
|
2022-09-21 14:12:36 +00:00
|
|
|
|
2022-06-23 01:23:39 +00:00
|
|
|
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
|
2022-09-21 14:12:36 +00:00
|
|
|
import {useTitle} from '@/composables/useTitle'
|
|
|
|
import {useStorage} from '@vueuse/core'
|
2022-09-24 13:20:40 +00:00
|
|
|
|
2022-09-02 09:15:29 +00:00
|
|
|
import {useNamespaceStore} from '@/stores/namespaces'
|
2022-09-21 14:12:36 +00:00
|
|
|
|
|
|
|
const {t} = useI18n()
|
2022-09-02 09:15:29 +00:00
|
|
|
const namespaceStore = useNamespaceStore()
|
2022-09-21 14:12:36 +00:00
|
|
|
|
|
|
|
useTitle(() => t('namespace.title'))
|
|
|
|
const showArchived = useStorage('showArchived', false)
|
|
|
|
|
2022-09-30 10:52:21 +00:00
|
|
|
const loading = computed(() => namespaceStore.isLoading)
|
2022-09-21 14:12:36 +00:00
|
|
|
const namespaces = computed(() => {
|
2022-11-15 16:25:52 +00:00
|
|
|
return namespaceStore.namespaces.filter(namespace => showArchived.value
|
|
|
|
? true
|
|
|
|
: !namespace.isArchived,
|
|
|
|
)
|
2022-02-15 12:07:59 +00:00
|
|
|
})
|
2020-06-16 22:20:37 +00:00
|
|
|
</script>
|
2021-10-18 12:21:18 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2022-01-05 12:46:33 +00:00
|
|
|
.namespace-header {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
gap: 1rem;
|
|
|
|
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-buttons {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 1rem;
|
|
|
|
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
width: 100%;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: stretch;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-15 16:25:52 +00:00
|
|
|
.namespace:not(:first-child) {
|
|
|
|
margin-top: 1rem;
|
2022-01-05 12:46:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.namespace-title {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.is-archived {
|
|
|
|
font-size: 0.75rem;
|
|
|
|
border: 1px solid var(--grey-500);
|
|
|
|
color: $grey !important;
|
|
|
|
padding: 2px 4px;
|
|
|
|
border-radius: 3px;
|
|
|
|
font-family: $vikunja-font;
|
|
|
|
background: var(--white-translucent);
|
|
|
|
margin-left: .5rem;
|
|
|
|
}
|
2021-10-18 12:21:18 +00:00
|
|
|
</style>
|