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

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

@ -1,16 +1,15 @@
<template>
<b-breadcrumb v-if="breadcrumb && breadcrumb.length">
<b-breadcrumb v-if="routesList">
<b-breadcrumb-item to="/">
<span class="sr-only">{{ $t('home') }}</span>
<icon iname="home" />
</b-breadcrumb-item>
<b-breadcrumb-item
v-for="(route, index) in breadcrumb" :key="index"
:to="{name: route.name}"
:active="index === lastIndex"
v-for="{ name, text } in breadcrumb" :key="name"
:to="{ name }" :active="name === $route.name"
>
{{ route.text }}
{{ text }}
</b-breadcrumb-item>
</b-breadcrumb>
</template>
@ -20,29 +19,36 @@ export default {
name: 'Breadcrumb',
computed: {
params: function () {
return this.$route.params
routesList () {
const routesList = this.$route.meta.breadcrumb
return routesList && routesList.length ? routesList : null
},
breadcrumb: function () {
if (!this.$route.meta.breadcrumb) return null
return this.$route.meta.breadcrumb.map(({ name, trad, param }) => {
breadcrumb () {
if (!this.routesList) return
// 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 = ''
// if a traduction key string has been given and we also need to pass
// the route param as a variable.
if (trad && param) {
text = this.$i18n.t(trad, { [param]: this.params[param] })
text = this.$i18n.t(trad, { [param]: currentParams[param] })
} else if (trad) {
text = this.$i18n.t(trad)
} else {
text = this.params[param]
text = currentParams[param]
}
return { name, text }
})
},
}
},
lastIndex: function () {
return this.breadcrumb.length - 1
methods: {
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 Login from '@/views/Login'
import ToolList from '@/views/tool/ToolList'
@ -26,7 +31,7 @@ const routes = [
path: '/postinstall',
component: () => import(/* webpackChunkName: "views/post-install" */ '@/views/PostInstall'),
// Leave the breadcrumb
meta: { noAuth: true }
meta: { noAuth: true, breadcrumb: [] }
},
/* ───────╮
@ -36,17 +41,18 @@ const routes = [
name: 'user-list',
path: '/users',
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',
path: '/users/create',
component: () => import(/* webpackChunkName: "views/user/create" */ '@/views/user/UserCreate'),
meta: {
breadcrumb: [
{ name: 'user-list', trad: 'users' },
{ name: 'user-create', trad: 'users_new' }
]
args: { trad: 'users_new' },
breadcrumb: ['user-list', 'user-create']
}
},
{
@ -55,10 +61,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/user/info" */ '@/views/user/UserInfo'),
props: true,
meta: {
breadcrumb: [
{ name: 'user-list', trad: 'users' },
{ name: 'user-info', param: 'name' }
]
args: { param: 'name' },
breadcrumb: ['user-list', 'user-info']
}
},
{
@ -67,11 +71,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/user/edit" */ '@/views/user/UserEdit'),
props: true,
meta: {
breadcrumb: [
{ name: 'user-list', trad: 'users' },
{ name: 'user-info', param: 'name' },
{ name: 'user-edit', param: 'name', trad: 'user_username_edit' }
]
args: { param: 'name', trad: 'user_username_edit' },
breadcrumb: ['user-list', 'user-info', 'user-edit']
}
},
@ -83,10 +84,8 @@ const routes = [
path: '/groups',
component: () => import(/* webpackChunkName: "views/group/list" */ '@/views/group/GroupList'),
meta: {
breadcrumb: [
{ name: 'user-list', trad: 'users' },
{ name: 'group-list', trad: 'groups_and_permissions' }
]
args: { trad: 'groups_and_permissions' },
breadcrumb: ['user-list', 'group-list']
}
},
{
@ -94,11 +93,8 @@ const routes = [
path: '/groups/create',
component: () => import(/* webpackChunkName: "views/group/create" */ '@/views/group/GroupCreate'),
meta: {
breadcrumb: [
{ name: 'user-list', trad: 'users' },
{ name: 'group-list', trad: 'groups_and_permissions' },
{ name: 'group-create', trad: 'group_new' }
]
args: { trad: 'group_new' },
breadcrumb: ['user-list', 'group-list', 'group-create']
}
},
@ -110,9 +106,8 @@ const routes = [
path: '/domains',
component: () => import(/* webpackChunkName: "views/domain/list" */ '@/views/domain/DomainList'),
meta: {
breadcrumb: [
{ name: 'domain-list', trad: 'domains' }
]
args: { trad: 'domains' },
breadcrumb: ['domain-list']
}
},
{
@ -120,10 +115,8 @@ const routes = [
path: '/domains/add',
component: () => import(/* webpackChunkName: "views/domain/add" */ '@/views/domain/DomainAdd'),
meta: {
breadcrumb: [
{ name: 'domain-list', trad: 'domains' },
{ name: 'domain-add', trad: 'domain_add' }
]
args: { trad: 'domain_add' },
breadcrumb: ['domain-list', 'domain-add']
}
},
{
@ -132,10 +125,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/domain/info" */ '@/views/domain/DomainInfo'),
props: true,
meta: {
breadcrumb: [
{ name: 'domain-list', trad: 'domains' },
{ name: 'domain-info', param: 'name' }
]
args: { param: 'name' },
breadcrumb: ['domain-list', 'domain-info']
}
},
{
@ -144,11 +135,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/domain/dns" */ '@/views/domain/DomainDns'),
props: true,
meta: {
breadcrumb: [
{ name: 'domain-list', trad: 'domains' },
{ name: 'domain-info', param: 'name' },
{ name: 'domain-dns', trad: 'dns' }
]
args: { trad: 'dns' },
breadcrumb: ['domain-list', 'domain-info', 'domain-dns']
}
},
{
@ -157,11 +145,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/domain/cert" */ '@/views/domain/DomainCert'),
props: true,
meta: {
breadcrumb: [
{ name: 'domain-list', trad: 'domains' },
{ name: 'domain-info', param: 'name' },
{ name: 'domain-cert', trad: 'certificate' }
]
args: { trad: 'certificate' },
breadcrumb: ['domain-list', 'domain-info', 'domain-cert']
}
},
@ -172,17 +157,18 @@ const routes = [
name: 'app-list',
path: '/apps',
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',
path: '/apps/catalog',
component: () => import(/* webpackChunkName: "views/apps/catalog" */ '@/views/app/AppCatalog'),
meta: {
breadcrumb: [
{ name: 'app-list', trad: 'applications' },
{ name: 'app-catalog', trad: 'catalog' }
]
args: { trad: 'catalog' },
breadcrumb: ['app-list', 'app-catalog']
}
},
{
@ -191,11 +177,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/install" */ '@/views/app/AppInstall'),
props: true,
meta: {
breadcrumb: [
{ name: 'app-list', trad: 'applications' },
{ name: 'app-catalog', trad: 'catalog' },
{ name: 'app-catalog', trad: 'install_name', param: 'id' }
]
args: { trad: 'install_name', param: 'id' },
breadcrumb: ['app-list', 'app-catalog', 'app-install']
}
},
{
@ -204,11 +187,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/install" */ '@/views/app/AppInstall'),
props: true,
meta: {
breadcrumb: [
{ name: 'app-list', trad: 'applications' },
{ name: 'app-catalog', trad: 'catalog' },
{ name: 'app-catalog', trad: 'install_name', param: 'id' }
]
args: { trad: 'install_name', param: 'id' },
breadcrumb: ['app-list', 'app-catalog', 'app-install-custom']
}
},
{
@ -217,10 +197,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/info" */ '@/views/app/AppInfo'),
props: true,
meta: {
breadcrumb: [
{ name: 'app-list', trad: 'applications' },
{ name: 'app-info', param: 'id' }
]
args: { param: 'id' },
breadcrumb: ['app-list', 'app-info']
}
},
{
@ -229,11 +207,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/actions" */ '@/views/app/AppActions'),
props: true,
meta: {
breadcrumb: [
{ name: 'app-list', trad: 'applications' },
{ name: 'app-info', param: 'id' },
{ name: 'app-actions', trad: 'app_actions' }
]
args: { trad: 'app_actions' },
breadcrumb: ['app-list', 'app-info', 'app-actions']
}
},
{
@ -242,11 +217,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/apps/config" */ '@/views/app/AppConfigPanel'),
props: true,
meta: {
breadcrumb: [
{ name: 'app-list', trad: 'applications' },
{ name: 'app-info', param: 'id' },
{ name: 'app-config-panel', trad: 'app_config_panel' }
]
args: { trad: 'app_config_panel' },
breadcrumb: ['app-list', 'app-info', 'app-config-panel']
}
},
@ -258,9 +230,8 @@ const routes = [
path: '/update',
component: () => import(/* webpackChunkName: "views/update" */ '@/views/update/SystemUpdate'),
meta: {
breadcrumb: [
{ name: 'update', trad: 'system_update' }
]
args: { trad: 'system_update' },
breadcrumb: ['update']
}
},
@ -272,9 +243,8 @@ const routes = [
path: '/services',
component: () => import(/* webpackChunkName: "views/service/list" */ '@/views/service/ServiceList'),
meta: {
breadcrumb: [
{ name: 'service-list', trad: 'services' }
]
args: { trad: 'services' },
breadcrumb: ['service-list']
}
},
{
@ -283,10 +253,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/service/info" */ '@/views/service/ServiceInfo'),
props: true,
meta: {
breadcrumb: [
{ name: 'service-list', trad: 'services' },
{ name: 'service-info', param: 'name' }
]
args: { param: 'name' },
breadcrumb: ['service-list', 'service-info']
}
},
@ -298,9 +266,8 @@ const routes = [
path: '/tools',
component: ToolList,
meta: {
breadcrumb: [
{ name: 'tool-list', trad: 'tools' }
]
args: { trad: 'tools' },
breadcrumb: ['tool-list']
}
},
{
@ -308,10 +275,8 @@ const routes = [
path: '/tools/logs',
component: () => import(/* webpackChunkName: "views/tools/logs" */ '@/views/tool/ToolLogs'),
meta: {
breadcrumb: [
{ name: 'tool-list', trad: 'tools' },
{ name: 'tool-logs', trad: 'logs' }
]
args: { trad: 'logs' },
breadcrumb: ['tool-list', 'tool-logs']
}
},
{
@ -320,11 +285,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/tools/log" */ '@/views/tool/ToolLog'),
props: true,
meta: {
breadcrumb: [
{ name: 'tool-list', trad: 'tools' },
{ name: 'tool-logs', trad: 'logs' },
{ name: 'tool-log', param: 'name' }
]
args: { param: 'name' },
breadcrumb: ['tool-list', 'tool-logs', 'tool-log']
}
},
{
@ -332,10 +294,8 @@ const routes = [
path: '/tools/migrations',
component: () => import(/* webpackChunkName: "views/tools/migrations" */ '@/views/tool/ToolMigrations'),
meta: {
breadcrumb: [
{ name: 'tool-list', trad: 'tools' },
{ name: 'tool-migrations', trad: 'migrations' }
]
args: { trad: 'migrations' },
breadcrumb: ['tool-list', 'tool-migrations']
}
},
{
@ -343,10 +303,8 @@ const routes = [
path: '/tools/firewall',
component: () => import(/* webpackChunkName: "views/tools/firewall" */ '@/views/tool/ToolFirewall'),
meta: {
breadcrumb: [
{ name: 'tool-list', trad: 'tools' },
{ name: 'tool-firewall', trad: 'firewall' }
]
args: { trad: 'firewall' },
breadcrumb: ['tool-list', 'tool-firewall']
}
},
{
@ -354,10 +312,8 @@ const routes = [
path: '/tools/adminpw',
component: () => import(/* webpackChunkName: "views/tools/adminpw" */ '@/views/tool/ToolAdminpw'),
meta: {
breadcrumb: [
{ name: 'tool-list', trad: 'tools' },
{ name: 'tool-adminpw', trad: 'tools_adminpw' }
]
args: { trad: 'tools_adminpw' },
breadcrumb: ['tool-list', 'tool-adminpw']
}
},
{
@ -365,10 +321,8 @@ const routes = [
path: '/tools/webadmin',
component: () => import(/* webpackChunkName: "views/tools/webadmin" */ '@/views/tool/ToolWebadmin'),
meta: {
breadcrumb: [
{ name: 'tool-list', trad: 'tools' },
{ name: 'tool-webadmin', trad: 'tools_webadmin_settings' }
]
args: { trad: 'tools_webadmin_settings' },
breadcrumb: ['tool-list', 'tool-webadmin']
}
},
{
@ -376,10 +330,8 @@ const routes = [
path: '/tools/power',
component: () => import(/* webpackChunkName: "views/tools/power" */ '@/views/tool/ToolPower'),
meta: {
breadcrumb: [
{ name: 'tool-list', trad: 'tools' },
{ name: 'tool-power', trad: 'tools_shutdown_reboot' }
]
args: { trad: 'tools_shutdown_reboot' },
breadcrumb: ['tool-list', 'tool-power']
}
},
@ -391,9 +343,8 @@ const routes = [
path: '/diagnosis',
component: () => import(/* webpackChunkName: "views/diagnosis" */ '@/views/diagnosis/Diagnosis'),
meta: {
breadcrumb: [
{ name: 'diagnosis', trad: 'diagnosis' }
]
args: { trad: 'diagnosis' },
breadcrumb: ['diagnosis']
}
},
@ -405,9 +356,8 @@ const routes = [
path: '/backup',
component: () => import(/* webpackChunkName: "views/backup/backup" */ '@/views/backup/Backup'),
meta: {
breadcrumb: [
{ name: 'backup', trad: 'backup' }
]
args: { trad: 'backup' },
breadcrumb: ['backup']
}
},
{
@ -416,10 +366,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/backup/list" */ '@/views/backup/BackupList'),
props: true,
meta: {
breadcrumb: [
{ name: 'backup', trad: 'backup' },
{ name: 'backup-list', param: 'id' }
]
args: { param: 'id' },
breadcrumb: ['backup', 'backup-list']
}
},
{
@ -428,11 +376,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/backup/info" */ '@/views/backup/BackupInfo'),
props: true,
meta: {
breadcrumb: [
{ name: 'backup', trad: 'backup' },
{ name: 'backup-list', param: 'id' },
{ name: 'backup-info', param: 'name' }
]
args: { param: 'name' },
breadcrumb: ['backup', 'backup-list', 'backup-info']
}
},
{
@ -441,11 +386,8 @@ const routes = [
component: () => import(/* webpackChunkName: "views/backup/create" */ '@/views/backup/BackupCreate'),
props: true,
meta: {
breadcrumb: [
{ name: 'backup', trad: 'backup' },
{ name: 'backup-list', param: 'id' },
{ name: 'backup-create', trad: 'backup_create' }
]
args: { trad: 'backup_create' },
breadcrumb: ['backup', 'backup-list', 'backup-create']
}
}
]