ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new edit page for room entries 

Also use slug instead of id to identify room entries
This commit is contained in:
Ramon Wenger 2022-06-27 11:29:01 +02:00
parent cb84a1576c
commit a81bb0e1e8
10 changed files with 140 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/rooms/RoomEntry.vue
View File

@ -34,8 +34,8 @@
<room-entry-actions
data-cy="room-entry-actions"
class="room-entry__more"
:slug="slug"
v-if="myEntry"
:id="id"
/>
</div>
</template>

24
client/src/components/rooms/RoomEntryActions.vue
View File

@ -3,13 +3,13 @@
<popover-link
icon="trash-icon"
text="Eintrag löschen"
@link-action="deleteRoomEntry(id)"
@link-action="deleteRoomEntry(slug)"
/>
<popover-link
icon="pen-icon"
data-cy="edit-room-entry"
text="Eintrag bearbeiten"
@link-action="editRoomEntry(id)"
@link-action="editRoomEntry(slug)"
/>
</more-actions>
</template>
@ -19,10 +19,11 @@
import MoreActions from '@/components/rooms/MoreActions';
import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry';
import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery';
import {UPDATE_ROOM_ENTRY_PAGE} from '@/router/room.names';
export default {
props: {
id: {
slug: {
type: String,
default: '',
},
@ -40,12 +41,12 @@
},
methods: {
deleteRoomEntry(id) {
deleteRoomEntry(slug) {
this.$apollo.mutate({
mutation: DELETE_ROOM_ENTRY_MUTATION,
variables: {
input: {
id,
slug,
},
},
update(store, {data: {deleteRoomEntry: {success, roomSlug}}}) {
@ -54,15 +55,22 @@
const variables = {slug: roomSlug};
const data = store.readQuery({query, variables});
if (data) {
data.room.roomEntries.edges.splice(data.room.roomEntries.edges.findIndex(edge => edge.node.id === id), 1);
// todo: make immutable
data.room.roomEntries.edges.splice(data.room.roomEntries.edges.findIndex(edge => edge.node.slug === slug), 1);
store.writeQuery({query, data, variables});
}
}
},
});
},
editRoomEntry(id) {
this.$store.dispatch('editRoomEntry', id);
editRoomEntry(slug) {
this.$router.push({
name: UPDATE_ROOM_ENTRY_PAGE,
params: {
slug: this.$route.params.slug,
entrySlug: slug
}
});
},
},
};

92
client/src/components/rooms/room-entries/NewRoomEntryWizard.vue
View File

@ -1,92 +0,0 @@
<template>
<contents-form
:content-block="entry"
:show-task-selection="false"
:disable-save="saving"
data-cy="add-room-entry-modal"
block-type="RoomEntry"
@save="saveEntry"
@hide="hideModal"
/>
</template>
<script>
// todo: delete this
import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
import ContentsForm from '@/components/content-block-form/ContentsForm';
export default {
components: {
ContentsForm
},
data() {
return {
entry: {
title: '',
contents: []
},
saving: false
};
},
computed: {
room() {
return this.$store.state.parentRoom;
}
},
methods: {
saveEntry(entry) {
this.saving = true;
this.$apollo.mutate({
mutation: NEW_ROOM_ENTRY_MUTATION,
variables: {
input: {
roomEntry: Object.assign({}, entry, {
room: this.room.id
})
}
},
update: (store, {data: {addRoomEntry: {roomEntry}}}) => {
try {
const query = ROOM_ENTRIES_QUERY;
const variables = {slug: this.room.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.saving = false;
this.hideModal();
});
},
hideModal() {
this.$store.dispatch('hideModal');
},
}
};
</script>

110
client/src/pages/rooms/editRoomEntry.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<content-block-form
:content-block="roomEntry"
:features="features"
v-if="roomEntry.id"
@save="save"
@back="goBack"
/>
</template>
<script>
import Vue from 'vue';
import ROOM_ENTRY_QUERY from 'gql/queries/roomEntryQuery.gql';
import ROOM_ENTRY_FRAGMENT from 'gql/fragments/roomEntryParts.gql';
import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.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 Vue.extend( {
props: {
slug: {
type: String,
required: true
},
entrySlug: {
type: String,
required: true
}
},
components: {
ContentBlockForm,
},
data() {
return {
features: ROOMS_FEATURE_SET,
roomEntry: {
title: '',
contents: [],
},
};
},
apollo: {
roomEntry: {
query: ROOM_ENTRY_QUERY,
variables() {
return {
slug: this.entrySlug
};
}
}
},
methods: {
goBack() {
this.$router.push({
name: ROOM_PAGE,
params: {
slug: this.slug
}
});
},
save({title, contents}) {
const entry = {
slug: this.roomEntry.slug,
title,
contents,
};
this.$apollo.mutate({
mutation: UPDATE_ROOM_ENTRY_MUTATION,
variables: {
input: {
roomEntry: entry,
}
},
update: (store, {data: {updateRoomEntry: {roomEntry}}}) => {
try {
const fragment = ROOM_ENTRY_FRAGMENT;
const id = store.identify(roomEntry);
const cachedEntry = store.readQuery({fragment, id});
const data = Object.assign({}, cachedEntry, roomEntry);
store.writeFragment({
id,
fragment,
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>

2
client/src/pages/rooms/newRoomEntry.vue
View File

@ -52,7 +52,7 @@
const entry = {
title,
contents,
slug: this.slug
roomSlug: this.slug
};
this.$apollo.mutate({
mutation: NEW_ROOM_ENTRY_MUTATION,

1
client/src/router/room.names.js
View File

@ -2,3 +2,4 @@ export const NEW_ROOM_PAGE = 'new-room';
export const ROOMS_PAGE = 'rooms';
export const ROOM_PAGE = 'room';
export const ADD_ROOM_ENTRY_PAGE = 'add-room-entry';
export const UPDATE_ROOM_ENTRY_PAGE = 'update-room-entry';

4
client/src/router/room.routes.js
View File

@ -1,10 +1,11 @@
import {NEW_ROOM_PAGE, ROOMS_PAGE, ADD_ROOM_ENTRY_PAGE, ROOM_PAGE} from '@/router/room.names';
import {NEW_ROOM_PAGE, ROOMS_PAGE, ADD_ROOM_ENTRY_PAGE, ROOM_PAGE, UPDATE_ROOM_ENTRY_PAGE} from '@/router/room.names';
const rooms = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/rooms');
const newRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/newRoom');
const editRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/editRoom');
const room = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/room');
const newRoomEntry = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/newRoomEntry');
const editRoomEntry = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/editRoomEntry');
const moduleRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/module/moduleRoom');
export default [
@ -13,6 +14,7 @@ export default [
{path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
{path: '/room/:slug', name: ROOM_PAGE, component: room, props: true},
{path: '/room/:slug/add', name: ADD_ROOM_ENTRY_PAGE, component: newRoomEntry, props: true},
{path: '/room/:slug/edit/:entrySlug', name: UPDATE_ROOM_ENTRY_PAGE, component: editRoomEntry, props: true},
{
path: '/module-room/:slug',
name: 'moduleRoom',

4
server/rooms/inputs.py
View File

@ -26,8 +26,8 @@ class RoomEntryArgument(InputObjectType):
class AddRoomEntryArgument(RoomEntryArgument):
slug = graphene.String(required=True)
room_slug = graphene.String(required=True)
class UpdateRoomEntryArgument(RoomEntryArgument):
id = graphene.ID(required=True)
slug = graphene.String(required=True)

10
server/rooms/mutations.py
View File

@ -86,13 +86,13 @@ class MutateRoomEntry(relay.ClientIDMutation):
def mutate_and_get_payload(cls, root, info, **kwargs):
room_entry_data = kwargs.get('room_entry')
room = None
slug = room_entry_data.get('slug')
room_slug = room_entry_data.get('room_slug')
if slug is not None:
room = Room.objects.get(slug=slug)
if room_slug is not None:
room = Room.objects.get(slug=room_slug)
room_entry_data['room'] = room.id
if room_entry_data.get('id') is not None:
if room_entry_data.get('slug') is not None:
serializer = cls.update_room_entry(info, room_entry_data)
else:
serializer = cls.add_room_entry(info, room_entry_data, room)
@ -106,7 +106,7 @@ class MutateRoomEntry(relay.ClientIDMutation):
@classmethod
def update_room_entry(cls, info, room_entry_data):
instance = get_object(RoomEntry, room_entry_data.get('id'))
instance = RoomEntry.objects.get(slug=room_entry_data.get('slug'))
if not instance.room.school_class.is_user_in_schoolclass(info.context.user):
raise Exception('You are in the wrong class')

2
server/schema.graphql
View File

@ -118,7 +118,7 @@ input AddRoomArgument {
input AddRoomEntryArgument {
title: String!
contents: [ContentElementInput]
slug: String!
roomSlug: String!
}
input AddRoomEntryInput {