feat: namespace settings archive script setup #2357
|
@ -1,12 +1,21 @@
|
|||
import { computed, watchEffect } from 'vue'
|
||||
import type { ComputedGetter } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
|
||||
import { setTitle } from '@/helpers/setTitle'
|
||||
import {useTitle as useTitleVueUse, resolveRef} from '@vueuse/core'
|
||||
|
||||
export function useTitle(titleGetter: ComputedGetter<string>) {
|
||||
const titleRef = computed(titleGetter)
|
||||
type UseTitleParameters = Parameters<typeof useTitleVueUse>
|
||||
|
||||
watchEffect(() => setTitle(titleRef.value))
|
||||
export function useTitle(...args: UseTitleParameters) {
|
||||
|
||||
return titleRef
|
||||
const [newTitle, ...restArgs] = args
|
||||
|
||||
const pageTitle = resolveRef(newTitle) as Ref<string>
|
||||
|
||||
const completeTitle = computed(() =>
|
||||
(typeof pageTitle.value === 'undefined' || pageTitle.value === '')
|
||||
? 'Vikunja'
|
||||
: `${pageTitle.value} | Vikunja`,
|
||||
)
|
||||
|
||||
return useTitleVueUse(completeTitle, ...restArgs)
|
||||
}
|
|
@ -237,6 +237,7 @@ const router = createRouter({
|
|||
meta: {
|
||||
showAsModal: true,
|
||||
},
|
||||
props: route => ({ namespaceId: parseInt(route.params.id as string) }),
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/settings/delete',
|
||||
|
|
|
@ -7,50 +7,79 @@
|
|||
|
||||
<template #text>
|
||||
<p>
|
||||
{{ namespace.isArchived ? $t('namespace.archive.unarchiveText') : $t('namespace.archive.archiveText')}}
|
||||
{{
|
||||
namespace.isArchived
|
||||
? $t('namespace.archive.unarchiveText')
|
||||
: $t('namespace.archive.archiveText')
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
export default { name: 'namespace-setting-archive' }
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {watch, reactive, ref, shallowReactive} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {useStore} from '@/store'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import {success} from '@/message'
|
||||
import {useTitle} from '@/composables/useTitle'
|
||||
|
||||
import NamespaceService from '@/services/namespace'
|
||||
import { setTitle } from '@/helpers/setTitle'
|
||||
import type {INamespace} from '@/modelTypes/INamespace'
|
||||
import NamespaceModel from '@/models/namespace'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'namespace-setting-archive',
|
||||
data() {
|
||||
return {
|
||||
namespaceService: new NamespaceService(),
|
||||
namespace: null,
|
||||
title: '',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
|
||||
this.title = this.namespace.isArchived ?
|
||||
this.$t('namespace.archive.titleUnarchive', {namespace: this.namespace.title}) :
|
||||
this.$t('namespace.archive.titleArchive', {namespace: this.namespace.title})
|
||||
setTitle(this.title)
|
||||
},
|
||||
|
||||
methods: {
|
||||
async archiveNamespace() {
|
||||
try {
|
||||
const isArchived = !this.namespace.isArchived
|
||||
const namespace = await this.namespaceService.update({
|
||||
...this.namespace,
|
||||
isArchived,
|
||||
})
|
||||
this.$store.commit('namespaces/setNamespaceById', namespace)
|
||||
this.$message.success({message: this.$t(isArchived ? 'namespace.archive.success' : 'namespace.archive.unarchiveSuccess')})
|
||||
} finally {
|
||||
this.$router.back()
|
||||
}
|
||||
},
|
||||
const props = defineProps({
|
||||
namespaceId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
|
||||
const title = ref('')
|
||||
useTitle(title)
|
||||
|
||||
const namespaceService = shallowReactive(new NamespaceService())
|
||||
const namespace : INamespace = reactive(new NamespaceModel())
|
||||
|
||||
watch(
|
||||
() => props.namespaceId,
|
||||
async () => {
|
||||
Object.assign(namespace, store.getters['namespaces/getNamespaceById'](props.namespaceId))
|
||||
|
||||
|
||||
// FIXME: ressouce should be loaded in store
|
||||
Object.assign(namespace, await namespaceService.get({id: props.namespaceId}))
|
||||
dpschen marked this conversation as resolved
Outdated
konrad
commented
Can you remove this commented code? Or uncomment it? Can you remove this commented code? Or uncomment it?
dpschen
commented
Fixed Fixed
|
||||
title.value = namespace.isArchived ?
|
||||
t('namespace.archive.titleUnarchive', {namespace: namespace.title}) :
|
||||
t('namespace.archive.titleArchive', {namespace: namespace.title})
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
async function archiveNamespace() {
|
||||
try {
|
||||
const isArchived = !namespace.isArchived
|
||||
const archivedNamespace = await namespaceService.update({
|
||||
...namespace,
|
||||
isArchived,
|
||||
})
|
||||
store.commit('namespaces/setNamespaceById', archivedNamespace)
|
||||
success({
|
||||
message: isArchived
|
||||
? t('namespace.archive.success')
|
||||
: t('namespace.archive.unarchiveSuccess'),
|
||||
})
|
||||
} finally {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Reference in New Issue
Shouldn't this work? The namespace is always in store since it is used in the menu. We'll only need the title so it should be enough to get it from store.
As written above: