@simplysm/angular 14.0.30 → 14.0.33

package/src/core/toast/sd-toast.ts

@@ -0,0 +1,123 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { SdToastTheme } from "./sd-toast.provider";
+
+const POLITE_THEMES: ReadonlySet<string> = new Set(["info", "success"]);
+const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
+
+@Component({
+  selector: "sd-toast",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  host: {
+    "[attr.data-sd-open]": "open() || undefined",
+    "[attr.data-sd-theme]": "theme()",
+    "[attr.role]": "ariaRole()",
+    "[attr.aria-live]": "ariaLive()",
+  },
+  template: `
+    @if (message() !== undefined) {
+      <div class="_message">{{ message() }}</div>
+    }
+    <ng-content />
+    @if (useProgress()) {
+      <div class="_progress">
+        <div class="_progress-bar" [style.width.%]="progress()"></div>
+      </div>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/variables";
+      @use "../../../scss/commons/mixins";
+      @use "sass:map";
+
+      sd-toast {
+        display: block;
+        position: relative;
+        max-width: 32.5rem;
+        width: 100%;
+        margin: var(--gap-sm);
+        padding: var(--gap-default) var(--gap-lg);
+        border-radius: var(--border-radius-default);
+        color: var(--text-trans-rev-default);
+        pointer-events: auto;
+        transform: translateY(-100%);
+        opacity: 0;
+        transition:
+          transform var(--animation-duration) ease,
+          opacity var(--animation-duration) ease;
+
+        @include mixins.elevation(12);
+
+        &[data-sd-open] {
+          transform: translateY(0);
+          opacity: 1;
+        }
+
+        @each $theme-name, $theme-map in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$theme-name}"] {
+            background: map.get($theme-map, default);
+          }
+        }
+
+        > ._message {
+          word-break: break-all;
+          white-space: pre-wrap;
+        }
+
+        > ._progress {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 0.25rem;
+          background: var(--trans-lighter);
+          border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
+          overflow: hidden;
+
+          > ._progress-bar {
+            height: 100%;
+            background: var(--trans-default);
+            transition: width 0.3s ease;
+          }
+        }
+
+        @media all and (max-width: variables.$breakpoint-mobile) {
+          max-width: none;
+          margin: var(--gap-xs);
+          border-radius: 0;
+        }
+      }
+    `,
+  ],
+})
+export class SdToast {
+  open = model(false);
+  useProgress = input(false, { transform: booleanAttribute });
+  theme = input<SdToastTheme>("info");
+  progress = model(0);
+  message = model<string | undefined>(undefined);
+
+  ariaRole = computed(() => {
+    const t = this.theme();
+    if (POLITE_THEMES.has(t)) return "status";
+    if (ASSERTIVE_THEMES.has(t)) return "alert";
+    return undefined;
+  });
+
+  ariaLive = computed(() => {
+    const t = this.theme();
+    if (POLITE_THEMES.has(t)) return "polite";
+    if (ASSERTIVE_THEMES.has(t)) return "assertive";
+    return undefined;
+  });
+}

package/src/core/validation/sd-invalid.ts

@@ -0,0 +1,14 @@
+import { Directive, input } from "@angular/core";
+import { setupInvalid } from "./setupInvalid";
+
+@Directive({
+  selector: "[sdInvalid]",
+  standalone: true,
+})
+export class SdInvalid {
+  invalidMessage = input.required<string>({ alias: "sdInvalid" });
+
+  constructor() {
+    setupInvalid(() => this.invalidMessage());
+  }
+}

package/src/data/data-detail/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/shared-data/sd-shared-data.provider";
+import { setupCanDeactivate } from "../../core/routing/setupCanDeactivate";
+import { injectViewTypeSignal } from "../../core/routing/injectViewTypeSignal";
+import { withBusy } from "../../core/withBusy";
+import { type SdModalContentDef } from "../../core/modal/sd-modal.provider";
+import { SdToastProvider } from "../../core/toast/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/data/data-detail/sd-data-detail.ts

@@ -0,0 +1,233 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  effect,
+  TemplateRef,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { FormatPipe } from "../../core/format.pipe";
+import { injectParent } from "../../core/injectParent";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdAnchor } from "../../controls/button/sd-anchor";
+import { SdForm } from "../../controls/form/sd-form";
+import { SdBaseContainer } from "../../layout/base-container/sd-base-container";
+import { NgIcon } from "@ng-icons/core";
+import {
+  tablerDeviceFloppy,
+  tablerEraser,
+  tablerRefresh,
+  tablerRestore,
+} from "@ng-icons/tabler-icons";
+import { SdDataDetailBase } from "./sd-data-detail.base";
+
+export type { SdDataDetailDataInfo } from "./sd-data-detail.base";
+
+//#region SdDataDetail
+
+@Component({
+  selector: "sd-data-detail",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdBaseContainer,
+    SdForm,
+    SdButton,
+    NgTemplateOutlet,
+    FormatPipe,
+    SdAnchor,
+    NgIcon,
+  ],
+  host: {
+    "(sdRefreshCommand)": "onRefreshButtonClick()",
+    "(sdSaveCommand)": "onSubmitButtonClick()",
+  },
+  template: `
+    <sd-base-container
+      [busy]="parent.busyCount() > 0"
+      [busyMessage]="parent.busyMessage()"
+      [viewType]="parent.viewType()"
+      [initialized]="parent.initialized()"
+      [restricted]="!parent.canUse()"
+    >
+      <ng-template #pageTopbarTpl>
+        @if (parent.canEdit() && parent.submit) {
+          <sd-button [theme]="'link-primary'" (click)="onSubmitButtonClick()">
+            <ng-icon [svg]="icons.tablerDeviceFloppy" />
+            저장
+            <small>(CTRL+S)</small>
+          </sd-button>
+        }
+        <sd-button [theme]="'link-info'" (click)="onRefreshButtonClick()">
+          <ng-icon [svg]="icons.tablerRefresh" />
+          새로고침
+          <small>(CTRL+ALT+L)</small>
+        </sd-button>
+      </ng-template>
+
+      <ng-template #contentTpl>
+        <div class="flex-column fill">
+          @if ((parent.viewType() === "control" && parent.canEdit()) || toolTplRef()) {
+            <div class="p-default flex-row gap-default bdb bdb-theme-gray-lightest">
+              @if (parent.viewType() === "control" && parent.canEdit()) {
+                @if (parent.submit) {
+                  <sd-button [theme]="'primary'" (click)="onSubmitButtonClick()">
+                    <ng-icon [svg]="icons.tablerDeviceFloppy" />
+                    저장
+                    <small>(CTRL+S)</small>
+                  </sd-button>
+                  <sd-button [theme]="'info'" (click)="onRefreshButtonClick()">
+                    <ng-icon [svg]="icons.tablerRefresh" />
+                    새로고침
+                    <small>(CTRL+ALT+L)</small>
+                  </sd-button>
+                }
+                @if (
+                  !parent.dataInfo()?.isNew &&
+                  parent.toggleDelete &&
+                  (!parent.canDelete || parent.canDelete())
+                ) {
+                  @if (parent.dataInfo()?.isDeleted) {
+                    <sd-button [theme]="'warning'" (click)="onRestoreButtonClick()">
+                      <ng-icon [svg]="icons.tablerRestore" />
+                      복구
+                    </sd-button>
+                  } @else {
+                    <sd-button [theme]="'danger'" (click)="onDeleteButtonClick()">
+                      <ng-icon [svg]="icons.tablerEraser" />
+                      삭제
+                    </sd-button>
+                  }
+                }
+              }
+
+              <ng-template [ngTemplateOutlet]="toolTplRef() ?? null" />
+            </div>
+          }
+
+          @if (prevTplRef()) {
+            <div>
+              <ng-template [ngTemplateOutlet]="prevTplRef() ?? null" />
+            </div>
+          }
+
+          <div class="flex-fill">
+            <sd-form #formCtrl (formSubmit)="onSubmit()">
+              <ng-template [ngTemplateOutlet]="contentTplRef()" />
+            </sd-form>
+          </div>
+
+          @if (parent.dataInfo()?.lastModifiedAt || parent.dataInfo()?.lastModifiedBy) {
+            <div
+              class="p-sm-default"
+              [class.bg-theme-gray-lightest]="parent.viewType() === 'modal'"
+            >
+              최종수정:
+              @if (parent.dataInfo()?.lastModifiedAt) {
+                {{ parent.dataInfo()!.lastModifiedAt | format: "yyyy-MM-dd HH:mm" }}
+              }
+              @if (parent.dataInfo()?.lastModifiedBy) {
+                ({{ parent.dataInfo()?.lastModifiedBy }})
+              }
+            </div>
+          }
+
+          @if (nextTplRef()) {
+            <div>
+              <ng-template [ngTemplateOutlet]="nextTplRef() ?? null" />
+            </div>
+          }
+        </div>
+      </ng-template>
+
+      @if (parent.canEdit()) {
+        <ng-template #modalBottomTpl>
+          <div class="p-sm-default flex-row gap-sm">
+            @if (
+              !parent.dataInfo()?.isNew &&
+              parent.toggleDelete &&
+              (!parent.canDelete || parent.canDelete())
+            ) {
+              @if (parent.dataInfo()?.isDeleted) {
+                <sd-button [size]="'sm'" [theme]="'warning'" (click)="onRestoreButtonClick()">
+                  복구
+                </sd-button>
+              } @else {
+                <sd-button [size]="'sm'" [theme]="'danger'" (click)="onDeleteButtonClick()">
+                  삭제
+                </sd-button>
+              }
+            }
+
+            <div class="flex-fill flex-row gap-sm main-align-end">
+              <sd-button [size]="'sm'" [theme]="'primary'" (click)="onSubmitButtonClick()">
+                확인
+              </sd-button>
+            </div>
+          </div>
+        </ng-template>
+      }
+
+      <ng-template #modalActionTpl>
+        <sd-anchor
+          [theme]="'gray'"
+          class="p-sm-default"
+          (click)="onRefreshButtonClick()"
+          title="새로고침(CTRL+ALT+L)"
+        >
+          <ng-icon [svg]="icons.tablerRefresh" />
+        </sd-anchor>
+      </ng-template>
+    </sd-base-container>
+  `,
+})
+export class SdDataDetail {
+  parent = injectParent<SdDataDetailBase<any>>();
+
+  formCtrl = viewChild<SdForm>("formCtrl");
+
+  toolTplRef = contentChild("toolTpl", { read: TemplateRef });
+  prevTplRef = contentChild("prevTpl", { read: TemplateRef });
+  contentTplRef = contentChild.required("contentTpl", { read: TemplateRef });
+  nextTplRef = contentChild("nextTpl", { read: TemplateRef });
+
+  modalActionTplRef = viewChild("modalActionTpl", { read: TemplateRef });
+
+  constructor() {
+    effect(() => {
+      this.parent.actionTplRef = this.modalActionTplRef();
+    });
+  }
+
+  async onRefreshButtonClick() {
+    await this.parent.doRefresh();
+  }
+
+  async onDeleteButtonClick() {
+    await this.parent.doToggleDelete(true);
+  }
+
+  async onRestoreButtonClick() {
+    await this.parent.doToggleDelete(false);
+  }
+
+  onSubmitButtonClick() {
+    this.formCtrl()?.requestSubmit();
+  }
+
+  async onSubmit() {
+    await this.parent.doSubmit({ permCheck: true });
+  }
+
+  protected readonly icons = {
+    tablerDeviceFloppy,
+    tablerRefresh,
+    tablerRestore,
+    tablerEraser,
+  };
+}
+
+//#endregion

package/src/data/data-select-button/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 "../../controls/select/sd-select";
+import {
+  SdModalProvider,
+  type SdModalOptions,
+} from "../../core/modal/sd-modal.provider";
+import type {
+  SdSelectModal,
+  SdSelectModalInfo,
+} from "../../controls/button/sd-modal-select-button";
+import { setupInvalid } from "../../core/validation/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);
+  }
+}