Add components and mutations for snapshot updating and deleting

Also modify the tests for MS-373 and MS-375

client/cypress/integration/frontend/modules/snapshots.spec.js

@@ -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',
+              id: 'U25hcHNob3ROb2RlOjQ=',
-              title: 'title',
+              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('edit-name-input').clear().type(newTitle);
-    cy.getByDataCy('save-button').click();
+    cy.getByDataCy('modal-save-button').click();
-    cy.getByDataCy('snapshot-title').should('equal', 'New Title');
+    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);

client/src/App.vue

@@ -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
     },
 

client/src/components/modules/SnapshotListItem.vue

@@ -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
+    <div class="snapshot-list-item__actions">
-      class="snapshot-list-item__link"
+      <button
-      v-if="snapshot.mine"
+        class="icon-button"
-      @click="share"
+        data-cy="delete-snapshot-button"
-    >
+        @click="deleteSnapshot"
-      <template v-if="snapshot.shared">Nicht mehr teilen</template>
+      >
-      <template v-else>Mit Team teilen</template>
+        <trash-icon class="snapshot-list-item__icon" />
-    </a>
+      </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;
     }
   }

client/src/components/profile/EditNameWizard.vue

@@ -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,

client/src/components/snapshots/EditSnapshotTitleWizard.vue

@@ -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>

client/src/graphql/gql/mutations/snapshots/delete.gql

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

client/src/graphql/gql/mutations/snapshots/update.gql

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

client/src/pages/me/myTeam.vue

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