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="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
                v-on:click="fetchImports()"
                :class="['orange icon', ready ? 'sync' : 'hourglass half']"
              />
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
export default {
  data() {
    return {
      open: false,
      ready: true,
    };
  },

  props: ["data"],

  filters: {
    setDate: function (value) {
      let date = new Date(value);
      let d = date.toLocaleDateString("fr", {
        year: "numeric",
        month: "long",
        day: "numeric",
      });
      return d;
    },
    subString: function (value) {
      return value.substring(0, 27) + "..";
    },
  },

  watch: {
    data(newValue) {
      if (newValue) {
        this.ready = true;
      }
    },
  },

  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>
.sync {
  cursor: pointer;
}

#table-imports {
  padding-top: 1em;
}

@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>