@things-factory/inquiry 10.1.252 → 10.1.254

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/inquiry",
-  "version": "10.1.252",
+  "version": "10.1.254",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -36,18 +36,18 @@
     "@operato/shell": "^10.29.39",
     "@operato/styles": "^10.29.1",
     "@operato/utils": "^10.0.0",
-    "@things-factory/apptool-base": "^10.1.247",
-    "@things-factory/attachment-base": "^10.1.250",
-    "@things-factory/auth-base": "^10.1.250",
+    "@things-factory/apptool-base": "^10.1.254",
+    "@things-factory/attachment-base": "^10.1.254",
+    "@things-factory/auth-base": "^10.1.254",
     "@things-factory/env": "^10.1.149",
-    "@things-factory/i18n-base": "^10.1.250",
-    "@things-factory/notification": "^10.1.250",
-    "@things-factory/shell": "^10.1.247",
-    "@things-factory/worklist": "^10.1.250",
+    "@things-factory/i18n-base": "^10.1.254",
+    "@things-factory/notification": "^10.1.254",
+    "@things-factory/shell": "^10.1.254",
+    "@things-factory/worklist": "^10.1.254",
     "graphql-scalars": "^1.22.0",
     "graphql-tag": "^2.12.6",
     "graphql-upload": "^15.0.2",
     "lit": "^3.1.2"
   },
-  "gitHead": "ebd127225a33ec1fbbc11923df08c355f1230b04"
+  "gitHead": "793e2fd617db5bb917ec892e64956fb690f7e7b0"
 }

package/client/bootstrap.ts

@@ -1,27 +0,0 @@
-import './components/inquiry-todo.js'
-
-import { store } from '@operato/shell'
-import { auth } from '@things-factory/auth-base/dist-client/auth.js'
-import { ADD_USER_MENU } from '@things-factory/apptool-base/client'
-
-import { openInquiryWriter } from './components/inquiry-writer.js'
-import { startInquiryWatch, stopInquiryWatch } from './inquiry-watch.js'
-
-/*
- * The way to write one is in the menu the header's avatar opens (ADR-0184 decision 9) - on every screen of every
- * application, carrying the screen it was opened on. The badge follows the person.
- */
-export default function bootstrap() {
-  store.dispatch({
-    type: ADD_USER_MENU,
-    item: {
-      name: 'inquiry',
-      icon: 'contact_support',
-      label: 'inquiry.button.send',
-      order: 30,
-      action: () => openInquiryWriter()
-    }
-  })
-  auth.on('profile', () => startInquiryWatch())
-  auth.on('presignout', () => stopInquiryWatch())
-}

package/client/components/inquiry-thread.ts

@@ -1,277 +0,0 @@
-/*
- * 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, type FileRow, type InquiryItem } 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: string) => t(`inquiry.move.${status}`, { defaultValue: statusWord(status) })
-
-@customElement('inquiry-thread')
-export class InquiryThread extends localize(i18next)(LitElement) {
-  static 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;
-      }
-    `
-  ]
-
-  @property() inquiryId = ''
-  @state() one: InquiryItem | null = null
-  @state() missing = false
-  @state() text = ''
-  @state() files: File[] = []
-  @state() busy = false
-  /* Set only while files go up - the picker shows its bar then. */
-  @state() progress?: number
-
-  updated(changes: Map<string, unknown>) {
-    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}
-    `
-  }
-
-  private renderFiles(files?: FileRow[]) {
-    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>`
-  }
-
-  private renderBox(one: InquiryItem, handlerMoves: string[]) {
-    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: any) => (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: CustomEvent) => 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>`
-  }
-
-  private pick(e: CustomEvent) {
-    const picked = [...((e.detail as File[]) ?? [])]
-    if (!picked.length) return
-    ;(e.target as any).reset?.()
-    this.files = [...this.files, ...picked]
-  }
-
-  private async act(work: () => Promise<unknown>) {
-    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
-    }
-  }
-
-  private reply(one: InquiryItem, asAnswer: boolean) {
-    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. */
-  private move(one: InquiryItem, status: string) {
-    return this.act(() => inquiryApi.move(one.id, status, this.text.trim() || undefined))
-  }
-}

package/client/components/inquiry-todo.ts

@@ -1,36 +0,0 @@
-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.
- */
-@customElement('inquiry-todo')
-export class InquiryTodo extends LitElement {
-  static 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);
-    }
-  `
-
-  @property({ attribute: false }) input: { inquiryId?: string } = {}
-
-  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>`
-  }
-}

package/client/components/inquiry-writer.ts

@@ -1,212 +0,0 @@
-/*
- * 문의 · 제안 보내기 (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: any = openPopup(
-    html`<inquiry-writer .kind=${kind} .pageUrl=${pageUrl} @close=${() => handle.close()}></inquiry-writer>`,
-    {
-      backdrop: true,
-      size: 'large',
-      title: t('inquiry.title.write')
-    }
-  )
-  return handle
-}
-
-@customElement('inquiry-writer')
-export class InquiryWriter extends localize(i18next)(LitElement) {
-  /* 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 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;
-      }
-    `
-  ]
-
-  @property() kind = 'QUESTION'
-  @property() pageUrl = ''
-  @state() title = ''
-  @state() body = ''
-  @state() privately = false
-  @state() files: File[] = []
-  @state() sending = false
-  /* Set only while files go up - the picker shows its bar then. */
-  @state() progress?: number
-
-  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: CustomEvent) => 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: any) => (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: any) => (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: CustomEvent) => this.pick(e)}
-          ></ox-input-file>
-        </div>
-        <div class="field">
-          <label class="check"
-            ><input
-              type="checkbox"
-              .checked=${this.privately}
-              @change=${(e: any) => (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>
-    `
-  }
-
-  private pick(e: CustomEvent) {
-    const picked = [...((e.detail as File[]) ?? [])]
-    /* The picker's own reset says `change` again, with nothing - that one is let go. */
-    if (!picked.length) return
-    ;(e.target as any).reset?.()
-    this.files = [...this.files, ...picked]
-  }
-
-  private 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
-    }
-  }
-}

package/client/index.ts

@@ -1,2 +0,0 @@
-export { generateInquiryBadge, refreshInquiryBadge } from './utils/inquiry-badge.js'
-export { openInquiryWriter } from './components/inquiry-writer.js'

package/client/inquiry-watch.ts

@@ -1,45 +0,0 @@
-/*
- * Keeps the menu badge up with inquiries while the application is open (ADR-0184 decision 8). The notice of an inquiry
- * reaches the screen through notification's subscription; the count itself is asked of the server.
- */
-import gql from 'graphql-tag'
-
-import { subscribe } from '@operato/graphql'
-
-import { refreshInquiryBadge } from './utils/inquiry-badge.js'
-
-window.addEventListener('inquiries-changed', () => refreshInquiryBadge())
-let subscription: { unsubscribe(): void } | undefined
-let watching = false
-
-export async function startInquiryWatch(): Promise<void> {
-  if (watching) return
-  watching = true
-  refreshInquiryBadge()
-  try {
-    subscription = await subscribe(
-      {
-        query: gql`
-          subscription {
-            notification(subjects: ["info"]) {
-              type
-            }
-          }
-        `
-      },
-      {
-        next({ data }: any) {
-          if (data?.notification?.type === 'inquiry') refreshInquiryBadge()
-        }
-      }
-    )
-  } catch {
-    /* without the live line the badge comes at the next sign-in or the next change on a screen */
-  }
-}
-
-export function stopInquiryWatch(): void {
-  subscription?.unsubscribe()
-  subscription = undefined
-  watching = false
-}