@things-factory/worklist 10.1.27 → 10.1.29

package/dist-client/pages/activity-approval/activity-approval-page.js

@@ -1,11 +1,12 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
+import '@operato/list-state/ox-page-state.js';
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@operato/board/ox-board-viewer.js';
 import '../../components/activity-approval-ribon.js';
 import '../../components/activity-thread-timeline.js';
 import gql from 'graphql-tag';
-import { css, html, nothing } from 'lit';
+import { css, html, nothing, unsafeCSS } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { customElement, query, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -15,7 +16,7 @@ import { i18next, localize } from '@operato/i18n';
 import { ranMutation } from '../../components/say-outcome.js';
 import { approvalGate } from './approval-gate.js';
 import { PageView } from '@operato/shell';
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles';
+import { DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
 import { provider } from '@operato/board/board-provider.js';
 import { isReferenceStep } from '@things-factory/organization/dist-client';
 import { ActivityFieldsStyles, declaredLabel, fieldValue, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js';
@@ -102,16 +103,26 @@ const ActivityApprovalFetchResult = `\
  }  
  }
 }`;
-export const ActivityThreadStatus = { Unassigned: 'unassigned',
+export const ActivityThreadStatus = {
+    Unassigned: 'unassigned',
     Assigned: 'assigned',
     Started: 'started',
     Delegated: 'delegated',
     Ended: 'ended',
     Aborted: 'aborted'
 };
+/** 타임라인이 옆에 서는 폭 — 읽는 단 1080 + 사이 24 + 최소 판 360 + page 좌우 40. */
+const BESIDE = '(min-width: 1504px)';
 let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
+        /**
+         * 타임라인이 옆에 설 만큼 넓은가.
+         *
+         * 폭은 CSS 가 정하지만 타임라인을 펴는 것은 속성이라 CSS 로 안 된다. 같은 값을 두 곳에 적지
+         * 않도록 물음은 하나이고(`BESIDE`), 그 물음을 CSS 와 여기가 함께 쓴다.
+         */
+        this.beside = false;
         /**
          * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**
          *
@@ -122,21 +133,85 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
          * 조회가 끝난 뒤에만 그 말을 한다. 그 전에는 아무 말도 하지 않는다.
          */
         this.loaded = false;
+        /** Why the approval could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */
+        this.loadError = null;
+        this.onBeside = () => (this.beside = !!this.media?.matches);
     }
     static { this.styles = [
+        /* The frame owns the page shell and the reading column (ADR-0060 decision 8). */
+        DocumentPageStyles,
         ScrollbarStyles,
         ActivityFieldsStyles,
         css `
       :host {
+        color: var(--ui-ink, #17242c);
+        font-size: var(--ui-t-body, 13px);
+      }
+
+      /*
+       * 넓을 때만 타임라인이 옆에 선다 — **읽는 단은 줄이지 않는다.**
+       *
+       * 결재자가 판단에 쓰는 것(결정 · 사유 · 의견)이 왼쪽이고, 참고하는 것(타임라인)이 오른쪽이다.
+       * 처음 낸 안은 읽는 단 1080 안에서 둘로 쪼개는 것이었는데, 그러면 결정 카드가 1014 에서
+       * 520 으로 줄어든다 — 주된 것을 좁혀 참고용 자리를 만드는 꼴이라 물렀다.
+       *
+       * 그래서 **읽는 단을 넘는 여분이 한 판만큼 있을 때만** 편다:
+       *
+       *   1080(읽는 단) + 24(사이) + 360(최소 판) + 40(page 좌우 여백) = 1504
+       *
+       * 그 아래에서는 한 단이고 차례가 그대로다 — 결재선 · 결정 · 타임라인 · 의견. 좁은 화면이
+       * 기본이고 넓은 화면이 덤이다.
+       */
+      @media ${unsafeCSS(BESIDE)} {
+        .page {
+          max-width: none;
+          display: grid;
+          grid-template-columns: var(--ui-measure, 1080px) minmax(360px, 1fr);
+          column-gap: 24px;
+          align-items: start;
+        }
+
+        /*
+         * 두 판의 자리는 문서 차례가 아니라 격자가 정한다. 문서 차례는 좁은 화면 그대로 두어야
+         * 하고(결재선 · 결정 · 타임라인 · 의견), 넓은 화면에서만 타임라인이 오른쪽으로 빠진다.
+         */
+        .main {
+          grid-column: 1;
+          min-width: 0;
+        }
+
+        /* 옆에 선 타임라인은 읽는 동안 따라온다 — 결정과 맞대어 보는 값이다. */
+        .aside {
+          grid-column: 2;
+          grid-row: 1 / span 3;
+          position: sticky;
+          top: 0;
+        }
+      }
+
+      .comment-actions {
         display: flex;
-        flex-direction: column;
-        position: relative;
+        justify-content: flex-end;
+      }
 
-        width: 100%;
-        overflow: auto;
-        background: var(--ui-bg, #f0f2f4);
-        color: var(--ui-ink, #17242c);
+      .comment-actions button {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        height: var(--form-action-height, 32px);
+        padding: 0 12px;
+        border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+        border-radius: var(--ui-r-small, 6px);
+        background: transparent;
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+        font: inherit;
         font-size: var(--ui-t-body, 13px);
+        cursor: pointer;
+      }
+
+      .comment-actions md-icon {
+        font-size: 16px;
+        --md-icon-size: 16px;
       }
 
       /* 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. */
@@ -348,7 +423,6 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         font-size: var(--ui-t-small, 11.5px);
         color: var(--ui-muted, #57676f);
       }
-
     `
     ]; }
     /**
@@ -371,7 +445,13 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
     }
     get context() {
         const judgment = this.activityApproval?.judgment;
-        return { title: this.lifecycle?.params?.['title'] || i18next.t('title.activity approval'),
+        return {
+            /*
+             * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다
+             * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.
+             */
+            frame: 'document',
+            title: this.lifecycle?.params?.['title'] || i18next.t('title.activity approval'),
             help: 'worklist/activity-approval',
             /*
              * 이 화면은 메뉴에 없다 — 「내 결재함」에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬
@@ -392,121 +472,103 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
              * reader looking for them.
              */
             actions: judgment
-                ? [
-                    { title: i18next.t('button.close'),
-                        action: () => {
-                            history.back();
-                        },
-                        ...CommonButtonStyles.back
-                    }
-                ]
+                ? []
                 : this.isReference
-                    ? [
-                        {
-                            title: i18next.t('button.save-note'),
-                            action: this.saveActivityApproval.bind(this),
-                            icon: 'edit_note',
-                            emphasis: { raised: true, outlined: false, dense: false, danger: false }
-                        },
-                        {
-                            title: i18next.t('button.close'),
-                            action: () => {
-                                history.back();
-                            },
-                            ...CommonButtonStyles.back,
-                            icon: 'close'
-                        }
-                    ]
+                    ? []
                     : /*
-                     * ── 세 단추의 순서와 무게 (2026-09-06) ──────────────────────────
-                     * 전에는 반려가 첫 자리였고, 승인 · 반려 · 저장이 모두 같은 모양이었다. 되돌리기 어려운
-                     * 것이 앞에 서고 무엇이 주된 흐름인지 화면이 말하지 않았다.
-                     *
-                     * 승인이 주 동작이다 — 채운 단추 하나. 반려는 대등한 선택이지만 예외 경로라 테두리
-                     * 단추로 그 옆에 둔다.
-                     *
-                     * 「저장」은 이름이 뜻을 말하지 않았다. 이 단추가 저장하는 것은 **의견 하나**이고
-                     * (saveActivityApproval 은 id 와 comment 만 보낸다), 판단은 미뤄 둔다. 그리고 그 결과는
-                     * 목록에서 「메모 있음」 표식으로 나타난다(activity-cells 의 approvalMarks). 목록이
-                     * 부르는 이름과 같은 낱말로 맞춘다.
-                     */
+                       * ── 세 단추의 순서와 무게 (2026-09-06) ──────────────────────────
+                       * 전에는 반려가 첫 자리였고, 승인 · 반려 · 저장이 모두 같은 모양이었다. 되돌리기 어려운
+                       * 것이 앞에 서고 무엇이 주된 흐름인지 화면이 말하지 않았다.
+                       *
+                       * 승인이 주 동작이다 — 채운 단추 하나. 반려는 대등한 선택이지만 예외 경로라 테두리
+                       * 단추로 그 옆에 둔다.
+                       *
+                       * 「저장」은 이름이 뜻을 말하지 않았다. 이 단추가 저장하는 것은 **의견 하나**이고
+                       * (saveActivityApproval 은 id 와 comment 만 보낸다), 판단은 미뤄 둔다. 그리고 그 결과는
+                       * 목록에서 「메모 있음」 표식으로 나타난다(activity-cells 의 approvalMarks). 목록이
+                       * 부르는 이름과 같은 낱말로 맞춘다.
+                       */
                         [
-                            { title: i18next.t('button.approve'),
+                            {
+                                title: i18next.t('button.approve'),
                                 action: this.approveActivityApproval.bind(this),
                                 icon: 'approval',
-                                emphasis: { raised: true,
-                                    outlined: false,
-                                    dense: false,
-                                    danger: false
-                                }
+                                emphasis: { raised: true, outlined: false, dense: false, danger: false }
                             },
-                            { title: i18next.t('button.reject'),
+                            {
+                                title: i18next.t('button.reject'),
                                 action: this.rejectActivityApproval.bind(this),
                                 icon: 'assignment_return',
-                                emphasis: { raised: false,
-                                    outlined: true,
-                                    dense: false,
-                                    danger: false
-                                }
-                            },
-                            { title: i18next.t('button.save-note'),
-                                action: this.saveActivityApproval.bind(this),
-                                icon: 'edit_note',
-                                emphasis: { raised: false,
-                                    outlined: true,
-                                    dense: false,
-                                    danger: false
-                                }
+                                emphasis: { raised: false, outlined: true, dense: false, danger: false }
                             },
-                            { title: i18next.t('button.close'),
-                                action: () => {
-                                    history.back();
-                                },
-                                ...CommonButtonStyles.back,
-                                icon: 'close'
-                            }
                         ]
             // activityApproval: this.activityApproval
         };
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.media = window.matchMedia(BESIDE);
+        this.onBeside();
+        this.media.addEventListener('change', this.onBeside);
+    }
+    disconnectedCallback() {
+        this.media?.removeEventListener('change', this.onBeside);
+        super.disconnectedCallback();
+    }
     render() {
-        if (!this.activityThread) {
-            return this.loaded
+        /* Reading and failing both drew nothing at all, so a failure looked like an empty screen. */
+        return html `<div class="page">
+      <ox-page-state
+      .loading=${!this.loaded && !this.loadError}
+      .error=${this.loadError}
+      @retry=${() => this.lastId && this.fetchActivityApproval(this.lastId)}
+      >${this.activityThread
+            ? this.renderApproval()
+            : this.loaded
                 ? html `<div empty>
-            <span class="title">${i18next.t('text.no activity thread info')}</span>
-            <span class="why">${i18next.t('text.no-activity-thread-why')}</span>
-          </div>`
-                : nothing;
-        }
+                <span class="title">${i18next.t('text.no activity thread info')}</span>
+                <span class="why">${i18next.t('text.no-activity-thread-why')}</span>
+              </div>`
+                : nothing}</ox-page-state
+    >
+    </div>`;
+    }
+    renderApproval() {
         const { terminatedAt } = this.activityApproval;
         const editable = !terminatedAt;
         return html `
-      <activity-approval-ribon .activityApproval=${this.activityApproval}></activity-approval-ribon>
-      ${this.activityContent()}
+      <div class="main">
+        <activity-approval-ribon .activityApproval=${this.activityApproval}></activity-approval-ribon>
+        ${this.activityContent()}
+      </div>
       <!--
         보일 항목이 하나도 없으면 타임라인을 편다 — 그때는 화면이 「아래 타임라인의 상신 사유와
         이력을 보고 판단하세요」로 여기를 가리키므로, 접혀 있으면 그 안내가 거짓말이 된다.
+
+        옆에 설 자리가 있을 때도 편다. 접힌 줄을 눌러 펴는 동작이, 그 줄이 이미 보이는 자리에
+        있으면 하는 일이 없다.
       -->
       <activity-thread-timeline
+        class="aside"
         .activityThread=${this.activityThread}
-        ?open=${!this.hasFields()}
+        ?open=${!this.hasFields() || this.beside}
         short-form
       ></activity-thread-timeline>
       ${editable
             ? html `
-            <div comment>
-              <section>
-                <h2>${i18next.t('field.wl-comment')}</h2>
-                <textarea
-                  placeholder=${String(i18next.t(this.isReference
+              <div comment class="main">
+                <section>
+                  <h2>${i18next.t('field.wl-comment')}</h2>
+                  <textarea
+                    placeholder=${String(i18next.t(this.isReference
                 ? 'text.write-your-comment-as-reference'
                 : 'text.explain the reason for approval/rejection'))}
-                  .value=${this.activityApproval?.comment}
-                  @change=${(e) => {
+                    .value=${this.activityApproval?.comment}
+                    @change=${(e) => {
                 this.activityApproval.comment = e.target.value;
             }}
-                ></textarea>
-                <!--
+                  ></textarea>
+                  <!--
                   반려는 의견이 필수다(rejectActivityApproval). 전에는 그 규칙을 **누른 뒤에** 토스트로
                   알렸다. 되돌릴 수 없는 것과 뜻이 다른 동작은 하기 전에 말한다.
 
@@ -514,12 +576,23 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                   and reject buttons are absent for them and a reader whose buttons are missing
                   goes looking for them.
                 -->
-                <p class="hint">
-                  ${i18next.t(this.isReference ? 'text.reference-comment-hint' : 'text.approval-comment-hint')}
-                </p>
-              </section>
-            </div>
-          `
+                  <p class="hint">
+                    ${i18next.t(this.isReference ? 'text.reference-comment-hint' : 'text.approval-comment-hint')}
+                  </p>
+
+                  <!--
+                    의견을 저장하는 단추는 의견 상자 옆이다(ADR-0060 결정 9 보탬). 동작 줄에는
+                    결정만 둔다 — 전에는 승인 · 반려와 같은 줄에 같은 무게로 서서 셋 다 결정처럼
+                    읽혔고, 좁은 화면에서는 넘침 메뉴로 밀려 반려가 숨을 수 있었다.
+                  -->
+                  <div class="comment-actions">
+                    <button @click=${this.saveActivityApproval.bind(this)}>
+                      <md-icon>edit_note</md-icon>${i18next.t('button.save-note')}
+                    </button>
+                  </div>
+                </section>
+              </div>
+            `
             : nothing}
     `;
     }
@@ -652,48 +725,48 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
           ${subject?.found ? html `<div class="subject">${this.slotText(subject)}</div>` : ''}
           ${reason
             ? html `
-                <div class="block">
-                  <div class="label">${i18next.t('field.reason')}</div>
-                  <div class="said ${this.hasWords(reason) ? '' : 'none'}">
-                    ${this.hasWords(reason) ? this.slotText(reason) : i18next.t('text.no-reason-given')}
+                  <div class="block">
+                    <div class="label">${i18next.t('field.reason')}</div>
+                    <div class="said ${this.hasWords(reason) ? '' : 'none'}">
+                      ${this.hasWords(reason) ? this.slotText(reason) : i18next.t('text.no-reason-given')}
+                    </div>
                   </div>
-                </div>
-              `
+                `
             : ''}
           ${this.renderReversibility(reversibility)}
           ${evidence.length
             ? html `
-                <div class="block">
-                  <div class="label">${i18next.t('label.what-it-was-judged-from')}</div>
-                  ${evidence.map(slot => html `
-                      <div class="evidence">
-                        ${declaredLabel(slot) ? html `<div class="label">${declaredLabel(slot)}</div>` : ''}
-                        <div>${this.slotText(slot)}</div>
-                      </div>
-                    `)}
-                </div>
-              `
+                  <div class="block">
+                    <div class="label">${i18next.t('label.what-it-was-judged-from')}</div>
+                    ${evidence.map(slot => html `
+                        <div class="evidence">
+                          ${declaredLabel(slot) ? html `<div class="label">${declaredLabel(slot)}</div>` : ''}
+                          <div>${this.slotText(slot)}</div>
+                        </div>
+                      `)}
+                  </div>
+                `
             : ''}
           ${currentState?.found
             ? html `
-                <div class="current-state">
-                  <div class="label">${declaredLabel(currentState) || i18next.t('label.current-state')}</div>
-                  <div>${this.slotText(currentState)}</div>
-                </div>
-              `
+                  <div class="current-state">
+                    <div class="label">${declaredLabel(currentState) || i18next.t('label.current-state')}</div>
+                    <div>${this.slotText(currentState)}</div>
+                  </div>
+                `
             : ''}
           ${consequences.length
             ? html `
-                <div class="block">
-                  <div class="label">${i18next.t('label.what-changes')}</div>
-                  ${consequences.map(slot => html `
-                      <div class="consequence">
-                        ${declaredLabel(slot) ? html `<div class="label">${declaredLabel(slot)}</div>` : ''}
-                        <div>${this.slotText(slot)}</div>
-                      </div>
-                    `)}
-                </div>
-              `
+                  <div class="block">
+                    <div class="label">${i18next.t('label.what-changes')}</div>
+                    ${consequences.map(slot => html `
+                        <div class="consequence">
+                          ${declaredLabel(slot) ? html `<div class="label">${declaredLabel(slot)}</div>` : ''}
+                          <div>${this.slotText(slot)}</div>
+                        </div>
+                      `)}
+                  </div>
+                `
             : ''}
         </section>
       `);
@@ -731,8 +804,7 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
       <div class="reversibility" ?irreversible=${!said.reversible}>
         <md-icon>${said.reversible ? 'undo' : 'lock'}</md-icon>
         <span
-          >${said.caveat ||
-            i18next.t(said.reversible ? 'text.approval-is-reversible' : 'text.approval-is-irreversible')}</span
+          >${said.caveat || i18next.t(said.reversible ? 'text.approval-is-reversible' : 'text.approval-is-irreversible')}</span
         >
       </div>
     `;
@@ -810,19 +882,19 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         return keyed(this.activityApproval.id, html `
         ${inputSpec.length
             ? html `
-              <section readonly>
-                <h2>${i18next.t('label.activity-input')}</h2>
-                ${renderGiven(inputSpec, input)}
-              </section>
-            `
+                <section readonly>
+                  <h2>${i18next.t('label.activity-input')}</h2>
+                  ${renderGiven(inputSpec, input)}
+                </section>
+              `
             : ''}
         ${outputSpec.length
             ? html `
-              <section readonly>
-                <h2>${i18next.t('field.artifact')}</h2>
-                ${renderGiven(outputSpec, output)}
-              </section>
-            `
+                <section readonly>
+                  <h2>${i18next.t('field.artifact')}</h2>
+                  ${renderGiven(outputSpec, output)}
+                </section>
+              `
             : ''}
       `);
     }
@@ -833,8 +905,7 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         const { output, activityInstance } = this.activityThread;
         const { viewSource: boardId, input } = activityInstance || {};
         if (!this.board || this.board.id !== boardId) {
-            this.board = { id: boardId
-            };
+            this.board = { id: boardId };
         }
         return keyed(this.activityApproval.id, html `
         <ox-board-viewer
@@ -917,13 +988,28 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         }
     }
     async fetchActivityApproval(id) {
-        const response = await client.query({ query: gql `
+        this.lastId = id;
+        this.loadError = null;
+        let response;
+        try {
+            response = await client.query({
+                query: gql `
         query activityApproval($id: String!) {           activityApproval(id: $id) ${ActivityApprovalFetchResult}
  }
       `,
-            variables: { id
-            }
-        });
+                variables: { id }
+            });
+        }
+        catch (error) {
+            this.loadError = error;
+            return;
+        }
+        if (response.errors?.length || !response.data?.activityApproval) {
+            this.loadError = response.errors?.length
+                ? response.errors
+                : new Error(i18next.t('error.activity-approval not found', { activityApproval: id }));
+            return;
+        }
         this.activityApproval = response.data.activityApproval;
         this.loaded = true;
         this.activityThread = this.activityApproval.activityThread;
@@ -952,27 +1038,22 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
     async rejectActivityApproval() {
         var { id, comment } = this.activityApproval;
         if (!comment) {
-            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.enter a comment')
-                }
-            }));
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.enter a comment') } }));
             this.commentInput.focus();
             return;
         }
-        const outcome = await ranMutation(() => client.mutate({ mutation: gql `
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: gql `
         mutation ($id: String!, $comment: String!) {           rejectActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
  }
       `,
-            variables: { id,
-                comment
-            }
+            variables: { id, comment }
         }));
         if (outcome.ok) {
             this.activityApproval = outcome.data.rejectActivityApproval;
             this.activityThread = this.activityApproval.activityThread;
             this.updateContext();
-            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_rejected_successfully')
-                }
-            }));
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_rejected_successfully') } }));
         }
     }
     async approveActivityApproval() {
@@ -980,40 +1061,34 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         if (!(await this.confirmIfIrreversible())) {
             return;
         }
-        const outcome = await ranMutation(() => client.mutate({ mutation: gql `
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: gql `
         mutation ($id: String!, $comment: String) {           approveActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
  }
       `,
-            variables: { id,
-                comment
-            }
+            variables: { id, comment }
         }));
         if (outcome.ok) {
             this.activityApproval = outcome.data.approveActivityApproval;
             this.activityThread = this.activityApproval.activityThread;
             this.updateContext();
-            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_approved_successfully')
-                }
-            }));
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_approved_successfully') } }));
         }
     }
     async saveActivityApproval() {
         var { id, comment } = this.activityApproval;
-        const outcome = await ranMutation(() => client.mutate({ mutation: gql `
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: gql `
         mutation ($id: String!, $comment: String) {           saveActivityApproval(id: $id, comment: $comment) ${ActivityApprovalFetchResult}
  }
       `,
-            variables: { id,
-                comment
-            }
+            variables: { id, comment }
         }));
         if (outcome.ok) {
             this.activityApproval = outcome.data.saveActivityApproval;
             this.activityThread = this.activityApproval.activityThread;
             this.updateContext();
-            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_saved_successfully')
-                }
-            }));
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_saved_successfully') } }));
         }
     }
 };
@@ -1021,10 +1096,18 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], ActivityApprovalPage.prototype, "activityApproval", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "beside", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], ActivityApprovalPage.prototype, "loaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "loadError", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)