From 9722777c37a04ad44bd212690ac4c5308d61694e Mon Sep 17 00:00:00 2001 From: Carina Gentiana Pasere <48244789+pasere-smeup@users.noreply.github.com> Date: Tue, 4 Mar 2025 13:05:33 +0100 Subject: [PATCH] NC: web components state management: fixed, save state also at first render --- packages/ketchup/src/components.d.ts | 32 +- .../src/components/kup-autocomplete/readme.md | 52 +- .../src/components/kup-box/kup-box.tsx | 164 +++-- .../src/components/kup-combobox/readme.md | 44 +- .../kup-data-table/kup-data-table-state.ts | 2 +- .../kup-data-table/kup-data-table.tsx | 584 +++++++++--------- .../kup-image-list/kup-image-list.tsx | 32 +- .../src/components/kup-tree/kup-tree.tsx | 132 ++-- 8 files changed, 515 insertions(+), 527 deletions(-) diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 979c77b544..f21773908b 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -244,10 +244,6 @@ export namespace Components { * @default false */ "disabled": boolean; - /** - * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". - */ - "displayListMode": ItemsDisplayMode; /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.DESCRIPTION @@ -303,6 +299,10 @@ export namespace Components { * @default false */ "leadingLabel": boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "listDisplayMode": ItemsDisplayMode; /** * The minimum number of chars to trigger the autocomplete * @default 3 @@ -1337,10 +1337,6 @@ export namespace Components { * Defaults at false. When set to true, the component is disabled. */ "disabled": boolean; - /** - * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". - */ - "displayListMode": ItemsDisplayMode; /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ @@ -1393,6 +1389,10 @@ export namespace Components { * @default false */ "leadingLabel": boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "listDisplayMode": ItemsDisplayMode; /** * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. * @default false @@ -6343,10 +6343,6 @@ declare namespace LocalJSX { * @default false */ "disabled"?: boolean; - /** - * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". - */ - "displayListMode"?: ItemsDisplayMode; /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.DESCRIPTION @@ -6391,6 +6387,10 @@ declare namespace LocalJSX { * @default false */ "leadingLabel"?: boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "listDisplayMode"?: ItemsDisplayMode; /** * The minimum number of chars to trigger the autocomplete * @default 3 @@ -7308,10 +7308,6 @@ declare namespace LocalJSX { * Defaults at false. When set to true, the component is disabled. */ "disabled"?: boolean; - /** - * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". - */ - "displayListMode"?: ItemsDisplayMode; /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ @@ -7353,6 +7349,10 @@ declare namespace LocalJSX { * @default false */ "leadingLabel"?: boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "listDisplayMode"?: ItemsDisplayMode; "onKup-combobox-blur"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-change"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-click"?: (event: KupComboboxCustomEvent) => void; diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md index 9ea43e308b..3fd08c6f22 100644 --- a/packages/ketchup/src/components/kup-autocomplete/readme.md +++ b/packages/ketchup/src/components/kup-autocomplete/readme.md @@ -5,32 +5,32 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -| `alert` | `alert` | Set alert message | `string` | `''` | -| `allowInconsistentValues` | `allow-inconsistent-values` | When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. | `boolean` | `false` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Props of the sub-components. | `Object` | `undefined` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `error` | `error` | Set error message | `string` | `''` | -| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | -| `initialValue` | `initial-value` | Sets the initial value of the component. | `string` | `''` | -| `initialValueDecode` | `initial-value-decode` | Sets the initial value decode of the component | `string` | `''` | -| `inputDelay` | `input-delay` | Input event emission delay in milliseconds. | `number` | `300` | -| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | -| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | -| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | -| `listDisplayMode` | `list-display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `minimumChars` | `minimum-chars` | The minimum number of chars to trigger the autocomplete | `number` | `3` | -| `placeholder` | `placeholder` | Set custom placeholder / watermark for text field | `string` | `'Type code or description'` | -| `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` | -| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.CODE` | -| `serverHandledFilter` | `server-handled-filter` | When true, the items filter is managed server side, otherwise items filter is done client side. | `boolean` | `false` | -| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | -| `showMarker` | `show-marker` | When true shows a small marker on the component. | `boolean` | `false` | -| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | -| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | +| `alert` | `alert` | Set alert message | `string` | `''` | +| `allowInconsistentValues` | `allow-inconsistent-values` | When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. | `boolean` | `false` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Props of the sub-components. | `Object` | `undefined` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | +| `error` | `error` | Set error message | `string` | `''` | +| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | +| `initialValue` | `initial-value` | Sets the initial value of the component. | `string` | `''` | +| `initialValueDecode` | `initial-value-decode` | Sets the initial value decode of the component | `string` | `''` | +| `inputDelay` | `input-delay` | Input event emission delay in milliseconds. | `number` | `300` | +| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | +| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | +| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | +| `listDisplayMode` | `list-display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.CODE_AND_DESC` | +| `minimumChars` | `minimum-chars` | The minimum number of chars to trigger the autocomplete | `number` | `3` | +| `placeholder` | `placeholder` | Set custom placeholder / watermark for text field | `string` | `'Type code or description'` | +| `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` | +| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.CODE` | +| `serverHandledFilter` | `server-handled-filter` | When true, the items filter is managed server side, otherwise items filter is done client side. | `boolean` | `false` | +| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | +| `showMarker` | `show-marker` | When true shows a small marker on the component. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | ## Events diff --git a/packages/ketchup/src/components/kup-box/kup-box.tsx b/packages/ketchup/src/components/kup-box/kup-box.tsx index 31b17a6085..e76d402b3f 100644 --- a/packages/ketchup/src/components/kup-box/kup-box.tsx +++ b/packages/ketchup/src/components/kup-box/kup-box.tsx @@ -77,7 +77,6 @@ import { FCell } from '../../f-components/f-cell/f-cell'; import { FCellProps } from '../../f-components/f-cell/f-cell-declarations'; import { FPaginator } from '../../f-components/f-paginator/f-paginator'; import { KupComboboxEventPayload } from '../kup-combobox/kup-combobox-declarations'; -import { FPaginatorMode } from '../../f-components/f-paginator/f-paginator-declarations'; import { pageChange, rowsPerPageChange, @@ -126,6 +125,7 @@ export class KupBox { initWithPersistedState(): void { if (this.store && this.stateId) { + this.state.load = true; const state = this.store.getState(this.stateId); if (state != null) { this.kupManager.debug.logMessage( @@ -149,102 +149,98 @@ export class KupBox { persistState(): void { if (this.store && this.stateId) { - let somethingChanged = false; - if ( - !this.kupManager.objects.deepEqual( - this.state.sortBy, - this.sortBy - ) - ) { - this.state.sortBy = this.sortBy; - somethingChanged = true; - } - - if ( - !this.kupManager.objects.deepEqual( - this.state.globalFilterValue, - this.globalFilterValue - ) - ) { - this.state.globalFilterValue = this.globalFilterValue; - somethingChanged = true; - } - - if ( - !this.kupManager.objects.deepEqual( - this.state.pageSelected, - this.currentPage - ) - ) { - this.state.pageSelected = this.currentPage; - somethingChanged = true; - } - - if ( - !this.kupManager.objects.deepEqual( - this.state.rowsPerPage, - this.currentRowsPerPage - ) - ) { - this.state.rowsPerPage = this.currentRowsPerPage; - somethingChanged = true; - } - - const selectedRowsState = this.selectedRows.reduce( - (accumulator, row, currentIndex) => { - const prefix = currentIndex > 0 ? ';' : ''; - return accumulator + prefix + row.id; - }, - '' - ); - - if ( - !this.kupManager.objects.deepEqual( - this.state.selectedRowsState, - selectedRowsState - ) - ) { - this.state.selectedRowsState = selectedRowsState; - somethingChanged = true; - } - if ( - !this.kupManager.objects.deepEqual( - this.state.loadMoreLimit, - this.loadMoreLimit - ) - ) { - this.state.loadMoreLimit = this.loadMoreLimit; - somethingChanged = true; - } - - if ( - !this.kupManager.objects.deepEqual( - this.state.showLoadMore, - this.showLoadMore - ) - ) { - this.state.showLoadMore = this.showLoadMore; - somethingChanged = true; - } - + let somethingChanged = this.#checkUpdateState(); if (!this.state.load) { this.state.load = true; return; } - if (somethingChanged) { this.kupManager.debug.logMessage( this, - 'Persisting state for stateId ' + - this.stateId + - ': ' + - this.state + 'Persisting stateId ' + this.stateId ); this.store.persistState(this.stateId, this.state); } } } + #checkUpdateState(): boolean { + let somethingChanged = false; + if ( + !this.kupManager.objects.deepEqual(this.state.sortBy, this.sortBy) + ) { + this.state.sortBy = this.sortBy; + somethingChanged = true; + } + + if ( + !this.kupManager.objects.deepEqual( + this.state.globalFilterValue, + this.globalFilterValue + ) + ) { + this.state.globalFilterValue = this.globalFilterValue; + somethingChanged = true; + } + + if ( + !this.kupManager.objects.deepEqual( + this.state.pageSelected, + this.currentPage + ) + ) { + this.state.pageSelected = this.currentPage; + somethingChanged = true; + } + + if ( + !this.kupManager.objects.deepEqual( + this.state.rowsPerPage, + this.currentRowsPerPage + ) + ) { + this.state.rowsPerPage = this.currentRowsPerPage; + somethingChanged = true; + } + + const selectedRowsState = this.selectedRows.reduce( + (accumulator, row, currentIndex) => { + const prefix = currentIndex > 0 ? ';' : ''; + return accumulator + prefix + row.id; + }, + '' + ); + + if ( + !this.kupManager.objects.deepEqual( + this.state.selectedRowsState, + selectedRowsState + ) + ) { + this.state.selectedRowsState = selectedRowsState; + somethingChanged = true; + } + if ( + !this.kupManager.objects.deepEqual( + this.state.loadMoreLimit, + this.loadMoreLimit + ) + ) { + this.state.loadMoreLimit = this.loadMoreLimit; + somethingChanged = true; + } + + if ( + !this.kupManager.objects.deepEqual( + this.state.showLoadMore, + this.showLoadMore + ) + ) { + this.state.showLoadMore = this.showLoadMore; + somethingChanged = true; + } + return somethingChanged; + } /*-------------------------------------------------*/ /* P r o p s */ /*-------------------------------------------------*/ diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md index 9be14d3578..3dedc61f23 100644 --- a/packages/ketchup/src/components/kup-combobox/readme.md +++ b/packages/ketchup/src/components/kup-combobox/readme.md @@ -5,28 +5,28 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -| `alert` | `alert` | Set alert message | `string` | `''` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Props of the sub-components (date input text field). | `Object` | `undefined` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `error` | `error` | Set error message | `string` | `''` | -| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | -| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | -| `initialValueDecode` | `initial-value-decode` | Sets the initial value decode of the component | `string` | `''` | -| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | -| `isSelect` | `is-select` | Lets the combobox behave as a select element, making the textfield readable only but interactable. | `boolean` | `true` | -| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | -| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | -| `listDisplayMode` | `list-display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` | -| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.CODE` | -| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | -| `showMarker` | `show-marker` | When true shows a small marker on the component. | `boolean` | `false` | -| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | -| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | +| `alert` | `alert` | Set alert message | `string` | `''` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Props of the sub-components (date input text field). | `Object` | `undefined` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | +| `error` | `error` | Set error message | `string` | `''` | +| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | +| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | +| `initialValueDecode` | `initial-value-decode` | Sets the initial value decode of the component | `string` | `''` | +| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | +| `isSelect` | `is-select` | Lets the combobox behave as a select element, making the textfield readable only but interactable. | `boolean` | `true` | +| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | +| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | +| `listDisplayMode` | `list-display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.CODE_AND_DESC` | +| `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` | +| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.CODE` | +| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | +| `showMarker` | `show-marker` | When true shows a small marker on the component. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | ## Events diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table-state.ts b/packages/ketchup/src/components/kup-data-table/kup-data-table-state.ts index c86761261a..d1e30b580c 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table-state.ts +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table-state.ts @@ -36,7 +36,7 @@ export class KupDataTableState implements KupState { sortableColumnsMutateData: boolean = true; pageSelected: number = 1; selectRow: number; - selectRowsById: string; + selectRowsById: string = ''; dragEnabled: boolean = false; dropEnabled: boolean = false; showFooter: boolean = false; diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx index 3443cf80cf..baef90dafd 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx @@ -188,7 +188,6 @@ import { KupColumnMenuIds } from '../../utils/kup-column-menu/kup-column-menu-de import { KupList } from '../kup-list/kup-list'; import { KupDropdownButtonEventPayload } from '../kup-dropdown-button/kup-dropdown-button-declarations'; import { FObjectFieldEventPayload } from '../../f-components/f-object-field/f-object-field-declarations'; -import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'; @Component({ tag: 'kup-data-table', @@ -203,6 +202,7 @@ export class KupDataTable { initWithPersistedState(): void { if (this.store && this.stateId) { + this.state.load = true; const state = this.store.getState(this.stateId); if (state != null) { this.#kupManager.debug.logMessage( @@ -243,314 +243,17 @@ export class KupDataTable { this.visibleColumns = state.visibleColumns ? [...state.visibleColumns] : undefined; - } else { - this.#kupManager.debug.logMessage( - this, - 'Persisting initial stateId ' + this.stateId - ); - this.store.persistState(this.stateId, this.state); } } } persistState(): void { if (this.store && this.stateId) { - let somethingChanged = false; - if ( - !this.#kupManager.objects.deepEqual( - this.state.filters, - this.filters - ) - ) { - this.state.filters = { ...this.filters }; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.groups, - this.groups - ) - ) { - this.state.groups = [...this.groups]; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual(this.state.sort, this.sort) - ) { - this.state.sort = [...this.sort]; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.expandGroups, - this.expandGroups - ) - ) { - this.state.expandGroups = this.expandGroups; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.groupLabelDisplay, - this.groupLabelDisplay - ) - ) { - this.state.groupLabelDisplay = this.groupLabelDisplay; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.density, - this.density - ) - ) { - this.state.density = this.density; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.enableExtraColumns, - this.enableExtraColumns - ) - ) { - this.state.enableExtraColumns = this.enableExtraColumns; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.enableSortableColumns, - this.enableSortableColumns - ) - ) { - this.state.enableSortableColumns = this.enableSortableColumns; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.forceOneLine, - this.forceOneLine - ) - ) { - this.state.forceOneLine = this.forceOneLine; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.globalFilter, - this.globalFilter - ) - ) { - this.state.globalFilter = this.globalFilter; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.globalFilterValue, - this.globalFilterValue - ) - ) { - this.state.globalFilterValue = this.globalFilterValue; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.headerIsPersistent, - this.headerIsPersistent - ) - ) { - this.state.headerIsPersistent = this.headerIsPersistent; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.lazyLoadRows, - this.lazyLoadRows - ) - ) { - this.state.lazyLoadRows = this.lazyLoadRows; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.loadMoreLimit, - this.loadMoreLimit - ) - ) { - this.state.loadMoreLimit = this.loadMoreLimit; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.selection, - this.selection - ) - ) { - this.state.selection = this.selection; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.rowsPerPage, - this.currentRowsPerPage - ) - ) { - this.state.rowsPerPage = this.currentRowsPerPage; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.showFilters, - this.showFilters - ) - ) { - this.state.showFilters = this.showFilters; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.showGroups, - this.showGroups - ) - ) { - this.state.showGroups = this.showGroups; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.showHeader, - this.showHeader - ) - ) { - this.state.showHeader = this.showHeader; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.showLoadMore, - this.showLoadMore - ) - ) { - this.state.showLoadMore = this.showLoadMore; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.showPaginator, - this.showPaginator - ) - ) { - this.state.showPaginator = this.showPaginator; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.hiddenSubmitButton, - this.hiddenSubmitButton - ) - ) { - this.state.hiddenSubmitButton = this.hiddenSubmitButton; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.sortEnabled, - this.sortEnabled - ) - ) { - this.state.sortEnabled = this.sortEnabled; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.sortableColumnsMutateData, - this.sortableColumnsMutateData - ) - ) { - this.state.sortableColumnsMutateData = - this.sortableColumnsMutateData; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.pageSelected, - this.currentPage - ) - ) { - this.state.pageSelected = this.currentPage; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.dragEnabled, - this.dragEnabled - ) - ) { - this.state.dragEnabled = this.dragEnabled; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.dropEnabled, - this.dropEnabled - ) - ) { - this.state.dropEnabled = this.dropEnabled; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.showFooter, - this.showFooter - ) - ) { - this.state.showFooter = this.showFooter; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.totals, - this.totals - ) - ) { - this.state.totals = { ...this.totals }; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.selectRowsById, - this.selectedRows.reduce( - (accumulator, row, currentIndex) => { - const prefix = currentIndex > 0 ? ';' : ''; - return accumulator + prefix + row.id; - }, - '' - ) - ) - ) { - this.state.selectRowsById = this.selectedRows.reduce( - (accumulator, row, currentIndex) => { - const prefix = currentIndex > 0 ? ';' : ''; - return accumulator + prefix + row.id; - }, - '' - ); - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.visibleColumns, - this.visibleColumns - ) - ) { - this.state.visibleColumns = [...this.visibleColumns]; - somethingChanged = true; - } - + let somethingChanged = this.#checkUpdateState(); if (!this.state.load) { this.state.load = true; return; } - if (somethingChanged) { this.#kupManager.debug.logMessage( this, @@ -561,6 +264,288 @@ export class KupDataTable { } } + #checkUpdateState(): boolean { + let somethingChanged = false; + if ( + !this.#kupManager.objects.deepEqual( + this.state.filters, + this.filters + ) + ) { + this.state.filters = { ...this.filters }; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual(this.state.groups, this.groups) + ) { + this.state.groups = [...this.groups]; + somethingChanged = true; + } + if (!this.#kupManager.objects.deepEqual(this.state.sort, this.sort)) { + this.state.sort = [...this.sort]; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.expandGroups, + this.expandGroups + ) + ) { + this.state.expandGroups = this.expandGroups; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.groupLabelDisplay, + this.groupLabelDisplay + ) + ) { + this.state.groupLabelDisplay = this.groupLabelDisplay; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.density, + this.density + ) + ) { + this.state.density = this.density; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.enableExtraColumns, + this.enableExtraColumns + ) + ) { + this.state.enableExtraColumns = this.enableExtraColumns; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.enableSortableColumns, + this.enableSortableColumns + ) + ) { + this.state.enableSortableColumns = this.enableSortableColumns; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.forceOneLine, + this.forceOneLine + ) + ) { + this.state.forceOneLine = this.forceOneLine; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.globalFilter, + this.globalFilter + ) + ) { + this.state.globalFilter = this.globalFilter; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.globalFilterValue, + this.globalFilterValue + ) + ) { + this.state.globalFilterValue = this.globalFilterValue; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.headerIsPersistent, + this.headerIsPersistent + ) + ) { + this.state.headerIsPersistent = this.headerIsPersistent; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.lazyLoadRows, + this.lazyLoadRows + ) + ) { + this.state.lazyLoadRows = this.lazyLoadRows; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.loadMoreLimit, + this.loadMoreLimit + ) + ) { + this.state.loadMoreLimit = this.loadMoreLimit; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.selection, + this.selection + ) + ) { + this.state.selection = this.selection; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.rowsPerPage, + this.currentRowsPerPage + ) + ) { + this.state.rowsPerPage = this.currentRowsPerPage; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.showFilters, + this.showFilters + ) + ) { + this.state.showFilters = this.showFilters; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.showGroups, + this.showGroups + ) + ) { + this.state.showGroups = this.showGroups; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.showHeader, + this.showHeader + ) + ) { + this.state.showHeader = this.showHeader; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.showLoadMore, + this.showLoadMore + ) + ) { + this.state.showLoadMore = this.showLoadMore; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.showPaginator, + this.showPaginator + ) + ) { + this.state.showPaginator = this.showPaginator; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.hiddenSubmitButton, + this.hiddenSubmitButton + ) + ) { + this.state.hiddenSubmitButton = this.hiddenSubmitButton; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.sortEnabled, + this.sortEnabled + ) + ) { + this.state.sortEnabled = this.sortEnabled; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.sortableColumnsMutateData, + this.sortableColumnsMutateData + ) + ) { + this.state.sortableColumnsMutateData = + this.sortableColumnsMutateData; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.pageSelected, + this.currentPage + ) + ) { + this.state.pageSelected = this.currentPage; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.dragEnabled, + this.dragEnabled + ) + ) { + this.state.dragEnabled = this.dragEnabled; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.dropEnabled, + this.dropEnabled + ) + ) { + this.state.dropEnabled = this.dropEnabled; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.showFooter, + this.showFooter + ) + ) { + this.state.showFooter = this.showFooter; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual(this.state.totals, this.totals) + ) { + this.state.totals = { ...this.totals }; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.selectRowsById, + this.selectedRows.reduce((accumulator, row, currentIndex) => { + const prefix = currentIndex > 0 ? ';' : ''; + return accumulator + prefix + row.id; + }, '') + ) + ) { + this.state.selectRowsById = this.selectedRows.reduce( + (accumulator, row, currentIndex) => { + const prefix = currentIndex > 0 ? ';' : ''; + return accumulator + prefix + row.id; + }, + '' + ); + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.visibleColumns, + this.visibleColumns + ) + ) { + this.state.visibleColumns = [...this.visibleColumns]; + somethingChanged = true; + } + return somethingChanged; + } ////////////////////////////// // End state stuff ////////////////////////////// @@ -6663,6 +6648,7 @@ export class KupDataTable { } render() { + console.log('ketchup kup-data-table render'); this.#kupManager.perfMonitoring.mark('componentRender'); this.#thRefs = []; this.#rowsRefs = []; diff --git a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx index beaecdc0b5..7931e0d627 100644 --- a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx +++ b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx @@ -43,7 +43,6 @@ import { KupStore } from '../kup-state/kup-store'; import { KupImageListState } from './kup-image-list-state'; import { TreeNodePath } from '../kup-tree/kup-tree-declarations'; import { KupPointerEventTypes } from '../../managers/kup-interact/kup-interact-declarations'; -import { KupDataNode } from '../../managers/kup-data/kup-data-declarations'; @Component({ tag: 'kup-image-list', @@ -67,6 +66,7 @@ export class KupImageList { initWithPersistedState(): void { if (this.store && this.stateId) { + this.state.load = true; const state = this.store.getState(this.stateId); if (state != null) { this.currentNode = @@ -80,19 +80,7 @@ export class KupImageList { persistState(): void { if (this.store && this.stateId) { - let somethingChanged = false; - let cNodeRowId = this.currentNode ? this.currentNode.id : ''; - - if ( - !this.#kupManager.objects.deepEqual( - this.state.selectedTreeNodePath, - cNodeRowId - ) - ) { - this.state.selectedTreeNodePath = cNodeRowId; - somethingChanged = true; - } - + let somethingChanged = this.#checkUpdateState(); if (!this.state.load) { this.state.load = true; return; @@ -103,6 +91,22 @@ export class KupImageList { } } + #checkUpdateState(): boolean { + let somethingChanged = false; + let cNodeRowId = this.currentNode ? this.currentNode.id : ''; + + if ( + !this.#kupManager.objects.deepEqual( + this.state.selectedTreeNodePath, + cNodeRowId + ) + ) { + this.state.selectedTreeNodePath = cNodeRowId; + somethingChanged = true; + } + return somethingChanged; + } + /*-------------------------------------------------*/ /* P r o p s */ /*-------------------------------------------------*/ diff --git a/packages/ketchup/src/components/kup-tree/kup-tree.tsx b/packages/ketchup/src/components/kup-tree/kup-tree.tsx index 11c7723371..8f96eefc90 100644 --- a/packages/ketchup/src/components/kup-tree/kup-tree.tsx +++ b/packages/ketchup/src/components/kup-tree/kup-tree.tsx @@ -131,6 +131,7 @@ export class KupTree { initWithPersistedState(): void { if (this.store && this.stateId) { + this.state.load = true; const state = this.store.getState(this.stateId); if (state != null) { this.density = state.density; @@ -146,71 +147,7 @@ export class KupTree { persistState(): void { if (this.store && this.stateId) { - let somethingChanged = false; - - if ( - !this.#kupManager.objects.deepEqual( - this.state.filters, - this.filters - ) - ) { - this.state.filters = { ...this.filters }; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.density, - this.density - ) - ) { - this.state.density = this.density; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.showFilters, - this.showFilters - ) - ) { - this.state.showFilters = this.showFilters; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.showFooter, - this.showFooter - ) - ) { - this.state.showFooter = this.showFooter; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.totals, - this.totals - ) - ) { - this.state.totals = { ...this.totals }; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.globalFilter, - this.globalFilter - ) - ) { - this.state.globalFilter = this.globalFilter; - somethingChanged = true; - } - if ( - !this.#kupManager.objects.deepEqual( - this.state.globalFilterValue, - this.globalFilterValue - ) - ) { - this.state.globalFilterValue = this.globalFilterValue; - somethingChanged = true; - } + let somethingChanged = this.#checkUpdateState(); if (!this.state.load) { this.state.load = true; return; @@ -221,6 +158,71 @@ export class KupTree { } } + #checkUpdateState(): boolean { + let somethingChanged = false; + + if ( + !this.#kupManager.objects.deepEqual( + this.state.filters, + this.filters + ) + ) { + this.state.filters = { ...this.filters }; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.density, + this.density + ) + ) { + this.state.density = this.density; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.showFilters, + this.showFilters + ) + ) { + this.state.showFilters = this.showFilters; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.showFooter, + this.showFooter + ) + ) { + this.state.showFooter = this.showFooter; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual(this.state.totals, this.totals) + ) { + this.state.totals = { ...this.totals }; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.globalFilter, + this.globalFilter + ) + ) { + this.state.globalFilter = this.globalFilter; + somethingChanged = true; + } + if ( + !this.#kupManager.objects.deepEqual( + this.state.globalFilterValue, + this.globalFilterValue + ) + ) { + this.state.globalFilterValue = this.globalFilterValue; + somethingChanged = true; + } + return somethingChanged; + } /*-------------------------------------------------*/ /* P r o p s */ /*-------------------------------------------------*/