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 align-right">
              <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="importFile.infos"
              class="ui icon margin-left"
            >
              <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;
}

/* 
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%;
  }
}
</style>