@things-factory/learning 0.0.0-stage → 10.1.260

package/dist-client/pages/learning-view.js

@@ -0,0 +1,371 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/learning/ox-learning-progress.js';
+import '@operato/learning/ox-lesson.js';
+import '@operato/learning/ox-quiz.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 { keyed } from 'lit/directives/keyed.js';
+import { MutationController, QueryController } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { PageView } from '@operato/shell';
+import { DocumentPageStyles } from '@operato/styles';
+import { issueDocument } from '@things-factory/pdf/dist-client';
+import { LEARNING_FIELDS, unitsDoneOf } from '../utils/learning-api.js';
+import { dayOf, minutesOf, missingWord, stateWord, t, unitKindWord } from '../utils/learning-words.js';
+/**
+ * 과정 화면 (ADR-0194 decisions 3-9) - one enrolment: the units in order with the one open played by `ox-lesson`, whose
+ * ticks go to the server as they come (the server counts the time); the quiz drawn by the server and scored there; the
+ * acknowledgement; and the certificate once completed. On a phone the unit list sits above the lesson.
+ */
+let LearningView = class LearningView extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.enrollmentId = '';
+        this.unitId = '';
+        this.agreed = false;
+        this.tickError = '';
+        this.read = new QueryController(this, gql `query ($id: String!) { myEnrollment(id: $id) { ${LEARNING_FIELDS} } }`, {
+            variables: () => (this.enrollmentId ? { id: this.enrollmentId } : undefined),
+            keepPrevious: true
+        });
+        this.tickSave = new MutationController(this, gql `mutation ($enrollmentId: String!, $unitId: String!, $seconds: Int!, $position: Int!) {
+      recordLearningTick(enrollmentId: $enrollmentId, unitId: $unitId, seconds: $seconds, position: $position) {
+        enrollment { id status }
+        progress { learnedSeconds watchedSeconds positionSeconds doneAt }
+      }
+    }`, { showsError: true });
+        this.quizStart = new MutationController(this, gql `mutation ($enrollmentId: String!) { startQuizAttempt(enrollmentId: $enrollmentId) { attemptId questions { id kind text choices { id text } } } }`, {
+            showsError: true
+        });
+        this.quizSubmit = new MutationController(this, gql `mutation ($attemptId: String!, $answers: Object!) { submitQuizAttempt(attemptId: $attemptId, answers: $answers) { score passed attemptsLeft enrollment { id status } } }`, {
+            refetch: () => [this.read],
+            showsError: true
+        });
+        this.acknowledgement = new MutationController(this, gql `mutation ($id: String!) { acknowledgeEnrollment(id: $id) { id status } }`, { refetch: () => [this.read], showsError: true });
+        /* Ticks go one after another - a stop right after a start is not dropped while the start is out. */
+        this.ticks = Promise.resolve();
+    }
+    static { this.styles = [
+        DocumentPageStyles,
+        css `
+      .head {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+      }
+      .head h2 {
+        margin: 0;
+        font-size: var(--ui-t-title-large, 22px);
+        overflow-wrap: anywhere;
+      }
+      .meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 12px);
+      }
+      .study {
+        display: grid;
+        grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
+        gap: var(--spacing-large, 12px);
+        align-items: start;
+      }
+      @media (max-width: 760px) {
+        .study {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+      ol.units {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      ol.units button {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        width: 100%;
+        min-height: 40px;
+        padding: 6px 8px;
+        border: 0;
+        border-radius: var(--ui-r-sm, 6px);
+        background: transparent;
+        color: var(--ui-ink);
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+      }
+      ol.units button[aria-current='true'] {
+        background: var(--ui-line-soft, var(--md-sys-color-surface-container));
+        font-weight: 600;
+      }
+      ol.units button:focus-visible {
+        outline: 2px solid var(--md-sys-color-primary);
+        outline-offset: -2px;
+      }
+      ol.units md-icon {
+        --md-icon-size: 18px;
+        color: var(--ui-muted);
+        flex: none;
+      }
+      ol.units md-icon[done] {
+        color: var(--ui-ok, var(--md-sys-color-primary));
+      }
+      ol.units .name {
+        flex: 1;
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      ol.units .kind {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 12px);
+      }
+      .lesson {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+      }
+      .lesson h3 {
+        margin: 0;
+        font-size: var(--ui-t-title, 15px);
+      }
+      .error {
+        color: var(--ui-crit, var(--md-sys-color-error));
+        font-size: var(--ui-t-small, 12px);
+      }
+      .check {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--spacing-small, 4px);
+        line-height: 1.6;
+      }
+      .acknowledgement {
+        white-space: pre-wrap;
+        margin: 0;
+        line-height: 1.6;
+      }
+      .result {
+        margin: 0;
+        font-weight: 600;
+      }
+    `
+    ]; }
+    get enrollment() {
+        return this.read.data?.myEnrollment ?? null;
+    }
+    get context() {
+        /* The enrolment is the dock's subject - a question on the course is answered from its own version's units (ADR-0194 decision 12). */
+        return { title: t('title.learning-learning'), frame: 'document', menu: 'my-learning', ...(this.enrollmentId ? { subject: { type: 'enrollment', id: this.enrollmentId } } : {}) };
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (!this.active || !(changes.active || changes.params))
+            return;
+        const id = lifecycle?.params?.id;
+        if (id && id !== this.enrollmentId) {
+            this.enrollmentId = id;
+            this.unitId = '';
+            this.drawn = undefined;
+            this.result = undefined;
+        }
+    }
+    updated() {
+        const one = this.enrollment;
+        if (one && !this.unitId && one.units?.length) {
+            /* Where the learner left off: the first unit that counts and is not done, else the first. */
+            const next = one.units.find((row) => row.counts && !row.progress?.doneAt) ?? one.units[0];
+            this.unitId = next.unit.id;
+        }
+    }
+    render() {
+        const one = this.enrollment;
+        return html `<ox-page-state .loading=${this.read.loading && !one} .error=${this.read.error} .held=${!!one} .answeredAt=${this.read.answeredAt} @retry=${() => this.read.refetch()}>
+      ${one ? this.renderEnrollment(one) : nothing}
+    </ox-page-state>`;
+    }
+    renderEnrollment(one) {
+        const { done, total } = unitsDoneOf(one.units);
+        const current = one.units.find((row) => row.unit.id === this.unitId);
+        const completed = one.status === 'COMPLETED';
+        return html `<div class="page">
+      <section class="page-section head">
+        <h2>${one.course.name}</h2>
+        <div class="meta">
+          <span>${stateWord(one.state)}</span>
+          ${one.version ? html `<span>${t('text.learning-version-number', { number: one.version.number })}</span>` : nothing}
+          ${one.dueOn ? html `<span>${t('text.learning-due-on', { day: one.dueOn })}</span>` : nothing}
+          <span>${t('text.learning-learned-minutes', { minutes: minutesOf(one.learnedSeconds), required: minutesOf(one.version?.minSeconds) })}</span>
+        </div>
+        <ox-learning-progress .value=${done} .max=${total} ?done=${completed} label=${t('label.learning-units-done')}></ox-learning-progress>
+        ${!completed && one.missing?.length ? html `<p class="page-section-note">${t('text.learning-missing-lead')} ${one.missing.map(missingWord).join(' · ')}</p>` : nothing}
+        ${one.course.description ? html `<p class="page-section-note">${one.course.description}</p>` : nothing}
+      </section>
+
+      <section class="page-section study">
+        <nav aria-label=${t('label.learning-units')}>
+          <ol class="units">
+            ${one.units.map((row) => html `<li>
+                <button
+                  aria-current=${row.unit.id === this.unitId ? 'true' : 'false'}
+                  aria-label=${`${row.unit.seq}. ${row.unit.name}, ${unitKindWord(row.unit.kind)}${row.progress?.doneAt ? `, ${t('text.learning-unit-done')}` : ''}`}
+                  @click=${() => this.open(row.unit.id)}
+                >
+                  <md-icon ?done=${!!row.progress?.doneAt} aria-hidden="true">${row.progress?.doneAt ? 'check_circle' : row.counts ? 'radio_button_unchecked' : 'link'}</md-icon>
+                  <span class="name" aria-hidden="true">${row.unit.seq}. ${row.unit.name}</span>
+                  <span class="kind" aria-hidden="true">${unitKindWord(row.unit.kind)}</span>
+                </button>
+              </li>`)}
+          </ol>
+        </nav>
+        <div class="lesson">${current ? this.renderLesson(one, current) : nothing}</div>
+      </section>
+
+      ${one.quizSize > 0 ? this.renderQuiz(one) : nothing}
+      ${one.version?.acknowledgement ? this.renderAcknowledgement(one) : nothing}
+      ${completed
+            ? html `<section class="page-section">
+            <header class="page-section-header"><h3>${t('title.learning-certificate')}</h3></header>
+            <p class="page-section-note">${t('text.learning-completed-detail', { day: dayOf(one.completedAt), number: one.certificateNo ?? '' })}</p>
+            <md-filled-button style="align-self:flex-start" @click=${() => issueDocument({ kind: 'learning.certificate', refId: one.id })}>${t('button.learning-certificate')}</md-filled-button>
+          </section>`
+            : nothing}
+    </div>`;
+    }
+    renderLesson(one, row) {
+        const unit = row.unit;
+        const progress = row.progress ?? {};
+        if (unit.kind === 'LINK')
+            return html `<h3>${unit.name}</h3>
+        <p class="page-section-note">${t('text.learning-link-not-counted')}</p>
+        <a href=${unit.url} target="_blank" rel="noopener noreferrer">${unit.url}</a>`;
+        /*
+         * One element per enrolment and unit: leaving one, its element says its own time to its own enrolment and unit -
+         * never under the next. Keyed by the unit alone, the same unit opened from another enrolment kept the element and
+         * its clock, and the first enrolment's seconds went out under the second (2026-11-08).
+         */
+        return html `<h3>${unit.name}</h3>
+      ${keyed(`${one.id}:${unit.id}`, html `<ox-lesson
+        .kind=${unit.kind}
+        .src=${unit.file?.fullpath}
+        .body=${unit.body ?? ''}
+        .label=${unit.name}
+        .watched=${progress.watchedSeconds ?? 0}
+        .position=${progress.positionSeconds ?? 0}
+        .requiredSeconds=${unit.minSeconds ?? 60}
+        .learnedSeconds=${progress.learnedSeconds ?? 0}
+        .done=${!!progress.doneAt || one.status === 'COMPLETED'}
+        @lesson-tick=${(e) => this.tick(one.id, unit.id, e.detail)}
+      ></ox-lesson>`)}
+      ${this.tickError ? html `<div class="error" role="alert">${this.tickError}</div>` : nothing}`;
+    }
+    renderQuiz(one) {
+        const completed = one.status === 'COMPLETED';
+        const passed = one.score != null && one.version?.passScore != null && one.score >= one.version.passScore;
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.learning-quiz')}</h3></header>
+      <p class="page-section-note">
+        ${t('text.learning-quiz-rule', { count: one.quizSize, pass: one.version.passScore })}
+        ${one.attemptsLeft != null ? t('text.learning-attempts-left', { count: one.attemptsLeft }) : ''}
+        ${one.score != null ? t('text.learning-best-score', { score: one.score }) : ''}
+      </p>
+      ${this.result
+            ? html `<p class="result" role="status">${this.result.passed ? t('text.learning-quiz-passed', { score: this.result.score }) : t('text.learning-quiz-failed', { score: this.result.score })}</p>`
+            : nothing}
+      ${this.drawn
+            ? html `<ox-quiz .questions=${this.drawn.questions} .busy=${this.quizSubmit.pending} @quiz-submit=${(e) => this.submit(e.detail.answers)}></ox-quiz>`
+            : !completed && !passed && one.attemptsLeft !== 0
+                ? html `<md-filled-button style="align-self:flex-start" ?disabled=${this.quizStart.pending} @click=${() => this.startQuiz(one.id)}>${t('button.learning-quiz-start')}</md-filled-button>`
+                : nothing}
+      ${this.quizStart.error || this.quizSubmit.error ? html `<div class="error" role="alert">${this.errorText(this.quizStart.error || this.quizSubmit.error)}</div>` : nothing}
+    </section>`;
+    }
+    renderAcknowledgement(one) {
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.learning-acknowledgement')}</h3></header>
+      <p class="acknowledgement">${one.version.acknowledgement}</p>
+      ${one.acknowledgedAt
+            ? html `<p class="page-section-note">${t('text.learning-acknowledged-on', { day: dayOf(one.acknowledgedAt) })}</p>`
+            : html `<label class="check"><input type="checkbox" .checked=${this.agreed} @change=${(e) => (this.agreed = e.target.checked)} />${t('text.learning-acknowledge-label')}</label>
+            <md-filled-button style="align-self:flex-start" ?disabled=${!this.agreed || this.acknowledgement.pending} @click=${() => this.acknowledgement.run({ id: one.id })}
+              >${t('button.learning-acknowledge')}</md-filled-button
+            >
+            ${this.acknowledgement.error ? html `<div class="error" role="alert">${this.errorText(this.acknowledgement.error)}</div>` : nothing}`}
+    </section>`;
+    }
+    open(unitId) {
+        this.unitId = unitId;
+        this.tickError = '';
+    }
+    tick(enrollmentId, unitId, detail) {
+        this.ticks = this.ticks.then(async () => {
+            const before = this.enrollment;
+            const answer = await this.tickSave.run({ enrollmentId, unitId, seconds: Math.round(detail.seconds), position: Math.floor(detail.position) });
+            if (!answer) {
+                this.tickError = this.errorText(this.tickSave.error);
+                await this.read.refetch();
+                return;
+            }
+            this.tickError = '';
+            const row = before?.units?.find((one) => one.unit.id === unitId);
+            const newlyDone = !!answer.recordLearningTick.progress.doneAt && !row?.progress?.doneAt;
+            if (newlyDone || answer.recordLearningTick.enrollment.status !== before?.status)
+                await this.read.refetch();
+        });
+    }
+    async startQuiz(enrollmentId) {
+        this.result = undefined;
+        const answer = await this.quizStart.run({ enrollmentId });
+        if (answer)
+            this.drawn = answer.startQuizAttempt;
+    }
+    async submit(answers) {
+        if (!this.drawn)
+            return;
+        const answer = await this.quizSubmit.run({ attemptId: this.drawn.attemptId, answers });
+        if (!answer)
+            return;
+        this.result = answer.submitQuizAttempt;
+        this.drawn = undefined;
+    }
+    errorText(error) {
+        return error?.graphQLErrors?.[0]?.message ?? error?.message ?? '';
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningView.prototype, "enrollmentId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningView.prototype, "unitId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningView.prototype, "drawn", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningView.prototype, "result", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningView.prototype, "agreed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningView.prototype, "tickError", void 0);
+LearningView = __decorate([
+    customElement('learning-view')
+], LearningView);
+export { LearningView };
+//# sourceMappingURL=learning-view.js.map

package/dist-client/pages/learning-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"learning-view.js","sourceRoot":"","sources":["../../client/pages/learning-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/learning/ox-learning-progress.js'\nimport '@operato/learning/ox-lesson.js'\nimport '@operato/learning/ox-quiz.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'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { MutationController, QueryController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport type { LessonTick, QuizAnswers, QuizQuestion } from '@operato/learning'\nimport { PageView } from '@operato/shell'\nimport { DocumentPageStyles } from '@operato/styles'\nimport { issueDocument } from '@things-factory/pdf/dist-client'\n\nimport { LEARNING_FIELDS, unitsDoneOf } from '../utils/learning-api.js'\nimport { dayOf, minutesOf, missingWord, stateWord, t, unitKindWord } from '../utils/learning-words.js'\n\n/**\n * 과정 화면 (ADR-0194 decisions 3-9) - one enrolment: the units in order with the one open played by `ox-lesson`, whose\n * ticks go to the server as they come (the server counts the time); the quiz drawn by the server and scored there; the\n * acknowledgement; and the certificate once completed. On a phone the unit list sits above the lesson.\n */\n@customElement('learning-view')\nexport class LearningView extends localize(i18next)(PageView) {\n  static styles = [\n    DocumentPageStyles,\n    css`\n      .head {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small, 4px);\n      }\n      .head h2 {\n        margin: 0;\n        font-size: var(--ui-t-title-large, 22px);\n        overflow-wrap: anywhere;\n      }\n      .meta {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n        color: var(--ui-muted);\n        font-size: var(--ui-t-small, 12px);\n      }\n      .study {\n        display: grid;\n        grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);\n        gap: var(--spacing-large, 12px);\n        align-items: start;\n      }\n      @media (max-width: 760px) {\n        .study {\n          grid-template-columns: minmax(0, 1fr);\n        }\n      }\n      ol.units {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      ol.units button {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n        width: 100%;\n        min-height: 40px;\n        padding: 6px 8px;\n        border: 0;\n        border-radius: var(--ui-r-sm, 6px);\n        background: transparent;\n        color: var(--ui-ink);\n        font: inherit;\n        text-align: left;\n        cursor: pointer;\n      }\n      ol.units button[aria-current='true'] {\n        background: var(--ui-line-soft, var(--md-sys-color-surface-container));\n        font-weight: 600;\n      }\n      ol.units button:focus-visible {\n        outline: 2px solid var(--md-sys-color-primary);\n        outline-offset: -2px;\n      }\n      ol.units md-icon {\n        --md-icon-size: 18px;\n        color: var(--ui-muted);\n        flex: none;\n      }\n      ol.units md-icon[done] {\n        color: var(--ui-ok, var(--md-sys-color-primary));\n      }\n      ol.units .name {\n        flex: 1;\n        min-width: 0;\n        overflow-wrap: anywhere;\n      }\n      ol.units .kind {\n        color: var(--ui-muted);\n        font-size: var(--ui-t-small, 12px);\n      }\n      .lesson {\n        min-width: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n      }\n      .lesson h3 {\n        margin: 0;\n        font-size: var(--ui-t-title, 15px);\n      }\n      .error {\n        color: var(--ui-crit, var(--md-sys-color-error));\n        font-size: var(--ui-t-small, 12px);\n      }\n      .check {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--spacing-small, 4px);\n        line-height: 1.6;\n      }\n      .acknowledgement {\n        white-space: pre-wrap;\n        margin: 0;\n        line-height: 1.6;\n      }\n      .result {\n        margin: 0;\n        font-weight: 600;\n      }\n    `\n  ]\n\n  @state() private enrollmentId = ''\n  @state() private unitId = ''\n  @state() private drawn?: { attemptId: string; questions: QuizQuestion[] }\n  @state() private result?: { score: number; passed: boolean; attemptsLeft?: number | null }\n  @state() private agreed = false\n  @state() private tickError = ''\n\n  private read = new QueryController(this, gql`query ($id: String!) { myEnrollment(id: $id) { ${LEARNING_FIELDS} } }`, {\n    variables: () => (this.enrollmentId ? { id: this.enrollmentId } : undefined),\n    keepPrevious: true\n  })\n\n  private tickSave = new MutationController(\n    this,\n    gql`mutation ($enrollmentId: String!, $unitId: String!, $seconds: Int!, $position: Int!) {\n      recordLearningTick(enrollmentId: $enrollmentId, unitId: $unitId, seconds: $seconds, position: $position) {\n        enrollment { id status }\n        progress { learnedSeconds watchedSeconds positionSeconds doneAt }\n      }\n    }`,\n    { showsError: true }\n  )\n  private quizStart = new MutationController(this, gql`mutation ($enrollmentId: String!) { startQuizAttempt(enrollmentId: $enrollmentId) { attemptId questions { id kind text choices { id text } } } }`, {\n    showsError: true\n  })\n  private quizSubmit = new MutationController(this, gql`mutation ($attemptId: String!, $answers: Object!) { submitQuizAttempt(attemptId: $attemptId, answers: $answers) { score passed attemptsLeft enrollment { id status } } }`, {\n    refetch: () => [this.read],\n    showsError: true\n  })\n  private acknowledgement = new MutationController(this, gql`mutation ($id: String!) { acknowledgeEnrollment(id: $id) { id status } }`, { refetch: () => [this.read], showsError: true })\n\n  /* Ticks go one after another - a stop right after a start is not dropped while the start is out. */\n  private ticks: Promise<unknown> = Promise.resolve()\n\n  get enrollment(): any {\n    return this.read.data?.myEnrollment ?? null\n  }\n\n  get context() {\n    /* The enrolment is the dock's subject - a question on the course is answered from its own version's units (ADR-0194 decision 12). */\n    return { title: t('title.learning-learning'), frame: 'document', menu: 'my-learning', ...(this.enrollmentId ? { subject: { type: 'enrollment', id: this.enrollmentId } } : {}) }\n  }\n\n  async pageUpdated(changes: any, lifecycle: any) {\n    if (!this.active || !(changes.active || changes.params)) return\n    const id = lifecycle?.params?.id\n    if (id && id !== this.enrollmentId) {\n      this.enrollmentId = id\n      this.unitId = ''\n      this.drawn = undefined\n      this.result = undefined\n    }\n  }\n\n  updated() {\n    const one = this.enrollment\n    if (one && !this.unitId && one.units?.length) {\n      /* Where the learner left off: the first unit that counts and is not done, else the first. */\n      const next = one.units.find((row: any) => row.counts && !row.progress?.doneAt) ?? one.units[0]\n      this.unitId = next.unit.id\n    }\n  }\n\n  render() {\n    const one = this.enrollment\n    return html`<ox-page-state .loading=${this.read.loading && !one} .error=${this.read.error} .held=${!!one} .answeredAt=${this.read.answeredAt} @retry=${() => this.read.refetch()}>\n      ${one ? this.renderEnrollment(one) : nothing}\n    </ox-page-state>`\n  }\n\n  private renderEnrollment(one: any) {\n    const { done, total } = unitsDoneOf(one.units)\n    const current = one.units.find((row: any) => row.unit.id === this.unitId)\n    const completed = one.status === 'COMPLETED'\n    return html`<div class=\"page\">\n      <section class=\"page-section head\">\n        <h2>${one.course.name}</h2>\n        <div class=\"meta\">\n          <span>${stateWord(one.state)}</span>\n          ${one.version ? html`<span>${t('text.learning-version-number', { number: one.version.number })}</span>` : nothing}\n          ${one.dueOn ? html`<span>${t('text.learning-due-on', { day: one.dueOn })}</span>` : nothing}\n          <span>${t('text.learning-learned-minutes', { minutes: minutesOf(one.learnedSeconds), required: minutesOf(one.version?.minSeconds) })}</span>\n        </div>\n        <ox-learning-progress .value=${done} .max=${total} ?done=${completed} label=${t('label.learning-units-done')}></ox-learning-progress>\n        ${!completed && one.missing?.length ? html`<p class=\"page-section-note\">${t('text.learning-missing-lead')} ${one.missing.map(missingWord).join(' · ')}</p>` : nothing}\n        ${one.course.description ? html`<p class=\"page-section-note\">${one.course.description}</p>` : nothing}\n      </section>\n\n      <section class=\"page-section study\">\n        <nav aria-label=${t('label.learning-units')}>\n          <ol class=\"units\">\n            ${one.units.map(\n              (row: any) => html`<li>\n                <button\n                  aria-current=${row.unit.id === this.unitId ? 'true' : 'false'}\n                  aria-label=${`${row.unit.seq}. ${row.unit.name}, ${unitKindWord(row.unit.kind)}${row.progress?.doneAt ? `, ${t('text.learning-unit-done')}` : ''}`}\n                  @click=${() => this.open(row.unit.id)}\n                >\n                  <md-icon ?done=${!!row.progress?.doneAt} aria-hidden=\"true\">${row.progress?.doneAt ? 'check_circle' : row.counts ? 'radio_button_unchecked' : 'link'}</md-icon>\n                  <span class=\"name\" aria-hidden=\"true\">${row.unit.seq}. ${row.unit.name}</span>\n                  <span class=\"kind\" aria-hidden=\"true\">${unitKindWord(row.unit.kind)}</span>\n                </button>\n              </li>`\n            )}\n          </ol>\n        </nav>\n        <div class=\"lesson\">${current ? this.renderLesson(one, current) : nothing}</div>\n      </section>\n\n      ${one.quizSize > 0 ? this.renderQuiz(one) : nothing}\n      ${one.version?.acknowledgement ? this.renderAcknowledgement(one) : nothing}\n      ${completed\n        ? html`<section class=\"page-section\">\n            <header class=\"page-section-header\"><h3>${t('title.learning-certificate')}</h3></header>\n            <p class=\"page-section-note\">${t('text.learning-completed-detail', { day: dayOf(one.completedAt), number: one.certificateNo ?? '' })}</p>\n            <md-filled-button style=\"align-self:flex-start\" @click=${() => issueDocument({ kind: 'learning.certificate', refId: one.id })}>${t('button.learning-certificate')}</md-filled-button>\n          </section>`\n        : nothing}\n    </div>`\n  }\n\n  private renderLesson(one: any, row: any) {\n    const unit = row.unit\n    const progress = row.progress ?? {}\n    if (unit.kind === 'LINK')\n      return html`<h3>${unit.name}</h3>\n        <p class=\"page-section-note\">${t('text.learning-link-not-counted')}</p>\n        <a href=${unit.url} target=\"_blank\" rel=\"noopener noreferrer\">${unit.url}</a>`\n    /*\n     * One element per enrolment and unit: leaving one, its element says its own time to its own enrolment and unit -\n     * never under the next. Keyed by the unit alone, the same unit opened from another enrolment kept the element and\n     * its clock, and the first enrolment's seconds went out under the second (2026-11-08).\n     */\n    return html`<h3>${unit.name}</h3>\n      ${keyed(\n        `${one.id}:${unit.id}`,\n        html`<ox-lesson\n        .kind=${unit.kind}\n        .src=${unit.file?.fullpath}\n        .body=${unit.body ?? ''}\n        .label=${unit.name}\n        .watched=${progress.watchedSeconds ?? 0}\n        .position=${progress.positionSeconds ?? 0}\n        .requiredSeconds=${unit.minSeconds ?? 60}\n        .learnedSeconds=${progress.learnedSeconds ?? 0}\n        .done=${!!progress.doneAt || one.status === 'COMPLETED'}\n        @lesson-tick=${(e: CustomEvent<LessonTick>) => this.tick(one.id, unit.id, e.detail)}\n      ></ox-lesson>`\n      )}\n      ${this.tickError ? html`<div class=\"error\" role=\"alert\">${this.tickError}</div>` : nothing}`\n  }\n\n  private renderQuiz(one: any) {\n    const completed = one.status === 'COMPLETED'\n    const passed = one.score != null && one.version?.passScore != null && one.score >= one.version.passScore\n    return html`<section class=\"page-section\">\n      <header class=\"page-section-header\"><h3>${t('title.learning-quiz')}</h3></header>\n      <p class=\"page-section-note\">\n        ${t('text.learning-quiz-rule', { count: one.quizSize, pass: one.version.passScore })}\n        ${one.attemptsLeft != null ? t('text.learning-attempts-left', { count: one.attemptsLeft }) : ''}\n        ${one.score != null ? t('text.learning-best-score', { score: one.score }) : ''}\n      </p>\n      ${this.result\n        ? html`<p class=\"result\" role=\"status\">${this.result.passed ? t('text.learning-quiz-passed', { score: this.result.score }) : t('text.learning-quiz-failed', { score: this.result.score })}</p>`\n        : nothing}\n      ${this.drawn\n        ? html`<ox-quiz .questions=${this.drawn.questions} .busy=${this.quizSubmit.pending} @quiz-submit=${(e: CustomEvent<{ answers: QuizAnswers }>) => this.submit(e.detail.answers)}></ox-quiz>`\n        : !completed && !passed && one.attemptsLeft !== 0\n          ? html`<md-filled-button style=\"align-self:flex-start\" ?disabled=${this.quizStart.pending} @click=${() => this.startQuiz(one.id)}>${t('button.learning-quiz-start')}</md-filled-button>`\n          : nothing}\n      ${this.quizStart.error || this.quizSubmit.error ? html`<div class=\"error\" role=\"alert\">${this.errorText(this.quizStart.error || this.quizSubmit.error)}</div>` : nothing}\n    </section>`\n  }\n\n  private renderAcknowledgement(one: any) {\n    return html`<section class=\"page-section\">\n      <header class=\"page-section-header\"><h3>${t('title.learning-acknowledgement')}</h3></header>\n      <p class=\"acknowledgement\">${one.version.acknowledgement}</p>\n      ${one.acknowledgedAt\n        ? html`<p class=\"page-section-note\">${t('text.learning-acknowledged-on', { day: dayOf(one.acknowledgedAt) })}</p>`\n        : html`<label class=\"check\"><input type=\"checkbox\" .checked=${this.agreed} @change=${(e: any) => (this.agreed = e.target.checked)} />${t('text.learning-acknowledge-label')}</label>\n            <md-filled-button style=\"align-self:flex-start\" ?disabled=${!this.agreed || this.acknowledgement.pending} @click=${() => this.acknowledgement.run({ id: one.id })}\n              >${t('button.learning-acknowledge')}</md-filled-button\n            >\n            ${this.acknowledgement.error ? html`<div class=\"error\" role=\"alert\">${this.errorText(this.acknowledgement.error)}</div>` : nothing}`}\n    </section>`\n  }\n\n  private open(unitId: string) {\n    this.unitId = unitId\n    this.tickError = ''\n  }\n\n  private tick(enrollmentId: string, unitId: string, detail: LessonTick) {\n    this.ticks = this.ticks.then(async () => {\n      const before = this.enrollment\n      const answer = await this.tickSave.run({ enrollmentId, unitId, seconds: Math.round(detail.seconds), position: Math.floor(detail.position) })\n      if (!answer) {\n        this.tickError = this.errorText(this.tickSave.error)\n        await this.read.refetch()\n        return\n      }\n      this.tickError = ''\n      const row = before?.units?.find((one: any) => one.unit.id === unitId)\n      const newlyDone = !!answer.recordLearningTick.progress.doneAt && !row?.progress?.doneAt\n      if (newlyDone || answer.recordLearningTick.enrollment.status !== before?.status) await this.read.refetch()\n    })\n  }\n\n  private async startQuiz(enrollmentId: string) {\n    this.result = undefined\n    const answer = await this.quizStart.run({ enrollmentId })\n    if (answer) this.drawn = answer.startQuizAttempt\n  }\n\n  private async submit(answers: QuizAnswers) {\n    if (!this.drawn) return\n    const answer = await this.quizSubmit.run({ attemptId: this.drawn.attemptId, answers })\n    if (!answer) return\n    this.result = answer.submitQuizAttempt\n    this.drawn = undefined\n  }\n\n  private errorText(error: any): string {\n    return error?.graphQLErrors?.[0]?.message ?? error?.message ?? ''\n  }\n}\n"]}

package/dist-client/pages/my-learning.d.ts

@@ -0,0 +1,22 @@
+import '@material/web/button/filled-tonal-button.js';
+import '@operato/learning/ox-learning-progress.js';
+import '@operato/list-state/ox-empty-note.js';
+import '@operato/list-state/ox-page-state.js';
+import { PageView } from '@operato/shell';
+declare const MyLearning_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * 내 학습 (ADR-0194 decision 10) - the courses the person is to take, by their due day, with how far each went, and the
+ * ones completed. A card opens the course; a phone shows the same cards in one column.
+ */
+export declare class MyLearning extends MyLearning_base {
+    static styles: import("lit").CSSResult[];
+    private read;
+    get context(): {
+        title: string;
+        frame: string;
+    };
+    pageUpdated(changes: any): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    private card;
+}
+export {};

package/dist-client/pages/my-learning.js

@@ -0,0 +1,110 @@
+import { __decorate } from "tslib";
+import '@material/web/button/filled-tonal-button.js';
+import '@operato/learning/ox-learning-progress.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 } from 'lit/decorators.js';
+import { QueryController } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { navigate, PageView } from '@operato/shell';
+import { DocumentPageStyles } from '@operato/styles';
+import { MY_LIST_FIELDS, unitsDoneOf } from '../utils/learning-api.js';
+import { categoryWord, dayOf, stateWord, t } from '../utils/learning-words.js';
+/**
+ * 내 학습 (ADR-0194 decision 10) - the courses the person is to take, by their due day, with how far each went, and the
+ * ones completed. A card opens the course; a phone shows the same cards in one column.
+ */
+let MyLearning = class MyLearning extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.read = new QueryController(this, gql `query { myEnrollments { ${MY_LIST_FIELDS} } }`);
+    }
+    static { this.styles = [
+        DocumentPageStyles,
+        css `
+      .page-card {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        min-width: 0;
+      }
+      .page-card h4 {
+        margin: 0;
+        font-size: var(--ui-t-title, 15px);
+        font-weight: 600;
+        overflow-wrap: anywhere;
+      }
+      .meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 12px);
+      }
+      .state {
+        padding: 0 8px;
+        border-radius: 999px;
+        background: var(--ui-line-soft, var(--md-sys-color-surface-container));
+        color: var(--ui-ink);
+      }
+      .state[overdue] {
+        background: var(--ui-crit-soft, var(--md-sys-color-error-container));
+        color: var(--ui-crit, var(--md-sys-color-on-error-container));
+      }
+      .page-card md-filled-tonal-button {
+        align-self: flex-start;
+      }
+    `
+    ]; }
+    get context() {
+        return { title: t('title.learning-my-learning'), frame: 'document' };
+    }
+    async pageUpdated(changes) {
+        if (this.active && changes.active && this.read.data)
+            await this.read.refetch();
+    }
+    render() {
+        const rows = this.read.data?.myEnrollments ?? [];
+        const open = rows.filter(one => one.status !== 'COMPLETED');
+        const done = rows.filter(one => one.status === 'COMPLETED');
+        return html `<ox-page-state .loading=${this.read.loading} .error=${this.read.error} .held=${!!this.read.data} .answeredAt=${this.read.answeredAt} @retry=${() => this.read.refetch()}>
+      <div class="page">
+        <section class="page-section">
+          <header class="page-section-header"><h3>${t('title.learning-to-take')}</h3></header>
+          ${open.length ? html `<div class="page-card-grid">${open.map(one => this.card(one))}</div>` : html `<ox-empty-note title=${t('text.learning-nothing-to-take')}></ox-empty-note>`}
+        </section>
+        ${done.length
+            ? html `<section class="page-section">
+              <header class="page-section-header"><h3>${t('title.learning-completed')}</h3></header>
+              <div class="page-card-grid">${done.map(one => this.card(one))}</div>
+            </section>`
+            : nothing}
+      </div>
+    </ox-page-state>`;
+    }
+    card(one) {
+        const { done, total } = unitsDoneOf(one.units);
+        const action = one.status === 'COMPLETED' ? 'button.learning-review' : one.status === 'ASSIGNED' ? 'button.learning-start' : 'button.learning-continue';
+        return html `<article class="page-card">
+      <h4>${one.course?.name}</h4>
+      <div class="meta">
+        <span class="state" ?overdue=${one.state === 'OVERDUE'}>${stateWord(one.state)}</span>
+        ${one.course?.category ? html `<span>${categoryWord(one.course.category)}</span>` : nothing}
+        ${one.status === 'COMPLETED'
+            ? html `<span>${t('text.learning-completed-on', { day: dayOf(one.completedAt) })}</span>`
+            : one.dueOn
+                ? html `<span>${t('text.learning-due-on', { day: one.dueOn })}</span>`
+                : nothing}
+      </div>
+      <ox-learning-progress .value=${done} .max=${total} ?done=${one.status === 'COMPLETED'} label=${t('label.learning-units-done')}></ox-learning-progress>
+      <md-filled-tonal-button @click=${() => navigate(`learning-view?id=${one.id}`)}>${t(action)}</md-filled-tonal-button>
+    </article>`;
+    }
+};
+MyLearning = __decorate([
+    customElement('my-learning')
+], MyLearning);
+export { MyLearning };
+//# sourceMappingURL=my-learning.js.map

package/dist-client/pages/my-learning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-learning.js","sourceRoot":"","sources":["../../client/pages/my-learning.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-tonal-button.js'\nimport '@operato/learning/ox-learning-progress.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 } from 'lit/decorators.js'\n\nimport { QueryController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { DocumentPageStyles } from '@operato/styles'\n\nimport { MY_LIST_FIELDS, unitsDoneOf } from '../utils/learning-api.js'\nimport { categoryWord, dayOf, stateWord, t } from '../utils/learning-words.js'\n\n/**\n * 내 학습 (ADR-0194 decision 10) - the courses the person is to take, by their due day, with how far each went, and the\n * ones completed. A card opens the course; a phone shows the same cards in one column.\n */\n@customElement('my-learning')\nexport class MyLearning extends localize(i18next)(PageView) {\n  static styles = [\n    DocumentPageStyles,\n    css`\n      .page-card {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n        min-width: 0;\n      }\n      .page-card h4 {\n        margin: 0;\n        font-size: var(--ui-t-title, 15px);\n        font-weight: 600;\n        overflow-wrap: anywhere;\n      }\n      .meta {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n        color: var(--ui-muted);\n        font-size: var(--ui-t-small, 12px);\n      }\n      .state {\n        padding: 0 8px;\n        border-radius: 999px;\n        background: var(--ui-line-soft, var(--md-sys-color-surface-container));\n        color: var(--ui-ink);\n      }\n      .state[overdue] {\n        background: var(--ui-crit-soft, var(--md-sys-color-error-container));\n        color: var(--ui-crit, var(--md-sys-color-on-error-container));\n      }\n      .page-card md-filled-tonal-button {\n        align-self: flex-start;\n      }\n    `\n  ]\n\n  private read = new QueryController(this, gql`query { myEnrollments { ${MY_LIST_FIELDS} } }`)\n\n  get context() {\n    return { title: t('title.learning-my-learning'), frame: 'document' }\n  }\n\n  async pageUpdated(changes: any) {\n    if (this.active && changes.active && this.read.data) await this.read.refetch()\n  }\n\n  render() {\n    const rows: any[] = this.read.data?.myEnrollments ?? []\n    const open = rows.filter(one => one.status !== 'COMPLETED')\n    const done = rows.filter(one => one.status === 'COMPLETED')\n    return html`<ox-page-state .loading=${this.read.loading} .error=${this.read.error} .held=${!!this.read.data} .answeredAt=${this.read.answeredAt} @retry=${() => this.read.refetch()}>\n      <div class=\"page\">\n        <section class=\"page-section\">\n          <header class=\"page-section-header\"><h3>${t('title.learning-to-take')}</h3></header>\n          ${open.length ? html`<div class=\"page-card-grid\">${open.map(one => this.card(one))}</div>` : html`<ox-empty-note title=${t('text.learning-nothing-to-take')}></ox-empty-note>`}\n        </section>\n        ${done.length\n          ? html`<section class=\"page-section\">\n              <header class=\"page-section-header\"><h3>${t('title.learning-completed')}</h3></header>\n              <div class=\"page-card-grid\">${done.map(one => this.card(one))}</div>\n            </section>`\n          : nothing}\n      </div>\n    </ox-page-state>`\n  }\n\n  private card(one: any) {\n    const { done, total } = unitsDoneOf(one.units)\n    const action = one.status === 'COMPLETED' ? 'button.learning-review' : one.status === 'ASSIGNED' ? 'button.learning-start' : 'button.learning-continue'\n    return html`<article class=\"page-card\">\n      <h4>${one.course?.name}</h4>\n      <div class=\"meta\">\n        <span class=\"state\" ?overdue=${one.state === 'OVERDUE'}>${stateWord(one.state)}</span>\n        ${one.course?.category ? html`<span>${categoryWord(one.course.category)}</span>` : nothing}\n        ${one.status === 'COMPLETED'\n          ? html`<span>${t('text.learning-completed-on', { day: dayOf(one.completedAt) })}</span>`\n          : one.dueOn\n            ? html`<span>${t('text.learning-due-on', { day: one.dueOn })}</span>`\n            : nothing}\n      </div>\n      <ox-learning-progress .value=${done} .max=${total} ?done=${one.status === 'COMPLETED'} label=${t('label.learning-units-done')}></ox-learning-progress>\n      <md-filled-tonal-button @click=${() => navigate(`learning-view?id=${one.id}`)}>${t(action)}</md-filled-tonal-button>\n    </article>`\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -0,0 +1 @@
+export default function route(page: string): "my-learning" | "learning-view" | "learning-course-list" | "learning-course-editor" | "learning-enrollment-status" | undefined;

package/dist-client/route.js

@@ -0,0 +1,21 @@
+/* The pages this module brings to an application that puts them in its menu (ADR-0194 decision 10). */
+export default function route(page) {
+    switch (page) {
+        case 'my-learning':
+            import('./pages/my-learning.js');
+            return page;
+        case 'learning-view':
+            import('./pages/learning-view.js');
+            return page;
+        case 'learning-course-list':
+            import('./pages/learning-course-list.js');
+            return page;
+        case 'learning-course-editor':
+            import('./pages/learning-course-editor.js');
+            return page;
+        case 'learning-enrollment-status':
+            import('./pages/learning-enrollment-status.js');
+            return page;
+    }
+}
+//# sourceMappingURL=route.js.map

package/dist-client/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,uGAAuG;AACvG,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,aAAa;YAChB,MAAM,CAAC,wBAAwB,CAAC,CAAA;YAChC,OAAO,IAAI,CAAA;QACb,KAAK,eAAe;YAClB,MAAM,CAAC,0BAA0B,CAAC,CAAA;YAClC,OAAO,IAAI,CAAA;QACb,KAAK,sBAAsB;YACzB,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QACb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,mCAAmC,CAAC,CAAA;YAC3C,OAAO,IAAI,CAAA;QACb,KAAK,4BAA4B;YAC/B,MAAM,CAAC,uCAAuC,CAAC,CAAA;YAC/C,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["/* The pages this module brings to an application that puts them in its menu (ADR-0194 decision 10). */\nexport default function route(page: string) {\n  switch (page) {\n    case 'my-learning':\n      import('./pages/my-learning.js')\n      return page\n    case 'learning-view':\n      import('./pages/learning-view.js')\n      return page\n    case 'learning-course-list':\n      import('./pages/learning-course-list.js')\n      return page\n    case 'learning-course-editor':\n      import('./pages/learning-course-editor.js')\n      return page\n    case 'learning-enrollment-status':\n      import('./pages/learning-enrollment-status.js')\n      return page\n  }\n}\n"]}