@simplysm/angular 1.0.138 → 14.0.4

package/src/core/providers/sd-print.provider.ts

@@ -0,0 +1,189 @@
+import {
+  ApplicationRef,
+  createComponent,
+  inject,
+  Injectable,
+  inputBinding,
+  type Signal,
+  type Type,
+} from "@angular/core";
+import type { TDirectiveInputSignals } from "../utils/TDirectiveInputSignals";
+import { SdBusyProvider } from "../../ui/overlay/busy/sd-busy.provider";
+import { wait } from "@simplysm/core-common";
+import { jsPDF } from "jspdf";
+import * as htmlToImage from "html-to-image";
+
+export interface ISdPrint {
+  initialized: Signal<boolean>;
+}
+
+export interface ISdPrintInput<T, X extends keyof any = ""> {
+  type: Type<T>;
+  inputs: Omit<TDirectiveInputSignals<T>, X>;
+}
+
+@Injectable({ providedIn: "root" })
+export class SdPrintProvider {
+  private readonly _appRef = inject(ApplicationRef);
+  private readonly _sdBusy = inject(SdBusyProvider);
+
+  async printAsync<T extends ISdPrint>(
+    template: ISdPrintInput<T>,
+    options?: {
+      size?: string;
+      margin?: string;
+    },
+  ): Promise<void> {
+    this._sdBusy.globalBusyCount.update((v) => v + 1);
+    try {
+      const compRef = createComponent(template.type, {
+        environmentInjector: this._appRef.injector,
+        bindings: [
+          ...Object.keys(template.inputs).map((inputKey) =>
+            inputBinding(inputKey, () => (template.inputs as Record<string, unknown>)[inputKey]),
+          ),
+        ],
+      });
+
+      const compEl = compRef.location.nativeElement as HTMLElement;
+      compEl.classList.add("_sd-print-template");
+
+      const styleEl = document.createElement("style");
+      styleEl.innerHTML = `
+  @page {
+      size: ${options?.size ?? "A4 auto"};
+      margin: ${options?.margin ?? "0"};
+  }
+  body > ._sd-print-template { display: none; }
+  @media print
+  {
+      html, body { -webkit-print-color-adjust: exact; background: white; }
+      body > * { display: none !important; }
+      body > ._sd-print-template { display: block !important; }
+  }`;
+
+      this._appRef.attachView(compRef.hostView);
+      document.body.appendChild(compEl);
+      document.head.appendChild(styleEl);
+
+      try {
+        this._appRef.tick();
+        await wait.until(() => compRef.instance.initialized());
+        await this._waitForAllImagesLoadedAsync(compEl);
+
+        window.print();
+      } finally {
+        styleEl.remove();
+        compEl.remove();
+        compRef.destroy();
+      }
+    } finally {
+      this._sdBusy.globalBusyCount.update((v) => v - 1);
+    }
+  }
+
+  async getPdfBufferAsync<T extends ISdPrint>(
+    template: ISdPrintInput<T>,
+    options?: {
+      orientation?: "portrait" | "landscape";
+      pageSize?: string;
+    },
+  ): Promise<Uint8Array> {
+    this._sdBusy.globalBusyCount.update((v) => v + 1);
+    try {
+      const compRef = createComponent(template.type, {
+        environmentInjector: this._appRef.injector,
+        bindings: [
+          ...Object.keys(template.inputs).map((inputKey) =>
+            inputBinding(inputKey, () => (template.inputs as Record<string, unknown>)[inputKey]),
+          ),
+        ],
+      });
+
+      const compEl = compRef.location.nativeElement as HTMLElement;
+      compEl.classList.add("_sd-print-template");
+
+      const styleEl = document.createElement("style");
+      styleEl.innerHTML = `html, body { overflow: hidden }`;
+
+      this._appRef.attachView(compRef.hostView);
+      document.body.appendChild(compEl);
+      document.head.appendChild(styleEl);
+
+      const headStylesBefore = new Set(document.head.querySelectorAll("style"));
+
+      try {
+        this._appRef.tick();
+        await wait.until(() => compRef.instance.initialized());
+        await this._waitForAllImagesLoadedAsync(compEl);
+
+        const pageSize = options?.pageSize ?? "a4";
+        const orientation = options?.orientation ?? "p";
+        const doc = new jsPDF(orientation, "pt", pageSize);
+        const pageWidth = doc.internal.pageSize.getWidth();
+        doc.deletePage(1);
+
+        let els = Array.from(compEl.querySelectorAll<HTMLElement>(".page"));
+        if (els.length === 0) {
+          els = [compEl];
+        }
+
+        for (const el of els) {
+          el.style.width = pageWidth + "pt";
+
+          const canvas = await htmlToImage.toCanvas(el, {
+            backgroundColor: "white",
+            pixelRatio: 4,
+          });
+
+          const imgWidth = pageWidth;
+          const imgHeight = canvas.height * (pageWidth / canvas.width);
+
+          doc.addPage(pageSize, orientation).addImage({
+            imageData: canvas,
+            x: 0,
+            y: 0,
+            width: imgWidth,
+            height: imgHeight,
+          });
+        }
+
+        const arrayBuffer = doc.output("arraybuffer");
+        return new Uint8Array(arrayBuffer);
+      } finally {
+        styleEl.remove();
+        for (const s of document.head.querySelectorAll("style")) {
+          if (!headStylesBefore.has(s)) {
+            s.remove();
+          }
+        }
+        compEl.remove();
+        compRef.destroy();
+      }
+    } finally {
+      this._sdBusy.globalBusyCount.update((v) => v - 1);
+    }
+  }
+
+  private async _waitForAllImagesLoadedAsync(container: HTMLElement): Promise<void> {
+    const imgs = Array.from(container.querySelectorAll("img"));
+
+    await Promise.all(
+      imgs.map((img) => {
+        return new Promise<void>((resolve) => {
+          if (img.complete && img.naturalWidth !== 0) {
+            resolve();
+          } else {
+            const onDone = () => {
+              img.removeEventListener("load", onDone);
+              img.removeEventListener("error", onDone);
+              resolve();
+            };
+            img.addEventListener("load", onDone);
+            img.addEventListener("error", onDone);
+          }
+        });
+      }),
+    );
+  }
+}

package/src/core/providers/sd-service-client-factory.provider.ts

@@ -0,0 +1,98 @@
+import { DestroyRef, inject, Injectable, type WritableSignal } from "@angular/core";
+import type { ServiceConnectionOptions, ServiceProgressState } from "@simplysm/service-client";
+import { createServiceClient, ServiceClient } from "@simplysm/service-client";
+import { SdAngularConfigProvider } from "./sd-angular-config.provider";
+import { SdToastProvider } from "../../ui/overlay/toast/sd-toast.provider";
+
+@Injectable({ providedIn: "root" })
+export class SdServiceClientFactoryProvider {
+  private readonly _toastProvider = inject(SdToastProvider);
+  private readonly _configProvider = inject(SdAngularConfigProvider);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  private readonly _clientMap = new Map<string, ServiceClient>();
+  private readonly _closedKeys = new Set<string>();
+  private readonly _progressMap = new Map<string, WritableSignal<number>>();
+
+  constructor() {
+    this._destroyRef.onDestroy(() => {
+      for (const client of this._clientMap.values()) {
+        void client.close();
+      }
+      this._clientMap.clear();
+    });
+  }
+
+  async connectAsync(key: string, options?: Partial<ServiceConnectionOptions>): Promise<void> {
+    if (this._closedKeys.has(key)) {
+      throw new Error("이미 연결이 끊긴 클라이언트");
+    }
+    if (this._clientMap.has(key)) {
+      throw new Error("이미 연결된 클라이언트");
+    }
+
+    const ssl = location.protocol.startsWith("https");
+    const defaultOptions: ServiceConnectionOptions = {
+      host: location.hostname,
+      port: location.port !== "" ? Number(location.port) : ssl ? 443 : 80,
+      ssl,
+    };
+
+    const mergedOptions: ServiceConnectionOptions = {
+      ...defaultOptions,
+      ...options,
+    };
+
+    const client = createServiceClient(this._configProvider.clientName, mergedOptions);
+
+    client.on("request-progress", (state: ServiceProgressState) => {
+      this._handleProgress("요청을 전송하는 중입니다.", state);
+    });
+
+    client.on("response-progress", (state: ServiceProgressState) => {
+      this._handleProgress("응답을 전송받는 중입니다.", state);
+    });
+
+    await client.connect();
+    this._clientMap.set(key, client);
+  }
+
+  async closeAsync(key: string): Promise<void> {
+    const client = this._clientMap.get(key);
+    if (client == null) {
+      throw new Error("연결하지 않은 클라이언트 키");
+    }
+
+    await client.close();
+    this._clientMap.delete(key);
+    this._closedKeys.add(key);
+  }
+
+  get(key: string): ServiceClient {
+    const client = this._clientMap.get(key);
+    if (client == null) {
+      if (this._closedKeys.has(key)) {
+        throw new Error("이미 연결이 끊긴 클라이언트");
+      }
+      throw new Error("연결하지 않은 클라이언트 키");
+    }
+    return client;
+  }
+
+  private _handleProgress(message: string, state: ServiceProgressState): void {
+    const { uuid, totalSize, completedSize } = state;
+    const progress = totalSize === 0 ? 0 : Math.round((completedSize / totalSize) * 100);
+
+    let progressSignal = this._progressMap.get(uuid);
+    if (progressSignal == null) {
+      progressSignal = this._toastProvider.info(message, true);
+      this._progressMap.set(uuid, progressSignal);
+    }
+
+    progressSignal.set(progress);
+
+    if (completedSize === totalSize) {
+      this._progressMap.delete(uuid);
+    }
+  }
+}

package/src/core/providers/sd-shared-data.provider.ts

@@ -0,0 +1,179 @@
+import { computed, ErrorHandler, inject, Injectable, signal, type Signal, type WritableSignal } from "@angular/core";
+import { defineEvent } from "@simplysm/service-common";
+import { obj, wait as waitUtil } from "@simplysm/core-common";
+import { SdServiceClientFactoryProvider } from "./sd-service-client-factory.provider";
+import "@simplysm/core-common";
+
+export interface ISharedDataBase<TKey extends string | number> {
+  __valueKey: TKey;
+}
+
+export interface ISharedDataInfo<T extends ISharedDataBase<string | number>> {
+  serviceKey: string;
+  getter: (changeKeys?: (string | number)[]) => Promise<T[]>;
+  filter?: unknown;
+  orderBy?: (a: T, b: T) => number;
+}
+
+export interface SharedDataHandle<T extends ISharedDataBase<string | number>> {
+  items: Signal<T[]>;
+  get(key: T["__valueKey"] | undefined): T | undefined;
+}
+
+export const SdSharedDataChangeEvent = defineEvent<
+  { name: string; filter: unknown },
+  (string | number)[] | undefined
+>("SdSharedDataChange");
+
+interface ISharedDataEntry<T extends ISharedDataBase<string | number>> {
+  info: ISharedDataInfo<T>;
+  itemsSignal: WritableSignal<T[]>;
+  handle: SharedDataHandle<T>;
+  listenerKey?: string;
+  needsReload: boolean;
+}
+
+@Injectable()
+export abstract class SdSharedDataProvider<T extends Record<string, ISharedDataBase<string | number>>> {
+  private readonly _clientFactory = inject(SdServiceClientFactoryProvider);
+  private readonly _errorHandler = inject(ErrorHandler);
+
+  readonly loadingCount: WritableSignal<number> = signal(0);
+
+  private readonly _entries = new Map<string, ISharedDataEntry<any>>();
+
+  abstract initialize(): void;
+
+  register<K extends string & keyof T>(name: K, info: ISharedDataInfo<T[K]>): void {
+    const existing = this._entries.get(name as string);
+    if (existing != null) {
+      // 기존 리스너 키 초기화
+      if (existing.listenerKey != null) {
+        const client = this._clientFactory.get(existing.info.serviceKey);
+        void client.removeListener(existing.listenerKey);
+        existing.listenerKey = undefined;
+      }
+      existing.info = info;
+      existing.needsReload = true;
+    } else {
+      const itemsSignal = signal<T[K][]>([]);
+      const itemsMapComputed = computed(() =>
+        itemsSignal().toMap((i) => i.__valueKey),
+      );
+
+      const handle: SharedDataHandle<T[K]> = {
+        items: itemsSignal.asReadonly(),
+        get: (key: T[K]["__valueKey"] | undefined) => {
+          if (key == null) return undefined;
+          return itemsMapComputed().get(key);
+        },
+      };
+
+      this._entries.set(name as string, {
+        info,
+        itemsSignal,
+        handle,
+        needsReload: true,
+      });
+    }
+  }
+
+  getHandle<K extends string & keyof T>(name: K): SharedDataHandle<T[K]> {
+    const entry = this._entries.get(name as string);
+    if (entry == null) {
+      throw new Error(`등록되지 않은 공유 데이터: ${name as string}`);
+    }
+
+    if (entry.needsReload) {
+      entry.needsReload = false;
+      this._loadAndListen(name as string, entry);
+    }
+
+    return entry.handle;
+  }
+
+  async emitAsync<K extends string & keyof T>(
+    name: K,
+    changeKeys?: (string | number)[],
+  ): Promise<void> {
+    const entry = this._entries.get(name as string);
+    if (entry == null) {
+      throw new Error(`등록되지 않은 공유 데이터: ${name as string}`);
+    }
+
+    const client = this._clientFactory.get(entry.info.serviceKey);
+    await client.emitEvent(
+      SdSharedDataChangeEvent,
+      (item) => item.name === (name as string) && obj.equal(item.filter, entry.info.filter),
+      changeKeys,
+    );
+  }
+
+  async wait(): Promise<void> {
+    await waitUtil.until(() => this.loadingCount() <= 0);
+  }
+
+  private _loadAndListen(name: string, entry: ISharedDataEntry<any>): void {
+    this.loadingCount.update((v) => v + 1);
+
+    // 비동기 로드
+    void entry.info
+      .getter()
+      .then(async (data: any[]) => {
+        entry.itemsSignal.set(data);
+
+        // 이벤트 리스너 등록
+        if (entry.listenerKey == null) {
+          const client = this._clientFactory.get(entry.info.serviceKey);
+          entry.listenerKey = await client.addListener(
+            SdSharedDataChangeEvent,
+            { name, filter: entry.info.filter },
+            async (changeKeys) => {
+              await this._onEvent(name, entry, changeKeys);
+            },
+          );
+        }
+      })
+      .catch((err) => {
+        this._errorHandler.handleError(err);
+      })
+      .finally(() => {
+        this.loadingCount.update((v) => v - 1);
+      });
+  }
+
+  private async _onEvent(
+    name: string,
+    entry: ISharedDataEntry<any>,
+    changeKeys: (string | number)[] | undefined,
+  ): Promise<void> {
+    this.loadingCount.update((v) => v + 1);
+
+    try {
+      if (changeKeys == null) {
+        // 전체 리로드
+        const data = await entry.info.getter();
+        entry.itemsSignal.set(data);
+      } else {
+        // 부분 업데이트
+        const newItems = await entry.info.getter(changeKeys);
+        const currentItems = entry.itemsSignal();
+
+        // 변경된 키를 제거하고 새 항목 추가
+        const filtered = currentItems.filter(
+          (item: any) => !changeKeys.includes(item.__valueKey),
+        );
+        const merged = [...filtered, ...newItems];
+
+        // orderBy 적용
+        if (entry.info.orderBy != null) {
+          merged.sort(entry.info.orderBy);
+        }
+
+        entry.itemsSignal.set(merged);
+      }
+    } finally {
+      this.loadingCount.update((v) => v - 1);
+    }
+  }
+}

package/src/core/providers/sd-system-config.provider.ts

@@ -0,0 +1,28 @@
+import { inject, Injectable } from "@angular/core";
+import { SdLocalStorageProvider } from "./sd-local-storage.provider";
+
+@Injectable({ providedIn: "root" })
+export class SdSystemConfigProvider<T> {
+  private readonly _sdLocalStorage = inject<SdLocalStorageProvider<T>>(SdLocalStorageProvider);
+
+  fn?: {
+    set<K extends keyof T & string>(key: K, data: T[K]): Promise<void> | void;
+    get(key: keyof T & string): PromiseLike<any>;
+  };
+
+  async setAsync<K extends keyof T & string>(key: K, data: T[K]) {
+    if (this.fn) {
+      await this.fn.set(key, data);
+    } else {
+      this._sdLocalStorage.set(key, data);
+    }
+  }
+
+  async getAsync(key: keyof T & string) {
+    if (this.fn) {
+      return this.fn.get(key);
+    } else {
+      return this._sdLocalStorage.get(key);
+    }
+  }
+}

package/src/core/providers/sd-system-log.provider.ts

@@ -0,0 +1,19 @@
+/* eslint-disable no-console */
+import { Injectable } from "@angular/core";
+
+@Injectable({ providedIn: "root" })
+export class SdSystemLogProvider {
+  writeFn?: (severity: "error" | "warn" | "log", ...data: any[]) => Promise<void> | void;
+
+  async writeAsync(severity: "error" | "warn" | "log", ...data: any[]): Promise<void> {
+    console[severity](...data);
+
+    if (this.writeFn) {
+      try {
+        await this.writeFn(severity, ...data);
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  }
+}

package/src/core/providers/sd-theme-provider.ts

@@ -0,0 +1,12 @@
+import { effect, Injectable, signal } from "@angular/core";
+
+@Injectable({ providedIn: "root" })
+export class SdThemeProvider {
+  dark = signal<boolean>(false);
+
+  constructor() {
+    effect(() => {
+      document.body.classList.toggle("sd-theme-dark", this.dark());
+    });
+  }
+}

package/src/core/utils/TDirectiveInputSignals.ts

@@ -0,0 +1,34 @@
+import type { InputSignal } from "@angular/core";
+
+/**
+ * undefined를 포함하는 프로퍼티를 optional로 변환하는 유틸리티 타입
+ *
+ * `{ name: string; age: number | undefined }` -> `{ name: string; age?: number }`
+ */
+export type TUndefToOptional<T> = {
+  [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+} & {
+  [K in keyof T as undefined extends T[K] ? K : never]?: Exclude<T[K], undefined>;
+};
+
+/**
+ * 컴포넌트/디렉티브의 InputSignal 프로퍼티에서 값 타입을 추출하는 유틸리티 타입
+ *
+ * InputSignal이 아닌 프로퍼티는 제외되며, undefined를 포함하는 필드는 optional로 변환된다.
+ *
+ * @example
+ * ```typescript
+ * class MyComponent {
+ *   name = input.required<string>();
+ *   age = input(0);
+ * }
+ * // TDirectiveInputSignals<MyComponent> = { name: string; age: number }
+ * ```
+ */
+export type TDirectiveInputSignals<T> = TUndefToOptional<{
+  [P in keyof T as T[P] extends InputSignal<any> ? P : never]: T[P] extends InputSignal<
+    infer V
+  >
+    ? V
+    : never;
+}>;

package/src/core/utils/setSafeStyle.ts

@@ -0,0 +1,11 @@
+import type { Renderer2 } from "@angular/core";
+
+export function setSafeStyle(
+  renderer: Renderer2,
+  el: HTMLElement,
+  style: Partial<CSSStyleDeclaration>,
+): void {
+  for (const styleKey of Object.keys(style)) {
+    renderer.setStyle(el, styleKey, style[styleKey as keyof CSSStyleDeclaration]);
+  }
+}

package/src/core/utils/setups/setupBgTheme.ts

@@ -0,0 +1,27 @@
+import { effect } from "@angular/core";
+
+export function setupBgTheme(options?: {
+  theme?:
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "danger"
+    | "gray"
+    | "blue-gray";
+  lightness?: "lightest" | "lighter";
+}): void {
+  effect((onCleanup) => {
+    document.body.style.setProperty(
+      "--background-color",
+      options?.theme
+        ? `var(--theme-${options.theme}-${options.lightness ?? "lightest"})`
+        : "",
+    );
+
+    onCleanup(() => {
+      document.body.style.setProperty("--background-color", "");
+    });
+  });
+}

package/src/core/utils/setups/setupCanDeactivate.ts

@@ -0,0 +1,34 @@
+import { ElementRef, inject, reflectComponentType } from "@angular/core";
+import { ActivatedRoute, type CanDeactivateFn } from "@angular/router";
+import { SdActivatedModalProvider } from "../../../ui/overlay/modal/sd-modal.provider";
+
+export function setupCanDeactivate(fn: () => boolean): void {
+  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const activatedRoute = inject(ActivatedRoute, { optional: true });
+  const elRef = inject(ElementRef);
+
+  if (activatedModal != null) {
+    activatedModal.canDeactivefn = fn;
+    return;
+  }
+
+  if (activatedRoute) {
+    if (!activatedRoute.routeConfig) return;
+
+    const component = activatedRoute.component;
+    if (component == null || typeof component === "string") return;
+
+    if (
+      reflectComponentType(component)?.selector !==
+      elRef.nativeElement.tagName.toLowerCase()
+    ) {
+      return;
+    }
+
+    const canDeactivateFn: CanDeactivateFn<unknown> = () => fn();
+    if (activatedRoute.routeConfig.canDeactivate == null) {
+      activatedRoute.routeConfig.canDeactivate = [];
+    }
+    activatedRoute.routeConfig.canDeactivate.push(canDeactivateFn);
+  }
+}