fix: make todos and commands working in meeting minutes (#7244)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

packages/ui/src/components/Section.svelte

@@ -19,6 +19,7 @@
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
 
+  export let id: string | undefined = undefined
   export let label: IntlString
   export let icon: Asset | AnySvelteComponent | undefined = undefined
 
@@ -27,7 +28,7 @@
   export let invisible: boolean = false
 </script>
 
-<div class="antiSection">
+<div class="antiSection" {id}>
   {#if showHeader}
     <div class="antiSection-header" class:high class:invisible>
       {#if icon}

plugins/activity-resources/src/components/Activity.svelte

@@ -22,7 +22,7 @@
   } from '@hcengineering/activity'
   import { Doc, Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Grid, Label, Spinner, location, Lazy } from '@hcengineering/ui'
+  import { Grid, Label, Section, Spinner, location, Lazy } from '@hcengineering/ui'
   import { onDestroy, onMount } from 'svelte'
 
   import ActivityExtensionComponent from './ActivityExtension.svelte'
@@ -235,77 +235,81 @@
   $: void updateActivityMessages(object._id, isNewestFirst ? SortingOrder.Descending : SortingOrder.Ascending)
 </script>
 
-<div class="antiSection-header high mt-9" class:invisible={transparent}>
-  <span class="antiSection-header__title flex-row-center">
-    <Label label={activity.string.Activity} />
-    {#if isLoading}
-      <div class="ml-1">
-        <Spinner size="small" />
-      </div>
-    {/if}
-  </span>
-  <ActivityFilter
-    messages={allMessages}
-    {object}
-    on:update={(e) => {
-      filteredMessages = e.detail
-    }}
-    bind:isNewestFirst
-  />
-</div>
-{#if isNewestFirst && showCommenInput}
-  <div class="ref-input newest-first">
-    <ActivityExtensionComponent
-      kind="input"
-      {extensions}
-      props={{ object, boundary, focusIndex, withTypingInfo: true }}
-    />
-  </div>
-{/if}
-<div
-  class="p-activity select-text"
-  id={activity.string.Activity}
-  class:newest-first={isNewestFirst}
-  bind:this={activityBox}
->
-  {#if filteredMessages.length}
-    <Grid column={1} rowGap={0}>
-      {#each filteredMessages as message, index}
-        {@const canGroup = canGroupMessages(message, filteredMessages[index - 1])}
-        {#if selectedMessageId}
-          <ActivityMessagePresenter
-            value={message}
-            doc={object}
-            hideLink={true}
-            type={canGroup ? 'short' : 'default'}
-            isHighlighted={selectedMessageId === message._id}
-            withShowMore
+<div class="step-tb-6">
+  <Section label={activity.string.Activity} icon={activity.icon.Activity}>
+    <svelte:fragment slot="header">
+      {#if isLoading}
+        <div class="ml-1">
+          <Spinner size="small" />
+        </div>
+      {/if}
+      <ActivityFilter
+        messages={allMessages}
+        {object}
+        on:update={(e) => {
+          filteredMessages = e.detail
+        }}
+        bind:isNewestFirst
+      />
+    </svelte:fragment>
+
+    <svelte:fragment slot="content">
+      {#if isNewestFirst && showCommenInput}
+        <div class="ref-input newest-first">
+          <ActivityExtensionComponent
+            kind="input"
+            {extensions}
+            props={{ object, boundary, focusIndex, withTypingInfo: true }}
           />
-        {:else}
-          <Lazy>
-            <ActivityMessagePresenter
-              value={message}
-              doc={object}
-              hideLink={true}
-              type={canGroup ? 'short' : 'default'}
-              isHighlighted={selectedMessageId === message._id}
-              withShowMore
-            />
-          </Lazy>
+        </div>
+      {/if}
+      <div
+        class="p-activity select-text"
+        id={activity.string.Activity}
+        class:newest-first={isNewestFirst}
+        bind:this={activityBox}
+      >
+        {#if filteredMessages.length}
+          <Grid column={1} rowGap={0}>
+            {#each filteredMessages as message, index}
+              {@const canGroup = canGroupMessages(message, filteredMessages[index - 1])}
+              {#if selectedMessageId}
+                <ActivityMessagePresenter
+                  value={message}
+                  doc={object}
+                  hideLink={true}
+                  type={canGroup ? 'short' : 'default'}
+                  isHighlighted={selectedMessageId === message._id}
+                  withShowMore
+                />
+              {:else}
+                <Lazy>
+                  <ActivityMessagePresenter
+                    value={message}
+                    doc={object}
+                    hideLink={true}
+                    type={canGroup ? 'short' : 'default'}
+                    isHighlighted={selectedMessageId === message._id}
+                    withShowMore
+                  />
+                </Lazy>
+              {/if}
+            {/each}
+          </Grid>
         {/if}
-      {/each}
-    </Grid>
-  {/if}
+      </div>
+      {#if showCommenInput && !isNewestFirst}
+        <div class="ref-input oldest-first">
+          <ActivityExtensionComponent
+            kind="input"
+            {extensions}
+            props={{ object, boundary, focusIndex, withTypingInfo: true }}
+          />
+        </div>
+      {/if}
+    </svelte:fragment>
+  </Section>
 </div>
-{#if showCommenInput && !isNewestFirst}
-  <div class="ref-input oldest-first">
-    <ActivityExtensionComponent
-      kind="input"
-      {extensions}
-      props={{ object, boundary, focusIndex, withTypingInfo: true }}
-    />
-  </div>
-{/if}
 
 <style lang="scss">
   .ref-input {

plugins/activity-resources/src/components/ActivityFilter.svelte

@@ -14,16 +14,16 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
+  import { ActivityMessage, ActivityMessagesFilter } from '@hcengineering/activity'
   import { Doc, Ref, SortingOrder } from '@hcengineering/core'
   import { getResource } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
-  import { ActionIcon, eventToHTMLElement, Icon, Label, showPopup } from '@hcengineering/ui'
-  import { ActivityMessage, ActivityMessagesFilter } from '@hcengineering/activity'
+  import { Button, eventToHTMLElement, Icon, Label, showPopup } from '@hcengineering/ui'
+  import view from '@hcengineering/view'
 
   import activity from '../plugin'
   import FilterPopup from './FilterPopup.svelte'
   import IconClose from './icons/Close.svelte'
-  import IconFilter from './icons/Filter.svelte'
   import { sortActivityMessages } from '../activityMessagesUtils'
 
   export let messages: ActivityMessage[]
@@ -146,4 +146,6 @@
   {/if}
 {/if}
 <div class="w-4 min-w-4 max-w-4" />
-<ActionIcon icon={IconFilter} size={'medium'} action={handleOptions} />
+<div class="buttons-group small-gap pr-2">
+  <Button icon={view.icon.Configure} size={'small'} kind={'ghost'} on:click={handleOptions} />
+</div>

plugins/contact-resources/src/components/Members.svelte

@@ -68,7 +68,7 @@
   let preference: ViewletPreference | undefined
 </script>
 
-<Section label={contact.string.Members} icon={IconMembersOutline}>
+<Section id="members" label={contact.string.Members} icon={IconMembersOutline}>
   <svelte:fragment slot="header">
     <div class="buttons-group xsmall-gap">
       <ViewletSelector

plugins/love-resources/src/components/MeetingMinutesSection.svelte

@@ -33,15 +33,13 @@
 
 <Section label={love.string.MeetingMinutes} icon={love.icon.Cam}>
   <svelte:fragment slot="header">
-    <div class="flex-row-center gap-2 reverse">
-      <ViewletsSettingButton
-        viewletQuery={{ _id: love.viewlet.TableMeetingMinutesEmbedded }}
-        kind={'tertiary'}
-        bind:viewlet
-        bind:loading
-        bind:preference
-      />
-    </div>
+    <ViewletsSettingButton
+      viewletQuery={{ _id: love.viewlet.TableMeetingMinutesEmbedded }}
+      kind={'tertiary'}
+      bind:viewlet
+      bind:loading
+      bind:preference
+    />
   </svelte:fragment>
 
   <svelte:fragment slot="content">

plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte

@@ -250,37 +250,39 @@
         })
       )
     }
-    if (withSideMenu) {
-      optionalExtensions.push(
-        LeftMenuExtension.configure({
-          width: 20,
-          height: 20,
-          marginX: 8,
-          className: 'tiptap-left-menu',
-          icon: view.icon.Add,
-          iconProps: {
-            className: 'svg-tiny',
-            fill: 'currentColor'
-          },
-          items: [
-            ...(canEmbedImages ? [{ id: 'image', label: textEditor.string.Image, icon: view.icon.Image }] : []),
-            { id: 'table', label: textEditor.string.Table, icon: view.icon.Table2 },
-            { id: 'code-block', label: textEditor.string.CodeBlock, icon: view.icon.CodeBlock },
-            { id: 'separator-line', label: textEditor.string.SeparatorLine, icon: view.icon.SeparatorLine },
-            { id: 'todo-list', label: textEditor.string.TodoList, icon: view.icon.TodoList },
-            { id: 'drawing-board', label: textEditor.string.DrawingBoard, icon: IconScribble as any }
-          ],
-          handleSelect: handleLeftMenuClick
-        })
+  }
+
+  if (withSideMenu) {
+    optionalExtensions.push(
+      LeftMenuExtension.configure({
+        width: 20,
+        height: 20,
+        marginX: 8,
+        className: 'tiptap-left-menu',
+        icon: view.icon.Add,
+        iconProps: {
+          className: 'svg-tiny',
+          fill: 'currentColor'
+        },
+        items: [
+          ...(canEmbedImages ? [{ id: 'image', label: textEditor.string.Image, icon: view.icon.Image }] : []),
+          { id: 'table', label: textEditor.string.Table, icon: view.icon.Table2 },
+          { id: 'code-block', label: textEditor.string.CodeBlock, icon: view.icon.CodeBlock },
+          { id: 'separator-line', label: textEditor.string.SeparatorLine, icon: view.icon.SeparatorLine },
+          { id: 'todo-list', label: textEditor.string.TodoList, icon: view.icon.TodoList },
+          { id: 'drawing-board', label: textEditor.string.DrawingBoard, icon: IconScribble as any }
+        ],
+        handleSelect: handleLeftMenuClick
+      })
+    )
+  }
+
+  if (withInlineCommands) {
+    optionalExtensions.push(
+      InlineCommandsExtension.configure(
+        inlineCommandsConfig(handleLeftMenuClick, attachFile === undefined || !canEmbedImages ? ['image'] : [])
       )
-    }
-    if (withInlineCommands) {
-      optionalExtensions.push(
-        InlineCommandsExtension.configure(
-          inlineCommandsConfig(handleLeftMenuClick, attachFile === undefined || !canEmbedImages ? ['image'] : [])
-        )
-      )
-    }
+    )
   }
 
   let inputImage: HTMLInputElement

plugins/time-resources/src/components/text-editor/node-view/ToDoItemNodeView.svelte

@@ -41,10 +41,11 @@
     editor.off('selectionUpdate', handleSelectionUpdate)
   })
 
+  $: todoable = objectId !== undefined && objectClass !== undefined
   $: todoId = node.attrs.todoid as Ref<ToDo>
   $: userId = node.attrs.userid as Ref<Person>
   $: checked = node.attrs.checked ?? false
-  $: readonly = !editor.isEditable || objectId === undefined
+  $: readonly = !editor.isEditable || (!todoable && todoId != null)
 
   let todo: ToDo | undefined = undefined
   $: query.query(
@@ -59,7 +60,7 @@
   )
 
   async function syncTodo (todo: ToDo | undefined): Promise<void> {
-    if (todo !== undefined) {
+    if (todo !== undefined && todo.attachedTo === objectId && todo.attachedToClass === objectClass) {
       const todoChecked = todo.doneOn != null
       if (todo._id !== todoId || todo.user !== userId || todoChecked !== checked) {
         updateAttributes({
@@ -212,16 +213,18 @@
     class:hovered
     class:focused
   >
-    <div class="flex-center assignee" contenteditable="false">
-      <EmployeePresenter
-        value={userId}
-        disabled={readonly}
-        avatarSize={'card'}
-        shouldShowName={false}
-        shouldShowPlaceholder
-        onEmployeeEdit={handleAssigneeEdit}
-      />
-    </div>
+    {#if todoable}
+      <div class="flex-center assignee" contenteditable="false">
+        <EmployeePresenter
+          value={userId}
+          disabled={readonly}
+          avatarSize={'card'}
+          shouldShowName={false}
+          shouldShowPlaceholder
+          onEmployeeEdit={handleAssigneeEdit}
+        />
+      </div>
+    {/if}
 
     <div class="flex-center todo-check" contenteditable="false">
       <CheckBox {readonly} {checked} on:value={markDone} kind={'positive'} size={'medium'} />

plugins/time-resources/src/utils.ts

@@ -56,23 +56,24 @@ function isTodoableClass (objectClass: Ref<Class<Doc>>): boolean {
   }
 }
 
-function isTodoable (mode: TextEditorMode, objectClass?: Ref<Class<Doc>>): boolean {
-  return mode === 'full' && objectClass !== undefined && isTodoableClass(objectClass)
+function isTodoable (mode: TextEditorMode): boolean {
+  return mode === 'full'
 }
 
 export function createTodoItemExtension (mode: TextEditorMode, ctx: any): AnyExtension | undefined {
-  if (!isTodoable(mode, ctx.objectClass)) {
+  if (!isTodoable(mode)) {
     return
   }
 
   const { objectId, objectClass, objectSpace } = ctx
+  const componentProps = isTodoableClass(objectClass) ? { objectId, objectClass, objectSpace } : {}
 
   return TodoItemExtension.extend({
     addNodeView () {
       return SvelteNodeViewRenderer(ToDoItemNodeView, {
         contentAs: 'li',
         contentClass: 'todo-item',
-        componentProps: { objectId, objectClass, objectSpace }
+        componentProps
       })
     }
   }).configure({
@@ -83,7 +84,7 @@ export function createTodoItemExtension (mode: TextEditorMode, ctx: any): AnyExt
 }
 
 export function createTodoListExtension (mode: TextEditorMode, ctx: any): AnyExtension | undefined {
-  if (!isTodoable(mode, ctx.objectClass)) {
+  if (!isTodoable(mode)) {
     return
   }
 

plugins/view-resources/src/components/ViewletsSettingButton.svelte

@@ -95,9 +95,9 @@
     {/if}
     <ModernButton
       icon={view.icon.Configure}
-      label={view.string.Show}
       {kind}
       size={'small'}
+      iconSize={'small'}
       {disabled}
       {pressed}
       tooltip={{ label: view.string.CustomizeView, direction: 'bottom' }}

tests/sanity/tests/model/recruiting/common-recruiting-page.ts

@@ -14,7 +14,7 @@ export class CommonRecruitingPage extends CalendarPage {
   readonly inputComment = (): Locator => this.page.locator('div.text-input div.tiptap')
   readonly buttonSendComment = (): Locator => this.page.locator('g#Send')
   readonly textComment = (): Locator => this.page.locator('div.showMore-content p')
-  readonly inputAddAttachment = (): Locator => this.page.locator('div.antiSection #file')
+  readonly inputAddAttachment = (): Locator => this.page.locator('div.antiSection #file').first()
   readonly textAttachmentName = (): Locator => this.page.locator('div.attachment-container > a')
   readonly buttonCreateFirstReview = (): Locator => this.page.locator('span:has-text("Create review")')
   readonly buttonMoreActions = (): Locator =>

tests/sanity/tests/model/recruiting/company-details-page.ts

@@ -15,9 +15,12 @@ export class CompanyDetailsPage extends CommonRecruitingPage {
   readonly buttonLocation = (): Locator =>
     this.page.locator('//span[text()="Location"]/following-sibling::div[1]/button/span')
 
-  readonly addMemberButton = (): Locator => this.page.locator('[id="contact\\:string\\:AddMember"]')
+  readonly addMemberButton = (): Locator =>
+    this.page.locator('div.antiSection[id="members"]').locator('[id="contact\\:string\\:AddMember"]')
+
   readonly selectMember = (memberName: string): Locator => this.page.getByRole('button', { name: memberName })
-  readonly member = (memberName: string): Locator => this.page.getByRole('link', { name: memberName })
+  readonly member = (memberName: string): Locator =>
+    this.page.locator('div.antiSection[id="members"]').getByRole('link', { name: memberName })
 
   async checkCompany (data: NewCompany): Promise<void> {
     await expect(this.inputName()).toHaveValue(data.name)