<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="showMap = true"
:class="['item', { active: showMap }]"
data-tab="map"
data-tooltip="Carte"
><i class="map fitted icon"></i
></a>
<a
@click="showMap = false"
:class="['item', { active: !showMap }]"
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" -->
<!-- //Todo: add permissions -->
<div v-if="project && feature_types" class="item right">
<div
@click="showAddSignal = !showAddSignal"
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
v-if="showAddSignal"
class="menu transition visible"
style="z-index: 9999"
>
<div class="header">Ajouter un signalement du type</div>
<div class="scrolling menu text-wrap">
<router-link
:to="{
name: 'ajouter-signalement',
params: { slug_type_signal: type.title },
}"
v-for="type in feature_types"
:key="type.title"
class="item"
>
{{ type.title }}
</router-link>
</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="showMap" 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.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 { mapGetters, 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,
},
},
showMap: true,
showAddSignal: false,
};
},
computed: {
...mapGetters(["project"]),
...mapState(["status_choices"]),
...mapState("feature", ["features"]),
...mapState("feature_type", ["feature_types"]),
},
created() {
if (!this.project) {
this.$store.commit("SET_PROJECT_SLUG", this.$route.params.slug);
}
},
mounted() {
this.$store.dispatch("map/INITIATE_MAP");
},
// 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>