@simplysm/angular 14.0.10 → 14.0.11

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

@@ -145,14 +145,17 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
     if (!this.toggleDelete) return;
 
     this.busyCount.update((v) => v + 1);
-    await this._sdToast.try(async () => {
-      const result = await this.toggleDelete!(del);
-      if (!result) return;
+    await this._sdToast.try(
+      async () => {
+        const result = await this.toggleDelete!(del);
+        if (!result) return;
 
-      this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
+        this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
 
-      this.close.emit(result);
-    });
+        this.close.emit(result);
+      },
+      (err) => this._getOrmDataEditToastErrorMessage(err),
+    );
     this.busyCount.update((v) => v - 1);
   }
 
@@ -172,18 +175,32 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
     }
 
     this.busyCount.update((v) => v + 1);
-    await this._sdToast.try(async () => {
-      const result = await this.submit!(this.data());
-      if (!result) return;
+    await this._sdToast.try(
+      async () => {
+        const result = await this.submit!(this.data());
+        if (!result) return;
 
-      this._sdToast.success("저장되었습니다.");
+        this._sdToast.success("저장되었습니다.");
 
-      this.close.emit(result);
+        this.close.emit(result);
 
-      await this.refresh();
-    });
+        await this.refresh();
+      },
+      (err) => this._getOrmDataEditToastErrorMessage(err),
+    );
     this.busyCount.update((v) => v - 1);
   }
+
+  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
@@ -219,13 +236,13 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
       <ng-template #pageTopbarTpl>
         @if (parent.canEdit() && parent.submit) {
           <sd-button [theme]="'link-primary'" (click)="onSubmitButtonClick()">
-            <ng-icon [svg]="tablerDeviceFloppy" />
+            <ng-icon [svg]="icons.tablerDeviceFloppy" />
             저장
             <small>(CTRL+S)</small>
           </sd-button>
         }
         <sd-button [theme]="'link-info'" (click)="onRefreshButtonClick()">
-          <ng-icon [svg]="tablerRefresh" />
+          <ng-icon [svg]="icons.tablerRefresh" />
           새로고침
           <small>(CTRL+ALT+L)</small>
         </sd-button>
@@ -238,12 +255,12 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
               @if (parent.viewType() === "control" && parent.canEdit()) {
                 @if (parent.submit) {
                   <sd-button [theme]="'primary'" (click)="onSubmitButtonClick()">
-                    <ng-icon [svg]="tablerDeviceFloppy" />
+                    <ng-icon [svg]="icons.tablerDeviceFloppy" />
                     저장
                     <small>(CTRL+S)</small>
                   </sd-button>
                   <sd-button [theme]="'info'" (click)="onRefreshButtonClick()">
-                    <ng-icon [svg]="tablerRefresh" />
+                    <ng-icon [svg]="icons.tablerRefresh" />
                     새로고침
                     <small>(CTRL+ALT+L)</small>
                   </sd-button>
@@ -255,12 +272,12 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
                 ) {
                   @if (parent.dataInfo()?.isDeleted) {
                     <sd-button [theme]="'warning'" (click)="onRestoreButtonClick()">
-                      <ng-icon [svg]="tablerRestore" />
+                      <ng-icon [svg]="icons.tablerRestore" />
                       복구
                     </sd-button>
                   } @else {
                     <sd-button [theme]="'danger'" (click)="onDeleteButtonClick()">
-                      <ng-icon [svg]="tablerEraser" />
+                      <ng-icon [svg]="icons.tablerEraser" />
                       삭제
                     </sd-button>
                   }
@@ -278,7 +295,7 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
           }
 
           <div class="flex-fill">
-            <sd-form #formCtrl (submit)="onSubmit()">
+            <sd-form #formCtrl (formSubmit)="onSubmit()">
               <ng-template [ngTemplateOutlet]="contentTplRef()" />
             </sd-form>
           </div>
@@ -332,18 +349,18 @@ export abstract class AbsSdDataDetail<T extends object, R = boolean>
             </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>
       }
+
+      <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>
   `,
 })
@@ -385,10 +402,12 @@ export class SdDataDetailControl {
     await this.parent.doSubmit({ permCheck: true });
   }
 
-  protected readonly tablerDeviceFloppy = tablerDeviceFloppy;
-  protected readonly tablerRefresh = tablerRefresh;
-  protected readonly tablerRestore = tablerRestore;
-  protected readonly tablerEraser = tablerEraser;
+  protected readonly icons = {
+    tablerDeviceFloppy,
+    tablerRefresh,
+    tablerRestore,
+    tablerEraser,
+  };
 }
 
 //#endregion

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

@@ -256,12 +256,11 @@ export abstract class AbsSdDataSheet<
     this.pageLength.set(result.pageLength ?? 0);
     this.summaryData.set(result.summary ?? {});
 
+    const selectedKeySet = new Set(
+      this.selectedItems().map((sel) => this.getItemInfoFn(sel).key),
+    );
     this.selectedItems.set(
-      this.items().filter((item) =>
-        this.selectedItems().some(
-          (sel) => this.getItemInfoFn(sel).key === this.getItemInfoFn(item).key,
-        ),
-      ),
+      this.items().filter((item) => selectedKeySet.has(this.getItemInfoFn(item).key)),
     );
   }
 
@@ -300,12 +299,11 @@ export abstract class AbsSdDataSheet<
 
         this._sdToast.success("저장되었습니다.");
         await this.refresh();
+        this.submitted.emit(true);
       },
       (err) => this._getOrmDataEditToastErrorMessage(err),
     );
     this.busyCount.update((v) => v - 1);
-
-    this.submitted.emit(true);
   }
 
   doToggleDeleteItem(item: TItem) {
@@ -758,6 +756,17 @@ export abstract class AbsSdDataSheet<
             }
           </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>
   `,
@@ -782,6 +791,14 @@ export class SdDataSheetControl {
 
   columnControls = contentChildren(SdDataSheetColumnDirective);
 
+  modalActionTplRef = viewChild("modalActionTpl", { read: TemplateRef });
+
+  constructor() {
+    effect(() => {
+      this.parent.actionTplRef = this.modalActionTplRef();
+    });
+  }
+
   protected readonly icons = {
     tablerRefresh,
     tablerDeviceFloppy,

package/src/features/permission-table/sd-permission-table.control.ts

@@ -0,0 +1,385 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import { obj } from "@simplysm/core-common";
+import type { ISdPermission } from "../../core/providers/sd-app-structure.provider";
+import { SdCheckboxControl } from "../../ui/form/checkbox/sd-checkbox.control";
+import { SdCollapseIconControl } from "../../ui/navigation/collapse/sd-collapse-icon.control";
+import { SdTypedTemplateDirective } from "../../core/directives/sd-typed-template.directive";
+import { SdAnchorControl } from "../../ui/form/button/sd-anchor.control";
+
+@Component({
+  selector: "sd-permission-table",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdTypedTemplateDirective,
+    NgTemplateOutlet,
+    SdCollapseIconControl,
+    SdCheckboxControl,
+    SdAnchorControl,
+  ],
+  styles: [
+    /* language=SCSS */ `
+      sd-permission-table {
+        table {
+          border-collapse: collapse;
+
+          > * > tr {
+            > * {
+              padding: var(--gap-sm) var(--gap-lg);
+              position: sticky;
+              top: 0;
+              border-top: 1px solid transparent;
+              border-bottom: 1px solid transparent;
+
+              color: var(--text-trans-default);
+
+              > * {
+                color: var(--text-trans-default) !important;
+              }
+
+              &._title {
+                border-top-left-radius: 14px;
+                border-bottom-left-radius: 14px;
+                padding-left: var(--gap-lg);
+              }
+            }
+
+            &[data-sd-collapse="true"] {
+              display: none;
+            }
+
+            &[data-sd-theme="first"] {
+              > * {
+                &._title,
+                &._after {
+                  background: var(--theme-info-default);
+
+                  color: var(--text-trans-rev-default);
+
+                  > * {
+                    color: var(--text-trans-rev-default) !important;
+                  }
+                }
+              }
+            }
+
+            &[data-sd-theme="info"] {
+              > * {
+                &._title,
+                &._after {
+                  background: var(--theme-info-lightest);
+                }
+              }
+            }
+
+            &[data-sd-theme="warning"] {
+              > * {
+                &._title,
+                &._after {
+                  background: var(--theme-warning-lightest);
+                }
+              }
+            }
+
+            &[data-sd-theme="success"] {
+              > * {
+                &._title,
+                &._after {
+                  background: var(--theme-success-lightest);
+                }
+              }
+            }
+          }
+        }
+      }
+    `,
+  ],
+  template: `
+    <table>
+      <tbody>
+        @for (item of items(); track item.codeChain.join(".")) {
+          <ng-template
+            [ngTemplateOutlet]="itemTpl"
+            [ngTemplateOutletContext]="{
+              item: item,
+              parentKey: 'root',
+              depth: 0,
+              parent: undefined,
+            }"
+          ></ng-template>
+        }
+      </tbody>
+    </table>
+
+    <ng-template
+      #itemTpl
+      [typed]="itemTemplateType"
+      let-item="item"
+      let-parentKey="parentKey"
+      let-depth="depth"
+      let-parent="parent"
+    >
+      @if (
+        (item.children && item.children.length !== 0) || (item.perms && item.perms.length > 0)
+      ) {
+        <tr
+          [attr.data-sd-collapse]="!!parent && getIsPermCollapsed(parent)"
+          [attr.data-sd-theme]="
+            depth === 0
+              ? 'first'
+              : depth % 3 === 0
+                ? 'success'
+                : depth % 3 === 1
+                  ? 'info'
+                  : 'warning'
+          "
+        >
+          @for (i of arr(depth + 1); track i) {
+            <td class="_before">&nbsp;</td>
+          }
+
+          <td class="_title">
+            @if (item.children && item.children.length > 0) {
+              <sd-anchor (click)="onPermCollapseToggle(item)">
+                <sd-collapse-icon [open]="getIsPermCollapsed(item)" />
+                {{ item.title }}
+              </sd-anchor>
+            } @else {
+              <div style="padding-left: 14px;">
+                {{ item.title }}
+              </div>
+            }
+          </td>
+
+          @for (i of arr(depthLength() - (depth + 1)); track i) {
+            <td class="_after">&nbsp;</td>
+          }
+
+          <td class="_after">
+            @if (getIsPermExists(item, "use")) {
+              <sd-checkbox
+                [inline]="true"
+                [value]="getIsPermChecked(item, 'use')"
+                (valueChange)="onPermCheckChange(item, 'use', $event)"
+                [disabled]="disabled()"
+              >
+                사용
+              </sd-checkbox>
+            }
+          </td>
+
+          <td class="_after">
+            @if (getIsPermExists(item, "edit")) {
+              <sd-checkbox
+                [inline]="true"
+                [value]="getIsPermChecked(item, 'edit')"
+                (valueChange)="onPermCheckChange(item, 'edit', $event)"
+                [disabled]="getEditDisabled(item)"
+              >
+                편집
+              </sd-checkbox>
+            }
+          </td>
+        </tr>
+      }
+      @if (item.children && item.children.length > 0) {
+        @for (child of item.children; track child.codeChain.join(".")) {
+          <ng-template
+            [ngTemplateOutlet]="itemTpl"
+            [ngTemplateOutletContext]="{
+              item: child,
+              parentKey: parentKey + '_' + item.codeChain.join('.'),
+              depth: depth + 1,
+              parent: item,
+            }"
+          ></ng-template>
+        }
+      }
+    </ng-template>
+  `,
+})
+export class SdPermissionTableControl<TModule> {
+  value = model<Record<string, boolean>>({});
+
+  items = input<ISdPermission<TModule>[]>([]);
+  disabled = input(false, { transform: booleanAttribute });
+
+  collapsedItems = signal(new Set<ISdPermission<TModule>>());
+
+  depthLength = computed(() => {
+    return this._getDepthLength(this.items(), 0);
+  });
+
+  arr(len: number): number[] {
+    return Array(len)
+      .fill(0)
+      .map((_, i) => i);
+  }
+
+  getIsPermCollapsed(item: ISdPermission<TModule>): boolean {
+    return this.collapsedItems().has(item);
+  }
+
+  getAllChildren(item: ISdPermission<TModule>): ISdPermission<TModule>[] {
+    return item.children?.mapMany((child) => [child, ...this.getAllChildren(child)]) ?? [];
+  }
+
+  getEditDisabled(item: ISdPermission<TModule>) {
+    if (this.disabled()) {
+      return true;
+    }
+
+    if (item.perms) {
+      if (this.getIsPermExists(item, "use") && !this.getIsPermChecked(item, "use")) {
+        return true;
+      }
+    } else {
+      if (
+        item.children?.every(
+          (child) => !this.getIsPermExists(child, "edit") || this.getEditDisabled(child),
+        )
+      ) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  getIsPermExists(item: ISdPermission<TModule>, type: "use" | "edit"): boolean {
+    if (item.perms) {
+      return item.perms.includes(type);
+    }
+
+    if (item.children) {
+      for (const child of item.children) {
+        if (this.getIsPermExists(child, type)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  getIsPermChecked(item: ISdPermission<TModule>, type: "use" | "edit"): boolean {
+    if (item.perms) {
+      const permCode = item.codeChain.join(".");
+      return this.value()[permCode + "." + type] ?? false;
+    }
+
+    if (item.children) {
+      for (const child of item.children) {
+        if (this.getIsPermChecked(child, type)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  onPermCollapseToggle(item: ISdPermission<TModule>) {
+    this.collapsedItems.update((v) => {
+      const r = new Set(v);
+      if (r.has(item)) {
+        r.delete(item);
+      } else {
+        r.add(item);
+        const allChildren = this.getAllChildren(item);
+        for (const allChild of allChildren) {
+          r.add(allChild);
+        }
+      }
+      return r;
+    });
+  }
+
+  onPermCheckChange(item: ISdPermission<TModule>, type: "use" | "edit", val: boolean) {
+    this.value.update((v) => {
+      const r = obj.clone(v);
+      this._changePermCheck(r, item, type, val);
+      return r;
+    });
+  }
+
+  private _changePermCheck(
+    value: Record<string, boolean>,
+    item: ISdPermission<TModule>,
+    type: "use" | "edit",
+    val: boolean,
+  ) {
+    let changed = false;
+
+    if (item.perms) {
+      const permCode = item.codeChain.join(".");
+
+      if (
+        type === "edit" &&
+        val &&
+        this.getIsPermExists(item, "use") &&
+        !this.getIsPermChecked(item, "use")
+      ) {
+        // use가 체크되지 않은 상태에서 edit 체크 시도 → 무시
+      } else {
+        if (this.getIsPermExists(item, type) && value[permCode + "." + type] !== val) {
+          value[permCode + "." + type] = val;
+          changed = true;
+        }
+      }
+
+      // USE권한 지우면 EDIT권한도 자동으로 지움
+      if (
+        type === "use" &&
+        !val &&
+        this.getIsPermExists(item, "edit") &&
+        value[permCode + ".edit"]
+      ) {
+        value[permCode + ".edit"] = false;
+        changed = true;
+      }
+    }
+
+    // 하위 권한을 함께 변경함
+    if (item.children) {
+      for (const child of item.children) {
+        const childChanged = this._changePermCheck(value, child, type, val);
+        if (childChanged) {
+          changed = true;
+        }
+      }
+    }
+
+    return changed;
+  }
+
+  private _getDepthLength(items: ISdPermission<TModule>[], depth: number): number {
+    return (
+      items.max((item) => {
+        if (item.children) {
+          return this._getDepthLength(item.children, depth + 1);
+        } else {
+          return depth + 1;
+        }
+      }) ?? depth
+    );
+  }
+
+  protected readonly itemTemplateType!: {
+    item: ISdPermission<TModule>;
+    parentKey: string;
+    depth: number;
+    parent: ISdPermission<TModule> | undefined;
+  };
+}

package/src/features/shared-data/sd-shared-data-select.control.ts

@@ -255,7 +255,7 @@ export class SdSharedDataSelectControl<
 
   getItemSelectable(item: TItem, _index: number, depth: number): boolean {
     if (!this.hasParentKey()) return true;
-    // depth가 0이면서 자식을 가진 항목(카테고리)은 선택 불가
+    // 트리 구조에서 depth가 0이면서 __parentKey가 있는 항목은 선택 불가
     return depth !== 0 || item.__parentKey == null;
   }
 

package/src/index.ts

@@ -72,6 +72,9 @@ export {
   type IAddress,
 } from "./features/address/sd-address-search.modal";
 
+// features/permission-table
+export { SdPermissionTableControl } from "./features/permission-table/sd-permission-table.control";
+
 // features
 export { SdBaseContainerControl } from "./features/base/sd-base-container.control";
 export {

package/src/ui/overlay/modal/sd-modal.provider.ts

@@ -139,6 +139,19 @@ export class SdModalProvider {
       activatedModal.modalComponent.set(modalRef.instance);
       activatedModal.contentComponent.set(contentRef.instance);
 
+      // 7-1. actionTplRef 브릿지: 컨텐츠 컴포넌트 → 모달 컴포넌트
+      if ("actionTplRef" in contentRef.instance) {
+        let _actionTplRef = contentRef.instance.actionTplRef;
+        Object.defineProperty(contentRef.instance, "actionTplRef", {
+          get: () => _actionTplRef,
+          set: (value: TemplateRef<any> | undefined) => {
+            _actionTplRef = value;
+            modalRef.setInput("actionTplRef", value);
+          },
+          configurable: true,
+        });
+      }
+
       // 8. appRef에 뷰 등록 + body에 삽입
       this._appRef.attachView(contentRef.hostView);
       this._appRef.attachView(modalRef.hostView);