UBERF-4514: option for order of activity, pinned first in CommentPopup (#4122)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>

models/chunter/src/index.ts

@@ -658,6 +658,11 @@ export function createModel (builder: Builder, options = { addApplication: true
     filter: chunter.filter.CommentsFilter
   })
 
+  builder.createDoc(activity.class.ActivityFilter, core.space.Model, {
+    label: chunter.string.FilterPinnedComments,
+    filter: chunter.filter.PinnedCommentsFilter
+  })
+
   builder.createDoc(activity.class.ActivityFilter, core.space.Model, {
     label: chunter.string.FilterBacklinks,
     filter: chunter.filter.BacklinksFilter

models/chunter/src/plugin.ts

@@ -77,6 +77,7 @@ export default mergeIds(chunterId, chunter, {
     Reactions: '' as IntlString,
     Emoji: '' as IntlString,
     FilterComments: '' as IntlString,
+    FilterPinnedComments: '' as IntlString,
     FilterBacklinks: '' as IntlString,
     DM: '' as IntlString,
     DMNotification: '' as IntlString,
@@ -114,6 +115,7 @@ export default mergeIds(chunterId, chunter, {
   },
   filter: {
     CommentsFilter: '' as Resource<(tx: DisplayTx, _class?: Ref<Doc>) => boolean>,
+    PinnedCommentsFilter: '' as Resource<(tx: DisplayTx, _class?: Ref<Doc>) => boolean>,
     BacklinksFilter: '' as Resource<(tx: DisplayTx, _class?: Ref<Doc>) => boolean>
   }
 })

packages/ui/src/components/MiniToggle.svelte

@@ -15,10 +15,12 @@
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
   import Label from './Label.svelte'
+  import { createEventDispatcher } from 'svelte'
 
   export let label: IntlString | undefined = undefined
   export let on: boolean = false
   export let disabled: boolean = false
+  const dispatch = createEventDispatcher()
 </script>
 
 <div class="flex-row-center">
@@ -34,6 +36,7 @@
       on:click={() => {
         if (!disabled) {
           on = !on
+          dispatch('change', on)
         }
       }}
     >

plugins/activity-assets/lang/en.json

@@ -15,6 +15,7 @@
     "Removed": "removed",
     "From": "from",
     "All": "All",
-    "Attributes": "Attributes"
+    "Attributes": "Attributes",
+    "NewestFirst": "Newest first"
   }
 }

plugins/activity-assets/lang/ru.json

@@ -15,6 +15,7 @@
     "Removed": "удалил(а)",
     "From": "из",
     "All": "Все",
-    "Attributes": "Атрибуты"
+    "Attributes": "Атрибуты",
+    "NewestFirst": "Сначала новые"
   }
 }

plugins/activity-resources/src/activity.ts

@@ -75,6 +75,7 @@ class ActivityImpl implements Activity {
   private readonly hiddenAttributes: Set<string>
   private prevObjectId: Ref<Doc> | undefined
   private prevObjectClass: Ref<Class<Doc>> | undefined
+  private prevSort: SortingOrder | undefined
   private editable: Map<Ref<Class<Doc>>, boolean> | undefined
 
   private ownTxes: Array<TxCUD<Doc>> = []
@@ -116,11 +117,12 @@ class ActivityImpl implements Activity {
     editable: Map<Ref<Class<Doc>>, boolean>
   ): boolean {
     this.editable = editable
-    if (objectId === this.prevObjectId && objectClass === this.prevObjectClass) {
+    if (objectId === this.prevObjectId && objectClass === this.prevObjectClass && sort === this.prevSort) {
       return false
     }
     this.prevObjectClass = objectClass
     this.prevObjectId = objectId
+    this.prevSort = sort
     let isAttached = false
 
     isAttached = this.hierarchy.isDerived(objectClass, core.class.AttachedDoc)

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import activity, { ActivityExtension, DisplayTx, TxViewlet } from '@hcengineering/activity'
   import core, { Class, Doc, Ref, SortingOrder } from '@hcengineering/core'
-  import notification, { DocUpdateTx, DocUpdates, Writable } from '@hcengineering/notification'
+  import notification, { DocUpdates, DocUpdateTx, Writable } from '@hcengineering/notification'
   import { getResource } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Grid, Label, Lazy, Spinner } from '@hcengineering/ui'
@@ -84,11 +84,12 @@
   }
 
   let loading = false
-
+  let activityOrderNewestFirst = JSON.parse(localStorage.getItem('activity-newest-first') ?? 'false')
   function updateTxes (
     objectId: Ref<Doc>,
     objectClass: Ref<Class<Doc>>,
-    editableMap: Map<Ref<Class<Doc>>, boolean> | undefined
+    editableMap: Map<Ref<Class<Doc>>, boolean> | undefined,
+    activityOrder: boolean
   ): void {
     loading = true
     const res = activityQuery.update(
@@ -103,7 +104,7 @@
           }
         }
       },
-      SortingOrder.Ascending,
+      activityOrder ? SortingOrder.Descending : SortingOrder.Ascending,
       editableMap ?? new Map()
     )
     if (!res) {
@@ -111,7 +112,7 @@
     }
   }
 
-  $: updateTxes(object._id, object._class, editableMap)
+  $: updateTxes(object._id, object._class, editableMap, activityOrderNewestFirst)
 
   let filtered: DisplayTx[] = []
 
@@ -152,6 +153,7 @@
     on:update={(e) => {
       filtered = e.detail
     }}
+    bind:activityOrderNewestFirst
   />
 </div>
 <div class="p-activity select-text" id={activity.string.Activity}>

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

@@ -31,10 +31,12 @@
   const client = getClient()
   let filters: ActivityFilter[] = []
   const saved = localStorage.getItem('activity-filter')
+  export let activityOrderNewestFirst = false
   let selectedFiltersRefs: Ref<Doc>[] | 'All' =
     saved !== null && saved !== undefined ? (JSON.parse(saved) as Ref<Doc>[] | 'All') : 'All'
   let selectedFilters: ActivityFilter[] = []
   $: localStorage.setItem('activity-filter', JSON.stringify(selectedFiltersRefs))
+  $: localStorage.setItem('activity-newest-first', JSON.stringify(activityOrderNewestFirst))
   client.findAll(activity.class.ActivityFilter, {}).then((res) => {
     filters = res
     if (saved !== null && saved !== undefined) {
@@ -71,6 +73,10 @@
       () => {},
       (res) => {
         if (res === undefined) return
+        if (res.action === 'toggle') {
+          activityOrderNewestFirst = res.value
+          return
+        }
         const selected = res.value as Ref<Doc>[]
         const isAll = selected.length === filters.length || selected.length === 0
         if (res.action === 'select') selectedFiltersRefs = isAll ? 'All' : selected
@@ -104,6 +110,7 @@
   $: updateFilterActions(txes, filters, selectedFiltersRefs)
 </script>
 
+<div class="w-4 min-w-4 max-w-4" />
 {#if selectedFiltersRefs === 'All'}
   <div class="antiSection-header__tag highlight">
     <Label label={activityPlg.string.All} />

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

@@ -15,14 +15,14 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte'
   import { IntlString } from '@hcengineering/platform'
-  import { Label, resizeObserver, CheckBox } from '@hcengineering/ui'
+  import { Label, resizeObserver, CheckBox, MiniToggle } from '@hcengineering/ui'
   import { Doc, Ref } from '@hcengineering/core'
   import { ActivityFilter } from '@hcengineering/activity'
   import activity from '../plugin'
 
   export let selectedFiltersRefs: Ref<Doc>[] | 'All' = 'All'
   export let filters: ActivityFilter[] = []
-
+  let activityOrderNewestFirst = JSON.parse(localStorage.getItem('activity-newest-first') ?? 'false')
   const dispatch = createEventDispatcher()
 
   interface ActionMenu {
@@ -126,6 +126,15 @@
   <div class="ap-space" />
   <div class="ap-scroll">
     <div class="ap-box" bind:this={popup}>
+      <div class="ml-3 mt-2 mb-2 mr-3">
+        <MiniToggle
+          bind:on={activityOrderNewestFirst}
+          label={activity.string.NewestFirst}
+          on:change={() => {
+            dispatch('update', { action: 'toggle', value: activityOrderNewestFirst })
+          }}
+        />
+      </div>
       <!-- svelte-ignore a11y-mouse-events-have-key-events -->
       {#each menu as item, i}
         <button

plugins/activity/src/index.ts

@@ -149,7 +149,8 @@ export default plugin(activityId, {
     Unset: '' as IntlString,
     Added: '' as IntlString,
     From: '' as IntlString,
-    Removed: '' as IntlString
+    Removed: '' as IntlString,
+    NewestFirst: '' as IntlString
   },
   mixin: {
     ExtraActivityComponent: '' as Ref<Class<ExtraActivityComponent>>

plugins/chunter-assets/lang/en.json

@@ -68,6 +68,7 @@
     "NoResults": "No results",
     "CopyLink": "Copy link",
     "FilterComments": "Comments",
+    "FilterPinnedComments": "Pinned comments",
     "FilterBacklinks": "Backlinks",
     "DM": "Direct message",
     "DMNotification": "Sent you a message",

plugins/chunter-assets/lang/ru.json

@@ -68,6 +68,7 @@
     "NoResults": "Нет результатов",
     "CopyLink": "Копировать ссылку",
     "FilterComments": "Комментарии",
+    "FilterPinnedComments": "Закрепленные комментарии",
     "FilterBacklinks": "Упоминания",
     "DM": "Личное сообщение",
     "DMNotification": "Отправил сообщение",

plugins/chunter-resources/src/components/CommentPopup.svelte

@@ -18,28 +18,29 @@
 
   import chunter, { Comment } from '@hcengineering/chunter'
   import { createQuery } from '@hcengineering/presentation'
-  import { Label, resizeObserver, Spinner, closeTooltip, Lazy } from '@hcengineering/ui'
+  import { Label, resizeObserver, Spinner, closeTooltip, Lazy, MiniToggle } from '@hcengineering/ui'
   import { DocNavLink, ObjectPresenter } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
   import CommentInput from './CommentInput.svelte'
   import CommentPresenter from './CommentPresenter.svelte'
+  import activity from '@hcengineering/activity'
 
   export let objectId: Ref<Doc>
   export let object: Doc
   export let withInput: boolean = true
 
   let loading = true
-
+  let activityOrderNewestFirst = JSON.parse(localStorage.getItem('activity-newest-first') ?? 'false')
   let comments: Comment[] = []
   const query = createQuery()
   $: query.query(
     chunter.class.Comment,
     { attachedTo: objectId },
     (res) => {
-      comments = res
+      comments = res.sort((c) => (c?.pinned ? -1 : 1))
       loading = false
     },
-    { sort: { modifiedOn: SortingOrder.Ascending } }
+    { sort: { modifiedOn: activityOrderNewestFirst ? SortingOrder.Descending : SortingOrder.Ascending } }
   )
   const dispatch = createEventDispatcher()
   let commentMode = false
@@ -68,6 +69,7 @@
     <div class="fs-title mr-2">
       <Label label={chunter.string.Comments} />
     </div>
+    <MiniToggle bind:on={activityOrderNewestFirst} label={activity.string.NewestFirst} />
     <DocNavLink {object}>
       <ObjectPresenter _class={object._class} objectId={object._id} value={object} />
     </DocNavLink>

plugins/chunter-resources/src/components/CommentPresenter.svelte

@@ -20,8 +20,9 @@
   import { Avatar, personAccountByIdStore, personByIdStore } from '@hcengineering/contact-resources'
   import { IdMap, Ref } from '@hcengineering/core'
   import { MessageViewer, getClient } from '@hcengineering/presentation'
-  import { ShowMore, TimeSince } from '@hcengineering/ui'
+  import { Icon, ShowMore, TimeSince } from '@hcengineering/ui'
   import { LinkPresenter, ObjectPresenter } from '@hcengineering/view-resources'
+  import view from '@hcengineering/view'
 
   export let value: Comment
   export let inline: boolean = false
@@ -81,7 +82,14 @@
           <div class="fs-title">
             {#if employee}{getName(client.getHierarchy(), employee)}{/if}
           </div>
-          <div class="content-dark-color ml-4"><TimeSince value={value.modifiedOn} /></div>
+          <div class="content-dark-color ml-4 flex-row-center">
+            {#if value.pinned}
+              <Icon icon={view.icon.Pin} size={'small'} fill="#3265cb" />
+            {/if}
+            <div class="ml-1">
+              <TimeSince value={value.modifiedOn} />
+            </div>
+          </div>
         </div>
         <ShowMore fixed>
           <MessageViewer message={value.message} />

plugins/chunter-resources/src/index.ts

@@ -21,7 +21,8 @@ import chunter, {
   type ChunterSpace,
   type DirectMessage,
   type Message,
-  type ThreadMessage
+  type ThreadMessage,
+  type Comment
 } from '@hcengineering/chunter'
 import core, {
   type Data,
@@ -274,6 +275,10 @@ export function commentsFilter (tx: DisplayTx, _class?: Ref<Doc>): boolean {
   return tx.tx.objectClass === chunter.class.Comment
 }
 
+export function pinnedCommentsFilter (tx: DisplayTx, _class?: Ref<Doc>): boolean {
+  return tx.tx.objectClass === chunter.class.Comment && (tx.doc as Comment)?.pinned === true
+}
+
 export function backlinksFilter (tx: DisplayTx, _class?: Ref<Doc>): boolean {
   return tx.tx.objectClass === chunter.class.Backlink
 }
@@ -281,6 +286,7 @@ export function backlinksFilter (tx: DisplayTx, _class?: Ref<Doc>): boolean {
 export default async (): Promise<Resources> => ({
   filter: {
     CommentsFilter: commentsFilter,
+    PinnedCommentsFilter: pinnedCommentsFilter,
     BacklinksFilter: backlinksFilter
   },
   component: {