Fix autocomplete in proposals #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

Stef-Rousset wants to merge 16 commits into develop from fix/autocomplete_in_proposals

.github/workflows/tests.yml

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -20,7 +20,7 @@ jobs:
  
            if: "github.ref != 'refs/heads/develop'"

            env:

              GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"

          - uses: actions/checkout@v2.0.0

          - uses: actions/checkout@v4

            with:

              fetch-depth: 1

          - uses: ruby/setup-ruby@v1

    @@ -33,15 +33,15 @@ jobs:
  
          - name: Get npm cache directory path

            id: npm-cache-dir-path

            run: echo "::set-output name=dir::$(npm get cache)-lint"

          - uses: actions/cache@v2

          - uses: actions/cache@v4

            id: npm-cache

            with:

              path: ${{ steps.npm-cache-dir-path.outputs.dir }}

              key: npm-${{ hashFiles('**/package-lock.json') }}

              restore-keys: |

                npm-

          - name: Install JS dependencies

            run: npm ci

            run: yarn install --prefer-offline --frozen-lockfile

          - run: bundle exec rubocop -P

            name: Lint Ruby files

      tests:

    @@ -70,21 +70,25 @@ jobs:
  
            if: "github.ref != 'refs/heads/master' || github.ref != 'refs/heads/develop'"

            env:

              GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"

          - uses: actions/checkout@v2.0.0

          - uses: actions/checkout@v4

            with:

              fetch-depth: 1

          - uses: ruby/setup-ruby@v1

            with:

              ruby-version: ${{ env.RUBY_VERSION }}

              bundler-cache: true

          - run: |

              sudo apt update

              sudo apt install libu2f-udev imagemagick

            name: Install dependencies

          - uses: actions/setup-node@v1

            with:

              node-version: ${{ env.NODE_VERSION }}

          - name: Get Yarn cache directory

            id: yarn-cache-dir-path

            run: echo "::set-output name=dir::$(yarn cache dir)"

          - name: Use Yarn cache

            uses: actions/cache@v2

            uses: actions/cache@v4

            id: yarn-cache

            with:

              path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

    @@ -100,12 +104,12 @@ jobs:
  
              bundle exec rake assets:precompile

          - run: mkdir -p ./spec/tmp/screenshots

            name: Create the screenshots folder

          - uses: nanasess/setup-chromedriver@v1.0.1

          - uses: nanasess/setup-chromedriver@v2

          - run: bundle exec rspec

            name: RSpec

          - run: ./.github/upload_coverage.sh decidim-app $GITHUB_EVENT_PATH

            name: Upload coverage

          - uses: actions/upload-artifact@v2-preview

          - uses: actions/upload-artifact@v4

            if: always()

            with:

              name: screenshots

Gemfile

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,8 @@ gem "jquery-ui-rails" @@
     gem "dotenv-rails"
+    gem "nokogiri", "1.13.10"
     gem "puma", "~> 5.3.1"
     gem "uglifier", "~> 4.1"
@@ Expand All / @@ -33,6 +35,8 @@ gem "ruby-progressbar" @@
     gem "letter_opener_web", "~> 1.3"
+    gem "logger", "~> 1.6"
     gem "activejob-uniqueness", require: "active_job/uniqueness/sidekiq_patch"
     gem "fog-aws"
     gem "sys-filesystem"
@@ Expand Down @@

Gemfile.lock

-Original file line number
+Diff line change
@@ Expand Up / @@ -513,6 +513,7 @@ GEM @@
         listen (3.8.0)
           rb-fsevent (~> 0.10, >= 0.10.3)
           rb-inotify (~> 0.9, >= 0.9.10)
+        logger (1.7.0)
         lograge (0.12.0)
           actionpack (>= 4)
           activesupport (>= 4)
@@ Expand Down Expand Up / @@ -540,7 +541,6 @@ GEM @@
         mime-types-data (3.2023.0218.1)
         mini_magick (4.12.0)
         mini_mime (1.1.2)
-        mini_portile2 (2.8.1)
         minitest (5.18.0)
         mixlib-cli (2.1.8)
         mixlib-config (3.0.27)
@@ Expand All / @@ -562,11 +562,10 @@ GEM @@
           net-protocol
         newrelic_rpm (9.0.0)
         nio4r (2.5.9)
-        nokogiri (1.13.10)
-          mini_portile2 (~> 2.8.0)
-          racc (~> 1.4)
         nokogiri (1.13.10-x86_64-darwin)
           racc (~> 1.4)
+        nokogiri (1.13.10-x86_64-linux)
+          racc (~> 1.4)
         oauth (1.1.0)
           oauth-tty (~> 1.0, >= 1.0.1)
           snaky_hash (~> 2.0)
@@ Expand Down Expand Up / @@ -882,8 +881,9 @@ GEM @@
         zeitwerk (2.6.7)
     PLATFORMS
-      ruby
       x86_64-darwin-21
+      x86_64-darwin-23
+      x86_64-linux
     DEPENDENCIES
       activejob-uniqueness
@@ Expand All / @@ -904,8 +904,10 @@ DEPENDENCIES @@
       jquery-ui-rails
       letter_opener_web (~> 1.3)
       listen (~> 3.1)
+      logger (~> 1.6)
       lograge
       newrelic_rpm
+      nokogiri (= 1.13.10)
       omniauth-publik!
       passenger
       puma (~> 5.3.1)
@@ Expand Down @@

app/packs/entrypoints/application.js

Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,3 +19,4 @@
		// ActiveStorage.start()

		import "src/decidim/user_registration"
		import "src/decidim/geocoding/provider/here"

app/packs/src/decidim/geocoding/provider/here.js

-Original file line number
+Diff line change
@@ -0,0 +1,97 @@
+    import "src/decidim/geocoding"
+    import formatAddress from "src/decidim/geocoding/format_address"
+    /**
+     * For the available address format keys, refer to:
+     * https://developer.here.com/documentation/geocoder-autocomplete/dev_guide/topics/resource-type-response-suggest.html
+     */
+    $(() => {
+        const generateAddressLabel = formatAddress;
+        $("[data-decidim-geocoding]").each((_i, el) => {
+            const $input = $(el);
+            const config = $input.data("decidim-geocoding");
+            const queryMinLength = config.queryMinLength || 2;
+            const addressFormat = config.addressFormat || [
+                ["street", "houseNumber"],
+                "district",
+                "city",
+                "county",
+                "state",
+                "country"
+            ];
+            const language = $("html").attr("lang");
+            let currentSuggestionQuery = null;
+            if (!config.apiKey || config.apiKey.length < 1) {
+                return;
+            }
+            $input.on("geocoder-suggest.decidim", (_ev, query, callback) => {
+                clearTimeout(currentSuggestionQuery);
+                // Do not trigger API calls on short queries
+                if (`${query}`.trim().length < queryMinLength) {
+                    return;
+                }
+                // Changes to the autocomplete api call based on:
+                // https://developer.here.com/documentation/geocoding-search-api/migration_guide/migration-geocoder/topics-api/autocomplete.html
+                currentSuggestionQuery = setTimeout(() => {
+                    $.ajax({
+                        method: "GET",
+                        url: "https://autocomplete.search.hereapi.com/v1/autocomplete",
+                        data: {
+                            apiKey: config.apiKey,
+                            // eslint-disable-next-line
+                            q: query,
+                            lang: language
+                        },
+                        dataType: "json"
+                    }).done((resp) => {
+                        if (resp.items) {
+                            return callback(resp.items.map((item) => {
+                                const label = generateAddressLabel(item.address, addressFormat);
+                                return {
+                                    key: label,
+                                    value: label,
+                                    locationId: item.id
+                                }
+                            }));
+                        }
+                        return null;
+                    });
+                }, 200);
+            });
+            $input.on("geocoder-suggest-select.decidim", (_ev, selectedItem) => {
+                $.ajax({
+                    method: "GET",
+                    url: "https://lookup.search.hereapi.com/v1/lookup",
+                    data: {
+                        apiKey: config.apiKey,
+                        id: selectedItem.locationId
+                    },
+                    dataType: "json"
+                }).done((resp) => {
+                    if (!resp || Object.keys(resp).length < 1
+                    ) {
+                        return;
+                    }
+                    const position = resp.position;
+                    if (!position || !position.lat || !position.lng) {
+                        return
+                    }
+                    const coordinates = [
+                        position.lat,
+                        position.lng
+                    ];
+                    $input.trigger(
+                        "geocoder-suggest-coordinates.decidim",
+                        [coordinates]
+                    );
+                });
+            });
+        })
+    })

config/environment.rb

-Original file line number
+Diff line change
@@ -1,5 +1,6 @@
     # frozen_string_literal: true
+    require "logger"
     # Load the Rails application.
     require_relative "application"
@@ Expand Down @@

config/initializers/decidim.rb

-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,18 @@ @@
       config.maps = {
         provider: :here,
         api_key: Rails.application.secrets.maps[:api_key],
-        static: { url: "https://image.maps.ls.hereapi.com/mia/1.6/mapview" }
+        autocomplete: {
+          address_format: [%w(houseNumber street), "city", "country"]
+        },
+        dynamic: {
+          provider: :osm,
+          tile_layer: {
+            url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+            attribution: %(
+            &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors
+          )
+          }
+        }
       }
       config.geocoder = {
         timeout: 5,
@@ Expand Down @@

config/secrets.yml

-Original file line number
+Diff line change
@@ Expand Up / @@ -38,8 +38,6 @@ default: &default @@
           client_id: <%= ENV["OMNIAUTH_PUBLIK_CLIENT_ID"] %>
           client_secret: <%= ENV["OMNIAUTH_PUBLIK_CLIENT_SECRET"] %>
           site_url: <%= ENV["OMNIAUTH_PUBLIK_SITE_URL"] %>
-      geocoder:
-        here_api_key: <%= ENV["GEOCODER_API_KEY"] %>
       maps:
         api_key: <%= ENV["GEOCODER_API_KEY"] %>
       etherpad:
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix autocomplete in proposals #21

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Fix autocomplete in proposals #21

Are you sure you want to change the base?

Uh oh!

Fix autocomplete in proposals #21

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!