@simplysm/angular 14.0.26 → 14.0.28

package/src/features/data-view/sd-data-detail.base.ts

@@ -0,0 +1,183 @@
+import {
+  Directive,
+  effect,
+  inject,
+  output,
+  signal,
+  type Signal,
+  TemplateRef,
+} from "@angular/core";
+import { DateTime, obj } from "@simplysm/core-common";
+import { TXT_CHANGE_IGNORE_CONFIRM } from "../../core/commons";
+import { SdSharedDataProvider } from "../../core/providers/sd-shared-data.provider";
+import { setupCanDeactivate } from "../../core/utils/setups/setupCanDeactivate";
+import { injectViewTypeSignal } from "../../core/utils/injectViewTypeSignal";
+import { withBusy } from "../../core/utils/withBusy";
+import { type SdModalContentDef } from "../../ui/overlay/modal/sd-modal.provider";
+import { SdToastProvider } from "../../core/providers/sd-toast.provider";
+
+export interface SdDataDetailDataInfo {
+  isNew: boolean;
+  isDeleted: boolean;
+  lastModifiedAt: DateTime | undefined;
+  lastModifiedBy: string | undefined;
+}
+
+@Directive()
+export abstract class SdDataDetailBase<T extends object, R = boolean>
+  implements SdModalContentDef<R>
+{
+  //-- abstract
+
+  abstract canUse: Signal<boolean>;
+  abstract canEdit: Signal<boolean>;
+  canDelete?: Signal<boolean>;
+
+  prepareRefreshEffect?(): void;
+
+  abstract load():
+    | Promise<{ data: T; info: SdDataDetailDataInfo }>
+    | { data: T; info: SdDataDetailDataInfo };
+
+  toggleDelete?(del: boolean): Promise<R | undefined> | R | undefined;
+
+  submit?(data: T): Promise<R | undefined> | R | undefined;
+
+  //-- implement
+
+  private readonly _sdToast = inject(SdToastProvider);
+  private readonly _sdSharedData = inject(SdSharedDataProvider);
+
+  viewType = injectViewTypeSignal(() => this);
+
+  busyCount = signal(0);
+  busyMessage = signal<string | undefined>(undefined);
+  initialized = signal(false);
+  close = output<R>();
+  actionTplRef?: TemplateRef<any>;
+
+  data = signal<T>({} as T);
+
+  dataInfo = signal<SdDataDetailDataInfo | undefined>(undefined);
+
+  private _dataSnapshot?: T;
+
+  constructor() {
+    effect(() => {
+      this.prepareRefreshEffect?.();
+
+      queueMicrotask(async () => {
+        if (!this.canUse()) {
+          this.initialized.set(true);
+          return;
+        }
+
+        await withBusy(this.busyCount, () =>
+          this._sdToast.try(async () => {
+            await this._sdSharedData.wait();
+            await this.refresh();
+          }),
+        );
+        this.initialized.set(true);
+      });
+    });
+
+    setupCanDeactivate(() => this.viewType() === "modal" || this.checkIgnoreChanges());
+  }
+
+  checkIgnoreChanges() {
+    return (
+      this._dataSnapshot == null ||
+      obj.equal(this.data(), this._dataSnapshot) ||
+      confirm(TXT_CHANGE_IGNORE_CONFIRM)
+    );
+  }
+
+  async doRefresh() {
+    if (this.busyCount() > 0) return;
+    if (!this.canUse()) return;
+    if (!this.checkIgnoreChanges()) return;
+
+    await withBusy(this.busyCount, () =>
+      this._sdToast.try(async () => {
+        await this.refresh();
+      }),
+    );
+  }
+
+  async refresh() {
+    const result = await this.load();
+    this.data.set(result.data);
+    this.dataInfo.set(result.info);
+    if (!result.info.isNew) {
+      this._dataSnapshot = obj.clone(result.data);
+    }
+  }
+
+  async doToggleDelete(del: boolean) {
+    if (this.busyCount() > 0) return;
+    if (!this.canEdit()) return;
+    if (this.canDelete && !this.canDelete()) return;
+    if (!this.toggleDelete) return;
+
+    await withBusy(this.busyCount, () =>
+      this._sdToast.try(
+        async () => {
+          const result = await this.toggleDelete!(del);
+          if (!result) return;
+
+          this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
+
+          this.close.emit(result);
+        },
+        (err) => this._getOrmDataEditToastErrorMessage(err),
+      ),
+    );
+  }
+
+  async doSubmit(opt?: { permCheck?: boolean; hideNoChangeMessage?: boolean }) {
+    if (this.busyCount() > 0) return;
+    if (opt?.permCheck && !this.canEdit()) return;
+    if (!this.submit) return;
+
+    const dataInfo = this.dataInfo();
+    if (dataInfo == null) return;
+
+    if (
+      !dataInfo.isNew &&
+      (this._dataSnapshot == null || obj.equal(this.data(), this._dataSnapshot))
+    ) {
+      if (!opt?.hideNoChangeMessage) {
+        this._sdToast.info("변경사항이 없습니다.");
+      }
+      return;
+    }
+
+    await withBusy(this.busyCount, () =>
+      this._sdToast.try(
+        async () => {
+          const result = await this.submit!(this.data());
+          if (!result) return;
+
+          this._sdToast.success("저장되었습니다.");
+
+          this.close.emit(result);
+
+          await this.refresh();
+        },
+        (err) => this._getOrmDataEditToastErrorMessage(err),
+      ),
+    );
+  }
+
+  private _getOrmDataEditToastErrorMessage(err: unknown) {
+    const message = err instanceof Error ? err.message : String(err);
+    if (
+      message.includes("a parent row: a foreign key constraint") ||
+      message.includes("conflicted with the REFERENCE")
+    ) {
+      return "경고! 연결된 작업에 의한 처리 거부. 후속작업 확인 요망";
+    }
+    return message;
+  }
+}

package/src/features/data-view/{sd-data-detail.control.ts → sd-data-detail.ts}

@@ -3,30 +3,17 @@ import {
   ChangeDetectionStrategy,
   Component,
   contentChild,
-  Directive,
   effect,
-  inject,
-  output,
-  signal,
-  type Signal,
   TemplateRef,
   viewChild,
   ViewEncapsulation,
 } from "@angular/core";
-import { DateTime, obj } from "@simplysm/core-common";
-import { TXT_CHANGE_IGNORE_CONFIRM } from "../../core/commons";
 import { FormatPipe } from "../../core/pipes/format.pipe";
-import { SdSharedDataProvider } from "../../core/providers/sd-shared-data.provider";
 import { injectParent } from "../../core/utils/injectParent";
-import { setupCanDeactivate } from "../../core/utils/setups/setupCanDeactivate";
-import { useViewTypeSignal } from "../../core/utils/useViewTypeSignal";
-import { withBusy } from "../../core/utils/withBusy";
-import { SdButtonControl } from "../../ui/form/button/sd-button.control";
-import { SdAnchorControl } from "../../ui/form/button/sd-anchor.control";
-import { SdFormControl } from "../../ui/form/sd-form.control";
-import { type ISdModal } from "../../ui/overlay/modal/sd-modal.provider";
-import { SdToastProvider } from "../../core/providers/sd-toast.provider";
-import { SdBaseContainerControl } from "../base/sd-base-container.control";
+import { SdButton } from "../../ui/form/button/sd-button";
+import { SdAnchor } from "../../ui/form/button/sd-anchor";
+import { SdForm } from "../../ui/form/sd-form";
+import { SdBaseContainer } from "../base/sd-base-container";
 import { NgIcon } from "@ng-icons/core";
 import {
   tablerDeviceFloppy,
@@ -34,182 +21,11 @@ import {
   tablerRefresh,
   tablerRestore,
 } from "@ng-icons/tabler-icons";
+import { SdDataDetailBase } from "./sd-data-detail.base";
 
-//#region Interface
+export type { SdDataDetailDataInfo } from "./sd-data-detail.base";
 
-export interface ISdDataDetailDataInfo {
-  isNew: boolean;
-  isDeleted: boolean;
-  lastModifiedAt: DateTime | undefined;
-  lastModifiedBy: string | undefined;
-}
-
-//#endregion
-
-//#region AbsSdDataDetail
-
-@Directive()
-export abstract class AbsSdDataDetail<T extends object, R = boolean>
-  implements ISdModal<R>
-{
-  //-- abstract
-
-  abstract canUse: Signal<boolean>;
-  abstract canEdit: Signal<boolean>;
-  canDelete?: Signal<boolean>;
-
-  prepareRefreshEffect?(): void;
-
-  abstract load():
-    | Promise<{ data: T; info: ISdDataDetailDataInfo }>
-    | { data: T; info: ISdDataDetailDataInfo };
-
-  toggleDelete?(del: boolean): Promise<R | undefined> | R | undefined;
-
-  submit?(data: T): Promise<R | undefined> | R | undefined;
-
-  //-- implement
-
-  private readonly _sdToast = inject(SdToastProvider);
-  private readonly _sdSharedData = inject(SdSharedDataProvider);
-
-  viewType = useViewTypeSignal(() => this);
-
-  busyCount = signal(0);
-  busyMessage = signal<string | undefined>(undefined);
-  initialized = signal(false);
-  close = output<R>();
-  actionTplRef?: TemplateRef<any>;
-
-  data = signal<T>({} as T);
-
-  dataInfo = signal<ISdDataDetailDataInfo | undefined>(undefined);
-
-  private _dataSnapshot?: T;
-
-  constructor() {
-    effect(() => {
-      this.prepareRefreshEffect?.();
-
-      queueMicrotask(async () => {
-        if (!this.canUse()) {
-          this.initialized.set(true);
-          return;
-        }
-
-        await withBusy(this.busyCount, () =>
-          this._sdToast.try(async () => {
-            await this._sdSharedData.wait();
-            await this.refresh();
-          }),
-        );
-        this.initialized.set(true);
-      });
-    });
-
-    setupCanDeactivate(() => this.viewType() === "modal" || this.checkIgnoreChanges());
-  }
-
-  checkIgnoreChanges() {
-    return (
-      this._dataSnapshot == null ||
-      obj.equal(this.data(), this._dataSnapshot) ||
-      confirm(TXT_CHANGE_IGNORE_CONFIRM)
-    );
-  }
-
-  async doRefresh() {
-    if (this.busyCount() > 0) return;
-    if (!this.canUse()) return;
-    if (!this.checkIgnoreChanges()) return;
-
-    await withBusy(this.busyCount, () =>
-      this._sdToast.try(async () => {
-        await this.refresh();
-      }),
-    );
-  }
-
-  async refresh() {
-    const result = await this.load();
-    this.data.set(result.data);
-    this.dataInfo.set(result.info);
-    if (!result.info.isNew) {
-      this._dataSnapshot = obj.clone(result.data);
-    }
-  }
-
-  async doToggleDelete(del: boolean) {
-    if (this.busyCount() > 0) return;
-    if (!this.canEdit()) return;
-    if (this.canDelete && !this.canDelete()) return;
-    if (!this.toggleDelete) return;
-
-    await withBusy(this.busyCount, () =>
-      this._sdToast.try(
-        async () => {
-          const result = await this.toggleDelete!(del);
-          if (!result) return;
-
-          this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
-
-          this.close.emit(result);
-        },
-        (err) => this._getOrmDataEditToastErrorMessage(err),
-      ),
-    );
-  }
-
-  async doSubmit(opt?: { permCheck?: boolean; hideNoChangeMessage?: boolean }) {
-    if (this.busyCount() > 0) return;
-    if (opt?.permCheck && !this.canEdit()) return;
-    if (!this.submit) return;
-
-    const dataInfo = this.dataInfo();
-    if (dataInfo == null) return;
-
-    if (
-      !dataInfo.isNew &&
-      (this._dataSnapshot == null || obj.equal(this.data(), this._dataSnapshot))
-    ) {
-      if (!opt?.hideNoChangeMessage) {
-        this._sdToast.info("변경사항이 없습니다.");
-      }
-      return;
-    }
-
-    await withBusy(this.busyCount, () =>
-      this._sdToast.try(
-        async () => {
-          const result = await this.submit!(this.data());
-          if (!result) return;
-
-          this._sdToast.success("저장되었습니다.");
-
-          this.close.emit(result);
-
-          await this.refresh();
-        },
-        (err) => this._getOrmDataEditToastErrorMessage(err),
-      ),
-    );
-  }
-
-  private _getOrmDataEditToastErrorMessage(err: unknown) {
-    const message = err instanceof Error ? err.message : String(err);
-    if (
-      message.includes("a parent row: a foreign key constraint") ||
-      message.includes("conflicted with the REFERENCE")
-    ) {
-      return "경고! 연결된 작업에 의한 처리 거부. 후속작업 확인 요망";
-    }
-    return message;
-  }
-}
-
-//#endregion
-
-//#region SdDataDetailControl
+//#region SdDataDetail
 
 @Component({
   selector: "sd-data-detail",
@@ -217,12 +33,12 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    SdBaseContainerControl,
-    SdFormControl,
-    SdButtonControl,
+    SdBaseContainer,
+    SdForm,
+    SdButton,
     NgTemplateOutlet,
     FormatPipe,
-    SdAnchorControl,
+    SdAnchor,
     NgIcon,
   ],
   host: {
@@ -368,10 +184,10 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
     </sd-base-container>
   `,
 })
-export class SdDataDetailControl {
-  parent = injectParent<AbsSdDataDetail<any>>();
+export class SdDataDetail {
+  parent = injectParent<SdDataDetailBase<any>>();
 
-  formCtrl = viewChild<SdFormControl>("formCtrl");
+  formCtrl = viewChild<SdForm>("formCtrl");
 
   toolTplRef = contentChild("toolTpl", { read: TemplateRef });
   prevTplRef = contentChild("prevTpl", { read: TemplateRef });

package/src/features/data-view/sd-data-select-button.base.ts

@@ -0,0 +1,104 @@
+import {
+  booleanAttribute,
+  computed,
+  Directive,
+  effect,
+  inject,
+  input,
+  model,
+  signal,
+  type Signal,
+} from "@angular/core";
+import type { SelectModeValue } from "../../ui/form/select/sd-select";
+import {
+  SdModalProvider,
+  type SdModalOptions,
+} from "../../ui/overlay/modal/sd-modal.provider";
+import type {
+  SdSelectModal,
+  SdSelectModalInfo,
+} from "../../ui/form/button/sd-modal-select-button";
+import { setupInvalid } from "../../core/utils/setups/setupInvalid";
+
+@Directive()
+export abstract class SdDataSelectButtonBase<
+  TItem extends object,
+  TKey,
+  TMode extends keyof SelectModeValue<TKey> = keyof SelectModeValue<TKey>,
+> {
+  //-- abstract
+  abstract modal: Signal<SdSelectModalInfo<SdSelectModal<any>>>;
+  abstract load(keys: TKey[]): Promise<TItem[]> | TItem[];
+
+  //-- implement
+
+  private readonly _sdModal = inject(SdModalProvider);
+
+  value = model<SelectModeValue<TKey>[TMode]>();
+
+  disabled = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  selectMode = input<TMode>("single" as TMode);
+
+  isNoValue = computed(() => {
+    const v = this.value();
+    if (v == null) return true;
+    if (Array.isArray(v)) return v.length === 0;
+    return false;
+  });
+
+  selectedItems = signal<TItem[]>([]);
+
+  constructor() {
+    setupInvalid(() => (this.required() && this.value() == null ? "값을 입력하세요." : ""));
+
+    effect(() => {
+      const value = this.value();
+      const selectMode = this.selectMode();
+
+      queueMicrotask(async () => {
+        if (
+          selectMode === "multi" &&
+          Array.isArray(value) &&
+          value.filterExists().length > 0
+        ) {
+          this.selectedItems.set(await this.load(value.filterExists() as TKey[]));
+        } else if (selectMode === "single" && !Array.isArray(value) && value != null) {
+          this.selectedItems.set(await this.load([value as TKey]));
+        } else {
+          this.selectedItems.set([]);
+        }
+      });
+    });
+  }
+
+  async doShowModal(options?: SdModalOptions): Promise<void> {
+    const modal = this.modal();
+    const result = await this._sdModal.showAsync(
+      {
+        ...modal,
+        inputs: {
+          selectMode: this.selectMode(),
+          selectedItemKeys: (this.selectMode() === "multi"
+            ? ((this.value() as any[] | undefined) ?? [])
+            : [this.value()]
+          ).filterExists(),
+          ...modal.inputs,
+        },
+      },
+      options,
+    );
+
+    if (result) {
+      const newValue =
+        this.selectMode() === "multi" ? result.selectedItemKeys : result.selectedItemKeys[0];
+      this.value.set(newValue);
+    }
+  }
+
+  doInitialValue(): void {
+    this.value.set((this.selectMode() === "multi" ? [] : undefined) as any);
+  }
+}

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

@@ -0,0 +1,105 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import {
+  SdItemOfTemplate,
+  type SdItemOfTemplateContext,
+} from "../../core/directives/sd-item-of-template";
+import { NgTemplateOutlet } from "@angular/common";
+import { injectParent } from "../../core/utils/injectParent";
+import { SdAdditionalButton } from "../../ui/form/button/sd-additional-button";
+import { SdAnchor } from "../../ui/form/button/sd-anchor";
+import { SdButton } from "../../ui/form/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/features/data-view/{sd-data-sheet-column.directive.ts → sd-data-sheet-column.ts}

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