@simplysm/sd-cli 13.0.71 → 13.0.74

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>
+  );
+}

package/templates/init/packages/client-admin/src/views/home/HomeView.tsx

@@ -0,0 +1,108 @@
+import { createSignal, onMount, Show, Suspense } from "solid-js";
+import { type RouteSectionProps, useLocation, useNavigate } from "@solidjs/router";
+import {
+  BusyContainer,
+  NotificationBell,
+  Sidebar,
+  ThemeToggle,
+  Topbar,
+  useNotification,
+} from "@simplysm/solid";
+import { env } from "@simplysm/core-common";
+import { useAuth } from "../../providers/AuthProvider";
+import { useAppService } from "../../providers/AppServiceProvider";
+import { useAppStructure } from "../../providers/AppStructureProvider";
+
+function HomeContent(props: RouteSectionProps) {
+  const auth = useAuth();
+  const appService = useAppService();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const noti = useNotification();
+  const appStructure = useAppStructure();
+
+  const [ready, setReady] = createSignal(false);
+
+  const titleChain = () => {
+    const chain = appStructure.getTitleChainByHref(location.pathname);
+    // 최상위 그룹(홈) 제외
+    return chain.length > 1 ? chain.slice(1) : chain;
+  };
+
+  const employeeMenus = [
+    {
+      title: "설정",
+      onClick: () => navigate("/home/my-info"),
+    },
+    {
+      title: "로그아웃",
+      onClick: () => {
+        auth.logout();
+        navigate("/login", { replace: true });
+      },
+    },
+  ];
+
+  onMount(async () => {
+    try {
+      // 1. Check auth - reload token only if not already authenticated
+      if (!auth.authInfo()) {
+        const authOk = await auth.tryReloadAuth();
+        if (!authOk) {
+          navigate("/login", { replace: true });
+          return;
+        }
+      }
+
+      await appService.orm.connectWithoutTransaction(async (db) => {
+        await db.initialize();
+      });
+
+      setReady(true);
+    } catch (err) {
+      noti.error(err, "초기화 실패");
+    }
+  });
+
+  return (
+    <BusyContainer ready={ready()}>
+      <Sidebar.Container>
+        <Sidebar>
+          <div class="p-2 px-4">
+            <img src="assets/logo-landscape.png" alt="SIMPLYSM" class="h-9 w-auto" />
+          </div>
+          <Sidebar.User
+            name={auth.authInfo()?.employeeName ?? ""}
+            description={auth.authInfo()?.email ?? ""}
+            menus={employeeMenus}
+          />
+          <Sidebar.Menu menus={appStructure.usableMenus()} class="flex-1" />
+          <div class="pointer-events-none px-2 py-1 text-sm text-black/30 dark:text-white/30">
+            v{env.VER}
+            <Show when={env.DEV}>(dev)</Show>
+          </div>
+        </Sidebar>
+
+        <Topbar.Container>
+          <Topbar>
+            <span class="ml-2 mr-6 text-lg font-bold">{titleChain().join(" > ")}</span>
+            <Topbar.Actions />
+            <div class="flex-1" />
+            <NotificationBell />
+            <ThemeToggle size="sm" />
+          </Topbar>
+
+          <main class="flex-1 overflow-auto">
+            <Suspense fallback={<BusyContainer ready={false} />}>
+              {props.children}
+            </Suspense>
+          </main>
+        </Topbar.Container>
+      </Sidebar.Container>
+    </BusyContainer>
+  );
+}
+
+export function HomeView(props: RouteSectionProps) {
+  return <HomeContent {...props} />;
+}