ImportTask.vue

<template>
  <div id="table-imports">
    <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"
    >
      <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"
        >
          <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>


<script>
import { mapState } from 'vuex';

export default {
  filters: {
    formatDate: function (value) {
      const date = new Date(value);
      return date.toLocaleDateString('fr', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
    },
    subString: function (value) {
      return value.substring(0, 27) + '..';
    },
  },

  props: {
    data: {
      type: Array,
      default: null,
    },
    reloading: {
      type: Boolean,
      default: false,
    }
  },

  data() {
    return {
      open: false,
      ready: true,
    };
  },

  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;
      }
    },
  },

  methods: {
    fetchImports() {
      this.$store.dispatch(
        'feature-type/GET_IMPORTS', {
          project_slug:  this.$route.params.slug,
          feature_type: this.$route.params.feature_type_slug
        });
      this.$store.dispatch('feature/GET_PROJECT_FEATURES', {
        project_slug:  this.$route.params.slug,
        feature_type__slug:  this.$route.params.feature_type_slug
      }).catch((err) => {
        console.error(err);
      });
      //* show that the action was triggered, could be improved with animation (doesn't work)
      this.ready = false;
    },
  },
};
</script>

<style scoped lang="less">

#table-imports {
  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 {
  width: 20px !important;
  height: 20px !important;
}

.rotate {
  -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>