@simplysm/angular 14.0.30 → 14.0.33

package/src/data/data-select-button/sd-data-select-button.ts

@@ -0,0 +1,105 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import {
+  SdItemOfTemplate,
+  type SdItemOfTemplateContext,
+} from "../../core/template/sd-item-of-template";
+import { NgTemplateOutlet } from "@angular/common";
+import { injectParent } from "../../core/injectParent";
+import { SdAdditionalButton } from "../../controls/button/sd-additional-button";
+import { SdAnchor } from "../../controls/button/sd-anchor";
+import { SdButton } from "../../controls/button/sd-button";
+import { NgIcon } from "@ng-icons/core";
+import { tablerEraser, tablerSearch } from "@ng-icons/tabler-icons";
+import { SdDataSelectButtonBase } from "./sd-data-select-button.base";
+
+//#region SdDataSelectButton
+
+@Component({
+  selector: "sd-data-select-button",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdAdditionalButton,
+    NgTemplateOutlet,
+    SdAnchor,
+    SdButton,
+    NgIcon,
+  ],
+  template: `
+    <sd-additional-button [inset]="parent.inset()" [size]="parent.size()">
+      @if (itemTplRef()) {
+        @for (item of parent.selectedItems(); track item; let index = $index) {
+          @if (index !== 0) {
+            <div style="display: inline-block">,&nbsp;</div>
+          }
+          <div style="display: inline-block">
+            <ng-template
+              [ngTemplateOutlet]="itemTplRef()!"
+              [ngTemplateOutletContext]="{
+                $implicit: item,
+                item: item,
+                index: index,
+                depth: 0,
+              }"
+            ></ng-template>
+          </div>
+        }
+      }
+      <ng-content />
+
+      @if (!parent.disabled() && !parent.isNoValue() && !parent.required()) {
+        <sd-anchor [theme]="'danger'" (click)="onEraseClick()">
+          <ng-icon [svg]="tablerEraser" />
+        </sd-anchor>
+      }
+
+      @if (!parent.disabled()) {
+        <sd-button (click)="onSearchClick($event)" [inset]="true">
+          <ng-icon [svg]="tablerSearch" />
+        </sd-button>
+      }
+    </sd-additional-button>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-data-select-button {
+        display: block;
+        width: 100%;
+        min-width: 3em;
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-disabled]": "parent.disabled()",
+  },
+})
+export class SdDataSelectButton {
+  parent = injectParent<SdDataSelectButtonBase<any, any>>();
+
+  itemTplRef = contentChild<any, TemplateRef<SdItemOfTemplateContext<any>>>(
+    SdItemOfTemplate,
+    { read: TemplateRef },
+  );
+
+  async onSearchClick(event: MouseEvent): Promise<void> {
+    event.preventDefault();
+    event.stopPropagation();
+    await this.parent.doShowModal();
+  }
+
+  onEraseClick(): void {
+    this.parent.doInitialValue();
+  }
+
+  protected readonly tablerEraser = tablerEraser;
+  protected readonly tablerSearch = tablerSearch;
+}
+
+//#endregion

package/src/data/data-sheet/injectDataSheetExcelManager.ts

@@ -0,0 +1,57 @@
+import { type WritableSignal, inject } from "@angular/core";
+import { SdToastProvider } from "../../core/toast/sd-toast.provider";
+import { SdFileDialogProvider } from "../../core/file-dialog/sd-file-dialog.provider";
+import { withBusy } from "../../core/withBusy";
+import type { SdDataSheetSearchResult } from "./sd-data-sheet.types";
+
+export function injectDataSheetExcelManager<TItem>(options: {
+  busyCount: WritableSignal<number>;
+  search: (
+    usePagination: boolean,
+  ) => Promise<SdDataSheetSearchResult<TItem>> | SdDataSheetSearchResult<TItem>;
+  refresh: () => Promise<void>;
+  getDownloadExcelFn: () =>
+    | ((items: TItem[]) => Promise<void> | void)
+    | undefined;
+  getUploadExcelFn: () => ((file: File) => Promise<void> | void) | undefined;
+  errorMessageFn: (err: unknown) => string;
+}) {
+  const sdToast = inject(SdToastProvider);
+  const sdFileDialog = inject(SdFileDialogProvider);
+
+  async function doDownloadExcel(): Promise<void> {
+    const downloadExcelFn = options.getDownloadExcelFn();
+    if (!downloadExcelFn) return;
+
+    await withBusy(options.busyCount, () =>
+      sdToast.try(async () => {
+        const items = (await options.search(false)).items;
+        await downloadExcelFn(items);
+      }),
+    );
+  }
+
+  async function doUploadExcel(): Promise<void> {
+    const uploadExcelFn = options.getUploadExcelFn();
+    if (!uploadExcelFn) return;
+
+    const file = await sdFileDialog.showAsync(
+      false,
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    );
+    if (!file) return;
+
+    await withBusy(options.busyCount, () =>
+      sdToast.try(
+        async () => {
+          await uploadExcelFn(file);
+          await options.refresh();
+          sdToast.success("엑셀 업로드가 완료 되었습니다.");
+        },
+        (err) => options.errorMessageFn(err),
+      ),
+    );
+  }
+
+  return { doDownloadExcel, doUploadExcel };
+}

package/src/data/data-sheet/injectDataSheetInlineEditManager.ts

@@ -0,0 +1,89 @@
+import {
+  type OutputEmitterRef,
+  type WritableSignal,
+  inject,
+} from "@angular/core";
+import type { ArrayOneWayDiffResult } from "@simplysm/core-common";
+import { mark } from "../../core/mark";
+import { SdToastProvider } from "../../core/toast/sd-toast.provider";
+import { withBusy } from "../../core/withBusy";
+import type { SdDataSheetItemPropInfo } from "./sd-data-sheet.types";
+
+export function injectDataSheetInlineEditManager<TItem, TKey>(options: {
+  busyCount: WritableSignal<number>;
+  canEdit: () => boolean;
+  items: WritableSignal<TItem[]>;
+  submitted: OutputEmitterRef<boolean>;
+  itemPropInfo: () => SdDataSheetItemPropInfo<TItem>;
+  getItemInfoFn: (item: TItem) => { key: TKey };
+  getDiffs: () => ArrayOneWayDiffResult<TItem>[];
+  refresh: () => Promise<void>;
+  getNewItemFn: () => (() => Promise<TItem> | TItem) | undefined;
+  getSubmitFn: () =>
+    | ((diffs: ArrayOneWayDiffResult<TItem>[]) => Promise<boolean> | boolean)
+    | undefined;
+  errorMessageFn: (err: unknown) => string;
+}) {
+  const sdToast = inject(SdToastProvider);
+
+  async function doAddItem(): Promise<void> {
+    const newItemFn = options.getNewItemFn();
+    if (!newItemFn) return;
+
+    await withBusy(options.busyCount, () =>
+      sdToast.try(async () => {
+        const newItem = await newItemFn();
+        options.items.update((items) => [newItem, ...items]);
+      }),
+    );
+  }
+
+  async function doSubmit(opt?: {
+    permCheck?: boolean;
+    hideNoChangeMessage?: boolean;
+  }): Promise<void> {
+    if (options.busyCount() > 0) return;
+    if (opt?.permCheck && !options.canEdit()) return;
+    const submitFn = options.getSubmitFn();
+    if (!submitFn) return;
+
+    const diffs = options.getDiffs();
+
+    if (diffs.length === 0) {
+      if (!opt?.hideNoChangeMessage) {
+        sdToast.info("변경사항이 없습니다.");
+      }
+      return;
+    }
+
+    await withBusy(options.busyCount, () =>
+      sdToast.try(
+        async () => {
+          const result = await submitFn(diffs);
+          if (!result) return;
+
+          sdToast.success("저장되었습니다.");
+          await options.refresh();
+          options.submitted.emit(true);
+        },
+        (err) => options.errorMessageFn(err),
+      ),
+    );
+  }
+
+  function doToggleDeleteItem(item: TItem): void {
+    if (!options.canEdit()) return;
+    const propInfo = options.itemPropInfo();
+    if (propInfo.isDeleted == null) return;
+
+    if (options.getItemInfoFn(item).key == null) {
+      options.items.update((items) => items.filter((item1) => item1 !== item));
+      return;
+    }
+
+    (item[propInfo.isDeleted] as boolean) = !(item[propInfo.isDeleted] as boolean);
+    mark(options.items);
+  }
+
+  return { doAddItem, doSubmit, doToggleDeleteItem };
+}

package/src/data/data-sheet/injectDataSheetModalEditManager.ts

@@ -0,0 +1,76 @@
+import {
+  type OutputEmitterRef,
+  type Signal,
+  type WritableSignal,
+  inject,
+} from "@angular/core";
+import { SdToastProvider } from "../../core/toast/sd-toast.provider";
+import { withBusy } from "../../core/withBusy";
+import type { SelectModalOutputResult } from "../../core/select-modal-output-result";
+
+export function injectDataSheetModalEditManager<TItem, TKey>(options: {
+  busyCount: WritableSignal<number>;
+  canEdit: () => boolean;
+  selectedItemKeys: Signal<TKey[]>;
+  selectedItems: Signal<TItem[]>;
+  close: OutputEmitterRef<SelectModalOutputResult<TItem>>;
+  refresh: () => Promise<void>;
+  getEditItemFn: () =>
+    | ((item?: TItem) => Promise<boolean | undefined> | boolean | undefined)
+    | undefined;
+  getToggleDeleteItemsFn: () =>
+    | ((del: boolean) => Promise<boolean>)
+    | undefined;
+  errorMessageFn: (err: unknown) => string;
+}) {
+  const sdToast = inject(SdToastProvider);
+
+  async function doEditItem(item?: TItem): Promise<void> {
+    const editItemFn = options.getEditItemFn();
+    if (!editItemFn) return;
+
+    const result = await editItemFn(item);
+    if (!result) return;
+
+    await withBusy(options.busyCount, () =>
+      sdToast.try(async () => {
+        await options.refresh();
+      }),
+    );
+  }
+
+  async function doToggleDeleteItems(del: boolean): Promise<void> {
+    if (!options.canEdit()) return;
+    const toggleDeleteItemsFn = options.getToggleDeleteItemsFn();
+    if (!toggleDeleteItemsFn) return;
+
+    await withBusy(options.busyCount, () =>
+      sdToast.try(
+        async () => {
+          const result = await toggleDeleteItemsFn(del);
+          if (!result) return;
+
+          await options.refresh();
+          sdToast.success(`${del ? "삭제" : "복구"} 되었습니다.`);
+        },
+        (err) => options.errorMessageFn(err),
+      ),
+    );
+  }
+
+  function doModalConfirm(): void {
+    options.close.emit({
+      selectedItemKeys: options.selectedItemKeys(),
+      selectedItems: options.selectedItems(),
+    });
+  }
+
+  function doModalCancel(): void {
+    options.close.emit({
+      selectedItemKeys: [],
+      selectedItems: [],
+    });
+  }
+
+  return { doEditItem, doToggleDeleteItems, doModalConfirm, doModalCancel };
+}

package/src/data/data-sheet/injectDataSheetRefreshManager.ts

@@ -0,0 +1,90 @@
+import { type Signal, type WritableSignal, effect, inject } from "@angular/core";
+import { type ArrayOneWayDiffResult, obj } from "@simplysm/core-common";
+import { SdToastProvider } from "../../core/toast/sd-toast.provider";
+import { SdSharedDataProvider } from "../../core/shared-data/sd-shared-data.provider";
+import { withBusy } from "../../core/withBusy";
+import type { SdDataSheetSearchResult } from "./sd-data-sheet.types";
+
+export function injectDataSheetRefreshManager<
+  TItem,
+  TKey extends string | number | undefined,
+>(options: {
+  busyCount: WritableSignal<number>;
+  initialized: WritableSignal<boolean>;
+  canUse: () => boolean;
+  items: WritableSignal<TItem[]>;
+  selectedItems: WritableSignal<TItem[]>;
+  pageLength: WritableSignal<number>;
+  summaryData: WritableSignal<Partial<TItem>>;
+  page: Signal<number>;
+  lastFilter: Signal<unknown>;
+  sortingDefs: Signal<unknown[]>;
+  getItemInfoFn: (item: TItem) => { key: TKey };
+  search: (
+    usePagination: boolean,
+  ) => Promise<SdDataSheetSearchResult<TItem>> | SdDataSheetSearchResult<TItem>;
+  prepareRefreshEffect?: () => void;
+  getDiffsExcludes: () => string[] | undefined;
+}) {
+  const sdToast = inject(SdToastProvider);
+  const sdSharedData = inject(SdSharedDataProvider);
+  let itemsSnapshot: TItem[] = [];
+
+  async function refresh(): Promise<void> {
+    const result = await options.search(true);
+    options.items.set(result.items);
+    itemsSnapshot = obj.clone(result.items);
+
+    options.pageLength.set(result.pageLength ?? 0);
+    options.summaryData.set(result.summary ?? {});
+
+    const selectedKeySet = new Set(
+      options.selectedItems().map((sel) => options.getItemInfoFn(sel).key),
+    );
+    options.selectedItems.set(
+      options.items().filter((item) => selectedKeySet.has(options.getItemInfoFn(item).key)),
+    );
+  }
+
+  function getDiffs(): ArrayOneWayDiffResult<TItem>[] {
+    const diffsExcludes = options.getDiffsExcludes();
+    return options
+      .items()
+      .oneWayDiffs(
+        itemsSnapshot,
+        (item) => options.getItemInfoFn(item).key,
+        diffsExcludes ? { excludes: diffsExcludes } : undefined,
+      )
+      .filter((d) => d.type !== "same");
+  }
+
+  effect((onCleanup) => {
+    options.page();
+    options.lastFilter();
+    options.sortingDefs();
+    options.prepareRefreshEffect?.();
+
+    let cancelled = false;
+    onCleanup(() => {
+      cancelled = true;
+    });
+
+    queueMicrotask(async () => {
+      if (cancelled) return;
+      if (!options.canUse()) {
+        options.initialized.set(true);
+        return;
+      }
+
+      await withBusy(options.busyCount, () =>
+        sdToast.try(async () => {
+          await sdSharedData.wait();
+          await refresh();
+        }),
+      );
+      options.initialized.set(true);
+    });
+  });
+
+  return { refresh, getDiffs };
+}

package/src/data/data-sheet/sd-data-sheet-column.ts

@@ -0,0 +1,10 @@
+import { booleanAttribute, Directive, input } from "@angular/core";
+import { SdSheetColumn } from "../sheet/sd-sheet-column";
+
+@Directive({
+  selector: "sd-data-sheet-column",
+  standalone: true,
+})
+export class SdDataSheetColumn extends SdSheetColumn {
+  edit = input(false, { transform: booleanAttribute });
+}