Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • geocontrib/geocontrib-frontend
  • ext_matthieu/geocontrib-frontend
  • fnecas/geocontrib-frontend
  • MatthieuE/geocontrib-frontend
4 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1781 additions and 4280 deletions
src/views/Project/ProjectEdit.vue 0 → 100644
View file @ ee17a921
<template>
<div id="project-edit">
<div
:class="{ active: loading }"
class="ui inverted dimmer"
>
<div class="ui text loader">
Projet en cours de création. Vous allez être redirigé.
</div>
</div>
<form
id="form-project-edit"
class="ui form"
>
<h1>
<span
v-if="action === 'edit'"
>Édition du projet "{{ form.title }}"</span>
<span v-else-if="action === 'create'">Création d'un projet</span>
</h1>
<div class="ui horizontal divider">
INFORMATIONS
</div>
<div class="two fields">
<div class="required field">
<label for="title">Titre</label>
<input
id="title"
v-model="form.title"
type="text"
required
maxlength="128"
name="title"
>
<ul
id="errorlist-title"
class="errorlist"
>
<li
v-for="error in errors.title"
:key="error"
>
{{ error }}
</li>
</ul>
</div>
<div class="field file-logo">
<label>Illustration du projet</label>
<img
v-if="thumbnailFileSrc.length || form.thumbnail.length"
id="form-input-file-logo"
class="ui small image"
:src="
thumbnailFileSrc
? thumbnailFileSrc
: DJANGO_BASE_URL + form.thumbnail
"
alt="Thumbnail du projet"
>
<label
class="ui icon button"
for="thumbnail"
>
<i
class="file icon"
aria-hidden="true"
/>
<span class="label">{{
form.thumbnail_name ? form.thumbnail_name : fileToImport.name
}}</span>
</label>
<input
id="thumbnail"
class="file-selection"
type="file"
accept="image/jpeg, image/png"
style="display: none"
name="thumbnail"
@change="onFileChange"
>
<ul
v-if="errorThumbnail.length"
id="errorlist-thumbnail"
class="errorlist"
>
<li>
{{ errorThumbnail[0] }}
</li>
</ul>
</div>
</div>
<div class="two fields">
<div class="field">
<label for="description">Description</label>
<textarea
id="editor"
v-model="form.description"
data-preview="#preview"
name="description"
rows="5"
/>
<!-- {{ form.description.errors }} -->
</div>
<div class="field">
<label for="preview">Aperçu</label>
<div
id="preview"
class="description preview"
name="preview"
/>
</div>
</div>
<div class="ui horizontal divider">
PARAMÈTRES
</div>
<div class="two fields">
<div
id="published-visibility"
class="required field"
>
<label
for="access_level_pub_feature"
>Visibilité des signalements publiés</label>
<Dropdown
:options="levelPermissionsPub"
:selected="form.access_level_pub_feature.name"
:selection.sync="form.access_level_pub_feature"
/>
<ul
id="errorlist-access_level_pub_feature"
class="errorlist"
>
<li
v-for="error in errors.access_level_pub_feature"
:key="error"
>
{{ error }}
</li>
</ul>
</div>
<div
id="archived-visibility"
class="required field"
>
<label for="access_level_arch_feature">
Visibilité des signalements archivés
</label>
<Dropdown
:options="levelPermissionsArc"
:selected="form.access_level_arch_feature.name"
:selection.sync="form.access_level_arch_feature"
/>
<ul
id="errorlist-access_level_arch_feature"
class="errorlist"
>
<li
v-for="error in errors.access_level_arch_feature"
:key="error"
>
{{ error }}
</li>
</ul>
</div>
</div>
<div class="two fields">
<div class="fields grouped checkboxes">
<div class="field">
<div class="ui checkbox">
<input
id="moderation"
v-model="form.moderation"
class="hidden"
type="checkbox"
name="moderation"
>
<label for="moderation">Modération</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input
id="is_project_type"
v-model="form.is_project_type"
class="hidden"
type="checkbox"
name="is_project_type"
>
<label for="is_project_type">Est un projet type</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input
id="generate_share_link"
v-model="form.generate_share_link"
class="hidden"
type="checkbox"
name="generate_share_link"
>
<label for="generate_share_link">Génération d'un lien de partage externe</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input
id="fast_edition_mode"
v-model="form.fast_edition_mode"
class="hidden"
type="checkbox"
name="fast_edition_mode"
>
<label for="fast_edition_mode">Mode d'édition rapide de signalements</label>
<div
class="
ui
small
button
circular
compact
absolute-right
icon
teal
"
data-tooltip="Consulter la documentation"
data-position="right center"
data-variation="mini"
@click="goToDocumentationFeature"
>
<i class="question icon" />
</div>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input
id="feature_assignement"
v-model="form.feature_assignement"
class="hidden"
type="checkbox"
name="feature_assignement"
>
<label for="feature_assignement">Activation de l'assignation de signalements aux membres du projet</label>
</div>
</div>
<div class="fields grouped">
<div class="field">
<label for="feature_browsing">Configuration du parcours de signalement</label>
</div>
<div
id="feature_browsing_filter"
class="field inline"
>
<label for="feature_browsing_default_filter">Filtrer sur</label>
<Dropdown
:options="featureBrowsingOptions.filter"
:selected="form.feature_browsing_default_filter.name"
:selection.sync="form.feature_browsing_default_filter"
/>
</div>
<div
id="feature_browsing_sort"
class="field inline"
>
<label for="feature_browsing_default_sort">Trier par</label>
<Dropdown
:options="featureBrowsingOptions.sort"
:selected="form.feature_browsing_default_sort.name"
:selection.sync="form.feature_browsing_default_sort"
/>
</div>
</div>
</div>
<div class="field">
<label>Niveau de zoom maximum de la carte</label>
<div class="map-maxzoom-selector">
<div class="range-container">
<input
v-model="form.map_max_zoom_level"
type="range"
min="0"
max="22"
step="1"
@input="zoomMap"
><output class="range-output-bubble">{{
scalesTable[form.map_max_zoom_level]
}}</output>
</div>
<div class="map-preview">
<label>Aperçu :</label>
<div
id="map"
ref="map"
/>
<div class="no-preview">
pas de fond&nbsp;de&nbsp;carte disponible à&nbsp;cette&nbsp;échelle
</div>
</div>
</div>
</div>
</div>
<div
v-if="filteredAttributes.length > 0"
class="ui horizontal divider"
>
ATTRIBUTS
</div>
<div class="fields grouped">
<ProjectAttributeForm
v-for="(attribute, index) in filteredAttributes"
:key="index"
:attribute="attribute"
:form-project-attributes="form.project_attributes"
@update:project_attributes="updateProjectAttributes($event)"
/>
</div>
<div class="ui divider" />
<button
id="send-project"
type="button"
class="ui teal icon button"
@click="postForm"
>
<i
class="white save icon"
aria-hidden="true"
/> Enregistrer les changements
</button>
</form>
</div>
</template>
<script>
import axios from '@/axios-client.js';
import Dropdown from '@/components/Dropdown';
import ProjectAttributeForm from '@/components/Project/Edition/ProjectAttributeForm';
import mapService from '@/services/map-service';
import TextareaMarkdown from 'textarea-markdown';
import { mapActions, mapState } from 'vuex';
export default {
name: 'ProjectEdit',
components: {
Dropdown,
ProjectAttributeForm
},
data() {
return {
loading: false,
action: 'create',
fileToImport: {
name: 'Sélectionner une image ...',
size: 0,
},
errors: {
title: [],
access_level_pub_feature: [],
access_level_arch_feature: [],
},
errorThumbnail: [],
featureBrowsingOptions: {
filter: [{
name: 'Désactivé',
value: ''
},
{
name: 'Type de signalement',
value: 'feature_type_slug',
}],
sort: [{
name: 'Date de création',
value: '-created_on',
},
{
name: 'Date de modification',
value: '-updated_on'
}],
},
form: {
title: '',
slug: '',
created_on: '',
updated_on: '',
description: '',
moderation: false,
thumbnail: '', // todo : utiliser l'image par défaut
thumbnail_name: '', // todo: delete after getting image in jpg or png instead of data64 (require post to django)
creator: null,
access_level_pub_feature: { name: '', value: '' },
access_level_arch_feature: { name: '', value: '' },
map_max_zoom_level: 22,
nb_features: 0,
nb_published_features: 0,
nb_comments: 0,
nb_published_features_comments: 0,
nb_contributors: 0,
is_project_type: false,
generate_share_link: false,
feature_assignement: false,
fast_edition_mode: false,
feature_browsing_default_filter: '',
feature_browsing_default_sort: '-created_on',
project_attributes: [],
},
thumbnailFileSrc: '',
scalesTable: [
'1:500 000 000',
'1:250 000 000',
'1:150 000 000',
'1:70 000 000',
'1:35 000 000',
'1:15 000 000',
'1:10 000 000',
'1:4 000 000',
'1:2 000 000',
'1:1 000 000',
'1:500 000',
'1:250 000',
'1:150 000',
'1:70 000',
'1:35 000',
'1:15 000',
'1:8 000',
'1:4 000',
'1:2 000',
'1:1 000',
'1:500',
'1:250',
'1:150',
]
};
},
computed: {
...mapState([
'levelsPermissions',
'projectAttributes'
]),
...mapState('projects', ['project']),
DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
levelPermissionsArc(){
const levels = new Array();
if(this.levelsPermissions) {
this.levelsPermissions.forEach((item) => {
if (item.user_type_id !== 'super_contributor') {
levels.push({
name: this.translateRoleToFrench(item.user_type_id),
value: item.user_type_id,
});
}
if (!this.form.moderation && item.user_type_id === 'moderator') {
levels.pop();
}
});
}
return levels;
},
levelPermissionsPub(){
const levels = new Array();
if (this.levelsPermissions) {
this.levelsPermissions.forEach((item) => {
if (
item.user_type_id !== 'super_contributor' &&
item.user_type_id !== 'admin' &&
item.user_type_id !== 'moderator'
) {
levels.push({
name: this.translateRoleToFrench(item.user_type_id),
value: item.user_type_id,
});
}
});
}
return levels;
},
/**
* Filter out attribute of field type list without option
*/
filteredAttributes() {
return this.projectAttributes.filter(attr => attr.field_type === 'boolean' || attr.options);
},
},
watch: {
'form.moderation': function (newValue){
if(!newValue && this.form.access_level_arch_feature.value === 'moderator') {
this.form.access_level_arch_feature = { name: '', value: '' };
}
}
},
mounted() {
this.definePageType();
if (this.action === 'create') {
this.thumbnailFileSrc = require('@/assets/img/default.png');
this.initPreviewMap();
} else if (this.action === 'edit' || this.action === 'create_from') {
if (!this.project) {
this.$store.dispatch('projects/GET_PROJECT', this.$route.params.slug)
.then((projet) => {
if (projet) {
this.fillProjectForm();
}
});
} else {
this.fillProjectForm();
}
}
let textarea = document.querySelector('textarea');
new TextareaMarkdown(textarea);
},
methods: {
...mapActions('map', [
'INITIATE_MAP'
]),
definePageType() {
if (this.$router.history.current.name === 'project_create') {
this.action = 'create';
} else if (this.$router.history.current.name === 'project_edit') {
this.action = 'edit';
} else if (this.$router.history.current.name === 'project_create_from') {
this.action = 'create_from';
}
},
translateRoleToFrench(role){
switch (role) {
case 'admin':
return 'Administrateur projet';
case 'moderator':
return 'Modérateur';
case 'contributor':
return 'Contributeur';
case 'logged_user':
return 'Utilisateur connecté';
case 'anonymous':
return 'Utilisateur anonyme';
}
},
truncate(n, len) {
const ext = n.substring(n.lastIndexOf('.') + 1, n.length).toLowerCase();
let filename = n.replace('.' + ext, '');
if (filename.length <= len) {
return n;
}
filename = filename.substr(0, len) + (n.length > len ? '[...]' : '');
return filename + '.' + ext;
},
validateImgFile(files, handleFile) {
const url = window.URL || window.webkitURL;
const image = new Image();
image.onload = function () {
handleFile(true);
URL.revokeObjectURL(image.src);
};
image.onerror = function () {
handleFile(false);
URL.revokeObjectURL(image.src);
};
image.src = url.createObjectURL(files);
},
onFileChange(e) {
// * read image file
const files = e.target.files || e.dataTransfer.files;
const _this = this; //* 'this' is different in onload function
function handleFile(isValid) {
if (isValid) {
_this.fileToImport = files[0]; //* store the file to post later
const reader = new FileReader(); //* read the file to display in the page
reader.onload = function (e) {
_this.thumbnailFileSrc = e.target.result;
};
reader.readAsDataURL(_this.fileToImport);
_this.errorThumbnail = [];
} else {
_this.errorThumbnail.push(
"Transférez une image valide. Le fichier que vous avez transféré n'est pas une image, ou il est corrompu."
);
}
}
if (files.length) {
//* check if file is an image and pass callback to handle file
this.validateImgFile(files[0], handleFile);
}
},
goBackNrefresh(slug) {
Promise.all([
this.$store.dispatch('GET_USER_LEVEL_PROJECTS'), //* refresh projects user levels
this.$store.dispatch('GET_USER_LEVEL_PERMISSIONS'), //* refresh projects permissions
this.$store.dispatch('projects/GET_PROJECT', slug), //* refresh current project
]).then(() =>
// * go back to project list
this.$router.push({
name: 'project_detail',
params: { slug },
})
);
},
postProjectThumbnail(projectSlug) {
//* send img to the backend when feature_type is created
if (this.fileToImport) {
const formData = new FormData();
formData.append('file', this.fileToImport);
const url =
this.$store.state.configuration.VUE_APP_DJANGO_API_BASE +
'projects/' +
projectSlug +
'/thumbnail/';
return axios
.put(url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
if (response && response.status === 200) {
this.goBackNrefresh(projectSlug);
}
})
.catch((error) => {
let err_msg =
"Transférez une image valide. Le fichier que vous avez transféré n'est pas une image, ou il est corrompu.";
if (error.response.data[0]) {
err_msg = error.response.data[0];
}
this.errorThumbnail.push(err_msg);
throw error;
});
}
},
checkForm() {
for (const key in this.errors) {
if ((key === 'title' && this.form[key]) || this.form[key].value) {
this.errors[key] = [];
} else if (!this.errors[key].length) {
this.errors[key].push(
key === 'title'
? 'Veuillez compléter ce champ.'
: 'Sélectionnez un choix valide. Ce choix ne fait pas partie de ceux disponibles.'
);
document
.getElementById(`errorlist-${key}`)
.scrollIntoView({ block: 'end', inline: 'nearest' });
return false;
}
}
return true;
},
async postForm() {
if (!this.checkForm()) {
return;
}
const projectData = {
...this.form,
access_level_arch_feature: this.form.access_level_arch_feature.value,
access_level_pub_feature: this.form.access_level_pub_feature.value,
feature_browsing_default_sort: this.form.feature_browsing_default_sort.value,
feature_browsing_default_filter: this.form.feature_browsing_default_filter.value,
};
if (this.action === 'edit') {
await axios
.put((`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}v2/projects/${this.project.slug}/`), projectData)
.then((response) => {
if (response && response.status === 200) {
//* send thumbnail after feature_type was updated
if (this.fileToImport.size > 0) {
this.postProjectThumbnail(this.project.slug);
} else {
this.goBackNrefresh(this.project.slug);
}
}
})
.catch((error) => {
if (error.response && error.response.data.title[0]) {
this.errors.title.push(error.response.data.title[0]);
}
throw error;
});
} else {
let url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}v2/projects/`;
if (this.action === 'create_from') {
url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/duplicate/`;
}
this.loading = true;
await axios
.post(url, projectData)
.then((response) => {
if (response && response.status === 201 && response.data) {
//* send thumbnail after feature_type was created
if (this.fileToImport.size > 0) {
this.postProjectThumbnail(response.data.slug);
} else {
this.goBackNrefresh(response.data.slug);
}
}
this.loading = false;
})
.catch((error) => {
if (error.response && error.response.data.title[0]) {
this.errors.title.push(error.response.data.title[0]);
}
this.loading = false;
throw error;
});
}
},
fillProjectForm() {
//* create a new object to avoid modifying original one
this.form = { ...this.project };
//* if duplication of project, generate new name
if (this.action === 'create_from') {
this.form.title =
this.project.title +
` (Copie-${new Date()
.toLocaleString()
.slice(0, -3)
.replace(',', '')})`;
this.form.is_project_type = false;
}
//* transform string values to objects used with dropdowns
// fill dropdown current selection for archived feature viewing permission
if (this.levelPermissionsArc) {
const accessLevelArc = this.levelPermissionsArc.find(
(el) => el.name === this.project.access_level_arch_feature
);
if (accessLevelArc) {
this.form.access_level_arch_feature = {
name: this.project.access_level_arch_feature,
value: accessLevelArc.value ,
};
}
}
// fill dropdown current selection for published feature viewing permission
if (this.levelPermissionsPub) {
const accessLevelPub = this.levelPermissionsPub.find(
(el) => el.name === this.project.access_level_pub_feature
);
if (accessLevelPub) {
this.form.access_level_pub_feature = {
name: this.project.access_level_pub_feature,
value: accessLevelPub.value ,
};
}
}
// fill dropdown current selection for feature browsing default filtering
const default_filter = this.featureBrowsingOptions.filter.find(
(el) => el.value === this.project.feature_browsing_default_filter
);
if (default_filter) {
this.form.feature_browsing_default_filter = default_filter;
}
// fill dropdown current selection for feature browsing default sorting
const default_sort = this.featureBrowsingOptions.sort.find(
(el) => el.value === this.project.feature_browsing_default_sort
);
if (default_sort) {
this.form.feature_browsing_default_sort = default_sort;
}
this.initPreviewMap();
},
initPreviewMap () {
const map = mapService.getMap();
if (map) mapService.destroyMap();
//On récupère le zoom maximum autorisé par la couche
const maxZoomLayer = this.$store.state.configuration.DEFAULT_BASE_MAP_OPTIONS.maxZoom;
let activeZoom = maxZoomLayer;
if(this.project && this.project.map_max_zoom_level < maxZoomLayer){
activeZoom = this.project.map_max_zoom_level;
}
this.INITIATE_MAP({
el: this.$refs.map,
zoom: activeZoom,
center: this.$store.state.configuration.MAP_PREVIEW_CENTER,
maxZoom: 22,
controls: [],
zoomControl: false,
//On désactive le zoom et le pan => gérer par le composant zoom max
interactions: { dragPan: false, mouseWheelZoom: false }
});
// add default basemap (in other maps the component SidebarLayer handles layers)
mapService.addLayers(
null,
this.$store.state.configuration.DEFAULT_BASE_MAP_SERVICE,
this.$store.state.configuration.DEFAULT_BASE_MAP_OPTIONS,
this.$store.state.configuration.DEFAULT_BASE_MAP_SCHEMA_TYPE
);
//La tuile au dessus du zoom maximum n'existe pas
//On attend un peu qu'elle se charge et on zoom si besoin
setTimeout(() => {
mapService.zoom(this.project ? this.project.map_max_zoom_level : 22);
}, 500);
},
zoomMap() {
mapService.zoom(this.form.map_max_zoom_level);
},
/**
* Updates the value of a project attribute or adds a new attribute if it does not exist.
*
* This function looks for an attribute by its ID. If the attribute exists, its value is updated.
* If the attribute does not exist, a new attribute object is added to the `project_attributes` array.
*
* @param {String} value - The new value to be assigned to the project attribute.
* @param {Number} attributeId - The ID of the attribute to be updated or added.
*/
updateProjectAttributes({ value, attributeId }) {
// Find the index of the attribute in the project_attributes array.
const attributeIndex = this.form.project_attributes.findIndex(el => el.attribute_id === attributeId);
if (attributeIndex !== -1) {
// Directly update the attribute's value if it exists.
this.form.project_attributes[attributeIndex].value = value;
} else {
// Add a new attribute object if it does not exist.
this.form.project_attributes.push({ attribute_id: attributeId, value });
}
},
goToDocumentationFeature() {
window.open(this.$store.state.configuration.VUE_APP_URL_DOCUMENTATION_FEATURE);
}
},
};
</script>
<style media="screen" lang="less">
#form-input-file-logo {
margin-left: auto;
margin-right: auto;
}
.file-logo {
min-height: calc(150px + 2.4285em);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.close.icon:hover {
cursor: pointer;
}
textarea {
height: 10em;
}
.description.preview {
height: 10em;
overflow: scroll;
border: 1px solid rgba(34, 36, 38, .15);
padding: .78571429em 1em;
}
.checkboxes {
padding-left: .5em;
.absolute-right.ui.compact.icon.button {
position: absolute;
right: -2.75em;
top: calc(50% - 1em);
padding: .4em;
}
}
.map-maxzoom-selector {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
input, output {
height: fit-content;
}
output {
white-space: nowrap;
min-width: auto;
}
.range-container {
margin-bottom: 2rem;
}
.map-preview {
margin-top: -1rem;
display: flex;
position: relative;
label {
white-space: nowrap;
font-size: .95em;
margin-right: 1rem;
}
#map {
min-height: 80px;
height: 80px;
width: 150px;
max-width: 150px;
z-index: 1;
}
.no-preview {
position: absolute;
top: 25%;
left: 25%;
text-align: center;
font-size: .75em;
color: #656565;
}
}
}
label[for=feature_browsing] {
padding-left: 2em;
}
label[for=feature_browsing_default_filter],
label[for=feature_browsing_default_sort] {
min-width: 4em;
}
#feature_browsing_filter,
#feature_browsing_sort {
margin-left: 2.5rem;
}
@media only screen and (min-width: 1100px) {
#feature_browsing_filter {
margin-top: -2.25em;
}
#feature_browsing_filter,
#feature_browsing_sort {
float: right;
}
}
</style>
src/views/Project/ProjectMembers.vue 0 → 100644
View file @ ee17a921
<template>
<div id="project-members">
<h1 class="ui header">
Gérer les membres
</h1>
<h4>Ajouter un membre</h4>
<div
id="form-feature-edit"
class="ui form"
name="add-member"
>
<div class="two fields">
<div class="field">
<Dropdown
:options="userOptions"
:selected="newMember.user.name"
:selection.sync="newMember.user"
:search="true"
:clearable="true"
/>
<ul
id="errorlist"
class="errorlist"
>
<li
v-for="error in newMember.errors"
:key="error"
>
{{ error }}
</li>
</ul>
</div>
<div class="field">
<Dropdown
:options="levelOptions"
:selected="newMember.role.name"
:selection.sync="newMember.role"
/>
</div>
</div>
<button
type="button"
class="ui green icon button"
:disabled="!newMember.user.name"
@click="addMember"
>
<i
class="white add icon"
aria-hidden="true"
/>
<span class="padding-1">Ajouter</span>
</button>
</div>
<h4>Modifier le rôle d'un membre</h4>
<div
id="form-members"
class="ui form"
>
<table
class="ui red table"
aria-describedby="Table des membres du projet"
>
<thead>
<tr>
<th scope="col">
Membre
<i
:class="{
down: isSortedAsc('member'),
up: isSortedDesc('member'),
}"
class="icon sort"
aria-hidden="true"
@click="changeSort('member')"
/>
</th>
<th scope="col">
Niveau d'autorisation
<i
:class="{
down: isSortedAsc('role'),
up: isSortedDesc('role'),
}"
class="icon sort"
aria-hidden="true"
@click="changeSort('role')"
/>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="member in projectMembers"
:key="member.username"
>
<td>
{{ member.user.last_name }} {{ member.user.first_name }}<br><em>{{ member.user.username }}</em>
</td>
<td>
<div class="required field online">
<Dropdown
:options="levelOptions"
:selected="member.userLevel.name"
:selection.sync="member.userLevel"
:search="true"
/>
<button
type="button"
class="ui icon button button-hover-red"
data-tooltip="Retirer ce membre"
@click="removeMember(member)"
>
<i
class="times icon"
aria-hidden="true"
/>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="ui divider" />
<button
type="button"
class="ui teal icon button"
@click="saveMembers"
>
<i
class="white save icon"
aria-hidden="true"
/>&nbsp;Enregistrer les changements
</button>
</div>
</div>
</template>
<script>
import axios from '@/axios-client.js';
import { mapMutations, mapState } from 'vuex';
import Dropdown from '@/components/Dropdown.vue';
import { formatUserOption } from '@/utils';
export default {
name: 'ProjectMembers',
components: {
Dropdown,
},
data() {
return {
projectUsers: [],
options: [
{ name: 'Utilisateur connecté', value: 'logged_user' },
{ name: 'Contributeur', value: 'contributor' },
{ name: 'Super Contributeur', value: 'super_contributor' },
{ name: 'Modérateur', value: 'moderator' },
{ name: 'Administrateur projet', value: 'admin' },
],
newMember: {
errors: [],
user: {
name: '',
value: '',
},
role: {
name: 'Contributeur',
value: 'contributor',
},
},
sort: {
column: '',
ascending: true,
},
};
},
computed: {
...mapState('projects', ['project']),
userOptions: function () {
return this.projectUsers
.filter((el) => el.userLevel.value === 'logged_user')
.map((el) => formatUserOption(el.user)); // Format user data to fit dropdown option structure
},
levelOptions: function () {
return this.options.filter(
(el) =>
(this.project && this.project.moderation ? el : el.value !== 'moderator') &&
el.value !== 'logged_user'
);
},
projectMembers() {
return this.projectUsers
.filter((el) => el.userLevel.value !== 'logged_user')
.sort((a, b) => {
if (this.sort.column !== '') {
if (this.sort.column === 'member') {
const textA = a.user.username.toUpperCase();
const textB = b.user.username.toUpperCase();
if (this.sort.ascending) {
return textA < textB ? -1 : textA > textB ? 1 : 0;
} else {
return textA > textB ? -1 : textA < textB ? 1 : 0;
}
} else if (this.sort.column === 'role') {
const textA = a.userLevel.name.toUpperCase();
const textB = b.userLevel.name.toUpperCase();
if (this.sort.ascending) {
return textA < textB ? -1 : textA > textB ? 1 : 0;
} else {
return textA > textB ? -1 : textA < textB ? 1 : 0;
}
}
} else {
return 0;
}
});
},
},
created() {
if (!this.project) {
this.$store.dispatch('projects/GET_PROJECT', this.$route.params.slug);
this.$store.dispatch('projects/GET_PROJECT_INFO', this.$route.params.slug);
}
this.populateMembers();
},
destroyed() {
//* allow user to change page if ever stuck on loader
this.DISCARD_LOADER();
},
methods: {
...mapMutations([
'DISPLAY_MESSAGE',
'DISPLAY_LOADER',
'DISCARD_LOADER'
]),
validateNewMember() {
this.newMember.errors = [];
if (!this.newMember.user.value) {
this.newMember.errors.push('Veuillez compléter ce champ.');
return false;
}
return true;
},
changeUserRole(id, role) {
const indexOfUser = this.projectUsers.findIndex(
(el) => el.user.id === id
);
//* modify its userLever
this.projectUsers[indexOfUser].userLevel = role;
},
addMember() {
if (this.validateNewMember()) {
this.changeUserRole(this.newMember.user.value, this.newMember.role);
//* empty add form
this.newMember.user = { value: '', name: '' };
}
},
isSortedAsc(column) {
return this.sort.column === column && this.sort.ascending;
},
isSortedDesc(column) {
return this.sort.column === column && !this.sort.ascending;
},
changeSort(column) {
if (this.sort.column === column) {
//changer order
this.sort.ascending = !this.sort.ascending;
} else {
this.sort.column = column;
this.sort.ascending = true;
}
},
removeMember(member) {
this.changeUserRole(member.user.id, {
name: 'Utilisateur connecté',
value: 'logged_user',
});
},
/**
* Saves the updated members and their roles for a project.
* Displays a loader while the update is in progress and provides feedback upon completion or error.
*/
saveMembers() {
// Display a loader to indicate that the update process is ongoing
this.DISPLAY_LOADER('Mise à jour des membres du projet en cours ...');
// Prepare the data to be sent in the API request
const data = this.projectUsers.map((member) => {
return {
user: member.user,
level: {
display: member.userLevel.name, // Display name of the user level
codename: member.userLevel.value, // Codename of the user level
},
};
});
// Make an API request to update the project members
axios
.put(
`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/utilisateurs/`,
data
)
.then((response) => {
// Check if the response status is 200 (OK)
if (response.status === 200) {
// Dispatch an action to update the user status in the top right menu
this.$store.dispatch('GET_USER_LEVEL_PROJECTS');
// Display a positive message indicating success
this.DISPLAY_MESSAGE({ comment: 'Permissions mises à jour avec succès', level: 'positive' });
} else {
// Display a generic error message if the response status is not 200
this.DISPLAY_MESSAGE({
comment: "Une erreur s'est produite pendant la mises à jour des permissions",
level: 'negative'
});
}
// Hide the loader regardless of the request result
this.DISCARD_LOADER();
})
.catch((error) => {
// Hide the loader if an error occurs
this.DISCARD_LOADER();
// Determine the error message to display
const errorMessage = error.response && error.response.data && error.response.data.error
? error.response.data.error
: "Une erreur s'est produite pendant la mises à jour des permissions";
// Display the error message
this.DISPLAY_MESSAGE({
comment: errorMessage,
level: 'negative'
});
// Log the error to the console for debugging
console.error(error);
});
},
populateMembers() {
this.DISPLAY_LOADER('Récupération des membres en cours...');
this.$store.dispatch('projects/GET_PROJECT_USERS', this.$route.params.slug).then((members) => {
this.DISCARD_LOADER();
this.projectUsers = members.map((el) => {
return {
userLevel: { name: el.level.display, value: el.level.codename },
...el,
};
});
});
},
},
};
</script>
<style>
.padding-1 {
padding: 0 1em;
}
i.icon.sort:not(.down):not(.up) {
color: rgb(220, 220, 220);
}
.online {
display: flex;
}
</style>
\ No newline at end of file
src/views/Projects/ProjectsList.vue 0 → 100644
View file @ ee17a921
<template>
<div id="projects">
<h2 class="ui horizontal divider header">
PROJETS
</h2>
<div class="flex">
<router-link
v-if="user && user.can_create_project && isOnline"
:to="{ name: 'project_create', params: { action: 'create' } }"
class="ui green basic button"
data-test="create-project"
>
<i
class="plus icon"
aria-hidden="true"
/>
Créer un nouveau projet
</router-link>
<router-link
v-if="user && user.can_create_project && isOnline"
:to="{
name: 'project_type_list',
}"
class="ui blue basic button"
data-test="to-project-models"
>
<i
class="copy icon"
aria-hidden="true"
/>
Accéder à la liste des modèles de projets
</router-link>
</div>
<!-- FILTRES DES PROJETS -->
<ProjectsMenu
:loading="loading"
@filter="setProjectsFilters"
@getData="getData"
@loading="setLoader"
/>
<div
v-if="configuration.DISPLAY_FORBIDDEN_PROJECTS"
id="forbidden-projects"
class="ui toggle checkbox margin-top"
>
<input
:checked="displayForbiddenProjects"
type="checkbox"
@input="toggleForbiddenProjects"
>
<label>
N'afficher que les projets disponibles à la consultation
</label>
</div>
<!-- LISTE DES PROJETS -->
<div
v-if="projects"
class="ui divided items dimmable dimmed"
data-test="project-list"
>
<div :class="['ui inverted dimmer', { active: loading }]">
<div class="ui loader" />
</div>
<ProjectsListItem
v-for="project in projects"
:key="project.slug"
:project="project"
/>
<span
v-if="!projects || projects.length === 0"
>
Vous n'avez accès à aucun projet.
</span>
<!-- PAGINATION -->
<Pagination
v-if="count"
:nb-pages="nbPages"
@page-update="changePage"
/>
</div>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import ProjectsMenu from '@/components/Projects/ProjectsMenu';
import ProjectsListItem from '@/components/Projects/ProjectsListItem';
import Pagination from '@/components/Pagination';
export default {
name: 'ProjectsList',
components: {
ProjectsMenu,
ProjectsListItem,
Pagination
},
data() {
return {
loading: false,
displayForbiddenProjects: false
};
},
computed: {
...mapState([
'configuration',
'user',
'isOnline',
]),
...mapState('projects', [
'projects',
'count',
'filters',
]),
DJANGO_BASE_URL() {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
nbPages() {
return Math.ceil(this.count / 10);
}
},
created() {
this.SET_CURRENT_PAGE(1);
// Empty stored text to search
this.SET_PROJECTS_SEARCH_STATE({ text: null });
// Empty stored project list
this.$store.commit('projects/SET_PROJECT', null);
// Init display of restricted access projects
this.displayForbiddenProjects = this.configuration.DISPLAY_FORBIDDEN_PROJECTS_DEFAULT;
this.setForbiddenProjectsFilter(true);
},
methods: {
...mapMutations('projects', [
'SET_CURRENT_PAGE',
'SET_PROJECTS_FILTER',
'SET_PROJECTS_SEARCH_STATE',
]),
...mapActions('projects', [
'GET_PROJECTS',
]),
getData(page) {
this.loading = true;
this.GET_PROJECTS({ page })
.then(() => {
this.loading = false;
})
.catch(() => {
this.loading = false;
});
},
setLoader(e) {
this.loading = e;
},
changePage(e) {
this.getData(e);
},
setProjectsFilters(e, noUpdate) {
this.SET_PROJECTS_FILTER(e);
// Reset the page number at filter change
this.SET_CURRENT_PAGE(1);
// Wait that all filters are set in store to fetch data when component is created
if (!noUpdate) {
this.getData();
}
},
toggleForbiddenProjects(e) {
this.displayForbiddenProjects = e.target.checked;
this.setForbiddenProjectsFilter();
},
setForbiddenProjectsFilter(noUpdate) {
this.setProjectsFilters({
filter: 'accessible',
value: this.displayForbiddenProjects ? 'true' : null
}, noUpdate);
},
}
};
</script>
<style lang="less" scoped>
#projects {
margin: 0 auto;
.dimmable {
.dimmer {
.loader {
top: 25%;
}
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
#filters-divider {
padding-top: 0;
color: gray !important;
}
#forbidden-projects.checkbox {
font-size: 1.2em;
font-weight: 600;
label {
color: rgb(94, 94, 94);
}
input:checked ~ label::before {
background-color: var(--primary-color, #008c86) !important;
}
input:checked ~ label {
color: var(--primary-color, #008c86) !important;
}
}
</style>
\ No newline at end of file
src/views/Projects/ProjectsTypes.vue 0 → 100644
View file @ ee17a921
<template>
<div id="projects-types">
<h3 class="ui header">
Créer un projet à partir d'un modèle disponible:
</h3>
<div class="ui divided items">
<div
v-for="project in project_types"
:key="project.slug"
class="item"
>
<div class="ui tiny image">
<img
:src="
project.thumbnail.includes('default')
? require('@/assets/img/default.png')
: DJANGO_BASE_URL + project.thumbnail + refreshId()
"
alt="Image associé au projet"
>
</div>
<div class="middle aligned content">
<div class="description">
<router-link
:to="{
name: 'project_create_from',
params: {
slug: project.slug,
},
}"
>
{{ project.title }}
</router-link>
<p>{{ project.description }}</p>
<strong>Projet {{ project.moderation ? '' : 'non' }} modéré</strong>
</div>
<div class="meta">
<span data-tooltip="Date de création">
{{ project.created_on }}&nbsp;
<i
class="calendar icon"
aria-hidden="true"
/>
</span>
</div>
<div class="meta">
<span data-tooltip="Visibilité des signalement publiés">
{{ project.access_level_pub_feature }}&nbsp;<i
class="eye icon"
aria-hidden="true"
/>
</span>
<span data-tooltip="Visibilité des signalement archivés">
{{ project.access_level_arch_feature }}&nbsp;<i
class="archive icon"
aria-hidden="true"
/>
</span>
</div>
</div>
</div>
<span
v-if="!project_types || project_types.length === 0"
>Aucun projet type n'est défini.</span>
</div>
</div>
</template>
<script>
import projectAPI from '@/services/project-api';
export default {
name: 'ProjectTypeList',
data() {
return {
project_types: null,
};
},
computed: {
DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
API_BASE_URL() {
return this.$store.state.configuration.VUE_APP_DJANGO_API_BASE;
},
},
mounted() {
projectAPI.getProjectTypes(this.API_BASE_URL)
.then((data) => {
if (data) {
this.project_types = data;
}
});
},
methods: {
refreshId() {
const crypto = window.crypto || window.msCrypto;
var array = new Uint32Array(1);
return '?ver=' + crypto.getRandomValues(array); // Compliant for security-sensitive use cases
},
},
};
</script>
<style lang="less" scoped>
#projects-types {
max-width: 800px !important;
}
</style>
\ No newline at end of file
src/views/feature/Feature_detail.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div v-frag>
<div class="row">
<div class="fourteen wide column">
<h1 class="ui header">
<div class="content">
{{ feature.title || feature.feature_id }}
<div class="ui icon right floated compact buttons">
<!-- {% if permissions|lookup:'can_create_feature' %} -->
<router-link
:to="{
name: 'ajouter-signalement',
params: { slug_type_signal: $route.params.slug_type_signal },
}"
class="ui button button-hover-orange"
data-tooltip="Ajouter un signalement"
data-position="bottom left"
>
<i class="plus fitted icon"></i>
</router-link>
<!-- {% endif %} {% if permissions|lookup:'can_update_feature' %} -->
<router-link
:to="{
name: 'editer-signalement',
params: {
slug_signal: $route.params.slug_signal,
slug_type_signal: $route.params.slug_type_signal,
},
}"
class="ui button button-hover-orange"
>
<i class="inverted grey pencil alternate icon"></i>
</router-link>
<!-- {% endif %} {% if permissions|lookup:'can_delete_feature' %} -->
<a
@click="isCanceling = true"
id="feature-delete"
class="ui button button-hover-red"
>
<i class="inverted grey trash alternate icon"></i>
</a>
<!-- {% endif %} -->
</div>
<div class="ui hidden divider"></div>
<div class="sub header">
{{ feature.description }}
<!-- | linebreaks -->
</div>
</div>
</h1>
</div>
</div>
<div class="row">
<div class="seven wide column">
<table class="ui very basic table">
<tbody>
<div
v-frag
v-for="(field, index) in feature.feature_data"
:key="'field' + index"
>
<tr v-if="field">
<td>
<b>{{ field.label }}</b>
</td>
<td>
<b>
<i
v-if="
field.field_type === 'boolean' && field.value === true
"
class="olive check icon"
></i>
<i
v-else-if="
field.field_type === 'boolean' && field.value === false
"
class="red times icon"
></i>
<span v-else>
{{ field.value }}
</span>
</b>
</td>
</tr>
</div>
<tr>
<td>Auteur</td>
<td>{{ feature.display_creator }}</td>
</tr>
<tr>
<td>Statut</td>
<td>
<i
v-if="feature.status === 'archived'"
class="grey archive icon"
></i>
<i
v-else-if="feature.status === 'pending'"
class="teal hourglass outline icon"
></i>
<i
v-else-if="feature.status === 'published'"
class="olive check icon"
></i>
<i
v-else-if="feature.status === 'draft'"
class="orange pencil alternate icon"
></i>
{{ feature.get_status_display }}
</td>
</tr>
<tr>
<td>Date de création</td>
<td v-if="feature.created_on">
{{ feature.created_on }}
</td>
</tr>
<tr>
<td>Date de dernière modification</td>
<td v-if="feature.updated_on">
{{ feature.updated_on }}
</td>
</tr>
<tr>
<td>Date d'archivage automatique</td>
<td v-if="feature.archived_on">
{{ feature.archived_on }}
</td>
</tr>
<tr>
<td>Date de suppression automatique</td>
<td v-if="feature.deletion_on">
{{ feature.deletion_on }}
</td>
</tr>
</tbody>
</table>
<!-- <small>{% for link in linked_features %} {% endfor %}</small> // ? EMPTY ?!??? -->
<h3>Liaison entre signalements</h3>
<table class="ui very basic table">
<tbody>
<tr
v-for="(link, index) in linked_features"
:key="link.feature_to.title + index"
>
<td>
{{ link.relation_type }}
<router-link
:to="{
name: 'details-signalement',
params: {
slug_type_signal: link.feature_to.feature_type.slug,
slug_signal: link.feature_to.title,
},
}"
>{{ link.feature_to.title }}</router-link
>
({{ link.feature_to.creator }} -
{{ link.feature_to.created_on }})
</td>
</tr>
</tbody>
</table>
</div>
<div class="seven wide column">
<div id="map"></div>
</div>
</div>
<div class="row">
<div class="seven wide column">
<h2 class="ui header">Pièces jointes</h2>
<div v-for="pj in attachments" :key="pj.title" class="ui divided items">
<div class="item">
<a
class="ui tiny image"
target="_blank"
:href="pj.attachment_file.url"
>
<!-- // ? que faire avec un pdf ? -->
<img v-if="pj.extension === '.pdf'" src="@/assets/img/pdf.png" />
<img v-else :src="DJANGO_BASE_URL + pj.attachment_file" />
</a>
<div class="middle aligned content">
<a
class="header"
target="_blank"
:href="DJANGO_BASE_URL + pj.attachment_file.url"
>{{ pj.title }}</a
>
<div class="description">
{{ pj.info }}
</div>
</div>
</div>
</div>
<i v-if="attachments.length === 0"
>Aucune pièce jointe associée au signalement.</i
>
</div>
<div class="seven wide column">
<h2 class="ui header">Activité et commentaires</h2>
<div id="feed-event" class="ui feed">
<div v-frag v-for="(event, index) in events" :key="'event' + index">
<div v-frag v-if="event.event_type === 'create'">
<div v-if="event.object_type === 'feature'" class="event">
<div class="content">
<div class="summary">
<div class="date">
{{ event.created_on }}
</div>
Création du signalement
<span v-if="user">par {{ event.display_user }}</span>
</div>
</div>
</div>
<div v-else-if="event.object_type === 'comment'" class="event">
<div class="content">
<div class="summary">
<div class="date">
{{ event.created_on }}
</div>
Commentaire
<span v-if="user">par {{ event.display_user }}</span>
</div>
<div class="extra text">
{{ event.related_comment.comment }}
<div v-frag v-if="event.related_comment.attachments">
<div
v-frag
v-for="att in event.related_comment.attachments"
:key="att.title"
>
<br /><a :href="att.url" tarrget="_blank"
><i class="paperclip fitted icon"></i>
{{ att.title }}</a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="event.event_type === 'update'" class="event">
<div class="content">
<div class="summary">
<div class="date">
{{ event.created_on }}
</div>
Signalement mis à jour
<span v-if="user">par {{ event.display_user }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- {% if permissions|lookup:'can_create_feature' %} -->
<div class="ui segment">
<form
id="form-comment"
class="ui form"
method="POST"
enctype="multipart/form-data"
>
<!-- action="{% url 'geocontrib:add_comment' slug=feature.project.slug feature_type_slug=feature.feature_type.slug feature_id=feature.feature_id%}" -->
<!-- {% for hidden in comment_form.hidden_fields %}
{{ hidden }}
{% endfor %} -->
<div
v-if="comment_form.non_field_errors"
class="alert alert-danger"
role="alert"
>
<span v-for="error in comment_form.non_field_errors" :key="error">
{{ error }}
</span>
</div>
<div class="required field">
<label :for="comment_form.comment.id_for_label"
>Ajouter un commentaire</label
>
{{ comment_form.comment.errors }}
<textarea
v-model="comment_form.comment.value"
:name="comment_form.comment.html_name"
rows="2"
></textarea>
</div>
<label>Pièce jointe (facultative)</label>
<div class="two fields">
<div class="field">
<label class="ui icon button" for="attachment_file">
<i class="paperclip icon"></i>
<span class="label">{{
comment_form.attachment_file.value
? comment_form.attachment_file.value
: "Sélectionner un fichier ..."
}}</span>
</label>
<!-- // todo : get image from "C:\\fakepath\..." -->
<input
type="file"
accept="application/pdf, image/jpeg, image/png"
style="display: none"
name="attachment_file"
id="attachment_file"
@change="getAttachmentFileData($event)"
/>
{{ comment_form.attachment_file.errors }}
</div>
<div class="field">
<input
v-model="comment_form.title.value"
type="text"
:name="comment_form.title.html_name"
:id="comment_form.title.id_for_label"
/>
{{ comment_form.title.errors }}
</div>
</div>
<button
@click="postComment"
type="button"
class="ui compact green icon button"
>
<i class="plus icon"></i> Poster le commentaire
</button>
</form>
</div>
</div>
</div>
<div
v-if="isCanceling"
class="ui dimmer modals page transition visible active"
style="display: flex !important"
>
<div
:class="[
'ui mini modal subscription',
{ 'active visible': isCanceling },
]"
>
<i @click="isCanceling = false" class="close icon"></i>
<div class="ui icon header">
<i class="trash alternate icon"></i>
Supprimer le signalement
</div>
<div class="actions">
<form
action="{% url 'geocontrib:feature_delete' slug=feature.project.slug feature_type_slug=feature.feature_type.slug feature_id=feature.feature_id %}"
method="POST"
>
<input type="hidden" name="_method" value="delete" />
<button
@click="deleteFeature"
type="button"
class="ui red compact fluid button"
>
Confirmer la suppression
</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import frag from "vue-frag";
import { mapState } from "vuex";
import { mapUtil } from "@/assets/js/map-util.js";
import featureAPI from "@/services/feature-api";
const axios = require("axios");
export default {
name: "Feature_detail",
directives: {
frag,
},
data() {
return {
isCanceling: false,
mock_linked_features: [
/* {
relation_type: "Doublon",
feature_to: {
title: "Éolienne offshore",
creator: "Mr Dupont",
created_on: new Date().toDateString(),
feature_type: {
title: "Éolienne",
},
},
}, */
],
attachments: [],
// TODO : Récupérer events depuis l'api
events: [],
comment_form: {
attachment_file: {
errors: null,
value: null,
},
title: {
id_for_label: "title",
html_name: "title",
errors: null,
value: null,
},
comment: {
id_for_label: "add-comment",
html_name: "add-comment",
errors: null,
value: null,
},
non_field_errors: [],
},
};
},
computed: {
...mapState(["user"]),
DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
feature: function () {
return (
this.$store.state.feature.features.find(
(el) => el.feature_id === this.$route.params.slug_signal
) || []
);
},
linked_features: function () {
// todo: vérifier avec données réels si ça fonctionne correctement
//return this.mock_linked_features.filter((el) => el.feature_to);
return [];
},
},
methods: {
postComment() {
/* const data = {
comment: this.comment_form.comment.value,
title: this.comment_form.title.value,
attachment_file: this.comment_form.attachment_file.value,
}; */
this.$store.dispatch("feature/POST_COMMENT");
//console.log("POST comment", data);
},
getAttachmentFileData(evt) {
const files = evt.target.files || evt.dataTransfer.files;
const period = files[0].name.lastIndexOf(".");
const fileName = files[0].name.substring(0, period);
const fileExtension = files[0].name.substring(period + 1);
const shortName = fileName.slice(0, 10) + "[...]." + fileExtension;
this.comment_form.attachment_file.value = shortName;
this.comment_form.title.value = shortName;
},
deleteFeature() {
this.$store.dispatch(
"feature/DELETE_FEATURE",
this.$route.params.slug_signal
);
},
initMap() {
var mapDefaultViewCenter =
this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
var mapDefaultViewZoom =
this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
this.map = mapUtil.createMap({
mapDefaultViewCenter,
mapDefaultViewZoom,
});
// Update link to feature list with map zoom and center
mapUtil.addMapEventListener("moveend", function () {
// update link to feature list with map zoom and center
/*var $featureListLink = $("#feature-list-link")
var baseUrl = $featureListLink.attr("href").split("?")[0]
$featureListLink.attr("href", baseUrl +`?zoom=${this.map.getZoom()}&lat=${this.map.getCenter().lat}&lng=${this.map.getCenter().lng}`)*/
});
// Load the layers.
// - if one basemap exists, we load the layers of the first one
// - if not, load the default map and service options
let layersToLoad = null;
var baseMaps;
var project = "";
var layers = [];
if (baseMaps && baseMaps.length > 0) {
// Use active one if exists, otherwise index 0 (first basemap in the list)
const mapOptions =
JSON.parse(localStorage.getItem("geocontrib-map-options")) || {};
const basemapIndex =
mapOptions &&
mapOptions[project] &&
mapOptions[project]["current-basemap-index"]
? mapOptions[project]["current-basemap-index"]
: 0;
layersToLoad = baseMaps[basemapIndex].layers;
layersToLoad.forEach((layerToLoad) => {
layers.forEach((layer) => {
if (layer.id === layerToLoad.id) {
layerToLoad = Object.assign(layerToLoad, layer);
}
});
});
layersToLoad.reverse();
}
mapUtil.addLayers(
layersToLoad,
this.$store.state.configuration.DEFAULT_BASE_MAP.SERVICE,
this.$store.state.configuration.DEFAULT_BASE_MAP.OPTIONS
);
mapUtil.getMap().dragging.disable();
mapUtil.getMap().doubleClickZoom.disable();
mapUtil.getMap().scrollWheelZoom.disable();
var currentFeatureId = this.$route.params.slug_signal;
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${currentFeatureId}/?output=geojson`;
axios
.get(url)
.then((response) => {
const feature = response.data;
if (feature) {
const currentFeature = [feature];
const featureGroup = mapUtil.addFeatures(currentFeature);
mapUtil.getMap().fitBounds(featureGroup.getBounds());
}
})
.catch((error) => {
throw error;
});
},
},
created() {
if (!this.project) {
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
this.$store.commit(
"feature_type/SET_CURRENT_FEATURE_TYPE_SLUG",
this.$route.params.slug_type_signal
);
featureAPI
.getFeatureAttachments(this.$route.params.slug_signal)
.then((data) => (this.attachments = data));
},
mounted() {
this.initMap();
},
};
</script>
<style>
#map {
width: 100%;
height: 100%;
min-height: 250px;
max-height: 70vh;
}
#feed-event .event {
margin-bottom: 1em;
}
#feed-event .event .date {
margin-right: 1em !important;
}
#feed-event .event .extra.text {
margin-left: 107px;
margin-top: 0;
}
</style>
\ No newline at end of file
src/views/feature/Feature_edit.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div v-frag>
<div class="fourteen wide column">
<h1 v-if="feature && currentRouteName === 'editer-signalement'">
Mise à jour du signalement "{{ feature.title || feature.feature_id }}"
</h1>
<h1
v-else-if="feature_type && currentRouteName === 'ajouter-signalement'"
>
Création d'un signalement <small>[{{ feature_type.title }}]</small>
</h1>
<form
id="form-feature-edit"
action=""
method="post"
enctype="multipart/form-data"
class="ui form"
>
<!-- Feature Fields -->
<div class="two fields">
<div class="required field">
<label :for="form.title.id_for_label">{{ form.title.label }}</label>
<input
type="text"
required
:maxlength="form.title.field.max_length"
:name="form.title.html_name"
:id="form.title.id_for_label"
v-model="form.title.value"
@blur="updateStore"
/>
{{ form.title.errors }}
</div>
<div class="required field">
<label :for="form.status.id_for_label">{{
form.status.label
}}</label>
<Dropdown
:options="statusChoices"
:selected="selected_status.name"
:selection.sync="selected_status"
/>
{{ form.status.errors }}
</div>
</div>
<div class="field">
<label :for="form.description.id_for_label">{{
form.description.label
}}</label>
<textarea
:name="form.description.html_name"
rows="5"
v-model="form.description.value"
@blur="updateStore"
></textarea>
{{ form.description.errors }}
</div>
<!-- Geom Field -->
<div class="field">
<label :for="form.geom.id_for_label">{{ form.geom.label }}</label>
<!-- Import GeoImage -->
<div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
<p>
<button
@click="showGeoRef = true"
id="add-geo-image"
type="button"
class="ui compact button"
>
<i class="file image icon"></i>Importer une image géoréférencée
</button>
Vous pouvez utiliser une image géoréférencée pour localiser le
signalement.
</p>
<div v-if="showGeoRef">
<p>
Attention, si vous avez déjà saisi une géométrie, celle issue de
l'image importée l'écrasera.
</p>
<div class="field">
<label>Image (png ou jpeg)</label>
<label class="ui icon button" for="image_file">
<i class="file icon"></i>
<span class="label">Sélectionner une image ...</span>
</label>
<input
type="file"
accept="image/jpeg, image/png"
style="display: none"
ref="file"
v-on:change="handleFileUpload()"
name="image_file"
class="image_file"
id="image_file"
/>
<p class="error-message" style="color: red">
{{ erreurUploadMessage }}
</p>
</div>
<button
@click="georeferencement()"
id="get-geom-from-image-file"
type="button"
class="ui positive right labeled icon button"
>
Importer
<i class="checkmark icon"></i>
</button>
</div>
<p v-if="showGeoPositionBtn">
<button
@click="create_point_geoposition()"
id="create-point-geoposition"
type="button"
class="ui compact button"
>
<i class="ui map marker alternate icon"></i>Positionner le
signalement à partir de votre géolocalisation
</button>
</p>
<span
id="erreur-geolocalisation"
v-if="erreurGeolocalisationMessage"
>
<div class="ui negative message">
<div class="header">
Une erreur est survenue avec la fonctionnalité de
géolocalisation
</div>
<p id="erreur-geolocalisation-message">
{{ erreurGeolocalisationMessage }}
</p>
</div>
<br />
</span>
</div>
{{ form.geom.errors }}
<!-- Map -->
<input
type="hidden"
:name="form.geom.html_name"
:id="form.geom.id_for_label"
v-model="form.geom.value"
@blur="updateStore"
/>
<div class="ui tab active map-container" data-tab="map">
<div id="map"></div>
<!-- // todo: ajouter v-if -->
<!-- {% 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 %} -->
<SidebarLayers v-if="basemaps && map" />
</div>
</div>
<!-- Extra Fields -->
<div class="ui horizontal divider">DONNÉES MÉTIER</div>
<div
v-for="(field, index) in extra_form"
:key="field.field_type + index"
class="field"
>
<FeatureExtraForm :field="field" />
{{ field.errors }}
</div>
<!-- Pièces jointes -->
<div class="ui horizontal divider">PIÈCES JOINTES</div>
<!-- {{ attachment_formset.non_form_errors }} -->
<div id="formsets-attachment">
<!-- {{ attachment_formset.management_form }} -->
<FeatureAttachmentForm
v-for="form in attachmentFormset"
:key="form.dataKey"
:attachmentForm="form"
/>
</div>
<button
@click="add_attachement_formset"
id="add-attachment"
type="button"
class="ui compact basic button button-hover-green"
>
<i class="ui plus icon"></i>Ajouter une pièce jointe
</button>
<!-- Signalements liés -->
<div class="ui horizontal divider">SIGNALEMENTS LIÉS</div>
<!-- {{ linked_formset.non_form_errors }} -->
<div id="formsets-link">
<!-- {{ linked_formset.management_form }} -->
<FeatureLinkedForm
v-for="form in linkedFormset"
:key="form.dataKey"
:linkedForm="form"
:features="features"
/>
</div>
<button
@click="add_linked_formset"
id="add-link"
type="button"
class="ui compact basic button button-hover-green"
>
<i class="ui plus icon"></i>Ajouter une liaison
</button>
<div class="ui divider"></div>
<button @click="postForm" type="button" class="ui teal icon button">
<i class="white save icon"></i> Enregistrer les changements
</button>
</form>
</div>
</div>
</template>
<script>
import frag from "vue-frag";
import { mapGetters, mapState } from "vuex";
import FeatureAttachmentForm from "@/components/feature/FeatureAttachmentForm";
import FeatureLinkedForm from "@/components/feature/FeatureLinkedForm";
import FeatureExtraForm from "@/components/feature/FeatureExtraForm";
import Dropdown from "@/components/Dropdown.vue";
import SidebarLayers from "@/components/map-layers/SidebarLayers";
import featureAPI from "@/services/feature-api";
import L from "leaflet";
import "leaflet-draw";
import { mapUtil } from "@/assets/js/map-util.js";
const axios = require("axios");
import flip from "@turf/flip";
export default {
name: "Feature_edit",
directives: {
frag,
},
components: {
FeatureAttachmentForm,
FeatureLinkedForm,
Dropdown,
SidebarLayers,
FeatureExtraForm,
},
data() {
return {
map: null,
file: null,
showGeoRef: false,
showGeoPositionBtn: true,
erreurGeolocalisationMessage: null,
erreurUploadMessage: null,
attachmentDataKey: 0,
linkedDataKey: 0,
statusChoices: [
{
name: "Brouillon",
value: "draft",
},
{ name: "Publié", value: "published" },
{ name: "Archivé", value: "archived" },
],
form: {
title: {
errors: null,
id_for_label: "name",
field: {
max_length: 30,
},
html_name: "name",
label: "Nom",
value: "",
},
status: {
errors: null,
id_for_label: "status",
html_name: "status",
label: "Statut",
value: "Brouillon",
},
description: {
errors: null,
id_for_label: "description",
html_name: "description",
label: "Description",
value: "",
},
geom: {
label: "Localisation",
value: null,
},
},
};
},
computed: {
...mapState(["project"]),
...mapState("map", ["basemaps"]),
...mapState("feature", [
"attachmentFormset",
"linkedFormset",
"features",
"extra_form",
]),
...mapGetters("feature_type", ["feature_type"]),
currentRouteName() {
return this.$route.name;
},
feature: function () {
return this.$store.state.feature.features.find(
(el) => el.feature_id === this.$route.params.slug_signal
);
},
selected_status: {
get() {
return this.form.status.value;
},
set(newValue) {
this.form.status.value = newValue;
this.updateStore();
},
},
},
watch: {
feature_type() {
this.onFeatureTypeLoaded();
this.initExtraForms();
},
feature(newValue) {
if (this.$route.name === "editer-signalement") {
this.initForm();
this.initExtraForms(newValue);
}
},
},
methods: {
initForm() {
if (this.currentRouteName === "editer-signalement") {
for (let el in this.feature) {
if (el && this.form[el]) {
if (el === "status") {
const value = this.feature[el];
this.form[el].value = this.statusChoices.find(
(el) => el.value === value
);
} else {
this.form[el].value = this.feature[el];
}
}
}
this.updateStore();
}
},
create_point_geoposition() {
function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
var layer = L.circleMarker([latitude, longitude]);
this.add_layer_call_back(layer);
this.map.setView([latitude, longitude]);
}
function error(err) {
this.erreurGeolocalisationMessage = err.message;
}
this.erreurGeolocalisationMessage = null;
if (!navigator.geolocation) {
this.erreurGeolocalisationMessage =
"La géolocalisation n'est pas supportée par votre navigateur.";
} else {
navigator.geolocation.getCurrentPosition(
success.bind(this),
error.bind(this)
);
}
},
handleFileUpload() {
this.file = this.$refs.file.files[0];
console.log(">>>> 1st element in files array >>>> ", this.file);
},
georeferencement() {
console.log("georeferencement");
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}exif-geom-reader/`;
let formData = new FormData();
formData.append("file", this.file);
console.log(">> formData >> ", formData);
let self = this;
axios
.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then(function () {
console.log("SUCCESS!!");
})
.catch(function () {
console.log("FAILURE!!");
self.erreurUploadMessage = "FAILURE!!";
});
},
initExtraForms(feature) {
function findCurrentValue(label) {
const field = feature.feature_data.find((el) => el.label === label);
return field ? field.value : null;
}
let extraForm = this.feature_type.customfield_set.map((field) => {
return {
...field,
//* add value field to extra forms from feature_type and existing values if feature is defined
value: feature ? findCurrentValue(field.label) : null,
};
});
//}
this.$store.commit("feature/SET_EXTRA_FORM", extraForm);
},
add_attachement_formset() {
this.$store.commit("feature/ADD_ATTACHMENT_FORM", {
dataKey: this.attachmentDataKey,
}); // * create an object with the counter in store
this.attachmentDataKey += 1; // * increment counter for key in v-for
},
addExistingAttachementFormset(attachementFormset) {
for (const attachment of attachementFormset) {
console.log("attachment", attachment);
this.$store.commit("feature/ADD_ATTACHMENT_FORM", {
dataKey: this.attachmentDataKey,
title: attachment.title,
attachment_file: attachment.attachment_file,
info: attachment.info,
id: attachment.id,
});
this.attachmentDataKey += 1;
}
},
add_linked_formset() {
this.$store.commit("feature/ADD_LINKED_FORM", this.linkedDataKey); // * create an object with the counter in store
this.linkedDataKey += 1; // * increment counter for key in v-for
},
updateStore() {
this.$store.commit("feature/UPDATE_FORM", {
title: this.form.title.value,
status: this.form.status.value,
description: this.form.description,
geometry: this.form.geom.value,
feature_id: this.feature ? this.feature.feature_id : "",
});
},
postForm() {
if (this.form.title.value) {
this.form.title.errors = null;
this.$store.dispatch("feature/SEND_FEATURE", this.currentRouteName);
} else {
this.form.title.errors = "Veuillez compléter ce champ.";
}
},
onFeatureTypeLoaded() {
var geomLeaflet = {
point: "circlemarker",
linestring: "polyline",
polygon: "polygon",
};
// console.log(this.feature_type)
var geomType = this.feature_type.geom_type;
var drawConfig = {
polygon: false,
marker: false,
polyline: false,
rectangle: false,
circle: false,
circlemarker: false,
};
drawConfig[geomLeaflet[geomType]] = true;
L.drawLocal = {
draw: {
toolbar: {
actions: {
title: "Annuler le dessin",
text: "Annuler",
},
finish: {
title: "Terminer le dessin",
text: "Terminer",
},
undo: {
title: "Supprimer le dernier point dessiné",
text: "Supprimer le dernier point",
},
buttons: {
polyline: "Dessiner une polyligne",
polygon: "Dessiner un polygone",
rectangle: "Dessiner un rectangle",
circle: "Dessiner un cercle",
marker: "Dessiner une balise",
circlemarker: "Dessiner un point",
},
},
handlers: {
circle: {
tooltip: {
start: "Cliquer et glisser pour dessiner le cercle.",
},
radius: "Rayon",
},
circlemarker: {
tooltip: {
start: "Cliquer sur la carte pour placer le point.",
},
},
marker: {
tooltip: {
start: "Cliquer sur la carte pour placer la balise.",
},
},
polygon: {
tooltip: {
start: "Cliquer pour commencer à dessiner.",
cont: "Cliquer pour continuer à dessiner.",
end: "Cliquer sur le premier point pour terminer le dessin.",
},
},
polyline: {
error: "<strong>Error:</strong> shape edges cannot cross!",
tooltip: {
start: "Cliquer pour commencer à dessiner.",
cont: "Cliquer pour continuer à dessiner.",
end: "Cliquer sur le dernier point pour terminer le dessin.",
},
},
rectangle: {
tooltip: {
start: "Cliquer et glisser pour dessiner le rectangle.",
},
},
simpleshape: {
tooltip: {
end: "Relâcher la souris pour terminer de dessiner.",
},
},
},
},
edit: {
toolbar: {
actions: {
save: {
title: "Sauver les modifications",
text: "Sauver",
},
cancel: {
title:
"Annuler la modification, annule toutes les modifications",
text: "Annuler",
},
clearAll: {
title: "Effacer l'objet",
text: "Effacer",
},
},
buttons: {
edit: "Modifier l'objet",
editDisabled: "Aucun objet à modifier",
remove: "Supprimer l'objet",
removeDisabled: "Aucun objet à supprimer",
},
},
handlers: {
edit: {
tooltip: {
text: "Faites glisser les marqueurs ou les balises pour modifier l'élément.",
subtext: "Cliquez sur Annuler pour annuler les modifications..",
},
},
remove: {
tooltip: {
text: "Cliquez sur un élément pour le supprimer.",
},
},
},
},
};
this.drawnItems = new L.FeatureGroup();
this.map.addLayer(this.drawnItems);
this.drawControlFull = new L.Control.Draw({
position: "topright",
edit: {
featureGroup: this.drawnItems,
},
draw: drawConfig,
});
this.drawControlEditOnly = new L.Control.Draw({
position: "topright",
edit: {
featureGroup: this.drawnItems,
},
draw: false,
});
if (this.currentRouteName === "editer-signalement") {
this.map.addControl(this.drawControlEditOnly);
} else this.map.addControl(this.drawControlFull);
this.map.on(
"draw:created",
function (e) {
var layer = e.layer;
this.add_layer_call_back(layer);
}.bind(this)
);
//var wellknown;// TODO Remplacer par autre chose
this.map.on(
"draw:edited",
function (e) {
var layers = e.layers;
let self = this;
layers.eachLayer(function (layer) {
//this.updateGeomField(wellknown.stringify(layer.toGeoJSON()))
self.updateGeomField(layer.toGeoJSON());
});
}.bind(this)
);
this.map.on(
"draw:deleted",
function () {
this.drawControlEditOnly.remove(this.map);
this.drawControlFull.addTo(this.map);
this.updateGeomField("");
if (geomType === "point") {
this.showGeoPositionBtn = true;
this.erreurGeolocalisationMessage = "";
}
}.bind(this)
);
},
updateMap(map, geomFeatureJSON) {
this.drawnItems.clearLayers();
console.log("update map");
var geomType = this.feature_type.geom_type;
if (geomFeatureJSON) {
var geomJSON = flip(geomFeatureJSON.geometry); //turf.flip(geomFeatureJSON)
if (geomType === "point") {
L.circleMarker(geomJSON.coordinates).addTo(this.drawnItems);
} else if (geomType === "linestring") {
L.polyline(geomJSON.coordinates).addTo(this.drawnItems);
} else if (geomType === "polygon") {
L.polygon(geomJSON.coordinates).addTo(this.drawnItems);
}
this.map.fitBounds(this.drawnItems.getBounds());
} else {
this.map.setView(
this.$store.state.configuration.DEFAULT_MAP_VIEW.center,
this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom
);
}
},
updateGeomField(newGeom) {
//this.geometry = newGeom;
this.form.geom.value = newGeom.geometry;
this.updateStore();
},
initMap() {
//console.log(drawnItems);
//console.log(configuration);
var mapDefaultViewCenter =
this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
var mapDefaultViewZoom =
this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
// Create the map, then init the layers and features
this.map = mapUtil.createMap({
mapDefaultViewCenter,
mapDefaultViewZoom,
});
const currentFeatureId = this.$route.params.slug_signal;
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
axios
.get(url)
.then((response) => {
//console.log(response);
const features = response.data.features;
if (features) {
const allFeaturesExceptCurrent = features.filter(
(feat) => feat.id !== currentFeatureId
);
mapUtil.addFeatures(allFeaturesExceptCurrent);
if (this.currentRouteName === "editer-signalement") {
const currentFeature = features.filter(
(feat) => feat.id === currentFeatureId
)[0];
this.updateMap(this.map, currentFeature);
}
}
})
.catch((error) => {
throw error;
});
document.addEventListener("change-layers-order", (event) => {
// Reverse is done because the first layer in order has to be added in the map in last.
// Slice is done because reverse() changes the original array, so we make a copy first
mapUtil.updateOrder(event.detail.layers.slice().reverse());
});
},
add_layer_call_back(layer) {
layer.addTo(this.drawnItems);
this.drawControlFull.remove(this.map);
this.drawControlEditOnly.addTo(this.map);
//var wellknown;// TODO Remplacer par autre chose
//this.updateGeomField(wellknown.stringify(layer.toGeoJSON()))
this.updateGeomField(layer.toGeoJSON());
if (this.feature_type.geomType === "point") {
this.showGeoPositionBtn = false;
this.erreurGeolocalisationMessage = "";
}
},
},
created() {
if (!this.project) {
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
this.$store.commit(
"feature_type/SET_CURRENT_FEATURE_TYPE_SLUG",
this.$route.params.slug_type_signal
);
// todo : mutualize in store with feature_detail.vue
if (this.$route.params.slug_signal) {
featureAPI
.getFeatureAttachments(this.$route.params.slug_signal)
.then((data) => this.addExistingAttachementFormset(data));
} else { //* be sure that previous attachemntFormset has been cleared for creation
this.$store.commit("feature/CLEAR_ATTACHMENT_FORM");
}
},
mounted() {
this.initForm();
this.initMap();
},
};
// TODO : add script from django and convert:
</script>
<style>
#map {
height: 70vh;
width: 100%;
border: 1px solid grey;
}
@media only screen and (max-width: 767px) {
#map {
height: 80vh;
}
}
/* // ! missing style in semantic.min.css, je ne comprends pas comment... */
.ui.right.floated.button {
float: right;
margin-right: 0;
margin-left: 0.25em;
}
/* // ! margin écrasé par class last-child first-child, pas normal ... */
.ui.segment {
margin: 1rem 0 !important;
}
</style>
src/views/feature/Feature_list.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div class="fourteen wide column">
<script type="application/javascript" :src="baseUrl+'/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'"></script>
<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>
{{ getFilteredFeatures().length }} signalement{{
getFilteredFeatures().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="showAddFeature = !showAddFeature"
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="showAddFeature"
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.slug },
}"
v-for="(type, index) in feature_types"
:key="type.slug + index"
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>
<Dropdown
@update:selection="onFilterTypeChange($event)"
:options="form.type.choices"
:selected="form.type.selected"
:selection.sync="form.type.selected"
:search="true"
/>
</div>
<div class="field wide four column">
<label>Statut</label>
<!-- //* giving an object mapped on key name -->
<Dropdown
@update:selection="onFilterStatusChange($event)"
:options="form.status.choices"
:selected="form.status.selected.name"
:selection.sync="form.status.selected"
:search="true"
/>
</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" v-model="form.title" @input="onFilterChange()" />
<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 // todo : brancher sur la carte probablement -->
<input type="hidden" name="zoom" v-model="zoom" />
<input type="hidden" name="lat" v-model="lat" />
<input type="hidden" name="lng" v-model="lng" />
</form>
<div v-show="showMap" class="ui tab active map-container" data-tab="map">
<div id="map"></div>
<SidebarLayers v-if="baseMaps && map"/>
</div>
<div v-show="!showMap" data-tab="list" class="dataTables_wrapper no-footer">
<table id="table-features" class="ui compact table">
<thead>
<tr>
<th class="center">Statut <i :class="{ down: isSortedAsc('statut'),up:isSortedDesc('statut') }" class="icon sort" @click="changeSort('statut')"/></th>
<th class="center">Type <i :class="{ down: isSortedAsc('type'),up:isSortedDesc('type') }" class="icon sort" @click="changeSort('type')"/></th>
<th class="center">Nom <i :class="{ down: isSortedAsc('nom'),up:isSortedDesc('nom') }" class="icon sort" @click="changeSort('nom')"/></th>
<th class="center">Dernière modification <i :class="{ down: isSortedAsc('updated_on'),up:isSortedDesc('updated_on') }" class="icon sort" @click="changeSort('updated_on')"/></th>
<th class="center" v-if="user" >Auteur <i :class="{ down: isSortedAsc('display_creator'),up:isSortedDesc('display_creator') }" class="icon sort" @click="changeSort('display_creator')"/></th>
</tr>
</thead>
<tbody>
<tr
v-for="(feature, index) in getPaginatedFeatures()"
:key="index"
>
<td class="center">
<div v-if="feature.properties.status.value == 'archived'" data-tooltip="Archivé">
<i class="grey archive icon"></i>
</div>
<div
v-else-if="feature.properties.status.value == 'pending'"
data-tooltip="En attente de publication"
>
<i class="teal hourglass outline icon"></i>
</div>
<div
v-else-if="feature.properties.status.value == 'published'"
data-tooltip="Publié"
>
<i class="olive check icon"></i>
</div>
<div
v-else-if="feature.properties.status.value == 'draft'"
data-tooltip="Brouillon"
>
<i class="orange pencil alternate icon"></i>
</div>
</td>
<td class="center">
<router-link
:to="{
name: 'details-type-signalement',
params: { feature_type_slug: feature.properties.feature_type.title },
}"
>
{{ feature.properties.feature_type.title }}
</router-link>
</td>
<td class="center">
<router-link
:to="{
name: 'details-signalement',
params: {
slug_type_signal: feature.properties.feature_type.slug,
slug_signal: feature.properties.slug || feature.id,
},
}"
>{{ getFeatureDisplayName(feature)}}</router-link
>
</td>
<td class="center">
<!-- |date:'Ymd' -->
{{ feature.properties.updated_on }}
</td>
<td class="center" v-if="user">
{{ feature.properties.display_creator }}
</td>
</tr>
<tr v-if="getFilteredFeatures().length === 0" class="odd">
<td colspan="5" class="dataTables_empty" valign="top">
Aucune donnée disponible
</td>
</tr>
</tbody>
</table>
<div
class="dataTables_info"
id="table-features_info"
role="status"
aria-live="polite"
>
Affichage de l'élément {{ pagination.start + 1 }} à
{{ pagination.end + 1 }} sur {{ getFilteredFeatures().length }} éléments
</div>
<div
class="dataTables_paginate paging_simple_numbers"
id="table-features_paginate"
> <a
@click="toPreviousPage"
class="paginate_button previous disabled"
aria-controls="table-features"
data-dt-idx="0"
tabindex="0"
id="table-features_previous"
>Précédent</a
>
<!-- <span> <a
v-for="(page, index) in getNbPages()"
:key="'page' + index"
class="paginate_button current"
aria-controls="table-features"
data-dt-idx="1"
tabindex="0"
>{{index}}</a
> </span>
<span class="ellipsis">…</span> -->
<a
class="paginate_button next"
aria-controls="table-features"
data-dt-idx="7"
tabindex="0"
id="table-features_next"
@click="toNextPage"
>Suivant</a
>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import L from "leaflet";
import { mapUtil } from "@/assets/js/map-util.js";
import SidebarLayers from "@/components/map-layers/SidebarLayers";
import Dropdown from "@/components/Dropdown.vue";
const axios = require("axios");
export default {
name: "Feature_list",
components: {
SidebarLayers,
Dropdown,
},
data() {
return {
form: {
type: {
selected: null,
choices: [],
},
status: {
selected: {
name: null,
value: null,
},
choices: [
{
name: "Brouillon",
value: "draft",
},
{
name: "En attente de publication",
value: "pending",
},
{
name: "Publié",
value: "published",
},
{
name: "Archivé",
value: "archived",
},
],
},
title: null,
},
pagination: {
pagesize:15,
start: 0,
end: 14,
},
sort:{
column:'',
ascending:true
},
geojsonFeatures:[],
filterStatus:null,
filterType:null,
baseUrl:this.$store.state.configuration.BASE_URL,
map:null,
zoom:null,
lat:null,
lng:null,
showMap: true,
showAddFeature: false,
};
},
computed: {
...mapGetters(["project"]),
...mapState(["user"]),
...mapState("feature", ["features"]),
...mapState("feature_type", ["feature_types"]),
baseMaps(){
return this.$store.state.map.basemaps;
},
},
methods: {
getFeatureDisplayName(feature){
return feature.properties.title || feature.id;
},
getPaginatedFeatures() {
let filterdFeatures=[...this.getFilteredFeatures()];
// Ajout du tri
if(this.sort.column!=''){
filterdFeatures=filterdFeatures.sort((a,b)=>{
let aProp=this.getFeatureDisplayName(a);
let bProp=this.getFeatureDisplayName(b);
if(this.sort.column=='statut') {
aProp=a.properties.status.value;
bProp=b.properties.status.value;
}
else if(this.sort.column=='type') {
aProp=a.properties.feature_type.title;
bProp=b.properties.feature_type.title;
}
else if(this.sort.column=='updated_on') {
aProp=a.properties.updated_on;
bProp=b.properties.updated_on;
}
else if(this.sort.column=='display_creator') {
aProp=a.properties.display_creator;
bProp=b.properties.display_creator;
}
//ascending
if(this.sort.ascending){
if(aProp < bProp) { return -1; }
if(aProp > bProp) { return 1; }
return 0;
}
else{
//descending
if(aProp < bProp) { return 1; }
if(aProp > bProp) { return -1; }
return 0;
}
})
}
return filterdFeatures.slice(
this.pagination.start,
this.pagination.end
);
},
isSortedAsc(column){
return this.sort.column==column && this.sort.ascending;
},
isSortedDesc(column){
return this.sort.column==column && !this.sort.ascending;
},
changeSort(column){
if(this.sort.column==column){
//changer order
this.sort.ascending=!this.sort.ascending;
}else{
this.sort.column=column;
this.sort.ascending=true;
}
},
onFilterStatusChange(newvalue){
this.filterStatus=null;
if(newvalue){
console.log("filter change",newvalue.value);
this.filterStatus=newvalue.value;
}
this.onFilterChange();
},
onFilterTypeChange(newvalue){
this.filterType=null;
if(newvalue){
console.log("filter change",newvalue);
this.filterType=newvalue;
}
this.onFilterChange();
},
onFilterChange() {
var features = this.getFilteredFeatures();
this.featureGroup.clearLayers();
this.featureGroup = mapUtil.addFeatures(features, {});
if (features.length > 0) {
mapUtil.getMap().fitBounds(this.featureGroup.getBounds());
}
},
getFilteredFeatures() {
let results = this.geojsonFeatures;
if (this.filterType) {
results = results.filter(
(el) => el.properties.feature_type.title === this.filterType
);
}
if (this.filterStatus) {
console.log("filter by" + this.filterStatus);
results = results.filter(
(el) => el.properties.status.value === this.filterStatus
);
}
if (this.form.title) {
results = results.filter((el) => {
if (el.properties.title) {
return el.properties.title
.toLowerCase()
.includes(this.form.title.toLowerCase());
} else
return el.id.toLowerCase().includes(this.form.title.toLowerCase());
}
);
}
return results;
},
getNbPages(){
return Math.round(this.getFilteredFeatures().length/this.pagination.pagesize);
},
toPreviousPage() {
if (this.pagination.start > 0) {
this.pagination.start -= this.pagination.pagesize;
this.pagination.end -= this.pagination.pagesize;
}
},
toNextPage() {
if (this.pagination.end < this.getFilteredFeatures().length) {
this.pagination.start += this.pagination.pagesize;
this.pagination.end += this.pagination.pagesize;
}
},
loadFeatures(features){
this.geojsonFeatures = features;
console.log(this.geojsonFeatures);
const urlParams = new URLSearchParams(window.location.search);
const featureType = urlParams.get("feature_type");
const featureStatus = urlParams.get("status");
const featureTitle = urlParams.get("title");
this.featureGroup = mapUtil.addFeatures(this.geojsonFeatures, {
featureType,
featureStatus,
featureTitle,
});
// Fit the map to bound only if no initial zoom and center are defined
if (
(this.lat === "" || this.lng === "" || this.zoom === "") &&
this.geojsonFeatures.length > 0
) {
mapUtil.getMap().fitBounds(this.featureGroup.getBounds());
}
this.form.type.choices = [
//* converting Set to an Array with spread "..."
...new Set(this.geojsonFeatures.map((el) => el.properties.feature_type.title)), //* use Set to eliminate duplicate values
];
},
addGeocoders(){
let geocoder;
// Get the settings.py variable SELECTED_GEOCODER_PROVIDER. This way avoids XCC attacks
const geocoderLabel =
this.$store.state.configuration.SELECTED_GEOCODER.PROVIDER;
if (geocoderLabel) {
const LIMIT_RESULTS = 5;
if (
geocoderLabel ===
this.$store.state.configuration.GEOCODER_PROVIDERS.ADDOK
) {
geocoder = L.Control.Geocoder.addok({ limit: LIMIT_RESULTS });
} else if (
geocoderLabel ===
this.$store.state.configuration.GEOCODER_PROVIDERS.PHOTON
) {
geocoder = L.Control.Geocoder.photon();
} else if (
geocoderLabel ===
this.$store.state.configuration.GEOCODER_PROVIDERS.NOMINATIM
) {
geocoder = L.Control.Geocoder.nominatim();
}
L.Control.geocoder({
placeholder: "Chercher une adresse...",
geocoder: geocoder,
}).addTo(this.map);
}
},
},
created() {
if (!this.project) {
//this.$store.dispatch("GET_PROJECT_MESSAGES", this.$route.params.slug);
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
},
mounted() {
this.zoom = this.$route.query.zoom||'';
this.lat = this.$route.query.lat||'';
this.lng = this.$route.query.lng||'';
var mapDefaultViewCenter = this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
var mapDefaultViewZoom = this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
this.map=mapUtil.createMap({
zoom:this.zoom,
lat:this.lat,
lng:this.lng,
mapDefaultViewCenter,
mapDefaultViewZoom,
});
document.addEventListener("change-layers-order", (event) => {
// Reverse is done because the first layer in order has to be added in the map in last.
// Slice is done because reverse() changes the original array, so we make a copy first
mapUtil.updateOrder(event.detail.layers.slice().reverse());
});
// --------- End sidebar events ----------
console.log(this.$store.state.map.geojsonFeatures);
if(this.$store.state.map.geojsonFeatures){
this.loadFeatures(this.$store.state.map.geojsonFeatures);
}
else{
const url=`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
axios.get(url)
.then((response) => {
this.loadFeatures(response.data.features);
})
.catch((error) => {
throw error;
});
}
setTimeout(
function () {
this.addGeocoders();
}.bind(this), 1000)
},
};
</script>
<style>
#map {
width: 100%;
min-height: 300px;
height: calc(100vh - 300px);
border: 1px solid grey;
/* To not hide the filters */
z-index: 1;
}
.center{
text-align: center !important;
}
#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%;
}
}
/* datatables */
.dataTables_wrapper {
position: relative;
clear: both;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: #333;
}
.dataTables_wrapper .dataTables_info {
clear: both;
float: left;
padding-top: 0.755em;
}
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #333 !important;
border: 1px solid #979797;
background-color: white;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #fff),
color-stop(100%, #dcdcdc)
);
background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
color: #333 !important;
border: 1px solid transparent;
border-radius: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
</style>
src/views/feature_type/Feature_type_detail.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<!-- <div>
<h1>{{ feature_type_slug }}</h1>
{{ feature_type }}
</div> -->
<div v-if="structure" class="row">
<div class="five wide column">
<div class="ui attached secondary segment">
<h1 class="ui center aligned header">
<img
v-if="structure.geom_type == 'point'"
class="ui medium image"
src="@/assets/img/marker.png"
/>
<img
v-if="structure.geom_type == 'linestring'"
class="ui medium image"
src="@/assets/img/line.png"
/>
<img
v-if="structure.geom_type == 'polygon'"
class="ui medium image"
src="@/assets/img/polygon.png"
/>
{{ structure.title }}
</h1>
</div>
<div class="ui attached segment">
<div class="ui basic segment">
<div class="ui horizontal tiny statistic">
<div class="value">
{{ features.length }}
</div>
<div class="label">
Signalement{{ features.length > 1 ? "s" : "" }}
</div>
</div>
<h3 class="ui header">Champs</h3>
<div class="ui divided list">
<div
v-for="field in structure.customfield_set"
:key="field.label"
class="item"
>
<div class="right floated content">
<div class="description">{{ field.field_type }}</div>
</div>
<div class="content">{{ field.label }} ({{ field.name }})</div>
</div>
</div>
</div>
</div>
<div class="ui bottom attached secondary segment">
<!-- // ToDo : gérer permissions -->
<!-- <div v-if="permissions.can_create_feature" class="ui styled accordion"> -->
<div class="ui styled accordion">
<div
@click="toggleShowImport"
:class="['title', { active: showImport }]"
>
<i class="dropdown icon"></i>
Importer des signalements
</div>
<div :class="['content', { active: showImport }]">
<div id="form-import-features" class="ui form">
<div class="field">
<label class="ui icon button" for="json_file">
<i class="file icon"></i>
<span class="label">{{ fileToImport.name }}</span>
</label>
<input
@change="onFileChange"
type="file"
accept="application/json, .json, .geojson"
style="display: none"
name="json_file"
id="json_file"
/>
</div>
<button
:disabled="fileToImport.size == 0"
@click="importGeoJson"
class="ui fluid teal icon button"
>
<i class="upload icon"></i> Lancer l'import
</button>
<ImportTask
v-if="importFeatureTypeData && importFeatureTypeData.length"
:data="importFeatureTypeData"
/>
</div>
</div>
<div
@click="toggleShowImport"
:class="['title', { active: !showImport }]"
>
<i class="dropdown icon"></i>
Exporter les signalements
</div>
<div :class="['content', { active: !showImport }]">
<p>
Vous pouvez télécharger l'ensemble des signalements ayant le
statut publiés pour ce type.
</p>
<button
type="button"
class="ui fluid teal icon button"
@click="exportFeatures"
>
<i class="download icon"></i> Exporter
</button>
<!-- // todo gérer export -->
</div>
</div>
</div>
</div>
<div class="nine wide column">
<h3 class="ui header">Derniers signalements</h3>
<div
v-for="(feature, index) in lastFeatures"
:key="feature.feature_id + index"
class="ui small header"
>
<span v-if="feature.status == 'archived'" data-tooltip="Archivé">
<i class="grey archive icon"></i>
</span>
<span
v-else-if="feature.status == 'pending'"
data-tooltip="En attente de publication"
>
<i class="teal hourglass outline icon"></i>
</span>
<span v-else-if="feature.status == 'published'" data-tooltip="Publié">
<i class="olive check icon"></i>
</span>
<span v-else-if="feature.status == 'draft'" data-tooltip="Brouillon">
<i class="orange pencil alternate icon"></i>
</span>
<router-link
:to="{
name: 'details-signalement',
params: {
slug: project.slug,
slug_type_signal: feature.feature_type.slug,
slug_signal: feature.feature_id,
},
}"
>
{{ feature.title || feature.feature_id }}
</router-link>
<div class="sub header">
<div>
{{
feature.description
? feature.description.substring(0, 200)
: "Pas de description disponible"
}}
</div>
<div>
Créé le {{ feature.created_on }}
<span v-if="$store.state.user.is_authenticated">
par {{ feature.display_creator }}</span
>
</div>
</div>
</div>
<router-link
v-if="project"
:to="{ name: 'liste-signalements', params: { slug: project.slug } }"
class="ui right labeled icon button"
>
<i class="right arrow icon"></i>
Voir tous les signalements
</router-link>
<!-- v-if="permissions.can_create_feature" -->
<router-link
:to="{
name: 'ajouter-signalement',
params: { slug_type_signal: structure.slug },
}"
class="ui icon button button-hover-green"
>
Ajouter un signalement
</router-link>
<br /><!-- // ToDo : gérer permissions -->
</div>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import ImportTask from "@/components/ImportTask";
export default {
name: "Feature_type_detail",
components: {
ImportTask: ImportTask,
},
data() {
return {
fileToImport: {
name: "Sélectionner un fichier GeoJSON ...",
size: 0,
},
showImport: false,
};
},
computed: {
...mapGetters(["project"]),
...mapState("feature", ["features"]),
...mapState("feature_type", ["feature_types", "importFeatureTypeData"]),
structure: function () {
// * je ne sais pas pourquoi ça s'appelle structure
if (this.feature_types) {
return this.feature_types.find(
(el) => el.slug === this.$route.params.feature_type_slug
);
}
return null;
},
lastFeatures: function () {
return this.features.slice(0, 5);
},
},
methods: {
toggleShowImport() {
this.showImport = !this.showImport;
if (this.showImport) {
this.$store.dispatch("feature_type/GET_IMPORTS", this.structure.slug);
}
},
onFileChange(e) {
const files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.fileToImport = files[0]; // todo : remove this value from state as it stored (first attempt didn't work)
this.$store.commit("feature_type/SET_FILE_TO_IMPORT", this.fileToImport);
},
importGeoJson() {
this.$store.dispatch("feature_type/SEND_FEATURES_FROM_GEOJSON", {
slug: this.$route.params.slug,
feature_type_slug: this.$route.params.feature_type_slug,
fileToImport: this.fileToImport,
});
},
exportFeatures() {
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature-type/${this.$route.params.feature_type_slug}/export/`;
console.log(url)
window.open(url);
},
},
created() {
if (!this.project) {
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
this.$store.commit(
"feature_type/SET_CURRENT_FEATURE_TYPE_SLUG",
this.$route.params.slug_type_signal
);
},
};
</script>
\ No newline at end of file
src/views/feature_type/Feature_type_edit.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div v-frag>
<div id="message" class="fullwidth">
<div v-if="error" class="ui negative message">
<p><i class="cross icon"></i> {{ error }}</p>
</div>
</div>
<div class="fourteen wide column">
<form
id="form-type-edit"
action=""
method="post"
enctype="multipart/form-data"
class="ui form"
>
<h1 v-if="action === 'create'">
Créer un nouveau type de signalement pour le projet "{{
project.title
}}"
</h1>
<h1 v-if="feature_type && action === 'edit'">
Éditer le type de signalement "{{ feature_type.title }}" pour le
projet "{{ project.title }}"
</h1>
<p v-if="action === 'create'">
Ces champs par défaut existent pour tous les types de signalement:
</p>
<div class="two fields">
<div class="required field">
<label :for="form.title.id_for_label">{{ form.title.label }}</label>
<input
type="text"
required
:maxlength="form.title.field.max_length"
:name="form.title.html_name"
:id="form.title.id_for_label"
v-model="form.title.value"
@blur="updateStore"
/>
<ul id="errorlist" class="errorlist">
<li v-for="error in form.title.errors" :key="error">
{{ error }}
</li>
</ul>
</div>
<div class="required field">
<label :for="form.geom_type.id_for_label">{{
form.geom_type.label
}}</label>
<Dropdown
:options="geomTypeChoices"
:selected="selectedGeomType"
:selection.sync="selectedGeomType"
/>
<!-- {{ form.geom_type.errors }} -->
</div>
<div class="required field">
<label :for="form.color.id_for_label">{{ form.color.label }}</label>
<input
type="color"
required
style="width: 100%; height: 38px"
:name="form.color.html_name"
:id="form.color.id_for_label"
v-model="form.color.value"
@blur="updateStore"
/>
<!-- {{ form.color.errors }} -->
</div>
</div>
<!-- //* s'affiche après sélection d'option de type liste dans type de champ -->
<div
v-if="colorsStyleList.length > 0"
class="custom_style"
id="id_style_container"
>
<div class="list_selection" id="id_list_selection">
<Dropdown
:options="colorsStyleList"
:selected="selected_colors_style"
:selection.sync="selected_colors_style"
:placeholder="'Sélectionner la liste de valeurs'"
/>
</div>
<div class="colors_selection" id="id_colors_selection" hidden>
<div
v-for="(value, key) in form.colors_style.value.colors"
:key="'colors_style-' + key"
class="color-input"
>
<label>{{ key }}</label
><input
:name="key"
type="color"
:value="value"
@input="setColorStyles"
/>
</div>
</div>
</div>
<span v-if="action === 'duplicate' || action === 'edit'"> </span>
<div id="formsets">
<FeatureTypeCustomForm
v-for="form in customForms"
:key="form.dataKey"
:dataKey="form.dataKey"
:customForm="form"
/>
</div>
<button
type="button"
@click="addCustomForm"
id="add-field"
class="ui compact basic button button-hover-green"
>
<i class="ui plus icon"></i>Ajouter un champ personnalisé
</button>
<div class="ui divider"></div>
<button
class="ui teal icon button"
type="button"
@click="sendFeatureType"
>
<i class="white save icon"></i>
{{ action === "create" ? "Créer" : "Sauvegarder" }} le type de
signalement
</button>
<button
v-if="geojson"
class="ui teal icon button"
type="button"
@click="postFeatureTypeThenFeatures"
>
<i class="white save icon"></i>
Créer et importer le(s) signalement(s) du geojson
</button>
<!-- // TODO: Add check script for form & other scripts // -->
</form>
</div>
</div>
</template>
<script>
import frag from "vue-frag";
import { mapGetters, mapState } from "vuex";
import Dropdown from "@/components/Dropdown.vue";
import FeatureTypeCustomForm from "@/components/feature_type/FeatureTypeCustomForm.vue";
export default {
name: "Feature_type_edit",
directives: {
frag,
},
components: {
Dropdown,
FeatureTypeCustomForm,
},
props: ["geojson", "fileToImport"],
data() {
return {
action: "create",
dataKey: 0,
error: null,
geomTypeChoices: [
{ value: "linestring", name: "Ligne" },
{ value: "point", name: "Point" },
{ value: "polygon", name: "Polygone" },
],
form: {
colors_style: {
fields: [],
value: {
colors: {},
custom_field_name: "",
},
},
color: {
id_for_label: "couleur",
label: "Couleur",
field: {
max_length: 128, // ! Vérifier la valeur dans django
},
html_name: "couleur",
value: "#000000",
},
title: {
errors: [],
id_for_label: "title",
label: "Titre",
field: {
max_length: 128, // ! Vérifier la valeur dans django
},
html_name: "title",
value: null,
},
geom_type: {
id_for_label: "geom_type",
label: "Type de géométrie",
field: {
max_length: 128, // ! Vérifier la valeur dans django
},
html_name: "geom_type",
value: "Point",
},
},
reservedKeywords: [
// todo : add keywords for mapstyle (strokewidth...)
"title",
"description",
"status",
"created_on",
"updated_on",
"archived_on",
"deletion_on",
"feature_type",
],
};
},
computed: {
...mapGetters(["project"]),
...mapState("feature_type", ["customForms", "colorsStyleList"]),
...mapGetters("feature_type", ["feature_type"]),
selectedGeomType: {
get() {
const currentGeomType = this.geomTypeChoices.find(
(el) => el.value === this.form.geom_type.value
);
if (currentGeomType) {
return currentGeomType ? currentGeomType.name : null;
}
return null;
},
set(newValue) {
this.form.geom_type.value = newValue.value;
this.form = { ...this.form }; // ! quick & dirty fix for getter not updating because of Vue caveat https://vuejs.org/v2/guide/reactivity.html#For-Objects
this.updateStore();
},
},
selected_colors_style: {
get() {
return this.form.colors_style.value.custom_field_name;
},
set(newValue) {
const newColorsStyle = {
colors: {
[newValue.options[0]]: "#000000",
[newValue.options[1]]: "#000000",
},
custom_field_name: newValue.value,
};
this.form.colors_style.value = newColorsStyle;
this.updateStore();
},
},
},
watch: {
feature_type(newValue) {
if (newValue) {
this.fillFormData(newValue);
}
},
},
methods: {
definePageType() {
if (this.$router.history.current.name === "ajouter-type-signalement") {
this.action = "create";
} else if (
this.$router.history.current.name === "editer-type-signalement"
) {
this.action = "edit";
} else if (
this.$router.history.current.name === "dupliquer-type-signalement"
) {
this.action = "duplicate";
}
},
addCustomForm(customForm) {
this.dataKey += 1; // * increment counter for key in v-for
let newCustomForm = {
dataKey: this.dataKey,
};
if (customForm) {
newCustomForm = { ...newCustomForm, ...customForm };
}
this.$store.commit("feature_type/ADD_CUSTOM_FORM", newCustomForm); // * create an object with the counter in store
},
fillFormData(formData) {
for (const el in formData) {
// * find feature_type and fill form values
if (this.form[el]) this.form[el].value = formData[el];
}
//! add custom fields using ONLY this function, incrementing dataKey for Vue updating correctly components
formData.customfield_set.forEach((el) => this.addCustomForm(el));
this.updateStore();
},
setColorStyles(event) {
const { name, value } = event.target;
this.form.colors_style.value.colors[name] = value;
},
updateStore() {
this.$store.commit("feature_type/UPDATE_FORM", {
color: this.form.color,
title: this.form.title,
geom_type: this.form.geom_type,
colors_style: this.form.colors_style,
});
},
checkForm() {
if (this.form.title.value) {
this.form.title.errors = [];
return true;
} else if (
!this.form.title.errors.includes("Veuillez compléter ce champ.") // TODO : Gérer les autres champs
) {
this.form.title.errors.push("Veuillez compléter ce champ.");
document
.getElementById("errorlist")
.scrollIntoView({ block: "end", inline: "nearest" });
}
return false;
},
goBackToProject(message) {
this.$router.push({
name: "project_detail",
params: {
slug: this.project.slug,
message,
},
});
},
sendFeatureType() {
// * si édition d'une feature_type déja existante, faire un put
const requestType = this.action === "edit" ? "put" : "post";
if (this.checkForm()) {
this.$store
.dispatch("feature_type/SEND_FEATURE_TYPE", requestType)
.then(({ status }) => {
if (status === 200) {
this.goBackToProject("Le type de signalement a été mis à jour");
} else if (status === 201) {
this.goBackToProject("Le nouveau type de signalement a été créé");
} else {
this.displayMessage(
"Une erreur est survenue lors de l'import du type de signalement"
);
}
});
}
},
postFeatures(feature_type_slug) {
this.$store
.dispatch("feature_type/SEND_FEATURES_FROM_GEOJSON", {
slug: this.$route.params.slug,
feature_type_slug,
})
.then((response) => {
if (response.status === 200) {
this.goBackToProject();
} else {
this.displayMessage(
"Une erreur est survenue lors de l'import de signalements.\n " +
response.data.detail
);
}
});
},
async postFeatureTypeThenFeatures() {
const requestType = this.action === "edit" ? "put" : "post";
if (this.checkForm()) {
await this.$store
.dispatch("feature_type/SEND_FEATURE_TYPE", requestType)
.then(({ feature_type_slug }) => {
if (feature_type_slug) {
this.postFeatures(feature_type_slug);
}
});
}
},
displayMessage(message) {
this.error = message;
document
.getElementById("message")
.scrollIntoView({ block: "end", inline: "nearest" });
},
// ****** Methodes for geojson import ****** //
toNewFeatureType() {
this.$router.push({
name: "ajouter-type-signalement",
params: { geojson: this.jsonDict },
});
},
translateLabel(value) {
if (value == "LineString") {
return "linestring";
} else if (value == "Polygon" || value == "MultiPolygon") {
return "polygon";
}
return "point";
},
transformProperties(prop) {
const type = typeof prop;
const date = new Date(prop);
if (type === "boolean") {
return "boolean";
} else if (type === "number") {
return "integer";
} else if (type === "string") {
//* check if string is convertible to a number, then it should be a decimal
if (date instanceof Date && !isNaN(date.valueOf())) {
return "date";
} else if (!isNaN(parseFloat(prop))) {
return "decimal";
}
}
return "char"; //* string by default, most accepted type in database
},
importGeoJsonFeatureType() {
if (this.geojson.features && this.geojson.features.length) {
//* in order to get feature_type properties, the first feature is enough
const { properties, geometry } = this.geojson.features[0];
this.form.title.value = properties.feature_type;
this.form.geom_type.value = this.translateLabel(geometry.type);
this.updateStore(); //* register title & geom_type in store
//* loop properties to create a customForm for each of them
for (const [key, val] of Object.entries(properties)) {
//* check that the property is not a keyword from the backend or map style
// todo: add map style keywords
if (!this.reservedKeywords.includes(key)) {
const customForm = {
label: { value: key || "" },
name: { value: key || "" },
position: this.dataKey, // * use dataKey already incremented by addCustomForm
field_type: { value: this.transformProperties(val) }, // * guessed from the type
options: { value: [] }, // * not available in export
};
this.addCustomForm(customForm);
}
}
}
},
},
created() {
if (!this.project) {
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
this.$store.commit(
"feature_type/SET_CURRENT_FEATURE_TYPE_SLUG",
this.$route.params.slug_type_signal
);
this.definePageType();
},
mounted() {
if (this.action === "edit" || this.action === "duplicate") {
if (this.feature_type) {
//* add datas from store to state to avoid mutating directly store with v-model (not good practice), could have used computed with getter and setter as well
this.fillFormData(this.feature_type);
}
if (this.action === "duplicate") {
//* replace original name with new default title
this.form.title.value += ` (Copie ${new Date()
.toLocaleString()
.slice(0, -3)
.replace(",", "")} )`;
this.updateStore(); // * initialize form in store in case this.form would not be modified
}
}
//* when creation from a geojson
if (this.geojson) {
this.importGeoJsonFeatureType();
if (this.$store.state.feature_type.fileToImport.name) {
this.form.title.value = // * use the filename as title by default
this.$store.state.feature_type.fileToImport.name.split(".")[0];
}
}
},
beforeDestroy() {
this.$store.commit("feature_type/EMPTY_FORM");
},
};
</script>
<style>
#add-field {
margin-top: 1em;
}
#id_style_container {
display: flex;
height: 100%;
}
#id_colors_selection {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.color-input {
margin-left: 1em;
}
.color-input > label {
margin-right: 0.5em;
}
/* // * probleme avec le style récupéré, n'est jamais identique !???? */
#formsets {
margin-top: 1em !important;
}
</style>
\ No newline at end of file
src/views/project/Project_detail.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div v-frag>
<div v-frag v-if="permissions.can_view_project && project">
<div id="message" class="fullwidth">
<div v-if="tempMessage" class="ui positive message">
<!-- <i class="close icon"></i> -->
<!-- <div class="header">You are eligible for a reward</div> -->
<p><i class="check icon"></i> {{ tempMessage }}</p>
</div>
</div>
<div class="row">
<div class="four wide middle aligned column">
<img
class="ui small spaced image"
:src="
project.thumbnail.includes('default')
? require('@/assets/img/default.png')
: DJANGO_BASE_URL + project.thumbnail + refreshId()
"
/>
<div class="ui hidden divider"></div>
<div class="ui basic teal label" data-tooltip="Membres">
<i class="user icon"></i>{{ project.nb_contributors }}
</div>
<div class="ui basic teal label" data-tooltip="Signalements">
<i class="map marker icon"></i>{{ project.nb_published_features }}
</div>
<div class="ui basic teal label" data-tooltip="Commentaires">
<i class="comment icon"></i
>{{ project.nb_published_features_comments }}
</div>
</div>
<div class="ten wide column">
<h1 class="ui header">
<div class="content">
{{ project.title }}
<div class="ui icon right floated compact buttons">
<!-- {% if permissions|lookup:'can_view_project' %} -->
<a
id="subscribe-button"
class="ui button button-hover-green"
data-tooltip="S'abonner au projet"
data-position="top center"
data-variation="mini"
@click="isModalOpen = true"
>
<i class="inverted grey envelope icon"></i>
</a>
<!-- {% endif %} {% if project and
permissions|lookup:'can_update_project' %} -->
<router-link
v-if="user"
:to="{ name: 'project_edit', params: { slug: project.slug } }"
class="ui button button-hover-orange"
data-tooltip="Modifier le projet"
data-position="top center"
data-variation="mini"
>
<i class="inverted grey pencil alternate icon"></i>
</router-link>
<!-- {% endif %} -->
</div>
<div class="ui hidden divider"></div>
<div class="sub header">
{{ project.description }}
<!-- {{ project.description | linebreaks }} -->
</div>
</div>
</h1>
</div>
</div>
<div class="row">
<div class="seven wide column">
<h3 class="ui header">Types de signalements</h3>
<!-- // todo : Create endpoints for feature_types -->
<div class="ui middle aligned divided list">
<div
v-for="(type, index) in feature_types"
:key="type.title + '-' + index"
class="item"
>
<div class="middle aligned content">
<router-link
:to="{
name: 'details-type-signalement',
params: { feature_type_slug: type.slug },
}"
>
<img
v-if="type.geom_type == 'point'"
class="list-image-type"
src="@/assets/img/marker.png"
/>
<img
v-if="type.geom_type == 'linestring'"
class="list-image-type"
src="@/assets/img/line.png"
/>
<img
v-if="type.geom_type == 'polygon'"
class="list-image-type"
src="@/assets/img/polygon.png"
/>
{{ type.title }}
</router-link>
<!-- {% if project and feature_types and
permissions|lookup:'can_create_feature' %} -->
<!-- // todo: add permissions.can_create_feature and type.is_editable -->
<!-- v-if="
project &&
permissions.can_create_feature &&
type.is_editable
" -->
<router-link
:to="{
name: 'ajouter-signalement',
params: { slug_type_signal: type.slug },
}"
v-if="project && permissions.can_create_feature"
class="
ui
compact
small
icon
right
floated
button button-hover-green
"
data-tooltip="Ajouter un signalement"
data-position="left center"
data-variation="mini"
><!-- // todo : adapt -->
<i class="ui plus icon"></i>
</router-link>
<router-link
:to="{
name: 'dupliquer-type-signalement',
params: { slug_type_signal: type.slug },
}"
v-if="project && permissions.can_create_feature"
class="
ui
compact
small
icon
right
floated
button button-hover-green
"
data-tooltip="Dupliquer un type de signalement"
data-position="left center"
data-variation="mini"
><!-- // todo : adapt -->
<i class="inverted grey copy alternate icon"></i>
</router-link>
<router-link
:to="{
name: 'editer-type-signalement',
params: { slug_type_signal: type.slug },
}"
v-if="project && type.is_editable"
class="
ui
compact
small
icon
right
floated
button button-hover-green
"
data-tooltip="Éditer le type de signalement"
data-position="left center"
data-variation="mini"
>
<i class="inverted grey pencil alternate icon"></i>
</router-link>
<!-- {% endif %} -->
</div>
</div>
<div v-if="feature_types.length === 0">
<i> Le projet ne contient pas encore de type de signalements. </i>
</div>
</div>
<!-- // todo: gérer permissions: {% if project and permissions|lookup:'can_update_project' %} -->
<div class="nouveau-type-signalement">
<router-link
:to="{
name: 'ajouter-type-signalement',
params: { slug: project.slug },
}"
class="ui compact basic button button-hover-green"
>
<i class="ui plus icon"></i>Créer un nouveau type de signalement
</router-link>
</div>
<div class="nouveau-type-signalement">
<div class="ui compact basic button button-hover-green">
<div>
<label class="ui" for="json_file">
<i class="ui plus icon"></i>
<span class="label"
>Créer un nouveau type de signalement à partir d'un
GeoJSON</span
>
</label>
<input
type="file"
accept="application/json, .json, .geojson"
style="display: none"
name="json_file"
id="json_file"
@change="onFileChange"
/>
</div>
</div>
<br />
<div id="button-import" v-if="fileToImport.size > 0">
<button
:disabled="fileToImport.size == 0"
@click="toNewFeatureType"
class="ui fluid teal icon button"
>
<i class="upload icon"></i> Lancer l'import avec le fichier
{{ fileToImport.name }}
</button>
</div>
</div>
</div>
<div class="seven wide column">
<div id="map"></div>
</div>
</div>
<div class="row">
<div class="fourteen wide column">
<div class="ui two stackable cards">
<div class="red card">
<div class="content">
<div class="center aligned header">Derniers signalements</div>
<div class="center aligned description">
<div class="ui relaxed list">
<div
v-for="(item, index) in last_features"
:key="item.title + index"
class="item"
>
<div class="content">
<div>
<router-link
:to="{
name: 'details-signalement',
params: {
slug: project.slug,
slug_type_signal: item.feature_type.slug,
slug_signal: item.feature_id,
},
}"
>{{ item.title || item.feature_id }}</router-link
>
</div>
<div class="description">
<i
>[{{ item.created_on | setDate
}}<span v-if="user && item.display_creator"
>, par {{ item.display_creator }}
</span>
]</i
>
</div>
</div>
</div>
<i v-if="last_features.length === 0"
>Aucun signalement pour le moment.</i
>
</div>
</div>
</div>
</div>
<div class="orange card">
<div class="content">
<div class="center aligned header">Derniers commentaires</div>
<div class="center aligned description">
<div class="ui relaxed list">
<div
v-for="(item, index) in last_comments"
:key="'comment ' + index"
class="item"
>
<div class="content">
<div>
<router-link :to="item.related_feature.feature_url"
>"{{ item.comment }}"</router-link
>
</div>
<div class="description">
<i
>[ {{ item.created_on
}}<span v-if="user && item.display_author"
>, par {{ item.display_author }}
</span>
]</i
>
</div>
</div>
</div>
<i v-if="!last_comments || last_comments.length === 0"
>Aucun commentaire pour le moment.</i
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="fourteen wide column">
<div class="ui grey segment">
<h3 class="ui header">Paramètres du projet</h3>
<div class="ui five stackable cards">
<div class="card">
<div class="center aligned content">
<h4 class="ui center aligned icon header">
<i class="disabled grey archive icon"></i>
<div class="content">Délai avant archivage automatique</div>
</h4>
</div>
<div class="center aligned extra content">
<!-- {{ project.archive_feature|default_if_none:"0" }} jours -->
{{ project.archive_feature }} jours
</div>
</div>
<div class="card">
<div class="content">
<h4 class="ui center aligned icon header">
<i class="disabled grey trash alternate icon"></i>
<div class="content">
Délai avant suppression automatique
</div>
</h4>
</div>
<div class="center aligned extra content">
<!-- {{ project.delete_feature|default_if_none:"0" }} jours -->
{{ project.delete_feature }} jours
</div>
</div>
<div class="card">
<div class="content">
<h4 class="ui center aligned icon header">
<i class="disabled grey eye icon"></i>
<div class="content">
Visibilité des signalements publiés
</div>
</h4>
</div>
<div class="center aligned extra content">
{{ project.access_level_pub_feature }}
</div>
</div>
<div class="card">
<div class="content">
<h4 class="ui center aligned icon header">
<i class="disabled grey eye icon"></i>
<div class="content">
Visibilité des signalements archivés
</div>
</h4>
</div>
<div class="center aligned extra content">
{{ project.access_level_arch_feature }}
</div>
</div>
<div class="card">
<div class="content">
<h4 class="ui center aligned icon header">
<i class="disabled grey cogs icon"></i>
<div class="content">Modération</div>
</h4>
</div>
<div class="center aligned extra content">
{{ project.moderation ? "Oui" : "Non" }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span v-else-if="!permissions.can_view_project">
<i class="icon exclamation triangle"></i>
<span
>Vous ne disposez pas des droits nécessaires pour consulter ce
projet.</span
>
</span>
<div
v-if="isModalOpen"
class="ui dimmer modals page transition visible active"
style="display: flex !important"
>
<div
:class="[
'ui mini modal subscription',
{ 'transition visible active': isModalOpen },
]"
>
<i @click="isModalOpen = false" class="close icon"></i>
<div class="ui icon header">
<i class="envelope icon"></i>
Notifications du projet
</div>
<div class="content">
<button
@click="subsribeProject"
:class="['ui compact fluid button', is_suscriber ? 'red' : 'green']"
>
{{
is_suscriber
? "Se désabonner de ce projet"
: "S'abonner à ce projet"
}}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import frag from "vue-frag";
import { mapUtil } from "@/assets/js/map-util.js";
import { mapGetters, mapState } from "vuex";
import projectAPI from "@/services/project-api";
//import addressAPI from '@/services/address-api';
const axios = require("axios");
export default {
name: "Project_details",
props: ["message"],
directives: {
frag,
},
filters: {
setDate: function (value) {
let date = new Date(value);
let d = date.toLocaleDateString("fr", {
year: "2-digit",
month: "numeric",
day: "numeric",
});
return d;
},
},
data() {
return {
geojsonImport: [],
fileToImport: { name: "", size: 0 },
slug: this.$route.params.slug,
isModalOpen: false,
is_suscriber: false,
permissions: {
// ! fake, should be replaced by api's data
can_view_project: true,
can_create_feature: true,
},
tempMessage: null,
};
},
computed: {
...mapGetters(["project"]),
...mapState("feature_type", ["feature_types"]),
...mapState("feature", ["features"]),
...mapState(["last_comments", "user"]),
DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
last_features: function () {
// * limit to last five element of array (looks sorted chronologically, but not sure...)
return this.$store.state.feature.features.slice(-5);
},
},
methods: {
refreshId() {
return "?ver=" + Math.random();
},
toNewFeatureType() {
this.$router.push({
name: "ajouter-type-signalement",
params: {
geojson: this.geojsonImport,
fileToImport: this.fileToImport,
},
});
},
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.fileToImport = files[0];
// TODO : VALIDATION IF FILE IS JSON
if (this.fileToImport.size > 0) {
const fr = new FileReader();
fr.onload = (e) => {
this.geojsonImport = JSON.parse(e.target.result);
};
fr.readAsText(this.fileToImport);
//* stock filename to import features afterward
this.$store.commit(
"feature_type/SET_FILE_TO_IMPORT",
this.fileToImport
);
}
},
subsribeProject() {
this.$store.state.configuration.VUE_APP_DJANGO_API_BASE;
projectAPI
.subscribeProject({
suscribe: !this.is_suscriber,
projectSlug: this.$route.params.slug,
})
.then((data) => (this.is_suscriber = data.is_suscriber));
},
},
created() {
this.$store.dispatch("GET_PROJECT_INFO", this.slug);
projectAPI
.getProjectSubscription({ projectSlug: this.$route.params.slug })
.then((data) => (this.is_suscriber = data.is_suscriber));
},
mounted() {
if (this.project) {
this.$store.dispatch("map/INITIATE_MAP");
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
let self = this;
axios
.get(url)
.then((response) => {
const features = response.data.features;
const featureGroup = mapUtil.addFeatures(features);
if (featureGroup && featureGroup.getLayers().length > 0) {
mapUtil.getMap().fitBounds(featureGroup.getBounds());
self.$store.commit("map/SET_GEOJSON_FEATURES", features);
}
})
.catch((error) => {
throw error;
});
}
if (this.message) {
this.tempMessage = this.message;
document
.getElementById("message")
.scrollIntoView({ block: "end", inline: "nearest" });
setTimeout(() => {
//* hide message after 5 seconds
this.tempMessage = null;
}, 5000);
}
},
};
</script>
<style>
@import "../../assets/resources/semantic-ui-2.4.2/semantic.min.css";
#map {
width: 100%;
height: 100%;
min-height: 250px;
}
.list-image-type {
margin-right: 5px;
height: 25px;
vertical-align: bottom;
}
/* // ! missing style in semantic.min.css, je ne comprends pas comment... */
.ui.right.floated.button {
float: right;
margin: 0 0 0 1em;
}
.nouveau-type-signalement {
padding-top: 1em;
}
#button-import {
padding-top: 0.5em;
}
.fullwidth {
width: 100%;
}
</style>
\ No newline at end of file
src/views/project/Project_edit.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div class="fourteen wide column">
<form id="form-project-edit" class="ui form">
<h1>
<span v-if="action === 'edit'"
>Édition du projet "{{ form.title }}"</span
>
<span v-else-if="action === 'create'">Création d'un projet</span>
</h1>
<div class="ui horizontal divider">INFORMATIONS</div>
<div class="two fields">
<div class="required field">
<label for="title">Titre</label>
<!-- <small>{{ form.title.help_text }}</small
> --><!-- | safe // ? utile ? -->
<input
type="text"
required
maxlength="128"
name="title"
id="title"
v-model="form.title"
/>
<!-- {{ form.title.errors }} -->
</div>
<div class="field">
<label>Illustration du projet</label>
<img
class="ui small image"
id="form-input-file-logo"
:src="
thumbnailFileSrc
? thumbnailFileSrc
: DJANGO_BASE_URL + form.thumbnail
"
/>
<label class="ui icon button" for="thumbnail">
<i class="file icon"></i>
<span class="label">{{
form.thumbnail_name ? form.thumbnail_name : fileToImport.name
}}</span>
</label>
<input
@change="onFileChange"
class="file-selection"
type="file"
accept="image/jpeg, image/png"
style="display: none"
name="thumbnail"
id="thumbnail"
/>
<!-- {{ form.thumbnail.errors }} -->
</div>
</div>
<div class="field">
<label for="description">Description</label>
<textarea
v-model="form.description"
name="description"
rows="5"
></textarea>
<!-- {{ form.description.errors }} -->
</div>
<div class="ui horizontal divider">PARAMÈTRES</div>
<div class="four fields">
<div class="field">
<label for="archive_feature">Délai avant archivage</label>
<div class="ui right labeled input">
<input
type="number"
min="0"
style="padding: 1px 2px"
name="archive_feature"
id="archive_feature"
v-model="form.archive_feature"
/>
<div class="ui label">jour(s)</div>
</div>
<!-- {{ form.archive_feature.errors }} -->
</div>
<div class="field">
<label for="delete_feature">Délai avant suppression</label>
<div class="ui right labeled input">
<input
type="number"
min="0"
style="padding: 1px 2px"
name="delete_feature"
id="delete_feature"
v-model="form.delete_feature"
/>
<div class="ui label">jour(s)</div>
</div>
<!-- {{ form.delete_feature.errors }} -->
</div>
<div class="required field">
<label for="access_level_pub_feature"
>Visibilité des signalements publiés</label
>
<Dropdown
:options="levelPermissions"
:selected="form.access_level_pub_feature.name"
:selection.sync="form.access_level_pub_feature"
/>
</div>
<div class="required field">
<label for="access_level_arch_feature">
Visibilité des signalements archivés
</label>
<Dropdown
:options="levelPermissions"
:selected="form.access_level_arch_feature.name"
:selection.sync="form.access_level_arch_feature"
/>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input
type="checkbox"
v-model="form.moderation"
name="moderation"
id="moderation"
/>
<label for="moderation">Modération</label>
</div>
<!-- {{ form.moderation.errors }} -->
</div>
<div class="field">
<div class="ui checkbox">
<input
type="checkbox"
v-model="form.is_project_type"
name="is_project_type"
id="is_project_type"
/>
<label for="is_project_type">Est un projet type</label>
</div>
<!-- {{ form.is_project_type.errors }} -->
</div>
<div class="ui divider"></div>
<button @click="postForm" type="button" class="ui teal icon button">
<i class="white save icon"></i> Enregistrer les changements
</button>
</form>
</div>
</template>
<script>
const axios = require("axios");
import Dropdown from "@/components/Dropdown.vue";
import { mapGetters } from "vuex";
export default {
name: "Project_edit",
components: {
Dropdown,
},
data() {
return {
action: "create",
levelPermissions: [
{ name: "Utilisateur anonyme", value: "anonymous" },
{ name: "Utilisateur connecté", value: "logged_user" },
{ name: "Contributeur", value: "contributor" },
],
fileToImport: {
name: "Sélectionner une image ...",
size: 0,
},
form: {
title: "",
slug: "",
created_on: "",
updated_on: "",
description: "",
moderation: false,
thumbnail: "", // todo : utiliser l'image par défaut
thumbnail_name: "", // todo: delete after getting image in jpg or png instead of data64 (require post to django)
creator: null,
access_level_pub_feature: { name: "", value: "" },
access_level_arch_feature: { name: "", value: "" },
archive_feature: 0,
delete_feature: 0,
nb_features: 0,
nb_published_features: 0,
nb_comments: 0,
nb_published_features_comments: 0,
nb_contributors: 0,
is_project_type: false,
},
thumbnailFileSrc: "",
};
},
computed: {
...mapGetters(["project"]),
DJANGO_BASE_URL:function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
},
methods: {
definePageType() {
if (this.$router.history.current.name === "project_create") {
this.action = "create";
} else if (this.$router.history.current.name === "project_edit") {
this.action = "edit";
} else if (this.$router.history.current.name === "project_create_from") {
this.action = "create_from";
}
},
truncate(n, len) {
var ext = n.substring(n.lastIndexOf(".") + 1, n.length).toLowerCase();
var filename = n.replace("." + ext, "");
if (filename.length <= len) {
return n;
}
filename = filename.substr(0, len) + (n.length > len ? "[...]" : "");
return filename + "." + ext;
},
onFileChange(e) {
// * read image file
const files = e.target.files || e.dataTransfer.files;
if (!files.length) return; //* abort if no file
this.fileToImport = files[0]; //* stock the file to post later
let reader = new FileReader(); //* read the file to display in the page
let _this = this; //* 'this' is different in onload function
reader.onload = function (e) {
_this.thumbnailFileSrc = e.target.result;
};
reader.readAsDataURL(this.fileToImport);
},
goBackNrefresh(slug) {
let _this = this;
// * go back to project list
this.$router.push(
{
name: "project_detail",
params: { slug },
},
function () {
_this.$store.dispatch("GET_ALL_PROJECTS"); //* & refresh project list
}
);
},
postProjectThumbnail(projectSlug) {
//* send img to the backend when feature_type is created
if (this.fileToImport.size > 0) {
let formData = new FormData();
formData.append("file", this.fileToImport);
const url =
this.$store.state.configuration.VUE_APP_DJANGO_API_BASE +
"projects/" +
projectSlug +
"/thumbnail/";
return axios
.put(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
if (response && response.status === 200) {
//dispatch("GET_IMPORTS", feature_type_slug); // ? Besoin de vérifier le statut de l'import ?
this.goBackNrefresh(projectSlug);
}
})
.catch((error) => {
throw error;
});
}
},
async postForm() {
// todo: check form
//let url = `${configuration.VUE_APP_DJANGO_API_BASE}projects/`;
const projectData = {
title: this.form.title,
description: this.form.description,
access_level_arch_feature: this.form.access_level_arch_feature.value,
access_level_pub_feature: this.form.access_level_pub_feature.value,
archive_feature: this.form.archive_feature,
delete_feature: this.form.delete_feature,
is_project_type: this.form.is_project_type,
moderation: this.form.moderation,
};
if (this.action === "create" || this.action === "duplicate") {
await axios
.post(`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
.then((response) => {
if (response && response.status === 201 && response.data) {
//* send thumbnail after feature_type was created
if (this.fileToImport)
this.postProjectThumbnail(response.data.slug);
} else {
this.goBackNrefresh(response.data.slug);
}
})
.catch((error) => {
throw error;
});
} else if (this.action === "edit") {
await axios
.put(
`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/`,
projectData
)
.then((response) => {
if (response && response.status === 200) {
//* send thumbnail after feature_type was created
if (this.fileToImport)
this.postProjectThumbnail(this.project.slug);
} else {
this.goBackNrefresh(this.project.slug);
}
})
.catch((error) => {
throw error;
});
}
},
},
created() {
this.definePageType();
if (this.action === "create") {
this.thumbnailFileSrc = require("@/assets/img/default.png");
} else if (this.action === "edit") {
if (!this.project) {
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
this.form = this.project;
/* this.form.thumbnail = //* add api base to display image src
configuration.VUE_APP_DJANGO_BASE + this.form.thumbnail; */
//* transform string values to objects for dropdowns display (could be in a computed)
this.form.access_level_pub_feature = {
name: this.project.access_level_pub_feature,
value: this.levelPermissions.find(
(el) => (el.name = this.project.access_level_pub_feature)
).value,
};
this.form.access_level_arch_feature = {
name: this.project.access_level_arch_feature,
value: this.levelPermissions.find(
(el) => (el.name = this.project.access_level_arch_feature)
).value,
};
}
},
};
</script>
<style media="screen">
#form-input-file-logo {
margin-left: auto;
margin-right: auto;
}
.close.icon:hover {
cursor: pointer;
}
</style>
\ No newline at end of file
src/views/project/Project_mapping.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div class="fourteen wide column">
<h1 class="ui header">Administration des fonds cartographiques</h1>
<form
id="form-layers"
action="."
method="post"
enctype="multipart/form-data"
class="ui form"
>
<!-- {{ formset.management_form }} -->
<div class="ui buttons">
<a
class="ui compact small icon left floated button green"
data-variation="mini"
@click="addBasemap"
>
<i class="ui plus icon"></i>
<span>Créer un fond cartographique</span>
</a>
</div>
<div class="ui">
<ProjectMappingBasemap
v-for="basemap in basemaps"
:key="basemap.id"
:basemap="basemap"
/>
</div>
<button
@click="saveChanges"
type="button"
class="ui teal icon floated button"
>
<i class="white save icon"></i> Enregistrer les changements
</button>
</form>
</div>
</template>
<script>
import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";
import { mapState, mapGetters } from "vuex";
export default {
name: "Project_mapping",
components: {
ProjectMappingBasemap: Project_mapping_basemap,
},
data() {
return {
newBasemapIds: [],
};
},
computed: {
...mapState("map", ["basemaps"]),
...mapGetters("map", ["basemapMaxId"]),
},
methods: {
addBasemap() {
this.newBasemapIds.push(this.basemapMaxId + 1); //* register new basemaps to seperate post and put
this.$store.commit("map/CREATE_BASEMAP", this.basemapMaxId + 1);
},
saveChanges() {
// ToDo : check if values are filled
this.$store.dispatch("map/SAVE_BASEMAPS", this.newBasemapIds);
},
},
created() {
if (!this.$store.getters.project) {
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
},
};
</script>
\ No newline at end of file
src/views/project/Project_members.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div class="fourteen wide column">
<h1 class="ui header">Gérer les membres</h1>
<form
id="form-members"
action="."
method="post"
enctype="multipart/form-data"
class="ui form"
>
<!-- {{ formset.non_form_errors }} -->
<table class="ui red table">
<thead>
<tr>
<th>Membre</th>
<th>Niveau d'autorisation</th>
</tr>
</thead>
<tbody>
<div v-frag v-for="member in projectMembers" :key="member.username">
<tr>
<td>
{{ member.last_name }} {{ member.first_name }}<br /><i>{{
member.username
}}</i>
</td>
<td>
<div class="required field">
<Dropdown
:options="levelOptions"
:selected="member.userLevel"
:selection.sync="member.userLevel"
:search="true"
/>
</div>
</td>
</tr>
</div>
</tbody>
</table>
<div class="ui divider"></div>
<button
@click="validateMembers"
type="button"
class="ui teal icon button"
>
<i class="white save icon"></i> Enregistrer les changements
</button>
</form>
</div>
</template>
<script>
import axios from "axios";
import frag from "vue-frag";
import { mapGetters } from "vuex";
import Dropdown from "@/components/Dropdown.vue";
export default {
name: "Project_members",
directives: {
frag,
},
components: {
Dropdown,
},
computed: {
...mapGetters(["project"]),
},
data() {
return {
projectMembers: [],
levelOptions: [
"Utilisateur connecté",
"Contributeur",
"Modérateur",
"Administrateur projet",
],
};
},
methods: {
validateMembers() {
// const data = {
// slug: this.project.slug,
// data: this.projectMembers,
// };
// console.log("validateMembers", data);
/* axios
.post(`${DJANGO_API_BASE}projet/${payload.slug}/utilisateurs/`, payload.data)
.then((response) => {
const user = response.data.user;
})
.catch(() => {
router.push({ name: "login" });
}); */
},
async fetchMembers() {
return axios
.get(
`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/utilisateurs`
)
.then((response) => response.data.members)
.catch((error) => {
throw error;
});
},
async populateMembers() {
await this.fetchMembers().then((members) => {
this.projectMembers = members.map((el) => {
return {
userLevel: el.userLevel ? el.userLevel : this.levelOptions[0],
...el,
};
});
});
},
},
created() {
if (!this.project) {
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
this.populateMembers();
},
};
</script>
\ No newline at end of file
src/views/project/Project_type_list.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div class="row">
<div class="seven wide column">
<h3 class="ui header">
Créer un projet à partir d'un modèle disponible:
</h3>
<div class="ui divided items">
<div v-for="project in project_types" :key="project.slug" class="item">
<div class="ui tiny image">
<img
:src="
project.thumbnail.includes('default')
? require('@/assets/img/default.png')
: DJANGO_BASE_URL + project.thumbnail + refreshId()
"
/>
</div>
<div class="middle aligned content">
<div class="description">
<router-link
:to="{
name: 'project_create_from',
params: {
slug: project.title,
},
}"
>{{ project.title }}</router-link
>
<p>{{ project.description }}</p>
<strong v-if="project.moderation">Projet modéré</strong>
<strong v-else>Projet non modéré</strong>
</div>
<div class="meta">
<span data-tooltip="Délai avant archivage">
{{ project.archive_feature }}&nbsp;<i class="box icon"></i>
</span>
<span data-tooltip="Délai avant suppression">
{{ project.archive_feature }}&nbsp;<i
class="trash alternate icon"
></i>
</span>
<span data-tooltip="Date de création">
{{ project.created_on }}&nbsp;<i class="calendar icon"></i>
</span>
</div>
<div class="meta">
<span data-tooltip="Visibilité des signalement publiés">
{{ project.access_level_pub_feature }}&nbsp;<i
class="eye icon"
></i>
</span>
<span data-tooltip="Visibilité des signalement archivés">
{{ project.access_level_arch_feature }}&nbsp;<i
class="archive icon"
></i>
</span>
</div>
</div>
</div>
<span v-if="!project_types || project_types.length === 0"
>Aucun projet type n'est défini.</span
>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "Project_type_list",
computed: {
...mapGetters(["project_types"]),
DJANGO_BASE_URL: () => process.env.VUE_APP_DJANGO_BASE,
},
methods: {
refreshId() {
return "?ver=" + Math.random();
},
},
};
</script>
\ No newline at end of file
src/views/registration/Login.vue deleted 100644 → 0
View file @ eb5447a5
<template>
<div>
<div class="row">
<div class="fourteen wide column">
<img
class="ui centered small image"
src="@/assets/img/logo-neogeo-circle.png"
/>
<h2 class="ui center aligned icon header">
<div class="content">
{{ APPLICATION_NAME }}
<div class="sub header">{{ APPLICATION_ABSTRACT }}</div>
</div>
</h2>
</div>
</div>
<div class="row">
<div class="six wide column">
<h3 class="ui horizontal divider header">CONNEXION</h3>
<div v-if="form.errors" class="ui warning message">
<div class="header">
Les informations d'identification sont incorrectes.
</div>
NB: Seuls les comptes actifs peuvent se connecter.
</div>
<form class="ui form" role="form" type="post" @submit.prevent="login">
<div class="ui stacked secondary segment">
<div class="six field required">
<div class="ui left icon input">
<i class="user icon"></i>
<input
v-model="username_value"
type="text"
name="username"
placeholder="Utilisateur"
/>
</div>
</div>
<div class="six field required">
<div class="ui left icon input">
<i class="lock icon"></i>
<input
v-model="password_value"
type="password"
name="password"
placeholder="Mot de passe"
/>
</div>
</div>
<button class="ui fluid large teal submit button" type="submit">
Login
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
username_value: null,
password_value: null,
logged: false,
form: {
errors: null,
},
};
},
computed: {
LOGO_PATH:function () {
return this.$store.state.configuration.VUE_APP_LOGO_PATH;
},
APPLICATION_NAME: function () {
return this.$store.state.configuration.VUE_APP_APPLICATION_NAME;
},
APPLICATION_ABSTRACT:function () {
return this.$store.state.configuration.VUE_APP_APPLICATION_ABSTRACT;
},
},
methods: {
login() {
this.$store.dispatch("LOGIN", {
username: this.username_value,
password: this.password_value,
});
},
},
};
</script>
\ No newline at end of file
vue.config.js
View file @ ee17a921
const webpack = require('webpack')
const fs = require('fs')
const packageJson = fs.readFileSync('./package.json')
const version = JSON.parse(packageJson).version || 0
const webpack = require('webpack');
const fs = require('fs');
const packageJson = fs.readFileSync('./package.json');
const version = JSON.parse(packageJson).version || 0;
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.env': {
PACKAGE_VERSION: '"' + version + '"'
}
})
]
publicPath: '/geocontrib/',
devServer: {
proxy: {
'^/api': {
target: 'https://geocontrib.dev.neogeo.fr/api',
ws: true,
changeOrigin: true
}
}
},
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/service-worker.js',
exclude: [
/\.map$/,
/config\/config.*\.json$/,
/manifest\.json$/
],
},
// the rest of your original module.exports code goes here
}
\ No newline at end of file
iconPaths: {
faviconSVG: null,
favicon32: null,
favicon16: null,
appleTouchIcon: null,
maskIcon: null,
msTileImage: null,
},
themeColor: '#1da025'
},
configureWebpack: {
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
PACKAGE_VERSION: '"' + version + '"'
}
})
]
},
transpileDependencies: [
// Add dependencies that use modern JavaScript syntax, based on encountered errors
'ol',
'color-rgba',
'color-parse',
'@sentry/browser',
'@sentry/core',
'@sentry/vue',
'@sentry-internal'
]
};
webpack.config.js 0 → 100644
View file @ ee17a921
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
};
\ No newline at end of file