Mercurial > gemma

changeset 1620:2e4ec4251c57

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: staging rebuilt with divs instead tables to accomplish detailsview
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 18 Dec 2018 16:09:44 +0100
parents 3093bab05c81
children eeddc5dcb80c
files client/src/assets/application.scss client/src/components/importqueue/Importqueue.vue client/src/components/staging/Staging.vue client/src/components/staging/StagingDetail.vue
diffstat 4 files changed, 166 insertions(+), 68 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.scss	Tue Dec 18 13:26:26 2018 +0100
+++ b/client/src/assets/application.scss	Tue Dec 18 16:09:44 2018 +0100
@@ -57,6 +57,11 @@
   transform: translate(-50%, -50%);
 }
 
+.header {
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
 .ui-element {
   pointer-events: auto;
 }
--- a/client/src/components/importqueue/Importqueue.vue	Tue Dec 18 13:26:26 2018 +0100
+++ b/client/src/components/importqueue/Importqueue.vue	Tue Dec 18 16:09:44 2018 +0100
@@ -295,11 +295,6 @@
   width: 20%;
 }
 
-.header {
-  font-weight: bold;
-  font-size: 0.9em;
-}
-
 .details thead {
   display: block;
 }
--- a/client/src/components/staging/Staging.vue	Tue Dec 18 13:26:26 2018 +0100
+++ b/client/src/components/staging/Staging.vue	Tue Dec 18 16:09:44 2018 +0100
@@ -7,39 +7,34 @@
       ></font-awesome-icon>
       <translate>Staging Area</translate>
     </h6>
-    <table class="table">
-      <thead>
-        <tr>
-          <th><translate>Name</translate></th>
-          <th><translate>Type</translate></th>
-          <th><translate>Date</translate></th>
-          <th><translate>Imported</translate></th>
-          <th><translate>Username</translate></th>
-          <th>&nbsp;</th>
-          <th>&nbsp;</th>
-        </tr>
-      </thead>
-      <tbody v-if="filteredData.length">
+    <div>
+      <div class="mt-3 ml-3 mr-3 text-left flex-row d-flex border-bottom">
+        <div class="header text-left name"><translate>Name</translate></div>
+        <div class="header text-left type"><translate>Type</translate></div>
+        <div class="header text-left date"><translate>Date</translate></div>
+        <div class="header text-left imported">
+          <translate>Imported</translate>
+        </div>
+        <div class="header text-left username">
+          <translate>Username</translate>
+        </div>
+        <div class="ml-3 controls"></div>
+      </div>
+      <div class="ml-3 mr-3 mt-2" v-if="filteredData.length">
         <StagingDetail
           :key="data.id"
           v-for="data in filteredData"
           :data="data"
         ></StagingDetail>
-      </tbody>
-      <tbody v-else>
-        <tr>
-          <td class="text-center" colspan="6">
-            <translate>No results.</translate>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="p-3" v-if="filteredData.length">
+      </div>
+    </div>
+    <div class="mt-3 p-3" v-if="filteredData.length">
       <button @click="confirmReview" class="confirm-button btn btn-info">
         <translate>Confirm</translate>
       </button>
     </div>
-    <div class="p-3">
+    <div v-else class="mr-auto ml-auto"><translate>No results.</translate></div>
+    <div class="mt-1 p-3">
       <button @click="loadData" class="refresh btn btn-dark">Refresh</button>
     </div>
   </div>
@@ -145,6 +140,30 @@
 </script>
 
 <style lang="scss" scoped>
+.name {
+  width: 120px;
+}
+
+.date {
+  width: 90px;
+}
+
+.type {
+  width: 40px;
+}
+
+.imported {
+  width: 90px;
+}
+
+.username {
+  width: 150px;
+}
+
+.controls {
+  width: 60px;
+}
+
 .refresh {
   position: absolute;
   left: $offset;
--- a/client/src/components/staging/StagingDetail.vue	Tue Dec 18 13:26:26 2018 +0100
+++ b/client/src/components/staging/StagingDetail.vue	Tue Dec 18 16:09:44 2018 +0100
@@ -1,39 +1,76 @@
 <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)"
+  <div class="mt-3 d-flex flex-row w-100">
+    <div class="mt-auto mb-auto small name text-left">
+      <a
+        v-if="!isBottleneck(data.kind.toUpperCase())"
+        @click="zoomTo()"
+        href="#"
+        >{{ data.summary.bottleneck }}</a
       >
-        <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>
+      <span v-else class="">*</span>
+    </div>
+    <div class="mt-auto mb-auto small text-left type">
+      {{ data.kind.toUpperCase() }}
+    </div>
+    <div class="mt-auto mb-auto small text-left date">
+      {{ formatSurveyDate(data.summary.date) }}
+    </div>
+    <div class="mt-auto mb-auto small text-left imported">
+      {{ formatSurveyDate(data.enqueued.split("T")[0]) }}
+    </div>
+    <div class="mt-auto mb-auto small text-left username">{{ data.user }}</div>
+    <div class="controls d-flex flex-row justify-content-end">
+      <div>
+        <button
+          :class="{
+            'ml-3': true,
+            'mr-3': true,
+            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>
+      </div>
+      <div>
+        <button
+          :class="{
+            'mr-3': true,
+            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>
+      </div>
+      <div v-if="isBottleneck(data.kind.toUpperCase())">
+        <div @click="showDetails()" class="mt-auto mb-auto text-info text-left">
+          <font-awesome-icon
+            v-if="show"
+            icon="angle-up"
+            fixed-width
+          ></font-awesome-icon>
+          <font-awesome-icon
+            v-if="loading"
+            icon="spinner"
+            fixed-width
+          ></font-awesome-icon>
+          <font-awesome-icon
+            v-if="!show && !loading"
+            icon="angle-down"
+            fixed-width
+          ></font-awesome-icon>
+        </div>
+      </div>
+      <div v-else class="empty"></div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -57,7 +94,23 @@
 export default {
   name: "stagingdetail",
   props: ["data"],
+  data() {
+    return {
+      show: false,
+      loading: false
+    };
+  },
   methods: {
+    showDetails() {
+      if (this.show) {
+        this.show = false;
+        return;
+      }
+      this.show = true;
+    },
+    isBottleneck(kind) {
+      return kind === "BN";
+    },
     formatSurveyDate(date) {
       return formatSurveyDate(date);
     },
@@ -70,10 +123,8 @@
     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;
+    zoomTo() {
+      const { lat, lon, bottleneck, date } = this.data.summary;
       const coordinates = [lat, lon];
 
       this.$store.commit("map/moveMap", {
@@ -98,4 +149,32 @@
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.empty {
+  margin-right: 20px;
+}
+
+.name {
+  width: 120px;
+}
+
+.date {
+  width: 90px;
+}
+
+.type {
+  width: 40px;
+}
+
+.imported {
+  width: 90px;
+}
+
+.username {
+  width: 150px;
+}
+
+.controls {
+  width: 60px;
+}
+</style>