@things-factory/learning 10.1.260 → 10.1.261

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

@@ -0,0 +1,41 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@operato/popup/ox-popup-actions.js';
+import { LitElement } from 'lit';
+type SourceUnit = {
+    id: string;
+    kind: string;
+    name: string;
+    file?: {
+        id: string;
+        name: string;
+        fullpath: string;
+    };
+};
+export declare function openMaterialForm(units: SourceUnit[]): Promise<boolean>;
+declare const LearningMaterialForm_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class LearningMaterialForm extends LearningMaterialForm_base {
+    static styles: import("lit").CSSResult[];
+    units: SourceUnit[];
+    private unitId;
+    private instruction;
+    private captions;
+    private busy;
+    private error;
+    private proposal;
+    private source?;
+    private controller?;
+    private generation;
+    private transcribe;
+    private propose;
+    private apply;
+    willUpdate(): void;
+    disconnectedCallback(): void;
+    private get selected();
+    render(): import("lit-html").TemplateResult<1>;
+    private readCaptions;
+    private message;
+    private generate;
+    private save;
+}
+export {};

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

@@ -0,0 +1,202 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@operato/popup/ox-popup-actions.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { MutationController } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles';
+import { captionParts, pdfMaterial } from '../utils/material-source.js';
+import { t } from '../utils/learning-words.js';
+export function openMaterialForm(units) {
+    const popup = openPopup(html `<learning-material-form .units=${units} @done=${() => popup.close(true)} @close=${() => popup.close()}></learning-material-form>`, { backdrop: true, size: 'large', title: t('title.learning-ai-material') });
+    return popup.result.then(value => !!value);
+}
+let LearningMaterialForm = class LearningMaterialForm extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.units = [];
+        this.unitId = '';
+        this.instruction = '';
+        this.captions = '';
+        this.busy = false;
+        this.error = '';
+        this.generation = 0;
+        this.transcribe = new MutationController(this, gql `mutation ($unitId: String!) { transcribeLearningMaterial(unitId: $unitId) }`);
+        this.propose = new MutationController(this, gql `mutation ($unitId: String!, $source: Object!, $instruction: String!) { proposeLearningMaterial(unitId: $unitId, source: $source, instruction: $instruction) }`);
+        this.apply = new MutationController(this, gql `mutation ($unitId: String!, $source: Object!, $draft: Object!, $token: String!) { applyLearningMaterial(unitId: $unitId, source: $source, draft: $draft, token: $token) }`);
+    }
+    static { this.styles = [CommonPopupStyles, PopupBodyStyles, FormFieldStyles, PopupFieldStyles, css `
+    textarea { min-height: 100px; resize: vertical; }
+    .preview { white-space: pre-wrap; overflow-wrap: anywhere; }
+    .error { color: var(--md-sys-color-error); }
+  `]; }
+    willUpdate() { if (!this.unitId && this.units.length)
+        this.unitId = this.units[0].id; }
+    disconnectedCallback() { super.disconnectedCallback(); this.generation++; this.controller?.abort(); }
+    get selected() { return this.units.find(u => u.id === this.unitId); }
+    render() {
+        const draft = this.proposal?.draft;
+        return html `
+      <div class="body">
+        <p>${t('text.learning-ai-material-help')}</p>
+        <label class="field"><span>${t('field.learning-ai-source')}</span>
+          <select ?disabled=${this.busy || !!draft} .value=${this.unitId} @change=${(e) => { this.unitId = e.target.value; this.source = undefined; this.captions = ''; }}>
+            ${this.units.map(u => html `<option value=${u.id}>${u.name} · ${u.file?.name}</option>`)}
+          </select>
+        </label>
+        ${this.selected?.kind === 'VIDEO' ? html `
+          <label class="field"><span>${t('field.learning-ai-captions')}</span><input type="file" accept=".vtt,.srt,.txt" ?disabled=${this.busy || !!draft} @change=${(e) => this.readCaptions(e.target.files?.[0])} /></label>
+          <label class="field"><span>${t('text.learning-ai-captions-help')}</span><textarea maxlength="120000" ?disabled=${this.busy || !!draft} .value=${this.captions} @input=${(e) => this.captions = e.target.value}></textarea></label>
+        ` : nothing}
+        <label class="field"><span>${t('field.learning-ai-instruction')}</span><textarea maxlength="3900" ?disabled=${this.busy || !!draft} .value=${this.instruction} @input=${(e) => this.instruction = e.target.value}></textarea></label>
+        ${this.busy ? html `<p role="status">${t('text.learning-ai-working')}</p>` : nothing}
+        ${this.error ? html `<p class="error" role="alert">${this.error}</p>` : nothing}
+        ${draft ? html `<section aria-label=${t('title.learning-ai-preview')}>
+          <h3>${draft.title}</h3><p class="preview">${draft.introduction}</p>
+          <ul>${draft.objectives.map((s) => html `<li>${s}</li>`)}</ul>
+          ${draft.units.map((u) => html `<details><summary>${u.name}</summary><p class="preview">${u.body}</p><p>${u.references.join(', ')} · ${u.minSeconds}s</p></details>`)}
+          <h3>${t('title.learning-questions')}</h3>
+          ${draft.questions.map((q, i) => html `<details><summary>${i + 1}. ${q.text}</summary><ul>${q.choices.map((c) => html `<li>${c.correct ? '✓ ' : ''}${c.text}</li>`)}</ul><p>${q.explanation}</p><p>${q.references.join(', ')}</p></details>`)}
+          <details><summary>${t('field.learning-ai-source')}</summary>
+            <a href=${this.selected?.file?.fullpath ?? ''} target="_blank" rel="noopener noreferrer">${this.selected?.file?.name}</a>
+            ${this.source?.parts.map(p => html `<details><summary>${p.id}</summary>${p.text ? html `<p class="preview">${p.text}</p>` : html `<img style="max-width:100%" src=${p.image} alt=${p.id} />`}</details>`)}
+          </details>
+          <h3>${t('title.learning-ai-missing')}</h3><ul>${draft.missing.map((s) => html `<li>${s}</li>`)}</ul>
+          <p>${t('text.learning-ai-apply-help')}</p>
+          <md-text-button ?disabled=${this.busy} @click=${() => { this.proposal = undefined; this.error = ''; }}>${t('button.learning-ai-revise')}</md-text-button>
+        </section>` : nothing}
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" ?disabled=${this.apply.pending} @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${t('button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${this.busy || !this.selected?.file} @click=${() => draft ? this.save() : this.generate()}>${draft ? t('button.learning-ai-apply') : t('button.learning-ai-generate')}</md-filled-button>
+      </ox-popup-actions>`;
+    }
+    async readCaptions(file) {
+        if (!file)
+            return;
+        this.captions = '';
+        if (file.size > 500_000) {
+            this.error = t('error.learning-ai-source-limit');
+            return;
+        }
+        const id = ++this.generation;
+        this.busy = true;
+        this.error = '';
+        try {
+            const text = await file.text();
+            captionParts(text);
+            if (id === this.generation && this.isConnected) {
+                this.captions = text;
+                this.error = '';
+            }
+        }
+        catch {
+            if (id === this.generation)
+                this.error = t('error.learning-ai-source-limit');
+        }
+        finally {
+            if (id === this.generation)
+                this.busy = false;
+        }
+    }
+    message(error) {
+        const key = error?.message;
+        return key?.startsWith('learning-ai-') ? t(`error.${key}`) : error?.graphQLErrors?.[0]?.message ?? key ?? t('error.learning-ai-source-read');
+    }
+    async generate() {
+        const unit = this.selected;
+        if (!unit?.file || this.busy)
+            return;
+        const id = ++this.generation;
+        this.busy = true;
+        this.error = '';
+        this.controller = new AbortController();
+        try {
+            if (unit.kind === 'VIDEO' && !this.captions.trim()) {
+                const answer = await this.transcribe.run({ unitId: unit.id }, { context: { fetchOptions: { signal: this.controller.signal } } });
+                if (id !== this.generation)
+                    return;
+                if (!answer)
+                    throw this.transcribe.error;
+                if (answer.transcribeLearningMaterial.fileId !== unit.file.id)
+                    throw new Error('learning-ai-draft-stale');
+                this.captions = answer.transcribeLearningMaterial.captions;
+            }
+            const source = unit.kind === 'PDF' ? await pdfMaterial(unit.file.id, unit.file.fullpath, this.controller.signal) : { fileId: unit.file.id, parts: captionParts(this.captions) };
+            if (id !== this.generation)
+                return;
+            this.source = source;
+            const answer = await this.propose.run({ unitId: unit.id, source, instruction: `Language: ${i18next.language}. ${this.instruction}` }, { context: { fetchOptions: { signal: this.controller.signal } } });
+            if (id !== this.generation)
+                return;
+            if (!answer)
+                throw this.propose.error;
+            this.proposal = answer.proposeLearningMaterial;
+        }
+        catch (error) {
+            if (id === this.generation)
+                this.error = this.message(error);
+        }
+        finally {
+            if (id === this.generation)
+                this.busy = false;
+        }
+    }
+    async save() {
+        if (!this.proposal || !this.source || this.busy)
+            return;
+        this.busy = true;
+        this.error = '';
+        try {
+            const answer = await this.apply.run({ unitId: this.unitId, source: this.source, draft: this.proposal.draft, token: this.proposal.token });
+            if (!answer) {
+                this.error = this.message(this.apply.error);
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('done'));
+        }
+        catch (error) {
+            this.error = this.message(error);
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], LearningMaterialForm.prototype, "units", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningMaterialForm.prototype, "unitId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningMaterialForm.prototype, "instruction", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningMaterialForm.prototype, "captions", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningMaterialForm.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningMaterialForm.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LearningMaterialForm.prototype, "proposal", void 0);
+LearningMaterialForm = __decorate([
+    customElement('learning-material-form')
+], LearningMaterialForm);
+export { LearningMaterialForm };
+//# sourceMappingURL=learning-material-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"learning-material-form.js","sourceRoot":"","sources":["../../client/components/learning-material-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/popup/ox-popup-actions.js'\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { MutationController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\nimport { captionParts, pdfMaterial, type MaterialSource } from '../utils/material-source.js'\nimport { t } from '../utils/learning-words.js'\n\ntype SourceUnit = { id: string; kind: string; name: string; file?: { id: string; name: string; fullpath: string } }\nexport function openMaterialForm(units: SourceUnit[]): Promise<boolean> {\n  const popup = openPopup(html`<learning-material-form .units=${units} @done=${() => popup.close(true)} @close=${() => popup.close()}></learning-material-form>`, { backdrop: true, size: 'large', title: t('title.learning-ai-material') })\n  return popup.result.then(value => !!value)\n}\n\n@customElement('learning-material-form')\nexport class LearningMaterialForm extends localize(i18next)(LitElement) {\n  static styles = [CommonPopupStyles, PopupBodyStyles, FormFieldStyles, PopupFieldStyles, css`\n    textarea { min-height: 100px; resize: vertical; }\n    .preview { white-space: pre-wrap; overflow-wrap: anywhere; }\n    .error { color: var(--md-sys-color-error); }\n  `]\n  @property({ attribute: false }) units: SourceUnit[] = []\n  @state() private unitId = ''\n  @state() private instruction = ''\n  @state() private captions = ''\n  @state() private busy = false\n  @state() private error = ''\n  @state() private proposal: any\n  private source?: MaterialSource\n  private controller?: AbortController\n  private generation = 0\n  private transcribe = new MutationController(this, gql`mutation ($unitId: String!) { transcribeLearningMaterial(unitId: $unitId) }`)\n  private propose = new MutationController(this, gql`mutation ($unitId: String!, $source: Object!, $instruction: String!) { proposeLearningMaterial(unitId: $unitId, source: $source, instruction: $instruction) }`)\n  private apply = new MutationController(this, gql`mutation ($unitId: String!, $source: Object!, $draft: Object!, $token: String!) { applyLearningMaterial(unitId: $unitId, source: $source, draft: $draft, token: $token) }`)\n\n  willUpdate() { if (!this.unitId && this.units.length) this.unitId = this.units[0].id }\n  disconnectedCallback() { super.disconnectedCallback(); this.generation++; this.controller?.abort() }\n  private get selected() { return this.units.find(u => u.id === this.unitId) }\n\n  render() {\n    const draft = this.proposal?.draft\n    return html`\n      <div class=\"body\">\n        <p>${t('text.learning-ai-material-help')}</p>\n        <label class=\"field\"><span>${t('field.learning-ai-source')}</span>\n          <select ?disabled=${this.busy || !!draft} .value=${this.unitId} @change=${(e: any) => { this.unitId = e.target.value; this.source = undefined; this.captions = '' }}>\n            ${this.units.map(u => html`<option value=${u.id}>${u.name} · ${u.file?.name}</option>`)}\n          </select>\n        </label>\n        ${this.selected?.kind === 'VIDEO' ? html`\n          <label class=\"field\"><span>${t('field.learning-ai-captions')}</span><input type=\"file\" accept=\".vtt,.srt,.txt\" ?disabled=${this.busy || !!draft} @change=${(e: any) => this.readCaptions(e.target.files?.[0])} /></label>\n          <label class=\"field\"><span>${t('text.learning-ai-captions-help')}</span><textarea maxlength=\"120000\" ?disabled=${this.busy || !!draft} .value=${this.captions} @input=${(e: any) => this.captions = e.target.value}></textarea></label>\n        ` : nothing}\n        <label class=\"field\"><span>${t('field.learning-ai-instruction')}</span><textarea maxlength=\"3900\" ?disabled=${this.busy || !!draft} .value=${this.instruction} @input=${(e: any) => this.instruction = e.target.value}></textarea></label>\n        ${this.busy ? html`<p role=\"status\">${t('text.learning-ai-working')}</p>` : nothing}\n        ${this.error ? html`<p class=\"error\" role=\"alert\">${this.error}</p>` : nothing}\n        ${draft ? html`<section aria-label=${t('title.learning-ai-preview')}>\n          <h3>${draft.title}</h3><p class=\"preview\">${draft.introduction}</p>\n          <ul>${draft.objectives.map((s: string) => html`<li>${s}</li>`)}</ul>\n          ${draft.units.map((u: any) => html`<details><summary>${u.name}</summary><p class=\"preview\">${u.body}</p><p>${u.references.join(', ')} · ${u.minSeconds}s</p></details>`)}\n          <h3>${t('title.learning-questions')}</h3>\n          ${draft.questions.map((q: any, i: number) => html`<details><summary>${i + 1}. ${q.text}</summary><ul>${q.choices.map((c: any) => html`<li>${c.correct ? '✓ ' : ''}${c.text}</li>`)}</ul><p>${q.explanation}</p><p>${q.references.join(', ')}</p></details>`)}\n          <details><summary>${t('field.learning-ai-source')}</summary>\n            <a href=${this.selected?.file?.fullpath ?? ''} target=\"_blank\" rel=\"noopener noreferrer\">${this.selected?.file?.name}</a>\n            ${this.source?.parts.map(p => html`<details><summary>${p.id}</summary>${p.text ? html`<p class=\"preview\">${p.text}</p>` : html`<img style=\"max-width:100%\" src=${p.image} alt=${p.id} />`}</details>`)}\n          </details>\n          <h3>${t('title.learning-ai-missing')}</h3><ul>${draft.missing.map((s: string) => html`<li>${s}</li>`)}</ul>\n          <p>${t('text.learning-ai-apply-help')}</p>\n          <md-text-button ?disabled=${this.busy} @click=${() => { this.proposal = undefined; this.error = '' }}>${t('button.learning-ai-revise')}</md-text-button>\n        </section>` : nothing}\n      </div>\n      <ox-popup-actions>\n        <md-text-button slot=\"cancel\" ?disabled=${this.apply.pending} @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${t('button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" ?disabled=${this.busy || !this.selected?.file} @click=${() => draft ? this.save() : this.generate()}>${draft ? t('button.learning-ai-apply') : t('button.learning-ai-generate')}</md-filled-button>\n      </ox-popup-actions>`\n  }\n  private async readCaptions(file?: File) {\n    if (!file) return\n    this.captions = ''\n    if (file.size > 500_000) { this.error = t('error.learning-ai-source-limit'); return }\n    const id = ++this.generation\n    this.busy = true; this.error = ''\n    try {\n      const text = await file.text()\n      captionParts(text)\n      if (id === this.generation && this.isConnected) { this.captions = text; this.error = '' }\n    } catch { if (id === this.generation) this.error = t('error.learning-ai-source-limit') }\n    finally { if (id === this.generation) this.busy = false }\n  }\n  private message(error: any) {\n    const key = error?.message\n    return key?.startsWith('learning-ai-') ? t(`error.${key}`) : error?.graphQLErrors?.[0]?.message ?? key ?? t('error.learning-ai-source-read')\n  }\n  private async generate() {\n    const unit = this.selected\n    if (!unit?.file || this.busy) return\n    const id = ++this.generation\n    this.busy = true; this.error = ''; this.controller = new AbortController()\n    try {\n      if (unit.kind === 'VIDEO' && !this.captions.trim()) {\n        const answer = await this.transcribe.run({ unitId: unit.id }, { context: { fetchOptions: { signal: this.controller.signal } } })\n        if (id !== this.generation) return\n        if (!answer) throw this.transcribe.error\n        if (answer.transcribeLearningMaterial.fileId !== unit.file.id) throw new Error('learning-ai-draft-stale')\n        this.captions = answer.transcribeLearningMaterial.captions\n      }\n      const source = unit.kind === 'PDF' ? await pdfMaterial(unit.file.id, unit.file.fullpath, this.controller.signal) : { fileId: unit.file.id, parts: captionParts(this.captions) }\n      if (id !== this.generation) return\n      this.source = source\n      const answer = await this.propose.run({ unitId: unit.id, source, instruction: `Language: ${i18next.language}. ${this.instruction}` }, { context: { fetchOptions: { signal: this.controller.signal } } })\n      if (id !== this.generation) return\n      if (!answer) throw this.propose.error\n      this.proposal = answer.proposeLearningMaterial\n    } catch (error) { if (id === this.generation) this.error = this.message(error) }\n    finally { if (id === this.generation) this.busy = false }\n  }\n  private async save() {\n    if (!this.proposal || !this.source || this.busy) return\n    this.busy = true; this.error = ''\n    try {\n      const answer = await this.apply.run({ unitId: this.unitId, source: this.source, draft: this.proposal.draft, token: this.proposal.token })\n      if (!answer) { this.error = this.message(this.apply.error); return }\n      this.dispatchEvent(new CustomEvent('done'))\n    } catch (error) { this.error = this.message(error) }\n    finally { this.busy = false }\n  }\n}\n"]}

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

@@ -12,6 +12,7 @@ export type UnitDraft = {
     url?: string | null;
     minSeconds?: number | null;
     durationSeconds?: number | null;
+    pageCount?: number | null;
     file?: {
         name?: string;
     } | null;
@@ -20,6 +21,7 @@ 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>;
@@ -32,6 +34,7 @@ export declare class LearningUnitForm extends LearningUnitForm_base {
     private draft;
     private file?;
     private duration?;
+    private pageCount?;
     willUpdate(changed: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
     private patch;

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

@@ -7,6 +7,7 @@ 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';
@@ -76,7 +77,8 @@ let LearningUnitForm = class LearningUnitForm extends localize(i18next)(LitEleme
               <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 })}` : ''}</span
+                ${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}
@@ -115,9 +117,11 @@ let LearningUnitForm = class LearningUnitForm extends localize(i18next)(LitEleme
             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 } }));
+        this.dispatchEvent(new CustomEvent('done', { detail: { unit: { ...this.draft, name: this.draft.name.trim() }, file: this.file, durationSeconds: this.duration, pageCount: this.pageCount } }));
     }
 };
 __decorate([
@@ -136,6 +140,10 @@ __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);

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

@@ -1 +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 { 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; file?: { name?: string } | null }\nexport type UnitEdit = { unit: UnitDraft; file?: File; durationSeconds?: 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\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 })}` : ''}</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  }\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 } }))\n  }\n}\n"]}
+{"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/pages/learning-course-editor.d.ts

@@ -36,6 +36,7 @@ export declare class LearningCourseEditor extends LearningCourseEditor_base {
     };
     pageUpdated(changes: any, lifecycle: any): Promise<void>;
     willUpdate(): void;
+    private materialDraft;
     private settingsOf;
     render(): import("lit-html").TemplateResult<1>;
     private renderVersions;

package/dist-client/pages/learning-course-editor.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import { openMaterialForm } from '../components/learning-material-form.js';
 import '@material/web/button/filled-button.js';
 import '@material/web/button/outlined-button.js';
 import '@material/web/button/text-button.js';
@@ -10,6 +11,7 @@ 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 { convertListParamToSearchString } from '@operato/data-grist';
 import { MutationController, QueryController, uploadContext } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify } from '@operato/layout';
@@ -22,7 +24,7 @@ import { openQuestionForm } from '../components/learning-question-form.js';
 import { openUnitForm } from '../components/learning-unit-form.js';
 import { COURSE_FIELDS, VERSION_FIELDS } from '../utils/learning-api.js';
 import { categoryWord, dayOf, questionKindWord, SOURCE_KINDS, sourceKindWord, t, unitKindWord, versionStatusWord } from '../utils/learning-words.js';
-const unitInput = (one) => ({ id: one.id, kind: one.kind, name: one.name, body: one.body ?? null, url: one.url ?? null, durationSeconds: one.durationSeconds ?? null, minSeconds: one.minSeconds ?? null });
+const unitInput = (one) => ({ id: one.id, kind: one.kind, name: one.name, body: one.body ?? null, url: one.url ?? null, durationSeconds: one.durationSeconds ?? null, pageCount: one.pageCount ?? null, minSeconds: one.minSeconds ?? null });
 const questionInput = (one) => ({ id: one.id, kind: one.kind, text: one.text, explanation: one.explanation ?? null, choices: one.choices.map((c) => ({ id: c.id, text: c.text, correct: !!c.correct })) });
 /**
  * 과정 편집 (ADR-0194 decisions 2-4, 7) - a course and its versions. A draft version takes its settings, units and
@@ -45,7 +47,7 @@ let LearningCourseEditor = class LearningCourseEditor extends localize(i18next)(
             newVersion: new MutationController(this, gql `mutation ($courseId: String!, $fromId: String) { createCourseVersion(courseId: $courseId, fromId: $fromId) { id } }`, { refetch: () => [this.course] }),
             settings: new MutationController(this, gql `mutation ($id: String!, $patch: CourseVersionPatch!) { updateCourseVersion(id: $id, patch: $patch) { id } }`, { refetch: () => [this.version] }),
             units: new MutationController(this, gql `mutation ($versionId: String!, $units: [CourseUnitInput!]!) { saveCourseUnits(versionId: $versionId, units: $units) { id seq } }`, { refetch: () => [this.version] }),
-            file: new MutationController(this, gql `mutation ($unitId: String!, $file: Upload!, $durationSeconds: Int) { attachCourseUnitFile(unitId: $unitId, file: $file, durationSeconds: $durationSeconds) { id } }`, { refetch: () => [this.version] }),
+            file: new MutationController(this, gql `mutation ($unitId: String!, $file: Upload!, $durationSeconds: Int, $pageCount: Int) { attachCourseUnitFile(unitId: $unitId, file: $file, durationSeconds: $durationSeconds, pageCount: $pageCount) { id } }`, { refetch: () => [this.version] }),
             questions: new MutationController(this, gql `mutation ($versionId: String!, $questions: [CourseQuestionInput!]!) { saveCourseQuestions(versionId: $versionId, questions: $questions) { id } }`, { refetch: () => [this.version] }),
             publish: new MutationController(this, gql `mutation ($id: String!) { publishCourseVersion(id: $id) { id } }`, { refetch: () => [this.course, this.version] }),
             close: new MutationController(this, gql `mutation ($id: String!) { closeCourseVersion(id: $id) { id } }`, { refetch: () => [this.course, this.version] }),
@@ -154,8 +156,10 @@ let LearningCourseEditor = class LearningCourseEditor extends localize(i18next)(
         const one = this.one;
         const actions = [];
         if (one) {
+            if (this.draft)
+                actions.push({ title: t('button.learning-ai-material'), icon: 'auto_awesome', action: () => this.materialDraft() });
             actions.push({ title: t('button.learning-course-edit'), icon: 'edit', action: () => this.editCourse() });
-            actions.push({ title: t('title.learning-enrollment-status'), icon: 'groups', action: () => navigate(`learning-enrollment-status?course=${one.id}`) });
+            actions.push({ title: t('title.learning-enrollment-status'), icon: 'groups', action: () => navigate(`learning-enrollment-status?${convertListParamToSearchString({ filters: [{ name: 'course', operator: 'eq', value: one.id }] })}`) });
             if (one.publishedVersion)
                 actions.push({ title: t('button.learning-assign'), icon: 'person_add', emphasis: { raised: true }, action: () => this.assign() });
         }
@@ -180,6 +184,15 @@ let LearningCourseEditor = class LearningCourseEditor extends localize(i18next)(
         if (current && this.settings.__for !== current.id + current.minSeconds + current.passScore + current.acknowledgement + current.sourceNote)
             this.settings = this.settingsOf(current);
     }
+    async materialDraft() {
+        const units = (this.current?.units ?? []).filter((u) => ['PDF', 'VIDEO'].includes(u.kind) && u.file);
+        if (!units.length) {
+            notify({ message: t('text.learning-ai-upload-first') });
+            return;
+        }
+        if (await openMaterialForm(units))
+            await this.version.refetch();
+    }
     settingsOf(v) {
         return {
             __for: v.id + v.minSeconds + v.passScore + v.acknowledgement + v.sourceNote,
@@ -311,7 +324,7 @@ let LearningCourseEditor = class LearningCourseEditor extends localize(i18next)(
             case 'VIDEO':
                 return [unit.file?.name ?? t('text.learning-unit-file-none'), unit.durationSeconds ? t('text.learning-unit-duration', { minutes: Math.floor(unit.durationSeconds / 60), seconds: unit.durationSeconds % 60 }) : ''].filter(Boolean).join(' · ');
             case 'PDF':
-                return [unit.file?.name ?? t('text.learning-unit-file-none'), t('text.learning-unit-min-seconds', { seconds: unit.minSeconds ?? 60 })].join(' · ');
+                return [unit.file?.name ?? t('text.learning-unit-file-none'), unit.pageCount ? t('text.learning-unit-pages', { pages: unit.pageCount }) : '', t('text.learning-unit-min-seconds', { seconds: unit.minSeconds ?? 60 })].filter(Boolean).join(' · ');
             case 'MARKDOWN':
                 return t('text.learning-unit-min-seconds', { seconds: unit.minSeconds ?? 60 });
             default:
@@ -402,13 +415,13 @@ let LearningCourseEditor = class LearningCourseEditor extends localize(i18next)(
             return;
         const units = [...(this.current.units ?? [])];
         const index = unit ? units.findIndex(one => one.id === unit.id) : units.length;
-        units[index] = { ...(unit ?? {}), ...edit.unit, ...(edit.durationSeconds ? { durationSeconds: edit.durationSeconds } : {}) };
+        units[index] = { ...(unit ?? {}), ...edit.unit, ...(edit.durationSeconds ? { durationSeconds: edit.durationSeconds } : {}), ...(edit.pageCount ? { pageCount: edit.pageCount } : {}) };
         const saved = await this.saveUnits(units);
         if (!saved || !edit.file)
             return;
         const savedUnit = saved.saveCourseUnits.find((one) => one.seq === index + 1);
         if (savedUnit)
-            await this.saves.file.run({ unitId: savedUnit.id, file: edit.file, durationSeconds: edit.durationSeconds ?? null }, { context: uploadContext(() => { }) });
+            await this.saves.file.run({ unitId: savedUnit.id, file: edit.file, durationSeconds: edit.durationSeconds ?? null, pageCount: edit.pageCount ?? null }, { context: uploadContext(() => { }) });
     }
     async moveUnit(index, by) {
         const units = [...this.current.units];