@simplysm/solid 13.0.53 → 13.0.56

package/dist/components/data/crud-sheet/CrudSheet.js

@@ -0,0 +1,679 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<button class="flex items-center px-2 text-base-400 hover:text-base-600">`), _tmpl$2 = /* @__PURE__ */ _$template(`<div class="flex gap-2 p-2 pb-0">`), _tmpl$3 = /* @__PURE__ */ _$template(`<form class="flex-1 overflow-hidden p-2 pt-1">`), _tmpl$4 = /* @__PURE__ */ _$template(`<div class="flex gap-2 border-t p-2"><div class=flex-1>`), _tmpl$5 = /* @__PURE__ */ _$template(`<form class=p-2>`), _tmpl$6 = /* @__PURE__ */ _$template(`<div class="flex items-center justify-center px-1 py-0.5">`);
+import { children, createEffect, createMemo, createSignal, For, Show, splitProps, useContext } from "solid-js";
+import { createStore, produce, reconcile } from "solid-js/store";
+import { createControllableStore } from "../../../hooks/createControllableStore.js";
+import { objClone } from "@simplysm/core-common";
+import "@simplysm/core-common";
+import { DataSheet } from "../sheet/DataSheet.js";
+import { DataSheetColumn } from "../sheet/DataSheetColumn.js";
+import { BusyContainer } from "../../feedback/busy/BusyContainer.js";
+import { useNotification } from "../../feedback/notification/NotificationContext.js";
+import { Button } from "../../form-control/Button.js";
+import { Icon } from "../../display/Icon.js";
+import { FormGroup } from "../../layout/FormGroup.js";
+import { TopbarContext, createTopbarActions } from "../../layout/topbar/TopbarContext.js";
+import { useDialogInstance } from "../../disclosure/DialogInstanceContext.js";
+import { Dialog } from "../../disclosure/Dialog.js";
+import { Link } from "../../display/Link.js";
+import { createEventListener } from "@solid-primitives/event-listener";
+import clsx from "clsx";
+import { IconDeviceFloppy, IconFileExcel, IconPlus, IconRefresh, IconSearch, IconTrash, IconTrashOff, IconUpload } from "@tabler/icons-solidjs";
+import { isCrudSheetColumnDef, CrudSheetColumn } from "./CrudSheetColumn.js";
+import { isCrudSheetFilterDef, CrudSheetFilter } from "./CrudSheetFilter.js";
+import { isCrudSheetToolsDef, CrudSheetTools } from "./CrudSheetTools.js";
+import { isCrudSheetHeaderDef, CrudSheetHeader } from "./CrudSheetHeader.js";
+const CrudSheetBase = (props) => {
+  const [local, _rest] = splitProps(props, ["search", "getItemKey", "persistKey", "itemsPerPage", "editable", "itemEditable", "itemDeletable", "filterInitial", "items", "onItemsChange", "inlineEdit", "modalEdit", "excel", "selectMode", "onSelect", "hideAutoTools", "class", "children"]);
+  const noti = useNotification();
+  const topbarCtx = useContext(TopbarContext);
+  const dialogInstance = useDialogInstance();
+  const isModal = dialogInstance !== void 0;
+  const isSelectMode = () => local.selectMode != null;
+  const canEdit = () => isSelectMode() ? false : local.editable ?? true;
+  const resolved = children(() => local.children);
+  const defs = createMemo(() => {
+    const arr = resolved.toArray();
+    return {
+      filter: arr.find(isCrudSheetFilterDef),
+      columns: arr.filter(isCrudSheetColumnDef),
+      tools: arr.find(isCrudSheetToolsDef),
+      header: arr.find(isCrudSheetHeaderDef)
+    };
+  });
+  const [items, setItems] = createControllableStore({
+    value: () => local.items ?? [],
+    onChange: () => local.onItemsChange
+  });
+  let originalItems = [];
+  const [filter, setFilter] = createStore(local.filterInitial ?? {});
+  const [lastFilter, setLastFilter] = createSignal(objClone(filter));
+  const [page, setPage] = createSignal(1);
+  const [totalPageCount, setTotalPageCount] = createSignal(0);
+  const [sorts, setSorts] = createSignal([]);
+  const [busyCount, setBusyCount] = createSignal(0);
+  const [ready, setReady] = createSignal(false);
+  const [selectedItems, setSelectedItems] = createSignal([]);
+  let formRef;
+  createEffect(() => {
+    const currLastFilter = lastFilter();
+    const currSorts = sorts();
+    const currPage = page();
+    queueMicrotask(async () => {
+      setBusyCount((c) => c + 1);
+      await noti.try(async () => {
+        await refresh(currLastFilter, currSorts, currPage);
+      }, "\uC870\uD68C \uC2E4\uD328");
+      setBusyCount((c) => c - 1);
+      setReady(true);
+    });
+  });
+  async function refresh(currLastFilter, currSorts, currPage) {
+    const usePagination = local.itemsPerPage != null;
+    const result = await local.search(currLastFilter, usePagination ? currPage : 0, currSorts);
+    setItems(reconcile(result.items));
+    originalItems = objClone(result.items);
+    setTotalPageCount(result.pageCount ?? 0);
+  }
+  function getItemDiffs() {
+    return items.oneWayDiffs(originalItems, (item) => {
+      return local.getItemKey(item);
+    });
+  }
+  function handleFilterSubmit(e) {
+    e.preventDefault();
+    setPage(1);
+    setLastFilter(() => objClone(filter));
+  }
+  function handleRefresh() {
+    setLastFilter(() => ({
+      ...lastFilter()
+    }));
+  }
+  function handleAddRow() {
+    if (!local.inlineEdit) return;
+    setItems(produce((draft) => {
+      draft.unshift(local.inlineEdit.newItem());
+    }));
+  }
+  function handleToggleDelete(item, index) {
+    var _a, _b;
+    if (!(((_a = local.itemDeletable) == null ? void 0 : _a.call(local, item)) ?? true)) return;
+    if (((_b = local.inlineEdit) == null ? void 0 : _b.deleteProp) == null) return;
+    const dp = local.inlineEdit.deleteProp;
+    if (local.getItemKey(item) == null) {
+      setItems(produce((draft) => {
+        draft.splice(index, 1);
+      }));
+      return;
+    }
+    setItems(index, dp, !item[dp]);
+  }
+  async function handleSave() {
+    if (busyCount() > 0) return;
+    if (!canEdit()) return;
+    if (!local.inlineEdit) return;
+    const diffs = getItemDiffs();
+    if (diffs.length === 0) {
+      noti.info("\uC548\uB0B4", "\uBCC0\uACBD\uC0AC\uD56D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      return;
+    }
+    const currLastFilter = lastFilter();
+    const currSorts = sorts();
+    const currPage = page();
+    setBusyCount((c) => c + 1);
+    await noti.try(async () => {
+      await local.inlineEdit.submit(diffs);
+      noti.success("\uC800\uC7A5 \uC644\uB8CC", "\uC800\uC7A5\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+      await refresh(currLastFilter, currSorts, currPage);
+    }, "\uC800\uC7A5 \uC2E4\uD328");
+    setBusyCount((c) => c - 1);
+  }
+  async function handleFormSubmit(e) {
+    e.preventDefault();
+    await handleSave();
+  }
+  async function handleEditItem(item) {
+    if (!local.modalEdit) return;
+    const result = await local.modalEdit.editItem(item);
+    if (!result) return;
+    setBusyCount((c) => c + 1);
+    await noti.try(async () => {
+      await refresh(lastFilter(), sorts(), page());
+    }, "\uC870\uD68C \uC2E4\uD328");
+    setBusyCount((c) => c - 1);
+  }
+  async function handleDeleteItems() {
+    var _a;
+    if (!((_a = local.modalEdit) == null ? void 0 : _a.deleteItems)) return;
+    const result = await local.modalEdit.deleteItems(selectedItems());
+    if (!result) return;
+    setBusyCount((c) => c + 1);
+    await noti.try(async () => {
+      await refresh(lastFilter(), sorts(), page());
+      noti.success("\uC0AD\uC81C \uC644\uB8CC", "\uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+    }, "\uC0AD\uC81C \uC2E4\uD328");
+    setBusyCount((c) => c - 1);
+  }
+  async function handleExcelDownload() {
+    if (!local.excel) return;
+    setBusyCount((c) => c + 1);
+    await noti.try(async () => {
+      const result = await local.search(lastFilter(), 0, sorts());
+      await local.excel.download(result.items);
+    }, "\uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC \uC2E4\uD328");
+    setBusyCount((c) => c - 1);
+  }
+  function handleExcelUpload() {
+    var _a;
+    if (!((_a = local.excel) == null ? void 0 : _a.upload)) return;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".xlsx";
+    input.onchange = async () => {
+      var _a2;
+      const file = (_a2 = input.files) == null ? void 0 : _a2[0];
+      if (file == null) return;
+      setBusyCount((c) => c + 1);
+      await noti.try(async () => {
+        await local.excel.upload(file);
+        noti.success("\uC644\uB8CC", "\uC5D1\uC140 \uC5C5\uB85C\uB4DC\uAC00 \uC644\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+        await refresh(lastFilter(), sorts(), page());
+      }, "\uC5D1\uC140 \uC5C5\uB85C\uB4DC \uC2E4\uD328");
+      setBusyCount((c) => c - 1);
+    };
+    input.click();
+  }
+  function handleSelectConfirm() {
+    var _a;
+    (_a = local.onSelect) == null ? void 0 : _a.call(local, {
+      items: selectedItems(),
+      keys: selectedItems().map((item) => local.getItemKey(item)).filter((k) => k != null)
+    });
+  }
+  function handleSelectCancel() {
+    var _a;
+    (_a = local.onSelect) == null ? void 0 : _a.call(local, {
+      items: [],
+      keys: []
+    });
+  }
+  createEventListener(document, "keydown", (e) => {
+    if (e.ctrlKey && e.key === "s" && !isSelectMode()) {
+      e.preventDefault();
+      formRef == null ? void 0 : formRef.requestSubmit();
+    }
+    if (e.ctrlKey && e.altKey && e.key === "l") {
+      e.preventDefault();
+      handleRefresh();
+    }
+  });
+  if (topbarCtx) {
+    createTopbarActions(() => [_$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!canEdit())() && local.inlineEdit;
+      },
+      get children() {
+        return _$createComponent(Button, {
+          size: "lg",
+          variant: "ghost",
+          theme: "primary",
+          onClick: () => formRef == null ? void 0 : formRef.requestSubmit(),
+          get children() {
+            return [_$createComponent(Icon, {
+              icon: IconDeviceFloppy,
+              "class": "mr-1"
+            }), "\uC800\uC7A5"];
+          }
+        });
+      }
+    }), _$createComponent(Button, {
+      size: "lg",
+      variant: "ghost",
+      theme: "info",
+      onClick: handleRefresh,
+      get children() {
+        return [_$createComponent(Icon, {
+          icon: IconRefresh,
+          "class": "mr-1"
+        }), "\uC0C8\uB85C\uACE0\uCE68"];
+      }
+    })]);
+  }
+  const ctx = {
+    items: () => items,
+    selectedItems,
+    page,
+    sorts,
+    busy: () => busyCount() > 0,
+    hasChanges: () => {
+      if (!local.inlineEdit) return false;
+      return getItemDiffs().length > 0;
+    },
+    save: handleSave,
+    refresh: async () => {
+      handleRefresh();
+      await Promise.resolve();
+    },
+    addItem: handleAddRow,
+    setPage,
+    setSorts
+  };
+  const deleteProp = () => {
+    var _a;
+    return (_a = local.inlineEdit) == null ? void 0 : _a.deleteProp;
+  };
+  return [_$createComponent(Show, {
+    when: isModal,
+    get children() {
+      return _$createComponent(Dialog.Action, {
+        get children() {
+          var _el$ = _tmpl$();
+          _el$.$$click = handleRefresh;
+          _$insert(_el$, _$createComponent(Icon, {
+            icon: IconRefresh
+          }));
+          return _el$;
+        }
+      });
+    }
+  }), _$createComponent(BusyContainer, {
+    get ready() {
+      return ready();
+    },
+    get busy() {
+      return busyCount() > 0;
+    },
+    get ["class"]() {
+      return clsx("flex h-full flex-col", local.class);
+    },
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!(!isModal && !topbarCtx && canEdit()))() && local.inlineEdit;
+        },
+        get children() {
+          var _el$2 = _tmpl$2();
+          _$insert(_el$2, _$createComponent(Button, {
+            size: "sm",
+            theme: "primary",
+            variant: "ghost",
+            onClick: () => formRef == null ? void 0 : formRef.requestSubmit(),
+            get children() {
+              return [_$createComponent(Icon, {
+                icon: IconDeviceFloppy,
+                "class": "mr-1"
+              }), "\uC800\uC7A5"];
+            }
+          }), null);
+          _$insert(_el$2, _$createComponent(Button, {
+            size: "sm",
+            theme: "info",
+            variant: "ghost",
+            onClick: handleRefresh,
+            get children() {
+              return [_$createComponent(Icon, {
+                icon: IconRefresh,
+                "class": "mr-1"
+              }), "\uC0C8\uB85C\uACE0\uCE68"];
+            }
+          }), null);
+          return _el$2;
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return defs().header;
+        },
+        children: (headerDef) => headerDef().children
+      }), _$createComponent(Show, {
+        get when() {
+          return defs().filter;
+        },
+        children: (filterDef) => (() => {
+          var _el$7 = _tmpl$5();
+          _el$7.addEventListener("submit", handleFilterSubmit);
+          _$insert(_el$7, _$createComponent(FormGroup, {
+            inline: true,
+            get children() {
+              return [_$createComponent(FormGroup.Item, {
+                get children() {
+                  return _$createComponent(Button, {
+                    type: "submit",
+                    theme: "info",
+                    variant: "solid",
+                    get children() {
+                      return [_$createComponent(Icon, {
+                        icon: IconSearch,
+                        "class": "mr-1"
+                      }), "\uC870\uD68C"];
+                    }
+                  });
+                }
+              }), _$memo(() => filterDef().children(filter, setFilter))];
+            }
+          }));
+          return _el$7;
+        })()
+      }), _$createComponent(Show, {
+        get when() {
+          return !isSelectMode();
+        },
+        get children() {
+          var _el$3 = _tmpl$2();
+          _$insert(_el$3, _$createComponent(Show, {
+            get when() {
+              return !local.hideAutoTools;
+            },
+            get children() {
+              return [_$createComponent(Show, {
+                get when() {
+                  return _$memo(() => !!canEdit())() && local.inlineEdit;
+                },
+                get children() {
+                  return _$createComponent(Button, {
+                    size: "sm",
+                    theme: "primary",
+                    variant: "ghost",
+                    onClick: handleAddRow,
+                    get children() {
+                      return [_$createComponent(Icon, {
+                        icon: IconPlus,
+                        "class": "mr-1"
+                      }), "\uD589 \uCD94\uAC00"];
+                    }
+                  });
+                }
+              }), _$createComponent(Show, {
+                get when() {
+                  return _$memo(() => !!canEdit())() && local.modalEdit;
+                },
+                get children() {
+                  return _$createComponent(Button, {
+                    size: "sm",
+                    theme: "primary",
+                    variant: "ghost",
+                    onClick: () => void handleEditItem(),
+                    get children() {
+                      return [_$createComponent(Icon, {
+                        icon: IconPlus,
+                        "class": "mr-1"
+                      }), "\uB4F1\uB85D"];
+                    }
+                  });
+                }
+              }), _$createComponent(Show, {
+                get when() {
+                  var _a;
+                  return _$memo(() => !!canEdit())() && ((_a = local.modalEdit) == null ? void 0 : _a.deleteItems);
+                },
+                get children() {
+                  return _$createComponent(Button, {
+                    size: "sm",
+                    theme: "danger",
+                    variant: "ghost",
+                    onClick: handleDeleteItems,
+                    get disabled() {
+                      return selectedItems().length === 0 || !selectedItems().some((item) => {
+                        var _a;
+                        return ((_a = local.itemDeletable) == null ? void 0 : _a.call(local, item)) ?? true;
+                      });
+                    },
+                    get children() {
+                      return [_$createComponent(Icon, {
+                        icon: IconTrash,
+                        "class": "mr-1"
+                      }), "\uC120\uD0DD \uC0AD\uC81C"];
+                    }
+                  });
+                }
+              }), _$createComponent(Show, {
+                get when() {
+                  var _a;
+                  return _$memo(() => !!canEdit())() && ((_a = local.excel) == null ? void 0 : _a.upload);
+                },
+                get children() {
+                  return _$createComponent(Button, {
+                    size: "sm",
+                    theme: "success",
+                    variant: "ghost",
+                    onClick: handleExcelUpload,
+                    get children() {
+                      return [_$createComponent(Icon, {
+                        icon: IconUpload,
+                        "class": "mr-1"
+                      }), "\uC5D1\uC140 \uC5C5\uB85C\uB4DC"];
+                    }
+                  });
+                }
+              }), _$createComponent(Show, {
+                get when() {
+                  return local.excel;
+                },
+                get children() {
+                  return _$createComponent(Button, {
+                    size: "sm",
+                    theme: "success",
+                    variant: "ghost",
+                    onClick: handleExcelDownload,
+                    get children() {
+                      return [_$createComponent(Icon, {
+                        icon: IconFileExcel,
+                        "class": "mr-1"
+                      }), "\uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC"];
+                    }
+                  });
+                }
+              })];
+            }
+          }), null);
+          _$insert(_el$3, _$createComponent(Show, {
+            get when() {
+              return defs().tools;
+            },
+            children: (toolsDef) => toolsDef().children(ctx)
+          }), null);
+          return _el$3;
+        }
+      }), (() => {
+        var _el$4 = _tmpl$3();
+        _el$4.addEventListener("submit", handleFormSubmit);
+        var _ref$ = formRef;
+        typeof _ref$ === "function" ? _$use(_ref$, _el$4) : formRef = _el$4;
+        _$insert(_el$4, _$createComponent(DataSheet, {
+          "class": "h-full",
+          items,
+          get persistKey() {
+            return _$memo(() => local.persistKey != null)() ? `${local.persistKey}-sheet` : void 0;
+          },
+          get page() {
+            return _$memo(() => local.itemsPerPage != null)() ? page() : void 0;
+          },
+          onPageChange: setPage,
+          get totalPageCount() {
+            return totalPageCount();
+          },
+          get itemsPerPage() {
+            return local.itemsPerPage;
+          },
+          get sorts() {
+            return sorts();
+          },
+          onSortsChange: setSorts,
+          get selectMode() {
+            var _a;
+            return _$memo(() => !!isSelectMode())() ? local.selectMode === "multi" ? "multiple" : "single" : ((_a = local.modalEdit) == null ? void 0 : _a.deleteItems) != null ? "multiple" : void 0;
+          },
+          get selectedItems() {
+            return selectedItems();
+          },
+          onSelectedItemsChange: setSelectedItems,
+          get autoSelect() {
+            return isSelectMode() && local.selectMode === "single" ? "click" : void 0;
+          },
+          cellClass: (item, _colKey) => {
+            const dp = deleteProp();
+            if (dp != null && Boolean(item[dp])) {
+              return clsx("line-through");
+            }
+            return void 0;
+          },
+          get children() {
+            return [_$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!(deleteProp() != null && canEdit()))() ? deleteProp() : void 0;
+              },
+              children: (dp) => _$createComponent(DataSheetColumn, {
+                key: "__delete",
+                header: "",
+                fixed: true,
+                sortable: false,
+                resizable: false,
+                children: (dsCtx) => (() => {
+                  var _el$8 = _tmpl$6();
+                  _$insert(_el$8, _$createComponent(Link, {
+                    theme: "danger",
+                    get disabled() {
+                      var _a;
+                      return !(((_a = local.itemDeletable) == null ? void 0 : _a.call(local, dsCtx.item)) ?? true);
+                    },
+                    onClick: () => handleToggleDelete(dsCtx.item, dsCtx.index),
+                    get children() {
+                      return _$createComponent(Icon, {
+                        get icon() {
+                          return Boolean(dsCtx.item[dp()]) ? IconTrashOff : IconTrash;
+                        }
+                      });
+                    }
+                  }));
+                  return _el$8;
+                })()
+              })
+            }), _$createComponent(For, {
+              get each() {
+                return defs().columns;
+              },
+              children: (col) => _$createComponent(DataSheetColumn, {
+                get key() {
+                  return col.key;
+                },
+                get header() {
+                  return col.header;
+                },
+                get headerContent() {
+                  return col.headerContent;
+                },
+                get headerStyle() {
+                  return col.headerStyle;
+                },
+                get summary() {
+                  return col.summary;
+                },
+                get tooltip() {
+                  return col.tooltip;
+                },
+                get fixed() {
+                  return col.fixed;
+                },
+                get hidden() {
+                  return col.hidden;
+                },
+                get collapse() {
+                  return col.collapse;
+                },
+                get width() {
+                  return col.width;
+                },
+                get ["class"]() {
+                  return col.class;
+                },
+                get sortable() {
+                  return col.sortable;
+                },
+                get resizable() {
+                  return col.resizable;
+                },
+                children: (dsCtx) => {
+                  var _a;
+                  const crudCtx = {
+                    ...dsCtx,
+                    setItem: (key, value) => {
+                      setItems(dsCtx.index, key, value);
+                    }
+                  };
+                  if (local.modalEdit && col.editable && canEdit() && (((_a = local.itemEditable) == null ? void 0 : _a.call(local, dsCtx.item)) ?? true)) {
+                    return _$createComponent(Link, {
+                      "class": "flex w-full",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        void handleEditItem(dsCtx.item);
+                      },
+                      get children() {
+                        return col.cell(crudCtx);
+                      }
+                    });
+                  }
+                  return col.cell(crudCtx);
+                }
+              })
+            })];
+          }
+        }));
+        return _el$4;
+      })(), _$createComponent(Show, {
+        get when() {
+          return isModal && isSelectMode();
+        },
+        get children() {
+          var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
+          _$insert(_el$5, _$createComponent(Show, {
+            get when() {
+              return selectedItems().length > 0;
+            },
+            get children() {
+              return _$createComponent(Button, {
+                size: "sm",
+                theme: "danger",
+                onClick: handleSelectCancel,
+                get children() {
+                  return [_$memo(() => local.selectMode === "multi" ? "\uBAA8\uB450" : "\uC120\uD0DD"), " \uD574\uC81C"];
+                }
+              });
+            }
+          }), null);
+          _$insert(_el$5, _$createComponent(Show, {
+            get when() {
+              return local.selectMode === "multi";
+            },
+            get children() {
+              return _$createComponent(Button, {
+                size: "sm",
+                theme: "primary",
+                onClick: handleSelectConfirm,
+                get children() {
+                  return ["\uD655\uC778(", _$memo(() => selectedItems().length), ")"];
+                }
+              });
+            }
+          }), null);
+          return _el$5;
+        }
+      })];
+    }
+  })];
+};
+const CrudSheet = CrudSheetBase;
+CrudSheet.Column = CrudSheetColumn;
+CrudSheet.Filter = CrudSheetFilter;
+CrudSheet.Tools = CrudSheetTools;
+CrudSheet.Header = CrudSheetHeader;
+_$delegateEvents(["click"]);
+export {
+  CrudSheet
+};
+//# sourceMappingURL=CrudSheet.js.map