diff client/src/components/ImportStretches.vue @ 2874:b9a6abef9f1c

client: more unified table layout Expandable/collapsible rows are now also handled by the component
author Markus Kottlaender <markus@intevation.de>
date Mon, 01 Apr 2019 11:51:03 +0200
parents 02f51054f648
children ab0a829735f6
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue	Mon Apr 01 10:46:18 2019 +0200
+++ b/client/src/components/ImportStretches.vue	Mon Apr 01 11:51:03 2019 +0200
@@ -19,43 +19,44 @@
       />
       <UITableBody
         :data="filteredStretches() | sortTable(sortColumn, sortDirection)"
-        v-slot="{ item: stretch }"
       >
-        <div class="py-1 col-4 ">
-          <a
-            class="linkto text-info"
-            v-if="isInStaging(stretch.properties.name)"
-            @click="gotoStaging(getStagingLink(stretch.properties.name))"
-          >
-            {{ stretch.properties.name
-            }}<font-awesome-icon
-              class="ml-1 text-danger"
-              icon="exclamation-triangle"
-              fixed-width
-            ></font-awesome-icon
-            ><small class="ml-1">review</small>
-          </a>
-          <a v-else @click="moveMapToStretch(stretch)" href="#">{{
-            stretch.properties.name
-          }}</a>
-        </div>
-        <div class="py-1 col-2">
-          {{ stretch.properties.date_info | surveyDate }}
-        </div>
-        <div class="py-1 col-3">
-          {{ stretch.properties.source_organization }}
-        </div>
-        <div class="py-1 col text-right">
-          <button
-            class="btn btn-xs btn-dark mr-1"
-            @click="editStretch(stretch)"
-          >
-            <font-awesome-icon icon="pencil-alt" fixed-width />
-          </button>
-          <button class="btn btn-xs btn-dark" @click="deleteStretch(stretch)">
-            <font-awesome-icon icon="trash" fixed-width />
-          </button>
-        </div>
+        <template v-slot:row="{ item: stretch }">
+          <div class="py-1 col-4 ">
+            <a
+              class="linkto text-info"
+              v-if="isInStaging(stretch.properties.name)"
+              @click="gotoStaging(getStagingLink(stretch.properties.name))"
+            >
+              {{ stretch.properties.name
+              }}<font-awesome-icon
+                class="ml-1 text-danger"
+                icon="exclamation-triangle"
+                fixed-width
+              ></font-awesome-icon
+              ><small class="ml-1">review</small>
+            </a>
+            <a v-else @click="moveMapToStretch(stretch)" href="#">{{
+              stretch.properties.name
+            }}</a>
+          </div>
+          <div class="py-1 col-2">
+            {{ stretch.properties.date_info | surveyDate }}
+          </div>
+          <div class="py-1 col-3">
+            {{ stretch.properties.source_organization }}
+          </div>
+          <div class="py-1 col text-right">
+            <button
+              class="btn btn-xs btn-dark mr-1"
+              @click="editStretch(stretch)"
+            >
+              <font-awesome-icon icon="pencil-alt" fixed-width />
+            </button>
+            <button class="btn btn-xs btn-dark" @click="deleteStretch(stretch)">
+              <font-awesome-icon icon="trash" fixed-width />
+            </button>
+          </div>
+        </template>
       </UITableBody>
     </div>
     <div v-if="edit">