Add missing features

* Fix display
* Add internationalization
* Avoid querying under a certain amount of characters
* Update docs for translations with typescript
* Add interpolate to typescript globals

core/static/webpack/ajax-select-index.ts

@@ -1,6 +1,6 @@
 import "tom-select/dist/css/tom-select.css";
 import TomSelect from "tom-select";
-import type { TomItem, TomLoadCallback } from "tom-select/dist/types/types";
+import type { TomItem, TomLoadCallback, TomOption } from "tom-select/dist/types/types";
 import type { escape_html } from "tom-select/dist/types/utils";
 import { type UserProfileSchema, userSearchUsers } from "#openapi";
 
@@ -17,6 +17,7 @@ export class AjaxSelect extends HTMLSelectElement {
   }
 
   loadTomSelect() {
+    const minCharNumberForsearch = 2;
     let maxItems = 1;
 
     if (this.multiple) {
@@ -25,12 +26,17 @@ export class AjaxSelect extends HTMLSelectElement {
 
     this.widget = new TomSelect(this, {
       hideSelected: true,
+      diacritics: true,
+      duplicates: false,
       maxItems: maxItems,
       loadThrottle: Number.parseInt(this.dataset.delay) ?? null,
       valueField: "id",
       labelField: "display_name",
       searchField: ["display_name", "nick_name", "first_name", "last_name"],
       placeholder: this.dataset.placeholder ?? "",
+      shouldLoad: (query: string) => {
+        return query.length >= minCharNumberForsearch; // Avoid launching search with less than 2 characters
+      },
       load: (query: string, callback: TomLoadCallback) => {
         userSearchUsers({
           query: {
@@ -62,6 +68,14 @@ export class AjaxSelect extends HTMLSelectElement {
         item: (item: UserProfileSchema, sanitize: typeof escape_html) => {
           return `<span><i class="fa fa-times"></i>${sanitize(item.display_name)}</span>`;
         },
+        // biome-ignore lint/style/useNamingConvention: that's how it's defined
+        not_loading: (data: TomOption, _sanitize: typeof escape_html) => {
+          return `<div class="no-results">${interpolate(gettext("You need to type %(number)s more characters"), { number: minCharNumberForsearch - data.input.length }, true)}</div>`;
+        },
+        // biome-ignore lint/style/useNamingConvention: that's how it's defined
+        no_results: (_data: TomOption, _sanitize: typeof escape_html) => {
+          return `<div class="no-results">${gettext("No results found")}</div>`;
+        },
       },
     });
 

core/static/webpack/utils/globals.ts

@@ -3,6 +3,7 @@ import type { Alpine as AlpineType } from "alpinejs";
 declare global {
   const Alpine: AlpineType;
   const gettext: (text: string) => string;
+  const interpolate: <T>(fmt: string, args: string[] | T, isNamed?: boolean) => string;
 }
 
 /**

docs/howto/translation.md

@@ -24,6 +24,12 @@ Si le mot apparaît dans le template Jinja :
 {% trans %}Hello{% endtrans %}
 ```
 
+Si on est dans un fichier javascript ou typescript :
+
+```js
+gettext("Hello");
+```
+
 ## Générer le fichier django.po
 
 La traduction se fait en trois étapes. 
@@ -32,7 +38,7 @@ l'éditer et enfin le compiler au format binaire pour qu'il soit lu par le serve
 
 ```bash
 ./manage.py makemessages --locale=fr -e py,jinja --ignore=node_modules # Pour le backend
-./manage.py makemessages --locale=fr -d djangojs --ignore=node_modules # Pour le frontend
+./manage.py makemessages --locale=fr -d djangojs -e js,ts --ignore=node_modules # Pour le frontend
 ```
 
 ## Éditer le fichier django.po

locale/fr/LC_MESSAGES/djangojs.po

@@ -7,7 +7,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-10-09 11:50+0200\n"
+"POT-Creation-Date: 2024-10-16 02:19+0200\n"
 "PO-Revision-Date: 2024-09-17 11:54+0200\n"
 "Last-Translator: Sli <antoine@bartuccio.fr>\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -22,87 +22,95 @@ msgstr ""
 msgid "captured.%s"
 msgstr "capture.%s"
 
-#: core/static/webpack/easymde-index.js:32
+#: core/static/webpack/ajax-select-index.ts:73
+msgid "You need to type %(number)s more characters"
+msgstr "Vous devez taper %(number)s caractères de plus"
+
+#: core/static/webpack/ajax-select-index.ts:76
+msgid "No results found"
+msgstr "Aucun résultat trouvé"
+
+#: core/static/webpack/easymde-index.ts:31
 msgid "Heading"
 msgstr "Titre"
 
-#: core/static/webpack/easymde-index.js:38
+#: core/static/webpack/easymde-index.ts:37
 msgid "Italic"
 msgstr "Italique"
 
-#: core/static/webpack/easymde-index.js:44
+#: core/static/webpack/easymde-index.ts:43
 msgid "Bold"
 msgstr "Gras"
 
-#: core/static/webpack/easymde-index.js:50
+#: core/static/webpack/easymde-index.ts:49
 msgid "Strikethrough"
 msgstr "Barré"
 
-#: core/static/webpack/easymde-index.js:59
+#: core/static/webpack/easymde-index.ts:58
 msgid "Underline"
 msgstr "Souligné"
 
-#: core/static/webpack/easymde-index.js:68
+#: core/static/webpack/easymde-index.ts:67
 msgid "Superscript"
 msgstr "Exposant"
 
-#: core/static/webpack/easymde-index.js:77
+#: core/static/webpack/easymde-index.ts:76
 msgid "Subscript"
 msgstr "Indice"
 
-#: core/static/webpack/easymde-index.js:83
+#: core/static/webpack/easymde-index.ts:82
 msgid "Code"
 msgstr "Code"
 
-#: core/static/webpack/easymde-index.js:90
+#: core/static/webpack/easymde-index.ts:89
 msgid "Quote"
 msgstr "Citation"
 
-#: core/static/webpack/easymde-index.js:96
+#: core/static/webpack/easymde-index.ts:95
 msgid "Unordered list"
 msgstr "Liste non ordonnée"
 
-#: core/static/webpack/easymde-index.js:102
+#: core/static/webpack/easymde-index.ts:101
 msgid "Ordered list"
 msgstr "Liste ordonnée"
 
-#: core/static/webpack/easymde-index.js:109
+#: core/static/webpack/easymde-index.ts:108
 msgid "Insert link"
 msgstr "Insérer lien"
 
-#: core/static/webpack/easymde-index.js:115
+#: core/static/webpack/easymde-index.ts:114
 msgid "Insert image"
 msgstr "Insérer image"
 
-#: core/static/webpack/easymde-index.js:121
+#: core/static/webpack/easymde-index.ts:120
 msgid "Insert table"
 msgstr "Insérer tableau"
 
-#: core/static/webpack/easymde-index.js:128
+#: core/static/webpack/easymde-index.ts:127
 msgid "Clean block"
 msgstr "Nettoyer bloc"
 
-#: core/static/webpack/easymde-index.js:135
+#: core/static/webpack/easymde-index.ts:134
 msgid "Toggle preview"
 msgstr "Activer la prévisualisation"
 
-#: core/static/webpack/easymde-index.js:141
+#: core/static/webpack/easymde-index.ts:140
 msgid "Toggle side by side"
 msgstr "Activer la vue côte à côte"
 
-#: core/static/webpack/easymde-index.js:147
+#: core/static/webpack/easymde-index.ts:146
 msgid "Toggle fullscreen"
 msgstr "Activer le plein écran"
 
-#: core/static/webpack/easymde-index.js:154
+#: core/static/webpack/easymde-index.ts:153
 msgid "Markdown guide"
 msgstr "Guide markdown"
 
-#: core/static/webpack/user/family-graph-index.js:222
+#: core/static/webpack/user/family-graph-index.js:233
 msgid "family_tree.%(extension)s"
 msgstr "arbre_genealogique.%(extension)s"
 
-#: core/static/webpack/user/pictures-index.js:67
+#: core/static/webpack/user/pictures-index.js:76
 msgid "pictures.%(extension)s"
 msgstr "photos.%(extension)s"
 
@@ -110,10 +118,10 @@ msgstr "photos.%(extension)s"
 msgid "Incorrect value"
 msgstr "Valeur incorrecte"
 
-#: sas/static/sas/js/viewer.js:205
+#: sas/static/webpack/sas/viewer-index.ts:271
 msgid "Couldn't moderate picture"
 msgstr "Il n'a pas été possible de modérer l'image"
 
-#: sas/static/sas/js/viewer.js:217
+#: sas/static/webpack/sas/viewer-index.ts:284
 msgid "Couldn't delete picture"
 msgstr "Il n'a pas été possible de supprimer l'image"

sas/static/sas/css/picture.scss

@@ -80,6 +80,7 @@
         object-fit: cover;
         opacity: 70%;
       }
+
       .overlay {
         position: absolute;
         top: 50%;
@@ -204,6 +205,7 @@
           right: 0;
         }
       }
+
       input {
         min-width: 100%;
         max-width: 100%;

sas/templates/sas/picture.jinja

@@ -3,11 +3,10 @@
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('webpack/ajax-select-index.css') }}">
   <link rel="stylesheet" href="{{ static('sas/css/picture.scss') }}">
-  <link rel="stylesheet" href="{{ static('user/user_stats.scss') }}">
 {%- endblock -%}
 
 {%- block additional_js -%}
-  <script src="{{ static('webpack/ajax-select-index.ts') }}"></script>
+  <script defer src="{{ static('webpack/ajax-select-index.ts') }}"></script>
   <script defer src="{{ static("webpack/sas/viewer-index.ts") }}"></script>
 {%- endblock -%}
 
@@ -158,7 +157,13 @@
           <h5>{% trans %}People{% endtrans %}</h5>
           {% if user.was_subscribed %}
             <form @submit.prevent="submitIdentification" x-show="!!selector">
-              <select x-ref="search" is="ajax-select" multiple data-delay="300" data-placeholder="{%- trans -%}Identify users on pictures{%- endtrans -%}"></select>
+              <select
+                x-ref="search"
+                is="ajax-select"
+                multiple
+                data-delay="300"
+                data-placeholder="{%- trans -%}Identify users on pictures{%- endtrans -%}"
+              ></select>
               <input type="submit" value="{% trans %}Go{% endtrans %}"/>
             </form>
           {% endif %}