@simplysm/angular 14.0.7 → 14.0.9

package/src/features/address/sd-address-search.modal.ts

@@ -0,0 +1,119 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  output,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { OnInit } from "@angular/core";
+import { SdBusyContainerControl } from "../../ui/overlay/busy/sd-busy-container.control";
+import type { ISdModal } from "../../ui/overlay/modal/sd-modal.provider";
+
+declare const daum: {
+  postcode: {
+    load(callback: () => void): void;
+  };
+  Postcode: new (options: {
+    oncomplete: (data: IDaumPostcodeData) => void;
+    onresize: (size: { height: number }) => void;
+    width: string;
+    height: string;
+  }) => { embed(el: HTMLElement, options: { autoClose: boolean }): void };
+};
+
+interface IDaumPostcodeData {
+  zonecode: string;
+  roadAddress: string;
+  jibunAddress: string;
+  userSelectedType: "R" | "J";
+  bname: string;
+  buildingName: string;
+  apartment: "Y" | "N";
+}
+
+export interface IAddress {
+  postNumber: string | undefined;
+  address: string | undefined;
+  buildingName: string | undefined;
+}
+
+@Component({
+  selector: "sd-address-search-modal",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdBusyContainerControl],
+  template: `
+    <sd-busy-container [busy]="!initialized()">
+      <div #content style="min-height: 100px;"></div>
+    </sd-busy-container>
+  `,
+})
+export class SdAddressSearchModal implements ISdModal<IAddress>, OnInit {
+  contentElRef = viewChild.required<"content", ElementRef<HTMLElement>>("content", {
+    read: ElementRef,
+  });
+
+  close = output<IAddress>();
+
+  initialized = signal(false);
+
+  ngOnInit() {
+    void this.initAsync();
+  }
+
+  private async initAsync() {
+    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 => {
+          daum.postcode.load(() => {
+            resolve();
+          });
+        };
+        document.head.appendChild(scriptEl);
+      });
+    }
+
+    const contentEl = this.contentElRef().nativeElement;
+
+    new daum.Postcode({
+      oncomplete: (data: IDaumPostcodeData): 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 + ")";
+          }
+        }
+
+        this.close.emit({
+          postNumber: data.zonecode,
+          address: addr + extraAddr,
+          buildingName: data.buildingName,
+        });
+      },
+      onresize: (size: { height: number }): void => {
+        contentEl.style.height = size.height + "px";
+      },
+      width: "100%",
+      height: "100%",
+    }).embed(contentEl, { autoClose: false });
+
+    this.initialized.set(true);
+  }
+}

package/src/features/base/sd-base-container.control.ts

@@ -0,0 +1,113 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  inject,
+  input,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdBusyContainerControl } from "../../ui/overlay/busy/sd-busy-container.control";
+import { SdTopbarContainerControl } from "../../ui/navigation/topbar/sd-topbar-container.control";
+import { SdTopbarControl } from "../../ui/navigation/topbar/sd-topbar.control";
+import { SdAppStructureProvider } from "../../core/providers/sd-app-structure.provider";
+import { SdActivatedModalProvider } from "../../ui/overlay/modal/sd-modal.provider";
+import { useCurrentPageCodeSignal } from "../../core/utils/useCurrentPageCodeSignal";
+import { useFullPageCodeSignal } from "../../core/utils/useFullPageCodeSignal";
+import {
+  useViewTypeSignal,
+  type TSdViewType,
+} from "../../core/utils/useViewTypeSignal";
+import { injectParent } from "../../core/utils/injectParent";
+import { NgIcon } from "@ng-icons/core";
+import { tablerAlertTriangle } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-base-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdBusyContainerControl,
+    SdTopbarContainerControl,
+    SdTopbarControl,
+    NgTemplateOutlet,
+    NgIcon,
+  ],
+  template: `
+    <sd-busy-container [busy]="busy()" [message]="busyMessage()">
+      @if (initialized() === undefined || initialized()) {
+        @if (restricted()) {
+          <div class="fill tx-theme-gray-light p-xxl tx-center">
+            <br />
+            <ng-icon [svg]="tablerAlertTriangle" [size]="'5em'" />
+            <br />
+            <br />
+            '{{ modalOrPageTitle() }}'에 대한 사용권한이 없습니다. 시스템 관리자에게 문의하세요.
+          </div>
+        } @else if (currViewType() === "page") {
+          <sd-topbar-container>
+            <sd-topbar>
+              <h4>{{ modalOrPageTitle() }}</h4>
+
+              <ng-template [ngTemplateOutlet]="pageTopbarTplRef() ?? null" />
+            </sd-topbar>
+
+            <div class="fill">
+              <ng-template [ngTemplateOutlet]="contentTplRef()" />
+            </div>
+          </sd-topbar-container>
+        } @else if (currViewType() === "modal") {
+          <div class="flex-column fill">
+            <div class="flex-fill">
+              <ng-template [ngTemplateOutlet]="contentTplRef()" />
+            </div>
+            @if (modalBottomTplRef()) {
+              <div class="bdt bdt-theme-gray-lightest">
+                <ng-template [ngTemplateOutlet]="modalBottomTplRef() ?? null" />
+              </div>
+            }
+          </div>
+        } @else {
+          <ng-template [ngTemplateOutlet]="contentTplRef()" />
+        }
+      }
+    </sd-busy-container>
+  `,
+})
+export class SdBaseContainerControl {
+  private readonly _sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
+  private readonly _sdAppStructure = inject(SdAppStructureProvider);
+
+  private readonly _parent = injectParent();
+
+  private readonly _fullPageCode = useFullPageCodeSignal();
+  private readonly _currPageCode = useCurrentPageCodeSignal();
+
+  contentTplRef = contentChild.required("contentTpl", { read: TemplateRef });
+
+  pageTopbarTplRef = contentChild("pageTopbarTpl", { read: TemplateRef });
+  modalBottomTplRef = contentChild("modalBottomTpl", { read: TemplateRef });
+
+  private readonly _parentViewType = useViewTypeSignal(() => this._parent);
+  viewType = input<TSdViewType>();
+  currViewType = computed(() => this.viewType() ?? this._parentViewType());
+
+  header = input<string>();
+  modalOrPageTitle = computed(
+    () =>
+      this.header() ??
+      this._sdActivatedModal?.modalComponent()?.title() ??
+      this._sdAppStructure.getTitleByFullCode(this._currPageCode?.() ?? this._fullPageCode()),
+  );
+
+  initialized = input<boolean | undefined>(undefined);
+  restricted = input(false, { transform: booleanAttribute });
+  busy = input(false, { transform: booleanAttribute });
+  busyMessage = input<string>();
+
+  protected readonly tablerAlertTriangle = tablerAlertTriangle;
+}

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

@@ -0,0 +1,394 @@
+import { NgTemplateOutlet } from "@angular/common";
+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 { 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 "../../ui/overlay/toast/sd-toast.provider";
+import { SdBaseContainerControl } from "../base/sd-base-container.control";
+import { NgIcon } from "@ng-icons/core";
+import {
+  tablerDeviceFloppy,
+  tablerEraser,
+  tablerRefresh,
+  tablerRestore,
+} from "@ng-icons/tabler-icons";
+
+//#region Interface
+
+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;
+        }
+
+        this.busyCount.update((v) => v + 1);
+        await this._sdToast.try(async () => {
+          await this._sdSharedData.wait();
+          await this.refresh();
+        });
+        this.busyCount.update((v) => v - 1);
+        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;
+
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      await this.refresh();
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  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;
+
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      const result = await this.toggleDelete!(del);
+      if (!result) return;
+
+      this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
+
+      this.close.emit(result);
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  async doSubmit(opt?: { permCheck?: boolean; hideNoChangeMessage?: boolean }) {
+    if (this.busyCount() > 0) return;
+    if (opt?.permCheck && !this.canEdit()) return;
+    if (!this.submit) return;
+
+    if (
+      !this.dataInfo()?.isNew &&
+      (this._dataSnapshot == null || obj.equal(this.data(), this._dataSnapshot))
+    ) {
+      if (!opt?.hideNoChangeMessage) {
+        this._sdToast.info("변경사항이 없습니다.");
+      }
+      return;
+    }
+
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      const result = await this.submit!(this.data());
+      if (!result) return;
+
+      this._sdToast.success("저장되었습니다.");
+
+      this.close.emit(result);
+
+      await this.refresh();
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+}
+
+//#endregion
+
+//#region SdDataDetailControl
+
+@Component({
+  selector: "sd-data-detail",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdBaseContainerControl,
+    SdFormControl,
+    SdButtonControl,
+    NgTemplateOutlet,
+    FormatPipe,
+    SdAnchorControl,
+    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]="tablerDeviceFloppy" />
+            저장
+            <small>(CTRL+S)</small>
+          </sd-button>
+        }
+        <sd-button [theme]="'link-info'" (click)="onRefreshButtonClick()">
+          <ng-icon [svg]="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]="tablerDeviceFloppy" />
+                    저장
+                    <small>(CTRL+S)</small>
+                  </sd-button>
+                  <sd-button [theme]="'info'" (click)="onRefreshButtonClick()">
+                    <ng-icon [svg]="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]="tablerRestore" />
+                      복구
+                    </sd-button>
+                  } @else {
+                    <sd-button [theme]="'danger'" (click)="onDeleteButtonClick()">
+                      <ng-icon [svg]="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 (submit)="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]="tablerRefresh" />
+          </sd-anchor>
+        </ng-template>
+      }
+    </sd-base-container>
+  `,
+})
+export class SdDataDetailControl {
+  parent = injectParent<AbsSdDataDetail<any>>();
+
+  formCtrl = viewChild<SdFormControl>("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 tablerDeviceFloppy = tablerDeviceFloppy;
+  protected readonly tablerRefresh = tablerRefresh;
+  protected readonly tablerRestore = tablerRestore;
+  protected readonly tablerEraser = tablerEraser;
+}
+
+//#endregion