Add Page Titles Everywhere (#177)

Add page titles everywhere

Add global mixin to set page title

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/177

src/App.vue

@@ -419,6 +419,8 @@
 				}
 			},
 			doStuffAfterRoute(e) {
+				// this.setTitle('') // Reset the title if the page component does not set one itself
+
 				if (this.$store.state[IS_FULLPAGE]) {
 					this.$store.commit(IS_FULLPAGE, false)
 				}

src/helpers/setTitle.js

@@ -0,0 +1,9 @@
+
+export const setTitle = title => {
+	if (typeof title === 'undefined' || title === '') {
+		document.title = 'Vikunja'
+		return
+	}
+
+	document.title = `${title} | Vikunja`
+}

src/main.js

@@ -143,6 +143,7 @@ Vue.directive('focus', {
 import message from './message'
 import {format, formatDistance} from 'date-fns'
 import {colorIsDark} from './helpers/colorIsDark'
+import {setTitle} from './helpers/setTitle'
 Vue.mixin({
 	methods: {
 		formatDateSince: date => {
@@ -161,7 +162,8 @@ Vue.mixin({
 		formatDate: date => format(date, 'PPPPpppp'),
 		error: (e, context, actions = []) => message.error(e, context, actions),
 		success: (s, context, actions = []) => message.success(s, context, actions),
-		colorIsDark: colorIsDark
+		colorIsDark: colorIsDark,
+		setTitle: setTitle,
 	}
 })
 

src/store/index.js

@@ -11,6 +11,7 @@ import kanban from './modules/kanban'
 import tasks from './modules/tasks'
 import lists from './modules/lists'
 import ListService from '../services/list'
+import {setTitle} from '../helpers/setTitle'
 
 export const store = new Vuex.Store({
 	modules: {
@@ -45,6 +46,9 @@ export const store = new Vuex.Store({
 			state.isFullpage = fullpage
 		},
 		[CURRENT_LIST](state, currentList) {
+
+			setTitle(currentList.title)
+
 			// Not sure if this is the right way to do it but hey, it works
 			if (
 				// List changed

src/views/404.vue

@@ -7,6 +7,9 @@
 
 <script>
 	export default {
-		name: '404'
+		name: '404',
+		mounted() {
+			this.setTitle('404')
+		},
 	}
 </script>

src/views/labels/ListLabels.vue

@@ -117,6 +117,9 @@
 			this.labelEditLabel = new LabelModel()
 			this.loadLabels()
 		},
+		mounted() {
+			this.setTitle('Labels')
+		},
 		computed: mapState({
 			userInfo: state => state.auth.info
 		}),

src/views/list/EditList.vue

@@ -218,6 +218,7 @@
 						// 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.setTitle(`Edit ${this.list.title}`)
 					})
 					.catch(e => {
 						this.error(e, this)

src/views/list/NewList.vue

@@ -51,6 +51,9 @@
 			this.listService = new ListService()
 			this.$store.commit(IS_FULLPAGE, true)
 		},
+		mounted() {
+			this.setTitle('Create a new list')
+		},
 		methods: {
 			newList() {
 				if (this.list.title === '') {

src/views/list/ShowList.vue

@@ -70,11 +70,12 @@
 				return this.$store.state.background
 			},
 			currentList() {
-				return typeof this.$store.state.currentList === 'undefined' ? {id: 0} : this.$store.state.currentList
+				return typeof this.$store.state.currentList === 'undefined' ? {id: 0, title: ''} : this.$store.state.currentList
 			},
 		},
 		methods: {
 			loadList() {
+				this.setTitle(this.currentList.title)
 
 				// This invalidates the loaded list at the kanban board which lets it reload its content when
 				// switched to it. This ensures updates done to tasks in the gantt or list views are consistently

src/views/migrator/Migrate.vue

@@ -14,6 +14,9 @@
 <script>
 	export default {
 		name: 'migrate.service',
+		mounted() {
+			this.setTitle('Import your data to Vikunja')
+		},
 		computed: {
 			availableMigrators() {
 				return this.$store.state.config.availableMigrators

src/views/migrator/MigrateService.vue

@@ -20,6 +20,9 @@
 				identifier: '',
 			}
 		},
+		mounted() {
+			this.setTitle(`Import your data from ${this.name} into Vikunja`)
+		},
 		created() {
 			switch (this.$route.params.service) {
 				case 'wunderlist':

src/views/namespaces/EditNamespace.vue

@@ -153,6 +153,7 @@
 						// 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.setTitle(`Edit ${this.namespace.title}`)
 					})
 					.catch(e => {
 						this.error(e, this)

src/views/namespaces/ListNamespaces.vue

@@ -65,14 +65,17 @@
 				backgrounds: {},
 			}
 		},
+		created() {
+			this.loadBackgroundsForLists()
+		},
+		mounted() {
+			this.setTitle('Namespaces & Lists')
+		},
 		computed: mapState({
 			namespaces(state) {
 				return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
 			},
 		}),
-		created() {
-			this.loadBackgroundsForLists()
-		},
 		methods: {
 			loadBackgroundsForLists() {
 				const listService = new ListService()

src/views/namespaces/NewNamespace.vue

@@ -53,6 +53,9 @@
 			this.namespaceService = new NamespaceService()
 			this.$store.commit(IS_FULLPAGE, true)
 		},
+		mounted() {
+			this.setTitle('Create a new namespace')
+		},
 		methods: {
 			newNamespace() {
 				if (this.namespace.title === '') {

src/views/sharing/LinkSharingAuth.vue

@@ -22,6 +22,9 @@
 		created() {
 			this.auth()
 		},
+		mounted() {
+			this.setTitle('Authenticating...')
+		},
 		methods: {
 			auth() {
 				this.$store.dispatch('auth/linkShareAuth', this.$route.params.share)

src/views/tasks/ShowTasks.vue

@@ -56,6 +56,12 @@
 					return
 				}
 
+				if (this.showAll) {
+					this.setTitle('Current Tasks')
+				} else {
+					this.setTitle(`Tasks from ${this.startDate.toLocaleDateString()} until ${this.endDate.toLocaleDateString()}`)
+				}
+
 				const params = {
 					sort_by: ['due_date', 'id'],
 					order_by: ['desc', 'desc'],

src/views/tasks/TaskDetailView.vue

@@ -453,6 +453,7 @@
 						this.taskTitle = this.task.title
 						this.taskColor = this.task.hexColor
 						this.setActiveFields()
+						this.setTitle(this.task.title)
 					})
 					.catch(e => {
 						this.error(e, this)

src/views/teams/EditTeam.vue

@@ -227,6 +227,7 @@
 				this.teamService.get(this.team)
 					.then(response => {
 						this.$set(this, 'team', response)
+						this.setTitle(`Edit Team ${this.team.name}`)
 						let members = response.members
 						for (const m in members) {
 							members[m].teamId = this.teamId

src/views/teams/ListTeams.vue

@@ -21,7 +21,7 @@
 	import TeamService from '../../services/team'
 	
 	export default {
-		name: "ListTeams",
+		name: 'ListTeams',
 		data() {
 			return {
 				teamService: TeamService,
@@ -32,6 +32,9 @@
 			this.teamService = new TeamService()
 			this.loadTeams()
 		},
+		mounted() {
+			this.setTitle('Teams')
+		},
 		methods: {
 			loadTeams() {
 				this.teamService.getAll()

src/views/teams/NewTeam.vue

@@ -51,6 +51,9 @@
 			this.team = new TeamModel()
 			this.$store.commit(IS_FULLPAGE, true)
 		},
+		mounted() {
+			this.setTitle('Create a new Team')
+		},
 		methods: {
 			newTeam() {
 

src/views/user/Login.vue

@@ -107,6 +107,9 @@
 				router.push({name: 'home'})
 			}
 		},
+		created() {
+			this.setTitle('Login')
+		},
 		computed: mapState({
 			registrationEnabled: state => state.config.registrationEnabled,
 			loading: LOADING,

src/views/user/PasswordReset.vue

@@ -57,6 +57,9 @@
 		created() {
 			this.passwordResetService = new PasswordResetService()
 		},
+		mounted() {
+			this.setTitle('Reset your password')
+		},
 		methods: {
 			submit() {
 				this.errorMsg = ''

src/views/user/Register.vue

@@ -67,6 +67,9 @@
 				router.push({name: 'home'})
 			}
 		},
+		mounted() {
+			this.setTitle('Register')
+		},
 		computed: mapState({
 			authenticated: state => state.auth.authenticated,
 			loading: LOADING,

src/views/user/RequestPasswordReset.vue

@@ -47,6 +47,9 @@
 			this.passwordResetService = new PasswordResetService()
 			this.passwordReset = new PasswordResetModel()
 		},
+		mounted() {
+			this.setTitle('Reset your password')
+		},
 		methods: {
 			submit() {
 				this.errorMsg = ''

src/views/user/Settings.vue

@@ -232,6 +232,9 @@
 
 			this.totpStatus()
 		},
+		mounted() {
+			this.setTitle('Settings')
+		},
 		computed: mapState({
 			totpEnabled: state => state.config.totpEnabled,
 			migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,