105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<template>
|
|
<content-block-form :content-block="roomEntry" :features="features" @save="save" @back="goBack" />
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from 'vue';
|
|
|
|
import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
|
|
import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
|
|
|
|
import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
|
|
import { ROOMS_FEATURE_SET } from '@/consts/features.consts';
|
|
import { ROOM_PAGE } from '@/router/room.names';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
slug: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
components: {
|
|
ContentBlockForm,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
features: ROOMS_FEATURE_SET,
|
|
roomEntry: {
|
|
title: '',
|
|
contents: [],
|
|
},
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
goBack() {
|
|
this.$router.push({
|
|
name: ROOM_PAGE,
|
|
params: {
|
|
slug: this.slug,
|
|
},
|
|
});
|
|
},
|
|
save({ title, contents }) {
|
|
const entry = {
|
|
title,
|
|
contents,
|
|
roomSlug: this.slug,
|
|
};
|
|
this.$apollo
|
|
.mutate({
|
|
mutation: NEW_ROOM_ENTRY_MUTATION,
|
|
variables: {
|
|
input: {
|
|
roomEntry: entry,
|
|
},
|
|
},
|
|
update: (
|
|
store,
|
|
{
|
|
data: {
|
|
addRoomEntry: { roomEntry },
|
|
},
|
|
}
|
|
) => {
|
|
try {
|
|
const query = ROOM_ENTRIES_QUERY;
|
|
const variables = { slug: this.slug };
|
|
const { room } = store.readQuery({ query, variables });
|
|
if (room && room.roomEntries) {
|
|
const newEdge = {
|
|
node: roomEntry,
|
|
__typename: 'RoomEntryNodeEdge',
|
|
};
|
|
const edges = [newEdge, ...room.roomEntries.edges];
|
|
const data = {
|
|
room: {
|
|
...room,
|
|
roomEntries: {
|
|
...room.roomEntries,
|
|
edges,
|
|
},
|
|
},
|
|
};
|
|
store.writeQuery({ query, variables, data });
|
|
}
|
|
} catch (e) {
|
|
// Query did not exist in the cache, and apollo throws a generic Error. Do nothing
|
|
}
|
|
},
|
|
})
|
|
.then(() => {
|
|
this.goBack();
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
</style>
|