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

Add components and mutations for snapshot updating and deleting 

Also modify the tests for MS-373 and MS-375
This commit is contained in:
Ramon Wenger 2022-06-14 20:27:20 +02:00
parent 9f86b3c685
commit 5c05ed2a86
8 changed files with 200 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
client/cypress/integration/frontend/modules/snapshots.spec.js
View File

@ -1,5 +1,35 @@
import module from '../../../fixtures/module.minimal';
import {getMinimalMe} from '../../../support/helpers';
import {hasOperationName} from '../../../support/graphql';
const mockUpdateSnapshot = (title) => {
cy.intercept('POST', '/api/graphql', (req) => {
if (hasOperationName(req, 'UpdateSnapshot')) {
let snapshot;
if (title) {
snapshot = {
__typename: 'SnapshotNode',
id: 'U25hcHNob3ROb2RlOjQ=',
title,
};
} else {
snapshot = {
__typename: 'NotOwner',
reason: 'Not the owner'
};
}
req.reply({
data: {
updateSnapshot: {
snapshot,
},
},
});
}
});
};
describe('Snapshot', () => {
const operations = isTeacher => ({
@ -25,8 +55,8 @@ describe('Snapshot', () => {
...module,
snapshots: [
{
id: 'snapshot-id',
title: 'title',
id: 'U25hcHNob3ROb2RlOjQ=',
title: 'Old Title',
created: '2020-01-01',
mine: true,
shared: false,
@ -90,17 +120,21 @@ describe('Snapshot', () => {
});
it('Renames Snapshot', () => {
cy.mockGraphqlOps(operations(true));
const newTitle = 'New Title';
mockUpdateSnapshot(newTitle);
cy.visit('module/miteinander-reden/snapshots');
cy.getByDataCy('snapshot-title').should('equal', 'Old Title');
cy.getByDataCy('snapshot-link').should('have.text', 'Old Title');
cy.getByDataCy('rename-snapshot-button').click();
cy.getByDataCy('snapshot-title-input').type('New Title');
cy.getByDataCy('save-button').click();
cy.getByDataCy('snapshot-title').should('equal', 'New Title');
cy.getByDataCy('edit-name-input').clear().type(newTitle);
cy.getByDataCy('modal-save-button').click();
cy.getByDataCy('snapshot-link').should('have.text', 'New Title');
});
it('Renames Snapshot', () => {
it('Deletes Snapshot', () => {
cy.mockGraphqlOps(operations(true));
cy.visit('module/miteinander-reden/snapshots');
cy.getByDataCy('snapshot').should('have.length', 1);
cy.getByDataCy('snapshot-entry').should('have.length', 1);
cy.getByDataCy('delete-snapshot-button').click();
cy.getByDataCy('confirm-button').click();
cy.getByDataCy('snapshot').should('have.length', 0);

2
client/src/App.vue
View File

@ -36,6 +36,7 @@
const EditNoteWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/notes/EditNoteWizard');
const EditClassNameWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/school-class/EditClassNameWizard');
const EditTeamNameWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/profile/EditTeamNameWizard');
const EditSnapshotTitleWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/snapshots/EditSnapshotTitleWizard');
const DefaultLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/DefaultLayout');
const SimpleLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/SimpleLayout');
const FullScreenLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/FullScreenLayout');
@ -66,6 +67,7 @@
EditNoteWizard,
EditClassNameWizard,
EditTeamNameWizard,
EditSnapshotTitleWizard,
...modals
},

90
client/src/components/modules/SnapshotListItem.vue
View File

@ -1,6 +1,9 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div class="snapshot-list-item">
<div
data-cy="snapshot-entry"
class="snapshot-list-item"
>
<router-link
:to="snapshotRoute"
class="snapshot-list-item__title"
@ -11,14 +14,30 @@
class="snapshot-list-item__date"
v-html="meta"
/>
<a
class="snapshot-list-item__link"
v-if="snapshot.mine"
@click="share"
>
<template v-if="snapshot.shared">Nicht mehr teilen</template>
<template v-else>Mit Team teilen</template>
</a>
<div class="snapshot-list-item__actions">
<button
class="icon-button"
data-cy="delete-snapshot-button"
@click="deleteSnapshot"
>
<trash-icon class="snapshot-list-item__icon" />
</button>
<button
class="icon-button"
data-cy="rename-snapshot-button"
@click="changeTitle"
>
<pen-icon class="snapshot-list-item__icon" />
</button>
<a
class="snapshot-list-item__link"
v-if="snapshot.mine"
@click="share"
>
<template v-if="snapshot.shared">Nicht mehr teilen</template>
<template v-else>Mit Team teilen</template>
</a>
</div>
</div>
</template>
@ -26,7 +45,12 @@
import dateformat from '@/helpers/date-format';
import {SNAPSHOT_DETAIL} from '@/router/module.names';
import SHARE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/share.gql';
import UPDATE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/update.gql';
import DELETE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/delete.gql';
import SNAPSHOTS_QUERY from 'gql/queries/moduleSnapshots.gql';
import gql from 'graphql-tag';
import PenIcon from '@/components/icons/PenIcon';
import TrashIcon from '@/components/icons/TrashIcon';
export default {
props: {
@ -35,6 +59,10 @@
default: () => ({}),
},
},
components: {
PenIcon,
TrashIcon,
},
computed: {
meta() {
@ -55,6 +83,35 @@
},
methods: {
changeTitle() {
this.$modal.open('edit-snapshot-title-wizard', {name: this.snapshot.title})
.then((title) => {
console.log(title);
this.$apollo.mutate({
mutation: UPDATE_SNAPSHOT_MUTATION,
variables: {
input: {
id: this.snapshot.id,
title: title,
},
},
update(store, {data: {updateSnapshot: {snapshot}}}) {
if (snapshot.__typename === 'SnapshotNode') {
const {id, title} = snapshot;
store.writeFragment({
id,
fragment: gql`fragment SnapshotFragment on SnapshotNode {title}`,
data: {
title,
__typename: 'SnapshotNode',
},
});
}
},
});
})
.catch();
},
share() {
this.$apollo.mutate({
mutation: SHARE_SNAPSHOT_MUTATION,
@ -70,10 +127,10 @@
fragment: gql`fragment SnapshotFragment on SnapshotNode { shared }`,
data: {
shared,
__typename: 'SnapshotNode'
}
__typename: 'SnapshotNode',
},
});
}
},
});
},
},
@ -100,6 +157,15 @@
&__link {
@include default-link;
color: $color-brand;
}
&__icon {
@include default-icon;
}
&__actions {
display: flex;
align-items: center;
margin-left: auto;
}
}

6
client/src/components/profile/EditNameWizard.vue
View File

@ -9,7 +9,7 @@
<modal-input
:value="name"
placeholder="Klassenname"
:placeholder="placeholder"
data-cy="edit-name-input"
@input="$emit('input', $event)"
/>
@ -43,6 +43,10 @@
type: String,
default: '',
},
placeholder: {
type: String,
default: 'Namen bearbeiten'
}
},
components: {
Modal,

46
client/src/components/snapshots/EditSnapshotTitleWizard.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<edit-name-wizard
:name="name"
type="Snapshot"
placeholder="Titel bearbeiten"
@input="name = $event"
@cancel="hideModal"
@save="save"
/>
</template>
<script>
import EditNameWizard from '@/components/profile/EditNameWizard';
export default {
components: {
EditNameWizard,
},
data() {
return {
name: ''
};
},
mounted() {
this.name = this.$modal.state.payload.name;
},
methods: {
save() {
this.$modal.confirm(this.name);
},
hideModal() {
this.$modal.cancel();
}
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
</style>

13
client/src/graphql/gql/mutations/snapshots/delete.gql Normal file
View File

@ -0,0 +1,13 @@
mutation DeleteSnapshot($input: DeleteSnapshotInput!) {
deleteSnapshot(input: $input) {
result {
__typename
...on NotOwner {
reason
}
...on Success {
message
}
}
}
}

13
client/src/graphql/gql/mutations/snapshots/update.gql Normal file
View File

@ -0,0 +1,13 @@
mutation UpdateSnapshot($input: UpdateSnapshotInput!) {
updateSnapshot(input: $input) {
snapshot {
...on SnapshotNode {
title
id
}
...on NotOwner {
reason
}
}
}
}

1
client/src/pages/me/myTeam.vue
View File

@ -71,6 +71,7 @@
methods: {
editTeamName() {
// todo: use this.$modal
this.$store.dispatch('editTeamName');
},
leaveTeam() {