@topconsultnpm/sdkui-react-beta 6.6.1 → 6.6.2

package/lib/components/base/TMListViewOLD.js

@@ -0,0 +1,321 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Colors, FontSize } from '../../utils/theme';
+import { getColor } from '../../helper/helpers';
+import { IconCloseCircle, IconDown, IconInsertAbove, IconInsertBelow, IconSearch, IconUp } from '../../helper';
+const StyledContainer = styled.div `
+    z-index: -1;
+    border: 1px solid;
+    border-color: ${props => getColor(props.$color)} ;
+    overflow: auto;
+    max-height: ${props => props.$maxHight};
+`;
+const StyledListViewWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    font-size: ${props => props.$fontSize} ;
+`;
+const StyledListItemContainer = styled.div `
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    background-color: ${props => !props.$isSelected ? props.$index % 2 === 0 ? 'white' : Colors.colore_sul_primary : Colors.secondary};
+    font-size: ${props => props.$fontSize};
+    color: ${props => !props.$isSelected ? Colors.primary : 'white'};
+    z-index: 1;
+`;
+const StyledLsitItemCheck = styled.input `
+    margin-right: 5px;
+    cursor: pointer;
+`;
+const StyledListItem = styled.li `
+    padding: 3px;
+    list-style: none;
+    text-decoration: none;
+    color: ${props => props.$color};
+`;
+const StyledListViewItemDetails = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 5px;
+    background-color: ${Colors.contenitore_su_colore_primary};
+    color: white;
+    width: 100%;
+`;
+const StyledDetailsToggleButton = styled.button `
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    color: ${props => props.$isSelected ? 'white' : Colors.primary};
+`;
+const StyledListViewSearchContainer = styled.div `
+    position: sticky;
+    padding: 5px;
+    top: 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding-bottom: 5px;
+    border-bottom: 1px solid ${props => getColor(props.$color)};
+    background-color: ${props => getColor(props.$color)};
+    z-index: 100;
+`;
+const StyledSelectOptionCheckBox = styled.input `
+    margin-right: 5px;
+    margin-left: 2px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+`;
+const StyledListViewSearchInput = styled.input `
+    width: 100%;
+    padding: 3px 10px;
+    border-radius: 5px;
+    border-width: 1px ;
+    border-color: ${props => getColor(props.$color)};
+    border-style: solid;
+    color: ${props => getColor(props.$color)};
+    &::placeholder{
+        color: ${props => getColor(props.$color)};
+    }
+    &:focus{
+        outline: none;
+        background-color: #fbf5ca;      
+    }
+`;
+const StyledListViewSearchIcon = styled.button `
+    background-color: transparent;
+    border: none;
+    cursor: ${props => props.$isSearch ? 'pointer' : 'default'};
+    color: ${props => getColor(props.$color)};
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    &:focus{
+        outline: ${props => !props.$isSearch && 'none'};     
+    }
+`;
+const StyledListViewFooter = styled.div `
+    z-index: 100;
+    position: sticky;
+    bottom: 0px;
+    width: 100%;
+    padding: 5px;
+    background-color: ${props => getColor(props.$color)};
+    color: white;
+    font-size: 1rem;
+`;
+const StyledShowHideDetailsButton = styled.button `
+    background-color: transparent;
+    border: none;
+    margin-right: 10px;
+    /* color: ${props => getColor(props.$color)}; */
+    color: white;
+    cursor: pointer;
+    transform: translateY(1.5px);
+`;
+const TMListViewOLD = ({ maxHeight = '100%', selectedValues = [], color = 'primary', footer = false, header = false, customItemDetails, customListViewItem, hasItemDetails = false, detailsFields, dataSource, displayField, searchable, elementStyle, selectedListItems, multipleSelect = false, fontSize = FontSize.defaultFontSize }) => {
+    const [focusedItem, setFocusedItem] = useState(undefined);
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [detailRequestItems, setDetailRequestItems] = useState([]);
+    const [currentDetailsFields, setCurrentDetailsField] = useState(detailsFields);
+    const [searchValue, setSearchValue] = useState('');
+    const [currentDataSource, setCurrentDataSource] = useState([]);
+    const [usedFields, setUsedFields] = useState([]);
+    useEffect(() => {
+        if (!selectedValues.fieldName) {
+            setSelectedItems(selectedValues);
+        }
+        else {
+            let data = [];
+            for (let value of selectedValues.fieldValues) {
+                for (let d of currentDataSource) {
+                    if (value === d[selectedValues.fieldName]) {
+                        data.push(d);
+                    }
+                }
+            }
+            setSelectedItems(data);
+        }
+    }, [currentDataSource]);
+    useEffect(() => { selectedListItems && selectedListItems(selectedItems); }, [selectedItems]);
+    useEffect(() => {
+        const selectByKey = (e) => { if (e.code === 'Space' && focusedItem) {
+            onListItemClick();
+        } };
+        window.addEventListener('keyup', selectByKey);
+        return () => window.removeEventListener('keyup', selectByKey);
+    }, [focusedItem, selectedItems]);
+    useEffect(() => {
+        let arr = [];
+        if (customListViewItem) {
+            for (let key of Object.keys(customListViewItem.props)) {
+                arr.push(customListViewItem.props[key]);
+            }
+        }
+        else {
+            arr.push(displayField);
+        }
+        if (customItemDetails) {
+            for (let key of Object.keys(customItemDetails.props)) {
+                arr.push(customItemDetails.props[key]);
+            }
+        }
+        else if (currentDetailsFields) {
+            for (let field of currentDetailsFields) {
+                arr.push(field);
+            }
+        }
+        setUsedFields(arr);
+    }, [customItemDetails, customListViewItem, displayField, detailsFields]);
+    useEffect(() => {
+        if (hasItemDetails) {
+            let keys = Object.keys(dataSource[0]);
+            if (!displayField) {
+                let detailsKeys = keys.filter(key => key !== displayField);
+                if (!detailsFields) {
+                    setCurrentDetailsField(detailsKeys);
+                }
+                else {
+                    setCurrentDetailsField(detailsFields);
+                }
+            }
+            else {
+                if (!detailsFields) {
+                    setCurrentDetailsField(keys);
+                }
+                else {
+                    setCurrentDetailsField(detailsFields);
+                }
+            }
+        }
+    }, [hasItemDetails, detailsFields, displayField]);
+    useEffect(() => {
+        if (searchable) {
+            if (searchValue.length > 0) {
+                filter(dataSource, searchValue);
+            }
+            else {
+                setCurrentDataSource(dataSource);
+            }
+        }
+        else {
+            setCurrentDataSource(dataSource);
+        }
+    }, [dataSource, searchValue, searchable]);
+    const showHideDetails = () => {
+        if (detailRequestItems.length > 0) {
+            setDetailRequestItems([]);
+        }
+        else {
+            setDetailRequestItems(currentDataSource);
+        }
+    };
+    const filter = (dataSource, value) => {
+        let arr = [];
+        for (let data of dataSource) {
+            if (typeof data === 'string') {
+                setCurrentDataSource(dataSource.filter(item => item.toString().toLowerCase().includes(value.toLowerCase())));
+            }
+            else {
+                for (let key of usedFields) {
+                    if (data[key].toString().toLowerCase().includes(value.toLowerCase())) {
+                        if (!arr.includes(data)) {
+                            arr.push(data);
+                        }
+                    }
+                }
+                ;
+                setCurrentDataSource(arr);
+            }
+        }
+    };
+    const onListItemClick = () => {
+        if (multipleSelect) {
+            if (!hasItem(selectedItems, focusedItem)) {
+                setSelectedItems(prev => [...prev, focusedItem]);
+            }
+            else {
+                (setSelectedItems(selectedItems.filter(item => JSON.stringify(item) !== JSON.stringify(focusedItem))));
+            }
+        }
+        else {
+            setSelectedItems([]);
+            setSelectedItems(prev => [...prev, focusedItem]);
+        }
+    };
+    const onCheckClick = () => { if (hasItem(selectedItems, focusedItem)) {
+        setSelectedItems(selectedItems.filter(item => JSON.stringify(item) !== JSON.stringify(focusedItem)));
+    } };
+    const detailsToggle = (e) => {
+        if (detailRequestItems.includes(focusedItem)) {
+            setDetailRequestItems(detailRequestItems.filter(item => item !== focusedItem));
+        }
+        else {
+            setDetailRequestItems(prev => [...prev, focusedItem]);
+        }
+    };
+    const obj = (data, type) => {
+        let object = {};
+        switch (type) {
+            case 'item':
+                for (let key of Object.keys(customListViewItem?.props)) {
+                    object[key] = data[customListViewItem?.props[key]];
+                }
+                break;
+            case 'details':
+                for (let key of Object.keys(customItemDetails?.props)) {
+                    object[key] = data[customItemDetails?.props[key]];
+                }
+                break;
+        }
+        return object;
+    };
+    const hasItem = (arr, el) => {
+        let bool = false;
+        for (let item of arr) {
+            if (typeof item === 'string') {
+                if (item === el) {
+                    bool = true;
+                    break;
+                }
+                else {
+                    bool = false;
+                }
+            }
+            else {
+                if (JSON.stringify(item) == JSON.stringify(el)) {
+                    bool = true;
+                    break;
+                }
+                else {
+                    bool = false;
+                }
+            }
+        }
+        return bool;
+    };
+    const selectDeselectAll = () => { if (selectedItems.length > 0) {
+        setSelectedItems([]);
+    }
+    else {
+        setSelectedItems(currentDataSource);
+    } };
+    const renderedList = () => {
+        return (currentDataSource?.map((d, index) => (_jsxs(StyledListViewWrapper, { "$fontSize": fontSize, children: [_jsxs(StyledListItemContainer, { "$isFocused": focusedItem === d, "$isSelected": hasItem(selectedItems, d), "$fontSize": fontSize, tabIndex: 0, "$index": index, onFocus: () => setFocusedItem(d), children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: '100%' }, onClick: onListItemClick, children: [multipleSelect && _jsx(StyledLsitItemCheck, { checked: hasItem(selectedItems, d), onChange: onCheckClick, tabIndex: -1, type: "checkbox" }), !customListViewItem ? _jsx(StyledListItem, { "$color": color, children: displayField ? d[displayField] : d }) : React.cloneElement(customListViewItem, obj(d, 'item'))] }), hasItemDetails && _jsx(StyledDetailsToggleButton, { "$isSelected": hasItem(selectedItems, d), onClick: (e) => detailsToggle(e), children: detailRequestItems.includes(d) ? _jsx(IconUp, {}) : _jsx(IconDown, {}) })] }), detailRequestItems.includes(d) && _jsxs(StyledListViewItemDetails, { children: [" ", !customItemDetails ? currentDetailsFields.map((detail, index) => (_jsxs("div", { children: [detail, ": ", d[detail]] }, index))) : React.cloneElement(customItemDetails, obj(d, 'details')), " "] })] }, index))));
+    };
+    const renderedHeader = () => {
+        return (_jsxs(StyledListViewSearchContainer, { "$color": color, children: [multipleSelect && _jsx(StyledSelectOptionCheckBox, { "$color": color, "$fontsize": fontSize, type: 'checkbox', checked: selectedItems.length > 0, onChange: selectDeselectAll }), hasItemDetails && _jsx(StyledShowHideDetailsButton, { "$color": color, onClick: showHideDetails, children: detailRequestItems.length > 0 ? _jsx(IconInsertBelow, {}) : _jsx(IconInsertAbove, {}) }), searchable && _jsx(StyledListViewSearchInput, { "$color": color, value: searchValue, onChange: (e) => setSearchValue(e.target.value), placeholder: 'search' }), searchable && _jsx(StyledListViewSearchIcon, { onClick: () => searchValue.length > 0 && setSearchValue(''), "$isSearch": searchValue.length > 0, "$color": color, children: searchValue.length > 0 ? _jsx(IconCloseCircle, {}) : _jsx(IconSearch, {}) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: _jsxs(StyledContainer, { "$maxHight": maxHeight, "$color": color, children: [" ", (searchable || multipleSelect) && renderedHeader(), " ", _jsx("ul", { children: renderedList() }), " ", multipleSelect && footer && _jsxs(StyledListViewFooter, { "$color": color, children: ["Selected items: ", selectedItems.length, " | Visible items: ", currentDataSource.length] })] }) }));
+};
+export default TMListViewOLD;

package/lib/components/editors/TMTextArea.js

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react';
 import { StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize } from '../../utils/theme';
 import { useWindowWidth } from '../../helper';
-import TMContextMenu, { useContextMenu } from '../base/TMContextMenu';
+import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';

package/lib/components/editors/TMTextBox.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { StyledEditor, StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
 import { IconHide, IconShow, useWindowWidth } from '../../helper';
-import TMContextMenu, { useContextMenu } from '../base/TMContextMenu';
+import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
 import ShowAlert from '../base/TMAlert';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';

package/lib/components/index.d.ts

@@ -1,9 +1,9 @@
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
-export * from './base/TMContextMenu';
+export * from './base/TMContextMenuOLD';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
-export { default as TMListView } from './base/TMListView';
+export { default as TMListViewOLD } from './base/TMListViewOLD';
 export { default as TMList } from './base/TMList';
 export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';
@@ -30,6 +30,7 @@ export * from './choosers/TMMetadataChooser';
 export * from './choosers/TMUserChooser';
 export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
 export * from './query/TMQueryEditor';
+export * from './query/TMQueryResultForm';
 export * from './base/TMTab';
 export { default as TMHeader } from "./sidebar/TMHeader";
 export { default as TMSidebar } from "./sidebar/TMSidebar";

package/lib/components/index.js

@@ -3,9 +3,9 @@
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
-export * from './base/TMContextMenu';
+export * from './base/TMContextMenuOLD';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
-export { default as TMListView } from './base/TMListView';
+export { default as TMListViewOLD } from './base/TMListViewOLD';
 export { default as TMList } from './base/TMList';
 export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';
@@ -36,6 +36,7 @@ export * from './choosers/TMUserChooser';
 export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
 //query
 export * from './query/TMQueryEditor';
+export * from './query/TMQueryResultForm';
 //tab
 export * from './base/TMTab';
 // others

package/lib/components/query/TMQueryEditor.d.ts

@@ -1,6 +1,28 @@
 import React from 'react';
-import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
 import { ITMApplyFormProps, FormModes } from '../../ts';
+import { DynDataListsToBeRefreshed } from '../choosers/TMDynDataListItemChooser';
+export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $borderRadius?: string;
+}>> & string;
+export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled?: boolean;
+}>> & string;
+export declare const colorValue = "rgba(224,224,224,.5)";
+export declare const colorBrackets = "rgba(209,52,56,.3)";
+export declare const colorOperator = "rgba(16,124,16,.3)";
+export declare const color1 = "#F5DD9C";
+export declare const color2 = "rgba(15,108,189,.3)";
+export declare const color3 = "rgb(199, 236, 172)";
+export declare const color4 = "rgb(223, 204, 251)";
+export declare const color5 = "rgb(249, 181, 114)";
+export declare const color6 = "rgb(170, 215, 217)";
+export declare const color7 = "rgb(243, 208, 215)";
+export declare const color8 = "rgb(236, 202, 156)";
+export declare const color9 = "rgb(137, 185, 173)";
+export declare const colorX = "rgb(246, 245, 242)";
 export declare enum Descriptors {
     Query = 3
 }
@@ -14,7 +36,7 @@ export declare function useOrchApplyForm<T>(d: Descriptors, formMode: FormModes,
     applyData: () => void;
 };
 interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
-    onlyAdvancedSearchMode?: boolean;
+    runQdImmediately?: boolean;
     validateSelect?: boolean;
     validateOrderBy?: boolean;
     showDistinct?: boolean;
@@ -22,6 +44,20 @@ interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
     borderRadius?: string;
     searchText?: string;
     onFromTIDChanged?: (tid: number) => void;
+    onQDChanged?: (qd: QueryDescriptor) => void;
 }
 declare const TMQueryEditor: React.FunctionComponent<ITMQueryEditor>;
 export default TMQueryEditor;
+export declare const TMQdWhereItemValueEditor: ({ tid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, numberOfOperands, md, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }: {
+    tid: number | undefined;
+    value: string | undefined;
+    queryParamsDynDataList?: string[];
+    allowMultipleSelection: boolean;
+    numberOfOperands: number;
+    autoFocus: boolean;
+    containerElement: Element | undefined;
+    md: MetadataDescriptor | undefined;
+    onValueChanged?: (value: any) => void;
+    onValueChange?: (value: any) => void;
+    onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
+}) => import("react/jsx-runtime").JSX.Element;