improve feature_type_detail

src/components/ImportTask.vue

 <template>
   <div id="table-imports">
     <table class="ui collapsing celled table">
-    <thead>
-      <tr>
-        <th>Fichiers importés</th>
-        <th>Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr :key="importFile.created_on" v-for="importFile in data">
-        <td>
-          <h4 class="ui header">
-          <div :data-tooltip="dataTooltipMsg(importFile.geojson_file_name)" >
-              {{importFile.geojson_file_name |subString}}
-              <div class="sub header">ajouté le {{importFile.created_on |setDate}}  
-            </div>
-          </div>
-          </h4>
-        </td>
+      <thead>
+        <tr>
+          <th>Fichiers importés</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr :key="importFile.created_on" v-for="importFile in data">
+          <td>
+            <h4 class="ui header">
+              <div :data-tooltip="importFile.geojson_file_name">
+                {{ importFile.geojson_file_name | subString }}
+                <div class="sub header">
+                  ajouté le {{ importFile.created_on | setDate }}
+                </div>
+              </div>
+            </h4>
+          </td>
 
-        <td>
-          <span v-if="importFile.infos" :data-tooltip="dataTooltipMsg(importFile.infos)" class="ui icon">
-            <i v-if="importFile.status == 'processing'" class="orange hourglass half icon"></i>
-            <i v-else-if="importFile.status == 'finished'" class="green check circle outline icon" ></i>
-            <i v-else-if="importFile.status == 'failed'" class="red x icon" ></i>
-            <i v-else class="red ban icon"></i>
-          </span>
-          <span v-if="importFile.status == 'pending'" data-tooltip="Statut en attente. Clickez pour rafraichir.">
-            <i 
-              class="orange sync icon"
-              v-on:click="reloadPage()"
+          <td>
+            <span
+              v-if="importFile.infos"
+              :data-tooltip="dataTooltipMsg(importFile.infos)"
+              class="ui icon"
+            >
+              <i
+                v-if="importFile.status == 'processing'"
+                class="orange hourglass half icon"
+              ></i>
+              <i
+                v-else-if="importFile.status == 'finished'"
+                class="green check circle outline icon"
+              ></i>
+              <i
+                v-else-if="importFile.status == 'failed'"
+                class="red x icon"
+              ></i>
+              <i v-else class="red ban icon"></i>
+            </span>
+            <span
+              v-if="importFile.status == 'pending'"
+              data-tooltip="Statut en attente. Clickez pour rafraichir."
+            >
+              <i
+                v-on:click="fetchImports()"
+                :class="['orange icon', ready ? 'sync' : 'hourglass half']"
               />
-          </span>
+            </span>
           </td>
-      </tr>
-    </tbody>
+        </tr>
+      </tbody>
     </table>
   </div>
 </template>
 
 
 <script>
-
 export default {
-   data: function () {
+  data() {
     return {
       open: false,
-      }
-   },
-  props: ['data'],
-  filters:{
-    setDate : function(value){
+      ready: true,
+    };
+  },
+
+  props: ["data"],
+
+  filters: {
+    setDate: function (value) {
       let date = new Date(value);
-      let d = date.toLocaleDateString('fr', {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric',
+      let d = date.toLocaleDateString("fr", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
       });
-      return d
+      return d;
+    },
+    subString: function (value) {
+      return value.substring(0, 27) + "..";
     },
-    subString : function(value){
-      return value.substring(0,27)+".."
-    }
   },
-  methods:{
-    dataTooltipMsg(msg){
-      return msg;
+
+  watch: {
+    data(newValue) {
+      if (newValue) {
+        this.ready = true;
+      }
     },
-    reloadPage() {
-      this.$router.go()
+  },
+
+  methods: {
+    fetchImports() {
+      this.$store.dispatch(
+        "feature_type/GET_IMPORTS",
+        this.$route.params.feature_type_slug
+      );
+      //* show that the action was triggered, could be improved with animation (doesn't work)
+      this.ready = false;
     },
   },
-}
+};
 </script>
 
 <style scoped>
@@ -79,13 +109,25 @@ export default {
   cursor: pointer;
 }
 
-#table-imports{
-  padding-top: 1em
+#table-imports {
+  padding-top: 1em;
 }
 
-/* 
-td{
-  text-overflow: ellipsis;
-} */
+@keyframes rotateIn {
+  from {
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
 
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  animation-name: rotateIn;
+  transform-origin: center;
+  animation: 2s;
+}
 </style>
\ No newline at end of file

src/views/feature_type/Feature_type_detail.vue

@@ -58,12 +58,12 @@
         <div class="ui styled accordion">
           <div
             @click="showImport = !showImport"
-            :class="['title', { active: showImport }]"
+            :class="['title', { active: !showImport }]"
           >
             <i class="dropdown icon"></i>
             Importer des signalements
           </div>
-          <div :class="['content', { active: showImport }]">
+          <div :class="['content', { active: !showImport }]">
             <div id="form-import-features" class="ui form">
               <div class="field">
                 <label class="ui icon button" for="json_file">
@@ -93,13 +93,13 @@
             </div>
           </div>
           <div
-            @click="showExport = !showExport"
-            :class="['title', { active: showExport }]"
+            @click="showImport = !showImport"
+            :class="['title', { active: showImport }]"
           >
             <i class="dropdown icon"></i>
             Exporter les signalements
           </div>
-          <div :class="['content', { active: showExport }]">
+          <div :class="['content', { active: showImport }]">
             <p>
               Vous pouvez télécharger l'ensemble des signalements ayant le
               statut publiés pour ce type.
@@ -206,7 +206,6 @@ export default {
         size: 0,
       },
       showImport: false,
-      showExport: true,
     };
   },