@topconsultnpm/sdkui-react 6.17.0-test10

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
+interface ITMQuerySummary {
+    children?: React.ReactNode;
+    qd?: QueryDescriptor;
+    validationItems?: ValidationItem[];
+    raiseWarningForOnlyMetadataDcmtTypes?: boolean;
+    validateSelect?: boolean;
+    validateOrderBy?: boolean;
+    showDistinct?: boolean;
+    onValueChanged?: (value: QueryDescriptor | undefined) => void;
+    onEditClick?: () => void;
+    onClose?: () => void;
+}
+declare const TMQuerySummary: React.FunctionComponent<ITMQuerySummary>;
+export default TMQuerySummary;

package/lib/components/query/TMQuerySummary.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { QueryDescriptor, ResultTypes, TMScopeNames } from '@topconsultnpm/sdk-ts';
+import { FontSize } from '../../utils/theme';
+import TMQueryEditor from './TMQueryEditor';
+import TMButton from '../base/TMButton';
+import { getQueryCountAsync, IconCount, IconEraser, IconPencil, SDKUI_Localizator } from '../../helper';
+import TMVilViewer from '../base/TMVilViewer';
+import { FormModes } from '../../ts';
+import TMModal from '../base/TMModal';
+// #region Style
+const StyledWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
+`;
+const StyledQueryToolbar = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    gap: 8px;
+`;
+const TMQuerySummary = ({ children, qd, validateSelect = true, validateOrderBy = true, raiseWarningForOnlyMetadataDcmtTypes = false, showDistinct = false, validationItems = [], onValueChanged, onEditClick, onClose }) => {
+    const [showEditor, setShowEditor] = useState(false);
+    const validationItemsQd = validationItems.filter(o => o.PropertyScopes.includes(TMScopeNames.qd) || o.PropertyName == TMScopeNames.qd);
+    const useInternalEditor = onEditClick === undefined;
+    return (_jsxs(StyledWrapper, { children: [_jsxs(StyledQueryToolbar, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.QueryDefine, icon: _jsx(IconPencil, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onEditClick ? onEditClick() : setShowEditor(true) }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryCount, icon: _jsx(IconCount, { fontSize: 16 }), disabled: validationItemsQd.filter(o => o.ResultType == ResultTypes.ERROR).length > 0, btnStyle: 'toolbar', onClick: () => getQueryCountAsync(qd, true) }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryClear, icon: _jsx(IconEraser, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onValueChanged?.(new QueryDescriptor()) }), children] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%', overflowX: 'auto' }, children: [qd && qd.from &&
+                        _jsx(TMQueryEditor, { formMode: FormModes.ReadOnly, inputData: qd, showDistinct: showDistinct, isModal: false, showToolbar: false, validateSelect: validateSelect, validateOrderBy: validateOrderBy, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes }), _jsx("div", { style: { padding: '0px 5px' }, children: _jsx(TMVilViewer, { vil: validationItemsQd }) })] }), useInternalEditor && showEditor &&
+                _jsx(TMModal, { title: SDKUI_Localizator.QueryDefine, children: _jsx(TMQueryEditor, { formMode: FormModes.Update, inputData: qd, isModal: true, showDistinct: showDistinct, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes, validateSelect: validateSelect, validateOrderBy: validateOrderBy, onApplied: (newValue) => onValueChanged?.(newValue), onClose: () => { setShowEditor(false); } }) })] }));
+};
+export default TMQuerySummary;

package/lib/components/settings/SettingsAppearance.d.ts

@@ -0,0 +1,14 @@
+declare const SettingsAppearance: ({ landingPagesOptions, permissions }: {
+    landingPagesOptions?: {
+        display: string;
+        value: string;
+    }[];
+    permissions?: {
+        canArchive: boolean;
+        canSearch: boolean;
+        wgGroupLicense: boolean;
+        dossiersLicense: boolean;
+        workFlowLicense: boolean;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default SettingsAppearance;

package/lib/components/settings/SettingsAppearance.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import TMLayoutContainer from '../base/TMLayout';
+import TMDropDown from '../editors/TMDropDown';
+import TMCheckBox from '../editors/TMCheckBox';
+import TMButton from '../base/TMButton';
+import { LandingPages, SDKUI_Globals, SDKUI_Localizator, ThemeSettings } from '../../helper';
+const fontSizes = [
+    { value: "10px", display: "10px" },
+    { value: "11px", display: "11px" },
+    { value: "12px", display: "12px" },
+    { value: "13px", display: "13px" },
+    { value: "14px", display: "14px" },
+    { value: "15px", display: "15px" },
+    { value: "16px", display: "16px" },
+    { value: "17px", display: "17px" },
+    { value: "18px", display: "18px" },
+    { value: "19px", display: "19px" },
+    { value: "20px", display: "20px" }
+];
+const fontFamilies = [
+    { value: "Inter", display: "Inter" },
+    { value: "Roboto", display: "Roboto" }
+];
+const SettingsAppearance = ({ landingPagesOptions, permissions = { canArchive: true, canSearch: true, dossiersLicense: true, wgGroupLicense: true, workFlowLicense: true } }) => {
+    const [, setForceUpdate] = useState(0); // Dummy state to force re-renders
+    const triggerUIUpdate = () => setForceUpdate((prev) => prev + 1); // Increment dummy state to re-render
+    const filteredLandingPageOptopns = useMemo(() => {
+        let options = landingPagesOptions ?? [];
+        if (!permissions?.canArchive) {
+            options = options.filter(option => option.value !== LandingPages.ARCHIVE);
+        }
+        if (!permissions?.canSearch) {
+            options = options.filter(option => option.value !== LandingPages.SEARCH);
+        }
+        if (!permissions?.wgGroupLicense) {
+            options = options.filter(option => option.value !== LandingPages.WORKING_GROUPS);
+        }
+        if (!permissions?.dossiersLicense) {
+            options = options.filter(option => option.value !== LandingPages.DOSSIERS);
+        }
+        if (!permissions?.workFlowLicense) {
+            options = options.filter(option => option.value !== LandingPages.WORKFLOW_APPR);
+        }
+        return options;
+    }, [permissions?.canArchive, permissions?.canSearch, permissions?.wgGroupLicense, permissions?.dossiersLicense, permissions?.workFlowLicense, landingPagesOptions]);
+    return (_jsxs(TMLayoutContainer, { children: [landingPagesOptions && _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginBottom: '5px' }, children: SDKUI_Localizator.LandingPage }), landingPagesOptions && _jsx(TMDropDown, { dataSource: filteredLandingPageOptopns, value: SDKUI_Globals.userSettings.landingPage, width: '230px', onValueChanged: (e) => {
+                    SDKUI_Globals.userSettings.landingPage = e.target.value;
+                    triggerUIUpdate();
+                } }), _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginTop: '10px' }, children: 'Font' }), _jsx(TMDropDown, { label: SDKUI_Localizator.Name, dataSource: fontFamilies, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontFamily, onValueChanged: (e) => {
+                    let newFamily = e.target.value;
+                    SDKUI_Globals.userSettings.themeSettings.fontFamily = newFamily;
+                    triggerUIUpdate();
+                } }), _jsx(TMDropDown, { label: SDKUI_Localizator.Size, dataSource: fontSizes, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontSize, onValueChanged: (e) => {
+                    let newpx = e.target.value;
+                    SDKUI_Globals.userSettings.themeSettings.fontSize = newpx;
+                    triggerUIUpdate();
+                } }), _jsx("p", { style: { fontSize: '1rem', fontWeight: 'bold', marginTop: '10px', marginBottom: '5px' }, children: SDKUI_Localizator.Grids }), _jsx(TMCheckBox, { label: SDKUI_Localizator.ShowRowSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines, onValueChanged: (newValue) => {
+                    SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines = newValue;
+                    triggerUIUpdate();
+                } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.ShowColumnSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines, onValueChanged: (newValue) => {
+                    SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines = newValue;
+                    triggerUIUpdate();
+                } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.UseNativeScrollbar, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar, onValueChanged: (newValue) => {
+                    SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar = newValue;
+                    triggerUIUpdate();
+                } }), _jsx(TMButton, { elementStyle: { marginTop: '10px' }, caption: SDKUI_Localizator.Restore, showTooltip: false, onClick: () => {
+                    SDKUI_Globals.userSettings.themeSettings = new ThemeSettings();
+                    SDKUI_Globals.userSettings.landingPage = LandingPages.DASHBOARD;
+                    triggerUIUpdate();
+                } })] }));
+};
+export default SettingsAppearance;

package/lib/components/sidebar/TMAboutApp.d.ts

@@ -0,0 +1,8 @@
+interface TMAboutAppProps {
+    app: boolean;
+    skdui: boolean;
+    sdk: boolean;
+    websdk: boolean;
+}
+export declare const TMAboutApp: (props: TMAboutAppProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/sidebar/TMAboutApp.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { FontSize, TMColors } from "../../utils/theme";
+import { versionAndBuildtypeInfo } from "../../helper";
+import { moduleTypes } from "../../ts";
+import { SDK_Globals } from "@topconsultnpm/sdk-ts";
+const StyledSettingsMenuContainer = styled.div ` display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-size: ${FontSize.defaultFontSize}; `;
+const StyledSettingsMenuItem = styled.div ` display: flex; flex-direction: row; justify-content: center; align-items: center; `;
+const StyledSettingsMenuItemTitle = styled.div ` margin-right: 5px; `;
+const StyledSettingsMenuItemCircle = styled.span ` margin-right: 5px; font-size: 1.1rem; `;
+const StyledSettingsMenuItemVersion = styled.div ` font-weight: bold; `;
+export const TMAboutApp = (props) => {
+    return (_jsxs(StyledSettingsMenuContainer, { children: [props.app && _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.info }, children: "\u25CF" }), " ", SDK_Globals.appModule] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.info }, children: versionAndBuildtypeInfo(moduleTypes.APP) })] }), props.skdui && _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.error }, children: "\u25CF" }), " SDKUI-REACT"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.error }, children: versionAndBuildtypeInfo(moduleTypes.SDKUI) })] }), props.sdk && _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.success }, children: "\u25CF" }), " SDK-TS"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.success }, children: versionAndBuildtypeInfo(moduleTypes.SDK) })] }), props.websdk && _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.info }, children: "\u25CF" }), " WEBSDK"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.info }, children: versionAndBuildtypeInfo(moduleTypes.WEBSDK) })] })] }));
+};

package/lib/components/sidebar/TMCommandsPanel.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare const StyledCommandsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isMobile?: boolean;
+}>> & string;
+export interface TMCommandItemProps {
+    icon: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+interface TMCommandsPanelProps {
+    isMobile?: boolean;
+    items: TMCommandItemProps[];
+}
+declare const TMCommandsPanel: React.FC<TMCommandsPanelProps>;
+export default TMCommandsPanel;

package/lib/components/sidebar/TMCommandsPanel.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+export const StyledCommandsPanel = styled.div `
+    display: flex;
+    flex-direction: ${({ $isMobile }) => ($isMobile ? 'row' : 'column')};
+    align-items: center;
+    width: ${({ $isMobile }) => ($isMobile ? '100%' : '50px')};
+    height: ${({ $isMobile }) => ($isMobile ? '50px' : 'max-content')};
+    background: transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box;
+    border-radius: ${({ $isMobile }) => ($isMobile ? '10px' : '10px 0px 0px 10px')};
+    padding: 10px;
+    gap: 10px;
+`;
+const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { "$isMobile": isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
+            background: iconProps.selected ? 'white' : 'transparent',
+            borderRadius: '6px',
+            color: iconProps.selected ? '#005B97' : 'white',
+            opacity: iconProps.disabled ? 0.4 : 1,
+            cursor: iconProps.disabled ? 'not-allowed' : 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '32px',
+            width: '32px',
+            margin: '0 auto',
+        }, onClick: iconProps.disabled ? undefined : iconProps.onClick, children: _jsx("span", { style: { fontSize: 24 }, children: iconProps.icon }) }, idx))) }));
+export default TMCommandsPanel;

package/lib/components/sidebar/TMHeader.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { CultureIDs } from '@topconsultnpm/sdk-ts';
+export declare enum TMSearchContext {
+    JOBS = "jobs",
+    PROCESSES = "processes",
+    PROCESS_MONITOR = "ProcessMonitor",
+    JOBS_LIST = "JobsList",
+    PLATFORM = "OrchestrationPlatform",
+    QE = "QueryEditor"
+}
+interface ITMHeader {
+    showSettingsMenu?: boolean;
+    showSearchBar?: boolean;
+    clearSearchJobValue?: boolean;
+    clearSearchQEValue?: boolean;
+    searchContext?: TMSearchContext;
+    settingsMenuContext?: React.ReactNode;
+    customButtons?: React.ReactNode;
+    onMenusOpen?: VoidFunction;
+    onChangePassword?: VoidFunction;
+    onLogout?: VoidFunction;
+    onSeacrhJobslistValueChange?: (e: string) => void;
+    onSeacrhJobsValueChange?: (e: string) => void;
+    onSeacrhProcessValueChange?: (e: string) => void;
+    onSeacrhProcessMonitorValueChange?: (e: string) => void;
+    onSeacrhPlatformValueChange?: (e: string) => void;
+    onSeacrhQEValueChange?: (e: string) => void;
+    onSettingsClick?: () => void;
+}
+export declare const getInitials: (name: string) => string;
+export declare const getCultureFlag: (cultureId: CultureIDs) => string;
+export declare const getCultureDisplayName: (cultureId: CultureIDs) => string;
+export declare const copyUserInfoToClipboard: (userName: string, cultureId: string, archiveId: string, archiveDesc: string, endpoint: string, domain?: string) => void;
+export declare const TMSearchBar: ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }: {
+    maxWidth?: string;
+    marginLeft?: string;
+    searchValue: string;
+    onSearchValueChanged: (value: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMHeader: React.FC<ITMHeader>;
+export default TMHeader;
+export declare function IconHeaderNotifications(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
+export declare function IconHeaderSettings(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;