@things-factory/announcement 0.0.0-stage → 10.1.222

package/client/components/audience-picker.ts

@@ -0,0 +1,221 @@
+/*
+ * Whom an announcement goes to - the whole domain, departments (each with those under it), roles and people
+ * (ADR-0163 decision 2), with how many people that names now. Changes go up as `change` with the whole list.
+ */
+import '@material/web/icon/icon.js'
+import '@operato/input/ox-select.js'
+import '@operato/popup/ox-popup-list.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+import { announcementApi, type Audience } from '../utils/announcement-api.js'
+import { t } from '../utils/announcement-words.js'
+
+type Choices = Awaited<ReturnType<typeof announcementApi.choices>>
+
+const ICON: Record<string, string> = { DOMAIN: 'domain', DEPARTMENT: 'account_tree', ROLE: 'badge', USER: 'person' }
+
+/** The framework chooser - a popup list with its search box on top. `change` hears only a value other than the one shown. */
+export function chooser(options: { value: string; display: string }[], value: string, change: (value: string) => void, placeholder: string, label: string) {
+  const shown = options.find(option => option.value === value)?.display ?? placeholder
+  return html`<ox-select
+    .value=${value}
+    aria-label=${label}
+    @change=${(e: CustomEvent) => {
+      const next = String(e.detail ?? '')
+      if (next !== value) change(next)
+    }}
+  >
+    <span slot="label">${shown}</span>
+    <ox-popup-list align-left nowrap with-search>${options.map(option => html`<div option value=${option.value}>${option.display}</div>`)}</ox-popup-list>
+  </ox-select>`
+}
+
+@customElement('announcement-audience-picker')
+export class AudiencePicker extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-medium, 8px);
+    }
+    .chosen {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px);
+      min-height: 28px;
+      align-items: center;
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 4px 2px 8px;
+      border-radius: 999px;
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      font-size: var(--ui-t-body, 14px);
+    }
+    .chip md-icon {
+      --md-icon-size: 16px;
+    }
+    .chip button {
+      border: 0;
+      background: none;
+      cursor: pointer;
+      color: inherit;
+      display: inline-flex;
+      padding: 0;
+    }
+    .add {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+      align-items: center;
+    }
+    .add ox-select {
+      min-width: 180px;
+    }
+    .add > button,
+    .found button {
+      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+      background: none;
+      border-radius: var(--border-radius, 4px);
+      padding: 2px var(--spacing-medium, 8px);
+      cursor: pointer;
+      font: inherit;
+      color: inherit;
+    }
+    .people {
+      position: relative;
+    }
+    .found {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px);
+      margin-top: var(--spacing-small, 4px);
+    }
+    .size,
+    .none {
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+  `
+
+  @property({ attribute: false }) value: Audience[] = []
+  @property({ type: Boolean }) disabled = false
+  @state() private choices?: Choices
+  @state() private text = ''
+  @state() private found: { id: string; name: string; note?: string }[] = []
+  @state() private size?: number
+  private searching?: ReturnType<typeof setTimeout>
+  private counting?: ReturnType<typeof setTimeout>
+
+  async connectedCallback() {
+    super.connectedCallback()
+    try {
+      this.choices = await announcementApi.choices()
+    } catch {
+      this.choices = { domainId: '', domainName: '', departments: [], roles: [] }
+    }
+  }
+
+  updated(changes: Map<string, unknown>) {
+    if (changes.has('value')) this.count()
+  }
+
+  render() {
+    const choices = this.choices
+    const has = (scope: string, id: string) => this.value.some(one => one.scope === scope && one.targetId === id)
+    return html`<div class="chosen">
+        ${this.value.length
+          ? this.value.map(
+              one => html`<span class="chip"
+                ><md-icon>${ICON[one.scope] ?? 'label'}</md-icon>${one.targetName ?? one.targetId}${one.scope === 'DEPARTMENT' ? html`<small>${t('announcement.text.with-sub-departments')}</small>` : nothing}
+                ${this.disabled ? nothing : html`<button aria-label=${t('announcement.button.remove')} @click=${() => this.take(one)}><md-icon>close</md-icon></button>`}</span
+              >`
+            )
+          : html`<span class="none">${t('announcement.text.no-audience')}</span>`}
+      </div>
+      ${this.disabled || !choices
+        ? nothing
+        : html`<div class="add">
+              ${has('DOMAIN', choices.domainId) ? nothing : html`<button @click=${() => this.give({ scope: 'DOMAIN', targetId: choices.domainId, targetName: t('announcement.text.everyone-in', { name: choices.domainName }) })}>${t('announcement.text.everyone')}</button>`}
+              ${choices.departments.length
+                ? chooser(
+                    choices.departments.filter(one => !has('DEPARTMENT', one.id)).map(one => ({ value: one.id, display: one.note ? `${one.name} (${one.note})` : one.name })),
+                    '',
+                    id => this.give({ scope: 'DEPARTMENT', targetId: id, targetName: choices.departments.find(one => one.id === id)?.name }),
+                    t('announcement.text.add-department'),
+                    t('announcement.text.add-department')
+                  )
+                : nothing}
+              ${choices.roles.length
+                ? chooser(
+                    choices.roles.filter(one => !has('ROLE', one.id)).map(one => ({ value: one.id, display: one.name })),
+                    '',
+                    id => this.give({ scope: 'ROLE', targetId: id, targetName: choices.roles.find(one => one.id === id)?.name }),
+                    t('announcement.text.add-role'),
+                    t('announcement.text.add-role')
+                  )
+                : nothing}
+              <span class="people">
+                <input type="search" .value=${this.text} placeholder=${t('announcement.text.add-person')} @input=${(e: any) => this.search(e.target.value)} />
+              </span>
+            </div>
+            ${this.found.length
+              ? html`<div class="found">
+                  ${this.found
+                    .filter(one => !has('USER', one.id))
+                    .map(one => html`<button @click=${() => this.give({ scope: 'USER', targetId: one.id, targetName: one.name })}>${one.name}${one.note && one.note !== one.name ? ` · ${one.note}` : ''}</button>`)}
+                </div>`
+              : nothing}`}
+      ${this.size === undefined ? nothing : html`<span class="size">${t('announcement.text.audience-size', { count: this.size })}</span>`}`
+  }
+
+  private give(target: Audience) {
+    this.text = ''
+    this.found = []
+    this.tell([...this.value, target])
+  }
+
+  private take(target: Audience) {
+    this.tell(this.value.filter(one => !(one.scope === target.scope && one.targetId === target.targetId)))
+  }
+
+  private tell(value: Audience[]) {
+    this.value = value
+    this.dispatchEvent(new CustomEvent('change', { detail: value }))
+  }
+
+  private search(text: string) {
+    this.text = text
+    clearTimeout(this.searching)
+    this.searching = setTimeout(async () => {
+      try {
+        this.found = text.trim() ? await announcementApi.people(text.trim()) : []
+      } catch {
+        this.found = []
+      }
+    }, 250)
+  }
+
+  /** How many the audience names now - asked a moment after it stops changing. */
+  private count() {
+    clearTimeout(this.counting)
+    if (!this.value.length) {
+      this.size = 0
+      return
+    }
+    this.counting = setTimeout(async () => {
+      try {
+        this.size = await announcementApi.audienceSize(this.value.map(({ scope, targetId }) => ({ scope, targetId })))
+      } catch {
+        this.size = undefined
+      }
+    }, 300)
+  }
+}

package/client/index.ts

@@ -0,0 +1 @@
+export { generateAnnouncementBadge, refreshAnnouncementBadge } from './utils/announcement-badge.js'