@simplysm/sd-cli 14.0.95 → 14.0.97

package/src/commands/init/templates/client/src/app/home/master/role-permission/role.list.ts.hbs

@@ -0,0 +1,537 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  untracked,
+  ViewEncapsulation,
+} from "@angular/core";
+import {
+  FormatPipe,
+  injectPermsSignal,
+  injectViewTitleSignal,
+  injectViewTypeSignal,
+  mark,
+  SdAnchor,
+  SdButton,
+  SdCheckbox,
+  SdCrudList,
+  type SdModalContentDef,
+  SdModalProvider,
+  SdSheetColumn,
+  SdSheetColumnCellTemplate,
+  SdTextfield,
+  SdToastProvider,
+  type SelectModalOutputResult,
+  type SortingDef,
+} from "@simplysm/angular";
+import { expr } from "@simplysm/orm-common";
+import { DateTime, obj } from "@simplysm/core-common";
+import { downloadBlob, openFileDialog } from "@simplysm/core-browser";
+import { ExcelWrapper } from "@simplysm/excel";
+import { z } from "zod";
+import {
+  AppAuthProvider,
+  AppOrmProvider,
+  AppSharedDataProvider,
+} from "@{{workspaceName}}/client-common";
+import { RoleDetail } from "./role.detail";
+import { tablerDownload, tablerEdit, tablerUpload } from "@ng-icons/tabler-icons";
+import { NgIcon } from "@ng-icons/core";
+
+const ITEMS_PER_PAGE = 50;
+
+@Component({
+  selector: "app-role-list",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdCrudList,
+    SdSheetColumn,
+    SdSheetColumnCellTemplate,
+    SdTextfield,
+    SdCheckbox,
+    SdAnchor,
+    SdButton,
+    NgIcon,
+    FormatPipe,
+  ],
+  template: `
+    <sd-crud-list
+      [key]="'role-list'"
+      [(ready)]="ready"
+      [initialized]="initialized()"
+      [(busyCount)]="busyCount"
+      [viewType]="viewType()"
+      [restricted]="!perms().includes('use')"
+      [readonly]="!canEdit()"
+      [inlineEdit]="false"
+      [selectMode]="selectMode()"
+      [items]="items()"
+      [currDeletedItems]="deletedItems()"
+      [trackByFn]="trackByFn"
+      [(selectedKeys)]="selectedKeys"
+      [(currentPage)]="page"
+      [totalPageCount]="pageLength()"
+      [(sorts)]="sortingDefs"
+      (filterSubmit)="onFilterSubmit()"
+      (create)="onCreate()"
+      (delete)="onDelete($event)"
+      (restore)="onRestore($event)"
+    >
+      <ng-template #filterTpl>
+        <div class="form-box-inline">
+          <div>
+            <label>검색어</label>
+            <sd-textfield
+              [type]="'text'"
+              [(value)]="filter().searchText"
+              (valueChange)="mark(filter)"
+            />
+          </div>
+          <div class="form-box-item">
+            <sd-checkbox [(value)]="filter().isIncludeDeleted" (valueChange)="mark(filter)">
+              삭제항목 포함
+            </sd-checkbox>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template #toolTpl>
+        @if (canEdit()) {
+          <sd-button [size]="'sm'" [theme]="'link-success'" (click)="onUploadExcelButtonClick()">
+            <ng-icon [svg]="tablerUpload" />
+            엑셀 업로드
+          </sd-button>
+        }
+        <sd-button [size]="'sm'" [theme]="'link-success'" (click)="onDownloadExcelButtonClick()">
+          <ng-icon [svg]="tablerDownload" />
+          엑셀 다운로드
+        </sd-button>
+      </ng-template>
+
+      <sd-sheet-column [key]="'id'" [header]="'#'">
+        <ng-template [cell]="items()" let-item="item">
+          @if (canEdit()) {
+            <sd-anchor class="flex-row gap-sm p-xs-sm" (click)="onEdit(item, $event)">
+              <div><ng-icon [svg]="tablerEdit" /></div>
+              <div class="flex-fill tx-right">\{{ item.id }}</div>
+            </sd-anchor>
+          } @else {
+            <div class="p-xs-sm tx-right">\{{ item.id }}</div>
+          }
+        </ng-template>
+      </sd-sheet-column>
+
+      <sd-sheet-column [key]="'name'" [header]="'이름'">
+        <ng-template [cell]="items()" let-item="item">
+          <div class="p-xs-sm">\{{ item.name }}</div>
+        </ng-template>
+      </sd-sheet-column>
+
+      <sd-sheet-column [key]="'lastModifiedAt'" [header]="'수정일시'" [hidden]="true">
+        <ng-template [cell]="items()" let-item="item">
+          <div class="p-xs-sm">\{{ item.lastModifiedAt | format: "yyyy-MM-dd HH:mm" }}</div>
+        </ng-template>
+      </sd-sheet-column>
+
+      <sd-sheet-column [key]="'lastModifiedBy'" [header]="'수정자'" [hidden]="true">
+        <ng-template [cell]="items()" let-item="item">
+          <div class="p-xs-sm">\{{ item.lastModifiedBy ?? "&nbsp;" }}</div>
+        </ng-template>
+      </sd-sheet-column>
+    </sd-crud-list>
+  `,
+})
+export class RoleList implements SdModalContentDef<SelectModalOutputResult<number> | undefined> {
+  private readonly _sdToast = inject(SdToastProvider);
+  private readonly _sdModal = inject(SdModalProvider);
+  private readonly _appOrm = inject(AppOrmProvider);
+  private readonly _appSharedData = inject(AppSharedDataProvider);
+  private readonly _appAuth = inject(AppAuthProvider);
+
+  readonly = input<boolean | undefined>();
+  selectMode = input<"single" | "multi">();
+  selectedKeys = model<number[]>([]);
+  close = output<SelectModalOutputResult<number> | undefined>();
+  readonly _optionalModalInputs!: "selectMode" | "selectedKeys";
+
+  perms = injectPermsSignal(["master.role-permission"], ["use", "edit"]);
+  viewType = injectViewTypeSignal();
+  viewTitle = injectViewTitleSignal();
+
+  canEdit = computed(() => !this.readonly() && this.perms().includes("edit"));
+
+  ready = signal(false);
+  initialized = signal(false);
+  busyCount = signal(0);
+
+  items = signal<IItem[]>([]);
+  deletedItems = computed(() => this.items().filter((i) => i.isDeleted));
+  page = signal(0);
+  pageLength = signal(0);
+  sortingDefs = signal<SortingDef[]>([]);
+
+  filter = signal<IFilter>({ isIncludeDeleted: false });
+  lastFilter = signal<IFilter>({ isIncludeDeleted: false });
+
+  trackByFn = (item: IItem): number => item.id;
+
+  private readonly _excelWrapper = new ExcelWrapper(
+    z.object({
+      id: z.number().optional().describe("ID"),
+      name: z.string().describe("이름"),
+      isDeleted: z.boolean().describe("삭제"),
+      lastModifiedAt: z.custom<DateTime>().optional().describe("수정일시"),
+      lastModifiedBy: z.string().optional().describe("수정자"),
+    }),
+  );
+
+  constructor() {
+    effect(() => {
+      if (!this.perms().includes("use") || !this.ready()) {
+        this.initialized.set(true);
+        return;
+      }
+
+      this.lastFilter();
+      this.page();
+      this.sortingDefs();
+
+      void untracked(async () => {
+        this.busyCount.update((v) => v + 1);
+        await this._sdToast.try(async () => {
+          await this._refresh();
+        });
+        this.busyCount.update((v) => v - 1);
+        this.initialized.set(true);
+      });
+    });
+  }
+
+  onFilterSubmit(): void {
+    this.page.set(0);
+    this.lastFilter.set({ ...this.filter() });
+  }
+
+  async onDownloadExcelButtonClick(): Promise<void> {
+    if (this.busyCount() > 0) return;
+
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      const r = await this._search(false);
+      const wb = await this._excelWrapper.write(this.viewTitle(), r.items);
+      try {
+        downloadBlob(
+          await wb.toBlob(),
+          `${this.viewTitle()}_${new DateTime().toFormatString("yyMMdd")}.xlsx`,
+        );
+      } finally {
+        await wb.close();
+      }
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  async onUploadExcelButtonClick(): Promise<void> {
+    if (this.busyCount() > 0) return;
+    if (!this.canEdit()) return;
+
+    const files = await openFileDialog({ accept: ".xlsx" });
+    if (files == null) return;
+
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      // 파생 컬럼(수정일시·수정자)은 업로드에서 제외하고 파싱. 삭제 여부는 읽어서 반영.
+      const records = await this._excelWrapper.read(files[0], 0, {
+        excludes: ["lastModifiedAt", "lastModifiedBy"],
+      });
+      if (records.length === 0) {
+        throw new Error("업로드할 데이터가 없습니다.");
+      }
+
+      // 다건일 때만 에러에 이름을 표기(단건이면 평문).
+      const label = (roleName: string): string =>
+        records.length > 1 ? `역할 '${roleName}': ` : "";
+
+      const inputs = records.map((rec) => {
+        const roleName = rec.name.trim();
+        if (roleName === "" || roleName.length > 100) {
+          throw new Error(`${label(roleName)}이름은 1~100자의 문자열이어야 합니다.`);
+        }
+        return { id: rec.id, name: roleName, isDeleted: rec.isDeleted };
+      });
+
+      // ID↔이름 정합성 — 전체(삭제 포함) 역할의 (id, name) 와 대조. ID 없으면 신규.
+      const ids = inputs.flatMap((x) => (x.id != null ? [x.id] : []));
+      const dbRows =
+        ids.length === 0
+          ? []
+          : await this._appOrm.connectAsync(async (db) =>
+              db
+                .role()
+                .where((c) => [expr.in(c.id, ids)])
+                .select((c) => ({ id: c.id, name: c.name }))
+                .execute(),
+            );
+      const dbNameById = new Map(dbRows.map((r) => [r.id, r.name] as const));
+
+      let nameChangedCount = 0;
+      const changedSamples: string[] = [];
+      for (const x of inputs) {
+        if (x.id == null) continue;
+        const dbName = dbNameById.get(x.id);
+        if (dbName == null) {
+          throw new Error(`${label(x.name)}ID ${x.id} 에 해당하는 역할이 없습니다.`);
+        }
+        if (dbName !== x.name) {
+          nameChangedCount++;
+          if (changedSamples.length < 2) {
+            changedSamples.push(`${dbName} → ${x.name}`);
+          }
+        }
+      }
+
+      // 기존 이름(비즈니스키)이 바뀌는 건이 있으면 행 어긋남(정렬 사고)일 수 있어, 건수 입력으로 확인.
+      if (nameChangedCount >= 1) {
+        const sample =
+          changedSamples.join(", ") + (nameChangedCount > changedSamples.length ? " 등" : "");
+        let confirmed = false;
+        while (!confirmed) {
+          const answer = prompt(
+            `기존 항목 ${nameChangedCount}건의 이름이 변경됩니다. (예: ${sample})\n` +
+              `계속하려면 ${nameChangedCount} 을(를) 입력하세요.`,
+          );
+          if (answer == null) return;
+          confirmed = answer.trim() === String(nameChangedCount);
+        }
+      }
+
+      const {{userEntityCamel}}Id = this._appAuth.authInfo()?.{{userEntityCamel}}Id;
+      const savedIds: number[] = [];
+      await this._appOrm.connectAsync(async (db) => {
+        const activeNames: string[] = [];
+        for (const { id, name, isDeleted } of inputs) {
+          let existingIsDeleted: boolean | undefined;
+          if (id != null) {
+            const existing = await db
+              .role()
+              .where((c) => [expr.eq(c.id, id)])
+              .select((c) => ({ isDeleted: c.isDeleted }))
+              .single();
+            if (existing == null) {
+              throw new Error(`${label(name)}존재하지 않는 역할입니다. (ID: ${id})`);
+            }
+            existingIsDeleted = existing.isDeleted;
+          }
+
+          // 저장 후 삭제상태 = 엑셀 입력값 (role 업로드는 삭제 컬럼을 항상 읽음).
+          const resultIsDeleted = isDeleted;
+          if (!resultIsDeleted) {
+            activeNames.push(name);
+          }
+
+          if (id == null) {
+            const [inserted] = await db
+              .role()
+              .insert([{ name, isDeleted: resultIsDeleted }], ["id"]);
+            await db.role().insertDataLog({ action: "등록", itemId: inserted.id, {{userEntityCamel}}Id });
+            savedIds.push(inserted.id);
+          } else {
+            await db
+              .role()
+              .where((c) => [expr.eq(c.id, id)])
+              .update(() => ({ name, isDeleted: resultIsDeleted }));
+            const action =
+              existingIsDeleted === resultIsDeleted ? "수정" : resultIsDeleted ? "삭제" : "복구";
+            await db.role().insertDataLog({ action, itemId: id, {{userEntityCamel}}Id });
+            savedIds.push(id);
+          }
+        }
+
+        // 이름 활성유니크 후검증 — 활성으로 귀결된 이름 중 활성 중복이 있으면 throw(전체 롤백).
+        if (activeNames.length > 0) {
+          const conflicts = await db
+            .role()
+            .where((c) => [expr.in(c.name, activeNames), expr.eq(c.isDeleted, false)])
+            .groupBy((c) => [c.name])
+            .having(() => [expr.gt(expr.count(), 1)])
+            .select((c) => ({ name: c.name }))
+            .execute();
+          if (conflicts.length > 0) {
+            const conflictNames = conflicts.map((x) => `'${x.name}'`).join(", ");
+            throw new Error(`이미 존재하는 역할 이름: ${conflictNames}`);
+          }
+        }
+      });
+
+      await this._appSharedData.emitAsync("역할", savedIds);
+      this._sdToast.success(`${savedIds.length}건이 반영되었습니다.`);
+      await this._refresh();
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  async onCreate(): Promise<void> {
+    await this._openDetail(undefined);
+  }
+
+  async onEdit(item: IItem, event: Event): Promise<void> {
+    event.preventDefault();
+    event.stopPropagation();
+
+    await this._openDetail(item.id);
+  }
+
+  private async _openDetail(roleId: number | undefined): Promise<void> {
+    if (this.busyCount() > 0) return;
+
+    const result = await this._sdModal.showAsync({
+      type: RoleDetail,
+      title: roleId == null ? "역할 등록" : "역할 수정",
+      inputs: { roleId },
+    });
+    if (result == null) return;
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      await this._refresh();
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  async onDelete(targets: IItem[]): Promise<void> {
+    if (this.busyCount() > 0) return;
+    if (!this.canEdit()) return;
+    if (targets.length === 0) return;
+    if (!confirm("삭제하시겠습니까?")) return;
+
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      const ids = targets.map((t) => t.id);
+      const {{userEntityCamel}}Id = this._appAuth.authInfo()?.{{userEntityCamel}}Id;
+      await this._appOrm.connectAsync(async (db) => {
+        await db
+          .role()
+          .where((c) => [expr.in(c.id, ids)])
+          .update(() => ({ isDeleted: true }));
+        for (const id of ids) {
+          await db.role().insertDataLog({ action: "삭제", itemId: id, {{userEntityCamel}}Id });
+        }
+      });
+      await this._appSharedData.emitAsync("역할", ids);
+      this._sdToast.success("삭제되었습니다.");
+      await this._refresh();
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  async onRestore(targets: IItem[]): Promise<void> {
+    if (this.busyCount() > 0) return;
+    if (!this.canEdit()) return;
+    if (targets.length === 0) return;
+
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      const ids = targets.map((t) => t.id);
+      const names = targets.map((t) => t.name);
+      const {{userEntityCamel}}Id = this._appAuth.authInfo()?.{{userEntityCamel}}Id;
+      await this._appOrm.connectAsync(async (db) => {
+        await db
+          .role()
+          .where((c) => [expr.in(c.id, ids)])
+          .update(() => ({ isDeleted: false }));
+
+        // 복구 후 이름 비삭제 유니크 재검증 — 복구로 활성 중복이 생겼으면 throw(트랜잭션 롤백).
+        // 대상끼리 충돌·기존 활성과의 충돌을 복구한 이름으로 한정해 한 번에 검사.
+        const conflicts = await db
+          .role()
+          .where((c) => [expr.in(c.name, names), expr.eq(c.isDeleted, false)])
+          .groupBy((c) => [c.name])
+          .having(() => [expr.gt(expr.count(), 1)])
+          .select((c) => ({ name: c.name }))
+          .execute();
+        if (conflicts.length > 0) {
+          const conflictNames = conflicts.map((x) => `'${x.name}'`).join(", ");
+          throw new Error(`같은 이름(${conflictNames})의 활성 역할이 있어 복구할 수 없습니다.`);
+        }
+
+        for (const id of ids) {
+          await db.role().insertDataLog({ action: "복구", itemId: id, {{userEntityCamel}}Id });
+        }
+      });
+      await this._appSharedData.emitAsync("역할", ids);
+      this._sdToast.success("복구되었습니다.");
+      await this._refresh();
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  private async _refresh(): Promise<void> {
+    const r = await this._search(true);
+    this.items.set(r.items);
+    this.pageLength.set(r.pageLength);
+  }
+
+  private async _search(usePagination: boolean): Promise<{ items: IItem[]; pageLength: number }> {
+    return this._appOrm.connectAsync(async (db) => {
+      let qr = db.role();
+
+      const searchText = this.lastFilter().searchText?.trim();
+      if (searchText != null && searchText.length > 0) {
+        qr = qr.search((c) => [c.name], searchText);
+      }
+
+      if (!this.lastFilter().isIncludeDeleted) {
+        qr = qr.where((c) => [expr.eq(c.isDeleted, false)]);
+      }
+
+      const pageLength = usePagination ? Math.ceil((await qr.count()) / ITEMS_PER_PAGE) : 0;
+
+      let qr2 = qr.joinLastDataLog().select((c) => ({
+        id: c.id,
+        name: c.name,
+        isDeleted: c.isDeleted,
+        lastModifiedAt: c.lastDataLog?.dateTime,
+        lastModifiedBy: c.lastDataLog?.{{userEntityCamel}}Name,
+      }));
+
+      for (const sort of this.sortingDefs()) {
+        qr2 = qr2.orderBy((c) => obj.getChainValue(c, sort.key) as any, sort.desc ? "DESC" : "ASC");
+      }
+      if (!this.sortingDefs().some((s) => s.key === "id")) {
+        qr2 = qr2.orderBy((c) => c.id, "DESC");
+      }
+
+      if (usePagination) {
+        qr2 = qr2.limit(this.page() * ITEMS_PER_PAGE, ITEMS_PER_PAGE);
+      }
+
+      const items = (await qr2.execute()) as IItem[];
+      return { items, pageLength };
+    });
+  }
+
+  protected readonly mark = mark;
+  protected readonly tablerEdit = tablerEdit;
+  protected readonly tablerDownload = tablerDownload;
+  protected readonly tablerUpload = tablerUpload;
+}
+
+interface IItem {
+  id: number;
+  name: string;
+  isDeleted: boolean;
+  lastModifiedAt?: DateTime;
+  lastModifiedBy?: string;
+}
+
+interface IFilter {
+  searchText?: string;
+  isIncludeDeleted: boolean;
+}