Activity: filters (#2395)

* Activity: filters
Signed-off-by: Alexander Platov <sas_lord@mail.ru>

dev/prod/package.json

@@ -71,7 +71,7 @@
     "@hcengineering/contact-assets": "~0.6.0",
     "@hcengineering/activity": "~0.6.0",
     "@hcengineering/activity-assets": "~0.6.0",
-    "@hcengineering/activity-resources": "~0.6.0",
+    "@hcengineering/activity-resources": "~0.6.1",
     "@hcengineering/automation": "~0.6.0",
     "@hcengineering/automation-assets": "~0.6.0",
     "@hcengineering/automation-resources": "~0.6.0",

models/activity/src/index.ts

@@ -13,12 +13,12 @@
 // limitations under the License.
 //
 
-import type { TxViewlet } from '@hcengineering/activity'
+import type { ActivityFilter, DisplayTx, TxViewlet } from '@hcengineering/activity'
 import activity from '@hcengineering/activity'
 import core, { Class, Doc, DocumentQuery, DOMAIN_MODEL, Ref, Tx } from '@hcengineering/core'
 import { Builder, Model } from '@hcengineering/model'
 import { TDoc } from '@hcengineering/model-core'
-import type { Asset, IntlString } from '@hcengineering/platform'
+import type { Asset, IntlString, Resource } from '@hcengineering/platform'
 import { AnyComponent } from '@hcengineering/ui'
 
 @Model(activity.class.TxViewlet, core.class.Doc, DOMAIN_MODEL)
@@ -36,6 +36,12 @@ export class TTxViewlet extends TDoc implements TxViewlet {
   hideOnRemove!: boolean
 }
 
+@Model(activity.class.ActivityFilter, core.class.Class, DOMAIN_MODEL)
+export class TActivityFilter extends TDoc implements ActivityFilter {
+  label!: IntlString
+  filter!: Resource<(txes: DisplayTx[]) => DisplayTx[]>
+}
+
 export function createModel (builder: Builder): void {
-  builder.createModel(TTxViewlet)
+  builder.createModel(TTxViewlet, TActivityFilter)
 }

models/attachment/src/index.ts

@@ -96,6 +96,11 @@ export function createModel (builder: Builder): void {
     attachment.ids.TxAttachmentCreate
   )
 
+  builder.createDoc(activity.class.ActivityFilter, core.space.Model, {
+    label: attachment.string.FilterAttachments,
+    filter: attachment.filter.AttachmentsFilter
+  })
+
   builder.createDoc(
     view.class.ActionCategory,
     core.space.Model,

models/attachment/src/plugin.ts

@@ -13,11 +13,11 @@
 // limitations under the License.
 //
 
-import type { TxViewlet } from '@hcengineering/activity'
+import type { DisplayTx, TxViewlet } from '@hcengineering/activity'
 import { attachmentId } from '@hcengineering/attachment'
 import attachment from '@hcengineering/attachment-resources/src/plugin'
 import type { Ref } from '@hcengineering/core'
-import type { IntlString } from '@hcengineering/platform'
+import type { IntlString, Resource } from '@hcengineering/platform'
 import { mergeIds } from '@hcengineering/platform'
 import type { AnyComponent } from '@hcengineering/ui'
 import type { ActionCategory } from '@hcengineering/view'
@@ -38,7 +38,8 @@ export default mergeIds(attachmentId, attachment, {
     SavedAttachments: '' as IntlString,
     Description: '' as IntlString,
     PinAttachment: '' as IntlString,
-    UnPinAttachment: '' as IntlString
+    UnPinAttachment: '' as IntlString,
+    FilterAttachments: '' as IntlString
   },
   ids: {
     TxAttachmentCreate: '' as Ref<TxViewlet>
@@ -48,5 +49,8 @@ export default mergeIds(attachmentId, attachment, {
   },
   category: {
     Attachments: '' as Ref<ActionCategory>
+  },
+  filter: {
+    AttachmentsFilter: '' as Resource<(txes: DisplayTx[]) => DisplayTx[]>
   }
 })

models/chunter/src/index.ts

@@ -473,6 +473,16 @@ export function createModel (builder: Builder, options = { addApplication: true
     chunter.ids.TxBacklinkRemove
   )
 
+  builder.createDoc(activity.class.ActivityFilter, core.space.Model, {
+    label: chunter.string.FilterComments,
+    filter: chunter.filter.CommentsFilter
+  })
+
+  builder.createDoc(activity.class.ActivityFilter, core.space.Model, {
+    label: chunter.string.FilterBacklinks,
+    filter: chunter.filter.BacklinksFilter
+  })
+
   builder.mixin(chunter.class.ChunterMessage, core.class.Class, view.mixin.ClassFilters, {
     filters: ['space', 'modifiedOn', 'createBy', '_class']
   })

models/chunter/src/plugin.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 //
 
-import type { TxViewlet } from '@hcengineering/activity'
+import type { DisplayTx, TxViewlet } from '@hcengineering/activity'
 import { Channel, chunterId } from '@hcengineering/chunter'
 import chunter from '@hcengineering/chunter-resources/src/plugin'
 import type { Ref, Space } from '@hcengineering/core'
@@ -67,7 +67,9 @@ export default mergeIds(chunterId, chunter, {
     SavedMessages: '' as IntlString,
     ThreadMessage: '' as IntlString,
     Reactions: '' as IntlString,
-    Emoji: '' as IntlString
+    Emoji: '' as IntlString,
+    FilterComments: '' as IntlString,
+    FilterBacklinks: '' as IntlString
   },
   viewlet: {
     Chat: '' as Ref<ViewletDescriptor>
@@ -89,5 +91,9 @@ export default mergeIds(chunterId, chunter, {
   },
   function: {
     ChunterBrowserVisible: '' as Resource<(spaces: Space[]) => boolean>
+  },
+  filter: {
+    CommentsFilter: '' as Resource<(txes: DisplayTx[]) => DisplayTx[]>,
+    BacklinksFilter: '' as Resource<(txes: DisplayTx[]) => DisplayTx[]>
   }
 })

packages/panel/src/components/Panel.svelte

@@ -87,7 +87,7 @@
     {#if $$slots.header}
       <div class="header-row between">
         {#if $$slots.header}<slot name="header" />{/if}
-        <div class="buttons-group xsmall-gap ml-4" style:align-self={'flex-start'}>
+        <div class="buttons-group xsmall-gap ml-4" style:align-self={'flex-end'}>
           <slot name="tools" />
         </div>
       </div>

packages/theme/styles/_layouts.scss

@@ -527,6 +527,7 @@ input.search {
 .min-h-7 { min-height: 1.75rem; }
 .min-h-30 { min-height: 7.5rem; }
 .min-h-60 { min-height: 15rem; }
+.max-w-2 { max-width: .5rem; }
 .max-w-9 { max-width: 2.25rem; }
 .max-w-30 { max-width: 7.5rem; }
 .max-w-60 { max-width: 15rem; }

packages/ui/src/components/CheckBox.svelte

@@ -34,7 +34,7 @@
   }
 </script>
 
-<label class="checkbox" class:circle class:primary class:checked>
+<label class="checkbox" class:circle class:primary class:readonly class:checked>
   <input class="chBox" disabled={readonly} type="checkbox" bind:checked on:change={handleValueChanged} />
   <svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     {#if checked}
@@ -71,6 +71,10 @@
       background-color: var(--primary-bg-color);
       border-color: transparent;
     }
+    &.readonly.checked {
+      background-color: var(--dark-color);
+      border-color: transparent;
+    }
 
     .chBox {
       position: absolute;
@@ -94,8 +98,8 @@
       &:not(:disabled) + .checkSVG {
         cursor: pointer;
       }
-      &:disabled + .checkSVG {
-        filter: grayscale(70%);
+      &:disabled + .checkSVG .check {
+        fill: var(--content-color);
       }
     }
     .checkSVG {

packages/ui/src/components/PopupInstance.svelte

@@ -45,7 +45,8 @@
       maxWidth: '',
       maxHeight: '',
       minWidth: '',
-      minHeight: ''
+      minHeight: '',
+      transform: ''
     },
     showOverlay: false,
     direction: 'bottom'

plugins/activity-assets/lang/en.json

@@ -13,6 +13,7 @@
     "CollectionUpdated": "Update {collection}",
     "Added": "added",
     "Removed": "removed",
-    "From": "from"
+    "From": "from",
+    "All": "All"
   }
 }

plugins/activity-assets/lang/ru.json

@@ -13,6 +13,7 @@
     "CollectionUpdated": "Обновлена {collection}",
     "Added": "добавила(а)",
     "Removed": "удалил(а)",
-    "From": "из"
+    "From": "из",
+    "All": "Все"
   }
 }

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

@@ -13,28 +13,39 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import activity, { TxViewlet } from '@hcengineering/activity'
+  import activity, { TxViewlet, ActivityFilter } from '@hcengineering/activity'
   import chunter from '@hcengineering/chunter'
   import core, { Class, Doc, Ref, SortingOrder } from '@hcengineering/core'
-  import { getResource } from '@hcengineering/platform'
+  import { getResource, IntlString } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import notification from '@hcengineering/notification'
-  import { Component, Grid, IconActivity, Label, Scroller } from '@hcengineering/ui'
+  import { Component, Grid, IconActivity, Label, Scroller, Button, showPopup } from '@hcengineering/ui'
   import { ActivityKey, activityKey, DisplayTx, newActivity } from '../activity'
   import TxView from './TxView.svelte'
   import { filterCollectionTxes } from './utils'
   import { Writable } from 'svelte/store'
+  import view from '@hcengineering/view'
+  import activityPlg from '../plugin'
+  import FilterPopup from './FilterPopup.svelte'
 
   export let object: Doc
   export let integrate: boolean = false
   export let showCommenInput: boolean = true
   export let transparent: boolean = false
 
   let txes: DisplayTx[] = []
+  let txesF: DisplayTx[] = []
 
   const client = getClient()
   const attrs = client.getHierarchy().getAllAttributes(object._class)
 
+  let filterLabel: IntlString = activityPlg.string.All
+  const filters: ActivityFilter[] = []
+  const saved = localStorage.getItem('activity-filter')
+  let selectedFilter: Ref<Doc> | 'All' = saved !== null && saved !== undefined ? JSON.parse(saved) : 'All'
+  $: localStorage.setItem('activity-filter', JSON.stringify(selectedFilter))
+  client.findAll(activity.class.ActivityFilter, {}).then((res) => res.map((it) => filters.push(it)))
+
   const activityQuery = newActivity(client, attrs)
   getResource(notification.function.GetNotificationClient).then((res) => {
     lastViews = res().getLastViews()
@@ -82,6 +93,25 @@
     }
     return -1
   }
+
+  let optionsBtn: HTMLButtonElement
+  const handleOptions = () => {
+    showPopup(FilterPopup, { selectedFilter, filters }, optionsBtn, (res) => {
+      if (res === undefined) return
+      if (res.action === 'select') selectedFilter = res.value as Ref<Doc> | 'All'
+    })
+  }
+
+  $: if (selectedFilter || txes) {
+    const filter = filters.find((it) => it._id === selectedFilter)
+    if (filter) {
+      filterLabel = filter.label
+      getResource(filter.filter).then((result) => (txesF = result(txes)))
+    } else {
+      filterLabel = activityPlg.string.All
+      txesF = txes
+    }
+  }
 </script>
 
 {#if !integrate || transparent}
@@ -96,9 +126,9 @@
   <div class="flex-col flex-grow min-h-0" class:background-accent-bg-color={!transparent}>
     <Scroller>
       <div class="p-10 select-text" id={activity.string.Activity}>
-        {#if txes}
+        {#if txesF}
           <Grid column={1} rowGap={1.5}>
-            {#each txes as tx, i}
+            {#each txesF as tx, i}
               <TxView {tx} {viewlets} isNew={newTxPos === i} />
             {/each}
           </Grid>
@@ -117,16 +147,25 @@
   <div class="antiSection-header mt-6">
     <div class="antiSection-header__icon"><IconActivity size={'small'} /></div>
     <span class="antiSection-header__title"><Label label={activity.string.Activity} /></span>
+    <span class="dark-color text-md"><Label label={filterLabel} /></span>
+    <div class="w-2 min-w-2 max-w-2" />
+    <Button
+      bind:input={optionsBtn}
+      icon={view.icon.ViewButton}
+      kind={'transparent'}
+      shape={'circle'}
+      on:click={handleOptions}
+    />
   </div>
   {#if showCommenInput}
     <div class="ref-input">
       <Component is={chunter.component.CommentInput} props={{ object }} />
     </div>
   {/if}
   <div class="p-activity select-text" id={activity.string.Activity}>
-    {#if txes}
+    {#if txesF}
       <Grid column={1} rowGap={1.5}>
-        {#each txes as tx, i}
+        {#each txesF as tx, i}
           <TxView {tx} {viewlets} isNew={newTxPos === i} />
         {/each}
       </Grid>