UX improvements

* ignore English articles when sorting names
  * added a new sort_name field that gets automatically created
* automatically fill certain values in forms:
  * new game: name and sort name after typing
  * new edition: name and sort name when selecting game
  * new purchase: platform when selecting edition

games/static/js/add_edition.js

@@ -1,29 +1,18 @@
-/**
- * @description Sync select field with input field until user focuses it.
- * @param {HTMLSelectElement} sourceElementSelector
- * @param {HTMLInputElement} targetElementSelector
- */
-function syncSelectInputUntilChanged(
-  sourceElementSelector,
-  targetElementSelector
-) {
-  const sourceElement = document.querySelector(sourceElementSelector);
-  const targetElement = document.querySelector(targetElementSelector);
-  function sourceElementHandler(event) {
-    let selected = event.target.value;
-    let selectedValue = document.querySelector(
-      `#id_game option[value='${selected}']`
-    ).textContent;
-    targetElement.value = selectedValue;
-  }
-  function targetElementHandler(event) {
-    sourceElement.removeEventListener("change", sourceElementHandler);
-  }
+import { syncSelectInputUntilChanged } from './utils.js';
 
-  sourceElement.addEventListener("change", sourceElementHandler);
-  targetElement.addEventListener("focus", targetElementHandler);
-}
+let syncData = [
+  {
+    "source": "#id_game",
+    "source_value": "dataset.name",
+    "target": "#id_name",
+    "target_value": "value"
+  },
+  {
+    "source": "#id_game",
+    "source_value": "textContent",
+    "target": "#id_sort_name",
+    "target_value": "value"
+  },
+]
 
-window.addEventListener("load", () => {
-  syncSelectInputUntilChanged("#id_game", "#id_name");
-});
+syncSelectInputUntilChanged(syncData, "form");