src/components/namespace/namespace-settings-dropdown.vue

@@ -16,7 +16,7 @@
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
+				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}

src/router/index.ts

@@ -217,7 +217,7 @@ const router = createRouter({
 			},
 		},
 		{
-			path: '/namespaces/:id/settings/share',
+			path: '/namespaces/:namespaceId/settings/share',
 			name: 'namespace.settings.share',
 			component: NamespaceSettingShare,
 			meta: {

src/views/list/settings/share.vue

@@ -3,24 +3,38 @@
 		:title="$t('list.share.header')"
 		primary-label=""
 	>
-		<component
-			:id="list.id"
-			:is="manageUsersComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="user"
-			type="list"/>
-		<component
-			:id="list.id"
-			:is="manageTeamsComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="team"
-			type="list"/>
+		<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="$route.params.listId" v-if="linkSharingEnabled" class="mt-4"/>
+		<link-sharing :list-id="listId" v-if="linkSharingEnabled" class="mt-4"/>
 	</create-edit>
 </template>
 
-<script>
+<script lang="ts">
+export default {
+	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'
@@ -29,43 +43,30 @@ import CreateEdit from '@/components/misc/create-edit.vue'
 import LinkSharing from '@/components/sharing/linkSharing.vue'
 import userTeam from '@/components/sharing/userTeam.vue'
 
-export default {
-	name: 'list-setting-share',
-	data() {
-		return {
-			list: ListModel,
-			listService: new ListService(),
-			manageUsersComponent: '',
-			manageTeamsComponent: '',
-		}
-	},
-	components: {
-		CreateEdit,
-		LinkSharing,
-		userTeam,
-	},
-	computed: {
-		linkSharingEnabled() {
-			return this.$store.state.config.linkSharingEnabled
-		},
-		userIsAdmin() {
-			return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
-		},
-	},
-	created() {
-		this.loadList()
-	},
-	methods: {
-		async loadList() {
-			const list = new ListModel({id: this.$route.params.listId})
+const {t} = useI18n()
 
-			this.list = await this.listService.get(list)
-			await this.$store.dispatch(CURRENT_LIST, this.list)
-			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-			this.manageTeamsComponent = 'userTeam'
-			this.manageUsersComponent = 'userTeam'
-			this.setTitle(this.$t('list.share.title', {list: this.list.title}))
-		},
-	},
+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, 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>

src/views/namespaces/settings/share.vue

@@ -3,69 +3,67 @@
 		:title="title"
 		primary-label=""
 	>
-		<component
-			:id="namespace.id"
-			:is="manageUsersComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="user"
-			type="namespace"/>
-		<component
-			:id="namespace.id"
-			:is="manageTeamsComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="team"
-			type="namespace"/>
+		<template v-if="namespace">
+			<manageSharing
+				:id="namespace.id"
+				:userIsAdmin="userIsAdmin"
+				shareType="user"
+				type="namespace"
+			/>
+			<manageSharing
+				:id="namespace.id"
+				:userIsAdmin="userIsAdmin"
+				shareType="team"
+				type="namespace"
+			/>
+		</template>
 	</create-edit>
 </template>
 
-<script>
-import manageSharing from '@/components/sharing/userTeam.vue'
-import CreateEdit from '@/components/misc/create-edit.vue'
+<script lang="ts">
+export default {
+	name: 'namespace-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 NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 
-export default {
-	name: 'namespace-setting-share',
-	data() {
-		return {
-			namespaceService: new NamespaceService(),
-			namespace: new NamespaceModel(),
-			manageUsersComponent: '',
-			manageTeamsComponent: '',
-			title: '',
-		}
-	},
-	components: {
-		CreateEdit,
-		manageSharing,
-	},
-	beforeMount() {
-		this.namespace.id = this.$route.params.id
-	},
-	watch: {
-		// call again the method if the route changes
-		'$route': {
-			handler: 'loadNamespace',
-			deep: true,
-			immediate: true,
-		},
-	},
-	computed: {
-		userIsAdmin() {
-			return this.namespace.owner && this.namespace.owner.id === this.$store.state.auth.info.id
-		},
-	},
-	methods: {
-		async loadNamespace() {
-			const namespace = new NamespaceModel({id: this.$route.params.id})
-			this.namespace = await this.namespaceService.get(namespace)
-			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-			this.manageTeamsComponent = 'manageSharing'
-			this.manageUsersComponent = 'manageSharing'
-			this.title = this.$t('namespace.share.title', { namespace: this.namespace.title })
-			this.setTitle(this.title)
-		},
-	},
+import CreateEdit from '@/components/misc/create-edit.vue'
+import manageSharing from '@/components/sharing/userTeam.vue'
+
+const {t} = useI18n()
+
+const namespace = ref()
+
+const title = computed(() => namespace.value?.title
+	? t('namespace.share.title', { namespace: namespace.value.title })
+	: '',
+)
+useTitle(title)
+
+const store = useStore()
+const userIsAdmin = computed(() => 'owner' in namespace.value && namespace.value.owner.id === store.state.auth.info.id)
+
+async function loadNamespace(namespaceId: number) {
+	if (!namespaceId) return
+	const namespaceService = new NamespaceService()
+	namespace.value = await namespaceService.get(new NamespaceModel({id: namespaceId}))
+
+	// TODO: set namespace in store
 }
+
+const route = useRoute()
+const namespaceId = computed(() => route.params.namespaceId !== undefined
+	? parseInt(route.params.namespaceId as string)
+	: undefined,
+)
+watchEffect(() => namespaceId.value !== undefined && loadNamespace(namespaceId.value))
 </script>