@things-factory/worklist 10.0.18 → 10.1.0

package/dist-client/pages/activity-approval/activity-approval-page.d.ts

@@ -2,7 +2,7 @@ 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 { TemplateResult } from 'lit';
+import { nothing, TemplateResult } from 'lit';
 import { DirectiveResult } from 'lit-html/directive.js';
 import { PageView } from '@operato/shell';
 export declare const ActivityThreadStatus: {
@@ -17,12 +17,23 @@ declare const ActivityApprovalPage_base: (new (...args: any[]) => import("lit").
 export declare class ActivityApprovalPage extends ActivityApprovalPage_base {
     static styles: import("lit").CSSResult[];
     activityApproval: any;
+    /**
+     * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**
+     *
+     * 전에는 값이 없으면 곧바로 「업무활동 정보가 없습니다」를 그렸다. 그런데 이 화면은 열리자마자
+     * 조회를 시작하므로, 응답이 오기 전까지 **없다고 단언하는 화면**이 보인다. 목록에서 줄을 눌러
+     * 들어온 사람은 방금 본 건이 없다는 말을 먼저 읽는다.
+     *
+     * 조회가 끝난 뒤에만 그 말을 한다. 그 전에는 아무 말도 하지 않는다.
+     */
+    loaded: boolean;
     activityThread: any;
     board: any;
     commentInput: HTMLTextAreaElement;
     get context(): {
         title: any;
         help: string;
+        menu: string;
         actions: {
             icon: string;
             emphasis: {
@@ -35,16 +46,52 @@ export declare class ActivityApprovalPage extends ActivityApprovalPage_base {
             action: () => void;
         }[];
     };
-    render(): TemplateResult<1>;
-    activityContent(): any;
+    render(): TemplateResult<1> | typeof nothing;
+    /** 화면에 낼 항목이 하나라도 있나. 타임라인을 펴 둘지 정하는 자리가 쓴다. */
+    hasFields(): boolean;
+    activityContent(): DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+    /**
+     * 화면 종류가 달라도 **같은 자리에 같은 모양으로 놓인다.**
+     *
+     * worklist 는 네 가지로 내용을 그린다(generated · custom-element · template · board). 그중
+     * generated 만 절 카드 안에 있었고 나머지 셋은 면 위에 맨몸으로 놓였다. 그래서 같은 결재 화면이
+     * 액티비티에 따라 카드였다가 아니었다가 했다 — 아래의 타임라인 · 의견은 늘 카드라 위계도 어긋났다.
+     *
+     * board 는 뺀다. 전체 폭 · 전체 높이를 쓰는 캔버스라 카드 안에 넣으면 여백이 두 겹이 되고 크기가
+     * 어긋난다.
+     *
+     * 카드는 여백을 두지 않는다(padding: 0). 안에 들어오는 것이 자기 조판을 갖고 있고, 두 겹으로
+     * 주면 안쪽 내용이 카드 가운데로 밀린다.
+     */
+    hostedContent(content: unknown): TemplateResult<1>;
     templateContent(): DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
-    getInputSpec(): any;
-    getOutputSpec(): any;
+    /**
+     * 결재자가 보는 내용 — **전부 읽기 전용이다.**
+     *
+     * 전에는 「Output」 절을 편집기로 그리고 변경을 activityApproval.output 에 적었다. 그런데
+     * approveActivityApproval / rejectActivityApproval 은 id 와 comment 만 보낸다 — 그 값은 어디에도
+     * 가지 않는다. 결재자가 적을 수 있는 것은 의견 하나이고, 그것은 화면 아래 칸이 받는다.
+     */
     generatedContent(): DirectiveResult;
     boardContent(): DirectiveResult;
     customElementContent(): any;
     oxBoardViewer: any;
     getOutputFromBoard(): any;
+    /**
+     * 화면이 열리면 **의견 칸에 캐럿을 둔다.**
+     *
+     * 결재자가 이 화면에서 적는 것은 의견 하나다. 나머지는 전부 읽는 것이고, 판단은 아래 버튼이
+     * 받는다. 그러면 열자마자 커서가 있어야 하는 자리는 하나뿐이다.
+     *
+     * 조건 둘을 지킨다.
+     *
+     *   활성 탭일 때만   MDI 라 뒤에 있는 탭이 응답을 받으면 앞 탭의 입력을 빼앗는다
+     *   한 건에 한 번    갱신마다 focus 를 부르면 사용자가 옮긴 커서를 계속 되돌린다
+     *
+     * preventScroll 을 준다 — 화면을 아래로 끌어내리면 정작 무엇을 승인하는지가 위로 사라진다.
+     */
+    private focusedFor?;
+    private focusComment;
     updated(changes: any): void;
     pageUpdated(changes: any, lifecycle: any, changedBefore: any): Promise<void>;
     fetchActivityApproval(id: any): Promise<void>;

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

@@ -13,6 +13,7 @@ import { i18next, localize } from '@operato/i18n';
 import { PageView } from '@operato/shell';
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles';
 import { provider } from '@things-factory/board-ui/dist-client/board-provider.js';
+import { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js';
 const ActivityApprovalFetchResult = `\
 {   id
   judgment
@@ -66,6 +67,7 @@ const ActivityApprovalFetchResult = `\
           options
           quantifier
           spec
+          hidden
  }
  }
       approvalLine {         type
@@ -94,62 +96,137 @@ export const ActivityThreadStatus = { Unassigned: 'unassigned',
     Aborted: 'aborted'
 };
 let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**
+         *
+         * 전에는 값이 없으면 곧바로 「업무활동 정보가 없습니다」를 그렸다. 그런데 이 화면은 열리자마자
+         * 조회를 시작하므로, 응답이 오기 전까지 **없다고 단언하는 화면**이 보인다. 목록에서 줄을 눌러
+         * 들어온 사람은 방금 본 건이 없다는 말을 먼저 읽는다.
+         *
+         * 조회가 끝난 뒤에만 그 말을 한다. 그 전에는 아무 말도 하지 않는다.
+         */
+        this.loaded = false;
+    }
     static { this.styles = [
         ScrollbarStyles,
+        ActivityFieldsStyles,
         css `
-      :host {         display: flex;
+      :host {
+        display: flex;
         flex-direction: column;
         position: relative;
 
         width: 100%;
         overflow: auto;
-        background-color: var(--md-sys-color-background);
- }
+        background: var(--ui-bg, #f0f2f4);
+        color: var(--ui-ink, #17242c);
+        font-size: var(--ui-t-body, 13px);
+      }
 
-      ox-board-viewer {         width: 100%;
+      /* 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. */
+      /*
+       * 줄어들지 않는다 — 줄어들면 본문이 잘린다.
+       *
+       * flex 항목인데 크기를 안 정해 두면 기본이 flex: 0 1 auto 다. **1 이 줄어든다는 뜻이다** —
+       * 세로가 모자라면 브라우저가 이 칸부터 줄이는데, 여기엔 카드 모서리를 따라 자르려고
+       * overflow: hidden 이 걸려 있어서 줄어든 만큼이 **스크롤도 없이 사라진다.**
+       *
+       * 완료 조회에서 실측했다(1400x620): 칸이 242px 로 줄고 내용은 362px 이라 「업무 내용」 절이
+       * 대부분 잘렸고, 잘린 자리 바로 아래에서 타임라인이 시작하니 타임라인이 본문을 덮은 것처럼
+       * 보였다. 세로가 넉넉하면 줄일 일이 없어 안 드러난다.
+       *
+       * 안에 오는 것은 문서다. 높이를 정해 주어야 하는 것은 board 뿐이고 board 는 이 칸을 거치지
+       * 않는다(activityContent 참조). 문서는 제 높이로 서고, 모자라면 페이지 전체가 스크롤한다 —
+       * :host 의 overflow: auto 가 그 자리다.
+       */
+      section[hosted] {
+        flex: none;
+        padding: 0;
+        overflow: hidden;
+      }
+
+      ox-board-viewer {
+        width: 100%;
         height: 100%;
- }
+      }
 
-      activity-thread-timeline {         margin: var(--spacing-medium);
- }
+      activity-thread-timeline {
+        margin: var(--spacing-large, 16px);
+      }
 
-      div[comment] {         display: flex;
+      /*
+       * 의견 칸 — 이 화면에서 **결재자가 유일하게 적는 자리**다.
+       *
+       * 화면 아래에 붙어 있어(sticky) 목록을 내려 읽는 동안에도 보인다. 그 자리를 지키되 모양은
+       * 다른 절과 같은 카드로 둔다. 전에는 회색 면(surface-variant)에 다른 테두리라 이 화면에서
+       * 혼자 다른 부품처럼 보였다.
+       */
+      /*
+       * 의견 — 이 화면에서 **결재자가 유일하게 적는 자리**다.
+       *
+       * 화면 아래에 붙어 있어(sticky) 내용을 내려 읽는 동안에도 보인다. 그 자리를 지키되 모양은
+       * 다른 절과 같은 카드로 둔다. 전에는 회색 면(surface-variant)에 다른 테두리라 이 화면에서
+       * 혼자 다른 부품처럼 보였다.
+       */
+      div[comment] {
         position: sticky;
         bottom: 0;
-        margin: 0;
-        padding: 0;
+        padding-bottom: var(--spacing-large, 16px);
+        background: var(--ui-bg, #f0f2f4);
+      }
+
+      /*
+       * 이 화면에서 **사용자가 유일하게 손대는 자리**라는 것을 모양으로 말한다.
+       *
+       * 나머지 절은 전부 읽는 것이고, 판단은 아래 툴바의 단추가 받는다. 그런데 의견 칸이 읽는
+       * 절들과 똑같은 카드라 「내 차례가 어디인지」가 화면에 없었다. 왼쪽에 강조색 띠를 둔다 —
+       * sticky 라 툴바 바로 위에 붙으므로 띠와 단추가 한 덩어리로 읽힌다.
+       */
+      div[comment] section {
+        border-left: 3px solid var(--ui-accent, #00727e);
+      }
+
+      div[comment] textarea {
+        display: block;
+        box-sizing: border-box;
         width: 100%;
-        background-color: var(--md-sys-color-background);
+        height: 76px;
+        padding: 10px 12px;
+        background: var(--ui-panel, #ffffff);
+        border: 1px solid var(--ui-line, #d5dce0);
+        border-radius: var(--ui-r-small, 6px);
+        color: var(--ui-ink, #17242c);
+        font: inherit;
+        font-size: var(--ui-t-body, 13px);
+        resize: none;
+        outline: none;
+      }
 
-        textarea {           flex: 1;
-          margin: var(--spacing-medium);
-          padding: var(--spacing-medium);
-          font: var(--input-font);
-          outline: none;
-          height: 80px;
-          border-radius: var(--spacing-small);
-          border: var(--input-field-border);
-          resize: none;
-          color: var(--md-sys-color-on-surface);
-          background: var(--md-sys-color-surface-variant);
- }
- }
+      div[comment] textarea:focus {
+        border-color: var(--ui-accent, #00727e);
+      }
 
-      [empty] {         flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-self: center;
-        color: var(--md-sys-color-on-surface-variant);
-        font: var(--md-sys-typescale-title-medium);
-        opacity: 0.7;
- }
+      div[comment] .hint {
+        margin: 7px 0 0;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-faint, #8a959c);
+        word-break: keep-all;
+      }
     `
     ]; }
     get context() {
         const judgment = this.activityApproval?.judgment;
         return { title: this.lifecycle?.params?.['title'] || i18next.t('title.activity approval'),
             help: 'worklist/activity-approval',
+            /*
+             * 이 화면은 메뉴에 없다 — 「내 결재함」에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬
+             * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.
+             *
+             * 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.
+             */
+            menu: 'approval-pending-list',
             actions: judgment
                 ? [
                     { title: i18next.t('button.close'),
@@ -159,67 +236,120 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                         ...CommonButtonStyles.back
                     }
                 ]
-                : [
-                    { title: i18next.t('button.reject'),
-                        action: this.rejectActivityApproval.bind(this),
-                        ...CommonButtonStyles.play,
-                        icon: 'assignment_return'
-                    },
-                    { title: i18next.t('button.approve'),
-                        action: this.approveActivityApproval.bind(this),
-                        ...CommonButtonStyles.save,
-                        icon: 'approval'
-                    },
-                    { title: i18next.t('button.save'),
-                        action: this.saveActivityApproval.bind(this),
-                        ...CommonButtonStyles.save
-                    },
-                    { title: i18next.t('button.close'),
-                        action: () => {
-                            history.back();
+                : /*
+                   * ── 세 단추의 순서와 무게 (2026-09-06) ──────────────────────────
+                   * 전에는 반려가 첫 자리였고, 승인 · 반려 · 저장이 모두 같은 모양이었다. 되돌리기 어려운
+                   * 것이 앞에 서고 무엇이 주된 흐름인지 화면이 말하지 않았다.
+                   *
+                   * 승인이 주 동작이다 — 채운 단추 하나. 반려는 대등한 선택이지만 예외 경로라 테두리
+                   * 단추로 그 옆에 둔다.
+                   *
+                   * 「저장」은 이름이 뜻을 말하지 않았다. 이 단추가 저장하는 것은 **의견 하나**이고
+                   * (saveActivityApproval 은 id 와 comment 만 보낸다), 판단은 미뤄 둔다. 그리고 그 결과는
+                   * 목록에서 「메모 있음」 표식으로 나타난다(activity-cells 의 approvalMarks). 목록이
+                   * 부르는 이름과 같은 낱말로 맞춘다.
+                   */
+                    [
+                        { title: i18next.t('button.approve'),
+                            action: this.approveActivityApproval.bind(this),
+                            icon: 'approval',
+                            emphasis: { raised: true,
+                                outlined: false,
+                                dense: false,
+                                danger: false
+                            }
                         },
-                        ...CommonButtonStyles.back,
-                        icon: 'close'
-                    }
-                ]
+                        { 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
+                            }
+                        },
+                        { title: i18next.t('button.close'),
+                            action: () => {
+                                history.back();
+                            },
+                            ...CommonButtonStyles.back,
+                            icon: 'close'
+                        }
+                    ]
             // activityApproval: this.activityApproval
         };
     }
     render() {
         if (!this.activityThread) {
-            return html `<div empty>${i18next.t('text.no activity thread info')}</div>`;
+            return 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;
         }
         const { terminatedAt } = this.activityApproval;
         const editable = !terminatedAt;
         return html `
       <activity-approval-ribon .activityApproval=${this.activityApproval}></activity-approval-ribon>
       ${this.activityContent()}
-      <activity-thread-timeline .activityThread=${this.activityThread} short-form></activity-thread-timeline>
+      <!--
+        보일 항목이 하나도 없으면 타임라인을 편다 — 그때는 화면이 「아래 타임라인의 상신 사유와
+        이력을 보고 판단하세요」로 여기를 가리키므로, 접혀 있으면 그 안내가 거짓말이 된다.
+      -->
+      <activity-thread-timeline
+        .activityThread=${this.activityThread}
+        ?open=${!this.hasFields()}
+        short-form
+      ></activity-thread-timeline>
       ${editable
             ? html `
             <div comment>
-              <textarea
-                placeholder=${String(i18next.t('text.explain the reason for approval/rejection'))}
-                .value=${this.activityApproval?.comment}
-                @change=${(e) => {
+              <section>
+                <h2>${i18next.t('field.wl-comment')}</h2>
+                <textarea
+                  placeholder=${String(i18next.t('text.explain the reason for approval/rejection'))}
+                  .value=${this.activityApproval?.comment}
+                  @change=${(e) => {
                 this.activityApproval.comment = e.target.value;
             }}
-              ></textarea>
+                ></textarea>
+                <!--
+                  반려는 의견이 필수다(rejectActivityApproval). 전에는 그 규칙을 **누른 뒤에** 토스트로
+                  알렸다. 되돌릴 수 없는 것과 뜻이 다른 동작은 하기 전에 말한다.
+                -->
+                <p class="hint">${i18next.t('text.approval-comment-hint')}</p>
+              </section>
             </div>
           `
             : nothing}
     `;
     }
+    /** 화면에 낼 항목이 하나라도 있나. 타임라인을 펴 둘지 정하는 자리가 쓴다. */
+    hasFields() {
+        const model = this.activityThread?.activityInstance?.activity?.model;
+        return inputSpecOf(model).length > 0 || outputSpecOf(model).length > 0;
+    }
     activityContent() {
         switch (this.activityThread?.activityInstance?.viewType) {
             case 'template':
-                return this.templateContent();
+                return this.hostedContent(this.templateContent());
             case 'generated':
                 return this.generatedContent();
+            /* board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다(hostedContent 머리말). */
             case 'board':
                 return this.boardContent();
             case 'custom-element':
-                return this.customElementContent();
+                return this.hostedContent(this.customElementContent());
             case 'page':
             case 'external':
                 return html ``;
@@ -227,6 +357,22 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                 return this.generatedContent();
         }
     }
+    /**
+     * 화면 종류가 달라도 **같은 자리에 같은 모양으로 놓인다.**
+     *
+     * worklist 는 네 가지로 내용을 그린다(generated · custom-element · template · board). 그중
+     * generated 만 절 카드 안에 있었고 나머지 셋은 면 위에 맨몸으로 놓였다. 그래서 같은 결재 화면이
+     * 액티비티에 따라 카드였다가 아니었다가 했다 — 아래의 타임라인 · 의견은 늘 카드라 위계도 어긋났다.
+     *
+     * board 는 뺀다. 전체 폭 · 전체 높이를 쓰는 캔버스라 카드 안에 넣으면 여백이 두 겹이 되고 크기가
+     * 어긋난다.
+     *
+     * 카드는 여백을 두지 않는다(padding: 0). 안에 들어오는 것이 자기 조판을 갖고 있고, 두 겹으로
+     * 주면 안쪽 내용이 카드 가운데로 밀린다.
+     */
+    hostedContent(content) {
+        return html `<section hosted>${content}</section>`;
+    }
     templateContent() {
         if (!this.activityApproval) {
             return html ``;
@@ -234,65 +380,52 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         const { viewSource: template } = this.activityThread?.activityInstance;
         return unsafeHTML(template);
     }
-    getInputSpec() {
-        const model = this.activityThread?.activityInstance?.activity?.model;
-        return (model || [])
-            .filter(item => item.inout === 'in' || item.inout === 'inout')
-            .map(item => {
-            return { ...item,
-                name: item.tag,
-                label: item.tKey || item.name,
-                property: item.options
-            };
-        });
-    }
-    getOutputSpec() {
-        const model = this.activityThread?.activityInstance?.activity?.model;
-        return (model || [])
-            .filter(item => item.inout === 'inout' || item.inout === 'out')
-            .map(item => {
-            return { ...item,
-                name: item.tag,
-                label: item.tKey || item.name,
-                property: item.options
-            };
-        });
-    }
+    /**
+     * 결재자가 보는 내용 — **전부 읽기 전용이다.**
+     *
+     * 전에는 「Output」 절을 편집기로 그리고 변경을 activityApproval.output 에 적었다. 그런데
+     * approveActivityApproval / rejectActivityApproval 은 id 와 comment 만 보낸다 — 그 값은 어디에도
+     * 가지 않는다. 결재자가 적을 수 있는 것은 의견 하나이고, 그것은 화면 아래 칸이 받는다.
+     */
     generatedContent() {
         if (!this.activityApproval) {
             return html ``;
         }
-        var { output, activityInstance } = this.activityThread || {};
-        var { input } = activityInstance || {};
-        const inputSpec = this.getInputSpec();
-        const outputSpec = this.getOutputSpec();
-        if (!output) {
-            output = inputSpec
-                .filter(item => item.inout === 'inout')
-                .reduce((inout, item) => {
-                inout[item.name] = input[item.name];
-                return inout;
-            }, {});
+        const { output, activityInstance } = this.activityThread || {};
+        const { input } = activityInstance || {};
+        const model = activityInstance?.activity?.model;
+        const inputSpec = inputSpecOf(model);
+        const outputSpec = outputSpecOf(model);
+        /*
+         * **결재 화면에서 내용이 비어 있는 것은 경고다.**
+         *
+         * 업무 상세라면 「적을 것이 없다」로 끝난다. 여기서는 다르다 — 무엇을 승인하는지 모르는 채로
+         * 승인 · 반려 버튼이 그대로 눌린다. 그 사실을 화면이 말하고, 대신 무엇을 보고 판단할지 알려
+         * 준다(타임라인의 상신 사유).
+         */
+        if (!inputSpec.length && !outputSpec.length) {
+            return keyed(this.activityApproval.id, html `<section empty>
+          <span class="title">${i18next.t('text.no-approval-content')}</span>
+          <span class="why">${i18next.t('text.no-approval-content-why')}</span>
+        </section>`);
         }
         return keyed(this.activityApproval.id, html `
-        <fieldset>
-          <legend>Input</legend>
-          <ox-properties-dynamic-view
-            data-name="input"
-            .props=${inputSpec}
-            .value=${input}
-          ></ox-properties-dynamic-view>
-        </fieldset>
-
-        <fieldset>
-          <legend>Output</legend>
-          <ox-properties-dynamic-view
-            data-name="output"
-            .props=${outputSpec}
-            .value=${output}
-            @property-change=${e => (this.activityApproval.output = e.currentTarget.value)}
-          ></ox-properties-dynamic-view>
-        </fieldset>
+        ${inputSpec.length
+            ? html `
+              <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>
+            `
+            : ''}
       `);
     }
     boardContent() {
@@ -331,16 +464,25 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         return element;
     }
     getOutputFromBoard() {
-        const outputSpec = this.getOutputSpec();
+        const outputSpec = outputSpecOf(this.activityThread?.activityInstance?.activity?.model);
         const data = this.oxBoardViewer.getSceneValues();
         return outputSpec.reduce((output, spec) => {
             output[spec.name] = data[spec.name];
             return output;
         }, {});
     }
+    focusComment() {
+        const id = this.activityApproval?.id;
+        if (!id || !this.active || this.activityApproval?.terminatedAt || this.focusedFor === id) {
+            return;
+        }
+        this.commentInput?.focus({ preventScroll: true });
+        this.focusedFor = id;
+    }
     updated(changes) {
         if (changes.has('activityApproval')) {
             this.updateContext();
+            this.focusComment();
         }
     }
     async pageUpdated(changes, lifecycle, changedBefore) {
@@ -357,6 +499,7 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
             }
         });
         this.activityApproval = response.data.activityApproval;
+        this.loaded = true;
         this.activityThread = this.activityApproval.activityThread;
         this.updateContext();
     }
@@ -429,6 +572,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], ActivityApprovalPage.prototype, "activityApproval", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "loaded", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)