@things-factory/inquiry 0.0.0-stage → 10.1.251

package/client/pages/inquiry-list.ts

@@ -0,0 +1,218 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
+import '@operato/input/ox-select.js'
+import '@operato/popup/ox-popup-list.js'
+import '../components/inquiry-thread.js'
+
+import gql from 'graphql-tag'
+import { css, html, nothing } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+
+import { DataGrist, FetchOption } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { navigate, PageView } from '@operato/shell'
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+import { openInquiryWriter } from '../components/inquiry-writer.js'
+import type { InquiryThread } from '../components/inquiry-thread.js'
+import { inquiryApi, LIST_FIELDS } from '../utils/inquiry-api.js'
+import { KIND_ICONS, KINDS, kindWord, STATUSES, statusWord, t, visibilityWord, when } from '../utils/inquiry-words.js'
+
+/**
+ * 문의 · 제안 — the questions, bug reports and proposals of the domain that the person may read, and with `?id=` one of
+ * them as its thread (ADR-0184 decision 8). Handlers work from here too: they open on those waiting on them.
+ */
+@customElement('inquiry-list')
+export class InquiryList extends localize(i18next)(PageView) {
+  static styles = [
+    WorkSurfacePageStyles,
+    CommonGristStyles,
+    CommonHeaderStyles,
+    ScrollbarStyles,
+    css`
+      .filters {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+      }
+      ox-select {
+        min-width: 140px;
+      }
+      .thread {
+        overflow: auto;
+        padding: var(--spacing-large, 12px) var(--spacing-huge, 16px);
+        max-width: 880px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+    `
+  ]
+
+  @state() gristConfig: any
+  @state() scope = 'all'
+  @state() handler = false
+  /* The inquiry shown as its thread - none shows the list. */
+  @state() openId = ''
+  @query('ox-grist') private grist!: DataGrist
+  @query('inquiry-thread') private thread!: InquiryThread
+
+  private onChanged = () => {
+    if (this.openId) return
+    this.grist?.fetch()
+  }
+
+  get context() {
+    return {
+      title: t('inquiry.title.list'),
+      ...(this.openId
+        ? {}
+        : {
+            search: {
+              handler: (search: string) => {
+                this.grist.searchText = search
+              },
+              value: this.grist?.searchText || ''
+            },
+            filter: {
+              handler: () => {
+                this.grist.toggleHeadroom()
+              }
+            }
+          }),
+      actions: [
+        ...(this.openId ? [{ title: t('inquiry.button.back'), icon: 'arrow_back', action: () => navigate('inquiry-list') }] : []),
+        { title: t('inquiry.button.send'), icon: 'add', emphasis: { raised: true }, action: () => openInquiryWriter() }
+      ]
+    }
+  }
+
+  render() {
+    if (this.openId) return html`<div class="thread"><inquiry-thread .inquiryId=${this.openId}></inquiry-thread></div>`
+    const scopes = [
+      { value: 'all', display: t('inquiry.scope.all') },
+      { value: 'mine', display: t('inquiry.scope.mine') },
+      ...(this.handler ? [{ value: 'handlers-turn', display: t('inquiry.scope.handlers-turn') }] : [])
+    ]
+    return html`<ox-grist class="page-fill" search-mode="term" .mode=${isMobileDevice() ? 'CARD' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-select
+            .value=${this.scope}
+            aria-label=${t('inquiry.text.scope')}
+            @change=${(e: CustomEvent) => {
+              const next = String(e.detail ?? 'all')
+              if (next === this.scope) return
+              this.scope = next
+              this.grist.fetch()
+            }}
+          >
+            <span slot="label">${scopes.find(one => one.value === this.scope)?.display}</span>
+            <ox-popup-list align-left nowrap>${scopes.map(one => html`<div option value=${one.value}>${one.display}</div>`)}</ox-popup-list>
+          </ox-select>
+          <ox-filters-form without-search autofocus></ox-filters-form>
+        </div>
+      </div>
+    </ox-grist>`
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener('inquiries-changed', this.onChanged)
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('inquiries-changed', this.onChanged)
+    super.disconnectedCallback()
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (!this.active || !(changes.active || changes.params)) return
+    const id = String(lifecycle?.params?.id ?? '')
+    if (id !== this.openId) {
+      this.openId = id
+      this.updateContext()
+    } else if (id) this.thread?.load(true)
+    else if (this.gristConfig) this.grist?.fetch()
+  }
+
+  async pageInitialized() {
+    try {
+      this.handler = (await inquiryApi.summary()).handler
+      /* A handler opens on what waits on them. */
+      if (this.handler) this.scope = 'handlers-turn'
+    } catch {
+      this.handler = false
+    }
+    const open = (record: any) => record?.id && navigate(`inquiry-list?id=${record.id}`)
+    this.gristConfig = {
+      rows: { appendable: false, selectable: false, handlers: { click: (_c: any, _d: any, _col: any, record: any) => open(record) } },
+      pagination: { limit: 50, pages: [50, 100] },
+      emptyNote: { title: t('inquiry.text.empty'), description: t('inquiry.text.empty-description') },
+      list: { fields: ['title', 'status'], details: ['kind', 'createdAt'] },
+      columns: [
+        {
+          type: 'string',
+          name: 'kind',
+          header: t('inquiry.field.kind'),
+          width: 110,
+          record: {
+            editable: false,
+            renderer: (value: string) => html`<span style="display:inline-flex;align-items:center;gap:2px"><md-icon style="--md-icon-size:16px">${KIND_ICONS[value] ?? 'help'}</md-icon>${kindWord(value)}</span>`
+          },
+          filter: { type: 'select', operator: 'eq', options: [{ display: '', value: '' }, ...KINDS.map(code => ({ display: kindWord(code), value: code }))] }
+        },
+        {
+          type: 'string',
+          name: 'title',
+          header: t('inquiry.field.title'),
+          width: 320,
+          record: {
+            editable: false,
+            renderer: (value: string, _c: any, record: any) =>
+              html`<span style=${record?.isNew ? 'font-weight:600' : ''}
+                >${record?.visibility === 'PRIVATE' ? html`<md-icon style="--md-icon-size:14px" title=${visibilityWord('PRIVATE')}>lock</md-icon> ` : nothing}${value}${record?.replyCount
+                  ? ` (${record.replyCount})`
+                  : ''}</span
+              >`
+          }
+        },
+        {
+          type: 'string',
+          name: 'status',
+          header: t('inquiry.field.status'),
+          width: 100,
+          record: {
+            editable: false,
+            renderer: (value: string, _c: any, record: any) =>
+              html`<span style=${record?.isNew ? 'color:var(--md-sys-color-primary);font-weight:600' : ''}>${statusWord(value)}${record?.isNew ? ` · ${t('inquiry.text.new')}` : ''}</span>`
+          },
+          filter: { type: 'select', operator: 'eq', options: [{ display: '', value: '' }, ...STATUSES.map(code => ({ display: statusWord(code), value: code }))] }
+        },
+        { type: 'string', name: 'creator', header: t('inquiry.field.writer'), width: 110, record: { editable: false, renderer: (value: any) => value?.name ?? '' } },
+        { type: 'string', name: 'assignee', header: t('inquiry.field.assignee'), width: 110, record: { editable: false, renderer: (value: any) => value?.name ?? '' } },
+        { type: 'string', name: 'createdAt', header: t('inquiry.field.created-at'), width: 130, record: { editable: false, renderer: (value: string) => when(value) } }
+      ]
+    }
+  }
+
+  async fetchHandler({ page = 1, limit = 50, filters = [], search }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $search: String, $scope: String) {
+          responses: inquiries(filters: $filters, pagination: $pagination, search: $search, scope: $scope) {
+            items { ${LIST_FIELDS} }
+            total
+          }
+        }
+      `,
+      variables: { filters, pagination: { page, limit }, search: search?.trim() || undefined, scope: this.scope },
+      fetchPolicy: 'network-only'
+    })
+    if (response.errors?.length) throw response
+    return { total: response.data.responses.total, records: response.data.responses.items }
+  }
+}

package/client/route.ts

@@ -0,0 +1,8 @@
+/* The page this module brings to an application that puts it in its menu (ADR-0184 decision 8). */
+export default function route(page: string) {
+  switch (page) {
+    case 'inquiry-list':
+      import('./pages/inquiry-list.js')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/client/utils/inquiry-api.ts

@@ -0,0 +1,103 @@
+/*
+ * The inquiry doors as the screens call them (ADR-0184). Every call throws the server's words when it is refused.
+ */
+import gql from 'graphql-tag'
+
+import { client, uploadContext } from '@operato/graphql'
+
+export type FileRow = { id: string; name: string; fullpath: string; size?: number; mimetype?: string }
+export type Person = { id: string; name?: string | null } | null
+
+export interface InquiryReplyItem {
+  id: string
+  body?: string | null
+  byHandler: boolean
+  answer: boolean
+  status?: string | null
+  createdAt: string
+  creator?: Person
+  attachments?: FileRow[]
+}
+
+export interface InquiryItem {
+  id: string
+  kind: 'QUESTION' | 'BUG' | 'PROPOSAL' | string
+  title: string
+  body?: string | null
+  status: string
+  visibility: 'DOMAIN' | 'PRIVATE' | string
+  pageUrl?: string | null
+  appName?: string | null
+  appVersion?: string | null
+  replyCount: number
+  createdAt: string
+  answeredAt?: string | null
+  closedAt?: string | null
+  mine?: boolean
+  isNew?: boolean
+  canReply?: boolean
+  asHandler?: boolean
+  moves?: string[]
+  creator?: Person
+  assignee?: Person
+  attachments?: FileRow[]
+  replies?: InquiryReplyItem[]
+}
+
+export interface InquiryInput {
+  kind: string
+  title: string
+  body?: string
+  visibility?: string
+  pageUrl?: string
+}
+
+export type InquirySummary = { newAnswers: number; unhandled: number; handler: boolean; badge: number }
+
+/** The fields a list row needs. */
+export const LIST_FIELDS = `id kind title status visibility replyCount createdAt mine isNew creator { id name } assignee { id name }`
+
+const FILE = `attachments { id name fullpath size mimetype }`
+
+/** Everything one inquiry shows. */
+export const FULL_FIELDS = `${LIST_FIELDS} body pageUrl appName appVersion answeredAt closedAt canReply asHandler moves ${FILE}
+  replies { id body byHandler answer status createdAt creator { id name } ${FILE} }`
+
+function answer<T>(response: any, field: string): T {
+  if (response.errors?.length) throw new Error(response.errors.map((one: any) => one.message).join(' · '))
+  return response.data?.[field] as T
+}
+
+async function ask<T>(query: string, variables: Record<string, unknown>, field: string): Promise<T> {
+  return answer<T>(await client.query({ query: gql(query), variables, fetchPolicy: 'network-only' }), field)
+}
+
+async function change<T>(mutation: string, variables: Record<string, unknown>, field: string, uploading?: (fraction: number) => void): Promise<T> {
+  return answer<T>(await client.mutate({ mutation: gql(mutation), variables, ...(uploading ? { context: uploadContext(uploading) } : {}) }), field)
+}
+
+/** Tells the badge and an open list that an inquiry changed. */
+export const inquiriesChanged = () => window.dispatchEvent(new CustomEvent('inquiries-changed'))
+
+export const inquiryApi = {
+  one: (id: string) => ask<InquiryItem | null>(`query ($id: String!) { inquiry(id: $id) { ${FULL_FIELDS} } }`, { id }, 'inquiry'),
+  summary: () => ask<InquirySummary>(`query { inquirySummary { newAnswers unhandled handler badge } }`, {}, 'inquirySummary'),
+  create: (input: InquiryInput, attachments: File[], uploading?: (fraction: number) => void) =>
+    change<InquiryItem>(
+      `mutation ($input: InquiryInput!, $attachments: [Upload!]) { createInquiry(input: $input, attachments: $attachments) { id } }`,
+      { input, attachments: attachments.length ? attachments : null },
+      'createInquiry',
+      attachments.length ? uploading : undefined
+    ),
+  reply: (id: string, body: string, asAnswer: boolean, attachments: File[], uploading?: (fraction: number) => void) =>
+    change<InquiryItem>(
+      `mutation ($id: String!, $body: String, $answer: Boolean, $attachments: [Upload!]) { replyInquiry(id: $id, body: $body, answer: $answer, attachments: $attachments) { id } }`,
+      { id, body, answer: asAnswer, attachments: attachments.length ? attachments : null },
+      'replyInquiry',
+      attachments.length ? uploading : undefined
+    ),
+  move: (id: string, status: string, reason?: string) =>
+    change<InquiryItem>(`mutation ($id: String!, $status: String!, $reason: String) { moveInquiry(id: $id, status: $status, reason: $reason) { id } }`, { id, status, reason }, 'moveInquiry'),
+  take: (id: string) => change<InquiryItem>(`mutation ($id: String!) { takeInquiry(id: $id) { id } }`, { id }, 'takeInquiry'),
+  read: (id: string) => change<InquiryItem>(`mutation ($id: String!) { readInquiry(id: $id) { id } }`, { id }, 'readInquiry')
+}

package/client/utils/inquiry-badge.ts

@@ -0,0 +1,46 @@
+/*
+ * The count the menu shows on 문의 · 제안 (ADR-0184 decision 8) - new words on one's own inquiries, and for a handler
+ * those waiting on the handlers. An application puts `generateInquiryBadge` on its menu entry; the count is asked again
+ * whenever an inquiry notice arrives or an inquiry changes on a screen.
+ */
+import { inquiryApi } from './inquiry-api.js'
+
+let count: number | undefined
+/* One more each time the count is asked again - a badge that was busy drawing the last one still sees the next. */
+let version = 0
+const waiting = new Set<() => void>()
+
+/** Asks the server again and tells every badge. A count that could not be asked is not zero: it draws nothing. */
+export async function refreshInquiryBadge(): Promise<void> {
+  try {
+    count = (await inquiryApi.summary()).badge
+  } catch {
+    count = undefined
+  }
+  version++
+  for (const wake of [...waiting]) wake()
+}
+
+let generation = 0
+
+/** One badge's counts. The menu asks for a new one when it draws again; the one before it then ends, as worklist's do. */
+export async function* generateInquiryBadge() {
+  const mine = ++generation
+  for (const wake of [...waiting]) wake()
+  let seen = version
+  yield count
+  while (true) {
+    if (seen === version) {
+      await new Promise<void>(resolve => {
+        const wake = () => {
+          waiting.delete(wake)
+          resolve()
+        }
+        waiting.add(wake)
+      })
+    }
+    if (mine !== generation) return
+    seen = version
+    yield count
+  }
+}

package/client/utils/inquiry-words.ts

@@ -0,0 +1,26 @@
+/*
+ * The words and marks of inquiries - one place for the list, the thread, the writing window and the to-do.
+ */
+import { i18next } from '@operato/i18n'
+
+export const t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))
+
+export const KINDS = ['QUESTION', 'BUG', 'PROPOSAL']
+export const VISIBILITIES = ['DOMAIN', 'PRIVATE']
+export const STATUSES = ['RECEIVED', 'IN_PROGRESS', 'ANSWERED', 'PLANNED', 'DECLINED', 'CLOSED']
+
+export const kindWord = (code?: string | null) => (code ? t(`inquiry.kind.${code}`, { defaultValue: code }) : '')
+export const statusWord = (code?: string | null) => (code ? t(`inquiry.status.${code}`, { defaultValue: code }) : '')
+export const visibilityWord = (code?: string | null) => (code ? t(`inquiry.visibility.${code}`, { defaultValue: code }) : '')
+
+/** The icon of each kind. */
+export const KIND_ICONS: Record<string, string> = { QUESTION: 'help', BUG: 'bug_report', PROPOSAL: 'lightbulb' }
+
+/** A day and time as the reader's locale writes it. */
+export function when(value?: string | Date | null): string {
+  if (!value) return ''
+  return new Date(value).toLocaleString(i18next.language, { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+
+/** The words of a refusal the server gave, or the fallback. */
+export const reasonOf = (error: unknown) => (error as Error)?.message || t('inquiry.text.failed')

package/dist-client/bootstrap.d.ts

@@ -0,0 +1,2 @@
+import './components/inquiry-todo.js';
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,25 @@
+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());
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAExE;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE;YACJ,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,iBAAiB;YACvB,KAAK,EAAE,qBAAqB;YAC5B,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE;SAClC;KACF,CAAC,CAAA;IACF,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC7C,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAA;AACjD,CAAC","sourcesContent":["import './components/inquiry-todo.js'\n\nimport { store } from '@operato/shell'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\nimport { ADD_USER_MENU } from '@things-factory/apptool-base/client'\n\nimport { openInquiryWriter } from './components/inquiry-writer.js'\nimport { startInquiryWatch, stopInquiryWatch } from './inquiry-watch.js'\n\n/*\n * The way to write one is in the menu the header's avatar opens (ADR-0184 decision 9) - on every screen of every\n * application, carrying the screen it was opened on. The badge follows the person.\n */\nexport default function bootstrap() {\n  store.dispatch({\n    type: ADD_USER_MENU,\n    item: {\n      name: 'inquiry',\n      icon: 'contact_support',\n      label: 'inquiry.button.send',\n      order: 30,\n      action: () => openInquiryWriter()\n    }\n  })\n  auth.on('profile', () => startInquiryWatch())\n  auth.on('presignout', () => stopInquiryWatch())\n}\n"]}

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

@@ -0,0 +1,28 @@
+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 { LitElement, nothing } from 'lit';
+import { type InquiryItem } from '../utils/inquiry-api.js';
+declare const InquiryThread_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class InquiryThread extends InquiryThread_base {
+    static styles: import("lit").CSSResult[];
+    inquiryId: string;
+    one: InquiryItem | null;
+    missing: boolean;
+    text: string;
+    files: File[];
+    busy: boolean;
+    progress?: number;
+    updated(changes: Map<string, unknown>): void;
+    load(opened?: boolean): Promise<void>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private renderFiles;
+    private renderBox;
+    private pick;
+    private act;
+    private reply;
+    private move;
+}
+export {};