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

@@ -29,7 +29,7 @@
     width: 100%;
   }
 
-  > .photo {
+  >.photo {
     box-sizing: border-box;
     height: 500px;
     display: flex;
@@ -42,7 +42,7 @@
       height: auto;
     }
 
-    > img {
+    >img {
       height: 100%;
       max-width: 100%;
       object-fit: contain;
@@ -57,7 +57,7 @@
     width: 100%;
   }
 
-  > .navigation {
+  >.navigation {
     display: flex;
     flex-direction: row;
     gap: 10px;
@@ -66,8 +66,8 @@
       width: 100%;
     }
 
-    > #prev,
+    >#prev,
-    > #next {
+    >#next {
       width: calc(50% - 5px);
       aspect-ratio: 16/9;
       background: #333333;
@@ -80,6 +80,7 @@
         object-fit: cover;
         opacity: 70%;
       }
+
       .overlay {
         position: absolute;
         top: 50%;
@@ -89,7 +90,7 @@
         font-size: 40px;
       }
 
-      > div {
+      >div {
         display: flex;
         position: relative;
         width: 100%;
@@ -98,12 +99,12 @@
     }
   }
 
-  > .tags {
+  >.tags {
     @media (min-width: 1001px) {
       margin-right: 5px;
     }
 
-    > ul {
+    >ul {
       list-style-type: none;
       margin: 0;
       display: flex;
@@ -118,7 +119,7 @@
         margin-right: 5px;
       }
 
-      > li {
+      >li {
         box-sizing: border-box;
         display: flex;
         flex-direction: row;
@@ -135,7 +136,7 @@
           max-width: calc(50% - 5px);
         }
 
-        > a {
+        >a {
           box-sizing: border-box;
           display: flex;
           flex-direction: row;
@@ -155,7 +156,7 @@
               background-color: #aaa;
             }
 
-            > span {
+            >span {
               width: 100%;
               text-overflow: ellipsis;
               white-space: nowrap;
@@ -167,14 +168,14 @@
             margin-left: 10px;
           }
 
-          > img {
+          >img {
             width: 25px;
             max-height: 25px;
             object-fit: contain;
             border-radius: 50%;
           }
 
-          > .profile-pic {
+          >.profile-pic {
             background-position: center center;
             background-size: cover;
             background-repeat: no-repeat;
@@ -187,23 +188,24 @@
       }
     }
 
-    > form {
+    >form {
-      > p {
+      >p {
         box-sizing: border-box;
       }
 
-      > .results_on_deck > div {
+      >.results_on_deck>div {
         position: relative;
         display: flex;
         align-items: center;
         word-break: break-word;
 
-        > span {
+        >span {
           position: absolute;
           top: 0;
           right: 0;
         }
       }
+
       input {
         min-width: 100%;
         max-width: 100%;
@@ -226,17 +228,17 @@
     flex-direction: column;
   }
 
-  > .infos {
+  >.infos {
     display: flex;
     flex-direction: column;
     width: 50%;
 
-    > div > div {
+    >div>div {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
 
-      > *:first-child {
+      >*:first-child {
         min-width: 150px;
 
         @media (max-width: 1000px) {
@@ -246,18 +248,18 @@
     }
   }
 
-  > .tools {
+  >.tools {
     display: flex;
     flex-direction: column;
     width: 50%;
 
-    > div  {
+    >div {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
 
-      > div {
+      >div {
-        > a.button {
+        >a.button {
           box-sizing: border-box;
           background-color: #f2f2f2;
           display: flex;
@@ -274,7 +276,7 @@
           }
         }
 
-        > a.text.danger {
+        >a.text.danger {
           color: red;
 
           &:hover {

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 %}