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

Add confirmation modal to room entry delete action 

Resolves MS-523
This commit is contained in:
Ramon Wenger 2022-06-29 13:46:59 +02:00
parent a3bcd6f314
commit 1ca13dc4a5
3 changed files with 49 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/cypress/integration/frontend/rooms/room-page.spec.js
View File

@ -340,7 +340,7 @@ describe('The Room Page (student)', () => {
cy.location('pathname').should('include', entrySlug);
});
it('Deletes room entry', () => {
it('deletes room entry', () => {
const DeleteRoomEntry = {
deleteRoomEntry: {
success: true,
@ -363,11 +363,13 @@ describe('The Room Page (student)', () => {
cy.getByDataCy('room-entry').should('have.length', 1);
cy.getByDataCy('room-entry-actions').click();
cy.getByDataCy('delete-room-entry').click();
cy.getByDataCy('delete-room-entry').should('not.exist');
cy.getByDataCy('modal-save-button').click();
cy.getByDataCy('room-entry').should('have.length', 0);
});
it('Shows room entries with comment count', () => {
it('shows room entries with comment count', () => {
const operations = {
MeQuery,
RoomEntriesQuery,

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

@ -13,7 +13,7 @@
v-if="showMenu"
@hide-me="showMenu = false"
>
<slot />
<slot :toggle="toggleMenu" />
</widget-popover>
</div>
</template>

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

@ -1,10 +1,13 @@
<template>
<more-actions data-cy="room-entry-actions">
<more-actions
data-cy="room-entry-actions"
v-slot="{toggle}"
>
<popover-link
icon="trash-icon"
text="Eintrag löschen"
data-cy="delete-room-entry"
@link-action="deleteRoomEntry(slug)"
@link-action="deleteRoomEntry(slug, toggle)"
/>
<popover-link
icon="pen-icon"
@ -43,43 +46,49 @@
},
methods: {
deleteRoomEntry(slug) {
this.$apollo.mutate({
mutation: DELETE_ROOM_ENTRY_MUTATION,
variables: {
input: {
slug,
},
},
update(store, {data: {deleteRoomEntry: {success, roomSlug}}}) {
if (success) {
const query = ROOM_ENTRIES_QUERY;
const variables = {slug: roomSlug};
const {room} = store.readQuery({query, variables});
if (room) {
const index = room.roomEntries.edges.findIndex(edge => edge.node.slug === slug);
const edges = removeAtIndex(room.roomEntries.edges, index);
const data = {
room: {
...room,
roomEntries: {
edges
}
deleteRoomEntry(slug, toggle) {
toggle();
this.$modal.open('confirm')
.then(() => {
this.$apollo.mutate({
mutation: DELETE_ROOM_ENTRY_MUTATION,
variables: {
input: {
slug,
},
},
update(store, {data: {deleteRoomEntry: {success, roomSlug}}}) {
if (success) {
const query = ROOM_ENTRIES_QUERY;
const variables = {slug: roomSlug};
const {room} = store.readQuery({query, variables});
if (room) {
const index = room.roomEntries.edges.findIndex(edge => edge.node.slug === slug);
const edges = removeAtIndex(room.roomEntries.edges, index);
const data = {
room: {
...room,
roomEntries: {
edges,
},
},
};
store.writeQuery({query, data, variables});
}
};
store.writeQuery({query, data, variables});
}
}
},
});
}
},
});
})
.catch(() => {
});
},
editRoomEntry(slug) {
this.$router.push({
name: UPDATE_ROOM_ENTRY_PAGE,
params: {
slug: this.$route.params.slug,
entrySlug: slug
}
name: UPDATE_ROOM_ENTRY_PAGE,
params: {
slug: this.$route.params.slug,
entrySlug: slug,
},
});
},
},