dashboard/components/ResourceList/Masthead.vue

114 lines
2.4 KiB
Vue

<script>
import { mapGetters } from 'vuex';
import Favorite from '@/components/nav/Favorite';
import TypeDescription from '@/components/TypeDescription';
import { clone, get } from '@/utils/object';
export default {
components: {
Favorite,
TypeDescription,
},
props: {
resource: {
type: String,
required: true,
},
schema: {
type: Object,
default: null,
},
typeDisplay: {
type: String,
default: '',
},
isCreatable: {
type: Boolean,
default: false,
},
isYamlCreatable: {
type: Boolean,
default: false,
},
createLocation: {
type: Object,
default: null,
},
yamlCreateLocation: {
type: Object,
default: null,
},
},
computed: {
get,
...mapGetters(['isExplorer']),
resourceName() {
if (this.schema) {
return this.$store.getters['type-map/labelFor'](this.schema);
}
return this.resource;
},
extraAction() {
const opt = this.$store.getters[`type-map/optionsFor`](this.resource).extraListAction;
if ( opt ) {
const to = opt.to ? opt.to : clone(this.createLocation);
if ( opt.query ) {
to.query = Object.assign({}, to.query || {}, opt.query);
}
return {
to,
class: opt.classNames || 'btn role-primary',
label: (opt.labelKey ? this.t(opt.labelKey) : opt.label || 'Action?' ),
};
}
return null;
}
},
};
</script>
<template>
<header>
<TypeDescription :resource="resource" />
<div class="title">
<h1 class="m-0">
{{ typeDisplay }} <Favorite v-if="isExplorer" :resource="resource" />
</h1>
</div>
<div class="actions-container">
<div class="actions">
<n-link
v-if="extraAction"
:to="extraAction.to"
:class="extraAction.class"
>
{{ extraAction.label }}
</n-link>
<n-link
v-if="isCreatable"
:to="createLocation"
class="btn role-primary"
>
{{ t("resourceList.head.create") }}
</n-link>
<n-link
v-else-if="isYamlCreatable"
:to="yamlCreateLocation"
class="btn role-primary"
>
{{ t("resourceList.head.createFromYaml") }}
</n-link>
</div>
</div>
</header>
</template>