FeatureTable.vue

<template>
  <div>
    <table
      class="ui very basic table"
      aria-describedby="Table des données du signalement"
    >
      <tbody>
        <div
          v-for="(field, index) in currentFeature.feature_data"
          :key="'field' + index"
        >
          <tr v-if="field">
            <th scope="row">
              <strong>{{ field.label }}</strong>
            </th>
            <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>
        </div>
        <tr>
          <th
            scope="row"
          >
            Auteur
          </th>
          <td>{{ currentFeature.display_creator }}</td>
        </tr>
        <tr>
          <th
            scope="row"
          >
            Statut
          </th>
          <td>
            <i
              v-if="currentFeature.status"
              :class="['icon', statusIcon]"
              aria-hidden="true"
            />
            {{ statusLabel }}
          </td>
        </tr>
        <tr>
          <th
            scope="row"
          >
            Date de création
          </th>
          <td v-if="currentFeature.created_on">
            {{ currentFeature.created_on | formatDate }}
          </td>
        </tr>
        <tr>
          <th
            scope="row"
          >
            Date de dernière modification
          </th>
          <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 } 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'
    ]),

    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>