decidim-decidim_geo 0.2.1

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

@@ -0,0 +1,118 @@
+import { createStore } from "zustand/vanilla";
+import { subscribeWithSelector } from "zustand/middleware";
+import dataPointStore from "./pointStore";
+import filterStore from "./filterStore";
+import dropdownFilterStore from "./dropdownFilterStore";
+
+const store = createStore(
+  subscribeWithSelector((set) => ({
+    /**
+     * Filters given by the backend
+     */
+    defaultFilters: [],
+    /**
+     * data point that is currently clicked
+     */
+    selectedPoint: undefined,
+    /**
+     *
+     */
+    selectedScope: undefined,
+    previousState: null,
+    /**
+     * Action when we click on a point.
+     */
+    selectPoint: (point) => {
+      set((state) => ({
+        ...state,
+        selectedScope: point ? dataPointStore.getState().scopeForId(point.scopeId) : undefined,
+        selectedPoint: point,
+        previousState: state
+      }));
+    },
+    /**
+     * Action when a scope is selected.
+     * - select the scope if any
+     * -
+     */
+    selectScope: (scope) => {
+      set((state) => ({
+        selectedScope: scope,
+        ...(`${scope?.id}` !== `${state.selectedScope?.id}`
+          ? { previousState: state }
+          : {}),
+        // unselect point when moving away from its scope
+        selectedPoint:
+          state.selectedPoint && state.selectedPoint.scopeId === scope?.id
+            ? state.selectedPoint
+            : undefined
+      }));
+      if(scope)
+        scope.repaint();
+    },
+    /**
+     * Go back to previous state
+     */
+    goBack: () => {
+      set((state) => ({
+        ...state.previousState
+      }));
+    }
+  }))
+);
+
+store.subscribe(
+  (state) => [state.selectedScope],
+  ([selectedScope]) => {
+    // Close the drowp down
+    dropdownFilterStore.getState().close();
+
+    // Update filter associated to the scope
+    const { activeFilters, setFilters, scopeFilter, defaultFilters } =
+      filterStore.getState();
+    const filtersWithoutScopes = activeFilters.filter(({ scopeFilter }) => {
+      return !scopeFilter;
+    });
+    const currentScopeFilterId = scopeFilter(activeFilters);
+    if (`${currentScopeFilterId}` === `${selectedScope?.id}`) return;
+    if (selectedScope?.id) {
+      const matchFilter = activeFilters.find(
+        ({ scopeFilter }) => scopeFilter?.scopeId === selectedScope.id
+      );
+      if (!matchFilter)
+        setFilters(
+          filtersWithoutScopes.concat({ scopeFilter: { scopeId: selectedScope.id } })
+        );
+    } else {
+      const defaultScopeFilter = defaultFilters.find(({ scopeFiler }) => scopeFilter);
+      if (defaultScopeFilter) setFilters(filtersWithoutScopes.concat(defaultScopeFilter));
+      else setFilters(filtersWithoutScopes);
+    }
+  }
+);
+
+store.subscribe(
+  (state) => [state.selectedScope],
+  ([selectedScope], [previousScope]) => {
+    // Close the filter dropdown
+    dropdownFilterStore.getState().close();
+    if (previousScope) previousScope.repaint();
+    if (selectedScope) {
+      selectedScope.repaint();
+    }
+  }
+);
+
+store.subscribe(
+  (state) => [state.selectedPoint],
+  async ([selectedPoint], [previousPoint]) => {
+    if (!selectedPoint || selectedPoint === previousPoint) return;
+    // Close the filter dropdown
+    dropdownFilterStore.getState().close();
+    // Center to the marker
+    selectedPoint.repaint();
+    await selectedPoint.panToMarker();
+    if (previousPoint) previousPoint.repaint();
+  }
+);
+export default store;

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

@@ -0,0 +1,134 @@
+import { createStore } from "zustand/vanilla";
+import configStore from "./configStore";
+import geoStore from "./geoStore";
+import { getGeoDatasource, getGeoScopes } from "../api";
+import GeoDatasourceNode from "./geoDatasourceNode";
+import GeoScope from "./geoScope";
+import { subscribeWithSelector } from "zustand/middleware";
+import _ from "lodash";
+
+const store = createStore(
+  subscribeWithSelector((set) => ({
+    /**
+     * Data Points
+     */
+    points: [],
+    scopes: [],
+    isLoading: 0,
+    _lastFilter: "",
+    _lastResponse: [],
+    scopeForId: (scopeId) => {
+      return store.getState().scopes.find(({ data }) => `${data.id}` === `${scopeId}`);
+    },
+    clearCache: () => {
+      set(() => ({ _lastFilter: "", _lastResponse: [] }));
+    },
+    addProcess: () => {
+      set(({ isLoading }) => ({ isLoading: isLoading + 1 }));
+    },
+    removeProcess: () => {
+      set(({ isLoading }) => ({ isLoading: isLoading - 1 }));
+    },
+    getFilteredPoints: () => store.getState()._lastResponse,
+    fetchAll: async (filters = []) => {
+      const { points: fetchedPoints } = store.getState();
+      if (fetchedPoints.length > 0) return;
+      const locale = configStore.getState().locale;
+      set(({ isLoading }) => ({ isLoading: isLoading + 1 }));
+      const data = await getGeoDatasource(
+        {
+          variables: { filters: filters, locale: locale }
+        },
+        true
+      );
+      const points = data.nodes
+        .map((node) => {
+          const point = new GeoDatasourceNode({
+            node
+          });
+          if (point.init()) {
+            return point;
+          }
+          return undefined;
+        })
+        .filter(Boolean);
+
+      set(() => ({
+        points: points
+      }));
+      const scopes = await getGeoScopes({
+        variables: { locale: locale }
+      });
+      const geoScopes = scopes
+        .map((scope) => {
+          const geoScope = new GeoScope({
+            geoScope: scope
+          });
+          geoScope.init();
+          return geoScope.isEmpty() ? undefined : geoScope;
+        })
+        .filter(Boolean);
+      set(() => ({
+        scopes: geoScopes
+      }));
+      set(({ isLoading }) => ({
+        isLoading: isLoading - 1
+      }));
+    },
+    pointsForFilters: async (filters = []) => {
+      const locale = configStore.getState().locale;
+      const {
+        points,
+        _lastFilter: lastFilter,
+        _lastResponse: lastResponse
+      } = store.getState();
+      const cacheKey = JSON.stringify(filters);
+      // cache
+      if (cacheKey === lastFilter) {
+        return lastResponse;
+      }
+
+      set(({ isLoading }) => ({ isLoading: isLoading + 1 }));
+      const ids = await getGeoDatasource(
+        {
+          variables: { filters, locale: locale }
+        },
+        false
+      );
+      if (!ids?.nodes) {
+        return [];
+      }
+      const filteredPoints = ids.nodes
+        .map(({ id: needleId, type: needleType }) => {
+          return points.find(({ id }) => `${needleType}::${needleId}` === id);
+        })
+        .filter(Boolean);
+
+      set(({ isLoading }) => ({
+        _lastFilter: cacheKey,
+        _lastResponse: filteredPoints,
+        isLoading: isLoading - 1
+      }));
+      return filteredPoints;
+    }
+  }))
+);
+
+store.subscribe(
+  (state) => [state.scopes],
+  async ([scopes], [previousScopes]) => {
+    if (scopes.length === previousScopes.length) return;
+
+    const { selectedScope, selectScope } = geoStore.getState();
+    if (!!selectedScope) return;
+
+    const { space_ids } = configStore.getState();
+    if (space_ids.length === 1) {
+      const { scopeForId } = store.getState();
+      const scope = scopeForId(space_ids[0]);
+      if (scope) selectScope(scope);
+    }
+  }
+);
+
+export default store;

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

@@ -0,0 +1,20 @@
+import { createStore } from "zustand/vanilla";
+import { subscribeWithSelector } from "zustand/middleware";
+import dropdownFilterStore from "./dropdownFilterStore";
+const store = createStore(
+  subscribeWithSelector((set) => ({
+    isOpen: false,
+    toggleOpen: () => set((state) => ({ isOpen: !state.isOpen })),
+    close: () => set(() => ({ isOpen: false }))
+  }))
+);
+
+store.subscribe(
+  (state) => [state.isOpen],
+  ([isOpen]) => {
+    if (isOpen) {
+      dropdownFilterStore.getState().close();
+    }
+  }
+);
+export default store;

data/app/packs/src/decidim/geo/ui/DrawerDetail/fallback.js

@@ -0,0 +1,42 @@
+import _ from "lodash";
+import configStore from "../../models/configStore";
+import createClasses from "../createClasses";
+const fallback = (container, node) => {
+  const { i18n, images } = configStore.getState();
+  if (!_.isEmpty(node.bannerImage)) {
+    const image = L.DomUtil.create(
+      "img",
+      "decidimGeo__drawer__listCardImg decidimGeo__drawer__listCardImg--large",
+      container
+    );
+    image.src = node.bannerImage;
+    container.className += " decidimGeo__drawer__listCardInfo--image";
+  }
+
+  const infoType = L.DomUtil.create("div", "decidimGeo__drawer__listCardType", container);
+  infoType.textContent += i18n[node.type];
+  const notGeoEncodedIcon = L.DomUtil.create(
+    "img",
+    createClasses("decidimGeo__drawer__listCardIcon", [node.coordinates && "hidden"]),
+    infoType
+  );
+  notGeoEncodedIcon.src = images?.not_geolocated;
+
+  const infoTitle = L.DomUtil.create(
+    "div",
+    "decidimGeo__drawer__listCardTitle",
+    container
+  );
+  infoTitle.textContent += node.title.translation;
+  if (node.description) {
+    const infoDescription = L.DomUtil.create(
+      "div",
+      "decidimGeo__drawer__listCardDescription decidimGeo__drawer__listCardDescription--large",
+      container
+    );
+    infoDescription.textContent = _.truncate(node.description.translation, {
+      length: 2500
+    });
+  }
+};
+export default fallback;

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

@@ -0,0 +1,2 @@
+export { default as meetings } from "./meetings";
+export { default as fallback } from "./fallback";

data/app/packs/src/decidim/geo/ui/DrawerDetail/meetings.js

@@ -0,0 +1,75 @@
+import _ from "lodash";
+import configStore from "../../models/configStore";
+import createClasses from "../createClasses";
+import { format, isSameDay } from "date-fns";
+
+const meetings = (container, node) => {
+  const { i18n, images } = configStore.getState();
+  if (!_.isEmpty(node.bannerImage)) {
+    const image = L.DomUtil.create(
+      "img",
+      "decidimGeo__drawer__listCardImg decidimGeo__drawer__listCardImg--large",
+      container
+    );
+    image.src = node.bannerImage;
+    container.className += " decidimGeo__drawer__listCardInfo--image";
+  }
+
+  const infoType = L.DomUtil.create("div", "decidimGeo__drawer__listCardType", container);
+  infoType.textContent += i18n[node.type];
+  const notGeoEncodedIcon = L.DomUtil.create(
+    "img",
+    createClasses("decidimGeo__drawer__listCardIcon", [node.coordinates && "hidden"]),
+    infoType
+  );
+  notGeoEncodedIcon.src = images?.not_geolocated;
+  const infoTitle = L.DomUtil.create(
+    "div",
+    "decidimGeo__drawer__listCardTitle",
+    container
+  );
+  infoTitle.textContent += node.title.translation;
+  const infoDescription = L.DomUtil.create(
+    "div",
+    "decidimGeo__drawer__listCardDate",
+    container
+  );
+  const infoStart = L.DomUtil.create(
+    "strong",
+    "decidimGeo__drawer__listCardStartDate",
+    infoDescription
+  );
+  let displayedDate =
+    format(node.startTime, "dd/MM/yy") + " — " + format(node.endTime, "dd/MM/yy");
+  if (isSameDay(node.startTime, node.endTime)) {
+    displayedDate = format(node.startTime, "dd/MM/yy");
+  }
+  infoStart.textContent = displayedDate;
+
+  const infoStartSep = L.DomUtil.create(
+    "div",
+    "decidimGeo__drawer__listCardStartDateSep",
+    infoDescription
+  );
+  infoStartSep.textContent = "·";
+
+  const infoStartTime = L.DomUtil.create(
+    "div",
+    "decidimGeo__drawer__listCardStartTime",
+    infoDescription
+  );
+  infoStartTime.textContent =
+    format(node.startTime, "kk:mm") + "-" + format(node.endTime, "kk:mm");
+
+  if (node.description) {
+    const infoDescription = L.DomUtil.create(
+      "div",
+      "decidimGeo__drawer__listCardDescription decidimGeo__drawer__listCardDescription--large decidimGeo__drawer__listCardDescription--meetings",
+      container
+    );
+    infoDescription.textContent = _.truncate(node.description.translation, {
+      length: 2500
+    });
+  }
+};
+export default meetings;

data/app/packs/src/decidim/geo/ui/DrawerMenuItem/fallback.js

@@ -0,0 +1,45 @@
+import configStore from "../../models/configStore";
+import createClasses from "../createClasses";
+import { createDomElement } from "../createDomElement";
+import _ from "lodash";
+
+const fallback = (node) => {
+  const { i18n, images } = configStore.getState();
+  const hasImage = !_.isEmpty(node.bannerImage);
+  const listCard = createDomElement("li", "decidimGeo__drawer__listCard");
+
+  const info = createDomElement(
+    "div",
+    createClasses("decidimGeo__drawer__listCardInfo", [!hasImage && "large"]),
+    listCard
+  );
+
+  const infoType = createDomElement("div", "decidimGeo__drawer__listCardType", info);
+  infoType.textContent += i18n[node.type];
+  const notGeoEncodedIcon = createDomElement(
+    "img",
+    createClasses("decidimGeo__drawer__listCardIcon", [node.coordinates && "hidden"]),
+    infoType
+  );
+  notGeoEncodedIcon.src = images?.not_geolocated;
+
+  const infoTitle = createDomElement("div", "decidimGeo__drawer__listCardTitle", info);
+  infoTitle.textContent += node.title.translation;
+
+  if (node.shortDescription) {
+    const infoDescription = createDomElement(
+      "div",
+      "decidimGeo__drawer__listCardDescription",
+      info
+    );
+    infoDescription.textContent += node.shortDescription.translation;
+  }
+
+  if (hasImage) {
+    const image = createDomElement("img", "decidimGeo__drawer__listCardImg", listCard);
+    image.src = node.bannerImage;
+  }
+  return listCard;
+};
+
+export default fallback;

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

@@ -0,0 +1,2 @@
+export { default as meetings } from "./meetings";
+export { default as fallback } from "./fallback";

data/app/packs/src/decidim/geo/ui/DrawerMenuItem/meetings.js

@@ -0,0 +1,62 @@
+import configStore from "../../models/configStore";
+import createClasses from "../createClasses";
+import { createDomElement } from "../createDomElement";
+import _ from "lodash";
+import { format, isSameDay } from "date-fns";
+
+const meetings = (node) => {
+  const { i18n, images } = configStore.getState();
+  const listCard = createDomElement("li", "decidimGeo__drawer__listCard");
+  const info = createDomElement(
+    "div",
+    "decidimGeo__drawer__listCardInfo decidimGeo__drawer__listCardInfo--large",
+    listCard
+  );
+
+  const infoType = createDomElement("div", "decidimGeo__drawer__listCardType", info);
+  infoType.textContent = i18n[node.type];
+  const notGeoEncodedIcon = createDomElement(
+    "img",
+    createClasses("decidimGeo__drawer__listCardIcon", [node.coordinates && "hidden"]),
+    infoType
+  );
+  notGeoEncodedIcon.src = images?.not_geolocated;
+
+  const infoTitle = createDomElement("div", "decidimGeo__drawer__listCardTitle", info);
+  infoTitle.textContent = node.title.translation;
+
+  const infoDescription = createDomElement(
+    "div",
+    "decidimGeo__drawer__listCardDate",
+    info
+  );
+  const infoStart = createDomElement(
+    "strong",
+    "decidimGeo__drawer__listCardStartDate",
+    infoDescription
+  );
+  let displayedDate =
+    format(node.startTime, "dd/MM/yy") + " — " + format(node.endTime, "dd/MM/yy");
+  if (isSameDay(node.startTime, node.endTime)) {
+    displayedDate = format(node.startTime, "dd/MM/yy");
+  }
+  infoStart.textContent = displayedDate;
+
+  const infoStartSep = createDomElement(
+    "span",
+    "decidimGeo__drawer__listCardStartDateSep",
+    infoDescription
+  );
+  infoStartSep.textContent = "·";
+
+  const infoStartTime = createDomElement(
+    "span",
+    "decidimGeo__drawer__listCardStartTime",
+    infoDescription
+  );
+  infoStartTime.textContent =
+    format(node.startTime, "kk:mm") + "-" + format(node.endTime, "kk:mm");
+  return listCard;
+};
+
+export default meetings;

data/app/packs/src/decidim/geo/ui/createClasses.js

@@ -0,0 +1,7 @@
+const createClasses = (classname, modifiers = []) =>
+  [
+    classname,
+    ...modifiers.filter(Boolean).map((modifier) => `${classname}--${modifier}`)
+  ].join(" ");
+
+export default createClasses;

data/app/packs/src/decidim/geo/ui/createCustomMarker.js

@@ -0,0 +1,14 @@
+const createCustomMarker = (location) => {
+  return new L.circleMarker(location, {
+    radius: 6,
+    fillColor: "#ffffff",
+    fillOpacity: 1,
+    color: "#404040",
+    opacity: 1,
+    weight: 5,
+    className: "decidimGeo__marker",
+    riseOnHover: true
+  });
+};
+
+export default createCustomMarker;

data/app/packs/src/decidim/geo/ui/createDomElement.js

@@ -0,0 +1,2 @@
+export const createDomElement = (tag, classes, container = undefined) =>
+  L.DomUtil.create(tag, classes, container);