decidim-decidim_geo 0.2.1

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

@@ -0,0 +1,170 @@
+import createClasses from "./createClasses";
+import geoStore from "../models/geoStore";
+import pointStore from "../models/pointStore";
+import configStore from "../models/configStore";
+import filterStore from "../models/filterStore";
+import dropdownFilterStore from "../models/dropdownFilterStore";
+import { meetings as meetingDetails, fallback as fallbackDetails } from "./DrawerDetail";
+
+const createSkeletonItem = () => L.DomUtil.create("li", "decidimGeo__drawer__listCard");
+
+async function createSidebar() {
+  const CustomLayerControl = L.Control.extend({
+    options: {
+      collapsed: false,
+      position: "topleft"
+    },
+
+    // View
+    cardList: null,
+    _loadingDOM: null,
+
+    isEmpty() {
+      return false;
+    },
+
+    loadingDom() {
+      if (this._loadingDOM) return this._loadingDOM;
+      this._loadingDOM = L.DomUtil.create(
+        "div",
+        createClasses("decidimGeo__drawer__listCardLoader")
+      );
+      this._loadingDOM.appendChild(createSkeletonItem());
+      this._loadingDOM.appendChild(createSkeletonItem());
+      this._loadingDOM.appendChild(createSkeletonItem());
+      return this._loadingDOM;
+    },
+
+    repaintList(points) {
+      points.map(({ menuItem }) => {
+        this.cardList.appendChild(menuItem);
+      });
+    },
+    repaintEmpty() {
+      const emptyContainer = L.DomUtil.create(
+        "li",
+        "decidimGeo__emptyDrawer__container",
+        this.cardList
+      );
+      const emptyParagraph = L.DomUtil.create(
+        "p",
+        "decidimGeo__emptyDrawer__paragraph",
+        emptyContainer
+      );
+      emptyParagraph.textContent = "No data with these filters";
+      const emptyAction = L.DomUtil.create(
+        "button",
+        "decidimGeo__emptyDrawer__button",
+        emptyContainer
+      );
+      emptyAction.textContent = "Reset filter";
+      emptyAction.onclick = () => {
+        const { resetFilters } = filterStore.getState();
+        const { resetFilters: resetDropdownFilter } = dropdownFilterStore.getState();
+        const { selectScope } = geoStore.getState();
+        const { space_ids } = configStore.getState();
+        const { scopeForId } = pointStore.getState();
+
+        resetFilters();
+        resetDropdownFilter();
+        const scopes = space_ids.map((scope) => scopeForId(scope)).filter(Boolean);
+        if (scopes.length === 1) {
+          const scope = scopeForId(scopes[0]);
+          selectScope(scope);
+          scope.repaint();
+        } else {
+          selectScope(undefined);
+        }
+        this.repaint();
+      };
+    },
+    repaintLoading() {
+      const loadingElement = this.loadingDom();
+      this.cardList.appendChild(loadingElement);
+    },
+    repaintDetail({ data: node }) {
+      const listCard = L.DomUtil.create(
+        "li",
+        "decidimGeo__drawer__listCard",
+        this.cardList
+      );
+      const onClick = () => {
+        location.href = node.link;
+      };
+      listCard.onclick = onClick;
+
+      const info = L.DomUtil.create(
+        "div",
+        "decidimGeo__drawer__listCardInfo decidimGeo__drawer__listCardInfo--large",
+        listCard
+      );
+      switch (node.type) {
+        case "Decidim::Meetings::Meeting":
+          meetingDetails(info, node);
+          break;
+        default:
+          fallbackDetails(info, node);
+          break;
+      }
+      const viewBtn = L.DomUtil.create("a", "decidimGeo__drawer__viewBtn", listCard);
+      viewBtn.textContent = "View";
+      viewBtn.href = node.link;
+      return listCard;
+    },
+    repaint() {
+      L.DomUtil.empty(this.cardList);
+      const { isLoading, getFilteredPoints, points } = pointStore.getState();
+      const { selectedPoint } = geoStore.getState();
+      const pointsInMap = getFilteredPoints();
+
+      if (isLoading) {
+        return this.repaintLoading();
+      }
+      if (selectedPoint) {
+        return this.repaintDetail(selectedPoint);
+      }
+
+      if (pointsInMap.length === 0) {
+        this.repaintEmpty();
+      } else {
+        this.repaintList(pointsInMap);
+      }
+    },
+    onAdd(map) {
+      const { isLoading, points } = pointStore.getState();
+      this.cardList = L.DomUtil.create(
+        "ul",
+        createClasses("decidimGeo__drawer__list", [
+          isLoading && "loading",
+          this.isEmpty() && "empty"
+        ])
+      );
+      L.DomEvent.disableClickPropagation(this.cardList);
+      L.DomEvent.disableScrollPropagation(this.cardList);
+
+      const _this = this;
+      const repaint = this.repaint.bind(this);
+
+      geoStore.subscribe(
+        (state) => [state.selectedPoint, state.selectedScope],
+        () => {
+          repaint();
+        }
+      );
+
+      pointStore.subscribe(
+        (state) => [state.isLoading, state._lastResponse],
+        ([isLoading]) => {
+          if (!isLoading) repaint();
+        }
+      );
+      this.repaint();
+      return this.cardList;
+    }
+  });
+  const control = new CustomLayerControl();
+  const { map } = configStore.getState();
+  map.addControl(control);
+}
+
+export default createSidebar;

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

@@ -0,0 +1,197 @@
+import createGeoScopeMenuItem from "./createGeoScopeMenuItem";
+import createClasses from "./createClasses";
+import geoStore from "../models/geoStore";
+import pointStore from "../models/pointStore";
+import configStore from "../models/configStore";
+import createFilterDropdown from "./createFilterDropdown";
+import scopeDropdownStore from "../models/scopeDropdownStore";
+
+async function createScopesDropdown() {
+  const CustomLayerControl = L.Control.extend({
+    options: {
+      collapsed: false,
+      position: "topleft"
+    },
+
+    //View
+    menu: null,
+    heading: null,
+    filterDropdown: null,
+    title: null,
+    dropDownOptions: null,
+
+    //Controlers
+    toggleOpen() {
+      scopeDropdownStore.getState().toggleOpen();
+    },
+    scopes() {
+      const { scopeForId, scopes } = pointStore.getState();
+      const { space_ids } = configStore.getState();
+      if (space_ids.length > 0)
+        return space_ids.map((id) => scopeForId(id)).filter(Boolean);
+      return scopes;
+    },
+    isEmpty() {
+      return this.scopes().length < 2;
+    },
+    activeScope() {
+      return geoStore.getState().selectedScope;
+    },
+    initMenuElements() {
+      const { isLoading } = pointStore.getState();
+      const { isOpen } = scopeDropdownStore.getState();
+      this.heading = L.DomUtil.create(
+        "div",
+        createClasses("decidimGeo__scopesDropdown__heading", [!isOpen && "closed"]),
+        this.menu
+      );
+
+      this.title = L.DomUtil.create(
+        "h6",
+        createClasses("decidimGeo__scopesDropdown__title", [
+          !isOpen && "closed",
+          isLoading && "loading"
+        ]),
+        this.heading
+      );
+      this.title.onclick = () => {
+        this.toggleOpen();
+        this.repaint();
+      };
+      this.filterDropdown = createFilterDropdown(this.heading, this.menu);
+      this.dropDownOptions = L.DomUtil.create(
+        "ul",
+        createClasses("decidimGeo__scopesDropdown__list", [
+          !isOpen && "closed",
+          this.isEmpty() && "empty"
+        ]),
+        this.menu
+      );
+
+      this.repaint();
+    },
+    repaintHeading() {
+      const { i18n } = configStore.getState();
+      const { selectedPoint } = geoStore.getState();
+      const scopes = this.scopes();
+      if (selectedPoint) {
+        this.title.textContent = i18n["decidim_geo.filters.back"];
+        this.title.onclick = () => {
+          selectedPoint.panToMarker(16);
+          geoStore.getState().goBack();
+        };
+        return;
+      } else if (scopes.length === 0) {
+        this.title.textContent = i18n["decidim_geo.scopes.dropdown"];
+        this.title.className += " decidimGeo__scopesDropdown__list--disabled";
+        this.title.onclick = () => false;
+        return;
+      } else {
+        this.title.onclick = () => {
+          this.toggleOpen();
+          this.repaint();
+        };
+      }
+
+      // Dropdown heading text
+      if (this.activeScope()) {
+        // specific scope
+        this.title.textContent = this.activeScope().name;
+      } else if (scopes.length === 1) {
+        this.title.textContent = scopes[0].name;
+      } else {
+        // all scopes
+        this.title.textContent = i18n["decidim_geo.scopes.dropdown"];
+      }
+    },
+    repaintOptions() {
+      const { i18n } = configStore.getState();
+      const scopes = this.scopes();
+      // Dropdown options
+      L.DomUtil.empty(this.dropDownOptions);
+      if (scopes.length == 1) return;
+      if (this.activeScope() && scopes.length > 1) {
+        // Add a "All Scope" menu item
+        const resetItem = createGeoScopeMenuItem({
+          label: i18n["decidim_geo.scopes.all"],
+          onClick: () => {
+            this.toggleOpen();
+            geoStore.getState().selectScope(undefined);
+            geoStore.getState().selectPoint(undefined);
+          }
+        });
+        this.dropDownOptions.appendChild(resetItem);
+      }
+      // Add all the other scopes
+      scopes.forEach((geoScope) => {
+        if (geoScope !== this.activeScope() && !geoScope.isEmpty())
+          this.dropDownOptions.appendChild(geoScope.menuItem);
+      });
+    },
+    repaintOpenClose() {
+      const { selectedPoint } = geoStore.getState();
+      const { isOpen } = scopeDropdownStore.getState();
+
+      // Dropdown backdrop open/close
+      this.title.className = createClasses("decidimGeo__scopesDropdown__title", [
+        !isOpen && "closed",
+        !selectedPoint && this.isEmpty() && "empty",
+        selectedPoint && "button"
+      ]);
+      this.dropDownOptions.className = createClasses("decidimGeo__scopesDropdown__list", [
+        !isOpen && "closed",
+        this.isEmpty() && "empty",
+        selectedPoint && "hidden"
+      ]);
+    },
+    repaint() {
+      this.repaintHeading();
+      this.repaintOptions();
+      this.repaintOpenClose();
+    },
+    onAdd(map) {
+      this.menu = L.DomUtil.create("div", "decidimGeo__scopesDropdown");
+      L.DomEvent.disableClickPropagation(this.menu);
+      L.DomEvent.disableScrollPropagation(this.menu);
+      const repaint = this.repaint.bind(this);
+      // We we change the available scopes, repaint.
+      geoStore.subscribe(
+        (state) => [state.selectedScope],
+        ([_geoScope], [prevGeoScope]) => {
+          if (prevGeoScope) {
+            prevGeoScope.repaint();
+          }
+          repaint();
+        }
+      );
+      pointStore.subscribe(
+        (state) => [state.scopes, state.isLoading],
+        ([scopes, isLoading]) => {
+          if (!scopes || scopes.length == 0 || isLoading) return;
+          repaint();
+        }
+      );
+      this.initMenuElements();
+      this.repaint(); // first repaint
+      scopeDropdownStore.subscribe(
+        (state) => [state.isOpen],
+        ([]) => {
+          this.repaint();
+        }
+      );
+      return this.menu;
+    },
+    reset() {
+      scopeDropdownStore.getState().close();
+    },
+    close() {
+      scopeDropdownStore.getState().close();
+    }
+  });
+
+  const control = new CustomLayerControl();
+  const { map } = configStore.getState();
+  map.addControl(control);
+}
+
+export default createScopesDropdown;

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

@@ -0,0 +1,320 @@
+import createClasses from "./createClasses";
+import dropdownFilterStore from "../models/dropdownFilterStore";
+import geoStore from "../models/geoStore";
+import configStore from "../models/configStore";
+import filterStore from "../models/filterStore";
+import pointStore from "../models/pointStore";
+class FilterDropdown {
+  constructor(parent, anchor) {
+    this.container = L.DomUtil.create(
+      "div",
+      "decidimGeo__filterDropdown__container",
+      parent
+    );
+    this.titleContainer = L.DomUtil.create(
+      "div",
+      "decidimGeo__filterDropdown__titleContainer",
+      this.container
+    );
+    this.title = L.DomUtil.create(
+      "h6",
+      createClasses("decidimGeo__filterDropdown__title", [this.isOpen() && "active"]),
+      this.titleContainer
+    );
+    this.countBadge = L.DomUtil.create(
+      "span",
+      createClasses("decidimGeo__filterDropdown__counter", ["hidden"]),
+      this.titleContainer
+    );
+    this.countBadge.textContent = 0;
+
+    this.dropdown = L.DomUtil.create(
+      "div",
+      createClasses("decidimGeo__filterDropdown__dropdown", [!this.isOpen() && "closed"]),
+      anchor
+    );
+    this.dropDownOptions = L.DomUtil.create(
+      "ul",
+      "decidimGeo__filterDropdown__list",
+      this.dropdown
+    );
+    this.resetBtn = L.DomUtil.create(
+      "button",
+      "decidimGeo__filterDropdown__resetBtn",
+      this.dropdown
+    );
+    this.resetBtn.textContent = "Reset";
+    this.resetBtn.onclick = () => {
+      const { resetFilters } = filterStore.getState();
+      const {
+        resetFilters: resetDropdownFilter,
+        toggleOpen,
+        defaultFilters
+      } = dropdownFilterStore.getState();
+      resetDropdownFilter();
+      // resetFilters();
+      this.applyValues(defaultFilters);
+      toggleOpen();
+    };
+    this.applyBtn = L.DomUtil.create(
+      "button",
+      "decidimGeo__filterDropdown__applyBtn",
+      this.dropdown
+    );
+    this.applyBtn.textContent = "Apply";
+
+    this.applyBtn.onclick = () => {
+      const { nextFilters, toggleOpen, applyNextFilters } =
+        dropdownFilterStore.getState();
+      this.applyValues(nextFilters);
+      applyNextFilters();
+      toggleOpen();
+      this.repaint();
+    };
+
+    this.title.textContent = this.i18n()["decidim_geo.filters.button"];
+    this.title.onclick = () => {
+      this.toggle();
+      this.repaint();
+    };
+
+    dropdownFilterStore.subscribe(
+      (state) => [state.isOpen],
+      () => this.repaint()
+    );
+    filterStore.subscribe(
+      (state) => [state.activeFilters],
+      () => {
+        this.repaint();
+      }
+    );
+  }
+
+  defaultFilterFor(name) {
+    const { toFilterOptions, defaultFilters } = filterStore.getState();
+    return toFilterOptions(name, defaultFilters);
+  }
+  field(label, name, options, disabledOptions=[]) {
+    const { nextFilters } = dropdownFilterStore.getState();
+    const selectedValue =
+      (nextFilters && nextFilters[name]) || this.defaultFilterFor(name);
+
+    const fieldGroup = L.DomUtil.create(
+      "li",
+      "decidimGeo__filterDropdown__field",
+      this.dropDownOptions
+    );
+    const labelTag = L.DomUtil.create(
+      "label",
+      "decidimGeo__filterDropdown__label",
+      fieldGroup
+    );
+    labelTag.htmlFor = name;
+    labelTag.textContent = label;
+
+    const selectTag = L.DomUtil.create(
+      "select",
+      "decidimGeo__filterDropdown__select",
+      fieldGroup
+    );
+    selectTag.id = name;
+    selectTag.onchange = (evt) => {
+      dropdownFilterStore.getState().setNextFilter(name, evt.target.value);
+    };
+    options.forEach(([key, value]) => {
+      const option = L.DomUtil.create(
+        "option",
+        "decidimGeo__filterDropdown__option",
+        selectTag
+      );
+      option.name = name.toLowerCase();
+      option.value = value;
+      if (value === selectedValue) {
+        option.selected = "selected";
+      }
+      if(disabledOptions.includes(value)) {
+        option.disabled="disabled"
+      }
+      option.textContent = key;
+    });
+    return selectTag;
+  }
+
+  applyValues(filters) {
+    if (!filters) {
+      throw new Error("Filters missing");
+    }
+    const { setFilters, activeFilters, defaultFilters } = filterStore.getState();
+    const newFilters = activeFilters.filter((filter) => {
+      const [filterName] = Object.keys(filter);
+      return !["resourceTypeFilter", "timeFilter", "geoencodedFilter"].includes(
+        filterName
+      );
+    });
+    switch (filters.GeoShowFilter || defaultFilters.GeoShowFilter) {
+      case "all":
+        break;
+      case "only_geoencoded":
+        newFilters.push({
+          geoencodedFilter: { geoencoded: true }
+        });
+        break;
+      case "only_virtual":
+        newFilters.push({
+          geoencodedFilter: { geoencoded: false }
+        });
+        break;
+    }
+    switch (filters.GeoTimeFilter || defaultFilters.GeoTimeFilter) {
+      case "all":
+        newFilters.push({
+          timeFilter: { time: "all" }
+        });
+        break;
+      case "only_past":
+        newFilters.push({
+          timeFilter: { time: "past" }
+        });
+        break;
+      case "only_active":
+        newFilters.push({
+          timeFilter: { time: "active" }
+        });
+        break;
+      case "only_future":
+        newFilters.push({
+          timeFilter: { time: "future" }
+        });
+        break;
+    }
+
+    switch (filters.GeoType || defaultFilters.GeoType) {
+      case "all":
+        newFilters.push({
+          resourceTypeFilter: { resourceType: "all" }
+        });
+        break;
+      case "only_processes":
+        newFilters.push({
+          resourceTypeFilter: { resourceType: "Decidim::ParticipatoryProcess" }
+        });
+        break;
+      case "only_assemblies":
+        newFilters.push({ resourceTypeFilter: { resourceType: "Decidim::Assembly" } });
+        break;
+      case "only_proposals":
+        newFilters.push({
+          resourceTypeFilter: { resourceType: "Decidim::Proposals::Proposal" }
+        });
+        break;
+      case "only_meetings":
+        newFilters.push({
+          resourceTypeFilter: { resourceType: "Decidim::Meetings::Meeting" }
+        });
+        break;
+    }
+    setFilters(newFilters);
+  }
+  
+  geoFields(points){
+    const i18n = this.i18n();
+    const i18nPrefix = "decidim_geo.filters";
+    const hasGeoLocated = points.find((p) => p.isGeoLocated)
+    const hasPhysical = points.find((p) => !p.isGeoLocated)
+
+    return this.field(i18n[`${i18nPrefix}.geo.label`], "GeoShowFilter", [
+      [i18n[`${i18nPrefix}.geo.all`], "all"],
+      [i18n[`${i18nPrefix}.geo.only_geoencoded`], "only_geoencoded"],
+      [i18n[`${i18nPrefix}.geo.only_virtual`], "only_virtual"]
+    ], hasGeoLocated && hasPhysical ? [] : ["only_geoencoded", "only_virtual"]);
+  }
+  repaintOptions() {
+    L.DomUtil.empty(this.dropDownOptions);
+    const i18n = this.i18n();
+    const i18nPrefix = "decidim_geo.filters"
+    const {points} = pointStore.getState();
+    this.geoFields(points);
+    this.field(i18n[`${i18nPrefix}.time.label`], "GeoTimeFilter", [
+      [i18n[`${i18nPrefix}.time.all`], "all"],
+      [i18n[`${i18nPrefix}.time.only_past`], "only_past"],
+      [i18n[`${i18nPrefix}.time.only_active`], "only_active"],
+      [i18n[`${i18nPrefix}.time.only_future`], "only_future"]
+    ]);
+    this.typeFields(points);
+
+  }
+
+  typeFields(points) {
+    const i18n = this.i18n();
+    const i18nPrefix = "decidim_geo.filters";
+    const hasMeetings = points.find((p) => p.type === "Decidim::Meetings::Meeting")
+    const hasProposals = points.find((p) => p.type === "Decidim::Proposals::Proposal")
+    const hasAssemblies = points.find((p) => p.type === "Decidim::Assembly")
+    const hasProcesses = points.find((p) => p.type === "Decidim::ParticipatoryProcess")
+
+    const disabledOptions = [];
+    if(!hasMeetings)
+      disabledOptions.push("only_meetings")
+    if(!hasProposals)
+      disabledOptions.push("only_proposals")
+    if(!hasAssemblies)
+      disabledOptions.push("only_assemblies")
+    if(!hasProcesses)
+      disabledOptions.push("only_processes")
+    this.field(i18n[`${i18nPrefix}.type.label`], "GeoType", [
+      [i18n[`${i18nPrefix}.type.all`], "all"],
+      [i18n[`${i18nPrefix}.type.only_processes`], "only_processes"],
+      [i18n[`${i18nPrefix}.type.only_assemblies`], "only_assemblies"],
+      [i18n[`${i18nPrefix}.type.only_proposals`], "only_proposals"],
+      [i18n[`${i18nPrefix}.type.only_meetings`], "only_meetings"]
+    ], disabledOptions);
+  }
+
+  repaint() {
+    const { selectedPoint } = geoStore.getState();
+    const { filterCount } = dropdownFilterStore.getState();
+    const badgeCount = filterCount();
+    this.title.onclick = selectedPoint
+      ? () => {}
+      : () => {
+          this.toggle();
+          this.repaint();
+        };
+    this.countBadge.className = createClasses("decidimGeo__filterDropdown__counter", [
+      badgeCount === 0 && "hidden"
+    ]);
+    this.countBadge.textContent = badgeCount;
+    this.title.className = createClasses("decidimGeo__filterDropdown__title", [
+      this.isOpen() && "active"
+    ]);
+    this.titleContainer.className = createClasses(
+      "decidimGeo__filterDropdown__titleContainer",
+      [selectedPoint && "disabled"]
+    );
+
+    this.dropdown.className = createClasses("decidimGeo__filterDropdown__dropdown", [
+      !this.isOpen() && "closed"
+    ]);
+
+    this.repaintOptions();
+  }
+
+  isOpen() {
+    return dropdownFilterStore.getState().isOpen;
+  }
+
+  toggle() {
+    dropdownFilterStore.getState().toggleOpen();
+  }
+
+  i18n() {
+    return this.config().i18n;
+  }
+
+  config() {
+    return configStore.getState();
+  }
+}
+
+const createFilterDropdown = (parent, anchor) => new FilterDropdown(parent, anchor);
+export default createFilterDropdown;

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

@@ -0,0 +1,20 @@
+const createGeoScopeLayer = ({ geoScope, onClick }) => {
+  geoScope.geom = {
+    ...geoScope.geom,
+    properties: { id: geoScope.id, name: geoScope.name.translation }
+  };
+  const layer = L.geoJSON(geoScope.geom, {
+    style: {
+      fillColor: "#cccccc",
+      color: "#999999",
+      lineJoin: "miter",
+      dashArray: "5, 10",
+      dashOffset: "5"
+    }
+  });
+  layer.on("click", onClick);
+
+  return layer;
+};
+
+export default createGeoScopeLayer;