ui: add langs autocomplete in domain_edit (#454)

packages/ui-default/pages/domain_edit.page.ts

@@ -0,0 +1,25 @@
+import CustomSelectAutoComplete from 'vj/components/autocomplete/CustomSelectAutoComplete';
+import { NamedPage } from 'vj/misc/Page';
+import i18n from 'vj/utils/i18n';
+
+const page = new NamedPage('domain_edit', () => {
+  const prefixes = new Set(Object.keys(window.LANGS).filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
+  const langs = [
+    { key: '_', name: i18n('objective') },
+    ...Object.keys(window.LANGS).filter((i) => !prefixes.has(i)).map((i) => (
+      { name: `${i.includes('.') ? `${window.LANGS[i.split('.')[0]].display}/` : ''}${window.LANGS[i].display}`, _id: i }
+    )),
+  ];
+
+  const $langSelect = $('[name=langs]');
+  $langSelect.val(($langSelect.val() as string).split(',').filter((i) => !prefixes.has(i)));
+
+  const select: CustomSelectAutoComplete<true> = CustomSelectAutoComplete.getOrConstruct($('[name=langs]'), { multi: true, data: langs });
+  select.onChange((val) => {
+    const value = val.split(',');
+    value.push(...Array.from(new Set(value.filter((i) => i.includes('.')).map((i) => i.split('.')[0]))));
+    $langSelect.val(value.join(','));
+  });
+});
+
+export default page;