From 81f74c664fcf6efca0e051fe5afd84178186fef3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Tue, 28 Jun 2022 16:26:56 +0200
Subject: [PATCH] fix bug in active component, hide dropdown not active, set
default queryable layer & improve style
---
src/components/Map/LayerSelector.vue | 139 +++++++----------------
src/components/Map/SidebarLayers.vue | 74 +++++++++---
src/views/Project/FeaturesListAndMap.vue | 36 ------
3 files changed, 104 insertions(+), 145 deletions(-)
diff --git a/src/components/Map/LayerSelector.vue b/src/components/Map/LayerSelector.vue
index d7b80563..967275a5 100644
--- a/src/components/Map/LayerSelector.vue
+++ b/src/components/Map/LayerSelector.vue
@@ -2,17 +2,21 @@
<div class="basemaps-items ui accordion styled">
<div
:class="['basemap-item title', { active }]"
- @click="activateGroup(basemap)"
+ @click="$emit('activateGroup', basemap.id)"
>
- {{ basemap.title }}
+ <i
+ class="map outline fitted icon"
+ aria-hidden="true"
+ />
+ <span>{{ basemap.title }}</span>
</div>
<div
- v-if="isQueryable(basemap)"
+ v-if="queryableLayersOptions.length > 0 && active"
:id="`queryable-layers-selector-${basemap.id}`"
>
<strong>Couche requêtable</strong>
<Dropdown
- :options="getQueryableLayers(basemap)"
+ :options="queryableLayersOptions"
:selected="selectedQueryLayer"
:search="true"
@update:selection="onQueryLayerChange($event)"
@@ -79,25 +83,36 @@ export default {
type: Array,
default: () => [],
},
- activeBasemap: {
- type: Object,
- default: () => {},
+ active: {
+ type: Boolean,
+ default: false,
},
},
data() {
return {
+ baseMap: {},
selectedQueryLayer: null,
+ sortable: null,
};
},
computed: {
- active() {
- return this.basemap.active !== undefined && this.basemap.active;
- },
+ queryableLayersOptions() {
+ const queryableLayers = this.basemap.layers.filter((l) => l.queryable === true);
+ return queryableLayers.map((x) => {
+ return {
+ name: x.title,
+ value: x,
+ };
+ });
+ }
},
mounted() {
+ if (this.queryableLayersOptions.length > 0) {
+ this.selectedQueryLayer = this.queryableLayersOptions[0].name;
+ }
setTimeout(this.initSortable.bind(this), 1000);
},
@@ -107,62 +122,19 @@ export default {
return queryableLayer.length > 0;
},
- setLocalstorageMapOptions(basemaps) {
- let mapOptions = localStorage.getItem('geocontrib-map-options') || {};
- mapOptions = mapOptions.length ? JSON.parse(mapOptions) : {};
- const project = this.$route.params.slug;
- mapOptions[project] = {
- ...mapOptions[project],
- basemaps: basemaps,
- };
- localStorage.setItem(
- 'geocontrib-map-options',
- JSON.stringify(mapOptions)
- );
- },
-
- onlayerMove() {
- // Get the names of the current layers in order.
- const currentLayersNamesInOrder = Array.from(
- document.getElementsByClassName('layer-item transition visible')
- ).map((el) => parseInt(el.attributes['data-id'].value));
- // Create an array to put the layers in order.
- let movedLayers = [];
-
- for (const layerName of currentLayersNamesInOrder) {
- movedLayers.push(
- this.activeBasemap.layers.filter((el) => el.id === layerName)[0]
- );
- }
- // Remove existing layers undefined
- movedLayers = movedLayers.filter(function (x) {
- return x !== undefined;
- });
- const eventOrder = new CustomEvent('change-layers-order', {
- detail: {
- layers: movedLayers,
- },
- });
- document.dispatchEvent(eventOrder);
- // Save the basemaps options into the localstorage
- this.setLocalstorageMapOptions(this.baseMaps);
- },
-
initSortable() {
- this.baseMaps.forEach((basemap) => {
- const element = document.getElementById(`list-${basemap.id}`);
- if (element) {
- this. sortable = new Sortable(element, {
- animation: 150,
- handle: '.layer-handle-sort', // The element that is active to drag
- ghostClass: 'blue-background-class',
- dragClass: 'white-opacity-background-class',
- onEnd: this.onlayerMove.bind(this),
- });
- } else {
- console.error(`list-${basemap.id} not found in dom`);
- }
- });
+ const element = document.getElementById(`list-${this.basemap.id}`);
+ if (element) {
+ this.sortable = new Sortable(element, {
+ animation: 150,
+ handle: '.layer-handle-sort', // The element that is active to drag
+ ghostClass: 'blue-background-class',
+ dragClass: 'white-opacity-background-class',
+ onEnd: () => this.$emit('onlayerMove'),
+ });
+ } else {
+ console.error(`list-${this.basemap.id} not found in dom`);
+ }
},
onQueryLayerChange(layer) {
@@ -176,37 +148,6 @@ export default {
layer.query = true;
},
- getQueryableLayers(baseMap) {
- const queryableLayer = baseMap.layers.filter((l) => l.queryable === true);
- return queryableLayer.map((x) => {
- return {
- name: x.title,
- value: x,
- };
- });
- },
-
- activateGroup(basemap) {
- this.baseMaps.forEach((basemap) => (basemap.active = false));
- basemap.active = true;
- this.$emit('setActiveBasemap', basemap);
- basemap.title += ' '; //weird!! Force refresh
- this.$emit('addLayers', basemap);
-
- let mapOptions = localStorage.getItem('geocontrib-map-options') || {};
- mapOptions = mapOptions.length ? JSON.parse(mapOptions) : {};
- const project = this.$route.params.slug;
- mapOptions[project] = {
- ...mapOptions[project],
- 'current-basemap-index': basemap.id,
- };
- localStorage.setItem(
- 'geocontrib-map-options',
- JSON.stringify(mapOptions)
- );
- },
-
-
getOpacity(opacity) {
return Math.round(parseFloat(opacity) * 100);
},
@@ -220,6 +161,12 @@ export default {
</script>
<style>
+.basemap-item.title > i {
+ margin-left: -1em !important;
+}
+.basemap-item.title > span {
+ margin-left: .5em;
+}
.queryable-layers-dropdown {
margin-bottom: 1em;
}
diff --git a/src/components/Map/SidebarLayers.vue b/src/components/Map/SidebarLayers.vue
index 030c181b..c70b60fe 100644
--- a/src/components/Map/SidebarLayers.vue
+++ b/src/components/Map/SidebarLayers.vue
@@ -51,9 +51,10 @@
:key="`list-${basemap.id}`"
:basemap="basemap"
:base-maps="baseMaps"
- :active-basemap="activeBasemap"
+ :active="activeBasemap.id === basemap.id"
@addLayers="addLayers"
- @setActiveBasemap="setActiveBasemap"
+ @activateGroup="activateGroup"
+ @onlayerMove="onlayerMove"
/>
</div>
</template>
@@ -73,10 +74,9 @@ export default {
data() {
return {
- activeBasemap: null,
baseMaps: [],
expanded: false,
- sortable: null
+ projectSlug: this.$route.params.slug
};
},
@@ -85,27 +85,29 @@ export default {
'isOnline',
]),
...mapState('map', [
- 'availableLayers'
+ 'availableLayers',
]),
+ activeBasemap() {
+ return this.baseMaps.find((baseMap) => baseMap.active);
+ },
},
mounted() {
this.baseMaps = this.$store.state.map.basemaps;
- const project = this.$route.params.slug;
const mapOptions =
JSON.parse(localStorage.getItem('geocontrib-map-options')) || {};
- if (mapOptions && mapOptions[project]) {
+ if (mapOptions && mapOptions[this.projectSlug]) {
// If already in the storage, we need to check if the admin did some
// modification in the basemaps on the server side. The rule is: if one layer has been added
// or deleted in the server, then we reset the localstorage.
- const baseMapsFromLocalstorage = mapOptions[project]['basemaps'];
+ const baseMapsFromLocalstorage = mapOptions[this.projectSlug]['basemaps'];
const areChanges = this.areChangesInBasemaps(
this.baseMaps,
baseMapsFromLocalstorage
);
if (areChanges) {
- mapOptions[project] = {
+ mapOptions[this.projectSlug] = {
'map-options': this.baseMaps,
'current-basemap-index': 0,
};
@@ -120,7 +122,6 @@ export default {
if (this.baseMaps.length > 0) {
this.baseMaps[0].active = true;
- this.activeBasemap = this.baseMaps[0];
this.addLayers(this.baseMaps[0]);
} else {
mapService.addLayers(
@@ -207,9 +208,56 @@ export default {
mapService.addLayers(baseMap.layers.slice().reverse(), null, null, null,);
},
- setActiveBasemap(basemap) {
- this.activeBasemap = basemap;
- }
+ activateGroup(basemapId) {
+ //* to activate a basemap, we need to set the active property to true et set the others to false
+ this.baseMaps = this.baseMaps.map((bm) => {
+ return { ...bm, active: bm.id === basemapId ? true : false };
+ });
+ //* add the basemap that was clicked to the map
+ this.addLayers(this.baseMaps.find((bm) => bm.id === basemapId));
+ //* to persist the settings, we set the localStorage mapOptions per project
+ this.setLocalstorageMapOptions({ 'current-basemap-index': basemapId });
+ },
+
+ onlayerMove() {
+ // Get the names of the current layers in order.
+ const currentLayersNamesInOrder = Array.from(
+ document.getElementsByClassName('layer-item transition visible')
+ ).map((el) => parseInt(el.attributes['data-id'].value));
+ // Create an array to put the layers in order.
+ let movedLayers = [];
+
+ for (const layerName of currentLayersNamesInOrder) {
+ movedLayers.push(
+ this.activeBasemap.layers.find((el) => el.id === layerName)
+ );
+ }
+ // Remove existing layers undefined
+ movedLayers = movedLayers.filter(function (x) {
+ return x !== undefined;
+ });
+ const eventOrder = new CustomEvent('change-layers-order', {
+ detail: {
+ layers: movedLayers,
+ },
+ });
+ document.dispatchEvent(eventOrder);
+ // Save the basemaps options into the localstorage
+ this.setLocalstorageMapOptions({ basemaps: this.baseMaps });
+ },
+
+ setLocalstorageMapOptions(newOptionObj) {
+ let mapOptions = localStorage.getItem('geocontrib-map-options') || {};
+ mapOptions = mapOptions.length ? JSON.parse(mapOptions) : {};
+ mapOptions[this.projectSlug] = {
+ ...mapOptions[this.projectSlug],
+ ...newOptionObj,
+ };
+ localStorage.setItem(
+ 'geocontrib-map-options',
+ JSON.stringify(mapOptions)
+ );
+ },
},
};
</script>
diff --git a/src/views/Project/FeaturesListAndMap.vue b/src/views/Project/FeaturesListAndMap.vue
index 5bb4915f..8cdfd5ec 100644
--- a/src/views/Project/FeaturesListAndMap.vue
+++ b/src/views/Project/FeaturesListAndMap.vue
@@ -175,42 +175,6 @@ export default {
},
},
- watch: {
- /*map(newValue) {
- if (newValue && this.paginatedFeatures && this.paginatedFeatures.length) {
- if (this.currentLayer) {
- this.map.removeLayer(this.currentLayer);
- }
- this.currentLayer = mapService.addFeatures(
- this.paginatedFeatures,
- {},
- this.feature_types
- );
- }
- },*/
- /*paginatedFeatures: {
- deep: true,
- handler(newValue, oldValue) {
- if (newValue && newValue.length && newValue !== oldValue && this.map) {
- if (this.currentLayer) {
- this.map.removeLayer(this.currentLayer);
- this.currentLayer = null;
- }
- this.currentLayer = mapService.addFeatures(
- newValue,
- {},
- this.feature_types
- );
- } else if (newValue && newValue.length === 0) {
- if (this.currentLayer) {
- this.map.removeLayer(this.currentLayer);
- this.currentLayer = null;
- }
- }
- }
- },*/
- },
-
mounted() {
if (!this.project) {
// Chargements des features et infos projet en cas d'arrivée directe sur la page ou de refresh
--
GitLab