@simplysm/sd-cli 14.0.88 → 14.0.90

package/src/commands/init/templates/client/src/app/home/my-info/my-info.detail.ts.hbs

@@ -0,0 +1,265 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  signal,
+  untracked,
+  ViewEncapsulation,
+} from "@angular/core";
+import { type DateTime, json, obj } from "@simplysm/core-common";
+import {
+  FormatPipe,
+  injectViewTypeSignal,
+  mark,
+  SdAppStructureProvider,
+  SdCrudDetail,
+  SdSelect,
+  SdSelectItem,
+  SdTextfield,
+  SdToastProvider,
+  setupCanDeactivate,
+} from "@simplysm/angular";
+import { expr } from "@simplysm/orm-common";
+import { AppAuthProvider, AppOrmProvider, AppServiceProvider } from "@{{workspaceName}}/client-common";
+import { {{userEntityPascal}}Config } from "@{{workspaceName}}/common";
+import type { I{{userEntityPascal}}ConfigMap } from "@{{workspaceName}}/server";
+
+@Component({
+  selector: "app-my-info-detail",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdCrudDetail, SdTextfield, SdSelect, SdSelectItem, FormatPipe],
+  template: `
+    <sd-crud-detail
+      [initialized]="initialized()"
+      [(busyCount)]="busyCount"
+      [viewType]="viewType()"
+      (submit)="onSubmit()"
+    >
+      <ng-template #contentTpl>
+        <div class="p-default">
+          <table class="form-table">
+            <tbody>
+              <tr><th colspan="2" class="form-table-header">기본정보</th></tr>
+              <tr>
+                <th>이름</th>
+                <td>
+                  <sd-textfield [type]="'text'" [disabled]="true" [value]="data().name" />
+                </td>
+              </tr>
+              <tr>
+                <th>아이디</th>
+                <td>
+                  <sd-textfield [type]="'text'" [disabled]="true" [value]="data().loginId" />
+                </td>
+              </tr>
+            </tbody>
+
+            <tbody>
+              <tr><th colspan="2" class="form-table-header">비밀번호 변경</th></tr>
+              <tr>
+                <th>기존 비밀번호</th>
+                <td>
+                  <sd-textfield
+                    [type]="'password'"
+                    [placeholder]="'기존 비밀번호를 입력하세요.'"
+                    [required]="!!data().newPassword"
+                    [(value)]="data().currentPassword"
+                    (valueChange)="mark(data)"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <th>신규 비밀번호</th>
+                <td>
+                  <sd-textfield
+                    [type]="'password'"
+                    [placeholder]="'신규 비밀번호를 입력하세요.'"
+                    [(value)]="data().newPassword"
+                    (valueChange)="mark(data)"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <th>비밀번호 확인</th>
+                <td>
+                  <sd-textfield
+                    [type]="'password'"
+                    [placeholder]="'확인을 위해 한번 더 입력하세요.'"
+                    [required]="!!data().newPassword"
+                    [(value)]="data().newPasswordConfirm"
+                    (valueChange)="mark(data)"
+                  />
+                </td>
+              </tr>
+            </tbody>
+
+            <tbody>
+              <tr><th colspan="2" class="form-table-header">시스템설정</th></tr>
+              <tr>
+                <th>로그인시 표시할 화면</th>
+                <td>
+                  <sd-select
+                    [(value)]="data().configRecord['first-router-link']"
+                    (valueChange)="mark(data)"
+                  >
+                    <sd-select-item [value]="undefined">
+                      <span class="tx-theme-gray-default">미지정</span>
+                    </sd-select-item>
+                    @for (flatMenu of flatMenus(); track flatMenu.codeChain.join(".")) {
+                      <sd-select-item [value]="'/home/' + flatMenu.codeChain.join('/')">
+                        \{{ flatMenu.titleChain.join("» ") }}
+                      </sd-select-item>
+                    }
+                  </sd-select>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          @if (data().lastModifiedAt != null || data().lastModifiedBy != null) {
+            <div class="p-sm-default tx-theme-gray-default">
+              최종수정:
+              @if (data().lastModifiedAt != null) {
+                \{{ data().lastModifiedAt | format: "yyyy-MM-dd HH:mm" }}
+              }
+              @if (data().lastModifiedBy != null) {
+                (\{{ data().lastModifiedBy }})
+              }
+            </div>
+          }
+        </div>
+      </ng-template>
+    </sd-crud-detail>
+  `,
+})
+export class MyInfoDetail {
+  private readonly _sdToast = inject(SdToastProvider);
+  private readonly _appAuth = inject(AppAuthProvider);
+  private readonly _appOrm = inject(AppOrmProvider);
+  private readonly _appService = inject(AppServiceProvider);
+  private readonly _sdAppStructure = inject(SdAppStructureProvider);
+
+  viewType = injectViewTypeSignal();
+
+  initialized = signal(false);
+  busyCount = signal(0);
+
+  flatMenus = computed(() => this._sdAppStructure.usableFlatMenus());
+
+  data = signal<IData>({ name: "", loginId: "", configRecord: {} });
+  private _orgData?: IData;
+
+  constructor() {
+    effect(() => {
+      this._appAuth.authInfo();
+
+      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);
+      });
+    });
+
+    setupCanDeactivate(() => this._checkIgnoreChanges());
+  }
+
+  async onSubmit(): Promise<void> {
+    if (this.busyCount() > 0) return;
+
+    const data = this.data();
+
+    if (this._orgData != null && obj.equal(data, this._orgData)) {
+      this._sdToast.info("변경사항이 없습니다.");
+      return;
+    }
+
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      if (Boolean(data.newPassword) && data.newPassword !== data.newPasswordConfirm) {
+        throw new Error("신규 비밀번호의 확인값이 서로 다릅니다.");
+      }
+
+      await this._appService.auth.update({
+        configs: data.configRecord,
+        currentPassword: data.currentPassword,
+        newPassword: data.newPassword,
+      });
+
+      this._sdToast.success("저장되었습니다.");
+      await this._refresh();
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  private async _refresh(): Promise<void> {
+    const {{userEntityCamel}}Id = this._appAuth.authInfo()?.{{userEntityCamel}}Id;
+    if ({{userEntityCamel}}Id == null) return;
+
+    const loaded = await this._appOrm.connectAsync(async (db) => {
+      return db
+        .{{userEntityCamel}}()
+        .where((c) => [expr.eq(c.id, {{userEntityCamel}}Id)])
+        .joinLastDataLog()
+        .join("configs", (qr, e) =>
+          qr
+            .from({{userEntityPascal}}Config)
+            .where((ec) => [expr.eq(ec.{{userEntityCamel}}Id, e.id)])
+            .select((ec) => ({ code: ec.code, valueJson: ec.valueJson })),
+        )
+        .select((item) => ({
+          name: item.name,
+          loginId: item.loginId,
+          lastModifiedAt: item.lastDataLog?.dateTime,
+          lastModifiedBy: item.lastDataLog?.{{userEntityCamel}}Name,
+          configs: item.configs?.map((it) => ({ code: it.code, valueJson: it.valueJson })),
+        }))
+        .single();
+    });
+
+    if (loaded == null) {
+      throw new Error("{{userEntityLabel}} 정보를 찾을 수 없습니다.");
+    }
+
+    const configRecord = (loaded.configs ?? []).toObject(
+      (c) => c.code,
+      (c) => json.parse(c.valueJson),
+    ) as I{{userEntityPascal}}ConfigMap;
+
+    this.data.set({
+      name: loaded.name,
+      loginId: loaded.loginId,
+      configRecord,
+      lastModifiedAt: loaded.lastModifiedAt,
+      lastModifiedBy: loaded.lastModifiedBy,
+    });
+    this._orgData = obj.clone(this.data());
+  }
+
+  private _checkIgnoreChanges(): boolean {
+    return (
+      this._orgData == null ||
+      obj.equal(this.data(), this._orgData) ||
+      confirm("변경사항이 있습니다. 무시하고 진행하시겠습니까?")
+    );
+  }
+
+  protected readonly mark = mark;
+}
+
+interface IData {
+  name: string;
+  loginId: string;
+  configRecord: I{{userEntityPascal}}ConfigMap;
+  currentPassword?: string;
+  newPassword?: string;
+  newPasswordConfirm?: string;
+  lastModifiedAt?: DateTime;
+  lastModifiedBy?: string;
+}

package/src/commands/init/templates/client/src/app/login/login.view.ts.hbs

@@ -0,0 +1,144 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  inject,
+  signal,
+  untracked,
+  ViewEncapsulation,
+} from "@angular/core";
+import { Router } from "@angular/router";
+import {
+  mark,
+  SdBusyContainer,
+  SdButton,
+  SdForm,
+  SdTextfield,
+  SdToastProvider,
+  setupBgTheme,
+} from "@simplysm/angular";
+import { NgIcon } from "@ng-icons/core";
+import { tablerLockOpen } from "@ng-icons/tabler-icons";
+import { env, parseBoolEnv } from "@simplysm/core-common";
+import { AppAuthProvider } from "@{{workspaceName}}/client-common";
+
+interface ILoginInput {
+  loginId?: string;
+  password?: string;
+}
+
+@Component({
+  selector: "app-login-view",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdBusyContainer, SdForm, SdTextfield, SdButton, NgIcon],
+  template: `
+    <sd-busy-container [busy]="initBusyCount() > 0">
+      @if (initBusyCount() === 0) {
+        <div style="width: 15em; margin: 0 auto; padding-top: 80px; padding-bottom: 30px;">
+          <img src="assets/logo.png" alt="{{workspaceName}}" style="width: 100%; height: auto;" />
+        </div>
+
+        <div class="card m-0-auto bd-radius-lg" style="width: 22em;">
+          <div class="flex-row cross-align-center p-lg-xl bdb bdb-color-light">
+            <h3 class="flex-fill">로그인</h3>
+            <div>v\{{ VER }}.\{{ DEV ? "d" : "p" }}</div>
+          </div>
+
+          <sd-busy-container [busy]="busyCount() > 0" class="p-xl" [type]="'bar'">
+            <sd-form (formSubmit)="onSubmit()">
+              <table class="form-table" style="width: 100%;">
+                <tr>
+                  <th>아이디</th>
+                  <td>
+                    <sd-textfield
+                      [type]="'text'"
+                      [autocomplete]="'username'"
+                      [placeholder]="'아이디를 입력하세요.'"
+                      [required]="true"
+                      [(value)]="data().loginId"
+                      (valueChange)="mark(data)"
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>비밀번호</th>
+                  <td>
+                    <sd-textfield
+                      [type]="'password'"
+                      [autocomplete]="'current-password'"
+                      [placeholder]="'비밀번호를 입력하세요.'"
+                      [required]="true"
+                      [(value)]="data().password"
+                      (valueChange)="mark(data)"
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th></th>
+                  <td>
+                    <sd-button [type]="'submit'" [theme]="'primary'" [size]="'lg'">
+                      <ng-icon [svg]="tablerLockOpen" />
+                      로그인
+                    </sd-button>
+                  </td>
+                </tr>
+              </table>
+            </sd-form>
+          </sd-busy-container>
+        </div>
+      }
+    </sd-busy-container>
+  `,
+})
+export class LoginView {
+  private readonly _sdToast = inject(SdToastProvider);
+  private readonly _appAuth = inject(AppAuthProvider);
+  private readonly _router = inject(Router);
+
+  initBusyCount = signal(0);
+  busyCount = signal(0);
+
+  data = signal<ILoginInput>({});
+
+  constructor() {
+    setupBgTheme({ theme: "gray" });
+
+    effect(() => {
+      void untracked(async () => {
+        this.initBusyCount.update((v) => v + 1);
+        try {
+          const ok = await this._appAuth.tryReloadAuth();
+          if (ok) {
+            const firstRouterLink = this._appAuth.authInfo()?.configs["first-router-link"] ?? "/home/main";
+            await this._router.navigateByUrl(firstRouterLink, { replaceUrl: true });
+            return;
+          }
+          const lastLoginId = this._appAuth.getLastLoginId();
+          if (lastLoginId != null && lastLoginId !== "") {
+            this.data.update((d) => ({ ...d, loginId: lastLoginId }));
+          }
+        } finally {
+          this.initBusyCount.update((v) => v - 1);
+        }
+      });
+    });
+  }
+
+  async onSubmit() {
+    if (this.busyCount() > 0) return;
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      await this._appAuth.login(this.data().loginId!, this.data().password!);
+      const firstRouterLink = this._appAuth.authInfo()?.configs["first-router-link"] ?? "/home/main";
+      await this._router.navigateByUrl(firstRouterLink, { replaceUrl: true });
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+
+  protected readonly VER = env("VER");
+  protected readonly DEV = parseBoolEnv(env("DEV"));
+  protected readonly mark = mark;
+  protected readonly tablerLockOpen = tablerLockOpen;
+}

package/src/commands/init/templates/client/src/app.root.ts.hbs

@@ -0,0 +1,64 @@
+{{#if hasDb}}
+import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from "@angular/core";
+{{else}}
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
+{{/if}}
+{{#if client.hasRouter}}
+import { RouterOutlet } from "@angular/router";
+{{/if}}
+{{#if hasDb}}
+import { env, parseBoolEnv } from "@simplysm/core-common";
+import { SdModalProvider } from "@simplysm/angular";
+import { DevModal } from "./modals/dev.modal";
+{{/if}}
+
+@Component({
+  selector: "app-root",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+{{#if hasDb}}
+  host: { "(document:keydown)": "onKeydown($event)" },
+{{/if}}
+{{#if client.hasRouter}}
+  imports: [RouterOutlet],
+  template: `<router-outlet />`,
+{{else}}
+  template: `<div></div>`,
+{{/if}}
+})
+{{#if hasDb}}
+export class AppRoot {
+  private readonly _sdModal = inject(SdModalProvider);
+
+  private _preservedKeys: string[] = [];
+
+  // 글로벌 키 시퀀스(Ctrl+Alt+Shift 누른 채 F12 → F11 → F12 → F12)로 개발자 도구 모달 호출
+  async onKeydown(event: KeyboardEvent) {
+    if (
+      parseBoolEnv(env("DEV")) &&
+      event.ctrlKey &&
+      event.altKey &&
+      event.shiftKey &&
+      (event.key === "F11" || event.key === "F12")
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      this._preservedKeys.push(event.key);
+      this._preservedKeys = this._preservedKeys.slice(-4);
+
+      if (
+        this._preservedKeys[0] === "F12" &&
+        this._preservedKeys[1] === "F11" &&
+        this._preservedKeys[2] === "F12" &&
+        this._preservedKeys[3] === "F12"
+      ) {
+        await this._sdModal.showAsync({ type: DevModal, title: "개발자 도구", inputs: {} });
+      }
+    }
+  }
+}
+{{else}}
+export class AppRoot {}
+{{/if}}

package/src/commands/init/templates/client/src/index.html.hbs

@@ -3,10 +3,84 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
     <title>{{description}}</title>
   </head>
   <body>
-    <app-root></app-root>
+    <app-root>
+      <style>
+        *,
+        *:after,
+        *:before {
+          box-sizing: border-box;
+        }
+
+        html,
+        body {
+          padding: 0;
+          margin: 0;
+          background: #f5f5f5;
+        }
+
+        .app-loader-bar {
+          position: fixed;
+          top: 0;
+          left: 0;
+          height: 2px;
+          width: 100%;
+          background-color: white;
+        }
+
+        .app-loader-bar > div {
+          position: fixed;
+          top: 0;
+          left: 0;
+          display: inline-block;
+          height: 4px;
+          width: 100%;
+
+          transform-origin: left;
+        }
+
+        .app-loader-bar > div:first-child {
+          background-color: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);
+          animation: app-loader-bar-1 2s infinite ease-in;
+        }
+
+        .app-loader-bar > div:last-child {
+          background-color: white;
+          animation: app-loader-bar-2 2s infinite ease-out;
+        }
+
+        @keyframes app-loader-bar-1 {
+          0% {
+            transform: scaleX(0);
+          }
+          60%,
+          100% {
+            transform: scaleX(1);
+          }
+        }
+
+        @keyframes app-loader-bar-2 {
+          0%,
+          50% {
+            transform: scaleX(0);
+          }
+          100% {
+            transform: scaleX(1);
+          }
+        }
+      </style>
+
+      <div class="app-loader-bar">
+        <div></div>
+        <div></div>
+      </div>
+    </app-root>
+
+    <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>
 </html>