diff --git a/packages/ui/src/__test__/selectPopupCategories.test.ts b/packages/ui/src/__test__/selectPopupCategories.test.ts new file mode 100644 index 00000000000..e7b0022a4d0 --- /dev/null +++ b/packages/ui/src/__test__/selectPopupCategories.test.ts @@ -0,0 +1,90 @@ +// +// Copyright © 2026 Hardcore Engineering Inc. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +import type { IntlString } from '@hcengineering/platform' +import { buildSelectPopupRows, loadCollapsedCategories, saveCollapsedCategories } from '../selectPopupCategories' +import type { SelectPopupValueType } from '../types' + +const todo = { label: 'cat:ToDo' as IntlString } +const done = { label: 'cat:Done' as IntlString } + +const items: SelectPopupValueType[] = [ + { id: 'a', text: 'A', category: todo }, + { id: 'b', text: 'B', category: todo }, + { id: 'c', text: 'C', category: done }, + { id: 'd', text: 'D' } +] + +function describeRows (rows: ReturnType): string[] { + return rows.map((row) => + row.kind === 'category' + ? `[${row.category.label} ${row.count}${row.collapsed ? ' collapsed' : ''}]` + : String(row.item.id) + ) +} + +describe('buildSelectPopupRows', () => { + it('adds a header before each category group', () => { + expect(describeRows(buildSelectPopupRows(items, new Set()))).toEqual([ + '[cat:ToDo 2]', + 'a', + 'b', + '[cat:Done 1]', + 'c', + 'd' + ]) + }) + + it('hides items of collapsed categories but keeps the header with the item count', () => { + expect(describeRows(buildSelectPopupRows(items, new Set([todo.label])))).toEqual([ + '[cat:ToDo 2 collapsed]', + '[cat:Done 1]', + 'c', + 'd' + ]) + }) + + it('expands all groups when requested, e.g. while searching', () => { + expect(describeRows(buildSelectPopupRows(items, new Set([todo.label, done.label]), true))).toEqual([ + '[cat:ToDo 2]', + 'a', + 'b', + '[cat:Done 1]', + 'c', + 'd' + ]) + }) +}) + +describe('collapsed categories storage', () => { + beforeEach(() => { + localStorage.clear() + }) + + it('remembers collapsed categories per key', () => { + saveCollapsedCategories('status', new Set([todo.label])) + expect(Array.from(loadCollapsedCategories('status'))).toEqual([todo.label]) + expect(loadCollapsedCategories('other').size).toBe(0) + expect(loadCollapsedCategories(undefined).size).toBe(0) + + saveCollapsedCategories('status', new Set()) + expect(loadCollapsedCategories('status').size).toBe(0) + }) + + it('ignores malformed stored values', () => { + localStorage.setItem('selectPopup.collapsedCategories.status', '{broken') + expect(loadCollapsedCategories('status').size).toBe(0) + }) +}) diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte index 967babacaad..0f5f2088a8d 100644 --- a/packages/ui/src/components/SelectPopup.svelte +++ b/packages/ui/src/components/SelectPopup.svelte @@ -26,6 +26,13 @@ import Spinner from './Spinner.svelte' import IconCheck from './icons/Check.svelte' import IconSearch from './icons/Search.svelte' + import IconCollapseArrow from './icons/CollapseArrow.svelte' + import { + buildSelectPopupRows, + loadCollapsedCategories, + saveCollapsedCategories, + type SelectPopupRow + } from '../selectPopupCategories' import { translate } from '@hcengineering/platform' import { themeStore } from '@hcengineering/theme' @@ -40,6 +47,9 @@ export let embedded: boolean = false export let componentLink: boolean = false export let loading: boolean = false + // Show category headers as collapsible groups; collapse state is remembered under collapsedCategoriesKey + export let collapsibleCategories: boolean = false + export let collapsedCategoriesKey: string | undefined = undefined let popupElement: HTMLDivElement | undefined = undefined export let search: string = '' @@ -53,6 +63,27 @@ let selected: any + let collapsedCategories = loadCollapsedCategories(collapsedCategoriesKey) + + function toggleCategory (label: string): void { + if (collapsedCategories.has(label)) { + collapsedCategories.delete(label) + } else { + collapsedCategories.add(label) + } + collapsedCategories = collapsedCategories + saveCollapsedCategories(collapsedCategoriesKey, collapsedCategories) + } + + function selectRow (row: SelectPopupRow | undefined): void { + if (row === undefined) return + if (row.kind === 'category') { + toggleCategory(row.category.label) + } else { + sendSelect(row.item.id) + } + } + function sendSelect (id: SelectPopupValueType['id']): void { selected = id if (onSelect) { @@ -84,7 +115,7 @@ if (key.code === 'Enter') { key.preventDefault() key.stopPropagation() - sendSelect(filteredObjects[selection].id) + selectRow(rows[selection]) return true } return false @@ -112,6 +143,20 @@ (itemLabelsTranslation.get(el.label ?? '') ?? el.text ?? '').toLowerCase().includes(search.toLowerCase()) ) + $: rows = collapsibleCategories + ? buildSelectPopupRows(filteredObjects, collapsedCategories, search !== '') + : filteredObjects.map((item): SelectPopupRow => ({ kind: 'item', item })) + + // Start keyboard navigation on the first item instead of the first category header + let initialRowSelected = false + $: if (collapsibleCategories && !initialRowSelected && rows.length > 0) { + initialRowSelected = true + selection = Math.max( + 0, + rows.findIndex((row) => row.kind === 'item') + ) + } + $: huge = size === 'medium' || size === 'large' $: if (popupElement) { @@ -154,60 +199,83 @@ {/if}
- dispatch('changeContent')} - > + dispatch('changeContent')}> - {@const item = filteredObjects[itemId]} - + {:else} + {@const item = row.item} +
- + + {#if item.label} + + {/if} + {#if hasSelected} +
+ {#if item.isSelected} + + {/if} +
+ {/if} + {#if item.id === selected && loading} + + {/if} +
+ + {/if} - {@const obj = filteredObjects[row]} - {#if obj.category && ((row === 0 && obj.category.label !== undefined) || obj.category.label !== filteredObjects[row - 1]?.category?.label)} - {#if row > 0}
{/if} -
- - -
+ {#if collapsibleCategories} + {#if row > 0 && rows[row]?.kind === 'category'}
{/if} + {:else} + {@const obj = filteredObjects[row]} + {#if obj.category && ((row === 0 && obj.category.label !== undefined) || obj.category.label !== filteredObjects[row - 1]?.category?.label)} + {#if row > 0}
{/if} +
+ + +
+ {/if} {/if} @@ -215,3 +283,16 @@
{#if !embedded}
{/if}
+ + diff --git a/packages/ui/src/selectPopupCategories.ts b/packages/ui/src/selectPopupCategories.ts new file mode 100644 index 00000000000..d7088c78b5f --- /dev/null +++ b/packages/ui/src/selectPopupCategories.ts @@ -0,0 +1,95 @@ +// +// Copyright © 2026 Hardcore Engineering Inc. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +import type { SelectPopupValueType } from './types' + +/** + * @public + */ +export type SelectPopupRow = + | { + kind: 'category' + category: NonNullable + count: number + collapsed: boolean + } + | { kind: 'item', item: SelectPopupValueType } + +/** + * Builds the rows of a select popup with collapsible category headers. + * Items are expected to be ordered by category; consecutive items with the same + * category label form one group. Items without a category get no header. + * When expandAll is set (e.g. while searching), collapsed groups are shown expanded. + * + * @public + */ +export function buildSelectPopupRows ( + items: SelectPopupValueType[], + collapsed: ReadonlySet, + expandAll: boolean = false +): SelectPopupRow[] { + const rows: SelectPopupRow[] = [] + let header: Extract | undefined + for (const item of items) { + const category = item.category + if (category === undefined) { + header = undefined + rows.push({ kind: 'item', item }) + continue + } + if (header === undefined || header.category.label !== category.label) { + header = { kind: 'category', category, count: 0, collapsed: !expandAll && collapsed.has(category.label) } + rows.push(header) + } + header.count++ + if (!header.collapsed) { + rows.push({ kind: 'item', item }) + } + } + return rows +} + +function collapsedStorageKey (key: string): string { + return `selectPopup.collapsedCategories.${key}` +} + +/** + * @public + */ +export function loadCollapsedCategories (key: string | undefined): Set { + if (key === undefined) return new Set() + try { + const value = JSON.parse(localStorage.getItem(collapsedStorageKey(key)) ?? '[]') + return new Set(Array.isArray(value) ? value.filter((it) => typeof it === 'string') : []) + } catch { + return new Set() + } +} + +/** + * @public + */ +export function saveCollapsedCategories (key: string | undefined, collapsed: ReadonlySet): void { + if (key === undefined) return + try { + if (collapsed.size === 0) { + localStorage.removeItem(collapsedStorageKey(key)) + } else { + localStorage.setItem(collapsedStorageKey(key), JSON.stringify(Array.from(collapsed))) + } + } catch { + // Storage may be unavailable, collapse state is then kept only while the popup is open + } +} diff --git a/plugins/tracker-resources/src/__tests__/statusCategories.test.ts b/plugins/tracker-resources/src/__tests__/statusCategories.test.ts new file mode 100644 index 00000000000..27e34719731 --- /dev/null +++ b/plugins/tracker-resources/src/__tests__/statusCategories.test.ts @@ -0,0 +1,73 @@ +// +// Copyright © 2026 Hardcore Engineering Inc. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +import type { Ref, Status, StatusCategory } from '@hcengineering/core' +import { groupStatusesByCategory, statusGroupingThreshold } from '../statusCategories' + +const categories = new Map, StatusCategory>( + [ + ['backlog', 0], + ['started', 2], + ['unstarted', 1] + ].map(([id, order]) => [ + id as Ref, + { _id: id as Ref, order: order as number, label: `cat:${id}` } as unknown as StatusCategory + ]) +) + +function status (name: string, category?: string): Status { + return { _id: name as Ref, name, category: category as Ref | undefined } as unknown as Status +} + +function names (statuses: Status[]): string[] { + return groupStatusesByCategory(statuses, (ref) => categories.get(ref)).map( + ({ status, category }) => `${status.name}:${category?._id ?? '-'}` + ) +} + +describe('groupStatusesByCategory', () => { + it('keeps the original order without categories below the threshold', () => { + const statuses = [status('b', 'started'), status('a', 'backlog')] + expect(names(statuses)).toEqual(['b:-', 'a:-']) + }) + + it('orders statuses by category order and keeps the order inside a category', () => { + const statuses = [ + status('s1', 'started'), + status('u1', 'unstarted'), + status('x1'), + status('b1', 'backlog'), + status('s2', 'started'), + status('b2', 'backlog'), + status('u2', 'unstarted'), + status('s3', 'started'), + status('b3', 'backlog'), + status('u3', 'unstarted') + ] + expect(statuses.length).toBe(statusGroupingThreshold) + expect(names(statuses)).toEqual([ + 'b1:backlog', + 'b2:backlog', + 'b3:backlog', + 'u1:unstarted', + 'u2:unstarted', + 'u3:unstarted', + 's1:started', + 's2:started', + 's3:started', + 'x1:-' + ]) + }) +}) diff --git a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte index d164656e319..41d241c6ba6 100644 --- a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte +++ b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte @@ -33,6 +33,7 @@ import { createEventDispatcher } from 'svelte' import tracker from '../../plugin' + import { groupStatusesByCategory, statusCategoriesCollapseKey } from '../../statusCategories' import IssueStatusIcon from './IssueStatusIcon.svelte' import StatusPresenter from './StatusPresenter.svelte' @@ -84,7 +85,12 @@ showPopup( SelectPopup, - { value: statusesInfo, placeholder: tracker.string.SetStatus }, + { + value: statusesInfo, + placeholder: tracker.string.SetStatus, + collapsibleCategories: true, + collapsedCategoriesKey: statusCategoriesCollapseKey + }, eventToHTMLElement(event), changeStatus ) @@ -119,14 +125,18 @@ $: selectedStatus = getSelectedStatus(statuses, value, defaultIssueStatus) $: selectedStatusLabel = shouldShowLabel ? selectedStatus?.name : undefined - $: statusesInfo = statuses?.map((s) => { - return { - id: s._id, - component: StatusPresenter, - props: { value: s, size: 'small', space: value.space }, - isSelected: selectedStatus?._id === s._id - } - }) + $: statusesInfo = + statuses !== undefined + ? groupStatusesByCategory(statuses, (c) => client.getModel().findObject(c)).map(({ status: s, category }) => { + return { + id: s._id, + component: StatusPresenter, + props: { value: s, size: 'small', space: value.space }, + isSelected: selectedStatus?._id === s._id, + category: category !== undefined ? { label: category.label, icon: category.icon } : undefined + } + }) + : undefined $: smallgap = size === 'inline' || size === 'small' diff --git a/plugins/tracker-resources/src/components/issues/StatusSelector.svelte b/plugins/tracker-resources/src/components/issues/StatusSelector.svelte index df13cce3b48..dab7ff7f480 100644 --- a/plugins/tracker-resources/src/components/issues/StatusSelector.svelte +++ b/plugins/tracker-resources/src/components/issues/StatusSelector.svelte @@ -14,6 +14,7 @@ -->