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
This commit is contained in:
parent
d23f07d5ac
commit
a0b9acee41
25 changed files with 80 additions and 7 deletions
|
@ -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)
|
||||
}
|
||||
|
|
9
src/helpers/setTitle.js
Normal file
9
src/helpers/setTitle.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
|
||||
export const setTitle = title => {
|
||||
if (typeof title === 'undefined' || title === '') {
|
||||
document.title = 'Vikunja'
|
||||
return
|
||||
}
|
||||
|
||||
document.title = `${title} | Vikunja`
|
||||
}
|
|
@ -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,
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -7,6 +7,9 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: '404'
|
||||
name: '404',
|
||||
mounted() {
|
||||
this.setTitle('404')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -117,6 +117,9 @@
|
|||
this.labelEditLabel = new LabelModel()
|
||||
this.loadLabels()
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Labels')
|
||||
},
|
||||
computed: mapState({
|
||||
userInfo: state => state.auth.info
|
||||
}),
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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 === '') {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -20,6 +20,9 @@
|
|||
identifier: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle(`Import your data from ${this.name} into Vikunja`)
|
||||
},
|
||||
created() {
|
||||
switch (this.$route.params.service) {
|
||||
case 'wunderlist':
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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 === '') {
|
||||
|
|
|
@ -22,6 +22,9 @@
|
|||
created() {
|
||||
this.auth()
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Authenticating...')
|
||||
},
|
||||
methods: {
|
||||
auth() {
|
||||
this.$store.dispatch('auth/linkShareAuth', this.$route.params.share)
|
||||
|
|
|
@ -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'],
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -51,6 +51,9 @@
|
|||
this.team = new TeamModel()
|
||||
this.$store.commit(IS_FULLPAGE, true)
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Create a new Team')
|
||||
},
|
||||
methods: {
|
||||
newTeam() {
|
||||
|
||||
|
|
|
@ -107,6 +107,9 @@
|
|||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setTitle('Login')
|
||||
},
|
||||
computed: mapState({
|
||||
registrationEnabled: state => state.config.registrationEnabled,
|
||||
loading: LOADING,
|
||||
|
|
|
@ -57,6 +57,9 @@
|
|||
created() {
|
||||
this.passwordResetService = new PasswordResetService()
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Reset your password')
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.errorMsg = ''
|
||||
|
|
|
@ -67,6 +67,9 @@
|
|||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Register')
|
||||
},
|
||||
computed: mapState({
|
||||
authenticated: state => state.auth.authenticated,
|
||||
loading: LOADING,
|
||||
|
|
|
@ -47,6 +47,9 @@
|
|||
this.passwordResetService = new PasswordResetService()
|
||||
this.passwordReset = new PasswordResetModel()
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Reset your password')
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.errorMsg = ''
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue