Supprime l’ancien dialog polyfill (pages user & group) (#1026)

app/controllers/JavascriptController.scala

@@ -17,6 +17,7 @@ class JavascriptController() extends InjectedController {
           routes.javascript.GroupController.editGroup,
           routes.javascript.ApplicationController.all,
           routes.javascript.UserController.all,
+          routes.javascript.UserController.deleteUnusedUserById,
           routes.javascript.UserController.editUser
         )
       ).as(MimeTypes.JAVASCRIPT)

app/views/editUser.scala.html

@@ -8,7 +8,6 @@
 
 @main(currentUser, currentUserRights)(s"Utilisateur ${form("name").value.getOrElse("")}") {
     <link rel="stylesheet" media="screen,print" href='@routes.Assets.versioned("stylesheets/newForm.css")'>
-    <script src='@routes.Assets.versioned("javascripts/dialog.js")'></script>
 }{
 @defining(form.value.exists(user => Authorization.canEditOtherUser(uneditedUser)(currentUserRights))) { canEditUser =>
     @helper.form(action = routes.UserController.editUserPost(uneditedUser.id), "class" -> "mdl-grid mdl-cell mdl-cell--12-col") {
@@ -200,7 +199,7 @@
           }
 
           @if(unused && canEditUser) {
-            <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onclick="showDialog(document.querySelector('#dialog-delete-user'))">Supprimer cet utilisateur inutilisé</button>
+            <button id="delete-user-button" class="mdl-button mdl-js-button mdl-button--raised" type="button">Supprimer cet utilisateur inutilisé</button>
             <br>
           }
 
@@ -221,39 +220,18 @@
         </p>
     </div>
     }
-    <script type='text/javascript'>
-        function showHide(sender) {
-            var thead = sender.parentNode.parentNode.parentNode.parentNode;
-            var tbody = thead.nextElementSibling;
-            if(sender.checked) {
-                tbody.classList.remove("invisible");
-            } else {
-                tbody.classList.add("invisible");
-            }
-        }
-    </script>
 
     <dialog class="mdl-dialog" id="dialog-delete-user">
         <h4 class="mdl-dialog__title">Suppression d'un utilisateur inutilisé.</h4>
         <div class="mdl-dialog__content">
             <b>Êtes-vous certain de vouloir supprimer le compte de cet utilisateur?</b>
         </div>
         <div class="mdl-dialog__actions">
-            <button type="button" class="mdl-button mdl-button--raised mdl-button--colored" onclick="confirmDeletion()">Confirmer</button>
-            <button type="button" class="mdl-button mdl-button--raised" onclick="closeDialog(document.querySelector('#dialog-delete-user'))">Annuler</button>
+            <button id="delete-user-modal-confirm-button" type="button" class="mdl-button mdl-button--raised mdl-button--colored" data-user-id="@uneditedUser.id">Confirmer</button>
+            <button id="delete-user-modal-quit-button" type="button" class="mdl-button mdl-button--raised">Annuler</button>
         </div>
     </dialog>
 
-    <script type="text/javascript">
-        var dialog = document.querySelector('#dialog-delete-user');
-        if (!dialog.showModal) {
-            dialogPolyfill.registerDialog(dialog);
-        }
-
-        function confirmDeletion() {
-            document.location = '@routes.UserController.deleteUnusedUserById(uneditedUser.id)';
-        }
-    </script>
     }
 }
 }{

app/views/helpers/head.scala

@@ -42,8 +42,7 @@ object head {
       webJarScript("material.min.js"),
       publicScript("javascripts/polyfills.js"),
       publicScript("javascripts/main.js"),
-      webJarCss("dialog-polyfill.css"),
-      webJarScript("dialog-polyfill.js"),
+      publicCss("generated-js/index.css"),
       script(`type` := "text/javascript", src := JavascriptController.javascriptRoutes.url)
     )
 

app/views/home/page.scala.html

@@ -19,6 +19,7 @@
         <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/main.css")'>
         <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/home.css")'>
         <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/mdl-extensions.css")'>
+        <link rel="stylesheet" media="screen,print" href='@routes.Assets.versioned("generated-js/index.css")'>
         <script type="text/javascript">
                 var _paq = _paq || [];
                 _paq.push(["setDomains", ["*.aplus.beta.gouv.fr"]]);

app/views/main.scala.html

@@ -24,8 +24,7 @@
         @webJarsUtil.locate("material.min.js").script()
         <script type="application/javascript" src="@routes.Assets.versioned("javascripts/polyfills.js")"></script>
         <script type="application/javascript" src="@routes.Assets.versioned("javascripts/main.js")"></script>
-        @webJarsUtil.locate("dialog-polyfill.css").css()
-        @webJarsUtil.locate("dialog-polyfill.js").script()
+        <link rel="stylesheet" media="screen,print" href='@routes.Assets.versioned("generated-js/index.css")'>
         <script type="text/javascript" src="@routes.JavascriptController.javascriptRoutes"></script>
     </head>
     <body>

build.sbt

@@ -104,7 +104,6 @@ libraryDependencies ++= Seq(
   "org.webjars" % "material-design-icons" % "4.0.0",
   "org.webjars.npm" % "roboto-fontface" % "0.10.0",
   "org.webjars.npm" % "slim-select" % "1.24.0",
-  "org.webjars.npm" % "dialog-polyfill" % "0.4.10",
   "org.webjars.npm" % "twemoji" % "2.5.1",
   "org.webjars" % "chartjs" % "2.9.4",
   "org.webjars" % "font-awesome" % "5.15.2",

package.json

@@ -14,6 +14,8 @@
   },
   "devDependencies": {
     "@types/tabulator-tables": "4.8.0",
+    "css-loader": "5.2.4",
+    "mini-css-extract-plugin": "1.6.0",
     "rimraf": "3.0.2",
     "ts-loader": "9.1.1",
     "typescript": "4.2.4",

public/javascripts/main-page-bottom.js

@@ -2,19 +2,6 @@
 // TODO: The idea is to put everything in main.js in this file, then rename this file as main.js
 
 
-// Note: `Array.from` does not work in HTMLUnit on NodeList
-// so we resort to using this function
-function querySelectorAllForEach(selector, exec) {
-  var nodes = document.querySelectorAll(selector);
-  if (nodes) {
-    for (var i = 0; i < nodes.length; i++) {
-      exec(nodes[i]);
-    }
-  }
-}
-
-
-
 //
 // Header ribbon (demo)
 //
@@ -122,56 +109,6 @@ setupApplicationForm();
 
 
 
-//
-// Dialog
-//
-
-var dialogDeleteGroupId = "dialog-delete-group";
-var dialogDeleteGroupButtonShowId = "dialog-delete-group-show";
-var dialogDeleteGroupButtonCancelId = "dialog-delete-group-cancel";
-var dialogDeleteGroupButtonConfirmId = "dialog-delete-group-confirm";
-function setupDialog() {
-  var dialog = document.getElementById(dialogDeleteGroupId);
-
-  if (dialog) {
-    if (!dialog.showModal) {
-      dialogPolyfill.registerDialog(dialog);
-    }
-
-    querySelectorAllForEach(
-        "#" + dialogDeleteGroupButtonCancelId,
-        function (element) {
-          element.addEventListener('click', function(event) {
-            dialog.close();
-          });
-        }
-    );
-
-    querySelectorAllForEach(
-        "#" + dialogDeleteGroupButtonShowId,
-        function (element) {
-          element.addEventListener('click', function(event) {
-            dialog.showModal();
-          });
-        }
-    );
-
-    querySelectorAllForEach(
-        "#" + dialogDeleteGroupButtonConfirmId,
-        function (element) {
-          element.addEventListener('click', function(event) {
-            var uuid = element.dataset.uuid;
-            var url = jsRoutes.controllers.GroupController.deleteUnusedGroupById(uuid).url;
-            window.location = url;
-          });
-        }
-    );
-  }
-}
-
-
-setupDialog();
-
 //
 // Transform <select> with SlimSelect
 //

typescript/src/dialog.ts

@@ -0,0 +1,26 @@
+import dialogPolyfill from "dialog-polyfill";
+import "dialog-polyfill/dist/dialog-polyfill.css";
+
+
+
+export function addDialogButtonsClickListeners(
+  dialogId: string,
+  showModalButtonId: string,
+  closeModalButtonId: string,
+) {
+  const showButton = <HTMLButtonElement | null>document.getElementById(showModalButtonId);
+  const dialog = <HTMLDialogElement | null>document.getElementById(dialogId);
+  const closeButton = <HTMLButtonElement | null>document.getElementById(closeModalButtonId);
+
+  if (showButton != null && dialog != null && closeButton != null) {
+
+    if (!dialog.showModal) {
+      dialogPolyfill.registerDialog(dialog);
+    }
+
+    showButton.addEventListener("click", () => dialog.showModal());
+    closeButton.addEventListener("click", () => dialog.close());
+
+  }
+
+}

typescript/src/editGroup.ts

@@ -0,0 +1,35 @@
+import { addDialogButtonsClickListeners } from "./dialog";
+
+const dialogDeleteGroupId = "dialog-delete-group";
+const dialogDeleteGroupButtonShowId = "dialog-delete-group-show";
+const dialogDeleteGroupButtonCancelId = "dialog-delete-group-cancel";
+const dialogDeleteGroupButtonConfirmId = "dialog-delete-group-confirm";
+
+
+
+setupDeleteGroupModal();
+
+
+
+function setupDeleteGroupModal() {
+
+  addDialogButtonsClickListeners(
+    dialogDeleteGroupId,
+    dialogDeleteGroupButtonShowId,
+    dialogDeleteGroupButtonCancelId
+  );
+
+  const confirmButton =
+    <HTMLButtonElement | null>document.getElementById(dialogDeleteGroupButtonConfirmId);
+
+  if (confirmButton != null) {
+    confirmButton.addEventListener('click', () => {
+      const groupId = confirmButton.dataset["uuid"];
+      if (groupId != null) {
+        const url = jsRoutes.controllers.GroupController.deleteUnusedGroupById(groupId).url;
+        window.location = url;
+      }
+    });
+  }
+
+}

typescript/src/editMyGroups.ts

@@ -1,4 +1,5 @@
 import dialogPolyfill from "dialog-polyfill";
+import "dialog-polyfill/dist/dialog-polyfill.css";
 
 const removeUserFromGroupButtonClass = "remove-user-from-group-button";
 const removeUserFromGroupDialogId = (groupId: string, userId: string) =>

typescript/src/editUser.ts

@@ -0,0 +1,35 @@
+import { addDialogButtonsClickListeners } from "./dialog";
+
+const deleteUserButtonId = "delete-user-button";
+const deleteUserModalId = "dialog-delete-user";
+const deleteUserModalConfirmButtonId = "delete-user-modal-confirm-button";
+const deleteUserModalQuitButtonId = "delete-user-modal-quit-button";
+
+
+
+setupDeleteUserModal();
+
+
+
+function setupDeleteUserModal() {
+
+  addDialogButtonsClickListeners(
+    deleteUserModalId,
+    deleteUserButtonId,
+    deleteUserModalQuitButtonId
+  );
+
+  const confirmButton =
+    <HTMLButtonElement | null>document.getElementById(deleteUserModalConfirmButtonId);
+
+  if (confirmButton != null) {
+    confirmButton.addEventListener("click", () => {
+      const userId = confirmButton.dataset["userId"];
+      if (userId != null) {
+        const url = jsRoutes.controllers.UserController.deleteUnusedUserById(userId).url;
+        window.location = url;
+      }
+    });
+  }
+
+}

typescript/src/index.ts

@@ -4,16 +4,16 @@ import 'ts-polyfill/lib/es2015-core';
 import 'ts-polyfill/lib/es2016-array-include';
 // This adds NodeList.forEach, etc.
 import 'core-js/web/dom-collections';
-// This adds dialog polyfill
-import dialogPolyfill from "dialog-polyfill";
 
 // Our scripts
 import "./application"
-import "./admin.ts"
-import "./mdl-extensions.ts"
+import "./admin"
+import "./mdl-extensions"
 import "./validateAccount"
 import "./application-attachment"
 import "./anchorme"
 import "./showApplication"
 import "./signup"
 import "./editMyGroups"
+import "./editUser"
+import "./editGroup"

typescript/src/showApplication.ts

@@ -1,3 +1,6 @@
+import dialogPolyfill from "dialog-polyfill";
+import "dialog-polyfill/dist/dialog-polyfill.css";
+
 const reviewValidationButton = <HTMLButtonElement | null>document.getElementById('review-validation');
 const customAnswerInput = <HTMLInputElement | null>document.getElementById('custom-answer');
 const dialog = <HTMLDialogElement | null>document.querySelector('#dialog-terminate');
@@ -13,35 +16,35 @@ const closeDialogTerminateButton = document.getElementById('close-dialog-termina
 const closeDialogQuitButton = document.getElementById('close-dialog-quit');
 
 const enableButtonAndDisableCustomAnswer = () => {
-    reviewValidationButton.disabled = false;
-    customAnswerInput.value = "";
-    customAnswerInput.disabled = true;
-    customAnswerInput.style.background = 'lightgrey';
+  reviewValidationButton.disabled = false;
+  customAnswerInput.value = "";
+  customAnswerInput.disabled = true;
+  customAnswerInput.style.background = 'lightgrey';
 }
 
 const disableButtonAndEnableCustomAnswer = () => {
-    reviewValidationButton.disabled = true;
-    customAnswerInput.disabled = false;
-    customAnswerInput.style.background = 'white';
+  reviewValidationButton.disabled = true;
+  customAnswerInput.disabled = false;
+  customAnswerInput.style.background = 'white';
 }
 
 const enableYes = () => {
-    const button = <HTMLButtonElement | null>document.getElementById("close-dialog-terminate");
-    button.disabled = false;
+  const button = <HTMLButtonElement | null>document.getElementById("close-dialog-terminate");
+  button.disabled = false;
 }
 
 const closeDialog = () => dialog.close();
 
 const showDialog = () => {
-    Array.from(document.querySelectorAll("#dialog-terminate input")).forEach((input: HTMLInputElement) => input.checked = false)
-    dialog.showModal();
+  Array.from(document.querySelectorAll("#dialog-terminate input")).forEach((input: HTMLInputElement) => input.checked = false)
+  dialog.showModal();
 }
 
 const confirmTerminate = () => {
-    const targetUrl = closeDialogTerminateButton?.dataset.targetUrl;
-    const checked = <HTMLInputElement | null>document.querySelector('input[name="usefulness"]:checked');
-    const usefulness = checked.value;
-    document.location.href = targetUrl + '?usefulness=' + usefulness;
+  const targetUrl = closeDialogTerminateButton?.dataset.targetUrl;
+  const checked = <HTMLInputElement | null>document.querySelector('input[name="usefulness"]:checked');
+  const usefulness = checked.value;
+  document.location.href = targetUrl + '?usefulness=' + usefulness;
 }
 
 const reopen = () => document.location.href = reopenButton?.dataset.targetUrl;
@@ -64,5 +67,5 @@ enableFeedbackOnChangeForComponentId('yes');
 enableFeedbackOnChangeForComponentId('neutral');
 
 if (dialog && !dialog.showModal) {
-    dialogPolyfill.registerDialog(dialog);
+  dialogPolyfill.registerDialog(dialog);
 }