Departments list usability

[gcharest]

There are more than a hundred departments listed in the list. We need a better way of displaying for the users to choose one.

[CalvinRodo]

Survey JS Allows Custom Widgets we can probably leverage something like select2 https://surveyjs.io/Examples/Library/?id=custom-widget-select2&platform=jQuery&theme=default

[gcharest]

Also related #81

[KingBain]

Was poking at this a bit, it might be easier to grab the csv file(client side) via jquery, then convert the csv into an array using jquery-csv, then feed the array contents into the choices section of the select2 json survey file.

from a client side though there are some issues 👍

• the open data portal doesnt support https:// and this will cause issues with browers
• cross site scripting issue
• server admins will hunt me down if I make the client download the csv file everytime that javascript loads :)

was doing something like below, in plunker

var csvData = $.ajax({
    type: "GET",
    url: "http://donnees-data.tpsgc-pwgsc.gc.ca/ba1/min-dept/min-dept.csv",
    dataType: "text/csv",
});

var dept = $.csv.toArrays(csvData);

Will investigate doing this server side, but node.js is new for me and my janky web coding skills

[CalvinRodo]

@KingBain I don't think server side is an option at the moment, we'd have to chat with the open canada folks to see if we can run a nodejs server somewhere.

At the moment this app is fully client side, we are leveraging the static site functionality of GitHub Pages.

Also instead of using JQuery to grab the data please look into either the Fetch API or a tool like Axios.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

You can see the fetch API in use here https://github.com/esdc-devx/itsg33-yaml-explorer/blob/master/src/fetchYaml.js

[nschonni]

I'm confused as to which department list is the "real" one. Currently there are 4 in the repo

• https://github.com/canada-ca/aia-eia-js/blob/master/src/depts_sorted.json
• https://github.com/canada-ca/aia-eia-js/blob/master/src/departments.json
• https://github.com/canada-ca/aia-eia-js/blob/master/depts_sorted.json
• https://github.com/canada-ca/aia-eia-js/blob/master/convertedDepartments.json
  Also not clear how they are referenced, but that might just be because I haven't used Vue before

[MrDeshaies]

To be clear, this ticket is about the widget used to select the department list. A filter based on keyboard input like select2 offers would be a great solution. This ticket is not about changing the data source used to populate the dropdown.

[MrDeshaies]

The branch 82-departments-list tried to implement the select2 widget, but it's not working. The documentation may be wrong, or we may be missing something...