--- a/client/src/components/staging/Staging.vue	Tue Dec 18 12:42:43 2018 +0100
+++ b/client/src/components/staging/Staging.vue	Tue Dec 18 12:56:05 2018 +0100
@@ -20,43 +20,11 @@
         </tr>
       </thead>
       <tbody v-if="filteredData.length">
-        <tr :key="data.id" v-for="data in filteredData">
-          <td>
-            <a @click="zoomTo(data.id)" href="#">{{
-              data.summary.bottleneck
-            }}</a>
-          </td>
-          <td>{{ data.kind.toUpperCase() }}</td>
-          <td>{{ formatSurveyDate(data.summary.date) }}</td>
-          <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td>
-          <td>{{ data.user }}</td>
-          <td>
-            <button
-              :class="{
-                btn: true,
-                'btn-sm': true,
-                'btn-outline-success': needsApproval(data) || isRejected(data),
-                'btn-success': isApproved(data)
-              }"
-              @click="toggleApproval(data.id, $options.STATES.APPROVED)"
-            >
-              <font-awesome-icon icon="check"></font-awesome-icon>
-            </button>
-          </td>
-          <td>
-            <button
-              :class="{
-                btn: true,
-                'btn-sm': true,
-                'btn-outline-danger': needsApproval(data) || isApproved(data),
-                'btn-danger': isRejected(data)
-              }"
-              @click="toggleApproval(data.id, $options.STATES.REJECTED)"
-            >
-              <font-awesome-icon icon="times"></font-awesome-icon>
-            </button>
-          </td>
-        </tr>
+        <StagingDetail
+          :key="data.id"
+          v-for="data in filteredData"
+          :data="data"
+        ></StagingDetail>
       </tbody>
       <tbody v-else>
         <tr>
@@ -97,11 +65,15 @@
 import { STATES } from "@/store/imports.js";
 import { displayError, displayInfo } from "@/lib/errors.js";
 import { formatSurveyDate } from "@/lib/date.js";
+import StagingDetail from "./StagingDetail";
 
 export default {
   data() {
     return {};
   },
+  components: {
+    StagingDetail
+  },
   mounted() {
     this.loadData();
   },

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/staging/StagingDetail.vue	Tue Dec 18 12:56:05 2018 +0100
@@ -0,0 +1,101 @@
+<template>
+  <tr>
+    <td>
+      <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a>
+    </td>
+    <td>{{ data.kind.toUpperCase() }}</td>
+    <td>{{ formatSurveyDate(data.summary.date) }}</td>
+    <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td>
+    <td>{{ data.user }}</td>
+    <td>
+      <button
+        :class="{
+          btn: true,
+          'btn-sm': true,
+          'btn-outline-success': needsApproval(data) || isRejected(data),
+          'btn-success': isApproved(data)
+        }"
+        @click="toggleApproval(data.id, $options.STATES.APPROVED)"
+      >
+        <font-awesome-icon icon="check"></font-awesome-icon>
+      </button>
+    </td>
+    <td>
+      <button
+        :class="{
+          btn: true,
+          'btn-sm': true,
+          'btn-outline-danger': needsApproval(data) || isApproved(data),
+          'btn-danger': isRejected(data)
+        }"
+        @click="toggleApproval(data.id, $options.STATES.REJECTED)"
+      >
+        <font-awesome-icon icon="times"></font-awesome-icon>
+      </button>
+    </td>
+  </tr>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+
+import { formatSurveyDate } from "@/lib/date.js";
+import { STATES } from "@/store/imports.js";
+
+export default {
+  name: "stagingdetail",
+  props: ["data"],
+  methods: {
+    formatSurveyDate(date) {
+      return formatSurveyDate(date);
+    },
+    needsApproval(item) {
+      return item.status === STATES.NEEDSAPPROVAL;
+    },
+    isRejected(item) {
+      return item.status === STATES.REJECTED;
+    },
+    isApproved(item) {
+      return item.status === STATES.APPROVED;
+    },
+    zoomTo(id) {
+      if (!id) return;
+      const soundingResult = this.filteredData.filter(x => x.id == id)[0];
+      const { lat, lon, bottleneck, date } = soundingResult.summary;
+      const coordinates = [lat, lon];
+
+      this.$store.commit("map/moveMap", {
+        coordinates: coordinates,
+        zoom: 17,
+        preventZoomOut: true
+      });
+      this.$store
+        .dispatch("bottlenecks/setSelectedBottleneck", bottleneck)
+        .then(() => {
+          this.$store.commit("bottlenecks/setSelectedSurveyByDate", date);
+        });
+    },
+    toggleApproval(id, newStatus) {
+      this.$store.commit("imports/toggleApproval", {
+        id: id,
+        newStatus: newStatus
+      });
+    }
+  },
+  STATES: STATES
+};
+</script>
+
+<style lang="scss" scoped></style>