FeatureTable.vue

<template>
  <div>
    <table
      class="ui very basic table"
      aria-describedby="Table des données du signalement"
    >
      <tbody>
        <tr v-if="feature_type">
          <td>
            <b> Type de signalement </b>
          </td>
          <td>
            <router-link
              :to="{
                name: 'details-type-signalement',
                params: { feature_type_slug: feature_type.slug },
              }"
              class="feature-type-title"
            >
              <img
                v-if="feature_type.geom_type === 'point'"
                class="list-image-type"
                src="@/assets/img/marker.png"
              >
              <img
                v-if="feature_type.geom_type === 'linestring'"
                class="list-image-type"
                src="@/assets/img/line.png"
              >
              <img
                v-if="feature_type.geom_type === 'polygon'"
                class="list-image-type"
                src="@/assets/img/polygon.png"
              >
              {{ feature_type.title }}
            </router-link>
          </td>
        </tr>
        <tr
          v-for="(field, index) in currentFeature.feature_data"
          :key="'field' + index"
        >
          <td>
            <strong>{{ field.label }}</strong>
          </td>
          <td>
            <strong>
              <i
                v-if="field.field_type === 'boolean'"
                :class="[
                  'icon',
                  field.value ? 'olive check' : 'grey times',
                ]"
                aria-hidden="true"
              />
              <span v-else>
                {{ field.value }}
              </span>
            </strong>
          </td>
        </tr>
        <tr>
          <td>
            Auteur
          </td>
          <td>{{ currentFeature.display_creator }}</td>
        </tr>
        <tr>
          <td>
            Statut
          </td>
          <td>
            <i
              v-if="currentFeature.status"
              :class="['icon', statusIcon]"
              aria-hidden="true"
            />
            {{ statusLabel }}
          </td>
        </tr>
        <tr>
          <td>
            Date de création
          </td>
          <td v-if="currentFeature.created_on">
            {{ currentFeature.created_on | formatDate }}
          </td>
        </tr>
        <tr>
          <td>
            Date de dernière modification
          </td>
          <td v-if="currentFeature.updated_on">
            {{ currentFeature.updated_on | formatDate }}
          </td>
        </tr>
      </tbody>
    </table>

    <h3>Liaison entre signalements</h3>
    <table
      class="ui very basic table"
      aria-describedby="Table des signalements lié à ce signalement"
    >
      <tbody>
        <tr
          v-for="(link, index) in linked_features"
          :key="link.feature_to.title + index"
        >
          <th
            v-if="link.feature_to.feature_type_slug"
            scope="row"
          >
            {{ link.relation_type_display }}
          </th>
          <td
            v-if="link.feature_to.feature_type_slug"
          >
            <a @click="pushNgo(link)">{{ link.feature_to.title }} </a>
            ({{ link.feature_to.display_creator }} -
            {{ link.feature_to.created_on }})
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

import { mapState, mapGetters } from 'vuex';

export default {

  name: 'FeatureTable',

  filters: {
    formatDate(value) {
      let date = new Date(value);
      date = date.toLocaleString().replace(',', '');
      return date.substr(0, date.length - 3); //* quick & dirty way to remove seconds from date
    },
  },

  computed: {
    ...mapState('feature', [
      'currentFeature',
      'linked_features',
      'statusChoices'
    ]),

    ...mapGetters('feature-type', [
      'feature_type',
    ]),

    statusIcon() {
      switch (this.currentFeature.status) {
      case 'archived':
        return 'grey archive';
      case 'pending':
        return 'teal hourglass outline';
      case 'published':
        return 'olive check';
      case 'draft':
        return 'orange pencil alternate';
      default:
        return '';
      }
    },
    statusLabel() {
      const status = this.statusChoices.find(
        (el) => el.value === this.currentFeature.status
      );
      return status ? status.name : '';
    },
  },

  methods: {
    pushNgo(link) {
      this.$emit('push-n-go', link);
    }
  }

};
</script>

<style scoped>
.feature-type-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.5em;
}
.list-image-type {
  margin-right: 5px;
  height: 25px;
  vertical-align: bottom;
}
</style>