From 69b335393125745aa51e67ee769ec5d311ef2838 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 28 Apr 2021 00:40:10 +0200
Subject: [PATCH] Add new client elements for snapshots

---
 .../integration/frontend/snapshots.spec.js    |  8 ++
 client/src/App.vue                            |  4 +-
 .../components/modules/ModuleNavigation.vue   |  7 +-
 .../components/modules/SnapshotCreated.vue    | 91 +++++++++++++++++
 .../components/modules/SnapshotListItem.vue   | 28 ++++++
 .../src/components/modules/SnapshotMenu.vue   | 99 +++++++++++++++++++
 client/src/graphql/gql/moduleSnapshots.gql    | 14 +++
 .../graphql/gql/mutations/createSnapshot.gql  |  9 ++
 client/src/graphql/gql/snapshotsQuery.gql     | 13 +++
 client/src/pages/snapshot/snapshots.vue       | 73 ++++++++++++++
 client/src/router/module.names.js             |  1 +
 client/src/router/module.routes.js            | 11 ++-
 12 files changed, 352 insertions(+), 6 deletions(-)
 create mode 100644 client/cypress/integration/frontend/snapshots.spec.js
 create mode 100644 client/src/components/modules/SnapshotCreated.vue
 create mode 100644 client/src/components/modules/SnapshotListItem.vue
 create mode 100644 client/src/components/modules/SnapshotMenu.vue
 create mode 100644 client/src/graphql/gql/moduleSnapshots.gql
 create mode 100644 client/src/graphql/gql/mutations/createSnapshot.gql
 create mode 100644 client/src/graphql/gql/snapshotsQuery.gql
 create mode 100644 client/src/pages/snapshot/snapshots.vue

diff --git a/client/cypress/integration/frontend/snapshots.spec.js b/client/cypress/integration/frontend/snapshots.spec.js
new file mode 100644
index 00000000..e9bb461c
--- /dev/null
+++ b/client/cypress/integration/frontend/snapshots.spec.js
@@ -0,0 +1,8 @@
+describe('Snapshot', () => {
+  it('Menu is visible for teacher', () => {
+    cy.get('NotImplemented');
+  });
+  it('Menu is not visible for student', () => {
+    cy.get('NotImplemented');
+  });
+});
diff --git a/client/src/App.vue b/client/src/App.vue
index 2680ec21..0f4623c9 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -36,6 +36,7 @@
   import FullscreenInfographic from '@/components/FullscreenInfographic';
   import FullscreenVideo from '@/components/FullscreenVideo';
   import DeactivatePerson from '@/components/profile/DeactivatePerson';
+  import SnapshotCreated from '@/components/modules/SnapshotCreated';
   import {mapGetters} from 'vuex';
   import ScrollUp from '@/components/ScrollUp';
 
@@ -64,7 +65,8 @@
       FullscreenImage,
       FullscreenInfographic,
       FullscreenVideo,
-      DeactivatePerson
+      DeactivatePerson,
+      SnapshotCreated
     },
 
     computed: {
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index a7961669..c1dbae30 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -44,10 +44,7 @@
       class="module-navigation__toggle-menu"
       v-if="canManageContent"
     >
-      <!--      <a-->
-      <!--        class="module-navigation__actions"-->
-      <!--        data-cy="module-snapshots-button">Snapshots</a>-->
-
+      <snapshot-menu class="module-navigation__actions"/>
       <router-link
         :to="{name: 'module-settings'}"
         class="module-navigation__actions"
@@ -66,6 +63,7 @@
   import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
   import ToggleEditing from '@/components/toggle-menu/ToggleEditing';
   import me from '@/mixins/me';
+  import SnapshotMenu from '@/components/modules/SnapshotMenu';
 
   export default {
     apollo: {
@@ -75,6 +73,7 @@
     mixins: [me],
 
     components: {
+      SnapshotMenu,
       BackLink,
       SubNavigationItem,
       ToggleEditing,
diff --git a/client/src/components/modules/SnapshotCreated.vue b/client/src/components/modules/SnapshotCreated.vue
new file mode 100644
index 00000000..65779a9b
--- /dev/null
+++ b/client/src/components/modules/SnapshotCreated.vue
@@ -0,0 +1,91 @@
+<template>
+  <modal
+    :hide-header="false"
+    :small="true"
+    class="snapshot-created">
+    <div slot="header">
+      <h1 class="snapshot-created__heading">Ein neuer Snapshot wurde erstellt</h1>
+    </div>
+    <div class="snapshot-created__content">
+      <div class="snapshot-created__entry">
+        <span class="snapshot-created__title">{{ snapshot.title }}</span>
+        <span class="snapshot-created__meta">30.11.2020 - 17:31 - Simone Gerber</span>
+      </div>
+    </div>
+    <div slot="footer">
+      <a
+        class="button button--primary"
+        @click="toList">Alle Snapshots anzeigen</a>
+      <a
+        class="button"
+        @click="close">Zurück zum Modul</a>
+    </div>
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import {SNAPSHOT_LIST} from '@/router/module.names';
+
+  export default {
+    components: {
+      Modal,
+    },
+
+    data() {
+      return {
+        snapshotList: {
+          name: SNAPSHOT_LIST,
+        },
+      };
+    },
+
+    computed: {
+      snapshot() {
+        return this.$modal.state.payload.snapshot;
+      }
+    },
+
+    methods: {
+      toList() {
+        this.$router.push(this.snapshotList);
+        this.$modal.confirm();
+      },
+      close() {
+        this.$modal.cancel();
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .snapshot-created {
+    &__heading {
+      @include heading-2;
+      margin-bottom: 0;
+      line-height: 1.5;
+    }
+
+    &__content {
+      min-height: 200px;
+    }
+
+    &__entry {
+      padding: $medium-spacing;
+      background-color: $color-brand-light;
+      display: flex;
+      align-items: center;
+    }
+
+    &__title {
+      @include heading-4;
+      margin-right: $medium-spacing;
+    }
+
+    &__meta {
+      @include small-text;
+    }
+  }
+</style>
diff --git a/client/src/components/modules/SnapshotListItem.vue b/client/src/components/modules/SnapshotListItem.vue
new file mode 100644
index 00000000..8a9c1317
--- /dev/null
+++ b/client/src/components/modules/SnapshotListItem.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="snapshot-list-item">
+    <span
+      class="snapshot-list-item__title"
+      v-html="snapshot.title"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      snapshot: {
+        type: Object,
+        default: () => ({})
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .snapshot-list-item {
+    &__title {
+      @include heading-4;
+    }
+  }
+</style>
diff --git a/client/src/components/modules/SnapshotMenu.vue b/client/src/components/modules/SnapshotMenu.vue
new file mode 100644
index 00000000..a75081fa
--- /dev/null
+++ b/client/src/components/modules/SnapshotMenu.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="snapshot-menu">
+    <a
+      data-cy="module-snapshots-button"
+      class="snapshot-menu__toggle"
+      @click="showPopover = true">Snapshots</a>
+    <widget-popover
+      class="snapshot-menu__popover"
+      v-if="showPopover"
+      @hide-me="showPopover = false">
+      <a
+        class="popover-links__link snapshot-menu__link snapshot-menu__button snapshot-menu__button--primary"
+        @click="createSnapshot">Neuen
+        Snapshot erstellen</a>
+      <router-link
+        :to="snapshotListRoute"
+        class="popover-links__link snapshot-menu__link">Snapshots anzeigen
+      </router-link>
+      <a class="popover-links__link snapshot-menu__link">Was ist ein Snapshot?</a>
+    </widget-popover>
+  </div>
+</template>
+
+<script>
+  import WidgetPopover from '@/components/WidgetPopover';
+  import {SNAPSHOT_LIST} from '@/router/module.names';
+  import me from '@/mixins/me';
+
+  import CREATE_SNAPSHOT_MUTATION from '@/graphql/gql/mutations/createSnapshot.gql';
+
+  export default {
+    mixins: [me],
+
+    components: {
+      WidgetPopover,
+    },
+
+    data() {
+      return {
+        snapshotListRoute: {
+          name: SNAPSHOT_LIST,
+        },
+        showPopover: false,
+      };
+    },
+
+    methods: {
+      createSnapshot() {
+        this.$apollo.mutate({
+          mutation: CREATE_SNAPSHOT_MUTATION,
+          variables: {
+            input: {
+              module: this.$route.params.slug,
+              selectedClass: this.me.selectedClass.id,
+            },
+          },
+        }).then(({data: {createSnapshot: {snapshot}}}) => {
+          this.showPopover = false;
+          this.$modal.open('snapshot-created', {
+            snapshot
+          });
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .snapshot-menu {
+    position: relative;
+
+    &__toggle {
+      @include regular-text;
+      cursor: pointer;
+    }
+
+    &__popover {
+      box-sizing: border-box;
+      width: 300px;
+      height: 170px;
+      left: 0;
+      top: 35px;
+      padding: $medium-spacing;
+    }
+
+    &__link {
+      @include large-link;
+      line-height: 27px;
+      padding: $small-spacing 0;
+    }
+
+    &__button {
+      @include button-border;
+      padding: 5px $small-spacing;
+    }
+  }
+</style>
diff --git a/client/src/graphql/gql/moduleSnapshots.gql b/client/src/graphql/gql/moduleSnapshots.gql
new file mode 100644
index 00000000..0646f5fe
--- /dev/null
+++ b/client/src/graphql/gql/moduleSnapshots.gql
@@ -0,0 +1,14 @@
+query ModuleSnapshotsQuery($slug: String!) {
+  module(slug: $slug) {
+    id
+    title
+    metaTitle
+    topic {
+      title
+    }
+    snapshots {
+      id
+      title
+    }
+  }
+}
diff --git a/client/src/graphql/gql/mutations/createSnapshot.gql b/client/src/graphql/gql/mutations/createSnapshot.gql
new file mode 100644
index 00000000..0d64b711
--- /dev/null
+++ b/client/src/graphql/gql/mutations/createSnapshot.gql
@@ -0,0 +1,9 @@
+mutation CreateSnapshot($input: CreateSnapshotInput!) {
+  createSnapshot(input: $input) {
+    snapshot {
+      id
+      title
+    }
+    success
+  }
+}
diff --git a/client/src/graphql/gql/snapshotsQuery.gql b/client/src/graphql/gql/snapshotsQuery.gql
new file mode 100644
index 00000000..e0e9b5c0
--- /dev/null
+++ b/client/src/graphql/gql/snapshotsQuery.gql
@@ -0,0 +1,13 @@
+query SnapshotsQuery($slug: String!) {
+  snapshot(slug: $slug) {
+    id
+    module {
+      id
+      title
+      metaTitle
+      topic {
+        title
+      }
+    }
+  }
+}
diff --git a/client/src/pages/snapshot/snapshots.vue b/client/src/pages/snapshot/snapshots.vue
new file mode 100644
index 00000000..1b57936b
--- /dev/null
+++ b/client/src/pages/snapshot/snapshots.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="snapshots">
+    <h1>Snapshots</h1>
+    <p class="snapshots__details">Thema: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}</p>
+    <div class="snapshots__list">
+      <snapshot-list-item
+        :key="snapshot.id"
+        :snapshot="snapshot"
+        class="snapshots__snapshot"
+        v-for="snapshot in module.snapshots"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import SnapshotListItem from '@/components/modules/SnapshotListItem';
+
+  import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/moduleSnapshots.gql';
+
+  const defaultModule = {topic: {}, snapshots: []};
+
+  export default {
+    components: {
+      SnapshotListItem
+    },
+    data() {
+      return {
+        module: defaultModule
+      };
+    },
+
+    apollo: {
+      module: {
+        query: MODULE_SNAPSHOTS_QUERY,
+        variables() {
+          return {
+            slug: this.$route.params.slug
+          };
+        },
+        error(error, vm, key, type, options) {
+          console.log(error, vm, key, type, options);
+        },
+        update(data) {
+          return data.module || defaultModule;
+        }
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .snapshots {
+    @include centered(800px);
+    display: flex;
+    flex-direction: column;
+    padding: $section-spacing 0;
+    align-items: flex-start;
+
+    &__details {
+      @include regular-text;
+    }
+
+    &__list {
+      width: 100%;
+    }
+
+    &__snapshot {
+      @include table-row;
+    }
+  }
+</style>
diff --git a/client/src/router/module.names.js b/client/src/router/module.names.js
index 793e0b65..dd1b8a8a 100644
--- a/client/src/router/module.names.js
+++ b/client/src/router/module.names.js
@@ -2,3 +2,4 @@ export const SUBMISSIONS_PAGE = 'submissions';
 export const MODULE_PAGE = 'module';
 export const MODULE_SETTINGS_PAGE = 'module-settings';
 export const VISIBILITY_PAGE = 'visibility';
+export const SNAPSHOT_LIST = 'snapshot-list';
diff --git a/client/src/router/module.routes.js b/client/src/router/module.routes.js
index 1f0ac4bd..dabf5214 100644
--- a/client/src/router/module.routes.js
+++ b/client/src/router/module.routes.js
@@ -2,8 +2,9 @@ import moduleBase from '@/pages/module/module-base';
 import module from '@/pages/module/module';
 import submissions from '@/pages/submissions';
 import moduleVisibility from '@/pages/module/moduleVisibility';
-import {MODULE_PAGE, MODULE_SETTINGS_PAGE, SUBMISSIONS_PAGE, VISIBILITY_PAGE} from '@/router/module.names';
+import {MODULE_PAGE, MODULE_SETTINGS_PAGE, SUBMISSIONS_PAGE, VISIBILITY_PAGE, SNAPSHOT_LIST} from '@/router/module.names';
 import settingsPage from '@/pages/module/moduleSettings';
+import snapshots from '@/pages/snapshot/snapshots';
 
 export default [
   {
@@ -42,6 +43,14 @@ export default [
           hideNavigation: true,
         },
       },
+      {
+        path: 'snapshots',
+        component: snapshots,
+        name: SNAPSHOT_LIST,
+        meta: {
+          showSubNavigation: true,
+        },
+      },
     ],
   },
 ];