@things-factory/announcement 10.1.255 → 10.1.257

package/client/components/announcement-receipts.ts

@@ -6,17 +6,19 @@ import '@material/web/button/filled-button.js'
 import '@material/web/button/text-button.js'
 import '@operato/popup/ox-popup-actions.js'
 
+import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
+import { MutationController, QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify } from '@operato/layout'
 import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles'
 
-import { announcementApi, type AnnouncementItem } from '../utils/announcement-api.js'
-import { reasonOf, t, when } from '../utils/announcement-words.js'
+import { type AnnouncementItem } from '../utils/announcement-api.js'
+import { t, when } from '../utils/announcement-words.js'
 
-type Row = Awaited<ReturnType<typeof announcementApi.receipts>>[number]
+type Row = { userId: string; name?: string; email?: string; listed: boolean; notifiedAt?: string; readAt?: string; acknowledgedAt?: string }
 
 const FormStyles = css`
   :host {
@@ -74,21 +76,25 @@ const FormStyles = css`
 export class AnnouncementReceipts extends localize(i18next)(LitElement) {
   static styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]
   @property({ attribute: false }) announcement!: AnnouncementItem
-  @state() private rows: Row[] = []
   @state() private which: 'all' | 'unread' | 'unacknowledged' | 'later' = 'all'
-  @state() private busy = false
 
-  connectedCallback() {
-    super.connectedCallback()
-    this.load()
+  /* Whom it reached and what each did with it, read for the announcement shown (ADR-0190). */
+  private receipts = new QueryController(
+    this,
+    gql`query ($id: String!) { announcementReceipts(id: $id) { userId name email listed notifiedAt readAt acknowledgedAt } }`,
+    { variables: () => (this.announcement?.id ? { id: this.announcement.id } : undefined) }
+  )
+
+  private reminder = new MutationController(this, gql`mutation ($id: String!) { remindAnnouncement(id: $id) }`, {
+    refetch: () => [this.receipts]
+  })
+
+  private get rows(): Row[] {
+    return this.receipts.data?.announcementReceipts ?? []
   }
 
-  private async load() {
-    try {
-      this.rows = await announcementApi.receipts(this.announcement.id)
-    } catch (error) {
-      notify({ level: 'error', message: reasonOf(error) })
-    }
+  private get busy() {
+    return this.reminder.pending
   }
 
   render() {
@@ -140,16 +146,8 @@ export class AnnouncementReceipts extends localize(i18next)(LitElement) {
   }
 
   private async remind() {
-    this.busy = true
-    try {
-      const told = await announcementApi.remind(this.announcement.id)
-      notify({ message: t('announcement.text.reminded', { count: told }) })
-      await this.load()
-    } catch (error) {
-      notify({ level: 'error', message: reasonOf(error) })
-    } finally {
-      this.busy = false
-    }
+    const done = await this.reminder.run({ id: this.announcement.id })
+    if (done) notify({ message: t('announcement.text.reminded', { count: done.remindAnnouncement }) })
   }
 
   private close() {
@@ -163,7 +161,11 @@ export class AnnouncementWithdrawForm extends localize(i18next)(LitElement) {
   static styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]
   @property({ attribute: false }) announcement!: AnnouncementItem
   @state() private reason = ''
-  @state() private busy = false
+  private withdrawal = new MutationController(this, gql`mutation ($id: String!, $reason: String!) { withdrawAnnouncement(id: $id, reason: $reason) { id status } }`)
+
+  private get busy() {
+    return this.withdrawal.pending
+  }
 
   render() {
     return html`<div class="body">
@@ -177,17 +179,10 @@ export class AnnouncementWithdrawForm extends localize(i18next)(LitElement) {
   }
 
   private async withdraw() {
-    this.busy = true
-    try {
-      await announcementApi.withdraw(this.announcement.id, this.reason)
-      notify({ message: t('announcement.text.withdrawn-done') })
-      this.dispatchEvent(new CustomEvent('announcement-withdrawn', { bubbles: true, composed: true }))
-      this.close()
-    } catch (error) {
-      notify({ level: 'error', message: reasonOf(error) })
-    } finally {
-      this.busy = false
-    }
+    if (!(await this.withdrawal.run({ id: this.announcement.id, reason: this.reason }))) return
+    notify({ message: t('announcement.text.withdrawn-done') })
+    this.dispatchEvent(new CustomEvent('announcement-withdrawn', { bubbles: true, composed: true }))
+    this.close()
   }
 
   private close() {

package/client/components/announcement-sheet.ts

@@ -5,17 +5,18 @@
 import '@material/web/icon/icon.js'
 import '@material/web/button/filled-button.js'
 
+import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 
+import { MutationController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { notify } from '@operato/layout'
 import { navigate } from '@operato/shell'
 import { renderMarkdown } from '@things-factory/ai-assistant/dist-client/index.js'
 
-import { announcementApi, type AnnouncementItem } from '../utils/announcement-api.js'
-import { categoryWord, importanceWord, reasonOf, t, when } from '../utils/announcement-words.js'
+import { announcementsChanged, type AnnouncementItem } from '../utils/announcement-api.js'
+import { categoryWord, importanceWord, t, when } from '../utils/announcement-words.js'
 
 /** A screen of the application opens in place; an https page opens apart. */
 export function followLink(url: string) {
@@ -143,7 +144,14 @@ export class AnnouncementSheet extends localize(i18next)(LitElement) {
   `
 
   @property({ attribute: false }) announcement!: AnnouncementItem
-  @state() private busy = false
+  private acknowledgement = new MutationController(
+    this,
+    gql`mutation ($id: String!) { acknowledgeAnnouncement(id: $id) { id readerState mine { readAt acknowledgedAt } } }`
+  )
+
+  private get busy() {
+    return this.acknowledgement.pending
+  }
 
   render() {
     const one = this.announcement
@@ -200,15 +208,10 @@ export class AnnouncementSheet extends localize(i18next)(LitElement) {
   }
 
   private async acknowledge() {
-    this.busy = true
-    try {
-      const done = await announcementApi.acknowledge(this.announcement.id)
-      this.announcement = { ...this.announcement, ...done }
-      this.dispatchEvent(new CustomEvent('announcement-acknowledged', { bubbles: true, composed: true, detail: this.announcement }))
-    } catch (error) {
-      notify({ level: 'error', message: reasonOf(error) })
-    } finally {
-      this.busy = false
-    }
+    const done = await this.acknowledgement.run({ id: this.announcement.id })
+    if (!done) return
+    announcementsChanged()
+    this.announcement = { ...this.announcement, ...done.acknowledgeAnnouncement }
+    this.dispatchEvent(new CustomEvent('announcement-acknowledged', { bubbles: true, composed: true, detail: this.announcement }))
   }
 }

package/client/components/audience-picker.ts

@@ -6,15 +6,18 @@ import '@material/web/icon/icon.js'
 import '@operato/input/ox-select.js'
 import '@operato/popup/ox-popup-list.js'
 
+import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
+import { QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 
-import { announcementApi, type Audience } from '../utils/announcement-api.js'
+import { type Audience } from '../utils/announcement-api.js'
 import { t } from '../utils/announcement-words.js'
 
-type Choices = Awaited<ReturnType<typeof announcementApi.choices>>
+type Choices = { domainId: string; domainName: string; departments: { id: string; name: string; note?: string }[]; roles: { id: string; name: string; note?: string }[] }
+type Person = { id: string; name: string; note?: string }
 
 const ICON: Record<string, string> = { DOMAIN: 'domain', DEPARTMENT: 'account_tree', ROLE: 'badge', USER: 'person' }
 
@@ -113,20 +116,41 @@ export class AudiencePicker extends localize(i18next)(LitElement) {
 
   @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
+  /* The words searched for and the audience counted - each a moment after it stops changing. */
+  @state() private searched = ''
+  @state() private counted: Audience[] = []
   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: [] }
-    }
+  /* What may be chosen, the people the words find, and how many the audience names now (ADR-0190). */
+  private choicesRead = new QueryController(
+    this,
+    gql`query { announcementAudienceChoices { domainId domainName departments { id name note } roles { id name note } } }`
+  )
+
+  private people = new QueryController(this, gql`query ($text: String!) { announcementPeople(text: $text) { id name note } }`, {
+    variables: () => (this.searched ? { text: this.searched } : undefined),
+    keepPrevious: true
+  })
+
+  private sizeRead = new QueryController(this, gql`query ($audiences: [AnnouncementAudienceInput!]!) { announcementAudienceSize(audiences: $audiences) }`, {
+    variables: () => (this.counted.length ? { audiences: this.counted } : undefined),
+    keepPrevious: true
+  })
+
+  private get choices(): Choices | undefined {
+    if (this.choicesRead.error) return { domainId: '', domainName: '', departments: [], roles: [] }
+    return this.choicesRead.data?.announcementAudienceChoices
+  }
+
+  private get found(): Person[] {
+    return (this.searched && !this.people.error && this.people.data?.announcementPeople) || []
+  }
+
+  private get size(): number | undefined {
+    if (!this.value.length) return 0
+    return this.sizeRead.error ? undefined : this.sizeRead.data?.announcementAudienceSize
   }
 
   updated(changes: Map<string, unknown>) {
@@ -183,8 +207,9 @@ export class AudiencePicker extends localize(i18next)(LitElement) {
   }
 
   private give(target: Audience) {
+    clearTimeout(this.searching)
     this.text = ''
-    this.found = []
+    this.searched = ''
     this.tell([...this.value, target])
   }
 
@@ -200,28 +225,16 @@ export class AudiencePicker extends localize(i18next)(LitElement) {
   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)
+    this.searching = setTimeout(() => (this.searched = text.trim()), 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
+      this.counted = []
       return
     }
-    this.counting = setTimeout(async () => {
-      try {
-        this.size = await announcementApi.audienceSize(this.value.map(({ scope, targetId }) => ({ scope, targetId })))
-      } catch {
-        this.size = undefined
-      }
-    }, 300)
+    this.counting = setTimeout(() => (this.counted = this.value.map(({ scope, targetId }) => ({ scope, targetId }))), 300)
   }
 }

package/client/pages/announcement-editor.ts

@@ -3,20 +3,22 @@ import '@operato/input/ox-input-file.js'
 import '@operato/list-state/ox-page-state.js'
 import '../components/audience-picker.js'
 
+import gql from 'graphql-tag'
 import { css, html, nothing } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 
+import { MutationController, QueryController, uploadContext } from '@operato/graphql'
 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 { navigate, PageView, DraftController } 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'
+import { FULL_FIELDS, type AnnouncementInput, type AnnouncementItem, type AnnouncementLink, type Audience, type FileRow } from '../utils/announcement-api.js'
+import { CATEGORIES, categoryWord, IMPORTANCES, importanceWord, statusWord, t } from '../utils/announcement-words.js'
 
 type Form = {
   title: string
@@ -32,6 +34,10 @@ type Form = {
   sendEmail: boolean
   links: AnnouncementLink[]
   audiences: Audience[]
+  /** Files picked to attach, attached ones to take off, and whether a changed one tells everyone again. */
+  added: File[]
+  removed: string[]
+  notifyAgain: boolean
 }
 
 const blank = (): Form => ({
@@ -47,7 +53,10 @@ const blank = (): Form => ({
   popup: false,
   sendEmail: false,
   links: [],
-  audiences: []
+  audiences: [],
+  added: [],
+  removed: [],
+  notifyAgain: false
 })
 
 /** `datetime-local` speaks the reader's own clock. */
@@ -74,7 +83,10 @@ function formOf(one: AnnouncementItem): Form {
     popup: one.popup,
     sendEmail: !!one.sendEmail,
     links: (one.links ?? []).map(link => ({ ...link })),
-    audiences: (one.audiences ?? []).map(({ scope, targetId, targetName }) => ({ scope, targetId, targetName }))
+    audiences: (one.audiences ?? []).map(({ scope, targetId, targetName }) => ({ scope, targetId, targetName })),
+    added: [],
+    removed: [],
+    notifyAgain: false
   }
 }
 
@@ -200,17 +212,74 @@ export class AnnouncementEditor extends localize(i18next)(PageView) {
     `
   ]
 
-  @state() announcement: AnnouncementItem | null = null
-  @state() form: Form = blank()
-  @state() files: FileRow[] = []
-  @state() added: File[] = []
-  @state() removed: string[] = []
-  @state() notifyAgain = false
+  /** What the address opens: an announcement by id, a new one copied `from` another, or a new one. */
+  @state() private address?: { id?: string; from?: string }
   @state() preview = false
   @state() progress?: number
-  @state() loading = false
-  @state() error: unknown = null
-  @state() busy = false
+
+  /* The announcement edited, or the one a new one is copied from (ADR-0190). */
+  private record = new QueryController(this, gql(`query ($id: String!) { announcement(id: $id) { ${FULL_FIELDS} readCount acknowledgedCount } }`), {
+    variables: () => {
+      const id = this.address?.id || this.address?.from
+      return id ? { id } : undefined
+    }
+  })
+
+  /* What is typed over the announcement read - a copy starts without its days, a new one blank. */
+  private draft = new DraftController<Form>(this, {
+    read: () => {
+      if (!this.address) return undefined
+      if (!this.address.id && !this.address.from) return blank()
+      const one = this.record.data?.announcement
+      if (!one) return undefined
+      return this.address.from && !this.address.id ? { ...formOf(one), startsAt: '', endsAt: '' } : formOf(one)
+    },
+    key: () => this.address
+  })
+
+  /* A change reads the announcement again once it is done; one that goes out or away leaves the editor. */
+  private saves = {
+    create: new MutationController(this, gql`mutation ($input: AnnouncementInput!, $attach: [Upload!]) { createAnnouncement(input: $input, attach: $attach) { id } }`),
+    update: new MutationController(
+      this,
+      gql`
+        mutation ($id: String!, $input: AnnouncementInput!, $attach: [Upload!], $remove: [String!], $notifyAgain: Boolean) {
+          updateAnnouncement(id: $id, input: $input, attach: $attach, remove: $remove, notifyAgain: $notifyAgain) { id status }
+        }
+      `,
+      { refetch: () => [this.record] }
+    ),
+    publish: new MutationController(this, gql`mutation ($id: String!) { publishAnnouncement(id: $id) { id status startsAt } }`),
+    remove: new MutationController(this, gql`mutation ($id: String!) { deleteAnnouncement(id: $id) }`)
+  }
+
+  get announcement(): AnnouncementItem | null {
+    return (this.address?.id && this.record.data?.announcement) || null
+  }
+
+  /** The form as it shows: each field's edit, else what was read (blank while it is read). */
+  get form(): Form {
+    return Object.fromEntries(Object.entries(blank()).map(([name, given]) => [name, this.draft.value(name as keyof Form) ?? given])) as Form
+  }
+
+  /** The files attached so far - a copy starts with none. */
+  get files(): FileRow[] {
+    return this.announcement?.attachments ?? []
+  }
+
+  /** A failed read, or an announcement the address names that is not there. */
+  get error(): unknown {
+    if (this.record.error) return this.record.error
+    return this.record.data && !this.record.data.announcement ? new Error(t('announcement.refusal.unknown-announcement')) : null
+  }
+
+  get loading() {
+    return this.record.loading
+  }
+
+  get busy() {
+    return Object.values(this.saves).some(save => save.pending)
+  }
 
   get out() {
     return this.announcement?.status === 'PUBLISHED'
@@ -241,52 +310,20 @@ export class AnnouncementEditor extends localize(i18next)(PageView) {
   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
+    const address = id ? { id } : from ? { from } : {}
+    if (JSON.stringify(address) === JSON.stringify(this.address)) return
+    this.address = address
     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 }
+      for (const [name, value] of Object.entries(patch)) this.draft.set(name as keyof Form, value)
       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)}>
+    return html`<ox-page-state .loading=${this.loading} .error=${this.error} @retry=${() => this.record.refetch()}>
       <div class="page">
         <section class="page-section">
           <header class="page-section-header"><h3>${t('announcement.text.section-what')}</h3></header>
@@ -374,19 +411,19 @@ export class AnnouncementEditor extends localize(i18next)(PageView) {
           <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' : ''}>
+              file => html`<li class=${form.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>`
+                  ? form.removed.includes(file.id)
+                    ? html`<button @click=${() => set({ removed: form.removed.filter(id => id !== file.id) })}><md-icon>undo</md-icon></button>`
+                    : html`<button aria-label=${t('announcement.button.remove')} @click=${() => set({ removed: [...form.removed, file.id] })}><md-icon>close</md-icon></button>`
                   : nothing}
               </li>`
             )}
-            ${this.added.map(
+            ${form.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>
+                <button aria-label=${t('announcement.button.remove')} @click=${() => set({ added: form.added.filter((_, i) => i !== index) })}><md-icon>close</md-icon></button>
               </li>`
             )}
           </ul>
@@ -424,7 +461,7 @@ export class AnnouncementEditor extends localize(i18next)(PageView) {
 
         ${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>
+              <label class="check"><input type="checkbox" .checked=${form.notifyAgain} @change=${(e: any) => set({ 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}
@@ -437,7 +474,7 @@ export class AnnouncementEditor extends localize(i18next)(PageView) {
     /* 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]
+    this.draft.set('added', [...this.form.added, ...picked])
   }
 
   private input(): AnnouncementInput {
@@ -459,31 +496,36 @@ export class AnnouncementEditor extends localize(i18next)(PageView) {
     }
   }
 
-  /** Keeps it, then sends it out when asked - a draft that cannot go out stays kept with the reason told. */
+  /**
+   * Keeps it, then sends it out when asked - a draft that cannot go out stays kept, opened as one. Failures are told by
+   * the GraphQL link.
+   */
   private async save(publish: boolean) {
-    this.busy = true
+    if (this.busy) return
+    const id = this.announcement?.id
+    const { added, removed, notifyAgain } = this.form
+    const context = added.length ? uploadContext(fraction => (this.progress = fraction)) : undefined
+    const saving = this.draft.submit(() =>
+      id
+        ? this.saves.update.run({ id, input: this.input(), attach: added, remove: removed, notifyAgain }, { context })
+        : this.saves.create.run({ input: this.input(), attach: added }, { context })
+    )
+    /* The actions wait while it is out. */
+    this.updateContext()
+    const saved = await saving
+    this.progress = undefined
     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}`)
+    if (!saved) return
+    const kept = id ?? saved.createAnnouncement.id
+    if (publish) {
+      const sent = await this.saves.publish.run({ id: kept })
+      if (sent) {
+        notify({ message: sent.publishAnnouncement.status === 'SCHEDULED' ? t('announcement.text.scheduled-done') : t('announcement.text.published-done') })
+        navigate(`announcement-view?id=${kept}`)
         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()
-    }
+    } else notify({ message: t('announcement.text.saved') })
+    if (!id) navigate(`announcement-editor?id=${kept}`)
   }
 
   private async deleteDraft() {
@@ -494,12 +536,8 @@ export class AnnouncementEditor extends localize(i18next)(PageView) {
       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) })
-    }
+    if (!(await this.saves.remove.run({ id: this.announcement!.id }))) return
+    notify({ message: t('announcement.text.deleted') })
+    navigate('announcement-manage-list')
   }
 }