@things-factory/organization 10.1.222 → 10.1.226

package/dist-client/pages/employee-profile/my-employee-profile-page.js

@@ -0,0 +1,282 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/list-state/ox-empty-note.js';
+import '@operato/list-state/ox-page-state.js';
+import gql from 'graphql-tag';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { PageView } from '@operato/shell';
+import { ButtonStyles, DocumentPageStyles, FormFieldStyles } from '@operato/styles';
+import { PROFILE_SECTIONS, profileFormOf, profileInputOf } from './employee-profile-form';
+const PROFILE_FIELDS = `
+  id
+  summary
+  skills
+  educations { school major degree startedOn endedOn }
+  certificates { name issuer acquiredOn }
+  careers { company department position startedOn endedOn duties }
+  projects { name client startedOn endedOn role duties technologies }
+  updatedAt
+`;
+/**
+ * 내 프로필 — the employee writes their own career profile: a summary, skills, and the rows of education,
+ * certificates, past jobs and projects; sales attaches it to quotations (ADR-0169 decisions 2 · 5). Saved whole.
+ * An account not linked to an employee record has no profile to write, and is told so before anything is typed.
+ */
+let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.form = profileFormOf(null);
+        /** Whether the account is linked to an employee record - unknown until read. */
+        this.linked = null;
+        this.loading = false;
+        this.error = null;
+        this.busy = false;
+    }
+    static { this.styles = [
+        FormFieldStyles,
+        ButtonStyles,
+        DocumentPageStyles,
+        css `
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+        font-size: var(--ui-t-micro, 11px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      label > :is(input, textarea) {
+        font-size: var(--ui-t-body, 13px);
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+      }
+      input,
+      textarea {
+        box-sizing: border-box;
+        width: 100%;
+        font-family: inherit;
+      }
+      input {
+        height: var(--form-element-height-medium, 32px);
+      }
+      textarea {
+        min-height: 72px;
+        resize: vertical;
+      }
+      textarea.summary {
+        min-height: 120px;
+      }
+      .hint {
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      /* A row of a section: its fields in a grid, the button that takes it away at its end. */
+      .row {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: var(--spacing-large, 12px);
+        align-items: start;
+        padding: var(--spacing-large, 12px) 0;
+        border-top: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+      }
+      .row:first-of-type {
+        border-top: 0;
+        padding-top: 0;
+      }
+      .fields {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      }
+      .fields .wide {
+        grid-column: 1 / -1;
+      }
+      .row > button {
+        margin-top: 18px;
+      }
+      .empty {
+        margin: 0;
+        font-size: var(--ui-t-body, 13px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      @media (pointer: coarse) {
+        input,
+        textarea {
+          font-size: 16px;
+        }
+      }
+    `
+    ]; }
+    get context() {
+        return {
+            title: i18next.t('title.my-employee-profile'),
+            frame: 'document',
+            actions: this.linked && !this.busy ? [{ title: i18next.t('button.save'), icon: 'save', emphasis: { raised: true }, action: () => this.save() }] : []
+        };
+    }
+    async pageUpdated(changes) {
+        if (this.active && changes.active)
+            this.load();
+    }
+    async load() {
+        this.loading = true;
+        this.error = null;
+        try {
+            const response = await client.query({
+                query: gql `
+          query {
+            myEmployees { id }
+            myEmployeeProfile { ${PROFILE_FIELDS} }
+          }
+        `,
+                fetchPolicy: 'no-cache'
+            });
+            if (response.errors?.length)
+                throw response.errors[0];
+            this.linked = (response.data?.myEmployees ?? []).length > 0;
+            this.form = profileFormOf(response.data?.myEmployeeProfile);
+        }
+        catch (error) {
+            this.error = error;
+        }
+        finally {
+            this.loading = false;
+            this.updateContext();
+        }
+    }
+    async save() {
+        this.busy = true;
+        this.updateContext();
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($profile: EmployeeProfileInput!) {
+            saveMyEmployeeProfile(profile: $profile) { ${PROFILE_FIELDS} }
+          }
+        `,
+                variables: { profile: profileInputOf(this.form) }
+            });
+            if (response.errors?.length)
+                throw response.errors[0];
+            this.form = profileFormOf(response.data.saveMyEmployeeProfile);
+            notify({ message: i18next.t('text.saved') });
+        }
+        catch (error) {
+            notify({ level: 'error', message: error?.message ?? String(error) });
+        }
+        finally {
+            this.busy = false;
+            this.updateContext();
+        }
+    }
+    render() {
+        const form = this.form;
+        const set = (patch) => (this.form = { ...form, ...patch });
+        return html `<ox-page-state .loading=${this.loading && this.linked === null} .error=${this.linked === null ? this.error : null} @retry=${() => this.load()}>
+      ${this.linked === false
+            ? html `<ox-empty-note
+            icon="badge"
+            title=${i18next.t('text.employee-profile-not-linked-title')}
+            description=${i18next.t('text.employee-profile-not-linked-description')}
+          ></ox-empty-note>`
+            : this.linked
+                ? html `<div class="page">
+              <section class="page-section">
+                <header class="page-section-header"><h3>${i18next.t('label.employee-profile-summary')}</h3></header>
+                <textarea
+                  class="summary"
+                  aria-label=${i18next.t('label.employee-profile-summary')}
+                  .value=${form.summary}
+                  ?disabled=${this.busy}
+                  @input=${(e) => set({ summary: e.target.value })}
+                ></textarea>
+              </section>
+
+              <section class="page-section">
+                <header class="page-section-header"><h3>${i18next.t('label.employee-profile-skills')}</h3></header>
+                <input
+                  aria-label=${i18next.t('label.employee-profile-skills')}
+                  .value=${form.skills}
+                  ?disabled=${this.busy}
+                  @input=${(e) => set({ skills: e.target.value })}
+                />
+                <span class="hint">${i18next.t('text.employee-profile-skills-hint')}</span>
+              </section>
+
+              ${PROFILE_SECTIONS.map(section => this.renderSection(section.key, section.title, section.fields))}
+            </div>`
+                : nothing}
+    </ox-page-state>`;
+    }
+    renderSection(key, title, fields) {
+        const rows = this.form[key];
+        const setRows = (next) => (this.form = { ...this.form, [key]: next });
+        const change = (index, name, value) => setRows(rows.map((row, at) => (at === index ? { ...row, [name]: value } : row)));
+        const blank = () => Object.fromEntries(fields.map(field => [field.name, '']));
+        return html `<section class="page-section">
+      <header class="page-section-header">
+        <h3>${i18next.t(title)}</h3>
+        <div class="page-section-actions">
+          <button ?disabled=${this.busy} @click=${() => setRows([...rows, blank()])}><md-icon>add</md-icon>${i18next.t('button.add')}</button>
+        </div>
+      </header>
+      ${rows.length
+            ? rows.map((row, index) => html `<div class="row">
+              <div class="fields">
+                ${fields.map(field => field.input === 'textarea'
+                ? html `<label class="wide"
+                        >${i18next.t(field.label)}
+                        <textarea .value=${row[field.name] ?? ''} ?disabled=${this.busy} @input=${(e) => change(index, field.name, e.target.value)}></textarea>
+                      </label>`
+                : html `<label
+                        >${i18next.t(field.label)}
+                        <input
+                          type=${field.input ?? 'text'}
+                          .value=${row[field.name] ?? ''}
+                          ?disabled=${this.busy}
+                          @input=${(e) => change(index, field.name, e.target.value)}
+                        />
+                      </label>`)}
+              </div>
+              <button
+                quiet
+                icon-only
+                title=${i18next.t('button.delete')}
+                aria-label=${i18next.t('button.delete')}
+                ?disabled=${this.busy}
+                @click=${() => setRows(rows.filter((_, at) => at !== index))}
+              >
+                <md-icon>close</md-icon>
+              </button>
+            </div>`)
+            : html `<p class="empty">${i18next.t('text.employee-profile-no-rows')}</p>`}
+    </section>`;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MyEmployeeProfilePage.prototype, "form", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MyEmployeeProfilePage.prototype, "linked", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MyEmployeeProfilePage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MyEmployeeProfilePage.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MyEmployeeProfilePage.prototype, "busy", void 0);
+MyEmployeeProfilePage = __decorate([
+    customElement('my-employee-profile-page')
+], MyEmployeeProfilePage);
+export { MyEmployeeProfilePage };
+//# sourceMappingURL=my-employee-profile-page.js.map

package/dist-client/pages/employee-profile/my-employee-profile-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-employee-profile-page.js","sourceRoot":"","sources":["../../../client/pages/employee-profile/my-employee-profile-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/list-state/ox-empty-note.js'\nimport '@operato/list-state/ox-page-state.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { PageView } from '@operato/shell'\nimport { ButtonStyles, DocumentPageStyles, FormFieldStyles } from '@operato/styles'\n\nimport { PROFILE_SECTIONS, profileFormOf, profileInputOf, type ProfileField, type ProfileForm, type ProfileSectionKey } from './employee-profile-form'\n\nconst PROFILE_FIELDS = `\n  id\n  summary\n  skills\n  educations { school major degree startedOn endedOn }\n  certificates { name issuer acquiredOn }\n  careers { company department position startedOn endedOn duties }\n  projects { name client startedOn endedOn role duties technologies }\n  updatedAt\n`\n\n/**\n * 내 프로필 — the employee writes their own career profile: a summary, skills, and the rows of education,\n * certificates, past jobs and projects; sales attaches it to quotations (ADR-0169 decisions 2 · 5). Saved whole.\n * An account not linked to an employee record has no profile to write, and is told so before anything is typed.\n */\n@customElement('my-employee-profile-page')\nexport class MyEmployeeProfilePage extends localize(i18next)(PageView) {\n  static styles = [\n    FormFieldStyles,\n    ButtonStyles,\n    DocumentPageStyles,\n    css`\n      label {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small, 4px);\n        font-size: var(--ui-t-micro, 11px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n      label > :is(input, textarea) {\n        font-size: var(--ui-t-body, 13px);\n        color: var(--ui-ink, var(--md-sys-color-on-surface));\n      }\n      input,\n      textarea {\n        box-sizing: border-box;\n        width: 100%;\n        font-family: inherit;\n      }\n      input {\n        height: var(--form-element-height-medium, 32px);\n      }\n      textarea {\n        min-height: 72px;\n        resize: vertical;\n      }\n      textarea.summary {\n        min-height: 120px;\n      }\n      .hint {\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n      /* A row of a section: its fields in a grid, the button that takes it away at its end. */\n      .row {\n        display: grid;\n        grid-template-columns: 1fr auto;\n        gap: var(--spacing-large, 12px);\n        align-items: start;\n        padding: var(--spacing-large, 12px) 0;\n        border-top: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n      }\n      .row:first-of-type {\n        border-top: 0;\n        padding-top: 0;\n      }\n      .fields {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n        gap: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n      }\n      .fields .wide {\n        grid-column: 1 / -1;\n      }\n      .row > button {\n        margin-top: 18px;\n      }\n      .empty {\n        margin: 0;\n        font-size: var(--ui-t-body, 13px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n      @media (pointer: coarse) {\n        input,\n        textarea {\n          font-size: 16px;\n        }\n      }\n    `\n  ]\n\n  @state() form: ProfileForm = profileFormOf(null)\n  /** Whether the account is linked to an employee record - unknown until read. */\n  @state() linked: boolean | null = null\n  @state() loading = false\n  @state() error: unknown = null\n  @state() busy = false\n\n  get context() {\n    return {\n      title: i18next.t('title.my-employee-profile'),\n      frame: 'document',\n      actions: this.linked && !this.busy ? [{ title: i18next.t('button.save'), icon: 'save', emphasis: { raised: true }, action: () => this.save() }] : []\n    }\n  }\n\n  async pageUpdated(changes: any) {\n    if ((this as any).active && changes.active) this.load()\n  }\n\n  private async load() {\n    this.loading = true\n    this.error = null\n    try {\n      const response = await client.query({\n        query: gql`\n          query {\n            myEmployees { id }\n            myEmployeeProfile { ${PROFILE_FIELDS} }\n          }\n        `,\n        fetchPolicy: 'no-cache'\n      })\n      if (response.errors?.length) throw response.errors[0]\n      this.linked = (response.data?.myEmployees ?? []).length > 0\n      this.form = profileFormOf(response.data?.myEmployeeProfile)\n    } catch (error) {\n      this.error = error\n    } finally {\n      this.loading = false\n      this.updateContext()\n    }\n  }\n\n  private async save() {\n    this.busy = true\n    this.updateContext()\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ($profile: EmployeeProfileInput!) {\n            saveMyEmployeeProfile(profile: $profile) { ${PROFILE_FIELDS} }\n          }\n        `,\n        variables: { profile: profileInputOf(this.form) }\n      })\n      if (response.errors?.length) throw response.errors[0]\n      this.form = profileFormOf(response.data.saveMyEmployeeProfile)\n      notify({ message: i18next.t('text.saved') })\n    } catch (error: any) {\n      notify({ level: 'error', message: error?.message ?? String(error) })\n    } finally {\n      this.busy = false\n      this.updateContext()\n    }\n  }\n\n  render() {\n    const form = this.form\n    const set = (patch: Partial<ProfileForm>) => (this.form = { ...form, ...patch })\n\n    return html`<ox-page-state .loading=${this.loading && this.linked === null} .error=${this.linked === null ? this.error : null} @retry=${() => this.load()}>\n      ${this.linked === false\n        ? html`<ox-empty-note\n            icon=\"badge\"\n            title=${i18next.t('text.employee-profile-not-linked-title')}\n            description=${i18next.t('text.employee-profile-not-linked-description')}\n          ></ox-empty-note>`\n        : this.linked\n          ? html`<div class=\"page\">\n              <section class=\"page-section\">\n                <header class=\"page-section-header\"><h3>${i18next.t('label.employee-profile-summary')}</h3></header>\n                <textarea\n                  class=\"summary\"\n                  aria-label=${i18next.t('label.employee-profile-summary')}\n                  .value=${form.summary}\n                  ?disabled=${this.busy}\n                  @input=${(e: any) => set({ summary: e.target.value })}\n                ></textarea>\n              </section>\n\n              <section class=\"page-section\">\n                <header class=\"page-section-header\"><h3>${i18next.t('label.employee-profile-skills')}</h3></header>\n                <input\n                  aria-label=${i18next.t('label.employee-profile-skills')}\n                  .value=${form.skills}\n                  ?disabled=${this.busy}\n                  @input=${(e: any) => set({ skills: e.target.value })}\n                />\n                <span class=\"hint\">${i18next.t('text.employee-profile-skills-hint')}</span>\n              </section>\n\n              ${PROFILE_SECTIONS.map(section => this.renderSection(section.key, section.title, section.fields))}\n            </div>`\n          : nothing}\n    </ox-page-state>`\n  }\n\n  private renderSection(key: ProfileSectionKey, title: string, fields: ProfileField[]) {\n    const rows = this.form[key]\n    const setRows = (next: typeof rows) => (this.form = { ...this.form, [key]: next })\n    const change = (index: number, name: string, value: string) => setRows(rows.map((row, at) => (at === index ? { ...row, [name]: value } : row)))\n    const blank = () => Object.fromEntries(fields.map(field => [field.name, '']))\n\n    return html`<section class=\"page-section\">\n      <header class=\"page-section-header\">\n        <h3>${i18next.t(title)}</h3>\n        <div class=\"page-section-actions\">\n          <button ?disabled=${this.busy} @click=${() => setRows([...rows, blank()])}><md-icon>add</md-icon>${i18next.t('button.add')}</button>\n        </div>\n      </header>\n      ${rows.length\n        ? rows.map(\n            (row, index) => html`<div class=\"row\">\n              <div class=\"fields\">\n                ${fields.map(field =>\n                  field.input === 'textarea'\n                    ? html`<label class=\"wide\"\n                        >${i18next.t(field.label)}\n                        <textarea .value=${row[field.name] ?? ''} ?disabled=${this.busy} @input=${(e: any) => change(index, field.name, e.target.value)}></textarea>\n                      </label>`\n                    : html`<label\n                        >${i18next.t(field.label)}\n                        <input\n                          type=${field.input ?? 'text'}\n                          .value=${row[field.name] ?? ''}\n                          ?disabled=${this.busy}\n                          @input=${(e: any) => change(index, field.name, e.target.value)}\n                        />\n                      </label>`\n                )}\n              </div>\n              <button\n                quiet\n                icon-only\n                title=${i18next.t('button.delete')}\n                aria-label=${i18next.t('button.delete')}\n                ?disabled=${this.busy}\n                @click=${() => setRows(rows.filter((_, at) => at !== index))}\n              >\n                <md-icon>close</md-icon>\n              </button>\n            </div>`\n          )\n        : html`<p class=\"empty\">${i18next.t('text.employee-profile-no-rows')}</p>`}\n    </section>`\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -1 +1 @@
-export default function route(page: string): "approval-line-list" | "common-approval-line-templates-page" | "my-approval-line-templates-page" | "employee-list" | "department-list" | undefined;
+export default function route(page: string): "approval-line-list" | "common-approval-line-templates-page" | "my-approval-line-templates-page" | "employee-list" | "department-list" | "my-employee-profile" | "employee-profile-list" | undefined;

package/dist-client/route.js

@@ -6,6 +6,13 @@ export default function route(page) {
         case 'department-list':
             import('./pages/department/department-list-page');
             return page;
+        /* The employee writes their own profile; sales downloads the chosen ones for a quotation (ADR-0169). */
+        case 'my-employee-profile':
+            import('./pages/employee-profile/my-employee-profile-page');
+            return page;
+        case 'employee-profile-list':
+            import('./pages/employee-profile/employee-profile-list-page');
+            return page;
         /* 공용과 내 것을 한 목록에 — 아래 둘을 대신한다. */
         case 'approval-line-list':
             import('./pages/approval-line/approval-line-list-page');

package/dist-client/route.js.map

@@ -1 +1 @@
-{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,eAAe;YAClB,MAAM,CAAC,qCAAqC,CAAC,CAAA;YAC7C,OAAO,IAAI,CAAA;QAEb,KAAK,iBAAiB;YACpB,MAAM,CAAC,yCAAyC,CAAC,CAAA;YACjD,OAAO,IAAI,CAAA;QAEb,kCAAkC;QAClC,KAAK,oBAAoB;YACvB,MAAM,CAAC,+CAA+C,CAAC,CAAA;YACvD,OAAO,IAAI,CAAA;QAEb;;;;WAIG;QACH,KAAK,qCAAqC;YACxC,MAAM,CAAC,2DAA2D,CAAC,CAAA;YACnE,OAAO,IAAI,CAAA;QAEb,KAAK,iCAAiC;YACpC,MAAM,CAAC,uDAAuD,CAAC,CAAA;YAC/D,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n  switch (page) {\n    case 'employee-list':\n      import('./pages/employee/employee-list-page')\n      return page\n\n    case 'department-list':\n      import('./pages/department/department-list-page')\n      return page\n\n    /* 공용과 내 것을 한 목록에 — 아래 둘을 대신한다. */\n    case 'approval-line-list':\n      import('./pages/approval-line/approval-line-list-page')\n      return page\n\n    /*\n     * 아래 두 화면은 아직 살아 있다. operato-dataset · operato-gangsters · operato-twin 의 메뉴가 이 두\n     * 주소를 가리킨다. 지금 지우면 그 세 앱의 메뉴가 아무 데도 안 닿는다. operato-plant 만 새 화면으로\n     * 돌렸고, 나머지가 옮겨 온 뒤에 지운다.\n     */\n    case 'common-approval-line-templates-page':\n      import('./pages/approval-line/common-approval-line-templates-page')\n      return page\n\n    case 'my-approval-line-templates-page':\n      import('./pages/approval-line/my-approval-line-templates-page')\n      return page\n  }\n}\n"]}
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,eAAe;YAClB,MAAM,CAAC,qCAAqC,CAAC,CAAA;YAC7C,OAAO,IAAI,CAAA;QAEb,KAAK,iBAAiB;YACpB,MAAM,CAAC,yCAAyC,CAAC,CAAA;YACjD,OAAO,IAAI,CAAA;QAEb,wGAAwG;QACxG,KAAK,qBAAqB;YACxB,MAAM,CAAC,mDAAmD,CAAC,CAAA;YAC3D,OAAO,IAAI,CAAA;QAEb,KAAK,uBAAuB;YAC1B,MAAM,CAAC,qDAAqD,CAAC,CAAA;YAC7D,OAAO,IAAI,CAAA;QAEb,kCAAkC;QAClC,KAAK,oBAAoB;YACvB,MAAM,CAAC,+CAA+C,CAAC,CAAA;YACvD,OAAO,IAAI,CAAA;QAEb;;;;WAIG;QACH,KAAK,qCAAqC;YACxC,MAAM,CAAC,2DAA2D,CAAC,CAAA;YACnE,OAAO,IAAI,CAAA;QAEb,KAAK,iCAAiC;YACpC,MAAM,CAAC,uDAAuD,CAAC,CAAA;YAC/D,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n  switch (page) {\n    case 'employee-list':\n      import('./pages/employee/employee-list-page')\n      return page\n\n    case 'department-list':\n      import('./pages/department/department-list-page')\n      return page\n\n    /* The employee writes their own profile; sales downloads the chosen ones for a quotation (ADR-0169). */\n    case 'my-employee-profile':\n      import('./pages/employee-profile/my-employee-profile-page')\n      return page\n\n    case 'employee-profile-list':\n      import('./pages/employee-profile/employee-profile-list-page')\n      return page\n\n    /* 공용과 내 것을 한 목록에 — 아래 둘을 대신한다. */\n    case 'approval-line-list':\n      import('./pages/approval-line/approval-line-list-page')\n      return page\n\n    /*\n     * 아래 두 화면은 아직 살아 있다. operato-dataset · operato-gangsters · operato-twin 의 메뉴가 이 두\n     * 주소를 가리킨다. 지금 지우면 그 세 앱의 메뉴가 아무 데도 안 닿는다. operato-plant 만 새 화면으로\n     * 돌렸고, 나머지가 옮겨 온 뒤에 지운다.\n     */\n    case 'common-approval-line-templates-page':\n      import('./pages/approval-line/common-approval-line-templates-page')\n      return page\n\n    case 'my-approval-line-templates-page':\n      import('./pages/approval-line/my-approval-line-templates-page')\n      return page\n  }\n}\n"]}