@things-factory/learning 0.0.0-stage → 10.1.261

package/dist-client/components/learning-question-form.js

@@ -0,0 +1,142 @@
+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/input/ox-input-select-buttons.js';
+import '@operato/popup/ox-popup-actions.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles';
+import { QUESTION_KINDS, questionKindWord, t } from '../utils/learning-words.js';
+/** Opens the question form. Resolves with the question as given, or null. */
+export function openQuestionForm(question) {
+    const popup = openPopup(html `<learning-question-form .question=${question} @done=${(e) => popup.close(e.detail)} @close=${() => popup.close()}></learning-question-form>`, { backdrop: true, size: 'large', title: question.id ? t('title.learning-question-edit') : t('title.learning-question-new') });
+    return popup.result.then(value => (value ?? null));
+}
+/* 문항 (ADR-0194 decision 4) - how it is answered, what it asks, its choices with which are right, and why. */
+let LearningQuestionForm = class LearningQuestionForm extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.question = { kind: 'SINGLE', text: '', choices: [] };
+        this.draft = { kind: 'SINGLE', text: '', choices: [] };
+    }
+    static { this.styles = [
+        CommonPopupStyles,
+        PopupBodyStyles,
+        FormFieldStyles,
+        PopupFieldStyles,
+        css `
+      ox-input-select-buttons {
+        align-self: flex-start;
+      }
+      textarea {
+        min-height: 80px;
+        resize: vertical;
+      }
+      .choice {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+      }
+      .choice input[type='text'] {
+        flex: 1;
+      }
+      .field .choice input[type='checkbox'],
+      .field .choice input[type='radio'] {
+        width: auto;
+        margin: 0;
+      }
+      .choice button {
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        color: var(--ui-muted);
+        padding: 4px;
+      }
+    `
+    ]; }
+    willUpdate(changed) {
+        if (changed.has('question')) {
+            const choices = this.question.choices?.length ? this.question.choices.map(one => ({ ...one })) : [{ text: '', correct: true }, { text: '', correct: false }];
+            this.draft = { ...this.question, choices };
+        }
+    }
+    render() {
+        const multiple = this.draft.kind === 'MULTIPLE';
+        const right = this.draft.choices.filter(one => one.correct).length;
+        const ready = this.draft.text.trim() && this.draft.choices.length >= 2 && this.draft.choices.every(one => one.text.trim()) && right >= 1 && (multiple || right === 1);
+        return html `
+      <div class="body">
+        <div class="field">
+          <span>${t('field.learning-question-kind')}</span>
+          <ox-input-select-buttons .value=${this.draft.kind} .options=${QUESTION_KINDS.map(code => ({ display: questionKindWord(code), value: code }))} @change=${(e) => e.detail && this.kind(e.detail)}></ox-input-select-buttons>
+        </div>
+        <label class="field">
+          <span>${t('field.learning-question-text')}</span>
+          <textarea .value=${this.draft.text} @input=${(e) => (this.draft = { ...this.draft, text: e.target.value })}></textarea>
+        </label>
+        <fieldset class="field" style="border:0;padding:0;margin:0">
+          <legend><span>${t('field.learning-question-choices')}</span></legend>
+          ${this.draft.choices.map((choice, index) => html `<div class="choice">
+              <input
+                type=${multiple ? 'checkbox' : 'radio'}
+                name="correct"
+                aria-label=${t('label.learning-choice-correct', { number: index + 1 })}
+                .checked=${choice.correct}
+                @change=${(e) => this.mark(index, e.target.checked)}
+              />
+              <input type="text" aria-label=${t('label.learning-choice-text', { number: index + 1 })} .value=${choice.text} ?readonly=${this.draft.kind === 'TRUE_FALSE'} @input=${(e) => this.write(index, e.target.value)} />
+              ${this.draft.kind !== 'TRUE_FALSE' && this.draft.choices.length > 2
+            ? html `<button aria-label=${t('button.learning-choice-remove')} @click=${() => this.removeChoice(index)}><md-icon>close</md-icon></button>`
+            : ''}
+            </div>`)}
+          ${this.draft.kind !== 'TRUE_FALSE'
+            ? html `<md-text-button style="align-self:flex-start" @click=${() => (this.draft = { ...this.draft, choices: [...this.draft.choices, { text: '', correct: false }] })}>${t('button.learning-choice-add')}</md-text-button>`
+            : ''}
+          <span>${multiple ? t('text.learning-question-multiple-hint') : t('text.learning-question-single-hint')}</span>
+        </fieldset>
+        <label class="field">
+          <span>${t('field.learning-question-explanation')}</span>
+          <textarea .value=${this.draft.explanation ?? ''} @input=${(e) => (this.draft = { ...this.draft, explanation: e.target.value })}></textarea>
+        </label>
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${t('button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${!ready} @click=${() => this.dispatchEvent(new CustomEvent('done', { detail: this.draft }))}>${t('button.confirm')}</md-filled-button>
+      </ox-popup-actions>
+    `;
+    }
+    kind(kind) {
+        if (kind === 'TRUE_FALSE')
+            this.draft = { ...this.draft, kind, choices: [{ text: t('text.quiz-true'), correct: true }, { text: t('text.quiz-false'), correct: false }] };
+        else if (kind === 'SINGLE' && this.draft.choices.filter(one => one.correct).length > 1)
+            this.draft = { ...this.draft, kind, choices: this.draft.choices.map((one, i) => ({ ...one, correct: i === this.draft.choices.findIndex(c => c.correct) })) };
+        else
+            this.draft = { ...this.draft, kind };
+    }
+    mark(index, checked) {
+        const multiple = this.draft.kind === 'MULTIPLE';
+        this.draft = { ...this.draft, choices: this.draft.choices.map((one, i) => ({ ...one, correct: i === index ? checked : multiple ? one.correct : false })) };
+    }
+    write(index, text) {
+        this.draft = { ...this.draft, choices: this.draft.choices.map((one, i) => (i === index ? { ...one, text } : one)) };
+    }
+    removeChoice(index) {
+        this.draft = { ...this.draft, choices: this.draft.choices.filter((_, i) => i !== index) };
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], LearningQuestionForm.prototype, "question", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningQuestionForm.prototype, "draft", void 0);
+LearningQuestionForm = __decorate([
+    customElement('learning-question-form')
+], LearningQuestionForm);
+export { LearningQuestionForm };
+//# sourceMappingURL=learning-question-form.js.map

package/dist-client/components/learning-question-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"learning-question-form.js","sourceRoot":"","sources":["../../client/components/learning-question-form.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/input/ox-input-select-buttons.js'\nimport '@operato/popup/ox-popup-actions.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\n\nimport { QUESTION_KINDS, questionKindWord, t } from '../utils/learning-words.js'\n\nexport type QuestionDraft = { id?: string; kind: string; text: string; explanation?: string | null; drafted?: boolean; choices: { id?: string; text: string; correct: boolean }[] }\n\n/** Opens the question form. Resolves with the question as given, or null. */\nexport function openQuestionForm(question: QuestionDraft): Promise<QuestionDraft | null> {\n  const popup = openPopup(html`<learning-question-form .question=${question} @done=${(e: CustomEvent) => popup.close(e.detail)} @close=${() => popup.close()}></learning-question-form>`, { backdrop: true, size: 'large', title: question.id ? t('title.learning-question-edit') : t('title.learning-question-new') })\n  return popup.result.then(value => (value ?? null) as any)\n}\n\n/* 문항 (ADR-0194 decision 4) - how it is answered, what it asks, its choices with which are right, and why. */\n@customElement('learning-question-form')\nexport class LearningQuestionForm extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonPopupStyles,\n    PopupBodyStyles,\n    FormFieldStyles,\n    PopupFieldStyles,\n    css`\n      ox-input-select-buttons {\n        align-self: flex-start;\n      }\n      textarea {\n        min-height: 80px;\n        resize: vertical;\n      }\n      .choice {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n      }\n      .choice input[type='text'] {\n        flex: 1;\n      }\n      .field .choice input[type='checkbox'],\n      .field .choice input[type='radio'] {\n        width: auto;\n        margin: 0;\n      }\n      .choice button {\n        border: 0;\n        background: transparent;\n        cursor: pointer;\n        color: var(--ui-muted);\n        padding: 4px;\n      }\n    `\n  ]\n\n  @property({ attribute: false }) question: QuestionDraft = { kind: 'SINGLE', text: '', choices: [] }\n  @state() private draft: QuestionDraft = { kind: 'SINGLE', text: '', choices: [] }\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('question')) {\n      const choices = this.question.choices?.length ? this.question.choices.map(one => ({ ...one })) : [{ text: '', correct: true }, { text: '', correct: false }]\n      this.draft = { ...this.question, choices }\n    }\n  }\n\n  render() {\n    const multiple = this.draft.kind === 'MULTIPLE'\n    const right = this.draft.choices.filter(one => one.correct).length\n    const ready = this.draft.text.trim() && this.draft.choices.length >= 2 && this.draft.choices.every(one => one.text.trim()) && right >= 1 && (multiple || right === 1)\n    return html`\n      <div class=\"body\">\n        <div class=\"field\">\n          <span>${t('field.learning-question-kind')}</span>\n          <ox-input-select-buttons .value=${this.draft.kind} .options=${QUESTION_KINDS.map(code => ({ display: questionKindWord(code), value: code }))} @change=${(e: CustomEvent) => e.detail && this.kind(e.detail)}></ox-input-select-buttons>\n        </div>\n        <label class=\"field\">\n          <span>${t('field.learning-question-text')}</span>\n          <textarea .value=${this.draft.text} @input=${(e: any) => (this.draft = { ...this.draft, text: e.target.value })}></textarea>\n        </label>\n        <fieldset class=\"field\" style=\"border:0;padding:0;margin:0\">\n          <legend><span>${t('field.learning-question-choices')}</span></legend>\n          ${this.draft.choices.map(\n            (choice, index) => html`<div class=\"choice\">\n              <input\n                type=${multiple ? 'checkbox' : 'radio'}\n                name=\"correct\"\n                aria-label=${t('label.learning-choice-correct', { number: index + 1 })}\n                .checked=${choice.correct}\n                @change=${(e: any) => this.mark(index, e.target.checked)}\n              />\n              <input type=\"text\" aria-label=${t('label.learning-choice-text', { number: index + 1 })} .value=${choice.text} ?readonly=${this.draft.kind === 'TRUE_FALSE'} @input=${(e: any) => this.write(index, e.target.value)} />\n              ${this.draft.kind !== 'TRUE_FALSE' && this.draft.choices.length > 2\n                ? html`<button aria-label=${t('button.learning-choice-remove')} @click=${() => this.removeChoice(index)}><md-icon>close</md-icon></button>`\n                : ''}\n            </div>`\n          )}\n          ${this.draft.kind !== 'TRUE_FALSE'\n            ? html`<md-text-button style=\"align-self:flex-start\" @click=${() => (this.draft = { ...this.draft, choices: [...this.draft.choices, { text: '', correct: false }] })}>${t('button.learning-choice-add')}</md-text-button>`\n            : ''}\n          <span>${multiple ? t('text.learning-question-multiple-hint') : t('text.learning-question-single-hint')}</span>\n        </fieldset>\n        <label class=\"field\">\n          <span>${t('field.learning-question-explanation')}</span>\n          <textarea .value=${this.draft.explanation ?? ''} @input=${(e: any) => (this.draft = { ...this.draft, explanation: e.target.value })}></textarea>\n        </label>\n      </div>\n      <ox-popup-actions>\n        <md-text-button slot=\"cancel\" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${t('button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" ?disabled=${!ready} @click=${() => this.dispatchEvent(new CustomEvent('done', { detail: this.draft }))}>${t('button.confirm')}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  private kind(kind: string) {\n    if (kind === 'TRUE_FALSE')\n      this.draft = { ...this.draft, kind, choices: [{ text: t('text.quiz-true'), correct: true }, { text: t('text.quiz-false'), correct: false }] }\n    else if (kind === 'SINGLE' && this.draft.choices.filter(one => one.correct).length > 1)\n      this.draft = { ...this.draft, kind, choices: this.draft.choices.map((one, i) => ({ ...one, correct: i === this.draft.choices.findIndex(c => c.correct) })) }\n    else this.draft = { ...this.draft, kind }\n  }\n\n  private mark(index: number, checked: boolean) {\n    const multiple = this.draft.kind === 'MULTIPLE'\n    this.draft = { ...this.draft, choices: this.draft.choices.map((one, i) => ({ ...one, correct: i === index ? checked : multiple ? one.correct : false })) }\n  }\n\n  private write(index: number, text: string) {\n    this.draft = { ...this.draft, choices: this.draft.choices.map((one, i) => (i === index ? { ...one, text } : one)) }\n  }\n\n  private removeChoice(index: number) {\n    this.draft = { ...this.draft, choices: this.draft.choices.filter((_, i) => i !== index) }\n  }\n}\n"]}

package/dist-client/components/learning-todo.d.ts

@@ -0,0 +1,12 @@
+import '@material/web/button/filled-button.js';
+import { LitElement } from 'lit';
+declare const LearningTodo_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class LearningTodo extends LearningTodo_base {
+    static styles: import("lit").CSSResult;
+    input: {
+        headline?: string;
+        address?: string;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist-client/components/learning-todo.js

@@ -0,0 +1,43 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { navigate } from '@operato/shell';
+/*
+ * 수강 (ADR-0194 decision 5) - what the worklist to-do shows: the course, by when, and the way to it. Completing the
+ * course there ends the to-do; nothing is answered here.
+ */
+let LearningTodo = class LearningTodo extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.input = {};
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      padding: var(--spacing-large, 12px);
+      font-size: var(--ui-t-body, 13px);
+      line-height: 1.6;
+      color: var(--ui-ink);
+    }
+
+    p {
+      margin: 0 0 var(--spacing-medium, 8px);
+    }
+  `; }
+    render() {
+        const { headline = '', address } = this.input ?? {};
+        return html `<p>${headline}</p>
+      ${address ? html `<md-filled-button @click=${() => navigate(address)}>${i18next.t('button.learning-open-course')}</md-filled-button>` : ''}`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], LearningTodo.prototype, "input", void 0);
+LearningTodo = __decorate([
+    customElement('learning-todo')
+], LearningTodo);
+export { LearningTodo };
+//# sourceMappingURL=learning-todo.js.map

package/dist-client/components/learning-todo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"learning-todo.js","sourceRoot":"","sources":["../../client/components/learning-todo.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC;;;GAGG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAxD;;QAe2B,UAAK,GAA4C,EAAE,CAAA;IAOrF,CAAC;aArBQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYZ;IAID,MAAM;QACJ,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QACnD,OAAO,IAAI,CAAA,MAAM,QAAQ;QACrB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;IAC/I,CAAC;;AAN+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;2CAAoD;AAfxE,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAsBxB","sourcesContent":["import '@material/web/button/filled-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate } from '@operato/shell'\n\n/*\n * 수강 (ADR-0194 decision 5) - what the worklist to-do shows: the course, by when, and the way to it. Completing the\n * course there ends the to-do; nothing is answered here.\n */\n@customElement('learning-todo')\nexport class LearningTodo extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: block;\n      padding: var(--spacing-large, 12px);\n      font-size: var(--ui-t-body, 13px);\n      line-height: 1.6;\n      color: var(--ui-ink);\n    }\n\n    p {\n      margin: 0 0 var(--spacing-medium, 8px);\n    }\n  `\n\n  @property({ attribute: false }) input: { headline?: string; address?: string } = {}\n\n  render() {\n    const { headline = '', address } = this.input ?? {}\n    return html`<p>${headline}</p>\n      ${address ? html`<md-filled-button @click=${() => navigate(address)}>${i18next.t('button.learning-open-course')}</md-filled-button>` : ''}`\n  }\n}\n"]}

package/dist-client/components/learning-unit-form.d.ts

@@ -0,0 +1,44 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@operato/input/ox-input-file.js';
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/popup/ox-popup-actions.js';
+import { LitElement } from 'lit';
+export type UnitDraft = {
+    id?: string;
+    kind: string;
+    name: string;
+    body?: string | null;
+    url?: string | null;
+    minSeconds?: number | null;
+    durationSeconds?: number | null;
+    pageCount?: number | null;
+    file?: {
+        name?: string;
+    } | null;
+};
+export type UnitEdit = {
+    unit: UnitDraft;
+    file?: File;
+    durationSeconds?: number;
+    pageCount?: number;
+};
+/** Opens the unit form. Resolves with what was given - the unit and a file picked for it - or null. */
+export declare function openUnitForm(unit: UnitDraft): Promise<UnitEdit | null>;
+/** A video's length in seconds, read from the file in the browser - the server needs it to know when it was watched to the end. */
+export declare function videoDurationOf(file: File): Promise<number | undefined>;
+declare const LearningUnitForm_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class LearningUnitForm extends LearningUnitForm_base {
+    static styles: import("lit").CSSResult[];
+    unit: UnitDraft;
+    private draft;
+    private file?;
+    private duration?;
+    private pageCount?;
+    willUpdate(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private patch;
+    private pick;
+    private done;
+}
+export {};

package/dist-client/components/learning-unit-form.js

@@ -0,0 +1,151 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@operato/input/ox-input-file.js';
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/popup/ox-popup-actions.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { pdfPageCount } from '@operato/learning/pdf.js';
+import { openPopup } from '@operato/layout';
+import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles';
+import { t, UNIT_KINDS, unitKindWord } from '../utils/learning-words.js';
+/** Opens the unit form. Resolves with what was given - the unit and a file picked for it - or null. */
+export function openUnitForm(unit) {
+    const popup = openPopup(html `<learning-unit-form .unit=${unit} @done=${(e) => popup.close(e.detail)} @close=${() => popup.close()}></learning-unit-form>`, { backdrop: true, size: 'large', title: unit.id ? t('title.learning-unit-edit') : t('title.learning-unit-new') });
+    return popup.result.then(value => (value ?? null));
+}
+/** A video's length in seconds, read from the file in the browser - the server needs it to know when it was watched to the end. */
+export function videoDurationOf(file) {
+    return new Promise(resolve => {
+        const video = document.createElement('video');
+        const url = URL.createObjectURL(file);
+        const done = (value) => {
+            URL.revokeObjectURL(url);
+            resolve(value);
+        };
+        video.preload = 'metadata';
+        video.onloadedmetadata = () => done(Number.isFinite(video.duration) ? Math.round(video.duration) : undefined);
+        video.onerror = () => done(undefined);
+        video.src = url;
+    });
+}
+/* 단원 (ADR-0194 decision 3) - its kind, name and what it holds: a video or a PDF file, a text, or a link. */
+let LearningUnitForm = class LearningUnitForm extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.unit = { kind: 'VIDEO', name: '' };
+        this.draft = { kind: 'VIDEO', name: '' };
+    }
+    static { this.styles = [
+        CommonPopupStyles,
+        PopupBodyStyles,
+        FormFieldStyles,
+        PopupFieldStyles,
+        css `
+      ox-input-select-buttons {
+        align-self: flex-start;
+      }
+      textarea {
+        min-height: 240px;
+        resize: vertical;
+        font-family: var(--ui-font-mono, monospace);
+      }
+    `
+    ]; }
+    willUpdate(changed) {
+        if (changed.has('unit'))
+            this.draft = { ...this.unit };
+    }
+    render() {
+        const kind = this.draft.kind;
+        const fileKind = kind === 'VIDEO' || kind === 'PDF';
+        return html `
+      <div class="body">
+        <div class="field">
+          <span>${t('field.learning-unit-kind')}</span>
+          <ox-input-select-buttons .value=${kind} .options=${UNIT_KINDS.map(code => ({ display: unitKindWord(code), value: code }))} @change=${(e) => e.detail && this.patch({ kind: e.detail })}></ox-input-select-buttons>
+          <span>${t(`text.learning-unit-${kind.toLowerCase()}-hint`)}</span>
+        </div>
+        <label class="field">
+          <span>${t('field.learning-unit-name')}</span>
+          <input .value=${this.draft.name} maxlength="200" @input=${(e) => this.patch({ name: e.target.value })} />
+        </label>
+        ${fileKind
+            ? html `<div class="field">
+              <span>${kind === 'VIDEO' ? t('field.learning-unit-video') : t('field.learning-unit-pdf')}</span>
+              <ox-input-file accept=${kind === 'VIDEO' ? 'video/*' : 'application/pdf'} @change=${(e) => this.pick(e)}></ox-input-file>
+              <span>${this.file ? this.file.name : this.draft.file?.name ? t('text.learning-unit-file-kept', { name: this.draft.file.name }) : t('text.learning-unit-file-none')}
+                ${kind === 'VIDEO' && (this.duration ?? this.draft.durationSeconds) ? ` · ${t('text.learning-unit-duration', { minutes: Math.floor((this.duration ?? this.draft.durationSeconds ?? 0) / 60), seconds: (this.duration ?? this.draft.durationSeconds ?? 0) % 60 })}` : ''}
+                ${kind === 'PDF' && (this.pageCount ?? this.draft.pageCount) ? ` · ${t('text.learning-unit-pages', { pages: this.pageCount ?? this.draft.pageCount })}` : ''}</span
+              >
+            </div>`
+            : nothing}
+        ${kind === 'MARKDOWN'
+            ? html `<label class="field">
+              <span>${t('field.learning-unit-body')}</span>
+              <textarea .value=${this.draft.body ?? ''} @input=${(e) => this.patch({ body: e.target.value })}></textarea>
+            </label>`
+            : nothing}
+        ${kind === 'LINK'
+            ? html `<label class="field">
+              <span>${t('field.learning-unit-url')}</span>
+              <input type="url" .value=${this.draft.url ?? ''} placeholder="https://" @input=${(e) => this.patch({ url: e.target.value })} />
+            </label>`
+            : nothing}
+        ${kind === 'PDF' || kind === 'MARKDOWN'
+            ? html `<label class="field">
+              <span>${t('field.learning-unit-min-seconds')}</span>
+              <input type="number" min="1" step="1" .value=${String(this.draft.minSeconds ?? 60)} @input=${(e) => this.patch({ minSeconds: e.target.value ? Number(e.target.value) : null })} />
+              <span>${t('text.learning-unit-min-seconds-hint')}</span>
+            </label>`
+            : nothing}
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${t('button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${!this.draft.name?.trim()} @click=${() => this.done()}>${t('button.confirm')}</md-filled-button>
+      </ox-popup-actions>
+    `;
+    }
+    patch(change) {
+        this.draft = { ...this.draft, ...change };
+    }
+    async pick(e) {
+        const [file] = e.detail ?? [];
+        if (!file)
+            return;
+        this.file = file;
+        this.duration = this.draft.kind === 'VIDEO' ? await videoDurationOf(file) : undefined;
+        /* Every page of a PDF is to be read - the count is read from the file, as a video's length is. */
+        this.pageCount = this.draft.kind === 'PDF' ? await pdfPageCount(file) : undefined;
+    }
+    done() {
+        this.dispatchEvent(new CustomEvent('done', { detail: { unit: { ...this.draft, name: this.draft.name.trim() }, file: this.file, durationSeconds: this.duration, pageCount: this.pageCount } }));
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], LearningUnitForm.prototype, "unit", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningUnitForm.prototype, "draft", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", File)
+], LearningUnitForm.prototype, "file", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], LearningUnitForm.prototype, "duration", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], LearningUnitForm.prototype, "pageCount", void 0);
+LearningUnitForm = __decorate([
+    customElement('learning-unit-form')
+], LearningUnitForm);
+export { LearningUnitForm };
+//# sourceMappingURL=learning-unit-form.js.map

package/dist-client/components/learning-unit-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"learning-unit-form.js","sourceRoot":"","sources":["../../client/components/learning-unit-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/input/ox-input-file.js'\nimport '@operato/input/ox-input-select-buttons.js'\nimport '@operato/popup/ox-popup-actions.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { pdfPageCount } from '@operato/learning/pdf.js'\nimport { openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\n\nimport { t, UNIT_KINDS, unitKindWord } from '../utils/learning-words.js'\n\nexport type UnitDraft = { id?: string; kind: string; name: string; body?: string | null; url?: string | null; minSeconds?: number | null; durationSeconds?: number | null; pageCount?: number | null; file?: { name?: string } | null }\nexport type UnitEdit = { unit: UnitDraft; file?: File; durationSeconds?: number; pageCount?: number }\n\n/** Opens the unit form. Resolves with what was given - the unit and a file picked for it - or null. */\nexport function openUnitForm(unit: UnitDraft): Promise<UnitEdit | null> {\n  const popup = openPopup(html`<learning-unit-form .unit=${unit} @done=${(e: CustomEvent) => popup.close(e.detail)} @close=${() => popup.close()}></learning-unit-form>`, { backdrop: true, size: 'large', title: unit.id ? t('title.learning-unit-edit') : t('title.learning-unit-new') })\n  return popup.result.then(value => (value ?? null) as any)\n}\n\n/** A video's length in seconds, read from the file in the browser - the server needs it to know when it was watched to the end. */\nexport function videoDurationOf(file: File): Promise<number | undefined> {\n  return new Promise(resolve => {\n    const video = document.createElement('video')\n    const url = URL.createObjectURL(file)\n    const done = (value?: number) => {\n      URL.revokeObjectURL(url)\n      resolve(value)\n    }\n    video.preload = 'metadata'\n    video.onloadedmetadata = () => done(Number.isFinite(video.duration) ? Math.round(video.duration) : undefined)\n    video.onerror = () => done(undefined)\n    video.src = url\n  })\n}\n\n/* 단원 (ADR-0194 decision 3) - its kind, name and what it holds: a video or a PDF file, a text, or a link. */\n@customElement('learning-unit-form')\nexport class LearningUnitForm extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonPopupStyles,\n    PopupBodyStyles,\n    FormFieldStyles,\n    PopupFieldStyles,\n    css`\n      ox-input-select-buttons {\n        align-self: flex-start;\n      }\n      textarea {\n        min-height: 240px;\n        resize: vertical;\n        font-family: var(--ui-font-mono, monospace);\n      }\n    `\n  ]\n\n  @property({ attribute: false }) unit: UnitDraft = { kind: 'VIDEO', name: '' }\n  @state() private draft: UnitDraft = { kind: 'VIDEO', name: '' }\n  @state() private file?: File\n  @state() private duration?: number\n  @state() private pageCount?: number\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('unit')) this.draft = { ...this.unit }\n  }\n\n  render() {\n    const kind = this.draft.kind\n    const fileKind = kind === 'VIDEO' || kind === 'PDF'\n    return html`\n      <div class=\"body\">\n        <div class=\"field\">\n          <span>${t('field.learning-unit-kind')}</span>\n          <ox-input-select-buttons .value=${kind} .options=${UNIT_KINDS.map(code => ({ display: unitKindWord(code), value: code }))} @change=${(e: CustomEvent) => e.detail && this.patch({ kind: e.detail })}></ox-input-select-buttons>\n          <span>${t(`text.learning-unit-${kind.toLowerCase()}-hint`)}</span>\n        </div>\n        <label class=\"field\">\n          <span>${t('field.learning-unit-name')}</span>\n          <input .value=${this.draft.name} maxlength=\"200\" @input=${(e: any) => this.patch({ name: e.target.value })} />\n        </label>\n        ${fileKind\n          ? html`<div class=\"field\">\n              <span>${kind === 'VIDEO' ? t('field.learning-unit-video') : t('field.learning-unit-pdf')}</span>\n              <ox-input-file accept=${kind === 'VIDEO' ? 'video/*' : 'application/pdf'} @change=${(e: CustomEvent) => this.pick(e)}></ox-input-file>\n              <span>${this.file ? this.file.name : this.draft.file?.name ? t('text.learning-unit-file-kept', { name: this.draft.file.name }) : t('text.learning-unit-file-none')}\n                ${kind === 'VIDEO' && (this.duration ?? this.draft.durationSeconds) ? ` · ${t('text.learning-unit-duration', { minutes: Math.floor((this.duration ?? this.draft.durationSeconds ?? 0) / 60), seconds: (this.duration ?? this.draft.durationSeconds ?? 0) % 60 })}` : ''}\n                ${kind === 'PDF' && (this.pageCount ?? this.draft.pageCount) ? ` · ${t('text.learning-unit-pages', { pages: this.pageCount ?? this.draft.pageCount })}` : ''}</span\n              >\n            </div>`\n          : nothing}\n        ${kind === 'MARKDOWN'\n          ? html`<label class=\"field\">\n              <span>${t('field.learning-unit-body')}</span>\n              <textarea .value=${this.draft.body ?? ''} @input=${(e: any) => this.patch({ body: e.target.value })}></textarea>\n            </label>`\n          : nothing}\n        ${kind === 'LINK'\n          ? html`<label class=\"field\">\n              <span>${t('field.learning-unit-url')}</span>\n              <input type=\"url\" .value=${this.draft.url ?? ''} placeholder=\"https://\" @input=${(e: any) => this.patch({ url: e.target.value })} />\n            </label>`\n          : nothing}\n        ${kind === 'PDF' || kind === 'MARKDOWN'\n          ? html`<label class=\"field\">\n              <span>${t('field.learning-unit-min-seconds')}</span>\n              <input type=\"number\" min=\"1\" step=\"1\" .value=${String(this.draft.minSeconds ?? 60)} @input=${(e: any) => this.patch({ minSeconds: e.target.value ? Number(e.target.value) : null })} />\n              <span>${t('text.learning-unit-min-seconds-hint')}</span>\n            </label>`\n          : nothing}\n      </div>\n      <ox-popup-actions>\n        <md-text-button slot=\"cancel\" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${t('button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" ?disabled=${!this.draft.name?.trim()} @click=${() => this.done()}>${t('button.confirm')}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  private patch(change: Partial<UnitDraft>) {\n    this.draft = { ...this.draft, ...change }\n  }\n\n  private async pick(e: CustomEvent) {\n    const [file] = (e.detail as File[]) ?? []\n    if (!file) return\n    this.file = file\n    this.duration = this.draft.kind === 'VIDEO' ? await videoDurationOf(file) : undefined\n    /* Every page of a PDF is to be read - the count is read from the file, as a video's length is. */\n    this.pageCount = this.draft.kind === 'PDF' ? await pdfPageCount(file) : undefined\n  }\n\n  private done() {\n    this.dispatchEvent(new CustomEvent('done', { detail: { unit: { ...this.draft, name: this.draft.name.trim() }, file: this.file, durationSeconds: this.duration, pageCount: this.pageCount } }))\n  }\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1,2 @@
+export * from './utils/learning-words.js';
+export { unitsDoneOf } from './utils/learning-api.js';

package/dist-client/index.js

@@ -0,0 +1,3 @@
+export * from './utils/learning-words.js';
+export { unitsDoneOf } from './utils/learning-api.js';
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA","sourcesContent":["export * from './utils/learning-words.js'\nexport { unitsDoneOf } from './utils/learning-api.js'\n"]}

package/dist-client/pages/learning-course-editor.d.ts

@@ -0,0 +1,63 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/list-state/ox-empty-note.js';
+import '@operato/list-state/ox-page-state.js';
+import { PageView } from '@operato/shell';
+declare const LearningCourseEditor_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * 과정 편집 (ADR-0194 decisions 2-4, 7) - a course and its versions. A draft version takes its settings, units and
+ * questions; publishing it closes the version before. A published or closed version is shown as it is - it never
+ * changes; a change starts a new version copied from it.
+ */
+export declare class LearningCourseEditor extends LearningCourseEditor_base {
+    static styles: import("lit").CSSResult[];
+    private courseId;
+    private versionId;
+    private settings;
+    private course;
+    private version;
+    private saves;
+    get one(): any;
+    get current(): any;
+    get draft(): boolean;
+    get context(): {
+        subject?: {
+            type: string;
+            id: string;
+        } | undefined;
+        title: any;
+        frame: string;
+        menu: string;
+        actions: any[];
+    };
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    willUpdate(): void;
+    private materialDraft;
+    private settingsOf;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderVersions;
+    private renderSettings;
+    private renderUnits;
+    private unitDetail;
+    private renderQuestions;
+    private editCourse;
+    private assign;
+    private newVersion;
+    private publish;
+    private closeVersion;
+    private removeVersion;
+    private saveSettings;
+    private saveUnits;
+    private editUnit;
+    private moveUnit;
+    private removeUnit;
+    private saveQuestions;
+    private editQuestion;
+    private moveQuestion;
+    private removeQuestion;
+}
+export {};