frontend/src/views/list/settings/share.vue
kolaente b2897545e4
fix: properly set list backgrounds when switching between lists
Probably caused by the blur hash feature, switching between lists would not work if the list background was set via unsplash. I've refactored the whole decision tree which checks if a background should be loaded or not. It actually does not matter where the background is from (unsplash or upload) or if we had one in the last list - we only need to know if the current list has a background or if we just changed it and need to update right away.
2022-04-03 14:20:16 +02:00

75 lines
1.9 KiB
Vue

<template>
<create-edit
:title="$t('list.share.header')"
primary-label=""
>
<template v-if="list">
<userTeam
:id="list.id"
:userIsAdmin="userIsAdmin"
shareType="user"
type="list"
/>
<userTeam
:id="list.id"
:userIsAdmin="userIsAdmin"
shareType="team"
type="list"
/>
</template>
<link-sharing :list-id="listId" v-if="linkSharingEnabled" class="mt-4"/>
</create-edit>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: 'list-setting-share',
})
</script>
<script lang="ts" setup>
import {ref, computed, watchEffect} from 'vue'
import {useStore} from 'vuex'
import {useRoute} from 'vue-router'
import {useI18n} from 'vue-i18n'
import {useTitle} from '@vueuse/core'
import ListService from '@/services/list'
import ListModel from '@/models/list'
import {CURRENT_LIST} from '@/store/mutation-types'
import CreateEdit from '@/components/misc/create-edit.vue'
import LinkSharing from '@/components/sharing/linkSharing.vue'
import userTeam from '@/components/sharing/userTeam.vue'
const {t} = useI18n()
const list = ref()
const title = computed(() => list.value?.title
? t('list.share.title', {list: list.value.title})
: '',
)
useTitle(title)
const store = useStore()
const linkSharingEnabled = computed(() => store.state.config.linkSharingEnabled)
const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id === store.state.auth.info.id)
async function loadList(listId: number) {
const listService = new ListService()
const newList = await listService.get(new ListModel({id: listId}))
await store.dispatch(CURRENT_LIST, {list: newList})
list.value = newList
}
const route = useRoute()
const listId = computed(() => route.params.listId !== undefined
? parseInt(route.params.listId as string)
: undefined,
)
watchEffect(() => listId.value !== undefined && loadList(listId.value))
</script>