@simplysm/angular 14.0.30 → 14.0.33

package/src/core/app-structure/sd-app-structure.utils.ts

@@ -0,0 +1,235 @@
+import type { AppStructureItem } from "@simplysm/service-common";
+import {
+  getFlatPermissions,
+  isUsableModules,
+  isUsableModulesChain,
+} from "@simplysm/service-common";
+import type { SdMenu, SdFlatMenu, SdPermission } from "./sd-app-structure.types";
+
+export abstract class SdAppStructureUtils {
+  //---------- Info
+
+  static getTitleByFullCode<TModule>(items: AppStructureItem<TModule>[], fullCode: string) {
+    const itemChain = this.getItemChainByFullCode(items, fullCode);
+    if (itemChain.length === 0) {
+      throw new Error(`Item not found for fullCode: ${fullCode}`);
+    }
+    const parent = itemChain
+      .slice(0, -1)
+      .map((item) => item.title)
+      .join(" > ");
+    const current = itemChain.last()!.title;
+    return (parent ? `[${parent}] ` : "") + current;
+  }
+
+  static getPermsByFullCode<TModule, K extends string>(
+    items: AppStructureItem<TModule>[],
+    fullCodes: string[],
+    permKeys: K[],
+    permRecord: Record<string, boolean> | undefined,
+  ): K[] {
+    if (permRecord === undefined) return [] as K[];
+
+    const result = [] as K[];
+    for (const permKey of permKeys) {
+      // 해당 권한이 설정되어있거나
+      if (fullCodes.some((fullCode) => permRecord[fullCode + "." + permKey])) {
+        result.push(permKey);
+      }
+      // 권한이라는것이 아얘 존재하지 않거나
+      else if (
+        fullCodes.every((fullCode) => {
+          const item = this.getItemChainByFullCode(items, fullCode).last();
+          return item != null && !("perms" in item);
+        })
+      ) {
+        result.push(permKey);
+      }
+    }
+
+    return result;
+  }
+
+  static getItemChainByFullCode<TModule>(
+    items: AppStructureItem<TModule>[],
+    fullCode: string,
+  ): AppStructureItem<TModule>[] {
+    const codeChain = fullCode.split(".");
+
+    const result: AppStructureItem<TModule>[] = [];
+
+    let cursorChildren = items;
+    for (const currCode of codeChain) {
+      const cursor = cursorChildren.single((item) => item.code === currCode);
+      if (cursor == null) return [];
+      cursorChildren = "children" in cursor ? cursor.children : [];
+      result.push(cursor);
+    }
+
+    return result;
+  }
+
+  //---------- Menus
+
+  static getMenus<TModule>(
+    items: AppStructureItem<TModule>[],
+    codeChain: string[],
+    usableModules: TModule[] | undefined,
+    permRecord: Record<string, boolean> | undefined,
+  ): SdMenu[] {
+    const resultMenus: SdMenu[] = [];
+
+    for (const item of items) {
+      if ("isNotMenu" in item && item.isNotMenu) continue;
+
+      const currCodeChain = [...codeChain, item.code];
+
+      // 모듈 활성화 여부 확인
+      if (!isUsableModules(item.modules, item.requiredModules, usableModules)) continue;
+
+      // 그룹 메뉴
+      if ("children" in item) {
+        const children = this.getMenus(item.children, currCodeChain, usableModules, permRecord);
+
+        // 자식 중 표시 가능한 게 있으면 그룹 메뉴 포함
+        if (children.length > 0) {
+          resultMenus.push({
+            title: item.title,
+            icon: item.icon,
+            codeChain: currCodeChain,
+            children,
+          });
+        }
+      }
+      // Leaf 메뉴
+      else {
+        const code = currCodeChain.join(".");
+
+        if (item.perms != null && !permRecord?.[code + ".use"]) continue;
+
+        resultMenus.push({
+          title: item.title,
+          icon: item.icon,
+          codeChain: currCodeChain,
+          url: item.url,
+        });
+      }
+    }
+
+    return resultMenus;
+  }
+
+  static getFlatMenus<TModule>(
+    items: AppStructureItem<TModule>[],
+    usableModules: TModule[] | undefined,
+    permRecord: Record<string, boolean> | undefined,
+  ): SdFlatMenu<TModule>[] {
+    const resultFlatMenus: SdFlatMenu<TModule>[] = [];
+
+    type QueueItem = {
+      item: AppStructureItem<TModule>;
+      titleChain: string[];
+      codeChain: string[];
+      modulesChain: TModule[][];
+      requiredModulesChain: TModule[][];
+    };
+
+    const queue: QueueItem[] = items.map((item) => ({
+      item,
+      titleChain: [],
+      codeChain: [],
+      modulesChain: [],
+      requiredModulesChain: [],
+    }));
+
+    while (queue.length > 0) {
+      const { item, titleChain, codeChain, modulesChain, requiredModulesChain } = queue.shift()!;
+
+      if ("isNotMenu" in item && item.isNotMenu) continue;
+
+      const currTitleChain = [...titleChain, item.title];
+      const currCodeChain = [...codeChain, item.code];
+      const currModulesChain = item.modules ? [...modulesChain, item.modules] : modulesChain;
+      const currRequiredModulesChain = item.requiredModules
+        ? [...requiredModulesChain, item.requiredModules]
+        : requiredModulesChain;
+
+      if (!isUsableModulesChain(currModulesChain, currRequiredModulesChain, usableModules))
+        continue;
+
+      if ("children" in item) {
+        for (const child of item.children) {
+          queue.push({
+            item: child,
+            titleChain: currTitleChain,
+            codeChain: currCodeChain,
+            modulesChain: currModulesChain,
+            requiredModulesChain: currRequiredModulesChain,
+          });
+        }
+      } else if (item.perms == null || Boolean(permRecord?.[currCodeChain.join(".") + ".use"])) {
+        resultFlatMenus.push({
+          titleChain: currTitleChain,
+          codeChain: currCodeChain,
+          modulesChain: currModulesChain,
+        });
+      }
+    }
+
+    return resultFlatMenus;
+  }
+
+  //---------- Perms
+
+  static getPermissions<TModule>(
+    items: AppStructureItem<TModule>[],
+    codeChain: string[],
+    usableModules: TModule[] | undefined,
+  ): SdPermission<TModule>[] {
+    const results: SdPermission<TModule>[] = [];
+    for (const item of items) {
+      const currCodeChain = [...codeChain, item.code];
+
+      // 모듈 활성화 여부 확인
+      if (!isUsableModules(item.modules, item.requiredModules, usableModules)) continue;
+
+      // 그룹
+      if ("children" in item) {
+        const children = this.getPermissions(item.children, currCodeChain, usableModules);
+
+        results.push({
+          title: item.title,
+          codeChain: currCodeChain,
+          modules: item.modules,
+          perms: undefined,
+          children: children,
+        });
+      }
+      // Leaf
+      else {
+        results.push({
+          title: item.title,
+          codeChain: currCodeChain,
+          perms: item.perms,
+          modules: item.modules,
+          children: item.subPerms?.map((subPerm) => ({
+            title: subPerm.title,
+            codeChain: [...currCodeChain, subPerm.code],
+            perms: subPerm.perms,
+            modules: subPerm.modules,
+            children: undefined,
+          })),
+        });
+      }
+    }
+
+    return results;
+  }
+
+  static getFlatPermissions<TModule>(
+    items: AppStructureItem<TModule>[],
+    usableModules: TModule[] | undefined,
+  ) {
+    return getFlatPermissions(items, usableModules);
+  }
+}

package/src/core/busy/sd-busy-container.ts

@@ -0,0 +1,243 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
+
+@Component({
+  selector: "sd-busy-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  host: {
+    "[attr.data-sd-busy]": "busy() || undefined",
+    "[attr.data-sd-type]": "currType()",
+  },
+  template: `
+    @if (busy()) {
+      <div class="_screen">
+        <div class="_rect">
+          <div class="_indicator">
+            @switch (currType()) {
+              @case ("spinner") {
+                <div class="_spinner"></div>
+              }
+              @case ("bar") {
+                <div class="_bar"></div>
+              }
+              @case ("cube") {
+                <div class="_cube">
+                  <div class="_cube-face _cube-face-1"></div>
+                  <div class="_cube-face _cube-face-2"></div>
+                  <div class="_cube-face _cube-face-3"></div>
+                  <div class="_cube-face _cube-face-4"></div>
+                </div>
+              }
+            }
+          </div>
+          @if (message() !== undefined) {
+            <div class="_message">{{ message() }}</div>
+          }
+          @if (progressPercent() !== undefined) {
+            <div class="_progress">
+              <div class="_progress-bar" [style.width.%]="progressPercent()"></div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+    <ng-content></ng-content>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/variables";
+      @use "sass:map";
+
+      sd-busy-container {
+        display: block;
+        position: relative;
+
+        > ._screen {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: map.get(variables.$vars, z-index, busy);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: var(--busy-overlay-bg);
+
+          > ._rect {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: var(--gap-default);
+
+            > ._indicator {
+              > ._spinner {
+                width: 2rem;
+                height: 2rem;
+                border: 0.1667rem solid var(--theme-primary-lighter);
+                border-top-color: var(--theme-primary-default);
+                border-radius: 50%;
+                animation: sd-busy-spin 0.8s linear infinite;
+              }
+
+              > ._bar {
+                width: 6rem;
+                height: 0.25rem;
+                background: var(--theme-primary-lighter);
+                border-radius: var(--border-radius-default);
+                overflow: hidden;
+                position: relative;
+
+                &::after {
+                  content: "";
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  height: 100%;
+                  width: 40%;
+                  background: var(--theme-primary-default);
+                  border-radius: var(--border-radius-default);
+                  animation: sd-busy-bar 1.5s ease-in-out infinite;
+                }
+              }
+
+              > ._cube {
+                width: 2rem;
+                height: 2rem;
+                position: relative;
+                animation: sd-busy-cube-rotate 1.8s infinite ease-in-out;
+
+                > ._cube-face {
+                  position: absolute;
+                  width: 50%;
+                  height: 50%;
+                  background: var(--theme-primary-default);
+                  animation: sd-busy-cube-fold 1.8s infinite ease-in-out;
+
+                  &._cube-face-1 {
+                    top: 0;
+                    left: 0;
+                  }
+
+                  &._cube-face-2 {
+                    top: 0;
+                    right: 0;
+                    animation-delay: 0.45s;
+                  }
+
+                  &._cube-face-3 {
+                    bottom: 0;
+                    right: 0;
+                    animation-delay: 0.9s;
+                  }
+
+                  &._cube-face-4 {
+                    bottom: 0;
+                    left: 0;
+                    animation-delay: 1.35s;
+                  }
+                }
+              }
+            }
+
+            > ._message {
+              font-size: var(--font-size-sm);
+              color: var(--text-trans-light);
+              text-align: center;
+            }
+
+            > ._progress {
+              width: 10rem;
+              height: 0.25rem;
+              background: var(--theme-primary-lighter);
+              border-radius: var(--border-radius-default);
+              overflow: hidden;
+
+              > ._progress-bar {
+                height: 100%;
+                background: var(--theme-primary-default);
+                transition: width 0.3s ease;
+              }
+            }
+          }
+        }
+      }
+
+      @keyframes sd-busy-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes sd-busy-bar {
+        0% {
+          left: -40%;
+        }
+        100% {
+          left: 100%;
+        }
+      }
+
+      @keyframes sd-busy-cube-rotate {
+        0% {
+          transform: perspective(6.25rem) rotateX(0deg) rotateY(0deg);
+        }
+        50% {
+          transform: perspective(6.25rem) rotateX(-180deg) rotateY(0deg);
+        }
+        100% {
+          transform: perspective(6.25rem) rotateX(-180deg) rotateY(-180deg);
+        }
+      }
+
+      @keyframes sd-busy-cube-fold {
+        0%,
+        10% {
+          transform: scale(1);
+        }
+        25% {
+          transform: scale(0.5);
+        }
+        50%,
+        100% {
+          transform: scale(1);
+        }
+      }
+    `,
+  ],
+})
+export class SdBusyContainer {
+  private readonly _sdBusy = inject(SdBusyProvider);
+
+  busy = input(false, { transform: booleanAttribute });
+  message = input<string | undefined>(undefined);
+  type = input<SdBusyType | undefined>(undefined);
+  progressPercent = input<number | undefined>(undefined);
+
+  currType = computed(() => this.type() ?? this._sdBusy.type());
+
+  constructor() {
+    const el = inject(ElementRef).nativeElement as HTMLElement;
+    el.addEventListener(
+      "keydown",
+      (event) => {
+        if (this.busy()) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      true,
+    );
+  }
+}

package/src/core/busy/sd-busy.provider.ts

@@ -0,0 +1,55 @@
+import {
+  ApplicationRef,
+  createComponent,
+  effect,
+  EnvironmentInjector,
+  inject,
+  Injectable,
+  signal,
+  type ComponentRef,
+} from "@angular/core";
+import { SdBusyContainer } from "./sd-busy-container";
+
+export type SdBusyType = "spinner" | "bar" | "cube";
+
+@Injectable({ providedIn: "root" })
+export class SdBusyProvider {
+  private readonly _appRef = inject(ApplicationRef);
+  private readonly _envInjector = inject(EnvironmentInjector);
+
+  type = signal<SdBusyType>("bar");
+  globalBusyCount = signal(0);
+
+  private _containerRef: ComponentRef<SdBusyContainer> | undefined;
+
+  get containerRef(): ComponentRef<SdBusyContainer> {
+    if (this._containerRef === undefined) {
+      this._containerRef = createComponent(SdBusyContainer, {
+        environmentInjector: this._envInjector,
+      });
+      this._appRef.attachView(this._containerRef.hostView);
+
+      const el = this._containerRef.location.nativeElement as HTMLElement;
+      el.style.position = "fixed";
+      el.style.top = "0";
+      el.style.left = "0";
+      el.style.right = "0";
+      el.style.bottom = "0";
+      el.style.pointerEvents = "none";
+      document.body.appendChild(el);
+    }
+    return this._containerRef;
+  }
+
+  constructor() {
+    effect(() => {
+      const busy = this.globalBusyCount() > 0;
+      const ref = this.containerRef;
+      const el = ref.location.nativeElement as HTMLElement;
+
+      ref.setInput("busy", busy);
+      ref.setInput("type", this.type());
+      el.style.pointerEvents = busy ? "auto" : "none";
+    });
+  }
+}

package/src/core/commands/findTopOpenModalEl.ts

@@ -0,0 +1,32 @@
+/**
+ * DOM에서 열린 모달 중 z-index가 가장 큰 모달 요소를 반환한다.
+ * 열린 모달이 없으면 null을 반환한다.
+ *
+ * SdModalProvider를 import하지 않아 순환 의존을 회피한다.
+ */
+export function findTopOpenModalEl(doc: Document): HTMLElement | null {
+  const openModals = doc.querySelectorAll<HTMLElement>("sd-modal[data-sd-open]");
+  if (openModals.length === 0) return null;
+
+  let topModal: HTMLElement = openModals[0];
+  let maxZ = parseInt(topModal.style.zIndex || "0", 10);
+
+  for (let i = 1; i < openModals.length; i++) {
+    const z = parseInt(openModals[i].style.zIndex || "0", 10);
+    if (z > maxZ) {
+      maxZ = z;
+      topModal = openModals[i];
+    }
+  }
+
+  return topModal;
+}
+
+/**
+ * 커맨드 이벤트를 처리해야 하는지 판단한다.
+ * 열린 모달이 없거나, element가 최상위 모달 내부에 있으면 true.
+ */
+export function shouldProcessCommandEvent(doc: Document, element: HTMLElement): boolean {
+  const topModal = findTopOpenModalEl(doc);
+  return topModal == null || topModal.contains(element);
+}

package/src/core/commands/sd-insert-command-event.plugin.ts

@@ -0,0 +1,39 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+import { shouldProcessCommandEvent } from "./findTopOpenModalEl";
+
+@Injectable({ providedIn: null })
+export class SdInsertCommandEventPlugin extends EventManagerPlugin {
+  private readonly _document = inject(DOCUMENT);
+
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    return eventName === "sdInsertCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (event.key === "Insert" && event.ctrlKey && !event.altKey && !event.shiftKey) {
+        if (!shouldProcessCommandEvent(this._document, element)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    this._document.addEventListener("keydown", listener);
+
+    return (): void => {
+      this._document.removeEventListener("keydown", listener);
+    };
+  }
+}

package/src/core/commands/sd-refresh-command-event.plugin.ts

@@ -0,0 +1,44 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+import { shouldProcessCommandEvent } from "./findTopOpenModalEl";
+
+@Injectable({ providedIn: null })
+export class SdRefreshCommandEventPlugin extends EventManagerPlugin {
+  private readonly _document = inject(DOCUMENT);
+
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string) {
+    return eventName === "sdRefreshCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (
+        (event.key === "l" || event.key === "L") &&
+        event.ctrlKey &&
+        event.altKey &&
+        !event.shiftKey
+      ) {
+        if (!shouldProcessCommandEvent(this._document, element)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    this._document.addEventListener("keydown", listener);
+
+    return (): void => {
+      this._document.removeEventListener("keydown", listener);
+    };
+  }
+}

package/src/core/commands/sd-save-command-event.plugin.ts

@@ -0,0 +1,44 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+import { shouldProcessCommandEvent } from "./findTopOpenModalEl";
+
+@Injectable({ providedIn: null })
+export class SdSaveCommandEventPlugin extends EventManagerPlugin {
+  private readonly _document = inject(DOCUMENT);
+
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string) {
+    return eventName === "sdSaveCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (
+        (event.key === "s" || event.key === "S") &&
+        event.ctrlKey &&
+        !event.altKey &&
+        !event.shiftKey
+      ) {
+        if (!shouldProcessCommandEvent(this._document, element)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    this._document.addEventListener("keydown", listener);
+
+    return (): void => {
+      this._document.removeEventListener("keydown", listener);
+    };
+  }
+}