YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

rework Breadcrumb and routes definitions to avoid repeating args definitions

Browse source
This commit is contained in:
Axolotle 2020-10-09 15:53:56 +02:00
parent b6bdf5421d
commit c20c538677
2 changed files with 99 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/src/components/globals/Breadcrumb.vue
View file

@ -1,16 +1,15 @@
<template> <template>
<b-breadcrumb v-if="breadcrumb && breadcrumb.length"> <b-breadcrumb v-if="routesList">
<b-breadcrumb-item to="/"> <b-breadcrumb-item to="/">
<span class="sr-only">{{ $t('home') }}</span> <span class="sr-only">{{ $t('home') }}</span>
<icon iname="home" /> <icon iname="home" />
</b-breadcrumb-item> </b-breadcrumb-item>
<b-breadcrumb-item <b-breadcrumb-item
v-for="(route, index) in breadcrumb" :key="index" v-for="{ name, text } in breadcrumb" :key="name"
:to="{name: route.name}" :to="{ name }" :active="name === $route.name"
:active="index === lastIndex"
> >
{{ route.text }} {{ text }}
</b-breadcrumb-item> </b-breadcrumb-item>
</b-breadcrumb> </b-breadcrumb>
</template> </template>
@ -20,29 +19,36 @@ export default {
name: 'Breadcrumb', name: 'Breadcrumb',
computed: { computed: {
params: function () { routesList () {
return this.$route.params const routesList = this.$route.meta.breadcrumb
return routesList && routesList.length ? routesList : null
}, },
breadcrumb: function () { breadcrumb () {
if (!this.$route.meta.breadcrumb) return null if (!this.routesList) return
return this.$route.meta.breadcrumb.map(({ name, trad, param }) => { // Get current params to pass it to potential previous routes
const currentParams = this.$route.params
return this.routesList.map(name => {
const { trad, param } = this.getRouteArgs(name)
let text = '' let text = ''
// if a traduction key string has been given and we also need to pass // if a traduction key string has been given and we also need to pass
// the route param as a variable. // the route param as a variable.
if (trad && param) { if (trad && param) {
text = this.$i18n.t(trad, { [param]: this.params[param] }) text = this.$i18n.t(trad, { [param]: currentParams[param] })
} else if (trad) { } else if (trad) {
text = this.$i18n.t(trad) text = this.$i18n.t(trad)
} else { } else {
text = this.params[param] text = currentParams[param]
} }
return { name, text } return { name, text }
}) })
}
}, },
lastIndex: function () { methods: {
return this.breadcrumb.length - 1 getRouteArgs (routeName) {
const route = this.$router.options.routes.find(route => route.name === routeName)
return route ? route.meta.args : {}
} }
} }
} }

214
app/src/router/routes.js
View file

@ -1,3 +1,8 @@
/**
* routes module.
* @module router/routes
*/
import Home from '@/views/Home' import Home from '@/views/Home'
import Login from '@/views/Login' import Login from '@/views/Login'
import ToolList from '@/views/tool/ToolList' import ToolList from '@/views/tool/ToolList'
@ -26,7 +31,7 @@ const routes = [
path: '/postinstall', path: '/postinstall',
component: () => import(/* webpackChunkName: "views/post-install" */ '@/views/PostInstall'), component: () => import(/* webpackChunkName: "views/post-install" */ '@/views/PostInstall'),
// Leave the breadcrumb // Leave the breadcrumb
meta: { noAuth: true } meta: { noAuth: true, breadcrumb: [] }
}, },
/* ───────╮ /* ───────╮
@ -36,17 +41,18 @@ const routes = [
name: 'user-list', name: 'user-list',
path: '/users', path: '/users',
component: () => import(/* webpackChunkName: "views/user/list" */ '@/views/user/UserList'), component: () => import(/* webpackChunkName: "views/user/list" */ '@/views/user/UserList'),
meta: { breadcrumb: [{ name: 'user-list', trad: 'users' }] } meta: {
args: { trad: 'users' },
breadcrumb: ['user-list']
}
}, },
{ {
name: 'user-create', name: 'user-create',
path: '/users/create', path: '/users/create',
component: () => import(/* webpackChunkName: "views/user/create" */ '@/views/user/UserCreate'), component: () => import(/* webpackChunkName: "views/user/create" */ '@/views/user/UserCreate'),
meta: { meta: {
breadcrumb: [ args: { trad: 'users_new' },
{ name: 'user-list', trad: 'users' }, breadcrumb: ['user-list', 'user-create']
{ name: 'user-create', trad: 'users_new' }
]
} }
}, },
{ {
@ -55,10 +61,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/user/info" */ '@/views/user/UserInfo'), component: () => import(/* webpackChunkName: "views/user/info" */ '@/views/user/UserInfo'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { param: 'name' },
{ name: 'user-list', trad: 'users' }, breadcrumb: ['user-list', 'user-info']
{ name: 'user-info', param: 'name' }
]
} }
}, },
{ {
@ -67,11 +71,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/user/edit" */ '@/views/user/UserEdit'), component: () => import(/* webpackChunkName: "views/user/edit" */ '@/views/user/UserEdit'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { param: 'name', trad: 'user_username_edit' },
{ name: 'user-list', trad: 'users' }, breadcrumb: ['user-list', 'user-info', 'user-edit']
{ name: 'user-info', param: 'name' },
{ name: 'user-edit', param: 'name', trad: 'user_username_edit' }
]
} }
}, },
@ -83,10 +84,8 @@ const routes = [
path: '/groups', path: '/groups',
component: () => import(/* webpackChunkName: "views/group/list" */ '@/views/group/GroupList'), component: () => import(/* webpackChunkName: "views/group/list" */ '@/views/group/GroupList'),
meta: { meta: {
breadcrumb: [ args: { trad: 'groups_and_permissions' },
{ name: 'user-list', trad: 'users' }, breadcrumb: ['user-list', 'group-list']
{ name: 'group-list', trad: 'groups_and_permissions' }
]
} }
}, },
{ {
@ -94,11 +93,8 @@ const routes = [
path: '/groups/create', path: '/groups/create',
component: () => import(/* webpackChunkName: "views/group/create" */ '@/views/group/GroupCreate'), component: () => import(/* webpackChunkName: "views/group/create" */ '@/views/group/GroupCreate'),
meta: { meta: {
breadcrumb: [ args: { trad: 'group_new' },
{ name: 'user-list', trad: 'users' }, breadcrumb: ['user-list', 'group-list', 'group-create']
{ name: 'group-list', trad: 'groups_and_permissions' },
{ name: 'group-create', trad: 'group_new' }
]
} }
}, },
@ -110,9 +106,8 @@ const routes = [
path: '/domains', path: '/domains',
component: () => import(/* webpackChunkName: "views/domain/list" */ '@/views/domain/DomainList'), component: () => import(/* webpackChunkName: "views/domain/list" */ '@/views/domain/DomainList'),
meta: { meta: {
breadcrumb: [ args: { trad: 'domains' },
{ name: 'domain-list', trad: 'domains' } breadcrumb: ['domain-list']
]
} }
}, },
{ {
@ -120,10 +115,8 @@ const routes = [
path: '/domains/add', path: '/domains/add',
component: () => import(/* webpackChunkName: "views/domain/add" */ '@/views/domain/DomainAdd'), component: () => import(/* webpackChunkName: "views/domain/add" */ '@/views/domain/DomainAdd'),
meta: { meta: {
breadcrumb: [ args: { trad: 'domain_add' },
{ name: 'domain-list', trad: 'domains' }, breadcrumb: ['domain-list', 'domain-add']
{ name: 'domain-add', trad: 'domain_add' }
]
} }
}, },
{ {
@ -132,10 +125,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/domain/info" */ '@/views/domain/DomainInfo'), component: () => import(/* webpackChunkName: "views/domain/info" */ '@/views/domain/DomainInfo'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { param: 'name' },
{ name: 'domain-list', trad: 'domains' }, breadcrumb: ['domain-list', 'domain-info']
{ name: 'domain-info', param: 'name' }
]
} }
}, },
{ {
@ -144,11 +135,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/domain/dns" */ '@/views/domain/DomainDns'), component: () => import(/* webpackChunkName: "views/domain/dns" */ '@/views/domain/DomainDns'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { trad: 'dns' },
{ name: 'domain-list', trad: 'domains' }, breadcrumb: ['domain-list', 'domain-info', 'domain-dns']
{ name: 'domain-info', param: 'name' },
{ name: 'domain-dns', trad: 'dns' }
]
} }
}, },
{ {
@ -157,11 +145,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/domain/cert" */ '@/views/domain/DomainCert'), component: () => import(/* webpackChunkName: "views/domain/cert" */ '@/views/domain/DomainCert'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { trad: 'certificate' },
{ name: 'domain-list', trad: 'domains' }, breadcrumb: ['domain-list', 'domain-info', 'domain-cert']
{ name: 'domain-info', param: 'name' },
{ name: 'domain-cert', trad: 'certificate' }
]
} }
}, },
@ -172,17 +157,18 @@ const routes = [
name: 'app-list', name: 'app-list',
path: '/apps', path: '/apps',
component: () => import(/* webpackChunkName: "views/apps/list" */ '@/views/app/AppList'), component: () => import(/* webpackChunkName: "views/apps/list" */ '@/views/app/AppList'),
meta: { breadcrumb: [{ name: 'app-list', trad: 'applications' }] } meta: {
args: { trad: 'applications' },
breadcrumb: ['app-list']
}
}, },
{ {
name: 'app-catalog', name: 'app-catalog',
path: '/apps/catalog', path: '/apps/catalog',
component: () => import(/* webpackChunkName: "views/apps/catalog" */ '@/views/app/AppCatalog'), component: () => import(/* webpackChunkName: "views/apps/catalog" */ '@/views/app/AppCatalog'),
meta: { meta: {
breadcrumb: [ args: { trad: 'catalog' },
{ name: 'app-list', trad: 'applications' }, breadcrumb: ['app-list', 'app-catalog']
{ name: 'app-catalog', trad: 'catalog' }
]
} }
}, },
{ {
@ -191,11 +177,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/install" */ '@/views/app/AppInstall'), component: () => import(/* webpackChunkName: "views/apps/install" */ '@/views/app/AppInstall'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { trad: 'install_name', param: 'id' },
{ name: 'app-list', trad: 'applications' }, breadcrumb: ['app-list', 'app-catalog', 'app-install']
{ name: 'app-catalog', trad: 'catalog' },
{ name: 'app-catalog', trad: 'install_name', param: 'id' }
]
} }
}, },
{ {
@ -204,11 +187,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/install" */ '@/views/app/AppInstall'), component: () => import(/* webpackChunkName: "views/apps/install" */ '@/views/app/AppInstall'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { trad: 'install_name', param: 'id' },
{ name: 'app-list', trad: 'applications' }, breadcrumb: ['app-list', 'app-catalog', 'app-install-custom']
{ name: 'app-catalog', trad: 'catalog' },
{ name: 'app-catalog', trad: 'install_name', param: 'id' }
]
} }
}, },
{ {
@ -217,10 +197,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/info" */ '@/views/app/AppInfo'), component: () => import(/* webpackChunkName: "views/apps/info" */ '@/views/app/AppInfo'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { param: 'id' },
{ name: 'app-list', trad: 'applications' }, breadcrumb: ['app-list', 'app-info']
{ name: 'app-info', param: 'id' }
]
} }
}, },
{ {
@ -229,11 +207,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/actions" */ '@/views/app/AppActions'), component: () => import(/* webpackChunkName: "views/apps/actions" */ '@/views/app/AppActions'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { trad: 'app_actions' },
{ name: 'app-list', trad: 'applications' }, breadcrumb: ['app-list', 'app-info', 'app-actions']
{ name: 'app-info', param: 'id' },
{ name: 'app-actions', trad: 'app_actions' }
]
} }
}, },
{ {
@ -242,11 +217,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/config" */ '@/views/app/AppConfigPanel'), component: () => import(/* webpackChunkName: "views/apps/config" */ '@/views/app/AppConfigPanel'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { trad: 'app_config_panel' },
{ name: 'app-list', trad: 'applications' }, breadcrumb: ['app-list', 'app-info', 'app-config-panel']
{ name: 'app-info', param: 'id' },
{ name: 'app-config-panel', trad: 'app_config_panel' }
]
} }
}, },
@ -258,9 +230,8 @@ const routes = [
path: '/update', path: '/update',
component: () => import(/* webpackChunkName: "views/update" */ '@/views/update/SystemUpdate'), component: () => import(/* webpackChunkName: "views/update" */ '@/views/update/SystemUpdate'),
meta: { meta: {
breadcrumb: [ args: { trad: 'system_update' },
{ name: 'update', trad: 'system_update' } breadcrumb: ['update']
]
} }
}, },
@ -272,9 +243,8 @@ const routes = [
path: '/services', path: '/services',
component: () => import(/* webpackChunkName: "views/service/list" */ '@/views/service/ServiceList'), component: () => import(/* webpackChunkName: "views/service/list" */ '@/views/service/ServiceList'),
meta: { meta: {
breadcrumb: [ args: { trad: 'services' },
{ name: 'service-list', trad: 'services' } breadcrumb: ['service-list']
]
} }
}, },
{ {
@ -283,10 +253,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/service/info" */ '@/views/service/ServiceInfo'), component: () => import(/* webpackChunkName: "views/service/info" */ '@/views/service/ServiceInfo'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { param: 'name' },
{ name: 'service-list', trad: 'services' }, breadcrumb: ['service-list', 'service-info']
{ name: 'service-info', param: 'name' }
]
} }
}, },
@ -298,9 +266,8 @@ const routes = [
path: '/tools', path: '/tools',
component: ToolList, component: ToolList,
meta: { meta: {
breadcrumb: [ args: { trad: 'tools' },
{ name: 'tool-list', trad: 'tools' } breadcrumb: ['tool-list']
]
} }
}, },
{ {
@ -308,10 +275,8 @@ const routes = [
path: '/tools/logs', path: '/tools/logs',
component: () => import(/* webpackChunkName: "views/tools/logs" */ '@/views/tool/ToolLogs'), component: () => import(/* webpackChunkName: "views/tools/logs" */ '@/views/tool/ToolLogs'),
meta: { meta: {
breadcrumb: [ args: { trad: 'logs' },
{ name: 'tool-list', trad: 'tools' }, breadcrumb: ['tool-list', 'tool-logs']
{ name: 'tool-logs', trad: 'logs' }
]
} }
}, },
{ {
@ -320,11 +285,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/tools/log" */ '@/views/tool/ToolLog'), component: () => import(/* webpackChunkName: "views/tools/log" */ '@/views/tool/ToolLog'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { param: 'name' },
{ name: 'tool-list', trad: 'tools' }, breadcrumb: ['tool-list', 'tool-logs', 'tool-log']
{ name: 'tool-logs', trad: 'logs' },
{ name: 'tool-log', param: 'name' }
]
} }
}, },
{ {
@ -332,10 +294,8 @@ const routes = [
path: '/tools/migrations', path: '/tools/migrations',
component: () => import(/* webpackChunkName: "views/tools/migrations" */ '@/views/tool/ToolMigrations'), component: () => import(/* webpackChunkName: "views/tools/migrations" */ '@/views/tool/ToolMigrations'),
meta: { meta: {
breadcrumb: [ args: { trad: 'migrations' },
{ name: 'tool-list', trad: 'tools' }, breadcrumb: ['tool-list', 'tool-migrations']
{ name: 'tool-migrations', trad: 'migrations' }
]
} }
}, },
{ {
@ -343,10 +303,8 @@ const routes = [
path: '/tools/firewall', path: '/tools/firewall',
component: () => import(/* webpackChunkName: "views/tools/firewall" */ '@/views/tool/ToolFirewall'), component: () => import(/* webpackChunkName: "views/tools/firewall" */ '@/views/tool/ToolFirewall'),
meta: { meta: {
breadcrumb: [ args: { trad: 'firewall' },
{ name: 'tool-list', trad: 'tools' }, breadcrumb: ['tool-list', 'tool-firewall']
{ name: 'tool-firewall', trad: 'firewall' }
]
} }
}, },
{ {
@ -354,10 +312,8 @@ const routes = [
path: '/tools/adminpw', path: '/tools/adminpw',
component: () => import(/* webpackChunkName: "views/tools/adminpw" */ '@/views/tool/ToolAdminpw'), component: () => import(/* webpackChunkName: "views/tools/adminpw" */ '@/views/tool/ToolAdminpw'),
meta: { meta: {
breadcrumb: [ args: { trad: 'tools_adminpw' },
{ name: 'tool-list', trad: 'tools' }, breadcrumb: ['tool-list', 'tool-adminpw']
{ name: 'tool-adminpw', trad: 'tools_adminpw' }
]
} }
}, },
{ {
@ -365,10 +321,8 @@ const routes = [
path: '/tools/webadmin', path: '/tools/webadmin',
component: () => import(/* webpackChunkName: "views/tools/webadmin" */ '@/views/tool/ToolWebadmin'), component: () => import(/* webpackChunkName: "views/tools/webadmin" */ '@/views/tool/ToolWebadmin'),
meta: { meta: {
breadcrumb: [ args: { trad: 'tools_webadmin_settings' },
{ name: 'tool-list', trad: 'tools' }, breadcrumb: ['tool-list', 'tool-webadmin']
{ name: 'tool-webadmin', trad: 'tools_webadmin_settings' }
]
} }
}, },
{ {
@ -376,10 +330,8 @@ const routes = [
path: '/tools/power', path: '/tools/power',
component: () => import(/* webpackChunkName: "views/tools/power" */ '@/views/tool/ToolPower'), component: () => import(/* webpackChunkName: "views/tools/power" */ '@/views/tool/ToolPower'),
meta: { meta: {
breadcrumb: [ args: { trad: 'tools_shutdown_reboot' },
{ name: 'tool-list', trad: 'tools' }, breadcrumb: ['tool-list', 'tool-power']
{ name: 'tool-power', trad: 'tools_shutdown_reboot' }
]
} }
}, },
@ -391,9 +343,8 @@ const routes = [
path: '/diagnosis', path: '/diagnosis',
component: () => import(/* webpackChunkName: "views/diagnosis" */ '@/views/diagnosis/Diagnosis'), component: () => import(/* webpackChunkName: "views/diagnosis" */ '@/views/diagnosis/Diagnosis'),
meta: { meta: {
breadcrumb: [ args: { trad: 'diagnosis' },
{ name: 'diagnosis', trad: 'diagnosis' } breadcrumb: ['diagnosis']
]
} }
}, },
@ -405,9 +356,8 @@ const routes = [
path: '/backup', path: '/backup',
component: () => import(/* webpackChunkName: "views/backup/backup" */ '@/views/backup/Backup'), component: () => import(/* webpackChunkName: "views/backup/backup" */ '@/views/backup/Backup'),
meta: { meta: {
breadcrumb: [ args: { trad: 'backup' },
{ name: 'backup', trad: 'backup' } breadcrumb: ['backup']
]
} }
}, },
{ {
@ -416,10 +366,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/backup/list" */ '@/views/backup/BackupList'), component: () => import(/* webpackChunkName: "views/backup/list" */ '@/views/backup/BackupList'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { param: 'id' },
{ name: 'backup', trad: 'backup' }, breadcrumb: ['backup', 'backup-list']
{ name: 'backup-list', param: 'id' }
]
} }
}, },
{ {
@ -428,11 +376,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/backup/info" */ '@/views/backup/BackupInfo'), component: () => import(/* webpackChunkName: "views/backup/info" */ '@/views/backup/BackupInfo'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { param: 'name' },
{ name: 'backup', trad: 'backup' }, breadcrumb: ['backup', 'backup-list', 'backup-info']
{ name: 'backup-list', param: 'id' },
{ name: 'backup-info', param: 'name' }
]
} }
}, },
{ {
@ -441,11 +386,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/backup/create" */ '@/views/backup/BackupCreate'), component: () => import(/* webpackChunkName: "views/backup/create" */ '@/views/backup/BackupCreate'),
props: true, props: true,
meta: { meta: {
breadcrumb: [ args: { trad: 'backup_create' },
{ name: 'backup', trad: 'backup' }, breadcrumb: ['backup', 'backup-list', 'backup-create']
{ name: 'backup-list', param: 'id' },
{ name: 'backup-create', trad: 'backup_create' }
]
} }
} }
] ]