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

        <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()"
              />
          </span>
          </td>
      </tr>
    </tbody>
    </table>
  </div>
</template>


<script>

export default {
   data: function () {
    return {
      open: false,
      }
   },
  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)+".."
    }
  },
  methods:{
    dataTooltipMsg(msg){
      return msg;
    },
    reloadPage() {
      this.$router.go()
    },
  },
}
</script>

<style scoped>
.sync {
  cursor: pointer;
}

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

/* 
td{
  text-overflow: ellipsis;
} */

</style>