@simplysm/solid 13.0.62 → 13.0.65

package/src/components/features/address/AddressSearch.tsx

@@ -0,0 +1,75 @@
+import { type Component, createSignal, onMount } from "solid-js";
+import { BusyContainer } from "../../feedback/busy/BusyContainer";
+import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+
+export interface AddressSearchResult {
+  postNumber: string | undefined;
+  address: string | undefined;
+  buildingName: string | undefined;
+}
+
+export const AddressSearchContent: Component = () => {
+  const dialogInstance = useDialogInstance<AddressSearchResult>();
+
+  const [initialized, setInitialized] = createSignal(false);
+  let contentEl!: HTMLDivElement;
+
+  onMount(async () => {
+    if (!document.getElementById("daum_address")) {
+      await new Promise<void>((resolve) => {
+        const scriptEl = document.createElement("script");
+        scriptEl.src = "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
+        scriptEl.setAttribute("id", "daum_address");
+
+        scriptEl.onload = (): void => {
+          // @ts-expect-error -- Daum Postcode 글로벌 API
+          daum.postcode.load(() => {
+            resolve();
+          });
+        };
+        document.head.appendChild(scriptEl);
+      });
+    }
+
+    // @ts-expect-error -- Daum Postcode 글로벌 API
+    new daum.Postcode({
+      oncomplete: (data: any): void => {
+        const addr = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress;
+
+        let extraAddr = "";
+        if (data.userSelectedType === "R") {
+          if (data.bname !== "" && /[동로가]$/g.test(data.bname)) {
+            extraAddr += data.bname;
+          }
+
+          if (data.buildingName !== "" && data.apartment === "Y") {
+            extraAddr += extraAddr !== "" ? ", " + data.buildingName : data.buildingName;
+          }
+
+          if (extraAddr !== "") {
+            extraAddr = " (" + extraAddr + ")";
+          }
+        }
+
+        dialogInstance?.close({
+          postNumber: data.zonecode,
+          address: addr + extraAddr,
+          buildingName: data.buildingName,
+        });
+      },
+      onresize: (size: any): void => {
+        contentEl.style.height = size.height + "px";
+      },
+      width: "100%",
+      height: "100%",
+    }).embed(contentEl, { autoClose: false });
+
+    setInitialized(true);
+  });
+
+  return (
+    <BusyContainer busy={!initialized()}>
+      <div ref={contentEl} data-address-content style={{ "min-height": "100px" }} />
+    </BusyContainer>
+  );
+};

package/src/components/{data → features}/crud-detail/CrudDetail.tsx

@@ -200,6 +200,23 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             저장
           </Button>
         </Show>
+        <Show
+          when={
+            canEdit() && local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true)
+          }
+        >
+          {(_) => (
+            <Button
+              size="lg"
+              variant="ghost"
+              theme="danger"
+              onClick={() => void handleToggleDelete()}
+            >
+              <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
+              {info()!.isDeleted ? "복구" : "삭제"}
+            </Button>
+          )}
+        </Show>
         <Button size="lg" variant="ghost" theme="info" onClick={() => void handleRefresh()}>
           <Icon icon={IconRefresh} class="mr-1" />
           새로고침
@@ -255,38 +272,46 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         busy={busyCount() > 0}
         class={clsx("flex h-full flex-col", local.class)}
       >
-        {/* Toolbar (page/control mode) */}
-        <Show when={!isModal && canEdit()}>
+        {/* Toolbar */}
+        <Show when={(!isModal && !topbarCtx) || defs().tools}>
           <div class="flex gap-2 p-2 pb-0">
-            <Show when={local.submit}>
-              <Button
-                size="sm"
-                theme="primary"
-                variant="ghost"
-                onClick={() => formRef?.requestSubmit()}
-              >
-                <Icon icon={IconDeviceFloppy} class="mr-1" />
-                저장
-              </Button>
-            </Show>
-            <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
-              <Icon icon={IconRefresh} class="mr-1" />
-              새로고침
-            </Button>
-            <Show
-              when={local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true)}
-            >
-              {(_) => (
+            <Show when={!topbarCtx && !isModal}>
+              <Show when={canEdit() && local.submit}>
                 <Button
                   size="sm"
-                  theme="danger"
+                  theme="primary"
                   variant="ghost"
-                  onClick={() => void handleToggleDelete()}
+                  onClick={() => formRef?.requestSubmit()}
                 >
-                  <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                  {info()!.isDeleted ? "복구" : "삭제"}
+                  <Icon icon={IconDeviceFloppy} class="mr-1" />
+                  저장
                 </Button>
-              )}
+              </Show>
+              <Show
+                when={
+                  canEdit() &&
+                  local.toggleDelete &&
+                  info() &&
+                  !info()!.isNew &&
+                  (local.deletable ?? true)
+                }
+              >
+                {(_) => (
+                  <Button
+                    size="sm"
+                    theme="danger"
+                    variant="ghost"
+                    onClick={() => void handleToggleDelete()}
+                  >
+                    <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
+                    {info()!.isDeleted ? "복구" : "삭제"}
+                  </Button>
+                )}
+              </Show>
+              <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
+                <Icon icon={IconRefresh} class="mr-1" />
+                새로고침
+              </Button>
             </Show>
             <Show when={defs().tools}>{(toolsDef) => toolsDef().children}</Show>
           </div>

package/src/components/{data → features}/crud-sheet/CrudSheet.tsx

@@ -11,11 +11,12 @@ import {
 } from "solid-js";
 import { createStore, produce, reconcile } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore";
-import { objClone } from "@simplysm/core-common";
+import type { DateTime } from "@simplysm/core-common";
+import { objClone, objGetChainValue } from "@simplysm/core-common";
 import "@simplysm/core-common"; // register extensions
-import type { SortingDef } from "../sheet/types";
-import { DataSheet } from "../sheet/DataSheet";
-import { DataSheetColumn } from "../sheet/DataSheetColumn";
+import type { SortingDef } from "../../data/sheet/types";
+import { DataSheet } from "../../data/sheet/DataSheet";
+import { DataSheetColumn } from "../../data/sheet/DataSheetColumn";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { useNotification } from "../../feedback/notification/NotificationContext";
 import { Button } from "../../form-control/Button";
@@ -26,6 +27,7 @@ import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 import { Dialog } from "../../disclosure/Dialog";
 import { Link } from "../../display/Link";
 import { createEventListener } from "@solid-primitives/event-listener";
+import { useBeforeLeave } from "@solidjs/router";
 import clsx from "clsx";
 import {
   IconDeviceFloppy,
@@ -67,11 +69,14 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     "search",
     "getItemKey",
     "persistKey",
-    "itemsPerPage",
     "editable",
     "itemEditable",
     "itemDeletable",
     "itemDeleted",
+    "isItemSelectable",
+    "lastModifiedAtProp",
+    "lastModifiedByProp",
+    "onSubmitted",
     "filterInitial",
     "items",
     "onItemsChange",
@@ -123,6 +128,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   const [ready, setReady] = createSignal(false);
 
   const [selectedItems, setSelectedItems] = createSignal<TItem[]>([]);
+  const [selectedKeys, setSelectedKeys] = createSignal<Set<string | number>>(new Set());
 
   let formRef: HTMLFormElement | undefined;
 
@@ -130,6 +136,23 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     void doRefresh();
   });
 
+  // -- Key-based selection: restore selectedItems when items change --
+  createEffect(() => {
+    const currentItems = items as unknown as TItem[];
+    const keys = selectedKeys();
+    if (keys.size === 0) {
+      if (selectedItems().length > 0) {
+        setSelectedItems([]);
+      }
+      return;
+    }
+    const restored = currentItems.filter((item) => {
+      const key = local.getItemKey(item);
+      return key != null && keys.has(key);
+    });
+    setSelectedItems(restored);
+  });
+
   async function doRefresh() {
     setBusyCount((c) => c + 1);
     try {
@@ -142,12 +165,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   async function refresh() {
-    const usePagination = local.itemsPerPage != null;
-    const result: SearchResult<TItem> = await local.search(
-      lastFilter(),
-      usePagination ? page() : 0,
-      sorts(),
-    );
+    const result: SearchResult<TItem> = await local.search(lastFilter(), page(), sorts());
     setItems(reconcile(result.items));
     originalItems = objClone(result.items);
     setTotalPageCount(result.pageCount ?? 0);
@@ -155,20 +173,28 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   /* eslint-disable solid/reactivity -- 이벤트 핸들러에서만 호출, store 즉시 읽기 */
   function getItemDiffs() {
-    return (items as unknown as TItem[]).oneWayDiffs(originalItems, ((item: TItem) => {
-      return local.getItemKey(item);
-    }) as (item: TItem) => keyof TItem);
+    return items.oneWayDiffs(originalItems, (item) => local.getItemKey(item), {
+      excludes: local.inlineEdit?.diffsExcludes,
+    });
   }
   /* eslint-enable solid/reactivity */
 
+  function checkIgnoreChanges(): boolean {
+    if (!local.inlineEdit) return true;
+    if (getItemDiffs().length === 0) return true;
+    return confirm("변경사항이 있습니다. 무시하시겠습니까?");
+  }
+
   // -- Filter --
   function handleFilterSubmit(e: Event) {
     e.preventDefault();
+    if (!checkIgnoreChanges()) return;
     setPage(1);
     setLastFilter(() => objClone(filter));
   }
 
   async function handleRefresh() {
+    if (!checkIgnoreChanges()) return;
     await doRefresh();
   }
 
@@ -216,6 +242,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       await local.inlineEdit.submit(diffs);
       noti.success("저장 완료", "저장되었습니다.");
       await refresh();
+      local.onSubmitted?.();
     } catch (err) {
       noti.error(err, "저장 실패");
     }
@@ -257,13 +284,28 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     setBusyCount((c) => c - 1);
   }
 
+  async function handleRestoreItems() {
+    if (!local.modalEdit?.restoreItems) return;
+    const result = await local.modalEdit.restoreItems(selectedItems());
+    if (!result) return;
+
+    setBusyCount((c) => c + 1);
+    try {
+      await refresh();
+      noti.success("복구 완료", "복구되었습니다.");
+    } catch (err) {
+      noti.error(err, "복구 실패");
+    }
+    setBusyCount((c) => c - 1);
+  }
+
   // -- Excel --
   async function handleExcelDownload() {
     if (!local.excel) return;
 
     setBusyCount((c) => c + 1);
     try {
-      const result = await local.search(lastFilter(), 0, sorts());
+      const result = await local.search(lastFilter(), undefined, sorts());
       await local.excel.download(result.items);
     } catch (err) {
       noti.error(err, "엑셀 다운로드 실패");
@@ -295,16 +337,51 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   // -- Select Mode --
+  function handleSelectedItemsChange(newSelectedItems: TItem[]) {
+    // 현재 페이지 아이템들의 key Set
+    const currentItems = items as unknown as TItem[];
+    const currentKeys = new Set<string | number>();
+    for (const item of currentItems) {
+      const key = local.getItemKey(item);
+      if (key != null) currentKeys.add(key);
+    }
+
+    // 새로 선택된 아이템들의 key
+    const newSelectedKeys = new Set<string | number>();
+    for (const item of newSelectedItems) {
+      const key = local.getItemKey(item);
+      if (key != null) newSelectedKeys.add(key);
+    }
+
+    // 다른 페이지 key 보존 + 현재 페이지 key 갱신
+    const merged = new Set<string | number>();
+    for (const key of selectedKeys()) {
+      if (!currentKeys.has(key)) {
+        merged.add(key); // 다른 페이지 key 보존
+      }
+    }
+    for (const key of newSelectedKeys) {
+      merged.add(key); // 현재 페이지 선택 추가
+    }
+
+    setSelectedKeys(merged);
+    setSelectedItems(newSelectedItems);
+  }
+
+  function clearSelection() {
+    setSelectedKeys(new Set<string | number>());
+    setSelectedItems([]);
+  }
+
   function handleSelectConfirm() {
     local.onSelect?.({
       items: selectedItems(),
-      keys: selectedItems()
-        .map((item) => local.getItemKey(item))
-        .filter((k): k is string | number => k != null),
+      keys: [...selectedKeys()],
     });
   }
 
   function handleSelectCancel() {
+    clearSelection();
     local.onSelect?.({ items: [], keys: [] });
   }
 
@@ -316,10 +393,25 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     }
     if (e.ctrlKey && e.altKey && e.key === "l") {
       e.preventDefault();
+      if (!checkIgnoreChanges()) return;
       await doRefresh();
     }
   });
 
+  // -- Route Leave Guard --
+  // eslint-disable-next-line solid/reactivity -- inlineEdit는 초기 설정값으로만 사용
+  if (!isModal && local.inlineEdit) {
+    try {
+      useBeforeLeave((e) => {
+        if (!checkIgnoreChanges()) {
+          e.preventDefault();
+        }
+      });
+    } catch {
+      // Router context 없으면 skip
+    }
+  }
+
   // -- Topbar Actions --
   if (topbarCtx) {
     createTopbarActions(() => (
@@ -361,6 +453,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     addItem: handleAddRow,
     setPage,
     setSorts,
+    clearSelection,
   };
 
   // -- Render --
@@ -458,13 +551,32 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   onClick={handleDeleteItems}
                   disabled={
                     selectedItems().length === 0 ||
-                    !selectedItems().some((item) => local.itemDeletable?.(item) ?? true)
+                    !selectedItems().some(
+                      (item) =>
+                        (local.itemDeletable?.(item) ?? true) &&
+                        !(local.itemDeleted?.(item) ?? false),
+                    )
                   }
                 >
                   <Icon icon={IconTrash} class="mr-1" />
                   선택 삭제
                 </Button>
               </Show>
+              <Show when={canEdit() && local.modalEdit?.restoreItems}>
+                <Button
+                  size="sm"
+                  theme="warning"
+                  variant="ghost"
+                  onClick={handleRestoreItems}
+                  disabled={
+                    selectedItems().length === 0 ||
+                    !selectedItems().some((item) => local.itemDeleted?.(item) ?? false)
+                  }
+                >
+                  <Icon icon={IconTrashOff} class="mr-1" />
+                  선택 복구
+                </Button>
+              </Show>
 
               {/* Excel buttons */}
               <Show when={canEdit() && local.excel?.upload}>
@@ -492,21 +604,21 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             class="h-full"
             items={items}
             persistKey={local.persistKey != null ? `${local.persistKey}-sheet` : undefined}
-            page={local.itemsPerPage != null ? page() : undefined}
+            page={totalPageCount() > 0 ? page() : undefined}
             onPageChange={setPage}
             totalPageCount={totalPageCount()}
-            itemsPerPage={local.itemsPerPage}
             sorts={sorts()}
             onSortsChange={setSorts}
+            isItemSelectable={local.isItemSelectable}
             selectMode={
               isSelectMode()
                 ? local.selectMode
-                : local.modalEdit?.deleteItems != null
+                : local.modalEdit?.deleteItems != null || local.modalEdit?.restoreItems != null
                   ? "multiple"
                   : undefined
             }
             selectedItems={selectedItems()}
-            onSelectedItemsChange={setSelectedItems}
+            onSelectedItemsChange={handleSelectedItemsChange}
             autoSelect={isSelectMode() && local.selectMode === "single" ? "click" : undefined}
             cellClass={(item) => {
               if (isItemDeleted(item)) {
@@ -593,6 +705,31 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                 </DataSheetColumn>
               )}
             </For>
+
+            {/* Auto lastModified columns */}
+            <Show when={local.lastModifiedAtProp}>
+              <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header="수정일시" hidden>
+                {(dsCtx) => (
+                  <div class="px-2 py-1 text-center">
+                    {(
+                      objGetChainValue(dsCtx.item, local.lastModifiedAtProp!, true) as
+                        | DateTime
+                        | undefined
+                    )?.toFormatString("yyyy-MM-dd HH:mm")}
+                  </div>
+                )}
+              </DataSheetColumn>
+            </Show>
+
+            <Show when={local.lastModifiedByProp}>
+              <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header="수정자" hidden>
+                {(dsCtx) => (
+                  <div class="px-2 py-1 text-center">
+                    {objGetChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
+                  </div>
+                )}
+              </DataSheetColumn>
+            </Show>
           </DataSheet>
         </form>
 

package/src/components/{data → features}/crud-sheet/CrudSheetColumn.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from "solid-js";
 import type { CrudSheetColumnDef, CrudSheetColumnProps } from "./types";
-import { normalizeHeader } from "../sheet/sheetUtils";
+import { normalizeHeader } from "../../data/sheet/sheetUtils";
 
 export function isCrudSheetColumnDef(value: unknown): value is CrudSheetColumnDef<unknown> {
   return (

package/src/components/{data → features}/crud-sheet/types.ts

@@ -1,7 +1,7 @@
 import type { JSX } from "solid-js";
 import type { SetStoreFunction } from "solid-js/store";
 import type { ArrayDiffs2Result } from "@simplysm/core-common";
-import type { DataSheetColumnProps, SortingDef } from "../sheet/types";
+import type { DataSheetColumnProps, SortingDef } from "../../data/sheet/types";
 
 // ── Search ──
 
@@ -16,11 +16,13 @@ export interface InlineEditConfig<TItem> {
   submit: (diffs: ArrayDiffs2Result<TItem>[]) => Promise<void>;
   newItem: () => TItem;
   deleteProp?: keyof TItem & string;
+  diffsExcludes?: string[];
 }
 
 export interface ModalEditConfig<TItem> {
-  editItem: (item?: TItem) => Promise<boolean>;
+  editItem: (item?: TItem) => Promise<boolean | undefined>;
   deleteItems?: (items: TItem[]) => Promise<boolean>;
+  restoreItems?: (items: TItem[]) => Promise<boolean>;
 }
 
 export interface ExcelConfig<TItem> {
@@ -56,6 +58,7 @@ export interface CrudSheetContext<TItem> {
   save(): Promise<void>;
   refresh(): Promise<void>;
   addItem(): void;
+  clearSelection(): void;
   setPage(page: number): void;
   setSorts(sorts: SortingDef[]): void;
 }
@@ -73,20 +76,27 @@ export type CrudSheetProps<TItem, TFilter extends Record<string, any>> = CrudShe
   );
 
 interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
-  search: (filter: TFilter, page: number, sorts: SortingDef[]) => Promise<SearchResult<TItem>>;
+  search: (
+    filter: TFilter,
+    page: number | undefined,
+    sorts: SortingDef[],
+  ) => Promise<SearchResult<TItem>>;
   getItemKey: (item: TItem) => string | number | undefined;
   persistKey?: string;
-  itemsPerPage?: number;
   editable?: boolean;
   itemEditable?: (item: TItem) => boolean;
   itemDeletable?: (item: TItem) => boolean;
   itemDeleted?: (item: TItem) => boolean;
+  isItemSelectable?: (item: TItem) => boolean | string;
+  lastModifiedAtProp?: string;
+  lastModifiedByProp?: string;
   filterInitial?: TFilter;
   items?: TItem[];
   onItemsChange?: (items: TItem[]) => void;
   excel?: ExcelConfig<TItem>;
   selectMode?: "single" | "multiple";
   onSelect?: (result: SelectResult<TItem>) => void;
+  onSubmitted?: () => void;
   hideAutoTools?: boolean;
   class?: string;
   children: JSX.Element;