@things-factory/announcement 10.1.248 → 10.1.249

package/dist-client/pages/announcement-list.js

@@ -0,0 +1,209 @@
+import { __decorate, __metadata } from "tslib";
+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 gql from 'graphql-tag';
+import { css, html } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { DataGrist } 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 { hasPrivilege } from '@things-factory/auth-base/dist-client';
+import { LIST_FIELDS } from '../utils/announcement-api.js';
+import { CATEGORIES, categoryWord, importanceWord, readerStateWord, t, when } from '../utils/announcement-words.js';
+/**
+ * 공지 — the announcements addressed to the person: the current ones, pinned, urgent and important first, or the past
+ * ones (ADR-0163 decision 5). Those not read yet are bold; a row opens the announcement.
+ */
+let AnnouncementList = class AnnouncementList extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.period = 'current';
+        /* A writer manages and writes from here - the menu offers one entry, and a reader sees no group of one. */
+        this.writer = false;
+        this.onChanged = () => this.grist?.fetch();
+    }
+    static { this.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;
+      }
+    `
+    ]; }
+    get context() {
+        return {
+            title: t('announcement.title.list'),
+            search: {
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist?.searchText || ''
+            },
+            filter: {
+                handler: () => {
+                    this.grist.toggleHeadroom();
+                }
+            },
+            actions: this.writer
+                ? [
+                    { title: t('announcement.title.manage'), icon: 'edit_note', action: () => navigate('announcement-manage-list') },
+                    { title: t('announcement.button.new'), icon: 'add', emphasis: { raised: true }, action: () => navigate('announcement-editor') }
+                ]
+                : []
+        };
+    }
+    render() {
+        const periods = [
+            { value: 'current', display: t('announcement.text.period-current') },
+            { value: 'past', display: t('announcement.text.period-past') }
+        ];
+        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.period}
+            aria-label=${t('announcement.text.period')}
+            @change=${(e) => {
+            const next = e.detail === 'past' ? 'past' : 'current';
+            if (next === this.period)
+                return;
+            this.period = next;
+            this.grist.fetch();
+        }}
+          >
+            <span slot="label">${periods.find(one => one.value === this.period)?.display}</span>
+            <ox-popup-list align-left nowrap with-search>${periods.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('announcements-changed', this.onChanged);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('announcements-changed', this.onChanged);
+        super.disconnectedCallback();
+    }
+    async pageUpdated(changes) {
+        if (this.active && changes.active && this.gristConfig)
+            this.grist?.fetch();
+    }
+    async pageInitialized() {
+        hasPrivilege({ category: 'announcement', privilege: 'mutation', domainOwnerGranted: true }).then(writer => {
+            this.writer = !!writer;
+            this.updateContext();
+        });
+        const open = (record) => record?.id && navigate(`announcement-view?id=${record.id}`);
+        const owed = (record) => record?.readerState === 'unread' || record?.readerState === 'to-acknowledge';
+        this.gristConfig = {
+            rows: { appendable: false, selectable: false, handlers: { click: (_c, _d, _col, record) => open(record) } },
+            pagination: { limit: 50, pages: [50, 100] },
+            emptyNote: { title: t('announcement.text.empty'), description: t('announcement.text.empty-description') },
+            list: { fields: ['title', 'readerState'], details: ['category', 'publishedAt'] },
+            columns: [
+                {
+                    type: 'string',
+                    name: 'pinned',
+                    header: '',
+                    width: 34,
+                    record: {
+                        editable: false,
+                        renderer: (_v, _c, record) => record?.pinned && !this.isPast()
+                            ? html `<md-icon style="--md-icon-size:16px" title=${t('announcement.field.pinned')}>push_pin</md-icon>`
+                            : record?.importance === 'URGENT'
+                                ? html `<md-icon style="--md-icon-size:16px;color:var(--md-sys-color-error)" title=${importanceWord('URGENT')}>priority_high</md-icon>`
+                                : ''
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'category',
+                    header: t('announcement.field.category'),
+                    width: 90,
+                    record: { editable: false, renderer: (value) => categoryWord(value) },
+                    filter: { type: 'select', operator: 'eq', options: [{ display: '', value: '' }, ...CATEGORIES.map(code => ({ display: categoryWord(code), value: code }))] }
+                },
+                {
+                    type: 'string',
+                    name: 'title',
+                    header: t('announcement.field.title'),
+                    width: 320,
+                    record: {
+                        editable: false,
+                        renderer: (value, _c, record) => html `<span style=${owed(record) ? 'font-weight:600' : ''}>${record?.importance === 'IMPORTANT' ? `[${importanceWord('IMPORTANT')}] ` : ''}${value}</span>`
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'readerState',
+                    header: t('announcement.field.reader-state'),
+                    width: 100,
+                    record: { editable: false, renderer: (value) => html `<span style=${value === 'unread' || value === 'to-acknowledge' ? 'color:var(--md-sys-color-primary);font-weight:600' : ''}>${readerStateWord(value)}</span>` }
+                },
+                { type: 'string', name: 'publisher', header: t('announcement.field.publisher'), width: 110, record: { editable: false, renderer: (value) => value?.name ?? '' } },
+                { type: 'string', name: 'publishedAt', header: t('announcement.field.published-at'), width: 110, record: { editable: false, renderer: (value) => when(value, false) } },
+                { type: 'string', name: 'endsAt', header: t('announcement.field.ends-at'), width: 110, record: { editable: false, renderer: (value) => when(value, false) } }
+            ]
+        };
+    }
+    isPast() {
+        return this.period === 'past';
+    }
+    async fetchHandler({ page = 1, limit = 50, filters = [], search }) {
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $search: String) {
+          responses: announcements(filters: $filters, pagination: $pagination, search: $search) {
+            items { ${LIST_FIELDS} }
+            total
+          }
+        }
+      `,
+            /* The period is the reader's own filter - the assistant narrows the same list the same way. */
+            variables: { filters: [...filters, { name: 'period', operator: 'eq', value: this.period }], pagination: { page, limit }, search: search?.trim() || undefined },
+            fetchPolicy: 'network-only'
+        });
+        if (response.errors?.length)
+            throw response;
+        return { total: response.data.responses.total, records: response.data.responses.items };
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AnnouncementList.prototype, "gristConfig", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], AnnouncementList.prototype, "period", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AnnouncementList.prototype, "writer", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], AnnouncementList.prototype, "grist", void 0);
+AnnouncementList = __decorate([
+    customElement('announcement-list')
+], AnnouncementList);
+export { AnnouncementList };
+//# sourceMappingURL=announcement-list.js.map

package/dist-client/pages/announcement-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcement-list.js","sourceRoot":"","sources":["../../client/pages/announcement-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist/ox-grist.js'\nimport '@operato/data-grist/ox-filters-form.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\n\nimport { DataGrist, FetchOption } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { hasPrivilege } from '@things-factory/auth-base/dist-client'\n\nimport { LIST_FIELDS } from '../utils/announcement-api.js'\nimport { CATEGORIES, categoryWord, importanceWord, readerStateWord, t, when } from '../utils/announcement-words.js'\n\n/**\n * 공지 — the announcements addressed to the person: the current ones, pinned, urgent and important first, or the past\n * ones (ADR-0163 decision 5). Those not read yet are bold; a row opens the announcement.\n */\n@customElement('announcement-list')\nexport class AnnouncementList extends localize(i18next)(PageView) {\n  static styles = [\n    WorkSurfacePageStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n      .filters {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--spacing-medium, 8px);\n      }\n      ox-select {\n        min-width: 140px;\n      }\n    `\n  ]\n\n  @state() gristConfig: any\n  @state() period: 'current' | 'past' = 'current'\n  /* A writer manages and writes from here - the menu offers one entry, and a reader sees no group of one. */\n  @state() writer = false\n  @query('ox-grist') private grist!: DataGrist\n\n  private onChanged = () => this.grist?.fetch()\n\n  get context() {\n    return {\n      title: t('announcement.title.list'),\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || ''\n      },\n      filter: {\n        handler: () => {\n          this.grist.toggleHeadroom()\n        }\n      },\n      actions: this.writer\n        ? [\n            { title: t('announcement.title.manage'), icon: 'edit_note', action: () => navigate('announcement-manage-list') },\n            { title: t('announcement.button.new'), icon: 'add', emphasis: { raised: true }, action: () => navigate('announcement-editor') }\n          ]\n        : []\n    }\n  }\n\n  render() {\n    const periods = [\n      { value: 'current', display: t('announcement.text.period-current') },\n      { value: 'past', display: t('announcement.text.period-past') }\n    ]\n    return html`<ox-grist class=\"page-fill\" search-mode=\"term\" .mode=${isMobileDevice() ? 'CARD' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>\n      <div slot=\"headroom\" class=\"header\">\n        <div class=\"filters\">\n          <ox-select\n            .value=${this.period}\n            aria-label=${t('announcement.text.period')}\n            @change=${(e: CustomEvent) => {\n              const next = e.detail === 'past' ? 'past' : 'current'\n              if (next === this.period) return\n              this.period = next\n              this.grist.fetch()\n            }}\n          >\n            <span slot=\"label\">${periods.find(one => one.value === this.period)?.display}</span>\n            <ox-popup-list align-left nowrap with-search>${periods.map(one => html`<div option value=${one.value}>${one.display}</div>`)}</ox-popup-list>\n          </ox-select>\n          <ox-filters-form without-search autofocus></ox-filters-form>\n        </div>\n      </div>\n    </ox-grist>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    window.addEventListener('announcements-changed', this.onChanged)\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('announcements-changed', this.onChanged)\n    super.disconnectedCallback()\n  }\n\n  async pageUpdated(changes: any) {\n    if (this.active && changes.active && this.gristConfig) this.grist?.fetch()\n  }\n\n  async pageInitialized() {\n    hasPrivilege({ category: 'announcement', privilege: 'mutation', domainOwnerGranted: true }).then(writer => {\n      this.writer = !!writer\n      this.updateContext()\n    })\n    const open = (record: any) => record?.id && navigate(`announcement-view?id=${record.id}`)\n    const owed = (record: any) => record?.readerState === 'unread' || record?.readerState === 'to-acknowledge'\n    this.gristConfig = {\n      rows: { appendable: false, selectable: false, handlers: { click: (_c: any, _d: any, _col: any, record: any) => open(record) } },\n      pagination: { limit: 50, pages: [50, 100] },\n      emptyNote: { title: t('announcement.text.empty'), description: t('announcement.text.empty-description') },\n      list: { fields: ['title', 'readerState'], details: ['category', 'publishedAt'] },\n      columns: [\n        {\n          type: 'string',\n          name: 'pinned',\n          header: '',\n          width: 34,\n          record: {\n            editable: false,\n            renderer: (_v: any, _c: any, record: any) =>\n              record?.pinned && !this.isPast()\n                ? html`<md-icon style=\"--md-icon-size:16px\" title=${t('announcement.field.pinned')}>push_pin</md-icon>`\n                : record?.importance === 'URGENT'\n                  ? html`<md-icon style=\"--md-icon-size:16px;color:var(--md-sys-color-error)\" title=${importanceWord('URGENT')}>priority_high</md-icon>`\n                  : ''\n          }\n        },\n        {\n          type: 'string',\n          name: 'category',\n          header: t('announcement.field.category'),\n          width: 90,\n          record: { editable: false, renderer: (value: string) => categoryWord(value) },\n          filter: { type: 'select', operator: 'eq', options: [{ display: '', value: '' }, ...CATEGORIES.map(code => ({ display: categoryWord(code), value: code }))] }\n        },\n        {\n          type: 'string',\n          name: 'title',\n          header: t('announcement.field.title'),\n          width: 320,\n          record: {\n            editable: false,\n            renderer: (value: string, _c: any, record: any) =>\n              html`<span style=${owed(record) ? 'font-weight:600' : ''}>${record?.importance === 'IMPORTANT' ? `[${importanceWord('IMPORTANT')}] ` : ''}${value}</span>`\n          }\n        },\n        {\n          type: 'string',\n          name: 'readerState',\n          header: t('announcement.field.reader-state'),\n          width: 100,\n          record: { editable: false, renderer: (value: string) => html`<span style=${value === 'unread' || value === 'to-acknowledge' ? 'color:var(--md-sys-color-primary);font-weight:600' : ''}>${readerStateWord(value)}</span>` }\n        },\n        { type: 'string', name: 'publisher', header: t('announcement.field.publisher'), width: 110, record: { editable: false, renderer: (value: any) => value?.name ?? '' } },\n        { type: 'string', name: 'publishedAt', header: t('announcement.field.published-at'), width: 110, record: { editable: false, renderer: (value: string) => when(value, false) } },\n        { type: 'string', name: 'endsAt', header: t('announcement.field.ends-at'), width: 110, record: { editable: false, renderer: (value: string) => when(value, false) } }\n      ]\n    }\n  }\n\n  private isPast() {\n    return this.period === 'past'\n  }\n\n  async fetchHandler({ page = 1, limit = 50, filters = [], search }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $search: String) {\n          responses: announcements(filters: $filters, pagination: $pagination, search: $search) {\n            items { ${LIST_FIELDS} }\n            total\n          }\n        }\n      `,\n      /* The period is the reader's own filter - the assistant narrows the same list the same way. */\n      variables: { filters: [...filters, { name: 'period', operator: 'eq', value: this.period }], pagination: { page, limit }, search: search?.trim() || undefined },\n      fetchPolicy: 'network-only'\n    })\n    if (response.errors?.length) throw response\n    return { total: response.data.responses.total, records: response.data.responses.items }\n  }\n}\n"]}

package/dist-client/pages/announcement-manage-list.d.ts

@@ -0,0 +1,46 @@
+import '@operato/data-grist/ox-grist.js';
+import '@operato/data-grist/ox-filters-form.js';
+import { FetchOption } from '@operato/data-grist';
+import { PageView } from '@operato/shell';
+declare const AnnouncementManageList_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * 공지 관리 — every announcement of the domain for its writers: the ones out, scheduled and withdrawn, and one's own
+ * drafts, with how many each reached and how many read it (ADR-0163 decision 4). A draft opens in the editor; the rest
+ * open as their readers see them, with the writer's actions.
+ */
+export declare class AnnouncementManageList extends AnnouncementManageList_base {
+    static styles: import("lit").CSSResult[];
+    gristConfig: any;
+    private grist;
+    get context(): {
+        title: string;
+        menu: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+        };
+        filter: {
+            handler: () => void;
+        };
+        actions: {
+            title: string;
+            icon: string;
+            emphasis: {
+                raised: boolean;
+            };
+            action: () => Promise<boolean>;
+        }[];
+        exportable: {
+            name: string;
+            data: () => any[];
+        };
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageUpdated(changes: any): Promise<void>;
+    pageInitialized(): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters, search }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    }>;
+}
+export {};

package/dist-client/pages/announcement-manage-list.js

@@ -0,0 +1,115 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/data-grist/ox-grist.js';
+import '@operato/data-grist/ox-filters-form.js';
+import gql from 'graphql-tag';
+import { html } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { DataGrist } 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 { CATEGORIES, categoryWord, importanceWord, statusWord, t, when } from '../utils/announcement-words.js';
+const STATUSES = ['DRAFT', 'SCHEDULED', 'PUBLISHED', 'WITHDRAWN'];
+/**
+ * 공지 관리 — every announcement of the domain for its writers: the ones out, scheduled and withdrawn, and one's own
+ * drafts, with how many each reached and how many read it (ADR-0163 decision 4). A draft opens in the editor; the rest
+ * open as their readers see them, with the writer's actions.
+ */
+let AnnouncementManageList = class AnnouncementManageList extends localize(i18next)(PageView) {
+    static { this.styles = [WorkSurfacePageStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles]; }
+    get context() {
+        return {
+            title: t('announcement.title.manage'),
+            /* Opened from 공지사항; the menu marks it. */
+            menu: 'announcement-list',
+            search: {
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist?.searchText || ''
+            },
+            filter: {
+                handler: () => {
+                    this.grist.toggleHeadroom();
+                }
+            },
+            actions: [{ title: t('announcement.button.new'), icon: 'add', emphasis: { raised: true }, action: () => navigate('announcement-editor') }],
+            exportable: { name: t('announcement.title.manage'), data: () => this.grist.exportRecords() }
+        };
+    }
+    render() {
+        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-filters-form without-search autofocus></ox-filters-form></div>
+      </div>
+    </ox-grist>`;
+    }
+    async pageUpdated(changes) {
+        if (this.active && changes.active && this.gristConfig)
+            this.grist?.fetch();
+    }
+    async pageInitialized() {
+        const open = (record) => record?.id && navigate(record.status === 'DRAFT' ? `announcement-editor?id=${record.id}` : `announcement-view?id=${record.id}`);
+        const readonly = (type, name, header, width, extra = {}) => ({ type, name, header, width, sortable: true, ...extra, record: { editable: false, ...extra.record } });
+        this.gristConfig = {
+            rows: { appendable: false, selectable: false, handlers: { click: (_c, _d, _col, record) => open(record) } },
+            pagination: { limit: 50, pages: [50, 100, 500] },
+            emptyNote: { title: t('announcement.text.manage-empty'), description: t('announcement.text.manage-empty-description') },
+            list: { fields: ['title', 'status'], details: ['publishedAt', 'readCount'] },
+            columns: [
+                readonly('string', 'status', t('announcement.field.status'), 80, {
+                    record: { renderer: (value) => statusWord(value) },
+                    filter: { type: 'select', operator: 'eq', options: [{ display: '', value: '' }, ...STATUSES.map(code => ({ display: statusWord(code), value: code }))] }
+                }),
+                readonly('string', 'category', t('announcement.field.category'), 90, {
+                    record: { renderer: (value) => categoryWord(value) },
+                    filter: { type: 'select', operator: 'eq', options: [{ display: '', value: '' }, ...CATEGORIES.map(code => ({ display: categoryWord(code), value: code }))] }
+                }),
+                readonly('string', 'importance', t('announcement.field.importance'), 70, { record: { renderer: (value) => importanceWord(value) } }),
+                readonly('string', 'title', t('announcement.field.title'), 320),
+                readonly('string', 'startsAt', t('announcement.field.starts-at'), 140, { record: { renderer: (value) => when(value) } }),
+                readonly('string', 'endsAt', t('announcement.field.ends-at'), 140, { record: { renderer: (value) => when(value) } }),
+                readonly('integer', 'audienceSize', t('announcement.field.audience-size'), 70, { sortable: false, record: { align: 'right' } }),
+                readonly('integer', 'readCount', t('announcement.field.read-count'), 70, { sortable: false, record: { align: 'right' } }),
+                readonly('integer', 'acknowledgedCount', t('announcement.field.acknowledged-count'), 70, {
+                    sortable: false,
+                    record: { align: 'right', renderer: (value, _c, record) => (record?.requiresAcknowledgement ? (value ?? '') : '') }
+                }),
+                readonly('string', 'updatedAt', t('announcement.field.updated-at'), 140, { record: { renderer: (value) => when(value) } })
+            ],
+            sorters: [{ name: 'updatedAt', desc: true }]
+        };
+    }
+    async fetchHandler({ page = 1, limit = 50, sortings = [], filters = [], search }) {
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $search: String) {
+          responses: managedAnnouncements(filters: $filters, pagination: $pagination, sortings: $sortings, search: $search) {
+            items { id title category importance status startsAt endsAt requiresAcknowledgement publishedAt audienceSize readCount acknowledgedCount updatedAt }
+            total
+          }
+        }
+      `,
+            variables: { filters, pagination: { page, limit }, sortings, search: search?.trim() || undefined },
+            fetchPolicy: 'network-only'
+        });
+        if (response.errors?.length)
+            throw response;
+        return { total: response.data.responses.total, records: response.data.responses.items };
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AnnouncementManageList.prototype, "gristConfig", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], AnnouncementManageList.prototype, "grist", void 0);
+AnnouncementManageList = __decorate([
+    customElement('announcement-manage-list')
+], AnnouncementManageList);
+export { AnnouncementManageList };
+//# sourceMappingURL=announcement-manage-list.js.map

package/dist-client/pages/announcement-manage-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcement-manage-list.js","sourceRoot":"","sources":["../../client/pages/announcement-manage-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist/ox-grist.js'\nimport '@operato/data-grist/ox-filters-form.js'\n\nimport gql from 'graphql-tag'\nimport { html } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\n\nimport { DataGrist, FetchOption } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { CATEGORIES, categoryWord, importanceWord, statusWord, t, when } from '../utils/announcement-words.js'\n\nconst STATUSES = ['DRAFT', 'SCHEDULED', 'PUBLISHED', 'WITHDRAWN']\n\n/**\n * 공지 관리 — every announcement of the domain for its writers: the ones out, scheduled and withdrawn, and one's own\n * drafts, with how many each reached and how many read it (ADR-0163 decision 4). A draft opens in the editor; the rest\n * open as their readers see them, with the writer's actions.\n */\n@customElement('announcement-manage-list')\nexport class AnnouncementManageList extends localize(i18next)(PageView) {\n  static styles = [WorkSurfacePageStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles]\n\n  @state() gristConfig: any\n  @query('ox-grist') private grist!: DataGrist\n\n  get context() {\n    return {\n      title: t('announcement.title.manage'),\n      /* Opened from 공지사항; the menu marks it. */\n      menu: 'announcement-list',\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || ''\n      },\n      filter: {\n        handler: () => {\n          this.grist.toggleHeadroom()\n        }\n      },\n      actions: [{ title: t('announcement.button.new'), icon: 'add', emphasis: { raised: true }, action: () => navigate('announcement-editor') }],\n      exportable: { name: t('announcement.title.manage'), data: () => this.grist.exportRecords() }\n    }\n  }\n\n  render() {\n    return html`<ox-grist class=\"page-fill\" search-mode=\"term\" .mode=${isMobileDevice() ? 'CARD' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>\n      <div slot=\"headroom\" class=\"header\">\n        <div class=\"filters\"><ox-filters-form without-search autofocus></ox-filters-form></div>\n      </div>\n    </ox-grist>`\n  }\n\n  async pageUpdated(changes: any) {\n    if (this.active && changes.active && this.gristConfig) this.grist?.fetch()\n  }\n\n  async pageInitialized() {\n    const open = (record: any) => record?.id && navigate(record.status === 'DRAFT' ? `announcement-editor?id=${record.id}` : `announcement-view?id=${record.id}`)\n    const readonly = (type: string, name: string, header: string, width: number, extra: any = {}) => ({ type, name, header, width, sortable: true, ...extra, record: { editable: false, ...extra.record } })\n    this.gristConfig = {\n      rows: { appendable: false, selectable: false, handlers: { click: (_c: any, _d: any, _col: any, record: any) => open(record) } },\n      pagination: { limit: 50, pages: [50, 100, 500] },\n      emptyNote: { title: t('announcement.text.manage-empty'), description: t('announcement.text.manage-empty-description') },\n      list: { fields: ['title', 'status'], details: ['publishedAt', 'readCount'] },\n      columns: [\n        readonly('string', 'status', t('announcement.field.status'), 80, {\n          record: { renderer: (value: string) => statusWord(value) },\n          filter: { type: 'select', operator: 'eq', options: [{ display: '', value: '' }, ...STATUSES.map(code => ({ display: statusWord(code), value: code }))] }\n        }),\n        readonly('string', 'category', t('announcement.field.category'), 90, {\n          record: { renderer: (value: string) => categoryWord(value) },\n          filter: { type: 'select', operator: 'eq', options: [{ display: '', value: '' }, ...CATEGORIES.map(code => ({ display: categoryWord(code), value: code }))] }\n        }),\n        readonly('string', 'importance', t('announcement.field.importance'), 70, { record: { renderer: (value: string) => importanceWord(value) } }),\n        readonly('string', 'title', t('announcement.field.title'), 320),\n        readonly('string', 'startsAt', t('announcement.field.starts-at'), 140, { record: { renderer: (value: string) => when(value) } }),\n        readonly('string', 'endsAt', t('announcement.field.ends-at'), 140, { record: { renderer: (value: string) => when(value) } }),\n        readonly('integer', 'audienceSize', t('announcement.field.audience-size'), 70, { sortable: false, record: { align: 'right' } }),\n        readonly('integer', 'readCount', t('announcement.field.read-count'), 70, { sortable: false, record: { align: 'right' } }),\n        readonly('integer', 'acknowledgedCount', t('announcement.field.acknowledged-count'), 70, {\n          sortable: false,\n          record: { align: 'right', renderer: (value: number, _c: any, record: any) => (record?.requiresAcknowledgement ? (value ?? '') : '') }\n        }),\n        readonly('string', 'updatedAt', t('announcement.field.updated-at'), 140, { record: { renderer: (value: string) => when(value) } })\n      ],\n      sorters: [{ name: 'updatedAt', desc: true }]\n    }\n  }\n\n  async fetchHandler({ page = 1, limit = 50, sortings = [], filters = [], search }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $search: String) {\n          responses: managedAnnouncements(filters: $filters, pagination: $pagination, sortings: $sortings, search: $search) {\n            items { id title category importance status startsAt endsAt requiresAcknowledgement publishedAt audienceSize readCount acknowledgedCount updatedAt }\n            total\n          }\n        }\n      `,\n      variables: { filters, pagination: { page, limit }, sortings, search: search?.trim() || undefined },\n      fetchPolicy: 'network-only'\n    })\n    if (response.errors?.length) throw response\n    return { total: response.data.responses.total, records: response.data.responses.items }\n  }\n}\n"]}

package/dist-client/pages/announcement-view.d.ts

@@ -0,0 +1,30 @@
+import '@operato/list-state/ox-page-state.js';
+import '../components/announcement-sheet.js';
+import '../components/announcement-receipts.js';
+import { PageView } from '@operato/shell';
+import { type AnnouncementItem } from '../utils/announcement-api.js';
+declare const AnnouncementView_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * 공지 보기 — one announcement. Opening it reads it for its audience (ADR-0163 decision 5). Its writers also see whom it
+ * reached and who read it, and change, remind or withdraw it from here (decision 4).
+ */
+export declare class AnnouncementView extends AnnouncementView_base {
+    static styles: import("lit").CSSResult[];
+    announcement: AnnouncementItem | null;
+    loading: boolean;
+    error: unknown;
+    get context(): {
+        frame: string;
+        menu: string;
+        actions: any[];
+        description?: string | undefined;
+        title: string;
+    };
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    private load;
+    private openReceipts;
+    private remind;
+    private withdraw;
+}
+export {};

package/dist-client/pages/announcement-view.js

@@ -0,0 +1,182 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/list-state/ox-page-state.js';
+import '../components/announcement-sheet.js';
+import '../components/announcement-receipts.js';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify, openPopup } from '@operato/layout';
+import { navigate, PageView } from '@operato/shell';
+import { DocumentPageStyles } from '@operato/styles';
+import { announcementApi } from '../utils/announcement-api.js';
+import { reasonOf, statusWord, t, when } from '../utils/announcement-words.js';
+/**
+ * 공지 보기 — one announcement. Opening it reads it for its audience (ADR-0163 decision 5). Its writers also see whom it
+ * reached and who read it, and change, remind or withdraw it from here (decision 4).
+ */
+let AnnouncementView = class AnnouncementView extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.announcement = null;
+        this.loading = false;
+        this.error = null;
+    }
+    static { this.styles = [
+        DocumentPageStyles,
+        css `
+      .notice {
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-radius: var(--border-radius, 4px);
+        background: var(--md-sys-color-surface-container, rgba(0, 0, 0, 0.04));
+        font-size: var(--ui-t-body, 14px);
+      }
+      .audience {
+        display: flex;
+        flex-wrap: wrap;
+        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));
+      }
+      ul.deliveries {
+        margin: var(--spacing-small, 4px) 0 0;
+        padding: 0;
+        list-style: none;
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      h2 {
+        margin: 0;
+        font-size: var(--ui-t-title-large, 22px);
+      }
+    `
+    ]; }
+    get context() {
+        const one = this.announcement;
+        const actions = [];
+        if (one?.editable) {
+            actions.push({ title: t('announcement.button.edit'), icon: 'edit', action: () => navigate(`announcement-editor?id=${one.id}`) });
+            if (one.status === 'PUBLISHED') {
+                actions.push({ title: t('announcement.button.receipts'), icon: 'groups', action: () => this.openReceipts() });
+                actions.push({ title: t('announcement.button.remind'), icon: 'notifications_active', action: () => this.remind() });
+            }
+            if (one.status === 'PUBLISHED' || one.status === 'SCHEDULED')
+                actions.push({ title: t('announcement.button.withdraw'), icon: 'unpublished', action: () => this.withdraw() });
+            actions.push({ title: t('announcement.button.copy'), icon: 'content_copy', action: () => navigate(`announcement-editor?from=${one.id}`) });
+        }
+        return {
+            title: t('announcement.title.view'),
+            ...(one && one.status !== 'PUBLISHED' ? { description: statusWord(one.status) } : {}),
+            frame: 'document',
+            /* Opened from the list of announcements; the menu marks it. */
+            menu: 'announcement-list',
+            actions
+        };
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (!this.active || !(changes.active || changes.params))
+            return;
+        const id = lifecycle?.params?.id;
+        if (id)
+            await this.load(id);
+    }
+    render() {
+        const one = this.announcement;
+        return html `<ox-page-state .loading=${this.loading} .error=${this.error} @retry=${() => one && this.load(one.id)}>
+      ${one
+            ? html `<div class="page">
+            <section class="page-section">
+              <h2>${one.title}</h2>
+              ${one.status === 'WITHDRAWN' ? html `<p class="notice">${t('announcement.text.withdrawn', { when: when(one.withdrawnAt), reason: one.withdrawReason ?? '' })}</p>` : nothing}
+              ${one.status === 'SCHEDULED' ? html `<p class="notice">${t('announcement.text.scheduled', { when: when(one.startsAt) })}</p>` : nothing}
+              <announcement-sheet .announcement=${one} @announcement-acknowledged=${() => this.load(one.id)}></announcement-sheet>
+            </section>
+            ${one.editable && one.audiences
+                ? html `<section class="page-section">
+                  <header class="page-section-header"><h3>${t('announcement.field.audience')}</h3></header>
+                  <div class="audience">
+                    ${one.audiences.map(target => html `<span>${t(`announcement.scope.${target.scope}`)} · ${target.targetName ?? target.targetId}</span>`)}
+                  </div>
+                  ${(one.deliveries ?? []).length
+                    ? html `<ul class="deliveries">
+                        ${[...(one.deliveries ?? [])].reverse().map(sent => html `<li>
+                            ${when(sent.at)} · ${t(`announcement.delivery.${sent.kind}`)} ·
+                            ${sent.failed ? t('announcement.text.delivery-not-sent', { count: sent.receivers }) : t('announcement.text.delivery-app', { count: sent.receivers })}
+                            ${sent.email.sent || sent.email.failed ? html ` · ${t('announcement.text.delivery-email', { sent: sent.email.sent, failed: sent.email.failed })}` : nothing}
+                            ${sent.teams.sent || sent.teams.failed ? html ` · ${t('announcement.text.delivery-teams', { sent: sent.teams.sent, failed: sent.teams.failed })}` : nothing}
+                          </li>`)}
+                      </ul>`
+                    : nothing}
+                  ${one.status === 'PUBLISHED'
+                    ? html `<p class="audience">
+                        ${t('announcement.text.reach', { size: one.audienceSize ?? 0, read: one.readCount ?? 0 })}
+                        ${one.requiresAcknowledgement ? t('announcement.text.reach-acknowledged', { acknowledged: one.acknowledgedCount ?? 0 }) : ''}
+                      </p>`
+                    : nothing}
+                </section>`
+                : nothing}
+          </div>`
+            : nothing}
+    </ox-page-state>`;
+    }
+    async load(id) {
+        this.loading = true;
+        this.error = null;
+        try {
+            let one = await announcementApi.one(id);
+            if (!one)
+                throw new Error(t('announcement.refusal.unknown-announcement'));
+            /* Opening it reads it - asked again after, so its writer's counts include this reading. */
+            if (one.addressed && !one.mine?.readAt) {
+                await announcementApi.read(id);
+                one = (await announcementApi.one(id)) ?? one;
+            }
+            this.announcement = one;
+        }
+        catch (error) {
+            this.announcement = null;
+            this.error = error;
+        }
+        finally {
+            this.loading = false;
+            this.updateContext();
+        }
+    }
+    openReceipts() {
+        const one = this.announcement;
+        const popup = openPopup(html `<announcement-receipts .announcement=${one} @done=${() => popup.close()}></announcement-receipts>`, {
+            backdrop: true,
+            size: 'large',
+            title: `${t('announcement.button.receipts')} · ${one.title}`
+        });
+    }
+    async remind() {
+        try {
+            const told = await announcementApi.remind(this.announcement.id);
+            notify({ message: t('announcement.text.reminded', { count: told }) });
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+    }
+    withdraw() {
+        const one = this.announcement;
+        const popup = openPopup(html `<announcement-withdraw-form .announcement=${one} @announcement-withdrawn=${() => this.load(one.id)} @done=${() => popup.close()}></announcement-withdraw-form>`, { backdrop: true, size: 'small', title: `${t('announcement.button.withdraw')} · ${one.title}` });
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AnnouncementView.prototype, "announcement", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AnnouncementView.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AnnouncementView.prototype, "error", void 0);
+AnnouncementView = __decorate([
+    customElement('announcement-view')
+], AnnouncementView);
+export { AnnouncementView };
+//# sourceMappingURL=announcement-view.js.map