Mercurial > gemma

changeset 2699:ef10f1cd6cb8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
import_overview: testwise including header component
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 18 Mar 2019 12:49:38 +0100
parents 472f4c6a1ec0
children 58e2d95757ac
files client/src/components/importoverview/ImportOverview.vue client/src/components/importoverview/LogEntry.vue
diffstat 2 files changed, 60 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverview.vue	Mon Mar 18 11:32:27 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Mon Mar 18 12:49:38 2019 +0100
@@ -15,7 +15,7 @@
           <font-awesome-icon icon="spinner" spin />
         </div>
       </transition>
-      <div class="p-2 d-flex flex-row flex-fill justify-content-between">
+      <div class="p-2 mb-1 d-flex flex-row flex-fill justify-content-between">
         <Filters></Filters>
         <div>
           <button
@@ -27,6 +27,37 @@
           </button>
         </div>
       </div>
+      <UITableHeader
+        :columns="[
+          { id: 'id', title: 'Id', class: 'col-1' },
+          {
+            id: 'kind',
+            title: 'Kind',
+            class: 'col-1'
+          },
+          {
+            id: 'enqueued',
+            title: 'Enqueued',
+            class: 'col-3'
+          },
+          {
+            id: 'user',
+            title: 'User',
+            class: 'user'
+          },
+          {
+            id: 'signer',
+            title: 'Signer',
+            class: 'signer'
+          },
+          {
+            id: 'state',
+            title: 'Status',
+            class: 'col-2'
+          }
+        ]"
+        @sortingChanged="sortBy"
+      />
       <LogEntry
         class="border-top d-flex-flex-column w-100"
         :entry="entry"
@@ -46,6 +77,22 @@
   right: 0
   bottom: 0
   left: 0
+.id
+  width: 5%
+
+.kind
+  width: 8%
+
+.state
+  width: 12%
+
+.enqueued
+  width: 25
+
+.user
+  width: 16%
+.signer
+  width: 16%
 </style>
 
 <script>
--- a/client/src/components/importoverview/LogEntry.vue	Mon Mar 18 11:32:27 2019 +0100
+++ b/client/src/components/importoverview/LogEntry.vue	Mon Mar 18 12:49:38 2019 +0100
@@ -9,24 +9,28 @@
           fixed-width
         ></font-awesome-icon>
       </div>
-      <div style="width: 7%; padding-right: 10px;" class="text-right">
+      <div style="width: 5%; padding-right: 10px;" class="text-right">
         {{ entry.id }}
       </div>
-      <div style="width: 8%;">
+      <div style="width: 8%;" class="text-center">
         {{ entry.kind.toUpperCase() }}
       </div>
-      <div style="width: 22%;">
+      <div style="width: 25%;" class="text-center">
         {{ entry.enqueued | dateTime }}
       </div>
-      <div style="width: 18%;" class="truncate">{{ entry.user }}</div>
-      <div style="width: 18%;" class="truncate">{{ entry.signer }}</div>
-      <div style="width: 10%;" class="">
+      <div style="width: 16%;padding-right: 10px;" class="text-center truncate">
+        {{ entry.user }}
+      </div>
+      <div style="width: 16%;padding-left: 20px;" class="text-left truncate">
+        {{ entry.signer }}
+      </div>
+      <div style="width: 9%;" class="text-left">
         <span v-if="entry.state === 'failed'" class="text-danger">{{
           entry.state
         }}</span>
         <span v-else>{{ entry.state }}</span>
       </div>
-      <div style="width: 6%;" class="text-center">
+      <div style="width: 2%;" class="text-left">
         <font-awesome-icon
           v-if="entry.warnings"
           class="ml-1 text-warning"
@@ -34,7 +38,7 @@
           fixed-width
         ></font-awesome-icon>
       </div>
-      <div style="width: 7%" class="text-right">
+      <div style="width: 8%" class="text-right">
         <div v-if="entry.state === 'pending'">
           <button
             :class="['actions approved', { active: isApproved }]"