@things-factory/organization 10.1.223 → 10.1.227

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

@@ -0,0 +1,656 @@
+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 { getLanguages } from '@things-factory/auth-base/dist-client';
+import { addSkills, blankRow, completenessOf, headlineOf, periodLabelOf, PROFILE_SECTIONS, profileFormOf, profileInputOf } from './employee-profile-form';
+import { readerLanguageOf } from './employee-profile-files';
+import { openProfilePreview } from './employee-profile-preview';
+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
+`;
+const SUMMARY_LIMIT = 500;
+/**
+ * 내 프로필 — 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.
+ *
+ * The page is built to be filled in: who it is about and how complete it is stand at the top, each missing essential a
+ * click away; each row is a card whose headline reads like the document's line; a section with nothing yet says what
+ * it is for; and the document itself is one click away (PDF), as sales will hand it in. 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);
+        /** Who the profile is about - the employee record's basics. */
+        this.me = 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;
+        this.updatedAt = null;
+        /** The form as last read or saved - what is written differs from it until saved. */
+        this.saved = JSON.stringify(profileInputOf(profileFormOf(null)));
+    }
+    static { this.styles = [
+        FormFieldStyles,
+        ButtonStyles,
+        DocumentPageStyles,
+        css `
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+        min-width: 0;
+        font-size: var(--ui-t-small, 11.5px);
+        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:not([type='checkbox']) {
+        height: var(--form-element-height-medium, 32px);
+      }
+      textarea {
+        min-height: 72px;
+        resize: vertical;
+        line-height: 1.5;
+      }
+      .muted {
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+
+      /* ── Who it is about, and how far along ─────────────────────────────── */
+      .hero {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
+        gap: var(--spacing-huge, 24px);
+        align-items: center;
+      }
+      .who {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-large, 12px);
+        min-width: 0;
+      }
+      .avatar {
+        flex: none;
+        display: grid;
+        place-items: center;
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        font-size: 22px;
+        font-weight: 700;
+      }
+      .who h2 {
+        margin: 0;
+        font-size: var(--ui-t-headline, 20px);
+        font-weight: 700;
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+      }
+      .who p {
+        margin: 2px 0 0;
+        font-size: var(--ui-t-body, 13px);
+      }
+      .progress {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+      }
+      .progress-head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        font-size: var(--ui-t-small, 11.5px);
+      }
+      .progress-head strong {
+        font-size: var(--ui-t-title, 15px);
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+      }
+      .bar {
+        height: 8px;
+        border-radius: 4px;
+        background: var(--md-sys-color-surface-container-high);
+        overflow: hidden;
+      }
+      .bar > span {
+        display: block;
+        height: 100%;
+        border-radius: 4px;
+        background: var(--md-sys-color-primary);
+        transition: width 0.3s ease;
+      }
+      .missing {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        margin-top: var(--spacing-small, 4px);
+        font-size: var(--ui-t-small, 11.5px);
+      }
+      .hero-foot {
+        grid-column: 1 / -1;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+        padding-top: var(--spacing-large, 12px);
+        border-top: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+        font-size: var(--ui-t-small, 11.5px);
+      }
+      .hero-foot .unsaved {
+        color: var(--md-sys-color-tertiary, var(--md-sys-color-primary));
+        font-weight: 600;
+      }
+      .hero-foot button {
+        margin-left: auto;
+      }
+
+      /* ── A section ─────────────────────────────────────────────────────── */
+      .page-section-header h3 {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+      }
+      .page-section-header h3 md-icon {
+        --md-icon-size: 20px;
+        color: var(--md-sys-color-primary);
+      }
+      .count {
+        min-width: 20px;
+        padding: 1px 7px;
+        border-radius: 10px;
+        background: var(--md-sys-color-surface-container-high);
+        font-size: var(--ui-t-small, 11.5px);
+        font-weight: 600;
+        text-align: center;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .counter {
+        margin-left: auto;
+        font-size: var(--ui-t-small, 11.5px);
+      }
+      .summary textarea {
+        min-height: 132px;
+      }
+
+      /* Skills as chips, the field to add more inside the same box. */
+      .chips {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        min-height: 88px;
+        align-content: flex-start;
+        box-sizing: border-box;
+        padding: var(--spacing-medium, 8px);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--input-field-border-radius, var(--md-sys-shape-corner-small, 4px));
+        background: var(--md-sys-color-surface-container-highest);
+      }
+      .chips:focus-within {
+        border-color: var(--md-sys-color-primary);
+      }
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        height: 26px;
+        padding: 0 4px 0 10px;
+        border-radius: 13px;
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        font-size: var(--ui-t-body, 13px);
+      }
+      .chip button {
+        height: 20px;
+        width: 20px;
+        padding: 0;
+        border: 0;
+        background: transparent;
+      }
+      .chip button md-icon {
+        --md-icon-size: 14px;
+        color: inherit;
+      }
+      .chips input {
+        flex: 1 1 140px;
+        width: auto;
+        height: 26px;
+        border: 0;
+        padding: 0 4px;
+        background: transparent;
+        outline: none;
+      }
+
+      /* A row of a section is a card: its line as the document reads it, then its fields. */
+      .entries {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+      }
+      .entry {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large, 12px);
+      }
+      .entry-head {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+        min-width: 0;
+      }
+      .entry-head strong {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--ui-t-body, 13px);
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+      }
+      .entry-head strong.untitled {
+        font-weight: 400;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .entry-head .period {
+        flex: none;
+        font-size: var(--ui-t-small, 11.5px);
+      }
+      .entry-head button {
+        margin-left: auto;
+      }
+      .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;
+      }
+      .fields .start {
+        grid-column-start: 1;
+      }
+      .end {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: var(--spacing-medium, 8px);
+        align-items: end;
+        min-width: 0;
+      }
+      .ongoing {
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        height: var(--form-element-height-medium, 32px);
+        font-size: var(--ui-t-body, 13px);
+        white-space: nowrap;
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+      }
+      .ongoing input {
+        width: auto;
+      }
+
+      /* A section with nothing yet: what it is for, and the way to begin. */
+      .empty-slot {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-large, 12px);
+        padding: var(--spacing-large, 12px) 16px;
+        border: 1px dashed var(--md-sys-color-outline-variant);
+        border-radius: var(--ui-r, 10px);
+        font-size: var(--ui-t-body, 13px);
+      }
+      .empty-slot button {
+        margin-left: auto;
+      }
+
+      @media (max-width: 720px) {
+        .hero {
+          grid-template-columns: 1fr;
+        }
+        .empty-slot {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+        .empty-slot button {
+          margin-left: 0;
+        }
+      }
+      @media (pointer: coarse) {
+        input,
+        textarea {
+          font-size: 16px;
+        }
+      }
+    `
+    ]; }
+    get dirty() {
+        return JSON.stringify(profileInputOf(this.form)) !== this.saved;
+    }
+    get context() {
+        return {
+            title: i18next.t('title.my-employee-profile'),
+            frame: 'document',
+            actions: this.linked ? [{ 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 name jobPosition jobResponsibility hiredOn department { name } }
+            myEmployeeProfile { ${PROFILE_FIELDS} }
+          }
+        `,
+                fetchPolicy: 'no-cache'
+            });
+            if (response.errors?.length)
+                throw response.errors[0];
+            this.me = response.data?.myEmployees?.[0] ?? null;
+            this.linked = !!this.me;
+            this.hold(response.data?.myEmployeeProfile);
+        }
+        catch (error) {
+            this.error = error;
+        }
+        finally {
+            this.loading = false;
+            this.updateContext();
+        }
+    }
+    hold(profile) {
+        this.form = profileFormOf(profile);
+        this.saved = JSON.stringify(profileInputOf(this.form));
+        this.updatedAt = profile?.updatedAt ?? null;
+    }
+    async save() {
+        if (this.busy)
+            return false;
+        this.busy = true;
+        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.hold(response.data.saveMyEmployeeProfile);
+            notify({ message: i18next.t('text.saved') });
+            return true;
+        }
+        catch (error) {
+            notify({ level: 'error', message: error?.message ?? String(error) });
+            return false;
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    /** The document as sales will hand it in - what is written is saved first, so the preview shows it. */
+    async preview() {
+        if (this.dirty && !(await this.save()))
+            return;
+        const languages = ((await getLanguages()) ?? []);
+        openProfilePreview({ own: true }, languages, readerLanguageOf(languages));
+    }
+    goTo(key) {
+        const section = this.renderRoot.querySelector(`#${key}`);
+        section?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        section?.querySelector('textarea, input:not([type="checkbox"])')?.focus({ preventScroll: true });
+    }
+    render() {
+        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">
+              ${this.renderHero()}
+              <div class="page-section-grid">${this.renderSummary()} ${this.renderSkills()}</div>
+              ${PROFILE_SECTIONS.map(section => this.renderSection(section))}
+            </div>`
+                : nothing}
+    </ox-page-state>`;
+    }
+    renderHero() {
+        const me = this.me ?? {};
+        const { percent, missing } = completenessOf(this.form);
+        const role = [me.jobPosition, me.jobResponsibility].filter(Boolean).join(' / ');
+        const day = (value) => (value ? String(value).slice(0, 10).replace(/-/g, '.') : '');
+        return html `<section class="hero page-card">
+      <div class="who">
+        <div class="avatar" aria-hidden="true">${(me.name ?? '?').trim().slice(0, 1)}</div>
+        <div>
+          <h2>${me.name ?? ''}</h2>
+          <p class="muted">${[me.department?.name, role].filter(Boolean).join(' · ')}</p>
+          ${me.hiredOn ? html `<p class="muted">${i18next.t('label.hired-on')} ${day(me.hiredOn)}</p>` : nothing}
+        </div>
+      </div>
+
+      <div class="progress">
+        <div class="progress-head">
+          <span class="muted">${i18next.t('text.employee-profile-completeness')}</span>
+          <strong>${percent}%</strong>
+        </div>
+        <div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${percent}><span style="width:${percent}%"></span></div>
+        ${missing.length
+            ? html `<div class="missing">
+              <span class="muted">${i18next.t('text.employee-profile-to-fill')}</span>
+              ${missing.map(key => html `<button small quiet @click=${() => this.goTo(key)}>${i18next.t(`label.employee-profile-${key}`)}</button>`)}
+            </div>`
+            : html `<div class="missing muted">${i18next.t('text.employee-profile-ready')}</div>`}
+      </div>
+
+      <div class="hero-foot">
+        ${this.dirty
+            ? html `<span class="unsaved">${i18next.t('text.employee-profile-unsaved')}</span>`
+            : this.updatedAt
+                ? html `<span class="muted">${i18next.t('label.employee-profile-updated-at')} ${day(this.updatedAt)}</span>`
+                : nothing}
+        <button ?disabled=${this.busy} @click=${() => this.preview()}><md-icon>preview</md-icon>${i18next.t('button.employee-profile-preview')}</button>
+      </div>
+    </section>`;
+    }
+    renderSummary() {
+        const summary = this.form.summary;
+        return html `<section id="summary" class="page-section summary">
+      <header class="page-section-header">
+        <h3><md-icon>person</md-icon>${i18next.t('label.employee-profile-summary')}</h3>
+        <span class="counter muted">${summary.length} / ${SUMMARY_LIMIT}</span>
+      </header>
+      <textarea
+        aria-label=${i18next.t('label.employee-profile-summary')}
+        maxlength=${SUMMARY_LIMIT}
+        placeholder=${i18next.t('text.employee-profile-summary-example')}
+        .value=${summary}
+        @input=${(e) => (this.form = { ...this.form, summary: e.target.value })}
+      ></textarea>
+    </section>`;
+    }
+    renderSkills() {
+        const skills = this.form.skills;
+        const add = (input) => {
+            this.form = { ...this.form, skills: addSkills(skills, input.value) };
+            input.value = '';
+        };
+        return html `<section id="skills" class="page-section">
+      <header class="page-section-header">
+        <h3><md-icon>construction</md-icon>${i18next.t('label.employee-profile-skills')}</h3>
+        ${skills.length ? html `<span class="count">${skills.length}</span>` : nothing}
+      </header>
+      <div class="chips" @click=${(e) => e.currentTarget.querySelector('input')?.focus()}>
+        ${skills.map(skill => html `<span class="chip"
+            >${skill}
+            <button
+              unstyled
+              title=${i18next.t('button.delete')}
+              aria-label=${`${i18next.t('button.delete')} ${skill}`}
+              @click=${() => (this.form = { ...this.form, skills: skills.filter(one => one !== skill) })}
+            >
+              <md-icon>close</md-icon>
+            </button></span
+          >`)}
+        <input
+          aria-label=${i18next.t('label.employee-profile-skills')}
+          placeholder=${i18next.t('text.employee-profile-skill-placeholder')}
+          @keydown=${(e) => {
+            const input = e.target;
+            if ((e.key === 'Enter' || e.key === ',') && !e.isComposing) {
+                e.preventDefault();
+                add(input);
+            }
+            else if (e.key === 'Backspace' && !input.value && skills.length) {
+                this.form = { ...this.form, skills: skills.slice(0, -1) };
+            }
+        }}
+          @blur=${(e) => add(e.target)}
+        />
+      </div>
+    </section>`;
+    }
+    renderSection(section) {
+        const rows = this.form[section.key];
+        /* Each change reads the rows as they are now - two inputs before a render must not undo each other. */
+        const current = () => this.form[section.key];
+        const setRows = (next) => (this.form = { ...this.form, [section.key]: next });
+        const change = (index, patch) => setRows(current().map((row, at) => (at === index ? { ...row, ...patch } : row)));
+        const remove = (index) => setRows(current().filter((_, at) => at !== index));
+        /* The newest first, as the document is read; its first field takes the cursor. */
+        const add = async () => {
+            setRows([blankRow(section), ...current()]);
+            await this.updateComplete;
+            this.renderRoot.querySelector(`#${section.key} .entry input`)?.focus();
+        };
+        return html `<section id=${section.key} class="page-section">
+      <header class="page-section-header">
+        <h3><md-icon>${section.icon}</md-icon>${i18next.t(section.title)}</h3>
+        ${rows.length ? html `<span class="count">${rows.length}</span>` : nothing}
+        ${rows.length
+            ? html `<div class="page-section-actions">
+              <button @click=${add}><md-icon>add</md-icon>${i18next.t('button.add')}</button>
+            </div>`
+            : nothing}
+      </header>
+      ${rows.length
+            ? html `<div class="entries">${rows.map((row, index) => this.renderEntry(section, row, index, change, () => remove(index)))}</div>`
+            : html `<div class="empty-slot">
+            <span class="muted">${i18next.t(`text.employee-profile-why-${section.key}`)}</span>
+            <button @click=${add}><md-icon>add</md-icon>${i18next.t('button.add')}</button>
+          </div>`}
+    </section>`;
+    }
+    renderEntry(section, row, index, change, remove) {
+        const headline = headlineOf(section, row);
+        const period = periodLabelOf(row, i18next.t('text.employee-profile-doc-ongoing'));
+        const field = (one) => {
+            const label = i18next.t(one.label);
+            if (one.input === 'textarea') {
+                return html `<label class="wide"
+          >${label}<textarea .value=${row[one.name] ?? ''} @input=${(e) => change(index, { [one.name]: e.target.value })}></textarea
+        ></label>`;
+            }
+            const ended = one.name === 'endedOn' && section.ongoing;
+            const input = html `<input
+        type=${one.input ?? 'text'}
+        .value=${ended && row.ongoing ? '' : (row[one.name] ?? '')}
+        ?disabled=${ended && !!row.ongoing}
+        @input=${(e) => change(index, { [one.name]: e.target.value })}
+      />`;
+            /* A period begins a line of its own, its end beside it. */
+            if (!ended)
+                return html `<label class=${one.name === 'startedOn' ? 'start' : ''}>${label}${input}</label>`;
+            /* The end and 「going on」 share one cell - the period stays on one line. */
+            return html `<div class="end">
+        <label>${label}${input}</label>
+        <label class="ongoing"
+          ><input
+            type="checkbox"
+            .checked=${!!row.ongoing}
+            @change=${(e) => change(index, { ongoing: e.target.checked ? 'true' : '', ...(e.target.checked ? { endedOn: '' } : {}) })}
+          />${i18next.t('label.employee-profile-ongoing')}</label
+        >
+      </div>`;
+        };
+        return html `<div class="entry page-card">
+      <div class="entry-head">
+        <strong class=${headline ? '' : 'untitled'}>${headline || i18next.t('text.employee-profile-new-entry')}</strong>
+        ${period ? html `<span class="period muted">${period}</span>` : nothing}
+        <button quiet icon-only title=${i18next.t('button.delete')} aria-label=${i18next.t('button.delete')} @click=${remove}><md-icon>delete</md-icon></button>
+      </div>
+      <div class="fields">${section.fields.map(field)}</div>
+    </div>`;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MyEmployeeProfilePage.prototype, "form", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MyEmployeeProfilePage.prototype, "me", 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);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MyEmployeeProfilePage.prototype, "updatedAt", void 0);
+MyEmployeeProfilePage = __decorate([
+    customElement('my-employee-profile-page')
+], MyEmployeeProfilePage);
+export { MyEmployeeProfilePage };
+//# sourceMappingURL=my-employee-profile-page.js.map