ProjectLastFeatures.vue

<template>
  <div class="red card">
    <div class="content">
      <div class="center aligned header">
        Derniers signalements
      </div>
      <div class="center aligned description">
        <div
          :class="{ active: loading }"
          class="ui inverted dimmer"
        >
          <div class="ui text loader">
            Récupération des signalements en cours...
          </div>
        </div>
        <div class="ui relaxed list">
          <ProjectLastFeatureRoute
            v-for="(item, index) in features.slice(0,5)"
            :key="item.properties.title + index"
            :item="item"
          />
          <em
            v-if="features.length === 0 && !loading"
          >Aucun signalement pour le moment.</em>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex';
import ProjectLastFeatureRoute from '@/components/Project/Detail/ProjectLastFeatureRoute';


export default {

  name: 'ProjectLastFeatures',

  components: {
    ProjectLastFeatureRoute,
  },

  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    ...mapState('feature', [
      'features'
    ]),
  },
};
</script>