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

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,

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>

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,7 +46,10 @@
}, },
methods: { methods: {
deleteRoomEntry(slug) { deleteRoomEntry(slug, toggle) {
toggle();
this.$modal.open('confirm')
.then(() => {
this.$apollo.mutate({ this.$apollo.mutate({
mutation: DELETE_ROOM_ENTRY_MUTATION, mutation: DELETE_ROOM_ENTRY_MUTATION,
variables: { variables: {
@ -63,23 +69,26 @@
room: { room: {
...room, ...room,
roomEntries: { roomEntries: {
edges 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,
} },
}); });
}, },
}, },