@things-factory/organization 10.1.226 → 10.1.227

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

@@ -10,7 +10,10 @@ 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';
+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
@@ -21,20 +24,30 @@ const PROFILE_FIELDS = `
   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.
- * An account not linked to an employee record has no profile to write, and is told so before anything is typed.
+ *
+ * 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,
@@ -45,7 +58,8 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
         display: flex;
         flex-direction: column;
         gap: var(--spacing-small, 4px);
-        font-size: var(--ui-t-micro, 11px);
+        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) {
@@ -58,32 +72,218 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
         width: 100%;
         font-family: inherit;
       }
-      input {
+      input:not([type='checkbox']) {
         height: var(--form-element-height-medium, 32px);
       }
       textarea {
         min-height: 72px;
         resize: vertical;
+        line-height: 1.5;
       }
-      textarea.summary {
-        min-height: 120px;
-      }
-      .hint {
-        font-size: var(--ui-t-small, 11.5px);
+      .muted {
         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 {
+
+      /* ── Who it is about, and how far along ─────────────────────────────── */
+      .hero {
         display: grid;
-        grid-template-columns: 1fr auto;
+        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);
-        align-items: start;
-        padding: var(--spacing-large, 12px) 0;
+        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);
       }
-      .row:first-of-type {
-        border-top: 0;
-        padding-top: 0;
+      .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;
@@ -93,13 +293,54 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
       .fields .wide {
         grid-column: 1 / -1;
       }
-      .row > button {
-        margin-top: 18px;
+      .fields .start {
+        grid-column-start: 1;
       }
-      .empty {
-        margin: 0;
+      .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);
-        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        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,
@@ -109,11 +350,14 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
       }
     `
     ]; }
+    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 && !this.busy ? [{ title: i18next.t('button.save'), icon: 'save', emphasis: { raised: true }, action: () => this.save() }] : []
+            actions: this.linked ? [{ title: i18next.t('button.save'), icon: 'save', emphasis: { raised: true }, action: () => this.save() }] : []
         };
     }
     async pageUpdated(changes) {
@@ -127,7 +371,7 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
             const response = await client.query({
                 query: gql `
           query {
-            myEmployees { id }
+            myEmployees { id name jobPosition jobResponsibility hiredOn department { name } }
             myEmployeeProfile { ${PROFILE_FIELDS} }
           }
         `,
@@ -135,8 +379,9 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
             });
             if (response.errors?.length)
                 throw response.errors[0];
-            this.linked = (response.data?.myEmployees ?? []).length > 0;
-            this.form = profileFormOf(response.data?.myEmployeeProfile);
+            this.me = response.data?.myEmployees?.[0] ?? null;
+            this.linked = !!this.me;
+            this.hold(response.data?.myEmployeeProfile);
         }
         catch (error) {
             this.error = error;
@@ -146,9 +391,15 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
             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;
-        this.updateContext();
         try {
             const response = await client.mutate({
                 mutation: gql `
@@ -160,20 +411,31 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
             });
             if (response.errors?.length)
                 throw response.errors[0];
-            this.form = profileFormOf(response.data.saveMyEmployeeProfile);
+            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;
-            this.updateContext();
         }
     }
+    /** 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() {
-        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
@@ -183,82 +445,190 @@ let MyEmployeeProfilePage = class MyEmployeeProfilePage extends localize(i18next
           ></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))}
+              ${this.renderHero()}
+              <div class="page-section-grid">${this.renderSummary()} ${this.renderSkills()}</div>
+              ${PROFILE_SECTIONS.map(section => this.renderSection(section))}
             </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>
+    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
-            ? 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>`}
+            ? 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)
@@ -275,6 +645,10 @@ __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);