Add snapshot detail view

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
+          }
+        };
       }
     }
   };

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';

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
+      }
     ],
   },
 ];