Feature_list.vue

<template>
  <div class="fourteen wide column">
    <div class="feature-list-container ui grid">
      <div class="four wide column">
        <h1>Signalements</h1>
      </div>
      <div class="twelve wide column">
        <div class="ui secondary menu">
          <a @click="displayMap = true" class="item active" data-tab="map" data-tooltip="Carte"
            ><i class="map fitted icon"></i
          ></a>
          <a @click="displayMap = false" class="item" data-tab="list" data-tooltip="Liste"
            ><i class="list fitted icon"></i
          ></a>
          <div class="item">
            <h4>
              {{ features.length }} signalement{{
                features.length > 1 ? "s" : ""
              }}
            </h4>
          </div>
          <!-- {% if project and feature_types and
          permissions|lookup:'can_create_feature' %} -->
          <!-- v-if="project && feature_types && permissions" -->
          <div class="item right">
            <div
              class="
                ui
                dropdown
                top
                right
                pointing
                compact
                button button-hover-green
              "
              data-tooltip="Ajouter un signalement"
              data-position="bottom left"
            >
              <i class="plus fitted icon"></i>
              <div class="menu" style="z-index: 9999">
                <div class="header">Ajouter un signalement du type</div>
                <div class="scrolling menu text-wrap">
                  <a
                    v-for="type in feature_types"
                    :key="type"
                    class="item"
                    href="{% url 'geocontrib:feature_create' slug=project.slug feature_type_slug=type.slug %}"
                  >
                    {{ type }}
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <form id="form-filters" class="ui form grid" action="" method="get">
      <div class="field wide four column">
        <label>Type</label>
        <div class="ui fluid search selection dropdown">
          <input
            type="hidden"
            class="filter"
            name="feature_type"
            :value="request.GET.feature_type"
          />
          <div class="default text"></div>
          <i class="dropdown icon"></i>
          <div class="menu" style="z-index: 9999">
            <div
              v-for="type in feature_types"
              :key="type.slug"
              class="item"
              :data-value="type.slug"
              :selected="request.GET.type === type.slug"
            >
              {{ type.title }}
            </div>
          </div>
        </div>
      </div>
      <div class="field wide four column">
        <label>Statut</label>
        <div class="ui fluid search selection dropdown">
          <input
            type="hidden"
            class="filter"
            name="status"
            :value="request.GET.status"
          />
          <div class="default text"></div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div
              v-for="(x, y) in status_choices"
              :key="y"
              class="item"
              :data-value="x"
              :selected="request.GET.status === x"
            >
              {{ y }}
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="field wide four column">
        <label>Nom</label>
        <div class="ui icon input">
          <i class="search icon"></i>
          <div class="ui action input">
            <input type="text" name="title" :value="request.GET.title" />
            <button
              type="button"
              class="ui teal icon button"
              id="submit-search"
            >
              <i class="search icon"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- map params, updated on map move -->
      <input type="hidden" name="zoom" :value="request.GET.zoom || ''" />
      <input type="hidden" name="lat" :value="request.GET.lat || ''" />
      <input type="hidden" name="lng" :value="request.GET.lng || ''" />
    </form>

    <div v-if="displayMap" class="ui tab active map-container" data-tab="map">
      <!-- // todo: add map -->
      <div id="map"></div>
      <!-- // todo: add sidebar template and toggle -->
      <!--  {% if serialized_base_maps|length > 0 %} {% include
      "geocontrib/map-layers/sidebar-layers.html" with
      basemaps=serialized_base_maps layers=serialized_layers
      project=project.slug%} {% endif %} -->
    </div>

    <div v-else class="ui tab" data-tab="list">
      <table id="table-features" class="ui compact table">
        <thead>
          <tr>
            <th>Statut</th>
            <th>Type</th>
            <th>Nom</th>
            <th>Dernière modification</th>
            {% if user.is_authenticated %}
            <th>Auteur</th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
          <tr v-for="feature in features" :key="feature.feature_type.title">
            <td :data-order="feature.get_status_display">
              <div v-if="feature.status == 'archived'" data-tooltip="Archivé">
                <i class="grey archive icon"></i>
              </div>
              <div
                v-else-if="feature.status == 'pending'"
                data-tooltip="En attente de publication"
              >
                <i class="teal hourglass outline icon"></i>
              </div>
              <div
                v-else-if="feature.status == 'published'"
                data-tooltip="Publié"
              >
                <i class="olive check icon"></i>
              </div>
              <div
                v-else-if="feature.status == 'draft'"
                data-tooltip="Brouillon"
              >
                <i class="orange pencil alternate icon"></i>
              </div>
            </td>
            <td>
              <a
                href="{% url 'geocontrib:feature_type_detail' slug=project.slug feature_type_slug=feature.feature_type.slug %}"
              >
                {{ feature.feature_type.title }}
              </a>
            </td>
            <td>
              <a
                href="{% url 'geocontrib:feature_detail' slug=project.slug feature_type_slug=feature.feature_type.slug feature_id=feature.feature_id  %}"
                >{{ feature.title }}</a
              >
            </td>
            <td :data-order="feature.updated_on">
              <!-- |date:'Ymd' -->
              {{feature.updated_on|date:'d/m/Y' }}
            </td>
            {% if user.is_authenticated %}
            <td>
              {{ feature.display_creator }}
            </td>
            {% endif %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Feature_list",

  data() {
    return {
      request: {
        // ? D'où ça doit venir ?
        GET: {
          feature_type: null,
          status: null,
          title: null,
          type: null,
        },
      },
      displayMap: true
    };
  },

  computed: {
    ...mapState(["features", "feature_types", "status_choices"]),
  },
  // todo : add script

};
</script>


<style>
#map {
  width: 100%;
  min-height: 300px;
  border: 1px solid grey;
  /* To not hide the filters */
  z-index: 1;
}

#form-filters,
.ui.centered > .row.feature-list-container {
  justify-content: flex-start;
}

.feature-list-container .ui.menu:not(.vertical) .right.item {
  padding-right: 0;
}

.map-container {
  width: 80vw;
  transform: translateX(-50%);
  margin-left: 50%;
}

@media screen and (max-width: 767px) {
  #form-filters > .field.column {
    width: 100% !important;
  }

  .map-container {
    width: 100%;
  }
}
</style>