decidim-decidim_geo 0.2.1

data/app/packs/src/decidim/geo/api/queries.js

@@ -0,0 +1,77 @@
+export const geoDatasource = `
+  query geoDatasourceQuery ($locale: String!, $filters: [GeoDatasourceFilter!], $after: String) {
+    geoDatasource(filters: $filters, locale: $locale, after: $after){
+      pageInfo {
+        hasPreviousPage
+        startCursor
+        endCursor
+        hasNextPage
+      }
+      nodes {
+        id
+        link
+        participatorySpaceId
+        participatorySpaceType
+        componentId
+        type
+        startTime
+        endTime
+        title{
+          translation(locale: $locale)
+        }
+        shortDescription {
+          translation(locale: $locale)
+        }
+        description {
+          translation(locale: $locale)
+        }
+        bannerImage
+        coordinates{
+          latitude
+          longitude
+        }
+        scope {
+          id
+          name {
+            translation(locale: "en")
+          }
+        }
+      }
+    }
+  }`;
+export const geoDatasourceIds = `
+  query geoDatasourceQueryIds ($locale: String!, $filters: [GeoDatasourceFilter!], $after: String) {
+    geoDatasource(filters: $filters, locale: $locale, after: $after){
+      pageInfo {
+        hasPreviousPage
+        startCursor
+        endCursor
+        hasNextPage
+      }
+      nodes {
+        id
+        type
+      }
+    }
+  }`;
+
+export const geoConfig = `{
+  geoConfig { 
+    latitude 
+    longitude 
+    zoom 
+    tile
+  }
+}`;
+
+export const geoScope = `
+  query geoScopeQuery ($locale: String!) {
+    geoScope { 
+      id
+      name	{ 
+        translation(locale: $locale) 
+      }
+      geom
+    }
+  }
+`;

data/app/packs/src/decidim/geo/bootstrap.js

@@ -0,0 +1,6 @@
+const { saveConfig } = require("./utils");
+
+function bootstrap() {
+  saveConfig();
+}
+export default bootstrap;

data/app/packs/src/decidim/geo/index.js

@@ -0,0 +1,101 @@
+import "src/decidim/map/controller/markers";
+import "src/decidim/map/icon";
+import configStore from "./models/configStore";
+import pointStore from "./models/pointStore";
+import filterStore from "./models/filterStore";
+import geoStore from "./models/geoStore";
+import dropdownFilterStore from "./models/dropdownFilterStore";
+
+import { initMap, createDrawerActions, createDrawer } from "./ui";
+import bootstrap from "./bootstrap";
+
+window.debug = window.debug || {};
+window.debug.stores = () => ({
+  config: configStore.getState(),
+  filter: filterStore.getState(),
+  geo: geoStore.getState(),
+  point: pointStore.getState(),
+  dropdownFilter: dropdownFilterStore.getState()
+});
+
+async function main() {
+  try {
+    // Parse and save server-side information.
+    bootstrap();
+    const { addProcess, removeProcess } = pointStore.getState();
+    addProcess();
+    // Create Leaflet map
+    const map = await initMap();
+    configStore.setState(() => ({ map: map }));
+
+    // Be sure to fit all the points whenever you change
+    // any filter.
+    const pointsLayer = L.layerGroup();
+    map.addLayer(pointsLayer);
+    map.whenReady(() => {
+      configStore.getState().setReady();
+    });
+    pointStore.subscribe(
+      (state) => [!!state.isLoading, state.getFilteredPoints, state._lastResponse],
+      ([isLoading, getFilteredPoints]) => {
+        if (isLoading) return;
+        const { space_ids: spaceIds, map } = configStore.getState();
+        const { selectedPoint, selectedScope } = geoStore.getState();
+        pointsLayer.clearLayers();
+        let boudingBoxFilter = () => true;
+        if (!selectedPoint && !selectedScope && spaceIds) {
+          boudingBoxFilter = (node) =>
+            node.isGeoLocated() && spaceIds.includes(`${node.scopeId}`);
+        }
+        if (selectedScope?.layer && selectedScope && !selectedPoint) {
+          map.fitBounds(selectedScope.layer.getBounds(), { padding: [64, 64] });
+        }
+
+        const pointInMap = getFilteredPoints().filter((node) => node.isGeoLocated());
+        if (pointInMap.length > 0) {
+          pointInMap.forEach(({ marker }) => {
+            pointsLayer.addLayer(marker);
+          });
+          const idealBoundingBox = pointInMap
+            .filter(boudingBoxFilter)
+            .map(({ marker }) => marker);
+          const boundingBox = L.featureGroup(
+            _.isEmpty(idealBoundingBox)
+              ? pointInMap.map(({ marker }) => marker)
+              : idealBoundingBox,
+            { updateWhenZooming: true }
+          );
+          if (boundingBox && !selectedScope && !selectedPoint) {
+            map.fitBounds(boundingBox.getBounds(), { padding: [64, 64] });
+          }
+        }
+      }
+    );
+
+    // Create the drawer menu
+    await createDrawerActions();
+    // Create the drawer
+    await createDrawer();
+    // Fetch all the data
+    const { fetchAll, pointsForFilters, clearCache } = pointStore.getState();
+    await fetchAll(filterStore.getState().defaultFilters);
+    clearCache();
+    await pointsForFilters(filterStore.getState().defaultFilters);
+    removeProcess();
+  } catch (e) {
+    console.error(e);
+    const { map, mapID } = configStore.getState();
+
+    // If there is anything that happens,
+    // we don't want to see the map.
+    if (map?.remove) {
+      map.remove();
+    }
+    if (map?.off) {
+      map.off();
+    }
+    document.getElementById(mapID)?.remove();
+  }
+}
+
+main();

data/app/packs/src/decidim/geo/models/configStore.js

@@ -0,0 +1,44 @@
+import { createStore } from "zustand/vanilla";
+import { subscribeWithSelector } from "zustand/middleware";
+import filterStore from "./filterStore";
+import geoStore from "./geoStore";
+import dropdownFilterStore from "./dropdownFilterStore";
+
+const store = createStore(
+  subscribeWithSelector((set) => ({
+    locale: "en",
+    selected_component: undefined,
+    selected_point: undefined,
+    space_ids: [],
+    images: {},
+    map: undefined,
+    mapReady: false,
+    mapID: "Generic",
+    map_config: {},
+    i18n: {},
+    setReady: () => set({ mapReady: true }),
+    setConfig: (mapConfig) => {
+      set(() => ({
+        locale: mapConfig.locale,
+        selected_component: mapConfig.selected_component,
+        space_ids: mapConfig.space_ids,
+        selected_point: mapConfig.selected_point,
+        mapID: mapConfig.mapID,
+        map_config: mapConfig.map_config,
+        i18n: mapConfig.i18n,
+        images: mapConfig.images || {}
+      }));
+      const { setDefaultFilters, setFilters, toFilterOptions } = filterStore.getState();
+      setDefaultFilters(mapConfig.filters);
+      setFilters(mapConfig.filters);
+
+      dropdownFilterStore.getState().setDefaultFilters({
+        GeoShowFilter: toFilterOptions("GeoShowFilter", mapConfig.filters),
+        GeoTimeFilter: toFilterOptions("GeoTimeFilter", mapConfig.filters),
+        GeoType: toFilterOptions("GeoType", mapConfig.filters)
+      });
+    }
+  }))
+);
+
+export default store;

data/app/packs/src/decidim/geo/models/dropdownFilterStore.js

@@ -0,0 +1,65 @@
+import { createStore } from "zustand/vanilla";
+import { subscribeWithSelector } from "zustand/middleware";
+import scopeDropdownStore from "./scopeDropdownStore";
+const store = createStore(
+  subscribeWithSelector((set) => ({
+    isOpen: false,
+    defaultFilters: {
+      GeoShowFilter: "all",
+      GeoTimeFilter: "only_active",
+      GeoType: "all"
+    },
+    selectedFilters: {
+      GeoShowFilter: "all",
+      GeoTimeFilter: "only_active",
+      GeoType: "all"
+    },
+    nextFilters: undefined,
+    filterCount: () => {
+      const { selectedFilters, defaultFilters } = store.getState();
+      return Object.entries(selectedFilters).filter(([key, value]) => {
+        return defaultFilters[key] !== value;
+      }).length;
+    },
+    setNextFilter: (name, value) => {
+      set((state) => ({
+        nextFilters: {
+          ...state.nextFilters,
+          [`${name}`]: value || state.defaultFilters[`${name}`]
+        }
+      }));
+    },
+    applyNextFilters: () => {
+      set(({ nextFilters }) => (nextFilters ? { selectedFilters: nextFilters } : {}));
+    },
+    resetFilters: () => {
+      set(({ defaultFilters }) => ({
+        selectedFilters: defaultFilters,
+        nextFilters: defaultFilters
+      }));
+    },
+    setDefaultFilters: (newFilters) => {
+      set(() => ({ defaultFilters: newFilters, selectedFilters: newFilters }));
+    },
+    setFilter: (name, value) => {
+      set((state) => ({
+        selectedFilters: {
+          ...state.selectedFilters,
+          [`${name}`]: value || state.defaultFilters[`${name}`]
+        }
+      }));
+    },
+    toggleOpen: () => set((state) => ({ isOpen: !state.isOpen })),
+    close: () => set(() => ({ isOpen: false }))
+  }))
+);
+
+store.subscribe(
+  (state) => [state.isOpen],
+  ([isOpen]) => {
+    if (isOpen) {
+      scopeDropdownStore.getState().close();
+    }
+  }
+);
+export default store;

data/app/packs/src/decidim/geo/models/filterStore.js

@@ -0,0 +1,121 @@
+import { createStore } from "zustand/vanilla";
+import _ from "lodash";
+import { subscribeWithSelector } from "zustand/middleware";
+import pointStore from "./pointStore";
+import geoStore from "./geoStore";
+import dropdownFilterStore from "./dropdownFilterStore";
+
+const sortingIteratee = (filter) => JSON.stringify(filter);
+const store = createStore(
+  subscribeWithSelector((set) => ({
+    defaultFilters: [],
+    activeFilters: [],
+    setDefaultFilters: (filters = []) => {
+      const sortedFilters = _.sortBy(filters, [sortingIteratee]);
+      set(() => ({
+        defaultFilters: sortedFilters
+      }));
+    },
+    isFilteredByScope: (filters = undefined) => {
+      const { scopeFilter } = store.getState();
+      return !!scopeFilter(filters);
+    },
+    scopeFilter: (filters = undefined) => {
+      if (!filters) {
+        const { activeFilters } = store.getState();
+        filters = activeFilters;
+      }
+      return filters.find(({ scopeFilter }) => scopeFilter)?.scopeFilter?.scopeId;
+    },
+    isFilteredByTime: (filters = undefined) => {
+      if (!filters) {
+        const { activeFilters } = store.getState();
+        filters = activeFilters;
+      }
+      return !!filters.find(({ timeFilter }) => timeFilter);
+    },
+    hasUserFilters: () => {
+      const { defaultFilters, activeFilters } = store.getState();
+      return _.isEqual(defaultFilters, activeFilters);
+    },
+    setFilters: (filters = []) => {
+      const activeFilters = _.sortBy(filters, [sortingIteratee]);
+      set((state) => {
+        if (_.isEqual(state.activeFilters, activeFilters)) return {};
+        return { activeFilters: activeFilters };
+      });
+    },
+    resetFilters: () => {
+      set((state) => ({
+        activeFilters: state.defaultFilters
+      }));
+    },
+    toFilterOptions: (name, filters) => {
+      const { defaultFilters } = dropdownFilterStore.getState();
+      switch (name) {
+        case "GeoShowFilter":
+          const showFilterMatch = filters.find(
+            ({ geoencodedFilter = undefined }) => geoencodedFilter
+          );
+          if (!showFilterMatch) return defaultFilters.GeoShowFilter;
+          const geoencodedFilter = showFilterMatch.geoencodedFilter.geoencoded;
+          if (geoencodedFilter === true) return "only_geoencoded";
+          if (geoencodedFilter === false) return "only_virtual";
+          return defaultFilters.GeoShowFilter;
+        case "GeoTimeFilter":
+          const timeFilterMatch = filters.find(
+            ({ timeFilter = undefined }) => timeFilter
+          );
+          if (!timeFilterMatch) return defaultFilters.GeoTimeFilter;
+          const timeFilter = timeFilterMatch.timeFilter.time;
+          if (timeFilter === "past") return "only_past";
+          if (timeFilter === "active") return "only_active";
+          if (timeFilter === "future") return "only_future";
+          return defaultFilters.GeoTimeFilter;
+        case "GeoType":
+          const typeFilterMatch = filters.find(
+            ({ resourceTypeFilter = undefined }) => resourceTypeFilter
+          );
+          if (!typeFilterMatch) return defaultFilters.GeoType;
+          const resourceType = typeFilterMatch.resourceTypeFilter.resourceType;
+          if (resourceType === "Decidim::Assembly") return "only_assemblies";
+          if (resourceType === "Decidim::Proposals::Proposal") return "only_proposals";
+          if (resourceType === "Decidim::Meetings::Meeting") return "only_meetings";
+          if (resourceType === "Decidim::ParticipatoryProcess") return "only_processes";
+          if (resourceType === "all") return "all";
+          return defaultFilters.GeoType;
+      }
+    }
+  }))
+);
+
+const onFilteredByScope = (filters) => {
+  const { scopeFilter } = store.getState();
+  const { scopeForId } = pointStore.getState();
+  let scopeId;
+  if ((scopeId = scopeFilter(filters))) {
+    const { selectScope, selectedScope: previousScope } = geoStore.getState();
+    if (previousScope && `${scopeId}` === `${previousScope?.id}`) return;
+    const selectedScope = scopeForId(scopeId);
+    if (selectedScope) selectScope(selectedScope);
+  }
+};
+
+// If you update the active filters, we need to fetch
+// the point matching this filter.
+store.subscribe(
+  (state) => [state.activeFilters],
+  async ([activeFilters], [previousActiveFilter]) => {
+    if (!previousActiveFilter || !_.isEqual(activeFilters, previousActiveFilter)) {
+      await pointStore.getState().pointsForFilters(activeFilters);
+      onFilteredByScope(activeFilters);
+    }
+    const { toFilterOptions } = store.getState();
+    const { setFilter } = dropdownFilterStore.getState();
+    setFilter("GeoShowFilter", toFilterOptions("GeoShowFilter", activeFilters));
+    setFilter("GeoTimeFilter", toFilterOptions("GeoTimeFilter", activeFilters));
+    setFilter("GeoType", toFilterOptions("GeoType", activeFilters));
+  }
+);
+
+export default store;

data/app/packs/src/decidim/geo/models/geoDatasourceNode/GeoDatasourceNode.js

@@ -0,0 +1,124 @@
+import { createNodeMenuItem, createNodeMarker } from "../../ui";
+import geoStore from "../geoStore";
+import configStore from "../configStore";
+
+export default class GeoDatasourceNode {
+  constructor({ node, map }) {
+    //Model
+    this.data = node;
+    this.map = map;
+    this.marker = undefined;
+  }
+
+  isGeoLocated() {
+    return !!this.marker;
+  }
+
+  repaint() {
+    const { selectedPoint } = geoStore.getState();
+    const { selected_component, selected_point: pinPoint } = configStore.getState();
+    if (this.isGeoLocated()) {
+      if (pinPoint) {
+        if (selectedPoint === this) {
+          this.marker.setStyle(this.selectedState);
+        } else if (
+          !selectedPoint &&
+          `${this.data.componentId}` == `${selected_component}` &&
+          pinPoint == `${this.data.id}`
+        ) {
+          this.marker.setStyle(this.selectedState);
+        } else {
+          this.marker.setStyle(this.staledState);
+        }
+      } else {
+        if (selectedPoint === this) {
+          this.marker.setStyle(this.selectedState);
+        } else if (
+          !selectedPoint &&
+          `${this.data.componentId}` === `${selected_component}`
+        ) {
+          this.marker.setStyle(this.selectedState);
+        } else {
+          this.marker.setStyle(this.staledState);
+        }
+      }
+    }
+  }
+
+  colorLayers() {
+    if (!this.isGeoLocated()) return;
+    const { map } = configStore.getState();
+    map.eachLayer((layer) => {
+      if (layer.feature) {
+        if (layer.feature.geometry.properties.id === this.scopeId) {
+          layer.setStyle(this.selectedState);
+        } else {
+          layer.setStyle(this.staledState);
+        }
+      }
+    });
+  }
+
+  get id() {
+    if (!this.data.id || !this.data.type) return undefined;
+    return `${this.data.type}::${this.data.id}`;
+  }
+
+  get scopeId() {
+    return parseInt(`${this.data.scope?.id}`) || undefined;
+  }
+
+  get selectedState() {
+    return { color: "var(--primary)" };
+  }
+
+  get staledState() {
+    return { color: "#404040" };
+  }
+
+  async panToMarker(zoom = 21) {
+    if (!this.isGeoLocated()) return;
+    const { map } = configStore.getState();
+    return new Promise((resolve) => {
+      map
+        .flyTo(this.marker.getLatLng(), zoom, {
+          animate: false,
+          noMoveStart: true
+        })
+        .once("moveend", () => {
+          this.repaint();
+          resolve();
+        });
+    });
+  }
+
+  select() {
+    geoStore.getState().selectPoint(this);
+  }
+
+  init() {
+    if (this.data?.coordinates?.latitude && this.data?.coordinates?.longitude) {
+      this.marker = createNodeMarker(this.data);
+      this.marker.on("click", this.select.bind(this));
+      this.marker.bringToFront();
+    }
+    try {
+      this.repaint();
+      this.menuItem = createNodeMenuItem(this.data);
+      this.menuItem.onclick = () => {
+        this.select("sidebar");
+      };
+
+      geoStore.subscribe(
+        (state) => [state.selectedPoint],
+        (_np, [unselectedPoint]) => {
+          if (unselectedPoint) unselectedPoint.repaint();
+          this.repaint();
+        }
+      );
+    } catch (error) {
+      console.error("ERROR: decidim-geo can't initialize ", { error });
+    }
+    return this;
+  }
+}

data/app/packs/src/decidim/geo/models/geoDatasourceNode/index.js

@@ -0,0 +1 @@
+export { default } from "./GeoDatasourceNode";

data/app/packs/src/decidim/geo/models/geoScope/GeoScope.js

@@ -0,0 +1,128 @@
+import { createGeoScopeMenuItem, createGeoScopeLayer } from "../../ui";
+import geoStore from "../geoStore";
+import pointStore from "../pointStore";
+import configStore from "../configStore";
+import scopeDropdownStore from "../scopeDropdownStore";
+import polylabel from "polylabel";
+import _ from "lodash";
+
+export default class GeoScope {
+  constructor({ geoScope }) {
+    //Model
+    this.data = geoScope;
+    this.markers_group = [];
+    this.menuItem = null;
+  }
+
+  get activeState() {
+    return { fillColor: "#2952A370", color: "#2952A3" };
+  }
+
+  isEmpty() {
+    const { points } = pointStore.getState();
+    const currentScopeId = this.id;
+    return !points.find(({ scopeId }) => `${scopeId}` === `${currentScopeId}`);
+  }
+
+  isLoading() {
+    return pointStore.getState().isLoading;
+  }
+
+  get staledState() {
+    return { fillColor: "#cccccc", color: "#999999" };
+  }
+
+  select() {
+    const { selectedScope: previousScope } = geoStore.getState();
+    if (previousScope === this) return;
+    geoStore.getState().selectScope(this);
+  }
+
+  /**
+   * If the current marker is selected (active)
+   * @returns boolean
+   */
+  isActive() {
+    const { selectedScope } = geoStore.getState();
+    if (selectedScope) return selectedScope === this;
+    return false;
+  }
+
+  repaint() {
+    if (this.isActive()) {
+      this.layer?.setStyle(this.activeState);
+    } else {
+      this.layer?.setStyle(this.staledState);
+    }
+  }
+
+  get name() {
+    return this.data.name.translation;
+  }
+
+  get id() {
+    return parseInt(`${this.data.id}`);
+  }
+
+  nodesForScope() {
+    const { points } = pointStore.getState();
+    const currentScopeId = this.id;
+    return points.filter(({ scopeId }) => scopeId === currentScopeId).filter(Boolean);
+  }
+
+  markersForScope() {
+    if (this.markers_group.length > 0) return this.markers_group;
+    return this.nodesForScope()
+      .filter((node) => node.isGeoLocated())
+      .map(({ marker }) => marker);
+  }
+
+  componentIds() {
+    return _.uniq(
+      this.nodesForScope()
+        .map(({ data }) => (data.componentId ? `${data.componentId}` : false))
+        .filter(Boolean)
+    );
+  }
+
+  init() {
+    this.markers_group = this.markersForScope();
+    this.menuItem = createGeoScopeMenuItem({
+      label: this.name,
+      onClick: () => {
+        scopeDropdownStore.getState().toggleOpen();
+        geoStore.getState().selectScope(this);
+        this.repaint();
+      }
+    });
+    if (this.data.geom?.type) {
+      if (this.data.geom.type === "MultiPolygon") {
+        this.centroid = polylabel(this.data.geom.coordinates[0], 1.0);
+      }
+      this.layer = createGeoScopeLayer({
+        geoScope: this.data,
+        centroid: this.centroid,
+        onClick: () => this.select("layer")
+      });
+      this.layer.bringToBack();
+      // Add the layer only when we are sure there is some point
+      // in the layer.
+      pointStore.subscribe(
+        (state) => [state.isLoading],
+        ([isLoading]) => {
+          const { map, mapReady } = configStore.getState();
+          if (isLoading) return;
+          if (this.isEmpty()) {
+            if (map.hasLayer(this.layer) && mapReady) {
+              map.removeLayer(this.layer);
+            }
+          } else {
+            map.addLayer(this.layer);
+          }
+        }
+      );
+    }
+    this.repaint();
+    return this;
+  }
+}

data/app/packs/src/decidim/geo/models/geoScope/index.js

@@ -0,0 +1 @@
+export { default } from "./GeoScope";