improve fixed column (#2491)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/login-resources/src/utils.ts

@@ -220,7 +220,6 @@ export async function getWorkspaces (): Promise<Workspace[]> {
       body: serialize(request)
     })
     const result: Response<any> = await response.json()
-    console.log(result)
     if (result.error != null) {
       throw new PlatformError(result.error)
     }

plugins/tracker-resources/src/components/issues/IssuesList.svelte

@@ -86,8 +86,6 @@
   let currentTeam: Team | undefined
   let personPresenter: AttributeModel
   let isCollapsedMap: Record<any, boolean> = {}
-  let varsStyle: string = ''
-  let propsWidth: Record<string, number> = { groupBy: 0 }
   let itemModels: AttributeModel[]
   let isFilterUpdate = false
   let groupedIssuesBeforeFilter = groupedIssues
@@ -196,20 +194,9 @@
     personPresenter = p
   })
   $: buildModel({ client, _class, keys: itemsConfig, lookup: options.lookup }).then((res) => (itemModels = res))
-  $: if (itemModels) {
-    for (const item of itemModels) if (item.props?.fixed !== undefined) propsWidth[item.key] = 0
-  }
-  $: if (propsWidth) {
-    varsStyle = ''
-    for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
-  }
-
-  const checkWidth = (key: string, result: CustomEvent): void => {
-    if (result !== undefined) propsWidth[key] = result.detail
-  }
 </script>
 
-<div class="issueslist-container" style={varsStyle}>
+<div class="issueslist-container">
   {#each categories as category}
     {@const items = groupedIssues[category] ?? []}
     {@const limited = limitGroup(category, groupedIssues, categoryLimit) ?? []}
@@ -217,12 +204,7 @@
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="flex-between categoryHeader row" on:click={() => handleCollapseCategory(toCat(category))}>
         <div class="flex-row-center gap-2 clear-mins">
-          <FixedColumn
+          <FixedColumn key={'issuelist_groupBy'} justify={'left'}>
-            width={propsWidth.groupBy}
-            key={'groupBy'}
-            justify={'left'}
-            on:update={(result) => checkWidth('groupBy', result)}
-          >
             {#if groupByKey === 'assignee' && personPresenter}
               <svelte:component
                 this={personPresenter.presenter}
@@ -256,12 +238,7 @@
               />
             {/if}
           </FixedColumn>
-          <FixedColumn
+          <FixedColumn key={'issuelist_statistics'} justify={'left'}>
-            width={propsWidth.statistics}
-            key={'statistics'}
-            justify={'left'}
-            on:update={(result) => checkWidth('statistics', result)}
-          >
             <IssueStatistics issues={groupedIssues[category]} />
           </FixedColumn>
           {#if limited.length < items.length}
@@ -303,10 +280,6 @@
               checked={selectedObjectIdsSet.has(docObject._id)}
               {statuses}
               {currentTeam}
-              {propsWidth}
-              on:fitting={(ev) => {
-                if (ev.detail !== undefined) propsWidth = ev.detail
-              }}
               on:check={(ev) => dispatch('check', { docs: ev.detail.docs, value: ev.detail.value })}
               on:contextmenu={(event) =>
                 handleMenuOpened(

plugins/tracker-resources/src/components/issues/IssuesListItem.svelte

@@ -32,17 +32,9 @@
   export let selected: boolean
   export let statuses: WithLookup<IssueStatus>[]
   export let currentTeam: Team | undefined
-  export let propsWidth: Record<string, number>
 
   const dispatch = createEventDispatcher()
 
-  const checkWidth = (key: string, result: CustomEvent): void => {
-    if (result !== undefined) {
-      propsWidth[key] = result.detail
-      dispatch('fitting', propsWidth)
-    }
-  }
-
   $: compactMode = $deviceInfo.twoRows
 </script>
 
@@ -78,12 +70,7 @@
       <svelte:component this={attributeModel.presenter} />
     {:else if (!groupByKey || attributeModel.props?.excludeByKey !== groupByKey) && !(attributeModel.props?.optional && compactMode)}
       {#if attributeModel.props?.fixed}
-        <FixedColumn
+        <FixedColumn key={`issue_${attributeModel.key}`} justify={attributeModel.props.fixed}>
-          width={propsWidth[attributeModel.key]}
-          key={attributeModel.key}
-          justify={attributeModel.props.fixed}
-          on:update={(result) => checkWidth(attributeModel.key, result)}
-        >
           <svelte:component
             this={attributeModel.presenter}
             value={getObjectValue(attributeModel.key, docObject) ?? ''}

plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte

@@ -70,16 +70,6 @@
   function showContextMenu (ev: MouseEvent, object: Issue) {
     showPopup(ContextMenu, { object }, getEventPositionElement(ev))
   }
-
-  let varsStyle: string = ''
-  const propsWidth: Record<string, number> = { issue: 0 }
-  $: if (propsWidth) {
-    varsStyle = ''
-    for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
-  }
-  const checkWidth = (key: string, result: CustomEvent): void => {
-    if (result !== undefined) propsWidth[key] = result.detail
-  }
 </script>
 
 <ActionContext
@@ -96,7 +86,6 @@
     class:is-dragging={index === draggingIndex}
     class:is-dragged-over-up={draggingIndex !== null && index < draggingIndex && index === hoveringIndex}
     class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex}
-    style={varsStyle}
     animate:flip={{ duration: 400 }}
     draggable={true}
     on:click|self={openIssueCall}
@@ -113,12 +102,7 @@
     <div class="flex-row-center ml-6 clear-mins gap-2">
       <PriorityEditor value={issue} isEditable kind={'list'} size={'small'} justify={'center'} />
       <span class="issuePresenter" on:click={openIssueCall}>
-        <FixedColumn
+        <FixedColumn key={'subissue_issue'} justify={'left'}>
-          width={propsWidth.issue}
-          key={'issue'}
-          justify={'left'}
-          on:update={(result) => checkWidth('issue', result)}
-        >
           {#if currentTeam}
             {getIssueId(currentTeam, issue)}
           {/if}

plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte

@@ -32,16 +32,6 @@
   }
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
-
-  let varsStyle: string = ''
-  const propsWidth: Record<string, number> = { issue: 0, estimation: 0, assignee: 0 }
-  $: if (propsWidth) {
-    varsStyle = ''
-    for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
-  }
-  const checkWidth = (key: string, result: CustomEvent): void => {
-    if (result !== undefined) propsWidth[key] = result.detail
-  }
 </script>
 
 <ListView count={issues.length}>
@@ -50,7 +40,6 @@
     {@const currentTeam = teams.get(issue.space)}
     <div
       class="flex-between row"
-      style={varsStyle}
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, issue)}
       on:mouseover={() => {
         listProvider.updateFocus(issue)
@@ -61,12 +50,7 @@
     >
       <div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
         <span class="issuePresenter">
-          <FixedColumn
+          <FixedColumn key={'estimation_issue'} justify={'left'}>
-            width={propsWidth.issue}
-            key={'issue'}
-            justify={'left'}
-            on:update={(result) => checkWidth('issue', result)}
-          >
             {#if currentTeam}
               {getIssueId(currentTeam, issue)}
             {/if}
@@ -77,12 +61,7 @@
         </span>
       </div>
 
-      <FixedColumn
+      <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
-        width={propsWidth.assignee}
-        key={'assignee'}
-        justify={'right'}
-        on:update={(result) => checkWidth('assignee', result)}
-      >
         <UserBox
           width={'100%'}
           label={tracker.string.Assignee}
@@ -92,12 +71,7 @@
           showNavigate={false}
         />
       </FixedColumn>
-      <FixedColumn
+      <FixedColumn key={'estimation'} justify={'left'}>
-        width={propsWidth.estimation}
-        key={'estimation'}
-        justify={'left'}
-        on:update={(result) => checkWidth('estimation', result)}
-      >
         <EstimationEditor value={issue} kind={'list'} />
       </FixedColumn>
     </div>

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte

@@ -35,15 +35,6 @@
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
 
-  let varsStyle: string = ''
-  const propsWidth: Record<string, number> = { issue: 0, assignee: 0, reported: 0, date: 0 }
-  $: if (propsWidth) {
-    varsStyle = ''
-    for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
-  }
-  const checkWidth = (key: string, result: CustomEvent): void => {
-    if (result !== undefined) propsWidth[key] = result.detail
-  }
   const toTeamId = (ref: Ref<Space>) => ref as Ref<Team>
 
   function editSpendReport (
@@ -72,7 +63,6 @@
     {@const currentTeam = teams.get(toTeamId(report.space))}
     <div
       class="flex-between row"
-      style={varsStyle}
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
       on:mouseover={() => {
         listProvider.updateFocus(report)
@@ -84,12 +74,7 @@
     >
       <div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
         <span class="issuePresenter">
-          <FixedColumn
+          <FixedColumn key={'tmiespend_issue'} justify={'left'}>
-            width={propsWidth.issue}
-            key={'issue'}
-            justify={'left'}
-            on:update={(result) => checkWidth('issue', result)}
-          >
             {#if currentTeam && report.$lookup?.attachedTo}
               {getIssueId(currentTeam, report.$lookup?.attachedTo)}
             {/if}
@@ -101,12 +86,7 @@
           </span>
         {/if}
       </div>
-      <FixedColumn
+      <FixedColumn key={'timespend_assignee'} justify={'left'}>
-        width={propsWidth.assignee}
-        key={'assignee'}
-        justify={'left'}
-        on:update={(result) => checkWidth('assignee', result)}
-      >
         <UserBox
           width={'100%'}
           label={tracker.string.Assignee}
@@ -117,22 +97,12 @@
         />
       </FixedColumn>
 
-      <FixedColumn
+      <FixedColumn key={'timespend_reported'} justify={'center'}>
-        width={propsWidth.reported}
-        key={'reported'}
-        justify={'center'}
-        on:update={(result) => checkWidth('reported', result)}
-      >
         <div class="p-1">
           <TimePresenter value={report.value} workDayLength={currentTeam?.workDayLength} />
         </div>
       </FixedColumn>
-      <FixedColumn
+      <FixedColumn key={'timespend_date'} justify={'left'}>
-        width={propsWidth.date}
-        key={'date'}
-        justify={'left'}
-        on:update={(result) => checkWidth('date', result)}
-      >
         <DatePresenter value={report.date} />
       </FixedColumn>
     </div>

plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte

@@ -86,16 +86,6 @@
     // showPopup(ContextMenu, { object }, getEventPositionElement(ev))
   }
 
-  let varsStyle: string = ''
-  const propsWidth: Record<string, number> = { issue: 0 }
-  $: if (propsWidth) {
-    varsStyle = ''
-    for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
-  }
-  const checkWidth = (key: string, result: CustomEvent): void => {
-    if (result !== undefined) propsWidth[key] = result.detail
-  }
-
   export function getIssueTemplateId (team: string, issue: IssueTemplateChild): string {
     return `${team}-${issues.findIndex((it) => it.id === issue.id)}`
   }
@@ -114,7 +104,6 @@
     class:is-dragging={index === draggingIndex}
     class:is-dragged-over-up={draggingIndex !== null && index < draggingIndex && index === hoveringIndex}
     class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex}
-    style={varsStyle}
     animate:flip={{ duration: 400 }}
     draggable={true}
     on:click|self={(evt) => openIssue(evt, issue)}
@@ -142,12 +131,7 @@
       />
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <span class="issuePresenter" on:click={(evt) => openIssue(evt, issue)}>
-        <FixedColumn
+        <FixedColumn key={'issue_template_issue'} justify={'left'}>
-          width={propsWidth.issue}
-          key={'issue'}
-          justify={'left'}
-          on:update={(result) => checkWidth('issue', result)}
-        >
           {getIssueTemplateId(teamId, issue)}
         </FixedColumn>
       </span>

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

@@ -15,24 +15,34 @@
 -->
 <script lang="ts">
   import { resizeObserver } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
+  import { afterUpdate, onDestroy } from 'svelte'
+  import { fixedWidthStore } from '../utils'
 
-  export let width: number | undefined = 0
   export let key: string
   export let justify: string = ''
-
+  let prevKey = key
-  const dispatch = createEventDispatcher()
 
   let cWidth: number = 0
-  $: if (cWidth > (width ?? 0)) {
+
-    width = cWidth
+  afterUpdate(() => {
-    dispatch('update', cWidth)
+    if (prevKey !== key) {
+      $fixedWidthStore[prevKey] = 0
+      prevKey = key
     }
+  })
+
+  $: if (cWidth > ($fixedWidthStore[key] ?? 0)) {
+    $fixedWidthStore[key] = cWidth
+  }
+
+  onDestroy(() => {
+    $fixedWidthStore[key] = 0
+  })
 </script>
 
 <div
   class="flex-no-shrink"
-  style="{justify !== '' ? `text-align: ${justify}; ` : ''} min-width: var(--fixed-{key});"
+  style="{justify !== '' ? `text-align: ${justify}; ` : ''} min-width: {$fixedWidthStore[key] ?? 0}px;"
   use:resizeObserver={(element) => {
     if (element.clientWidth > cWidth) {
       cWidth = element.clientWidth

plugins/view-resources/src/utils.ts

@@ -39,6 +39,7 @@ import {
 } from '@hcengineering/ui'
 import type { BuildModelOptions, Viewlet } from '@hcengineering/view'
 import view, { AttributeModel, BuildModelKey } from '@hcengineering/view'
+import { writable } from 'svelte/store'
 import plugin from './plugin'
 
 /**
@@ -492,3 +493,7 @@ export function getActiveViewletId (): Ref<Viewlet> | null {
   const key = makeViewletKey()
   return localStorage.getItem(key) as Ref<Viewlet> | null
 }
+
+export type FixedWidthStore = Record<string, number>
+
+export const fixedWidthStore = writable<FixedWidthStore>({})