dashboard/components/ResourceList/Masthead.vue

123 lines
2.9 KiB
Vue

<script>
import { mapGetters } from 'vuex';
import Favorite from '@/components/nav/Favorite';
import ButtonDropdown from '@/components/ButtonDropdown';
export default {
components: {
ButtonDropdown,
Favorite,
},
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: {
...mapGetters(['isExplorer']),
resourceName() {
if ( this.schema ) {
return this.$store.getters['type-map/labelFor'](this.schema);
}
return this.resource;
},
},
};
</script>
<template>
<header>
<h1>
{{ typeDisplay }} <Favorite v-if="isExplorer" :resource="resource" />
</h1>
<div class="actions">
<ButtonDropdown
v-if="isCreatable || isYamlCreatable"
>
<template #button-content="slotProps">
<nuxt-link
v-if="isCreatable"
:to="createLocation"
class="btn bg-transparent"
:class="slotProps.buttonSize"
>
{{ t("resourceList.head.create") }}
</nuxt-link>
<nuxt-link
v-else-if="!isCreatable && isYamlCreatable"
:to="yamlCreateLocation"
class="btn bg-transparent"
:class="slotProps.buttonSize"
>
{{ t("resourceList.head.createFromYaml") }}
</nuxt-link>
<a
v-else
href="#"
class="btn bg-transparent"
:class="slotProps.buttonSize"
disabled="true"
@click.prevent.self
>
{{ t("resourceList.head.create") }}
</a>
</template>
<template
v-if="isCreatable && isYamlCreatable"
slot="popover-content"
>
<ul class="list-unstyled menu" style="margin: -1px;">
<li class="hand">
<nuxt-link
v-if="isCreatable"
:to="createLocation"
>
{{ t("resourceList.head.createResource", { resourceName }) }}
</nuxt-link>
</li>
<li class="divider">
<div class="divider-inner"></div>
</li>
<li class="hand">
<nuxt-link
v-if="isYamlCreatable"
:to="yamlCreateLocation"
>
{{ t("resourceList.head.createFromYaml") }}
</nuxt-link>
</li>
</ul>
</template>
</ButtonDropdown>
</div>
</header>
</template>