T3103 adapted the translation platform to odoo 18

package.json

@@ -14,7 +14,7 @@
     "postcss": "^8.4.14",
     "tailwindcss": "^3.0.24",
     "typescript": "^4.5.4",
-    "vite": "^2.9.18"
+    "vite": "^7.3.1"
   },
   "dependencies": {
     "@editorjs/editorjs": "^2.24.3",
@@ -29,10 +29,11 @@
     "buffer": "^6.0.3",
     "country-flag-icons": "^1.5.5",
     "events": "^3.3.0",
-    "fast-xml-parser": "^4.4.1",
+    "fast-xml-parser": "^5.3.4",
     "notyf": "^3.10.0",
     "shepherd.js": "^10.0.0",
     "stream-browserify": "^3.0.0",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "util": "^0.12.5"
   }
-}
+}

src/components/Table/DAOTable.xml

@@ -63,7 +63,7 @@
       <p t-on-click="() => this.clearFilters()" t-if="filters.search.length > 0 || filters.sortBy !== undefined" class="text-sm text-red-700 hover:text-red-900 cursor-pointer ml-2">Clear filters</p>
     </div>
     <div>
-      <PageSelector page="filters.pageNumber" total="state.total" pageSize="filters.pageSize" onPageChange="(page) => this.changePage(page)" />
+      <PageSelector page="filters.pageNumber" total="state.total || 0" pageSize="filters.pageSize" onPageChange="(page) => this.changePage(page)" />
     </div>
   </div>
   <Transition active="state.loading" t-slot-scope="scope">

src/components/TranslatorModal.ts

@@ -1,22 +1,22 @@
-import { Component, onWillUpdateProps, useState, xml } from "@odoo/owl";
+import {Component, onWillUpdateProps, useState, xml} from "@odoo/owl";
 import notyf from "../notifications";
 
-import { models, Translator } from "../models";
+import {models, Translator} from "../models";
 import TranslationSkills from "./TranslationSkills";
 import Modal from "./Modal";
 import Loader from './Loader';
 import _ from "../i18n";
 
 type State = {
-  loading: boolean;
-  active: boolean;
-  translator?: Translator;
-  title?: string;
+    loading: boolean;
+    active: boolean;
+    translator?: Translator;
+    title?: string;
 }
 
 class TranslatorModal extends Component {
 
-  static template = xml`
+    static template = xml`
     <Modal title="state.title" active="state.active" onClose="() => this.onClose()" loading="state.loading">
       <div t-if="state.translator" class="w-156 grid grid-cols-2">
         <div class="bg-slate-100 border-r border-solid border-slate-200 p-4">
@@ -55,69 +55,73 @@ class TranslatorModal extends Component {
         </div>
         <div class="p-4 flex flex-col items-center">
           <h3 class="font-semibold text-sm text-slate-700 mb-2">Translation Skills</h3>
-          <TranslationSkills skills="state.translator.skills" translatorId="state.translator.translatorId" />
+<TranslationSkills 
+    skills="state.translator.skills" 
+    translatorId="state.translator.translatorId" 
+    onChange="() => this.fetchTranslator(props.translatorId)" 
+/>
         </div>
       </div>
     </Modal>
   `;
 
-  static props = {
-    translatorId: { type: Number, optional: true },
-    onClose: { type: Function, optional: true },
-  };
+    static props = {
+        translatorId: {type: Number, optional: true},
+        onClose: {type: Function, optional: true},
+    };
 
-  static components = {
-    Modal,
-    Loader,
-    TranslationSkills,
-  };
+    static components = {
+        Modal,
+        Loader,
+        TranslationSkills,
+    };
 
-  _ = _;
+    _ = _;
 
-  state = useState<State>({
-    loading: false,
-    active: false,
-    translator: undefined,
-    title: undefined,
-  });
-
-  setup(): void {
-    this.fetchTranslator(this.props.translatorId);
-    onWillUpdateProps((nextProps) => {
-      this.fetchTranslator(nextProps.translatorId);
+    state = useState<State>({
+        loading: false,
+        active: false,
+        translator: undefined,
+        title: undefined,
     });
-  }
 
-  onClose() {
-    this.props.onClose();
-    setTimeout(() => {
-      this.state.translator = undefined;
-      this.state.title = undefined;
-    }, 300);
-  }
+    setup(): void {
+        this.fetchTranslator(this.props.translatorId);
+        onWillUpdateProps((nextProps) => {
+            this.fetchTranslator(nextProps.translatorId);
+        });
+    }
+
+    onClose() {
+        this.props.onClose();
+        setTimeout(() => {
+            this.state.translator = undefined;
+            this.state.title = undefined;
+        }, 300);
+    }
 
-  fetchTranslator(translatorId: number) {
-    if (translatorId) {
-      this.state.loading = true;
-      this.state.active = true;
-      models.translators.find(translatorId).then((user) => {
-        if (!user) {
-          notyf.error(_('User not found'));
-          this.state.active = false;
-          this.state.loading = false;
-          this.props.onClose();
+    fetchTranslator(translatorId: number) {
+        if (translatorId) {
+            this.state.loading = true;
+            this.state.active = true;
+            models.translators.find(translatorId).then((user) => {
+                if (!user) {
+                    notyf.error(_('User not found'));
+                    this.state.active = false;
+                    this.state.loading = false;
+                    this.props.onClose();
+                } else {
+                    this.state.loading = false;
+                    this.state.translator = user;
+                    this.state.title = user.name;
+                }
+            });
         } else {
-          this.state.loading = false;
-          this.state.translator = user;
-          this.state.title = user.name;
+            // Keep internal state while modal is closing
+            this.state.active = false;
+            this.state.loading = false;
         }
-      });
-    } else {
-      // Keep internal state while modal is closing
-      this.state.active = false;
-      this.state.loading = false;
     }
-  }
 }
 
 export default TranslatorModal;