Merge remote-tracking branch 'origin/sub_laptop_1' into sub_laptop_6

M02_MasterTemplete/M02_MasterTemplete_ItemList.ts

@@ -9,6 +9,7 @@
 
 import { createInputField, el, showToast } from "@ui/ui_template_elements";
 import { buildPager } from "../M01_MasterData/M01_MasterData_UI_Cells";
+import { PAGER_ROOM, pageKeepFirst, watchFit } from "@ui/ui_template_pager";
 import { dateText } from "../common_util/common_util_time";
 import { buildHeadFilters } from "../M01_MasterData/M01_MasterData_UI_Head";
 import "../M01_MasterData/M01_MasterData_UI_Style.css";
@@ -160,6 +161,7 @@ export interface ItemListHandle {
 export function buildItemList(): ItemListHandle {
   let draw = (): void => {};
   let page = 1;
+  let size = SIZE; // 붙은 뒤 화면 높이로 다시 셈
   const searchField = createInputField({ type: "search", placeholder: TEXT.search });
   const search = searchField.input;
   const grid = el("div", { className: "ui-table-wrap m01-master__grid-wrap" });
@@ -176,9 +178,9 @@ export function buildItemList(): ItemListHandle {
   ): void => {
     page = 1;
     draw = (): void => {
-      const got = pageOf(rows, cols, search.value, page);
+      const got = pageOf(rows, cols, search.value, page, size);
       page = got.page;
-      const next = buildPager(got.total, SIZE, page, (p) => {
+      const next = buildPager(got.total, size, page, (p) => {
         page = p;
         draw();
       });
@@ -230,8 +232,23 @@ export function buildItemList(): ItemListHandle {
   });
   const root = el("div", {
     className: "m02-itemlist",
-    children: [buildHeadFilters([searchField.root, pager]), grid],
+    children: [buildHeadFilters([searchField.root]), grid, pager],
   });
+  // 모달 안 목록 — 모달이 줄 수에 따라 움직이니 화면 위치 대신 높이 한도로 셈
+  watchFit(
+    root,
+    () => grid,
+    (rows) => {
+      if (rows === size) return;
+      page = pageKeepFirst(page, size, rows);
+      size = rows;
+      draw();
+    },
+    {
+      cap: () => Math.min(window.innerHeight * 0.6, window.innerHeight - 300) + PAGER_ROOM,
+      once: true,
+    },
+  );
   // 처음 = 빈 표 자리(줄이 오면 `show`)
   note(TEXT.loading);
   return { root, show, message: (text = TEXT.loading) => note(text) };

M02_MasterTemplete/M02_MasterTemplete_Library_List.ts

@@ -16,6 +16,7 @@ import {
 import { t as L } from "@ui/ui_template_locale";
 import { openModal } from "@ui/ui_template_modal";
 import { buildPager } from "../M01_MasterData/M01_MasterData_UI_Cells";
+import { pageKeepFirst, watchFit } from "@ui/ui_template_pager";
 import { buildHeadFilters } from "../M01_MasterData/M01_MasterData_UI_Head";
 import "../M01_MasterData/M01_MasterData_UI_Style.css";
 import {
@@ -103,6 +104,7 @@ export function mountLibraryList(
   let rows: Row[] = [];
   let picked: string | null = null;
   let page = 1;
+  let size = SIZE; // 붙은 뒤 화면 높이로 다시 셈
   const searchField = createInputField({ type: "search", placeholder: tc("Search") });
   const body = el("tbody");
   let pager = buildPager(0, SIZE, 1, () => {});
@@ -116,8 +118,8 @@ export function mountLibraryList(
   const draw = (): void => {
     const q = searchField.input.value.trim().toLowerCase();
     const shown = rows.filter((r) => !q || libraryLabel(r).toLowerCase().includes(q));
-    page = Math.min(page, Math.max(1, Math.ceil(shown.length / SIZE)));
-    const next = buildPager(shown.length, SIZE, page, (p) => {
+    page = Math.min(page, Math.max(1, Math.ceil(shown.length / size)));
+    const next = buildPager(shown.length, size, page, (p) => {
       page = p;
       draw();
     });
@@ -125,7 +127,7 @@ export function mountLibraryList(
     pager = next;
     body.replaceChildren(
       ...(shown.length
-        ? shown.slice((page - 1) * SIZE, page * SIZE).map((row) => {
+        ? shown.slice((page - 1) * size, page * size).map((row) => {
             const radio = el("input", {
               attrs: { type: "radio", name: `m02-lib-${opt.kind}`, "aria-label": row.이름 },
             }) as HTMLInputElement;
@@ -252,25 +254,34 @@ export function mountLibraryList(
     "Lib_Base",
     "Lib_Date",
   ] as const;
-  host.replaceChildren(
-    buildHeadFilters([searchField.root, pager]),
-    el("div", {
-      className: "ui-table-wrap m01-master__grid-wrap",
-      attrs: { "data-lib-list": opt.kind },
-      children: [
-        el("table", {
-          className: "ui-table m01-master__grid",
-          children: [
-            el("thead", {
-              children: [
-                el("tr", { children: heads.map((h) => el("th", { text: h ? tc(h) : "" })) }),
-              ],
-            }),
-            body,
-          ],
-        }),
-      ],
-    }),
+  const gridBox = el("div", {
+    className: "ui-table-wrap m01-master__grid-wrap",
+    attrs: { "data-lib-list": opt.kind },
+    children: [
+      el("table", {
+        className: "ui-table m01-master__grid",
+        children: [
+          el("thead", {
+            children: [
+              el("tr", { children: heads.map((h) => el("th", { text: h ? tc(h) : "" })) }),
+            ],
+          }),
+          body,
+        ],
+      }),
+    ],
+  });
+  host.replaceChildren(buildHeadFilters([searchField.root]), gridBox, pager);
+  watchFit(
+    host,
+    () => gridBox,
+    (rows) => {
+      if (rows === size) return;
+      page = pageKeepFirst(page, size, rows);
+      size = rows;
+      draw();
+    },
+    { once: true },
   );
   if (opt.canEdit)
     tools.replaceChildren(