REDMINE_ISSUE-16897|Import signalement | tooltip masqué et problèmes affichage

src/components/ImportTask.vue

 <template>
   <div id="table-imports">
-    <table
-      class="ui collapsing celled table"
-      aria-describedby="Tableau des import en cours ou terminés"
+    <div class="imports-header">
+      <div class="file-column">
+        Fichiers importés
+      </div>
+
+      <div class="status-column">
+        Statuts
+      </div>
+    </div>
+    
+    <div
+      v-for="importFile in importsForFeatureType"
+      :key="importFile.created_on"
+      class="filerow"
     >
-      <thead>
-        <tr>
-          <th
-            scope="col"
-          >
-            Fichiers importés
-          </th>
-          <th
-            scope="col"
-          >
-            Status
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="importFile in data"
-          :key="importFile.created_on"
+      <div class="file-column">
+        <h4 class="ui header align-right">
+          <div :data-tooltip="importFile.geojson_file_name" class="ellipsis">
+            {{ importFile.geojson_file_name }}
+          </div>
+        </h4>
+        <div class="sub header">
+          ajouté le {{ importFile.created_on | formatDate }}
+        </div>
+      </div>
+      
+      <div class="status-column">
+        <span
+          v-if="importFile.infos"
+          :data-tooltip="importFile.infos"
+          class="ui icon margin-left"
         >
-          <td>
-            <h4 class="ui header align-right">
-              <div :data-tooltip="importFile.geojson_file_name">
-                <div class="ellipsis">
-                  {{ importFile.geojson_file_name | subString }}
-                </div>
-                <div class="sub header">
-                  ajouté le {{ importFile.created_on | setDate }}
-                </div>
-              </div>
-            </h4>
-          </td>
-
-          <td>
-            <span
-              v-if="importFile.infos"
-              :data-tooltip="importFile.infos"
-              class="ui icon margin-left"
-            >
-              <i
-                v-if="importFile.status === 'processing'"
-                class="orange hourglass half icon"
-                aria-hidden="true"
-              />
-              <i
-                v-else-if="importFile.status === 'finished'"
-                class="green check circle outline icon"
-                aria-hidden="true"
-              />
-              <i
-                v-else-if="importFile.status === 'failed'"
-                class="red x icon"
-                aria-hidden="true"
-              />
-              <i
-                v-else
-                class="red ban icon"
-                aria-hidden="true"
-              />
-            </span>
-            <span
-              v-if="importFile.status === 'pending'"
-              data-tooltip="Statut en attente. Clickez pour rafraichir."
-            >
-              <i
-                :class="['orange icon', ready && !reloading ? 'sync' : 'hourglass half rotate']"
-                aria-hidden="true"
-                @click="fetchImports()"
-              />
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+          <i
+            v-if="importFile.status === 'processing'"
+            class="orange hourglass half icon"
+            aria-hidden="true"
+          />
+          <i
+            v-else-if="importFile.status === 'finished'"
+            class="green check circle outline icon"
+            aria-hidden="true"
+          />
+          <i
+            v-else-if="importFile.status === 'failed'"
+            class="red x icon"
+            aria-hidden="true"
+          />
+          <i
+            v-else
+            class="red ban icon"
+            aria-hidden="true"
+          />
+        </span>
+        <span
+          v-if="importFile.status === 'pending'"
+          data-tooltip="Statut en attente. Clickez pour rafraichir."
+        >
+          <i
+            :class="['orange icon', ready && !reloading ? 'sync' : 'hourglass half rotate']"
+            aria-hidden="true"
+            @click="fetchImports()"
+          />
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -86,7 +74,7 @@ import { mapState } from 'vuex';
 
 export default {
   filters: {
-    setDate: function (value) {
+    formatDate: function (value) {
       const date = new Date(value);
       return date.toLocaleDateString('fr', {
         year: 'numeric',
@@ -119,11 +107,16 @@ export default {
 
   computed: {
     ...mapState('feature', ['features']),
+
+    importsForFeatureType() {
+      return this.data.filter((el) => el.feature_type_title === this.$route.params.feature_type_slug);
+    }
   },
 
   watch: {
     data(newValue) {
       if (newValue) {
+        console.log(newValue);
         this.ready = true;
       }
     },
@@ -150,15 +143,38 @@ export default {
 </script>
 
 <style scoped lang="less">
-.sync {
-  cursor: pointer;
-}
 
 #table-imports {
-  padding-top: 1em;
-  table {
-    width: 100%;
+  border: 1px solid lightgrey;
+  margin-top: 1rem;
+  .imports-header {
+    border-bottom: 1px solid lightgrey;
+    font-weight: bold;
+  }
+  > div {
+    padding: .5em 1em;
   }
+  .filerow {
+    background-color: #fff;
+  }
+  .imports-header, .filerow {
+    display: flex;
+
+    .file-column {
+      width: 80%;
+      h4 {
+        margin-bottom: .2em;
+      }
+    }
+    .status-column {
+      width: 20%;
+      text-align: right;
+    }
+  }
+}
+
+.sync {
+  cursor: pointer;
 }
 
 i.icon {
@@ -167,80 +183,11 @@ i.icon {
 }
 
 .rotate {
-  -webkit-animation:spin 1s linear infinite;
-  -moz-animation:spin 1s linear infinite;
-  animation:spin 1s linear infinite;
-}
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-
-/*
-Max width before this PARTICULAR table gets nasty
-This query will take effect for any screen smaller than 760px
-and also iPads specifically.
-*/
-@media only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
-  /* Force table to not be like tables anymore */
-  table,
-  thead,
-  tbody,
-  th,
-  td,
-  tr {
-    display: block;
-  }
-
-  /* Hide table headers (but not display: none;, for accessibility) */
-  thead tr {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-  }
-
-  tr {
-    border: 1px solid #ccc;
-  }
-
-  td {
-    /* Behave  like a "row" */
-    border: none;
-    border-bottom: 1px solid #eee;
-    position: relative;
-    padding-left: 50%;
-  }
-
-  td:before {
-    /* Now like a table header */
-    position: absolute;
-    /* Top/left values mimic padding */
-    /* top: 6px; */
-    left: 6px;
-    width: 25%;
-    padding-right: 10px;
-    white-space: "break-spaces";
-  }
-
-  /*
-	Label the data
-	*/
-  td:nth-of-type(1):before {
-    content: "Fichiers importés";
-  }
-  td:nth-of-type(2):before {
-    content: "Statut";
-  }
-
-  .align-right {
-    text-align: right;
-  }
-  .margin-left {
-    margin-left: 94%;
-  }
-  h4.ui.header {
-    margin-left: 60px;
-    white-space: nowrap;
-  }
+  -webkit-animation:spin 1.5s cubic-bezier(0.7, 0.3, 0, 0) infinite;
+  -moz-animation:spin 1.5s cubic-bezier(0.7, 0.3, 0, 0) infinite;
+  animation:spin 1.5s cubic-bezier(0.7, 0.3, 0, 0) infinite;
 }
+@-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } }
 </style>