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

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

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

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

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