fix(search): populate Search field with user provided value

[thom4parisot]

This pull request populates the query field when the Vue component is initialised.

The Good

It works.

The Bad

I have not found any particular documentation for $options.el so it might break when upgrading Vue.js.

There are probably better ways to do:

• passing a value="..." property to the search field as a prop (could not figure out how to pass the paramter to the search macro)
• maybe a more official way to bind to the original input#search field

The Ugly

The Vue component relies on the DOM of the original so it can break just by changing the HTML template.

What's next?

Once this issue is fixed, I would like to remove the code duplication between the HTML view and the Vue component. Either by extending the form and providing only the autocomplete feature.

fix #1016

[abulte]

We need to try something more "official" like you say before merging, I'll have a look at it tomorrow!

[thom4parisot]

@abulte yeah, exactly. I kind of wanted to start the conversation with the most obvious and minimal change prior to jump in rewriting the component ;-)

I'll be away in user interviews with @thimy tomorrow — but should be online between 2pm and 3:30pm 🙂

[abulte]

@oncletom 👍

[abulte]

@oncletom do you have a reliable way of testing this? Because I'm having trouble :-/ You may try the code below. I'm hoping the null won't erase the existing DOM value (as opposed to empty string), but I'm not sure.

    created() {
      if (this.$location.query.q) {
        this.query = decodeURIComponent(this.$location.query.q.replace('+', ' '));
      }
    },
    data() {
        // const query = this.$location.query.q || '';
        return {
            current: -1,
            query: null,
            show: false,
            cache: new Cache('site-search', sessionStorage),
            groups: [
                group('datasets', this._('Datasets')),
                group('reuses', this._('Reuses')),
                group('organizations', this._('Organizations'), 'organization'),
                group('territory', this._('Territories'), 'territory'),
            ],
            minLength: 2,
            placeholders: placeholders,
        }
    },

[thom4parisot]

@abulte I will give a go at it tomorrow (will be in the office) 👋 if you are around — I agree it would be nicer to compute the field value only once (#created()) instead of at anytime (#data()), and prior to the user first interaction with the component.

[thom4parisot]

This does the trick. We either pick:

1. the value at runtime of the search field (altered by user or provided by a input[value] attribute;
2. otherwise we pick it up from the query string;
3. otherwise field value has not been setup

[thom4parisot]

@abulte I have made the change 😃

[abulte]

Missing CHANGELOG but OK.

[thom4parisot]

Changelog updated 👍