@simplysm/sd-cli 13.0.70 → 13.0.72

package/templates/init/packages/client-admin/src/main.tsx.hbs

@@ -0,0 +1,146 @@
+import { render } from "solid-js/web";
+import { HashRouter, Navigate, Route } from "@solidjs/router";
+import { For } from "solid-js";
+import {
+  DialogProvider,
+  PrintProvider,
+  SystemProvider,
+  useLogger,
+  useSyncStorage,
+} from "@simplysm/solid";
+import { DateTime, env, jsonStringify } from "@simplysm/core-common";
+import { expr } from "@{{projectName}}/db-main";
+import { App } from "./App";
+
+import { NotFoundView } from "./views/not-found/NotFoundView";
+import { AppStructureProvider, useAppStructure } from "./providers/AppStructureProvider";
+import { AppServiceProvider, useAppService } from "./providers/AppServiceProvider";
+import { AuthProvider, useAuth } from "./providers/AuthProvider";
+import { configureSharedData } from "./providers/configureSharedData";
+import "./main.css";
+import { LoginView } from "./views/auth/LoginView";
+import { HomeView } from "./views/home/HomeView";
+
+function AppRoot() {
+  const appService = useAppService();
+  const auth = useAuth();
+  const appStructure = useAppStructure();
+
+  // SyncStorage
+  useSyncStorage()!.configure((origin) => ({
+    async getItem(key) {
+      const info = auth.authInfo();
+      if (!info) return origin.getItem(key);
+
+      return appService.orm.connectWithoutTransaction(async (db) => {
+        const row = await db
+          .employeeConfig()
+          .where((c) => [expr.eq(c.employeeId, info.employeeId), expr.eq(c.code, key)])
+          .first();
+        return row?.valueJson ?? null;
+      });
+    },
+
+    async setItem(key, value) {
+      const info = auth.authInfo();
+      if (!info) {
+        await origin.setItem(key, value);
+        return;
+      }
+
+      await appService.orm.connect(async (db) => {
+        await db
+          .employeeConfig()
+          .where((c) => [expr.eq(c.employeeId, info.employeeId), expr.eq(c.code, key)])
+          .upsert(() => ({
+            employeeId: expr.val("number", info.employeeId),
+            code: expr.val("string", key),
+            valueJson: expr.val("string", value),
+          }));
+      });
+    },
+
+    async removeItem(key) {
+      const info = auth.authInfo();
+      if (!info) {
+        await origin.removeItem(key);
+        return;
+      }
+
+      await appService.orm.connect(async (db) => {
+        await db
+          .employeeConfig()
+          .where((c) => [expr.eq(c.employeeId, info.employeeId), expr.eq(c.code, key)])
+          .delete();
+      });
+    },
+  }));
+
+  // Logger
+  useLogger().configure((origin) => ({
+    async write(severity, ...data) {
+      if (env.DEV) {
+        await origin.write(severity, ...data);
+        return;
+      }
+
+      try {
+        const message = data.map((d) => (typeof d === "string" ? d : jsonStringify(d))).join(" ");
+
+        await appService.orm.connect(async (db) => {
+          await db._log().insert([
+            {
+              clientName: "client-admin",
+              dateTime: new DateTime(),
+              severity,
+              message,
+              employeeId: auth.authInfo()?.employeeId,
+            },
+          ]);
+        });
+      } catch (err) {
+        await origin.write(severity, ...data);
+        await origin.write("error", "로그 저장 실패:", err);
+      }
+    },
+  }));
+
+  // SharedData
+  configureSharedData();
+
+  return (
+    <HashRouter>
+      <Route path="/" component={App}>
+        <Route path="/" component={() => <Navigate href="/login" />} />
+        <Route path="/login" component={LoginView} />
+        <Route path="/home" component={HomeView}>
+          <Route path="/" component={() => <Navigate href="/home/main" />} />
+          <For each={appStructure.usableRoutes()}>
+            {(r) => <Route path={r.path} component={r.component} />}
+          </For>
+          <Route path="*" component={NotFoundView} />
+        </Route>
+        <Route path="*" component={NotFoundView} />
+      </Route>
+    </HashRouter>
+  );
+}
+
+render(
+  () => (
+    <SystemProvider clientName="client-admin">
+      <AppServiceProvider>
+        <AuthProvider>
+          <AppStructureProvider>
+            <PrintProvider>
+              <DialogProvider>
+                <AppRoot />
+              </DialogProvider>
+            </PrintProvider>
+          </AppStructureProvider>
+        </AuthProvider>
+      </AppServiceProvider>
+    </SystemProvider>
+  ),
+  document.getElementById("root")!,
+);

package/templates/init/packages/client-admin/src/providers/AppServiceProvider.tsx.hbs

@@ -0,0 +1,103 @@
+import {
+  createContext,
+  createSignal,
+  onMount,
+  Show,
+  useContext,
+  type ParentComponent,
+} from "solid-js";
+import { useServiceClient } from "@simplysm/solid";
+import {
+  createOrmClientConnector,
+  type RemoteService,
+  type ServiceClient,
+} from "@simplysm/service-client";
+import type {
+  AuthServiceMethods,
+  DevServiceMethods,
+  EmployeeServiceMethods,
+} from "@{{projectName}}/server";
+import { MainDbContext, type MainDbContext as MainDbContextType } from "@{{projectName}}/db-main";
+
+export interface IAppServiceClient {
+  auth: RemoteService<AuthServiceMethods>;
+  dev: RemoteService<DevServiceMethods>;
+  employee: RemoteService<EmployeeServiceMethods>;
+  sc: ServiceClient;
+  orm: {
+    connect: <R>(
+      fn: (db: MainDbContextType) => Promise<R> | R,
+      connOpt?: { configName?: string },
+    ) => Promise<R>;
+    connectWithoutTransaction: <R>(
+      fn: (db: MainDbContextType) => Promise<R> | R,
+      connOpt?: { configName?: string },
+    ) => Promise<R>;
+  };
+}
+
+const AppServiceContext = createContext<IAppServiceClient>();
+
+export const AppServiceProvider: ParentComponent = (props) => {
+  const sc = useServiceClient();
+  const [ready, setReady] = createSignal(false);
+
+  let value: IAppServiceClient;
+
+  onMount(async () => {
+    await sc.connect();
+    document.querySelector(".app-loading")?.remove();
+
+    const client = sc.get();
+    const connector = createOrmClientConnector(client);
+
+    const ormHelper = {
+      connect: async <R,>(
+        fn: (db: MainDbContextType) => Promise<R> | R,
+        connOpt?: { configName?: string },
+      ) => {
+        return connector.connect(
+          {
+            dbContextDef: MainDbContext,
+            connOpt: { configName: connOpt?.configName ?? "default" },
+          },
+          fn,
+        );
+      },
+      connectWithoutTransaction: async <R,>(
+        fn: (db: MainDbContextType) => Promise<R> | R,
+        connOpt?: { configName?: string },
+      ) => {
+        return connector.connectWithoutTransaction(
+          {
+            dbContextDef: MainDbContext,
+            connOpt: { configName: connOpt?.configName ?? "default" },
+          },
+          fn,
+        );
+      },
+    };
+
+    value = {
+      auth: client.getService<AuthServiceMethods>("AuthService"),
+      dev: client.getService<DevServiceMethods>("DevService"),
+      employee: client.getService<EmployeeServiceMethods>("EmployeeService"),
+      sc: client,
+      orm: ormHelper,
+    };
+
+    setReady(true);
+  });
+
+  return (
+    <Show when={ready()}>
+      <AppServiceContext.Provider value={value!}>{props.children}</AppServiceContext.Provider>
+    </Show>
+  );
+};
+
+export function useAppService(): IAppServiceClient {
+  const ctx = useContext(AppServiceContext);
+  if (!ctx) throw new Error("AppServiceProvider is required.");
+  return ctx;
+}

package/templates/init/packages/client-admin/src/providers/AppStructureProvider.tsx

@@ -0,0 +1,84 @@
+import { lazy } from "solid-js";
+import { createAppStructure } from "@simplysm/solid";
+import { useAuth } from "./AuthProvider";
+
+const MainView = lazy(() =>
+  import("../views/home/main/MainView").then((m) => ({ default: m.MainView })),
+);
+const MyInfoDetail = lazy(() =>
+  import("../views/home/my-info/MyInfoDetail").then((m) => ({ default: m.MyInfoDetail })),
+);
+const EmployeeSheet = lazy(() =>
+  import("../views/home/base/employee/EmployeeSheet").then((m) => ({ default: m.EmployeeSheet })),
+);
+const RolePermissionView = lazy(() =>
+  import("../views/home/base/role-permission/RolePermissionView").then((m) => ({
+    default: m.RolePermissionView,
+  })),
+);
+const SystemLogSheet = lazy(() =>
+  import("../views/home/system/system-log/SystemLogSheet").then((m) => ({
+    default: m.SystemLogSheet,
+  })),
+);
+
+export const { AppStructureProvider, useAppStructure } = createAppStructure(() => {
+  const auth = useAuth();
+  return {
+    permRecord: () => auth.authInfo()?.permissions,
+    items: [
+      {
+        code: "home",
+        title: "홈",
+        children: [
+          {
+            code: "main",
+            title: "메인",
+            component: MainView,
+          },
+          {
+            code: "my-info",
+            title: "설정",
+            component: MyInfoDetail,
+            isNotMenu: true,
+          },
+          {
+            code: "base",
+            title: "기준정보",
+            children: [
+              {
+                code: "employee",
+                title: "직원",
+                component: EmployeeSheet,
+                perms: ["use", "edit"],
+                subPerms: [
+                  { title: "인증정보", code: "auth", perms: ["use", "edit"] },
+                  { title: "개인정보", code: "personal", perms: ["use", "edit"] },
+                  { title: "급여정보", code: "payroll", perms: ["use", "edit"] },
+                ],
+              },
+              {
+                code: "role-permission",
+                title: "권한그룹",
+                component: RolePermissionView,
+                perms: ["use", "edit"],
+              },
+            ],
+          },
+          {
+            code: "system",
+            title: "시스템",
+            children: [
+              {
+                code: "system-log",
+                title: "시스템로그",
+                component: SystemLogSheet,
+                perms: ["use"],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+});

package/templates/init/packages/client-admin/src/providers/AuthProvider.tsx.hbs

@@ -0,0 +1,71 @@
+import { createContext, useContext, type Accessor, type ParentComponent } from "solid-js";
+import { createSignal } from "solid-js";
+import { useLocalStorage } from "@simplysm/solid";
+import { useAppService } from "./AppServiceProvider";
+import type { IAuthData } from "@{{projectName}}/server";
+
+interface IAuthContextValue {
+  authInfo: Accessor<IAuthData | undefined>;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+  tryReloadAuth: () => Promise<boolean>;
+}
+
+const AuthContext = createContext<IAuthContextValue>();
+
+export const AuthProvider: ParentComponent = (props) => {
+  const appService = useAppService();
+  const [authInfo, setAuthInfo] = createSignal<IAuthData>();
+  const [token, setToken] = useLocalStorage<string | undefined>("auth-token");
+
+  const login = async (email: string, password: string) => {
+    const result = await appService.auth.login(email, password);
+
+    const { token: newToken, ...authData } = result;
+    setToken(newToken);
+    await appService.sc.auth(newToken);
+
+    setAuthInfo(authData);
+  };
+
+  const logout = () => {
+    setToken(undefined);
+    setAuthInfo(undefined);
+  };
+
+  const tryReloadAuth = async (): Promise<boolean> => {
+    const currentToken = token();
+    if (currentToken == null || currentToken === "") return false;
+
+    try {
+      await appService.sc.auth(currentToken);
+
+      const result = await appService.auth.refresh();
+
+      const { token: newToken, ...authData } = result;
+      setToken(newToken);
+      await appService.sc.auth(newToken);
+
+      setAuthInfo(authData);
+
+      return true;
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn("Failed to reload auth:", err);
+      setToken(undefined);
+      return false;
+    }
+  };
+
+  return (
+    <AuthContext.Provider value=\{{ authInfo, login, logout, tryReloadAuth }}>
+      {props.children}
+    </AuthContext.Provider>
+  );
+};
+
+export function useAuth(): IAuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("AuthProvider is required.");
+  return ctx;
+}

package/templates/init/packages/client-admin/src/providers/configureSharedData.ts.hbs

@@ -0,0 +1,67 @@
+import { useSharedData } from "@simplysm/solid";
+import { expr } from "@{{projectName}}/db-main";
+import { useAppService } from "./AppServiceProvider";
+
+export type EmployeeSharedItem = {
+  id: number;
+  name: string;
+  email: string | undefined;
+  isDeleted: boolean;
+};
+
+export type RoleSharedItem = {
+  id: number;
+  name: string;
+  isDeleted: boolean;
+};
+
+export type AppSharedData = {
+  employee: EmployeeSharedItem;
+  role: RoleSharedItem;
+};
+
+export function configureSharedData() {
+  const appService = useAppService();
+
+  useSharedData<AppSharedData>().configure((_origin) => ({
+    employee: {
+      fetch: async (changeKeys) => {
+        return appService.orm.connect(async (db) => {
+          let qr = db.employee().select((item) => ({
+            id: item.id,
+            name: item.name,
+            email: item.email,
+            isDeleted: item.isDeleted,
+          }));
+          if (changeKeys) {
+            qr = qr.where((item) => [expr.in(item.id, changeKeys)]);
+          }
+          return qr.result();
+        });
+      },
+      orderBy: [[(item) => item.name, "asc"]],
+      getKey: (item) => item.id,
+      getSearchText: (item) => item.name,
+      getIsHidden: (item) => item.isDeleted,
+    },
+    role: {
+      fetch: async (changeKeys) => {
+        return appService.orm.connect(async (db) => {
+          let qr = db.role().select((item) => ({
+            id: item.id,
+            name: item.name,
+            isDeleted: item.isDeleted,
+          }));
+          if (changeKeys) {
+            qr = qr.where((item) => [expr.in(item.id, changeKeys)]);
+          }
+          return qr.result();
+        });
+      },
+      orderBy: [[(item) => item.name, "asc"]],
+      getKey: (item) => item.id,
+      getSearchText: (item) => item.name,
+      getIsHidden: (item) => item.isDeleted,
+    },
+  }));
+}

package/templates/init/packages/client-admin/src/views/auth/LoginView.tsx

@@ -0,0 +1,132 @@
+import { createSignal, onMount } from "solid-js";
+import { createStore } from "solid-js/store";
+import { useNavigate } from "@solidjs/router";
+import {
+  BusyContainer,
+  Button,
+  Card,
+  FormGroup,
+  Icon,
+  TextInput,
+  ThemeToggle,
+  useLocalStorage,
+  useNotification,
+} from "@simplysm/solid";
+import { useAuth } from "../../providers/AuthProvider";
+import clsx from "clsx";
+import { IconLock, IconMail } from "@tabler/icons-solidjs";
+
+type Data = {
+  email?: string;
+  password?: string;
+};
+
+export function LoginView() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+  const noti = useNotification();
+
+  const [busyCount, setBusyCount] = createSignal(0);
+  const [ready, setReady] = createSignal(false);
+
+  const [lastEmail, setLastEmail] = useLocalStorage<string | undefined>("last-login-email");
+  const [data, setData] = createStore<Data>({ email: lastEmail() });
+
+  onMount(async () => {
+    const ok = await auth.tryReloadAuth();
+    if (ok) {
+      navigate("/home/main", { replace: true });
+      return;
+    }
+    setReady(true);
+  });
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    if (busyCount() > 0) return;
+
+    const currEmail = data.email!;
+    const currPassword = data.password!;
+
+    setBusyCount((c) => c + 1);
+    try {
+      await auth.login(currEmail, currPassword);
+      setLastEmail(currEmail);
+      navigate("/home/main", { replace: true });
+    } catch (err) {
+      noti.error(err, "로그인 오류");
+    }
+    setBusyCount((c) => c - 1);
+  };
+
+  return (
+    <BusyContainer
+      ready={ready()}
+      busy={busyCount() > 0}
+      class={clsx("flex items-center justify-center", "pb-64", "bg-base-100 dark:bg-base-900")}
+    >
+      <div class={"max-w-sm"}>
+        {/* Logo */}
+        <div class={clsx("flex justify-center", "mb-4", "animate-fade-in")}>
+          <img src="assets/logo.png" alt="logo" class="scale-75" />
+        </div>
+
+        <Card class={clsx("rounded-2xl p-8", "animate-fade-in [animation-delay:0.3s]")}>
+          {/* Form */}
+          <form onSubmit={handleSubmit}>
+            <FormGroup class={"w-full"}>
+              <FormGroup.Item>
+                <TextInput
+                  class="w-full"
+                  type="email"
+                  placeholder="이메일을 입력하세요"
+                  required
+                  touchMode
+                  size="lg"
+                  autocomplete="employeename"
+                  value={data.email}
+                  onValueChange={(v) => setData("email", v)}
+                >
+                  <TextInput.Prefix>
+                    <Icon icon={IconMail} />
+                  </TextInput.Prefix>
+                </TextInput>
+              </FormGroup.Item>
+              <FormGroup.Item>
+                <TextInput
+                  required
+                  touchMode
+                  class="w-full"
+                  type="password"
+                  placeholder="비밀번호를 입력하세요"
+                  size="lg"
+                  autocomplete="current-password"
+                  value={data.password}
+                  onValueChange={(v) => setData("password", v)}
+                >
+                  <TextInput.Prefix>
+                    <Icon icon={IconLock} />
+                  </TextInput.Prefix>
+                </TextInput>
+              </FormGroup.Item>
+
+              <FormGroup.Item>
+                <Button
+                  theme="primary"
+                  variant="solid"
+                  class="w-full"
+                  type="submit"
+                  size="xl"
+                  disabled={busyCount() > 0}
+                >
+                  로그인
+                </Button>
+              </FormGroup.Item>
+            </FormGroup>
+          </form>
+        </Card>
+      </div>
+      <ThemeToggle class="fixed bottom-4 right-4" />
+    </BusyContainer>
+  );
+}