@things-factory/inquiry 0.0.0-stage → 10.1.251

package/client/bootstrap.ts

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,277 @@
+/*
+ * 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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,208 @@
+/*
+ * 문의 · 제안 보내기 (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 { 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 { ButtonStyles, FormFieldStyles } from '@operato/styles'
+
+import { inquiriesChanged, inquiryApi } from '../utils/inquiry-api.js'
+import { KIND_ICONS, 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} @done=${() => 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) {
+  static styles = [
+    FormFieldStyles,
+    ButtonStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        color: var(--md-sys-color-on-surface);
+        overflow: auto;
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      label.check {
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+      }
+      .kinds {
+        display: inline-flex;
+        gap: 4px;
+        padding: 3px;
+        border-radius: 10px;
+        background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+        align-self: flex-start;
+      }
+      .kinds button {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 14px;
+        border: 0;
+        border-radius: 8px;
+        background: transparent;
+        box-shadow: none;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        font: inherit;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .kinds button[aria-pressed='true'] {
+        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+      }
+      .kinds md-icon {
+        --md-icon-size: 16px;
+      }
+      textarea {
+        min-height: 160px;
+        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));
+        word-break: break-all;
+      }
+      .files {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px);
+        align-items: center;
+      }
+      .file {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 0 var(--spacing-small, 4px);
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        border-radius: var(--border-radius, 4px);
+        font-size: var(--ui-t-small, 12px);
+      }
+      .file button {
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+        padding: 0;
+        cursor: pointer;
+        color: inherit;
+      }
+      .file md-icon {
+        --md-icon-size: 14px;
+      }
+      .buttons {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--spacing-medium, 8px);
+      }
+    `
+  ]
+
+  @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="kinds" role="group" aria-label=${t('inquiry.field.kind')}>
+        ${KINDS.map(
+          code => html`<button aria-pressed=${String(this.kind === code)} @click=${() => (this.kind = code)}><md-icon>${KIND_ICONS[code]}</md-icon>${kindWord(code)}</button>`
+        )}
+      </div>
+      <span class="hint">${t(`inquiry.text.kind-hint-${this.kind.toLowerCase()}`)}</span>
+      <label
+        >${t('inquiry.field.title')}
+        <input .value=${this.title} maxlength=${MAX_TITLE} @input=${(e: any) => (this.title = e.target.value)} />
+        <span class="hint">${t('inquiry.text.title-limit', { count: this.title.length, max: MAX_TITLE })}</span>
+      </label>
+      <label
+        >${t('inquiry.field.body')}
+        <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>
+      <label class="check"><input type="checkbox" .checked=${this.privately} @change=${(e: any) => (this.privately = e.target.checked)} />${t('inquiry.text.private-label')}</label>
+      <span class="hint">${this.privately ? t('inquiry.text.private-hint') : t('inquiry.text.domain-hint')}</span>
+      ${this.pageUrl ? html`<span class="hint">${t('inquiry.text.page-hint', { page: this.pageUrl })}</span>` : nothing}
+      <div class="buttons">
+        <md-text-button @click=${() => this.dispatchEvent(new CustomEvent('done'))}>${t('inquiry.button.cancel')}</md-text-button>
+        <md-filled-button ?disabled=${!title || this.sending} @click=${() => this.send()}>${t('inquiry.button.submit')}</md-filled-button>
+      </div>
+    `
+  }
+
+  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('done'))
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.sending = false
+      this.progress = undefined
+    }
+  }
+}

package/client/index.ts

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

package/client/inquiry-watch.ts

@@ -0,0 +1,45 @@
+/*
+ * 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
+}