@topconsultnpm/sdkui-react 6.21.0-dev1.52 → 6.21.0-dev1.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/components/choosers/TMDataListItemChooser.js +39 -8
  2. package/lib/components/choosers/TMDynDataListItemChooser.js +2 -1
  3. package/lib/helper/helpers.js +8 -6
  4. package/package.json +1 -1
package/lib/components/choosers/TMDataListItemChooser.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import React, { useMemo, useRef, useState } from 'react';
2
+ import React, { useEffect, useMemo, useRef, useState } from 'react';
3
3
  import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts';
4
4
  import { StyledDivHorizontal } from '../base/Styled';
5
5
  import { IconSearch, SDKUI_Localizator, TMImageLibrary } from '../../helper';
@@ -9,18 +9,48 @@ import TMTooltip from '../base/TMTooltip';
9
9
  import TMSummary from '../editors/TMSummary';
10
10
  import TMChooserForm from '../forms/TMChooserForm';
11
11
  import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
12
+ import { useDataListItem } from '../../hooks/useDataListItem';
12
13
  const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, backgroundColor, showBorder = true, readOnly, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
14
+ const { loadDataListsAsync, getDataListItem, renderDataListCell, convertToDataListValue } = useDataListItem();
15
+ const [dataListLoaded, setDataListLoaded] = useState(false);
16
+ useEffect(() => {
17
+ const loadData = async () => {
18
+ if (dataListId) {
19
+ try {
20
+ setDataListLoaded(false);
21
+ await loadDataListsAsync(new Set([dataListId]));
22
+ setDataListLoaded(true);
23
+ }
24
+ catch (err) {
25
+ console.error(`Error loading DataList with ID ${dataListId}:`, err);
26
+ setDataListLoaded(false);
27
+ }
28
+ }
29
+ else {
30
+ setDataListLoaded(false);
31
+ }
32
+ };
33
+ loadData();
34
+ }, [dataListId, loadDataListsAsync]);
13
35
  const [showChooser, setShowChooser] = useState(false);
36
+ const getDisplayValue = (value) => {
37
+ if (!dataListId || !dataListLoaded)
38
+ return value;
39
+ const item = getDataListItem(dataListId, convertToDataListValue(value));
40
+ return item?.name ?? value;
41
+ };
14
42
  const renderTemplate = () => {
43
+ const MIN_COUNT_FOR_BADGE = 1;
15
44
  const MAX_VISIBLE_ITEMS = 3;
16
45
  const MAX_TOOLTIP_ITEMS = 50;
17
46
  const isPlaceholder = values?.[0] === placeHolder;
18
47
  const remainingCount = (values?.length ?? 0) - MAX_VISIBLE_ITEMS;
19
48
  const totalCount = values?.length ?? 0;
20
- const allValuesTooltip = values && values.length > MAX_TOOLTIP_ITEMS
21
- ? values.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${values.length - MAX_TOOLTIP_ITEMS})`
22
- : values?.join(', ') ?? '';
23
- return (_jsxs(StyledDivHorizontal, { style: { width: '100%', justifyContent: 'flex-start', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: [values && values.length > 0 && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '8px' }, children: [totalCount > MAX_VISIBLE_ITEMS && _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: allValuesTooltip }), children: _jsx(StyledDivHorizontal, { style: { alignItems: 'center', gap: '4px' }, children: _jsx("span", { style: {
49
+ const displayValues = values?.map(v => getDisplayValue(v)) ?? [];
50
+ const allValuesTooltip = displayValues.length > MAX_TOOLTIP_ITEMS
51
+ ? displayValues.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${values.length - MAX_TOOLTIP_ITEMS})`
52
+ : displayValues.join(', ');
53
+ return (_jsxs(StyledDivHorizontal, { style: { width: '100%', justifyContent: 'flex-start', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: [values && values.length > 0 && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '2px' }, children: [totalCount > MIN_COUNT_FOR_BADGE && _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: allValuesTooltip }), children: _jsx(StyledDivHorizontal, { style: { alignItems: 'center', gap: '4px' }, children: _jsx("span", { style: {
24
54
  backgroundColor: TMColors.primary + '15',
25
55
  color: TMColors.primary,
26
56
  borderRadius: '4px',
@@ -31,9 +61,10 @@ const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, b
31
61
  }, children: totalCount }) }) }), values.slice(0, MAX_VISIBLE_ITEMS).map((v, index) => (_jsx(React.Fragment, { children: _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsx(TMDataListItemViewer, { dataListId: dataListId, value: v, width: 'auto', showTooltip: false }), index < Math.min(values.length, MAX_VISIBLE_ITEMS) - 1 && _jsx("span", { style: { marginLeft: 0 }, children: "," })] }) }, index)))] }), values && values.length > MAX_VISIBLE_ITEMS &&
32
62
  _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: (() => {
33
63
  const remainingValues = values.slice(MAX_VISIBLE_ITEMS);
34
- return remainingValues.length > MAX_TOOLTIP_ITEMS
35
- ? remainingValues.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${remainingValues.length - MAX_TOOLTIP_ITEMS})`
36
- : remainingValues.join(', ');
64
+ const remainingDisplayValues = remainingValues.map(v => getDisplayValue(v));
65
+ return remainingDisplayValues.length > MAX_TOOLTIP_ITEMS
66
+ ? remainingDisplayValues.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${remainingValues.length - MAX_TOOLTIP_ITEMS})`
67
+ : remainingDisplayValues.join(', ');
37
68
  })() }), children: _jsx("p", { style: { marginLeft: '10px' }, children: `(+${remainingCount} ${remainingCount === 1 ? 'altro' : 'altri'})` }) })] }));
38
69
  };
39
70
  const summaryInputRef = useRef(null);
package/lib/components/choosers/TMDynDataListItemChooser.js CHANGED
@@ -84,6 +84,7 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
84
84
  _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
85
85
  };
86
86
  const renderTemplate = () => {
87
+ const MIN_COUNT_FOR_BADGE = 1;
87
88
  const MAX_VISIBLE_ITEMS = 3;
88
89
  const MAX_TOOLTIP_ITEMS = 50;
89
90
  const isPlaceholder = values?.[0] === placeHolder;
@@ -94,7 +95,7 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
94
95
  const allDescriptions = allDescriptionsArray.length > MAX_TOOLTIP_ITEMS
95
96
  ? allDescriptionsArray.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${allDescriptionsArray.length - MAX_TOOLTIP_ITEMS})`
96
97
  : allDescriptionsArray.join(', ');
97
- return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: [dataSource && descriptions.length > 0 && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '8px' }, children: [totalCount > MAX_VISIBLE_ITEMS && _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: allDescriptions }), children: _jsx(StyledDivHorizontal, { style: { alignItems: 'center', gap: '4px' }, children: _jsx("span", { style: {
98
+ return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: [dataSource && descriptions.length > 0 && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '8px' }, children: [totalCount > MIN_COUNT_FOR_BADGE && _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: allDescriptions }), children: _jsx(StyledDivHorizontal, { style: { alignItems: 'center', gap: '4px' }, children: _jsx("span", { style: {
98
99
  backgroundColor: TMColors.primary + '15',
99
100
  color: TMColors.primary,
100
101
  borderRadius: '4px',
package/lib/helper/helpers.js CHANGED
@@ -561,7 +561,7 @@ export const getMoreInfoTasksForDocument = (allTasks, TID, DID) => {
561
561
  };
562
562
  //#region Form, Page Helpers
563
563
  export const canNext = (visibleItems, selectedItems) => {
564
- if (!visibleItems)
564
+ if (!visibleItems || visibleItems.length === 0)
565
565
  return false;
566
566
  if (visibleItems.length == 1)
567
567
  return false;
@@ -569,10 +569,11 @@ export const canNext = (visibleItems, selectedItems) => {
569
569
  return false;
570
570
  if (selectedItems.length != 1)
571
571
  return false;
572
- return visibleItems.indexOf(selectedItems[0]) < visibleItems.length - 1;
572
+ let index = visibleItems.findIndex(o => o.id == selectedItems[0].id);
573
+ return index < visibleItems.length - 1;
573
574
  };
574
575
  export const getNext = (visibleItems, selectedItems) => {
575
- if (!visibleItems)
576
+ if (!visibleItems || visibleItems.length === 0)
576
577
  return;
577
578
  if (!selectedItems[0])
578
579
  return;
@@ -582,7 +583,7 @@ export const getNext = (visibleItems, selectedItems) => {
582
583
  return visibleItems[index + 1];
583
584
  };
584
585
  export const canPrev = (visibleItems, selectedItems) => {
585
- if (!visibleItems)
586
+ if (!visibleItems || visibleItems.length === 0)
586
587
  return false;
587
588
  if (visibleItems.length == 1)
588
589
  return false;
@@ -590,10 +591,11 @@ export const canPrev = (visibleItems, selectedItems) => {
590
591
  return false;
591
592
  if (selectedItems.length != 1)
592
593
  return false;
593
- return visibleItems.indexOf(selectedItems[0]) > 0;
594
+ let index = visibleItems.findIndex(o => o.id == selectedItems[0].id);
595
+ return index > 0;
594
596
  };
595
597
  export const getPrev = (visibleItems, selectedItems) => {
596
- if (!visibleItems)
598
+ if (!visibleItems || visibleItems.length === 0)
597
599
  return;
598
600
  if (!selectedItems[0])
599
601
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react",
3
- "version": "6.21.0-dev1.52",
3
+ "version": "6.21.0-dev1.54",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",