@things-factory/announcement 0.0.0-stage → 10.1.222

package/client/pages/announcement-editor.ts

@@ -0,0 +1,505 @@
+import '@material/web/icon/icon.js'
+import '@operato/input/ox-input-file.js'
+import '@operato/list-state/ox-page-state.js'
+import '../components/audience-picker.js'
+
+import { css, html, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { notify } from '@operato/layout'
+import { navigate, PageView } from '@operato/shell'
+import { renderMarkdown } from '@things-factory/ai-assistant/dist-client/index.js'
+import { ButtonStyles, DocumentPageStyles, FormFieldStyles } from '@operato/styles'
+
+import { chooser } from '../components/audience-picker.js'
+import { announcementApi, type AnnouncementInput, type AnnouncementItem, type AnnouncementLink, type Audience, type FileRow } from '../utils/announcement-api.js'
+import { CATEGORIES, categoryWord, IMPORTANCES, importanceWord, reasonOf, statusWord, t } from '../utils/announcement-words.js'
+
+type Form = {
+  title: string
+  body: string
+  category: string
+  importance: string
+  startsAt: string
+  endsAt: string
+  pinned: boolean
+  requiresAcknowledgement: boolean
+  acknowledgeBy: string
+  popup: boolean
+  sendEmail: boolean
+  links: AnnouncementLink[]
+  audiences: Audience[]
+}
+
+const blank = (): Form => ({
+  title: '',
+  body: '',
+  category: 'GENERAL',
+  importance: 'NORMAL',
+  startsAt: '',
+  endsAt: '',
+  pinned: false,
+  requiresAcknowledgement: false,
+  acknowledgeBy: '',
+  popup: false,
+  sendEmail: false,
+  links: [],
+  audiences: []
+})
+
+/** `datetime-local` speaks the reader's own clock. */
+const pad = (n: number) => String(n).padStart(2, '0')
+function localOf(value?: string | null, dateOnly = false): string {
+  if (!value) return ''
+  const d = new Date(value)
+  const day = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+  return dateOnly ? day : `${day}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+const isoOf = (local: string, endOfDay = false) => (local ? new Date(endOfDay && local.length === 10 ? `${local}T23:59:59` : local).toISOString() : null)
+
+function formOf(one: AnnouncementItem): Form {
+  return {
+    title: one.title,
+    body: one.body ?? '',
+    category: one.category,
+    importance: one.importance,
+    startsAt: localOf(one.startsAt),
+    endsAt: localOf(one.endsAt),
+    pinned: one.pinned,
+    requiresAcknowledgement: one.requiresAcknowledgement,
+    acknowledgeBy: localOf(one.acknowledgeBy, true),
+    popup: one.popup,
+    sendEmail: !!one.sendEmail,
+    links: (one.links ?? []).map(link => ({ ...link })),
+    audiences: (one.audiences ?? []).map(({ scope, targetId, targetName }) => ({ scope, targetId, targetName }))
+  }
+}
+
+/**
+ * 공지 작성 — what it says, to whom, when, and what it asks of its readers (ADR-0163 decisions 2-5). A new one is kept as
+ * a draft until it is published; one already out is changed into a new version, and its writer may tell everyone again.
+ * `?from=<id>` starts a new one as a copy.
+ */
+@customElement('announcement-editor')
+export class AnnouncementEditor extends localize(i18next)(PageView) {
+  static styles = [
+    FormFieldStyles,
+    ButtonStyles,
+    DocumentPageStyles,
+    css`
+      .form {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      }
+      .form .wide {
+        grid-column: 1 / -1;
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      label.check {
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+      }
+      textarea.body {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        min-height: 240px;
+        font-family: inherit;
+      }
+      /* Writing or its preview - the segmented switch of the card library (ai-dashboard), right above the body. */
+      .tabs {
+        display: inline-flex;
+        gap: 4px;
+        padding: 3px;
+        margin-bottom: var(--spacing-small, 4px);
+        border-radius: 10px;
+        background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+      }
+      .tabs button {
+        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;
+      }
+      .tabs button[aria-selected='true'] {
+        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+        box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+      }
+      .preview.markdown :is(ul, ol) {
+        padding-inline-start: 1.4em;
+      }
+      .preview {
+        min-height: 240px;
+        padding: var(--spacing-medium, 8px);
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        border-radius: var(--border-radius, 4px);
+      }
+      .hint {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      ul.files,
+      ul.links {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+      }
+      ul.files li,
+      ul.links li {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+      }
+      ul.links input {
+        flex: 1;
+      }
+      ul.links input.label {
+        flex: 0 1 200px;
+      }
+      .removed {
+        text-decoration: line-through;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .add-link {
+        align-self: flex-start;
+      }
+      li button,
+      .add-link {
+        border: 0;
+        background: none;
+        cursor: pointer;
+        color: var(--md-sys-color-primary);
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        font: inherit;
+        padding: 0;
+      }
+      li button md-icon,
+      .add-link md-icon {
+        --md-icon-size: 18px;
+      }
+    `
+  ]
+
+  @state() announcement: AnnouncementItem | null = null
+  @state() form: Form = blank()
+  @state() files: FileRow[] = []
+  @state() added: File[] = []
+  @state() removed: string[] = []
+  @state() notifyAgain = false
+  @state() preview = false
+  @state() progress?: number
+  @state() loading = false
+  @state() error: unknown = null
+  @state() busy = false
+
+  get out() {
+    return this.announcement?.status === 'PUBLISHED'
+  }
+
+  get context() {
+    const one = this.announcement
+    const actions: any[] = []
+    const draft = !one || one.status === 'DRAFT'
+    if (!this.busy && !this.error && (!one || one.editable)) {
+      if (draft && one) actions.push({ title: t('announcement.button.delete'), icon: 'delete', action: () => this.deleteDraft() })
+      actions.push({ title: draft ? t('announcement.button.save-draft') : t('announcement.button.save'), icon: 'save', action: () => this.save(false) })
+      if (draft) {
+        const later = !!this.form.startsAt && new Date(this.form.startsAt).getTime() > Date.now()
+        actions.push({ title: later ? t('announcement.button.schedule') : t('announcement.button.publish'), icon: 'campaign', emphasis: { raised: true }, action: () => this.save(true) })
+      }
+    }
+    return {
+      title: one ? `${t('announcement.title.edit')} · ${one.title}` : t('announcement.title.new'),
+      ...(one ? { description: statusWord(one.status) } : {}),
+      frame: 'document',
+      /* Opened from 공지사항 or 공지 관리; the menu marks 공지사항. */
+      menu: 'announcement-list',
+      actions
+    }
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (!this.active || !(changes.active || changes.params)) return
+    const { id, from } = lifecycle?.params ?? {}
+    if (id) {
+      if (id !== this.announcement?.id) await this.load(id, false)
+    } else if (from) {
+      await this.load(from, true)
+    } else {
+      this.announcement = null
+      this.form = blank()
+      this.files = []
+      this.reset()
+      this.updateContext()
+    }
+  }
+
+  private reset() {
+    this.added = []
+    this.removed = []
+    this.notifyAgain = false
+    this.preview = false
+  }
+
+  private async load(id: string, asCopy: boolean) {
+    this.loading = true
+    this.error = null
+    try {
+      const one = await announcementApi.one(id)
+      if (!one) throw new Error(t('announcement.refusal.unknown-announcement'))
+      this.announcement = asCopy ? null : one
+      this.form = asCopy ? { ...formOf(one), startsAt: '', endsAt: '' } : formOf(one)
+      this.files = asCopy ? [] : (one.attachments ?? [])
+      this.reset()
+    } catch (error) {
+      this.error = error
+    } finally {
+      this.loading = false
+      this.updateContext()
+    }
+  }
+
+  render() {
+    const form = this.form
+    const set = (patch: Partial<Form>) => {
+      this.form = { ...form, ...patch }
+      this.updateContext()
+    }
+    const editable = !this.busy && (!this.announcement || !!this.announcement.editable)
+    return html`<ox-page-state .loading=${this.loading} .error=${this.error} @retry=${() => this.announcement && this.load(this.announcement.id, false)}>
+      <div class="page">
+        <section class="page-section">
+          <header class="page-section-header"><h3>${t('announcement.text.section-what')}</h3></header>
+          <div class="form">
+            <label class="wide"
+              >${t('announcement.field.title')}
+              <input .value=${form.title} maxlength="200" ?disabled=${!editable} @input=${(e: any) => set({ title: e.target.value })}
+            /></label>
+            <label
+              >${t('announcement.field.category')}
+              ${chooser(
+                CATEGORIES.map(code => ({ value: code, display: categoryWord(code) })),
+                form.category,
+                value => set({ category: value }),
+                '—',
+                t('announcement.field.category')
+              )}
+            </label>
+            <label
+              >${t('announcement.field.importance')}
+              ${chooser(
+                IMPORTANCES.map(code => ({ value: code, display: importanceWord(code) })),
+                form.importance,
+                /* An urgent one pops up unless its writer says not to. */
+                value => set({ importance: value, ...(value === 'URGENT' ? { popup: true } : {}) }),
+                '—',
+                t('announcement.field.importance')
+              )}
+            </label>
+            <div class="wide">
+              <div class="tabs" role="tablist">
+                <button role="tab" aria-selected=${String(!this.preview)} @click=${() => (this.preview = false)}>${t('announcement.text.write')}</button>
+                <button role="tab" aria-selected=${String(this.preview)} @click=${() => (this.preview = true)}>${t('announcement.text.preview')}</button>
+              </div>
+              ${this.preview
+                ? html`<div class="preview markdown">${unsafeHTML(renderMarkdown(form.body))}</div>`
+                : html`<textarea class="body" .value=${form.body} ?disabled=${!editable} placeholder=${t('announcement.text.body-placeholder')} @input=${(e: any) => set({ body: e.target.value })}></textarea>
+                    <span class="hint">${t('announcement.text.markdown-hint')}</span>`}
+            </div>
+          </div>
+        </section>
+
+        <section class="page-section">
+          <header class="page-section-header"><h3>${t('announcement.field.audience')}</h3></header>
+          <announcement-audience-picker .value=${form.audiences} ?disabled=${!editable} @change=${(e: CustomEvent) => set({ audiences: e.detail })}></announcement-audience-picker>
+        </section>
+
+        <section class="page-section">
+          <header class="page-section-header"><h3>${t('announcement.text.section-when')}</h3></header>
+          <div class="form">
+            <label
+              >${t('announcement.field.starts-at')}
+              <input type="datetime-local" .value=${form.startsAt} ?disabled=${!editable || this.out} @input=${(e: any) => set({ startsAt: e.target.value })} />
+              <span class="hint">${t('announcement.text.starts-at-hint')}</span>
+            </label>
+            <label
+              >${t('announcement.field.ends-at')}
+              <input type="datetime-local" .value=${form.endsAt} ?disabled=${!editable} @input=${(e: any) => set({ endsAt: e.target.value })} />
+              <span class="hint">${t('announcement.text.ends-at-hint')}</span>
+            </label>
+            <label class="check wide"><input type="checkbox" .checked=${form.pinned} ?disabled=${!editable} @change=${(e: any) => set({ pinned: e.target.checked })} />${t('announcement.text.pinned-label')}</label>
+            <label class="check wide"
+              ><input
+                type="checkbox"
+                .checked=${form.requiresAcknowledgement}
+                ?disabled=${!editable}
+                @change=${(e: any) => set({ requiresAcknowledgement: e.target.checked, ...(e.target.checked ? { popup: true } : { acknowledgeBy: '' }) })}
+              />${t('announcement.text.acknowledge-label')}</label
+            >
+            ${form.requiresAcknowledgement
+              ? html`<label
+                  >${t('announcement.field.acknowledge-by')}
+                  <input type="date" .value=${form.acknowledgeBy} ?disabled=${!editable} @input=${(e: any) => set({ acknowledgeBy: e.target.value })}
+                /></label>`
+              : nothing}
+            <label class="check wide"><input type="checkbox" .checked=${form.popup} ?disabled=${!editable} @change=${(e: any) => set({ popup: e.target.checked })} />${t('announcement.text.popup-label')}</label>
+            <label class="check wide"
+              ><input type="checkbox" .checked=${form.sendEmail} ?disabled=${!editable} @change=${(e: any) => set({ sendEmail: e.target.checked })} />${t('announcement.text.email-label')}</label
+            >
+            ${form.sendEmail ? html`<span class="hint wide">${t('announcement.text.email-hint')}</span>` : nothing}
+          </div>
+        </section>
+
+        <section class="page-section">
+          <header class="page-section-header"><h3>${t('announcement.field.attachments')}</h3></header>
+          <ul class="files">
+            ${this.files.map(
+              file => html`<li class=${this.removed.includes(file.id) ? 'removed' : ''}>
+                <md-icon>attach_file</md-icon>${file.name}
+                ${editable
+                  ? this.removed.includes(file.id)
+                    ? html`<button @click=${() => (this.removed = this.removed.filter(id => id !== file.id))}><md-icon>undo</md-icon></button>`
+                    : html`<button aria-label=${t('announcement.button.remove')} @click=${() => (this.removed = [...this.removed, file.id])}><md-icon>close</md-icon></button>`
+                  : nothing}
+              </li>`
+            )}
+            ${this.added.map(
+              (file, index) => html`<li>
+                <md-icon>upload_file</md-icon>${file.name}
+                <button aria-label=${t('announcement.button.remove')} @click=${() => (this.added = this.added.filter((_, i) => i !== index))}><md-icon>close</md-icon></button>
+              </li>`
+            )}
+          </ul>
+          ${editable ? html`<ox-input-file quiet hide-filelist multiple icon="attach_file" .progress=${this.progress} @change=${(e: CustomEvent) => this.pick(e)}></ox-input-file>` : nothing}
+        </section>
+
+        <section class="page-section">
+          <header class="page-section-header"><h3>${t('announcement.field.links')}</h3></header>
+          <ul class="links">
+            ${form.links.map(
+              (link, index) => html`<li>
+                <input
+                  class="label"
+                  .value=${link.label}
+                  maxlength="100"
+                  placeholder=${t('announcement.text.link-label')}
+                  ?disabled=${!editable}
+                  @input=${(e: any) => set({ links: form.links.map((one, i) => (i === index ? { ...one, label: e.target.value } : one)) })}
+                />
+                <input
+                  .value=${link.url}
+                  placeholder=${t('announcement.text.link-url')}
+                  ?disabled=${!editable}
+                  @input=${(e: any) => set({ links: form.links.map((one, i) => (i === index ? { ...one, url: e.target.value } : one)) })}
+                />
+                ${editable ? html`<button aria-label=${t('announcement.button.remove')} @click=${() => set({ links: form.links.filter((_, i) => i !== index) })}><md-icon>close</md-icon></button>` : nothing}
+              </li>`
+            )}
+          </ul>
+          ${editable && form.links.length < 10
+            ? html`<button class="add-link" @click=${() => set({ links: [...form.links, { label: '', url: '' }] })}><md-icon>add_link</md-icon>${t('announcement.button.add-link')}</button>
+                <span class="hint">${t('announcement.text.link-hint')}</span>`
+            : nothing}
+        </section>
+
+        ${this.out
+          ? html`<section class="page-section">
+              <label class="check"><input type="checkbox" .checked=${this.notifyAgain} @change=${(e: any) => (this.notifyAgain = e.target.checked)} />${t('announcement.text.notify-again')}</label>
+              <span class="hint">${t('announcement.text.new-version', { version: (this.announcement?.version ?? 1) + 1 })}</span>
+            </section>`
+          : nothing}
+      </div>
+    </ox-page-state>`
+  }
+
+  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.added = [...this.added, ...picked]
+  }
+
+  private input(): AnnouncementInput {
+    const form = this.form
+    return {
+      title: form.title,
+      body: form.body,
+      category: form.category,
+      importance: form.importance,
+      startsAt: isoOf(form.startsAt),
+      endsAt: isoOf(form.endsAt),
+      pinned: form.pinned,
+      requiresAcknowledgement: form.requiresAcknowledgement,
+      acknowledgeBy: form.requiresAcknowledgement ? isoOf(form.acknowledgeBy, true) : null,
+      popup: form.popup,
+      sendEmail: form.sendEmail,
+      links: form.links.filter(link => link.label.trim() || link.url.trim()),
+      audiences: form.audiences.map(({ scope, targetId, targetName }) => ({ scope, targetId, targetName: targetName ?? undefined }))
+    }
+  }
+
+  /** Keeps it, then sends it out when asked - a draft that cannot go out stays kept with the reason told. */
+  private async save(publish: boolean) {
+    this.busy = true
+    this.updateContext()
+    const uploading = (fraction: number) => (this.progress = fraction)
+    try {
+      let id = this.announcement?.id
+      if (id) await announcementApi.update(id, this.input(), this.added, this.removed, this.notifyAgain, uploading)
+      else id = (await announcementApi.create(this.input(), this.added, uploading)).id
+      if (publish) {
+        const sent = await announcementApi.publish(id)
+        notify({ message: sent.status === 'SCHEDULED' ? t('announcement.text.scheduled-done') : t('announcement.text.published-done') })
+        navigate(`announcement-view?id=${id}`)
+        return
+      }
+      notify({ message: t('announcement.text.saved') })
+      if (this.announcement?.id === id) await this.load(id, false)
+      else navigate(`announcement-editor?id=${id}`)
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.progress = undefined
+      this.busy = false
+      this.updateContext()
+    }
+  }
+
+  private async deleteDraft() {
+    const sure = await OxPrompt.open({
+      title: t('announcement.button.delete'),
+      text: t('announcement.text.delete-confirm', { title: this.announcement!.title }),
+      confirmButton: { text: t('announcement.button.delete') },
+      cancelButton: { text: t('announcement.button.cancel') }
+    })
+    if (!sure) return
+    try {
+      await announcementApi.remove(this.announcement!.id)
+      notify({ message: t('announcement.text.deleted') })
+      navigate('announcement-manage-list')
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    }
+  }
+}