From e32e977b72c8db14ac5625685890df41ec662d78 Mon Sep 17 00:00:00 2001 From: Denis Bykhov Date: Thu, 5 Jan 2023 12:09:30 +0600 Subject: [PATCH] improve fixed column (#2491) Signed-off-by: Denis Bykhov --- plugins/login-resources/src/utils.ts | 1 - .../src/components/issues/IssuesList.svelte | 33 ++-------------- .../components/issues/IssuesListItem.svelte | 15 +------- .../issues/edit/SubIssueList.svelte | 18 +-------- .../timereport/EstimationSubIssueList.svelte | 32 ++-------------- .../timereport/TimeSpendReportsList.svelte | 38 ++----------------- .../templates/IssueTemplateChildList.svelte | 18 +-------- .../src/components/FixedColumn.svelte | 26 +++++++++---- plugins/view-resources/src/utils.ts | 5 +++ 9 files changed, 36 insertions(+), 150 deletions(-) diff --git a/plugins/login-resources/src/utils.ts b/plugins/login-resources/src/utils.ts index 73965e5ebf..93684036d3 100644 --- a/plugins/login-resources/src/utils.ts +++ b/plugins/login-resources/src/utils.ts @@ -220,7 +220,6 @@ export async function getWorkspaces (): Promise { body: serialize(request) }) const result: Response = await response.json() - console.log(result) if (result.error != null) { throw new PlatformError(result.error) } diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte index 2d417ced08..c902d2f4d3 100644 --- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte +++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte @@ -86,8 +86,6 @@ let currentTeam: Team | undefined let personPresenter: AttributeModel let isCollapsedMap: Record = {} - let varsStyle: string = '' - let propsWidth: Record = { 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 - } -
+
{#each categories as category} {@const items = groupedIssues[category] ?? []} {@const limited = limitGroup(category, groupedIssues, categoryLimit) ?? []} @@ -217,12 +204,7 @@
handleCollapseCategory(toCat(category))}>
- checkWidth('groupBy', result)} - > + {#if groupByKey === 'assignee' && personPresenter} {/if} - checkWidth('statistics', result)} - > + {#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( diff --git a/plugins/tracker-resources/src/components/issues/IssuesListItem.svelte b/plugins/tracker-resources/src/components/issues/IssuesListItem.svelte index bb7f8e246e..ce194a384d 100644 --- a/plugins/tracker-resources/src/components/issues/IssuesListItem.svelte +++ b/plugins/tracker-resources/src/components/issues/IssuesListItem.svelte @@ -32,17 +32,9 @@ export let selected: boolean export let statuses: WithLookup[] export let currentTeam: Team | undefined - export let propsWidth: Record const dispatch = createEventDispatcher() - const checkWidth = (key: string, result: CustomEvent): void => { - if (result !== undefined) { - propsWidth[key] = result.detail - dispatch('fitting', propsWidth) - } - } - $: compactMode = $deviceInfo.twoRows @@ -78,12 +70,7 @@ {:else if (!groupByKey || attributeModel.props?.excludeByKey !== groupByKey) && !(attributeModel.props?.optional && compactMode)} {#if attributeModel.props?.fixed} - checkWidth(attributeModel.key, result)} - > + = { 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 - } draggingIndex && index === hoveringIndex} - style={varsStyle} animate:flip={{ duration: 400 }} draggable={true} on:click|self={openIssueCall} @@ -113,12 +102,7 @@
- checkWidth('issue', result)} - > + {#if currentTeam} {getIssueId(currentTeam, issue)} {/if} diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte index 1639bc7438..da202ffdfd 100644 --- a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte +++ b/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 = { 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 - } @@ -50,7 +40,6 @@ {@const currentTeam = teams.get(issue.space)}
showContextMenu(ev, issue)} on:mouseover={() => { listProvider.updateFocus(issue) @@ -61,12 +50,7 @@ >
- checkWidth('issue', result)} - > + {#if currentTeam} {getIssueId(currentTeam, issue)} {/if} @@ -77,12 +61,7 @@
- checkWidth('assignee', result)} - > + - checkWidth('estimation', result)} - > +
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte index 794bf3e3ef..713e3f9ca4 100644 --- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte +++ b/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 = { 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) => ref as Ref function editSpendReport ( @@ -72,7 +63,6 @@ {@const currentTeam = teams.get(toTeamId(report.space))}
showContextMenu(ev, report)} on:mouseover={() => { listProvider.updateFocus(report) @@ -84,12 +74,7 @@ >
- checkWidth('issue', result)} - > + {#if currentTeam && report.$lookup?.attachedTo} {getIssueId(currentTeam, report.$lookup?.attachedTo)} {/if} @@ -101,12 +86,7 @@ {/if}
- checkWidth('assignee', result)} - > + - checkWidth('reported', result)} - > +
- checkWidth('date', result)} - > +
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte index 4bea46987b..840a01bca6 100644 --- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte +++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte @@ -86,16 +86,6 @@ // showPopup(ContextMenu, { object }, getEventPositionElement(ev)) } - let varsStyle: string = '' - const propsWidth: Record = { 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 @@ /> openIssue(evt, issue)}> - checkWidth('issue', result)} - > + {getIssueTemplateId(teamId, issue)} diff --git a/plugins/view-resources/src/components/FixedColumn.svelte b/plugins/view-resources/src/components/FixedColumn.svelte index c20a8ee6d3..9d4fc18d58 100644 --- a/plugins/view-resources/src/components/FixedColumn.svelte +++ b/plugins/view-resources/src/components/FixedColumn.svelte @@ -15,24 +15,34 @@ -->
{ if (element.clientWidth > cWidth) { cWidth = element.clientWidth diff --git a/plugins/view-resources/src/utils.ts b/plugins/view-resources/src/utils.ts index a4a4385201..6c6dbcadb4 100644 --- a/plugins/view-resources/src/utils.ts +++ b/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 | null { const key = makeViewletKey() return localStorage.getItem(key) as Ref | null } + +export type FixedWidthStore = Record + +export const fixedWidthStore = writable({})