From b59632e0bb858cd64c906100b0e36ab412a9451f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 3 May 2021 11:16:23 +0200
Subject: [PATCH] Add snapshot detail view

---
 client/src/components/modules/SnapshotListItem.vue | 13 ++++++++++++-
 client/src/components/modules/SnapshotPreview.vue  |  0
 client/src/router/module.names.js                  |  1 +
 client/src/router/module.routes.js                 |  9 ++++++++-
 4 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/modules/SnapshotPreview.vue

diff --git a/client/src/components/modules/SnapshotListItem.vue b/client/src/components/modules/SnapshotListItem.vue
index e257550e..4bf3179e 100644
--- a/client/src/components/modules/SnapshotListItem.vue
+++ b/client/src/components/modules/SnapshotListItem.vue
@@ -6,12 +6,15 @@
     <span
       class="snapshot-list-item__date"
       v-html="created" />
-    <a class="snapshot-list-item__link">Mit Team teilen</a>
+    <router-link
+      :to="snapshotRoute"
+      class="snapshot-list-item__link">Mit Team teilen</router-link>
   </div>
 </template>
 
 <script>
   import dateformat from '@/helpers/date-format';
+  import {SNAPSHOT_DETAIL} from '@/router/module.names';
 
   export default {
     props: {
@@ -24,6 +27,14 @@
     computed: {
       created() {
         return dateformat(this.snapshot.created);
+      },
+      snapshotRoute() {
+        return {
+          name: SNAPSHOT_DETAIL,
+          params: {
+            id: this.snapshot.id
+          }
+        };
       }
     }
   };
diff --git a/client/src/components/modules/SnapshotPreview.vue b/client/src/components/modules/SnapshotPreview.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/router/module.names.js b/client/src/router/module.names.js
index dd1b8a8a..eb05bd6b 100644
--- a/client/src/router/module.names.js
+++ b/client/src/router/module.names.js
@@ -3,3 +3,4 @@ export const MODULE_PAGE = 'module';
 export const MODULE_SETTINGS_PAGE = 'module-settings';
 export const VISIBILITY_PAGE = 'visibility';
 export const SNAPSHOT_LIST = 'snapshot-list';
+export const SNAPSHOT_DETAIL = 'snapshot-detail';
diff --git a/client/src/router/module.routes.js b/client/src/router/module.routes.js
index dabf5214..88b09458 100644
--- a/client/src/router/module.routes.js
+++ b/client/src/router/module.routes.js
@@ -2,9 +2,10 @@ 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, SNAPSHOT_LIST} from '@/router/module.names';
+import {MODULE_PAGE, MODULE_SETTINGS_PAGE, SUBMISSIONS_PAGE, VISIBILITY_PAGE, SNAPSHOT_LIST, SNAPSHOT_DETAIL} from '@/router/module.names';
 import settingsPage from '@/pages/module/moduleSettings';
 import snapshots from '@/pages/snapshot/snapshots';
+import snapshot from '@/pages/snapshot/snapshot';
 
 export default [
   {
@@ -51,6 +52,12 @@ export default [
           showSubNavigation: true,
         },
       },
+      {
+        path: 'snapshot/:id',
+        component: snapshot,
+        name: SNAPSHOT_DETAIL,
+        props: true
+      }
     ],
   },
 ];