@things-factory/inquiry 0.0.0-stage → 10.1.252

package/dist-client/components/inquiry-thread.js

@@ -0,0 +1,303 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * One inquiry as its thread (ADR-0184 decisions 2-4): what was asked, from which screen and application, the files, and
+ * the replies between its writer and the handlers. Below it, the reply box and the moves the person may make.
+ */
+import '@material/web/icon/icon.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/text-button.js';
+import '@operato/input/ox-input-file.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { ButtonStyles, FormFieldStyles } from '@operato/styles';
+import { inquiriesChanged, inquiryApi } from '../utils/inquiry-api.js';
+import { KIND_ICONS, kindWord, reasonOf, statusWord, t, visibilityWord, when } from '../utils/inquiry-words.js';
+/** The words of a move button - a move to CLOSED by its writer and by a handler read the same. */
+const moveWord = (status) => t(`inquiry.move.${status}`, { defaultValue: statusWord(status) });
+let InquiryThread = class InquiryThread extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.inquiryId = '';
+        this.one = null;
+        this.missing = false;
+        this.text = '';
+        this.files = [];
+        this.busy = false;
+    }
+    static { this.styles = [
+        FormFieldStyles,
+        ButtonStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        color: var(--md-sys-color-on-surface);
+      }
+      h2 {
+        margin: 0;
+        font-size: var(--ui-t-title, 16px);
+      }
+      .meta {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 0 var(--spacing-small, 4px);
+        border-radius: var(--border-radius, 4px);
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        line-height: 1.6;
+      }
+      .chip md-icon {
+        --md-icon-size: 14px;
+      }
+      .chip.status {
+        color: var(--md-sys-color-primary);
+        border-color: currentColor;
+      }
+      .text {
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 1.6;
+      }
+      .context {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        word-break: break-all;
+      }
+      .context a {
+        color: inherit;
+      }
+      ul.files {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        font-size: var(--ui-t-small, 12px);
+      }
+      ul.files a {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        color: var(--md-sys-color-primary);
+      }
+      ul.files md-icon {
+        --md-icon-size: 14px;
+      }
+      ol.replies {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+      }
+      ol.replies li {
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-radius: var(--border-radius, 4px);
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      ol.replies li.handler {
+        background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+      }
+      ol.replies li.answer {
+        border-color: var(--md-sys-color-primary);
+      }
+      .move {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--md-sys-color-primary);
+        font-weight: 600;
+      }
+      .box {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+      }
+      textarea {
+        min-height: 96px;
+        font-family: inherit;
+        box-sizing: border-box;
+        width: 100%;
+      }
+      .hint {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+      }
+      .row .spacer {
+        flex: 1;
+      }
+    `
+    ]; }
+    updated(changes) {
+        if (changes.has('inquiryId'))
+            this.load(true);
+    }
+    async load(opened = false) {
+        if (!this.inquiryId)
+            return;
+        try {
+            this.one = await inquiryApi.one(this.inquiryId);
+            this.missing = !this.one;
+            /* Its writer opening it reads the handlers' words - the badge counts again. */
+            if (opened && this.one?.mine && this.one.isNew) {
+                await inquiryApi.read(this.one.id);
+                inquiriesChanged();
+            }
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+    }
+    render() {
+        if (this.missing)
+            return html `<p class="hint">${t('inquiry.text.not-found')}</p>`;
+        const one = this.one;
+        if (!one)
+            return nothing;
+        const replies = one.replies ?? [];
+        const handlerMoves = (one.moves ?? []).filter(status => status !== 'CLOSED');
+        return html `
+      <div class="meta">
+        <span class="chip"><md-icon>${KIND_ICONS[one.kind] ?? 'help'}</md-icon>${kindWord(one.kind)}</span>
+        <span class="chip status">${statusWord(one.status)}</span>
+        ${one.visibility === 'PRIVATE' ? html `<span class="chip"><md-icon>lock</md-icon>${visibilityWord(one.visibility)}</span>` : nothing}
+        <span>${one.creator?.name ?? ''} · ${when(one.createdAt)}</span>
+        ${one.assignee ? html `<span>${t('inquiry.text.assignee', { name: one.assignee.name ?? '' })}</span>` : nothing}
+      </div>
+      <h2>${one.title}</h2>
+      ${one.body ? html `<div class="text">${one.body}</div>` : nothing} ${this.renderFiles(one.attachments)}
+      <div class="context">
+        ${one.pageUrl ? html `<div>${t('inquiry.field.page')}: ${/^https?:\/\//i.test(one.pageUrl) ? html `<a href=${one.pageUrl} target="_blank" rel="noopener">${one.pageUrl}</a>` : one.pageUrl}</div>` : nothing}
+        ${one.appName ? html `<div>${t('inquiry.field.app')}: ${one.appName}${one.appVersion ? ` ${one.appVersion}` : ''}</div>` : nothing}
+      </div>
+
+      ${replies.length
+            ? html `<ol class="replies">
+            ${replies.map(reply => html `<li class=${[reply.byHandler ? 'handler' : '', reply.answer ? 'answer' : ''].join(' ')}>
+                <div class="meta">
+                  <span>${reply.creator?.name ?? ''}</span>
+                  ${reply.byHandler ? html `<span class="chip">${t('inquiry.text.handler')}</span>` : nothing}
+                  ${reply.answer ? html `<span class="chip status"><md-icon>check</md-icon>${t('inquiry.text.answer')}</span>` : nothing}
+                  <span>${when(reply.createdAt)}</span>
+                </div>
+                ${reply.status && !reply.answer ? html `<span class="move">${t('inquiry.text.moved', { status: statusWord(reply.status) })}</span>` : nothing}
+                ${reply.body ? html `<div class="text">${reply.body}</div>` : nothing} ${this.renderFiles(reply.attachments)}
+              </li>`)}
+          </ol>`
+            : nothing}
+      ${one.canReply ? this.renderBox(one, handlerMoves) : one.status === 'CLOSED' ? html `<p class="hint">${t('inquiry.text.closed-note')}</p>` : nothing}
+    `;
+    }
+    renderFiles(files) {
+        if (!files?.length)
+            return nothing;
+        return html `<ul class="files">
+      ${files.map(file => html `<li><a href=${file.fullpath} target="_blank" rel="noopener" download=${file.name}><md-icon>attach_file</md-icon>${file.name}</a></li>`)}
+    </ul>`;
+    }
+    renderBox(one, handlerMoves) {
+        const said = !!this.text.trim() || this.files.length > 0;
+        const canClose = (one.moves ?? []).includes('CLOSED');
+        return html `<div class="box">
+      <textarea .value=${this.text} placeholder=${t(one.asHandler ? 'inquiry.text.reply-placeholder-handler' : 'inquiry.text.reply-placeholder')} @input=${(e) => (this.text = e.target.value)}></textarea>
+      <div class="row">
+        ${this.files.map(file => html `<span class="hint">${file.name}</span>`)}
+        <ox-input-file quiet hide-filelist multiple icon="attach_file" .progress=${this.progress} @change=${(e) => this.pick(e)}></ox-input-file>
+        <span class="spacer"></span>
+        ${one.asHandler && !one.assignee ? html `<md-text-button ?disabled=${this.busy} @click=${() => this.act(() => inquiryApi.take(one.id))}>${t('inquiry.button.take')}</md-text-button>` : nothing}
+        ${one.asHandler
+            ? handlerMoves.map(status => html `<md-text-button ?disabled=${this.busy} @click=${() => this.move(one, status)}>${moveWord(status)}</md-text-button>`)
+            : nothing}
+        ${canClose ? html `<md-text-button ?disabled=${this.busy} @click=${() => this.move(one, 'CLOSED')}>${moveWord('CLOSED')}</md-text-button>` : nothing}
+        <md-outlined-button ?disabled=${!said || this.busy} @click=${() => this.reply(one, false)}>${t('inquiry.button.reply')}</md-outlined-button>
+        ${one.asHandler ? html `<md-filled-button ?disabled=${!said || this.busy} @click=${() => this.reply(one, true)}>${t('inquiry.button.answer')}</md-filled-button>` : nothing}
+      </div>
+      <span class="hint">${t('inquiry.text.move-hint')}</span>
+    </div>`;
+    }
+    pick(e) {
+        const picked = [...(e.detail ?? [])];
+        if (!picked.length)
+            return;
+        e.target.reset?.();
+        this.files = [...this.files, ...picked];
+    }
+    async act(work) {
+        this.busy = true;
+        try {
+            await work();
+            this.text = '';
+            this.files = [];
+            inquiriesChanged();
+            await this.load();
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+        finally {
+            this.busy = false;
+            this.progress = undefined;
+        }
+    }
+    reply(one, asAnswer) {
+        return this.act(() => inquiryApi.reply(one.id, this.text.trim(), asAnswer, this.files, fraction => (this.progress = fraction)));
+    }
+    /* What is written in the box goes with the move as its reason. */
+    move(one, status) {
+        return this.act(() => inquiryApi.move(one.id, status, this.text.trim() || undefined));
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], InquiryThread.prototype, "inquiryId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InquiryThread.prototype, "one", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InquiryThread.prototype, "missing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InquiryThread.prototype, "text", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], InquiryThread.prototype, "files", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InquiryThread.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], InquiryThread.prototype, "progress", void 0);
+InquiryThread = __decorate([
+    customElement('inquiry-thread')
+], InquiryThread);
+export { InquiryThread };
+//# sourceMappingURL=inquiry-thread.js.map

package/dist-client/components/inquiry-thread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inquiry-thread.js","sourceRoot":"","sources":["../../client/components/inquiry-thread.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * One inquiry as its thread (ADR-0184 decisions 2-4): what was asked, from which screen and application, the files, and\n * the replies between its writer and the handlers. Below it, the reply box and the moves the person may make.\n */\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/input/ox-input-file.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 { notify } from '@operato/layout'\nimport { ButtonStyles, FormFieldStyles } from '@operato/styles'\n\nimport { inquiriesChanged, inquiryApi, type FileRow, type InquiryItem } from '../utils/inquiry-api.js'\nimport { KIND_ICONS, kindWord, reasonOf, statusWord, t, visibilityWord, when } from '../utils/inquiry-words.js'\n\n/** The words of a move button - a move to CLOSED by its writer and by a handler read the same. */\nconst moveWord = (status: string) => t(`inquiry.move.${status}`, { defaultValue: statusWord(status) })\n\n@customElement('inquiry-thread')\nexport class InquiryThread extends localize(i18next)(LitElement) {\n  static styles = [\n    FormFieldStyles,\n    ButtonStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n        color: var(--md-sys-color-on-surface);\n      }\n      h2 {\n        margin: 0;\n        font-size: var(--ui-t-title, 16px);\n      }\n      .meta {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n        font-size: var(--ui-t-small, 12px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n      .chip {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n        padding: 0 var(--spacing-small, 4px);\n        border-radius: var(--border-radius, 4px);\n        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n        line-height: 1.6;\n      }\n      .chip md-icon {\n        --md-icon-size: 14px;\n      }\n      .chip.status {\n        color: var(--md-sys-color-primary);\n        border-color: currentColor;\n      }\n      .text {\n        white-space: pre-wrap;\n        word-break: break-word;\n        line-height: 1.6;\n      }\n      .context {\n        font-size: var(--ui-t-small, 12px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n        word-break: break-all;\n      }\n      .context a {\n        color: inherit;\n      }\n      ul.files {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n        font-size: var(--ui-t-small, 12px);\n      }\n      ul.files a {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n        color: var(--md-sys-color-primary);\n      }\n      ul.files md-icon {\n        --md-icon-size: 14px;\n      }\n      ol.replies {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n      }\n      ol.replies li {\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-radius: var(--border-radius, 4px);\n        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n      ol.replies li.handler {\n        background: var(--ui-panel-2, var(--md-sys-color-surface-container));\n      }\n      ol.replies li.answer {\n        border-color: var(--md-sys-color-primary);\n      }\n      .move {\n        font-size: var(--ui-t-small, 12px);\n        color: var(--md-sys-color-primary);\n        font-weight: 600;\n      }\n      .box {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small, 4px);\n      }\n      textarea {\n        min-height: 96px;\n        font-family: inherit;\n        box-sizing: border-box;\n        width: 100%;\n      }\n      .hint {\n        font-size: var(--ui-t-small, 12px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n      .row {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n      }\n      .row .spacer {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property() inquiryId = ''\n  @state() one: InquiryItem | null = null\n  @state() missing = false\n  @state() text = ''\n  @state() files: File[] = []\n  @state() busy = false\n  /* Set only while files go up - the picker shows its bar then. */\n  @state() progress?: number\n\n  updated(changes: Map<string, unknown>) {\n    if (changes.has('inquiryId')) this.load(true)\n  }\n\n  async load(opened = false) {\n    if (!this.inquiryId) return\n    try {\n      this.one = await inquiryApi.one(this.inquiryId)\n      this.missing = !this.one\n      /* Its writer opening it reads the handlers' words - the badge counts again. */\n      if (opened && this.one?.mine && this.one.isNew) {\n        await inquiryApi.read(this.one.id)\n        inquiriesChanged()\n      }\n    } catch (error) {\n      notify({ level: 'error', message: reasonOf(error) })\n    }\n  }\n\n  render() {\n    if (this.missing) return html`<p class=\"hint\">${t('inquiry.text.not-found')}</p>`\n    const one = this.one\n    if (!one) return nothing\n    const replies = one.replies ?? []\n    const handlerMoves = (one.moves ?? []).filter(status => status !== 'CLOSED')\n    return html`\n      <div class=\"meta\">\n        <span class=\"chip\"><md-icon>${KIND_ICONS[one.kind] ?? 'help'}</md-icon>${kindWord(one.kind)}</span>\n        <span class=\"chip status\">${statusWord(one.status)}</span>\n        ${one.visibility === 'PRIVATE' ? html`<span class=\"chip\"><md-icon>lock</md-icon>${visibilityWord(one.visibility)}</span>` : nothing}\n        <span>${one.creator?.name ?? ''} · ${when(one.createdAt)}</span>\n        ${one.assignee ? html`<span>${t('inquiry.text.assignee', { name: one.assignee.name ?? '' })}</span>` : nothing}\n      </div>\n      <h2>${one.title}</h2>\n      ${one.body ? html`<div class=\"text\">${one.body}</div>` : nothing} ${this.renderFiles(one.attachments)}\n      <div class=\"context\">\n        ${one.pageUrl ? html`<div>${t('inquiry.field.page')}: ${/^https?:\\/\\//i.test(one.pageUrl) ? html`<a href=${one.pageUrl} target=\"_blank\" rel=\"noopener\">${one.pageUrl}</a>` : one.pageUrl}</div>` : nothing}\n        ${one.appName ? html`<div>${t('inquiry.field.app')}: ${one.appName}${one.appVersion ? ` ${one.appVersion}` : ''}</div>` : nothing}\n      </div>\n\n      ${replies.length\n        ? html`<ol class=\"replies\">\n            ${replies.map(\n              reply => html`<li class=${[reply.byHandler ? 'handler' : '', reply.answer ? 'answer' : ''].join(' ')}>\n                <div class=\"meta\">\n                  <span>${reply.creator?.name ?? ''}</span>\n                  ${reply.byHandler ? html`<span class=\"chip\">${t('inquiry.text.handler')}</span>` : nothing}\n                  ${reply.answer ? html`<span class=\"chip status\"><md-icon>check</md-icon>${t('inquiry.text.answer')}</span>` : nothing}\n                  <span>${when(reply.createdAt)}</span>\n                </div>\n                ${reply.status && !reply.answer ? html`<span class=\"move\">${t('inquiry.text.moved', { status: statusWord(reply.status) })}</span>` : nothing}\n                ${reply.body ? html`<div class=\"text\">${reply.body}</div>` : nothing} ${this.renderFiles(reply.attachments)}\n              </li>`\n            )}\n          </ol>`\n        : nothing}\n      ${one.canReply ? this.renderBox(one, handlerMoves) : one.status === 'CLOSED' ? html`<p class=\"hint\">${t('inquiry.text.closed-note')}</p>` : nothing}\n    `\n  }\n\n  private renderFiles(files?: FileRow[]) {\n    if (!files?.length) return nothing\n    return html`<ul class=\"files\">\n      ${files.map(file => html`<li><a href=${file.fullpath} target=\"_blank\" rel=\"noopener\" download=${file.name}><md-icon>attach_file</md-icon>${file.name}</a></li>`)}\n    </ul>`\n  }\n\n  private renderBox(one: InquiryItem, handlerMoves: string[]) {\n    const said = !!this.text.trim() || this.files.length > 0\n    const canClose = (one.moves ?? []).includes('CLOSED')\n    return html`<div class=\"box\">\n      <textarea .value=${this.text} placeholder=${t(one.asHandler ? 'inquiry.text.reply-placeholder-handler' : 'inquiry.text.reply-placeholder')} @input=${(e: any) => (this.text = e.target.value)}></textarea>\n      <div class=\"row\">\n        ${this.files.map(file => html`<span class=\"hint\">${file.name}</span>`)}\n        <ox-input-file quiet hide-filelist multiple icon=\"attach_file\" .progress=${this.progress} @change=${(e: CustomEvent) => this.pick(e)}></ox-input-file>\n        <span class=\"spacer\"></span>\n        ${one.asHandler && !one.assignee ? html`<md-text-button ?disabled=${this.busy} @click=${() => this.act(() => inquiryApi.take(one.id))}>${t('inquiry.button.take')}</md-text-button>` : nothing}\n        ${one.asHandler\n          ? handlerMoves.map(status => html`<md-text-button ?disabled=${this.busy} @click=${() => this.move(one, status)}>${moveWord(status)}</md-text-button>`)\n          : nothing}\n        ${canClose ? html`<md-text-button ?disabled=${this.busy} @click=${() => this.move(one, 'CLOSED')}>${moveWord('CLOSED')}</md-text-button>` : nothing}\n        <md-outlined-button ?disabled=${!said || this.busy} @click=${() => this.reply(one, false)}>${t('inquiry.button.reply')}</md-outlined-button>\n        ${one.asHandler ? html`<md-filled-button ?disabled=${!said || this.busy} @click=${() => this.reply(one, true)}>${t('inquiry.button.answer')}</md-filled-button>` : nothing}\n      </div>\n      <span class=\"hint\">${t('inquiry.text.move-hint')}</span>\n    </div>`\n  }\n\n  private pick(e: CustomEvent) {\n    const picked = [...((e.detail as File[]) ?? [])]\n    if (!picked.length) return\n    ;(e.target as any).reset?.()\n    this.files = [...this.files, ...picked]\n  }\n\n  private async act(work: () => Promise<unknown>) {\n    this.busy = true\n    try {\n      await work()\n      this.text = ''\n      this.files = []\n      inquiriesChanged()\n      await this.load()\n    } catch (error) {\n      notify({ level: 'error', message: reasonOf(error) })\n    } finally {\n      this.busy = false\n      this.progress = undefined\n    }\n  }\n\n  private reply(one: InquiryItem, asAnswer: boolean) {\n    return this.act(() => inquiryApi.reply(one.id, this.text.trim(), asAnswer, this.files, fraction => (this.progress = fraction)))\n  }\n\n  /* What is written in the box goes with the move as its reason. */\n  private move(one: InquiryItem, status: string) {\n    return this.act(() => inquiryApi.move(one.id, status, this.text.trim() || undefined))\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+import '@material/web/button/filled-button.js';
+import { LitElement } from 'lit';
+export declare class InquiryTodo extends LitElement {
+    static styles: import("lit").CSSResult;
+    input: {
+        inquiryId?: string;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/components/inquiry-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 } from '@operato/i18n';
+import { navigate } from '@operato/shell';
+/*
+ * 문의 처리의 할 일 (ADR-0184 decision 7) - what the worklist to-do shows: the way to the inquiry. Answering, deciding or
+ * closing it there closes the to-do; nothing is answered here.
+ */
+let InquiryTodo = class InquiryTodo extends 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 id = this.input?.inquiryId ?? '';
+        return html `<p>${i18next.t('inquiry.text.todo-body')}</p>
+      <md-filled-button ?disabled=${!id} @click=${() => navigate(`inquiry-list?id=${id}`)}>${i18next.t('inquiry.button.open')}</md-filled-button>`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], InquiryTodo.prototype, "input", void 0);
+InquiryTodo = __decorate([
+    customElement('inquiry-todo')
+], InquiryTodo);
+export { InquiryTodo };
+//# sourceMappingURL=inquiry-todo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inquiry-todo.js","sourceRoot":"","sources":["../../client/components/inquiry-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,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC;;;GAGG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAe2B,UAAK,GAA2B,EAAE,CAAA;IAOpE,CAAC;aArBQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYZ;IAID,MAAM;QACJ,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;QACtC,OAAO,IAAI,CAAA,MAAM,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;oCACpB,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,EAAE,EAAE,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,qBAAqB,CAAA;IAChJ,CAAC;;AAN+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;0CAAmC;AAfvD,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAsBvB","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 } from '@operato/i18n'\nimport { navigate } from '@operato/shell'\n\n/*\n * 문의 처리의 할 일 (ADR-0184 decision 7) - what the worklist to-do shows: the way to the inquiry. Answering, deciding or\n * closing it there closes the to-do; nothing is answered here.\n */\n@customElement('inquiry-todo')\nexport class InquiryTodo extends 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: { inquiryId?: string } = {}\n\n  render() {\n    const id = this.input?.inquiryId ?? ''\n    return html`<p>${i18next.t('inquiry.text.todo-body')}</p>\n      <md-filled-button ?disabled=${!id} @click=${() => navigate(`inquiry-list?id=${id}`)}>${i18next.t('inquiry.button.open')}</md-filled-button>`\n  }\n}\n"]}

package/dist-client/components/inquiry-writer.d.ts

@@ -0,0 +1,25 @@
+import '@material/web/icon/icon.js';
+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';
+/** Opens the window, carrying the screen it is opened on. */
+export declare function openInquiryWriter(kind?: string): any;
+declare const InquiryWriter_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class InquiryWriter extends InquiryWriter_base {
+    static styles: import("lit").CSSResult[];
+    kind: string;
+    pageUrl: string;
+    title: string;
+    body: string;
+    privately: boolean;
+    files: File[];
+    sending: boolean;
+    progress?: number;
+    render(): import("lit-html").TemplateResult<1>;
+    private pick;
+    private send;
+}
+export {};

package/dist-client/components/inquiry-writer.js

@@ -0,0 +1,233 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * 문의 · 제안 보내기 (ADR-0184 decisions 1, 4, 5, 9) - the window the avatar menu opens on any screen: the kind, the title,
+ * the words, files, and who reads it. The screen it was opened on goes with it; the application, its version, the
+ * writer and the domain are the server's to take.
+ */
+import '@material/web/icon/icon.js';
+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 { notify, openPopup } from '@operato/layout';
+import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles';
+import { inquiriesChanged, inquiryApi } from '../utils/inquiry-api.js';
+import { KINDS, kindWord, reasonOf, t } from '../utils/inquiry-words.js';
+const MAX_TITLE = 200;
+/** Opens the window, carrying the screen it is opened on. */
+export function openInquiryWriter(kind = 'QUESTION') {
+    const pageUrl = location.href;
+    const handle = openPopup(html `<inquiry-writer .kind=${kind} .pageUrl=${pageUrl} @close=${() => handle.close()}></inquiry-writer>`, {
+        backdrop: true,
+        size: 'large',
+        title: t('inquiry.title.write')
+    });
+    return handle;
+}
+let InquiryWriter = class InquiryWriter extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.kind = 'QUESTION';
+        this.pageUrl = '';
+        this.title = '';
+        this.body = '';
+        this.privately = false;
+        this.files = [];
+        this.sending = false;
+    }
+    /* The house shape of a popup (page-standard sections 7, 8): only the body scrolls, fields are labels above native
+       inputs, the one button row is `ox-popup-actions`. */
+    static { this.styles = [
+        CommonPopupStyles,
+        PopupBodyStyles,
+        FormFieldStyles,
+        PopupFieldStyles,
+        css `
+      ox-input-select-buttons {
+        align-self: flex-start;
+      }
+      textarea {
+        min-height: 160px;
+        resize: vertical;
+      }
+      .note {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
+        word-break: break-all;
+      }
+      .files {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px);
+        align-items: center;
+        color: var(--ui-ink);
+      }
+      .file {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+      }
+      .file md-icon {
+        --md-icon-size: 14px;
+      }
+      .file button {
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+        padding: 0;
+        cursor: pointer;
+        color: var(--ui-muted);
+      }
+      .check {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        color: var(--ui-ink);
+      }
+      /* The field rule stretches its inputs to the row; a checkbox keeps its own size. */
+      .field .check input {
+        width: auto;
+        margin: 0;
+      }
+    `
+    ]; }
+    render() {
+        const title = this.title.trim();
+        return html `
+      <div class="body">
+        <div class="field">
+          <ox-input-select-buttons
+            .value=${this.kind}
+            .options=${KINDS.map(code => ({ display: kindWord(code), value: code }))}
+            @change=${(e) => e.detail && (this.kind = e.detail)}
+          ></ox-input-select-buttons>
+          <span>${t(`inquiry.text.kind-hint-${this.kind.toLowerCase()}`)}</span>
+        </div>
+        <label class="field">
+          <span
+            >${t('inquiry.field.title')} ·
+            ${t('inquiry.text.title-limit', { count: this.title.length, max: MAX_TITLE })}</span
+          >
+          <input .value=${this.title} maxlength=${MAX_TITLE} @input=${(e) => (this.title = e.target.value)} />
+        </label>
+        <label class="field">
+          <span>${t('inquiry.field.body')}</span>
+          <textarea
+            .value=${this.body}
+            placeholder=${t(`inquiry.text.body-placeholder-${this.kind.toLowerCase()}`)}
+            @input=${(e) => (this.body = e.target.value)}
+          ></textarea>
+        </label>
+        <div class="files">
+          ${this.files.map((file, index) => html `<span class="file"
+                ><md-icon>attach_file</md-icon>${file.name}<button
+                  aria-label=${t('inquiry.button.remove')}
+                  @click=${() => (this.files = this.files.filter((_, i) => i !== index))}
+                >
+                  <md-icon>close</md-icon>
+                </button></span
+              >`)}
+          <ox-input-file
+            quiet
+            hide-filelist
+            multiple
+            icon="attach_file"
+            .progress=${this.progress}
+            @change=${(e) => this.pick(e)}
+          ></ox-input-file>
+        </div>
+        <div class="field">
+          <label class="check"
+            ><input
+              type="checkbox"
+              .checked=${this.privately}
+              @change=${(e) => (this.privately = e.target.checked)}
+            />${t('inquiry.text.private-label')}</label
+          >
+          <span>${this.privately ? t('inquiry.text.private-hint') : t('inquiry.text.domain-hint')}</span>
+        </div>
+        ${this.pageUrl ? html `<div class="note">${t('inquiry.text.page-hint', { page: this.pageUrl })}</div>` : nothing}
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.dispatchEvent(new CustomEvent('close'))}
+          >${t('inquiry.button.cancel')}</md-text-button
+        >
+        <md-filled-button slot="confirm" ?disabled=${!title || this.sending} @click=${() => this.send()}
+          >${t('inquiry.button.submit')}</md-filled-button
+        >
+      </ox-popup-actions>
+    `;
+    }
+    pick(e) {
+        const picked = [...(e.detail ?? [])];
+        /* The picker's own reset says `change` again, with nothing - that one is let go. */
+        if (!picked.length)
+            return;
+        e.target.reset?.();
+        this.files = [...this.files, ...picked];
+    }
+    async send() {
+        this.sending = true;
+        try {
+            await inquiryApi.create({
+                kind: this.kind,
+                title: this.title.trim(),
+                body: this.body,
+                visibility: this.privately ? 'PRIVATE' : 'DOMAIN',
+                pageUrl: this.pageUrl
+            }, this.files, fraction => (this.progress = fraction));
+            inquiriesChanged();
+            notify({ message: t('inquiry.text.sent') });
+            /* The writer stays on the screen they were on - the answer comes as a notice and on the menu's badge. */
+            this.dispatchEvent(new CustomEvent('close'));
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+        finally {
+            this.sending = false;
+            this.progress = undefined;
+        }
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], InquiryWriter.prototype, "kind", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], InquiryWriter.prototype, "pageUrl", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InquiryWriter.prototype, "title", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InquiryWriter.prototype, "body", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InquiryWriter.prototype, "privately", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], InquiryWriter.prototype, "files", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InquiryWriter.prototype, "sending", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], InquiryWriter.prototype, "progress", void 0);
+InquiryWriter = __decorate([
+    customElement('inquiry-writer')
+], InquiryWriter);
+export { InquiryWriter };
+//# sourceMappingURL=inquiry-writer.js.map