From 5cf797a0d2cdb93c48c76aab090d57b1564d82f9 Mon Sep 17 00:00:00 2001
From: Benjamin Seber <benjamin.seber@focus-shift.de>
Date: Sat, 26 Nov 2022 22:06:24 +0100
Subject: [PATCH] add size select

---
 src/main/javascript/bundles/user-common.ts    |   1 +
 .../javascript/components/form/autosubmit.js  | 154 ++++++++++++++++++
 src/main/javascript/components/form/index.js  |   1 +
 src/main/resources/messages.properties        |   1 +
 src/main/resources/messages_en.properties     |   1 +
 .../resources/templates/fragments/select.html |  39 +++++
 .../templates/usermanagement/users.html       |  86 +++++++++-
 7 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 src/main/javascript/components/form/autosubmit.js
 create mode 100644 src/main/javascript/components/form/index.js
 create mode 100644 src/main/resources/templates/fragments/select.html

diff --git a/src/main/javascript/bundles/user-common.ts b/src/main/javascript/bundles/user-common.ts
index 7320c6f5d..41349a256 100644
--- a/src/main/javascript/bundles/user-common.ts
+++ b/src/main/javascript/bundles/user-common.ts
@@ -1,5 +1,6 @@
 import "../components/avatar";
 import "../components/feedback-form";
+import "../components/form";
 import "../components/navigation";
 import "../components/time-clock";
 import { initFeedbackHeartView } from "../components/feedback-heart";
diff --git a/src/main/javascript/components/form/autosubmit.js b/src/main/javascript/components/form/autosubmit.js
new file mode 100644
index 000000000..9bea59e4f
--- /dev/null
+++ b/src/main/javascript/components/form/autosubmit.js
@@ -0,0 +1,154 @@
+let keyupSubmit;
+
+document.addEventListener("keyup", function (event) {
+  if (
+    event.defaultPrevented ||
+    event.metaKey ||
+    whitespaceKeys.has(event.key) ||
+    modifierKeys.has(event.key) ||
+    navigationKeys.has(event.key) ||
+    uiKeys.has(event.key) ||
+    deviceKeys.has(event.key) ||
+    functionKeys.has(event.key) ||
+    mediaKeys.has(event.key) ||
+    audioControlKeys.has(event.key)
+  ) {
+    return;
+  }
+
+  const { autoSubmit = "", autoSubmitDelay = 0 } = event.target.dataset;
+  if (autoSubmit) {
+    const button = document.querySelector("#" + autoSubmit);
+    if (button) {
+      const submit = () => button.click();
+      if (autoSubmitDelay) {
+        clearTimeout(keyupSubmit);
+        keyupSubmit = setTimeout(submit, Number(autoSubmitDelay));
+      } else {
+        submit();
+      }
+    }
+  }
+});
+
+document.addEventListener("change", function (event) {
+  if (event.defaultPrevented) {
+    return;
+  }
+
+  const { autoSubmit = "" } = event.target.dataset;
+  if (autoSubmit) {
+    const button = document.querySelector("#" + autoSubmit);
+    if (button) {
+      button.closest("form").requestSubmit(button);
+    }
+  }
+});
+
+const whitespaceKeys = new Set(["Enter", "Tab", "Alt"]);
+
+const modifierKeys = new Set([
+  "AltGraph",
+  "CapsLock",
+  "Control",
+  "Fn",
+  "FnLock",
+  "Hyper",
+  "Meta",
+  "NumLock",
+  "ScrollLock",
+  "Shift",
+  "Super",
+  "Symbol",
+  "SymbolLock",
+]);
+
+const navigationKeys = new Set([
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "End",
+  "Home",
+  "PageDown",
+  "PageUp",
+  "End",
+]);
+
+const uiKeys = new Set([
+  "Accept",
+  "ContextMenu",
+  "Execute",
+  "Find",
+  "Help",
+  "Pause",
+  "Play",
+  "Props",
+  "Select",
+  "ZoomIn",
+  "ZoomOut",
+]);
+
+const deviceKeys = new Set([
+  "BrightnessDown",
+  "BrightnessUp",
+  "Eject",
+  "LogOff",
+  "Power",
+  "PowerOff",
+  "PrintScreen",
+  "Hibernate",
+  "Standby",
+  "WakeUp",
+]);
+
+const functionKeys = new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12",
+  "F13",
+  "F14",
+  "F15",
+  "F16",
+  "F17",
+  "F18",
+  "F19",
+  "F20",
+  "Soft1",
+  "Soft2",
+  "Soft3",
+  "Soft4",
+]);
+
+const mediaKeys = new Set([
+  "ChannelDown",
+  "ChannelUp",
+  "MediaFastForward",
+  "MediaPause",
+  "MediaPlay",
+  "MediaPlayPause",
+  "MediaRecord",
+  "MediaRewind",
+  "MediaStop",
+  "MediaTrackNext",
+  "MediaTrackPrevious",
+]);
+
+const audioControlKeys = new Set([
+  "AudioVolumeDown",
+  "AudioVolumeMute",
+  "AudioVolumeUp",
+  "MicrophoneToggle",
+  "MicrophoneVolumeDown",
+  "MicrophoneVolumeMute",
+  "MicrophoneVolumeUp",
+]);
diff --git a/src/main/javascript/components/form/index.js b/src/main/javascript/components/form/index.js
new file mode 100644
index 000000000..8e12045ae
--- /dev/null
+++ b/src/main/javascript/components/form/index.js
@@ -0,0 +1 @@
+import "./autosubmit";
diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
index 82e3b192a..ef4b7531c 100644
--- a/src/main/resources/messages.properties
+++ b/src/main/resources/messages.properties
@@ -164,6 +164,7 @@ feedback.form.submit=Feedback geben
 feedback.form.cancel=Schließen
 feedback.kudos=Vielen Dank! Wir freuen uns über dein wertvolles Feedback!
 
+users.pagination.total.text=Personen
 users.pagination.navigation.aria-label=Personenübersicht Seitenzahlen
 
 # pagination
diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
index 6937126da..e9bdbbd98 100644
--- a/src/main/resources/messages_en.properties
+++ b/src/main/resources/messages_en.properties
@@ -163,6 +163,7 @@ feedback.form.submit=Send feedback
 feedback.form.cancel=Close
 feedback.kudos=Thank you! We appreciate your valuable feedback!
 
+users.pagination.total.text=Users
 users.pagination.navigation.aria-label=User overview pagination
 
 # pagination
diff --git a/src/main/resources/templates/fragments/select.html b/src/main/resources/templates/fragments/select.html
new file mode 100644
index 000000000..792ec9340
--- /dev/null
+++ b/src/main/resources/templates/fragments/select.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+  <head>
+    <meta charset="UTF-8" />
+    <title>select</title>
+  </head>
+  <body>
+    <span
+      th:fragment="one(id, name, options)"
+      class="inline-block relative w-full"
+      th:classappend="${className}"
+      th:with="autosubmit=${autosubmit ?: ''}"
+    >
+      <select
+        th:id="${id}"
+        th:name="${name}"
+        class="appearance-none pl-2 py-1 pr-8 border border-gray-300 rounded"
+        th:attrappend="data-auto-submit=${autosubmit}"
+      >
+        <option th:replace="${options}"></option>
+      </select>
+      <span
+        class="select-caret pointer-events-none absolute inset-y-0 right-0 flex items-center px-2"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          width="16"
+          height="16"
+          class="fill-current h-4 w-4"
+        >
+          <path
+            d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+          />
+        </svg>
+      </span>
+    </span>
+  </body>
+</html>
diff --git a/src/main/resources/templates/usermanagement/users.html b/src/main/resources/templates/usermanagement/users.html
index 676d38d64..7d8f6d37b 100644
--- a/src/main/resources/templates/usermanagement/users.html
+++ b/src/main/resources/templates/usermanagement/users.html
@@ -115,10 +115,94 @@ <h1 class="sr-only">Personen</h1>
                 </tr>
               </tbody>
             </table>
-            <div class="px-6">
+            <div class="px-6 flex flex-row items-center gap-8">
               <nav
                 th:replace="fragments/pagination::pagination(${usersPagination}, #{users.pagination.navigation.aria-label})"
               ></nav>
+              <form
+                action="#"
+                th:action="@{/users}"
+                class="ml-auto flex items-center"
+              >
+                <div class="flex items-center gap-2">
+                  <label
+                    for="pagination-size-select"
+                    class="m-0"
+                    th:text="#{pagination.page.size.label.text}"
+                  >
+                    Zeige
+                  </label>
+                  <span>
+                    <select
+                      name="size"
+                      id="pagination-size-select"
+                      th:replace="fragments/select::one(id='pagination-size-select', name='size', options=~{::pagination-size-options}, autosubmit='size-submit')"
+                    >
+                      <th:block
+                        th:ref="pagination-size-options"
+                        th:with="size=${usersPagination.page.size}"
+                      >
+                        <option
+                          th:if="${size < 10}"
+                          th:value="${size}"
+                          selected
+                          th:text="${size}"
+                        >
+                          4
+                        </option>
+                        <option value="10" th:selected="${size == 10}">
+                          10
+                        </option>
+                        <option
+                          th:if="${size > 10 && size < 20}"
+                          th:value="${size}"
+                          selected
+                          th:text="${size}"
+                        >
+                          14
+                        </option>
+                        <option value="20" th:selected="${size == 20}">
+                          20
+                        </option>
+                        <option
+                          th:if="${size > 20 && size < 40}"
+                          th:value="${size}"
+                          selected
+                          th:text="${size}"
+                        >
+                          24
+                        </option>
+                        <option value="40" th:selected="${size == 40}">
+                          40
+                        </option>
+                        <option
+                          th:if="${size > 40}"
+                          th:value="${size}"
+                          selected
+                          th:text="${size}"
+                        >
+                          44
+                        </option>
+                      </th:block>
+                    </select>
+                  </span>
+                  <span
+                    class="whitespace-nowrap"
+                    id="pagination-size-hint"
+                    th:text="#{pagination.page.size.total.text(${usersPagination.page.totalElements}, ${#messages.msg('users.pagination.total.text')})}"
+                  >
+                    von 42 Personen
+                  </span>
+                </div>
+                <button
+                  id="size-submit"
+                  th:text="#{pagination.page.size.button.text}"
+                  class="ml-2 button-main"
+                  data-js-hidden
+                >
+                  Aktualisieren
+                </button>
+              </form>
             </div>
           </div>
         </div>