103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
<template>
|
|
<div class="add-content">
|
|
<a
|
|
class="add-content__button"
|
|
@click="addContent"
|
|
>
|
|
<add-pointer class="add-content__icon" />
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE } from '@/router/module.names';
|
|
import { defineAsyncComponent } from 'vue';
|
|
|
|
const AddPointer = defineAsyncComponent(() => import('@/components/icons/AddPointer.vue'));
|
|
|
|
export default {
|
|
props: {
|
|
where: {
|
|
type: Object,
|
|
validator(prop) {
|
|
return (
|
|
Object.prototype.hasOwnProperty.call(prop, 'after') || Object.prototype.hasOwnProperty.call(prop, 'parent')
|
|
);
|
|
},
|
|
},
|
|
},
|
|
|
|
components: {
|
|
AddPointer,
|
|
},
|
|
|
|
computed: {
|
|
parent() {
|
|
return this.where.parent;
|
|
},
|
|
after() {
|
|
return this.where.after;
|
|
},
|
|
isObjectiveGroup() {
|
|
return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
|
|
},
|
|
slug() {
|
|
return this.$route.params.slug;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
addContent() {
|
|
if (this.isObjectiveGroup) {
|
|
this.$modal.open('new-objective-wizard', { parent: this.parent.id });
|
|
} else {
|
|
let route;
|
|
if (this.after && this.after.id) {
|
|
route = {
|
|
name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
|
|
params: {
|
|
after: this.after.id,
|
|
slug: this.slug,
|
|
},
|
|
};
|
|
} else {
|
|
route = {
|
|
name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
|
|
params: {
|
|
parent: this.parent.id,
|
|
},
|
|
};
|
|
}
|
|
this.$router.push(route);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.add-content {
|
|
display: none;
|
|
position: relative;
|
|
@include desktop {
|
|
display: flex;
|
|
}
|
|
z-index: 1;
|
|
|
|
justify-content: flex-end;
|
|
|
|
&__button {
|
|
margin-right: -85px;
|
|
cursor: pointer;
|
|
display: inline-grid;
|
|
}
|
|
|
|
&__icon {
|
|
width: 40px;
|
|
fill: $color-silver-dark;
|
|
}
|
|
}
|
|
</style>
|