Fixes display of custom attributes in ListView (#9639)

Author: SasLord

models/card/src/index.ts

@@ -170,7 +170,7 @@ export class TFavoriteCard extends TPreference implements FavoriteCard {
 export * from './migration'
 
 const listConfig: (BuildModelKey | string)[] = [
-  { key: '', props: { showParent: true } },
+  { key: '' },
   { key: '_class' },
   { key: '', displayProps: { grow: true } },
   {
@@ -180,14 +180,13 @@ const listConfig: (BuildModelKey | string)[] = [
     props: {
       showType: false
     },
-    displayProps: { key: 'tags', fixed: 'right' }
+    displayProps: { optional: true }
   },
   {
     key: '',
     presenter: card.component.LabelsPresenter,
     label: card.string.Labels,
-    props: { fullSize: true },
-    displayProps: { fixed: 'right', key: 'labels' }
+    props: { fullSize: true }
   },
   {
     key: 'modifiedOn',

models/card/src/migration.ts

@@ -14,7 +14,7 @@
 //
 
 import { type Card, cardId, DOMAIN_CARD } from '@hcengineering/card'
-import core, { type Ref, TxOperations, type Client, type Data, type Doc } from '@hcengineering/core'
+import core, { DOMAIN_MODEL, type Ref, TxOperations, type Client, type Data, type Doc } from '@hcengineering/core'
 import {
   tryMigrate,
   tryUpgrade,
@@ -23,7 +23,7 @@ import {
   type MigrationUpgradeClient,
   createOrUpdate
 } from '@hcengineering/model'
-import view from '@hcengineering/view'
+import view, { type Viewlet } from '@hcengineering/view'
 import card from '.'
 import tags from '@hcengineering/tags'
 
@@ -44,13 +44,18 @@ export const cardOperation: MigrateOperation = {
         state: 'migrate-childs-spaces',
         mode: 'upgrade',
         func: migrateChildsSpaces
+      },
+      {
+        state: 'update-custom-fields-displayprops',
+        mode: 'upgrade',
+        func: updateCustomFieldsDisplayProps
       }
     ])
   },
   async upgrade (state: Map<string, Set<string>>, client: () => Promise<MigrationUpgradeClient>, mode): Promise<void> {
     await tryUpgrade(mode, state, client, cardId, [
       {
-        state: 'migrateViewlets-v4',
+        state: 'migrateViewlets-v5',
         func: migrateViewlets
       },
       {
@@ -302,3 +307,24 @@ async function defaultLabels (client: Client): Promise<void> {
     card.label.NewMessages
   )
 }
+
+async function updateCustomFieldsDisplayProps (client: MigrationClient): Promise<void> {
+  const viewlets = await client.find<Viewlet>(DOMAIN_MODEL, { _class: view.class.Viewlet })
+
+  for (const viewlet of viewlets) {
+    if (viewlet.config !== undefined && Array.isArray(viewlet.config)) {
+      let hasChanges = false
+      const newConfig = viewlet.config.map((item: any) => {
+        if (typeof item === 'string' && item.startsWith('custom')) {
+          hasChanges = true
+          return { key: item, displayProps: { optional: true } }
+        }
+        return item
+      })
+
+      if (hasChanges) {
+        await client.update(DOMAIN_MODEL, { _id: viewlet._id }, { config: newConfig })
+      }
+    }
+  }
+}

packages/theme/styles/components.scss

@@ -2504,6 +2504,8 @@
   }
   .panel-trigger > * { pointer-events: none; }
 }
+// Custom on the ListView
+.list-container .listGrid .yesno-container { flex-shrink: 0; }
 // Labels on the ListView
 .list-container .listitems-container,
 .list-container .listitems-container:hover,

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

@@ -132,7 +132,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div {id} bind:this={container} class="min-w-0 h-full" class:w-full={width === '100%'} style:flex-shrink={shrink}>
+<div {id} bind:this={container} class="min-w-0" class:w-full={width === '100%'} style:flex-shrink={shrink}>
   {#if $$slots.content}
     <div
       class="w-full h-full flex-streatch"

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

@@ -33,7 +33,7 @@
 
   const query = createQuery()
 
-  query.query(
+  $: query.query(
     core.class.Enum,
     {
       _id: type.of

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

@@ -111,9 +111,10 @@
         if (param.length === 0) {
           result.push(getObjectConfig(viewlet.attachTo, param))
         } else {
+          const paramValue = param.startsWith('custom') ? { key: param, displayProps: { optional: true } } : param
           const attrCfg: AttributeConfig = {
             type: 'attribute',
-            value: param,
+            value: paramValue,
             enabled: true,
             label: getKeyLabel(client, viewlet.attachTo, param, lookup),
             _class: viewlet.attachTo,
@@ -201,9 +202,12 @@
         result.push(newValue)
       }
     } else {
+      const isCustomAttribute = attribute.name.startsWith('custom')
+      const attributeValue = isCustomAttribute ? { key: value, displayProps: { optional: true } } : value
+
       const newValue: AttributeConfig = {
         type: 'attribute',
-        value: extraProps ? { ...extraProps, key: value } : value,
+        value: extraProps != null ? { ...extraProps, key: value } : attributeValue,
         label: attribute.label,
         enabled: false,
         _class: attribute.attributeOf,
@@ -272,7 +276,13 @@
         ((p.type === 'divider' && typeof p.value === 'object' && p.value.displayProps?.grow) ||
           (p.type === 'attribute' && (p as AttributeConfig).enabled))
     )
-    const config = configValues.map((p) => p.value as string | BuildModelKey)
+    const config = configValues.map((p) => {
+      const value = p.value as string | BuildModelKey
+      if (typeof value === 'string' && value.startsWith('custom')) {
+        return { key: value, displayProps: { optional: true } }
+      }
+      return value
+    })
     const preference = preferences.find((p) => p.attachedTo === viewletId)
     if (preference !== undefined) {
       await client.update(preference, {

plugins/view-resources/src/components/list/ListItem.svelte

@@ -22,7 +22,6 @@
   import view from '../../plugin'
   import GrowPresenter from './GrowPresenter.svelte'
   import ListPresenter from './ListPresenter.svelte'
-  import { restrictionStore } from '../../utils'
 
   export let docObject: Doc
   export let model: AttributeModel[]