@talxis/base-controls 1.2406.2

package/src/components/Grid/validation/model/ColumnValidation.ts

@@ -0,0 +1,81 @@
+import isNumeric from "validator/lib/isNumeric";
+import isEmail from "validator/lib/isEmail";
+import isURL from "validator/lib/isURL";
+import dayjs from "dayjs";
+import { DataType } from "../../core/enums/DataType";
+import { IGridColumn } from "../../core/interfaces/IGridColumn";
+import { GridDependency } from "../../core/model/GridDependency";
+import { Grid } from "../../core/model/Grid";
+
+export class ColumnValidation extends GridDependency {
+    private _column: IGridColumn;
+    private _forceNullCheck: boolean;
+    
+    constructor(grid: Grid, column: IGridColumn, forceNullCheck?: boolean) {
+        super(grid);
+        this._column = column;
+        this._forceNullCheck = forceNullCheck ?? false;
+    }
+    public validate(value: any): [boolean, string] {
+        const isNull = this._isNull(value);
+        if((this._column.isRequired || this._forceNullCheck)) {
+            if(isNull) {
+                return [false, this._labels["validation-input-value"]()]
+            }
+        }
+        //can be null
+        else if(isNull) {
+            return [true, ""]
+        }
+        switch (this._column.dataType) {
+            case DataType.WHOLE_NONE:
+            case DataType.DECIMAL:
+            {
+                value = `${value}`;
+                if (!isNumeric(value)) {
+                    return [false, 'Invalid input!'];
+                }
+                break;
+            }
+            case DataType.SINGLE_LINE_EMAIL: {
+                value = `${value}`;
+                if (!isEmail(value)) {
+                    return [false, this._labels["validation-email"]()]
+                }
+                break;
+            }
+            case DataType.SINGLE_LINE_URL: {
+                value = `${value}`;
+                if (!isURL(value)) {
+                    return [false, this._labels["validation-url"]()]
+                }
+                break;
+            }
+            case DataType.DATE_AND_TIME_DATE_AND_TIME:
+            case DataType.DATE_AND_TIME_DATE_ONLY: {
+                const date = dayjs(value);
+                if(!date.isValid()) {
+                    return [false, this._labels["validation-date"]()]
+                }
+                break;
+            }
+            default: {
+                if(!value) {
+                    return [false, this._labels["validation-input-value"]()]
+                }
+            }
+        }
+        return [true, ""];
+    }
+    private _isNull(value: any) {
+        if(!value) {
+            return true;
+        }
+        if(value?.length === 0) {
+            return true;
+        }
+    }
+    private get _labels() {
+        return this._grid.labels;
+    }
+}

package/src/components/Lookup/Lookup.tsx

@@ -0,0 +1,199 @@
+
+import { ILookup } from "./interfaces";
+import { useLookup } from "./hooks/useLookup";
+import React, { useEffect, useRef } from 'react';
+import { useTheme } from "@fluentui/react";
+import { IItemProps, TagPicker } from "@talxis/react-components/dist/components/TagPicker";
+import { TargetSelector } from "./components/TargetSelector";
+import { useMouseOver } from "../../hooks/useMouseOver";
+import { getLookupStyles } from "./styles";
+import { IBasePicker } from "@fluentui/react/lib/components/pickers/BasePicker.types";
+import { ITag } from "@fluentui/react/lib/components/pickers/TagPicker/TagPicker.types";
+import { RecordCreator } from "./components/RecordCreator";
+import { useFocusIn } from "../../hooks/useFocusIn";
+
+export const Lookup = (props: ILookup) => {
+    const context = props.context;
+    const ref = useRef<HTMLDivElement>(null);
+    const componentRef = useRef<IBasePicker<ITag>>(null);
+    const itemLimit = props.parameters.MultipleEnabled?.raw === true ? Infinity : 1
+    const theme = useTheme();
+    const styles = getLookupStyles(theme, context.mode.allocatedHeight, itemLimit === 1);
+    const [value, entities, labels, records, selectEntity, getSearchResults] = useLookup(props);
+    const mouseOver = useMouseOver(ref);
+    const isFocused = useFocusIn(ref);
+    const firstRenderRef = useRef(true);
+    const shouldFocusRef = useRef(false);
+
+
+    useEffect(() => {
+        if (firstRenderRef.current) {
+            firstRenderRef.current = false;
+            return;
+        }
+        //@ts-ignore
+        if (componentRef.current.state.suggestionsVisible) {
+            //if the suggestions callout is open and the selected target changes, refresh the results
+            forceSearch();
+        }
+    }, [entities])
+
+    useEffect(() => {
+        const onKeyPress = (ev: KeyboardEvent) => {
+            if (ev.key === 'Backspace') {
+                const picker = ref.current?.querySelector('[class*="TALXIS__tag-picker__root"]');
+                if ((document.activeElement === picker) && value.length === 1) {
+                    records.select(undefined);
+                    setTimeout(() => {
+                        componentRef.current?.focusInput()
+                    }, 200)
+                }
+            }
+        }
+        document.addEventListener('keydown', onKeyPress)
+
+        return () => {
+            document.removeEventListener('keydown', onKeyPress);
+        }
+    }, [value]);
+
+    useEffect(() => {
+        if(props.parameters.AutoFocus?.raw === true) {
+            focus();
+        }
+    }, []);
+
+    const focus = () => {
+        if(componentRef.current?.items?.length === itemLimit) {
+            //@ts-ignore
+            ref.current?.querySelector('[class*="TALXIS__tag-picker__root"]').focus();
+            return;
+        }
+        componentRef.current?.focusInput();
+    }
+
+    const forceSearch = async () => {
+        //@ts-ignore - We need to use internal methods to show and fill the suggestions on entity change
+        componentRef.current.suggestionStore.updateSuggestions([]);
+        //@ts-ignore - ^^same as above
+        componentRef.current.setState({
+            suggestionsVisible: true,
+            suggestionsLoading: true,
+        });
+        //@ts-ignore - ^^same as above
+        const results = await onResolveSuggestions(componentRef.current.input.current.value)
+        //@ts-ignore - ^^same as above
+        componentRef.current.updateSuggestionsList(results);
+        //@ts-ignore - ^^same above
+        componentRef.current.setState({
+            isMostRecentlyUsedVisible: false,
+            suggestionsVisible: true,
+            moreSuggestionsAvailable: false,
+        });
+    }
+
+    const isComponentActive = () => {
+        return mouseOver || isFocused;
+    }
+
+    const onResolveSuggestions = async (filter: string, selectedItems?: IItemProps[] | undefined): Promise<IItemProps[]> => {
+        //TODO: onResolveSuggestions gets called when the record gets selected resulting in unnecessary call
+        const results = await getSearchResults(filter);
+        const suggestions: IItemProps[] = [];
+        for(const result of results) {
+            if(selectedItems?.find(x => x.key === result.id)) {
+                continue;
+            }
+            const metadata = await entities.find(x => x.entityName === result.entityType)?.metadata;
+            suggestions.push({
+                key: result.id,
+                text: result.name || labels.noName(),
+                secondaryText: metadata?.DisplayName,
+                'data-entity': result.entityType
+            })
+        }
+        return suggestions;
+    }
+    return (
+        <div className={styles.root} ref={ref}>
+                <TagPicker
+                    componentRef={componentRef}
+                    resolveDelay={200}
+                    stackItems={itemLimit === 1}
+                    pickerCalloutProps={{
+                        className: styles.suggestions,
+                    }}
+                    pickerSuggestionsProps={{
+                        loadingText: labels.searching(),
+                        noResultsFoundText: labels.noRecordsFound(),
+                        //@ts-ignore
+                        suggestionsHeaderText: <>
+                            {props.parameters.IsInlineNewEnabled?.raw !== false &&
+                                <RecordCreator labels={labels} entities={entities} onCreateRecord={records.create} />
+                            }
+                            {props.parameters.value.attributes.Targets.length > 1 &&
+                                <TargetSelector labels={labels} entities={entities} onEntitySelected={(entityName) => {
+                                    selectEntity(entityName);
+
+                                }} />
+                            }
+                        </>
+                    }}
+                    transparent={!isComponentActive() && itemLimit === 1}
+                    onChange={(items) => {
+                        records.select(items?.map(item => {
+                            return {
+                                entityType: item['data-entity'],
+                                id: item.key,
+                                name: item.text
+                            }
+                        }))
+                    }}
+                    searchBtnProps={{
+                        iconProps: {
+                            iconName: 'Search'
+                        }
+                    }}
+                    selectedItems={value.map(lookup => {
+                        return {
+                            key: lookup.id,
+                            text: lookup.name || labels.noName(),
+                            'data-entity': lookup.entityType,
+                            'data-navigation-enabled': props.parameters.EnableNavigation?.raw !== false,
+                            onClick: () => {
+                                if (props.parameters.EnableNavigation?.raw === false) {
+                                    return;
+                                }
+                                context.navigation.openForm({
+                                    entityName: lookup.entityType,
+                                    entityId: lookup.id
+                                })
+                            },
+
+                            deleteButtonProps: isComponentActive() || itemLimit > 1 ? {
+                                key: 'delete',
+                                iconProps: {
+                                    iconName: 'ChromeClose',
+                                    styles: {
+                                        root: {
+                                            fontSize: 12,
+                                            width: 16,
+                                            color: `${theme.palette.black} !important`
+                                        }
+                                    }
+                                },
+                                onClick: () => {
+                                    shouldFocusRef.current = false;
+                                    records.deselect(lookup);
+                                    setTimeout(() => {
+                                        focus()
+                                    }, 200)
+                                }
+                            } : undefined
+                        }
+                    })}
+                    itemLimit={itemLimit}
+                    onResolveSuggestions={onResolveSuggestions} />
+        </div>
+    )
+};

package/src/components/Lookup/components/RecordCreator.tsx

@@ -0,0 +1,53 @@
+
+//@ts-nocheck - typescript
+import { ContextualMenuItemType, IContextualMenuItem, useTheme } from "@fluentui/react";
+import { CommandBarButton } from "@fluentui/react/lib/components/Button/CommandBarButton/CommandBarButton";
+import { IEntity, ILookupTranslations } from "../interfaces";
+import { getLookupStyles } from "../styles";
+import { StringProps } from '../../../types';
+import { useLoadedEntities } from "../hooks/useLoadedEntities";
+import React from 'react';
+
+interface IRecordCreator {
+    labels: Required<StringProps<ILookupTranslations>>,
+    entities: IEntity[];
+    onCreateRecord: (entityName: string) => void;
+}
+
+export const RecordCreator = (props: IRecordCreator) => {
+    const {labels, entities, onCreateRecord} = {...props};
+    const [loadedEntities] = useLoadedEntities(entities);
+    const theme = useTheme();
+    const styles = getLookupStyles(theme, 0)
+    const selectedEntity = entities.find(x => x.selected);
+
+    return (
+        <CommandBarButton
+            className={styles.createRecordBtn}
+            iconProps={{
+                iconName: 'Add'
+            }}
+            onClick={selectedEntity ? () => onCreateRecord(selectedEntity.entityName) : undefined}
+            menuProps={!selectedEntity ? {
+                calloutProps: {
+                    coverTarget: false  
+                },
+                isBeakVisible: true,
+                items: loadedEntities ? (() => {
+                    const items: IContextualMenuItem[] = [{
+                        key: 'header',
+                        itemType: ContextualMenuItemType.Header,
+                        text: 'Vyberte tabulku'
+                       }]
+                       return [...items, ...loadedEntities.map(entity => {
+                           return {
+                               key: entity.entityName,
+                               text: entity.metadata.DisplayName,
+                               onClick: () => onCreateRecord(entity.entityName)
+                           }
+                       })];
+                })() : []
+            }: undefined} 
+            text={labels.newRecord()} />
+    )
+}

package/src/components/Lookup/components/TargetSelector.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { IEntity, ILookupTranslations } from '../interfaces';
+import { Text } from '@fluentui/react/lib/Text';
+import { Link, useTheme } from '@fluentui/react';
+import { getLookupStyles, getTargetSelectorStyles } from '../styles';
+import { StringProps } from '../../../types';
+import { useLoadedEntities } from '../hooks/useLoadedEntities';
+
+interface ITargetSelector {
+    labels: Required<StringProps<ILookupTranslations>>,
+    entities: IEntity[];
+    onEntitySelected: (entityName: string | null) => void;
+}
+
+
+export const TargetSelector = (props: ITargetSelector) => {
+    const { labels, entities, onEntitySelected } = { ...props };
+    const [loadedEntities] = useLoadedEntities(entities);
+    const theme = useTheme();
+    const styles = getTargetSelectorStyles(theme);
+
+    return (
+        <div className={styles.targetSelector}>
+            <Text variant='small'>{labels.resultsFrom()} </Text>
+            <div className={styles.targetSelectorLinks}>
+                <Link
+                    onClick={() => onEntitySelected(null)}
+                    className={styles.targetSelectorLink}
+                    data-selected={!entities.find(x => x.selected)}>All</Link>
+                {loadedEntities &&
+                    <>
+                        {loadedEntities.map((entity) => {
+                            return <Link
+                                className={styles.targetSelectorLink}
+                                data-selected={entity.selected}
+                                onClick={() => onEntitySelected(entity.entityName)}>{entity.metadata.DisplayName}</Link>
+                        })}
+                    </>
+                }
+            </div>
+        </div>
+    )
+}

package/src/components/Lookup/hooks/useFetchXml.ts

@@ -0,0 +1,31 @@
+import { useRef } from "react"
+import { IEntity } from "../interfaces";
+import { Sdk } from "../lib";
+
+export const useFetchXml = (context: ComponentFramework.Context<any>): [
+    (viewId: string) => Promise<string>,
+    (entity: IEntity, fetchXml: string, query: string) => Promise<string>
+] => {
+    const cachedFetchXml = useRef<{
+        [viewId: string]: Promise<ComponentFramework.WebApi.Entity>
+    }>({});
+
+    const get = async (viewId: string): Promise<string> => {
+        if (!cachedFetchXml.current[viewId]) {
+            cachedFetchXml.current[viewId] = context.webAPI.retrieveRecord('savedquery', viewId, '?$select=fetchxml');
+        }
+        return (await cachedFetchXml.current[viewId]).fetchxml;
+    }
+    const applyLookupQuery = async (entity: IEntity, fetchXml: string, query: string): Promise<string> => {
+        if (!query) {
+            return fetchXml
+        }
+        const metadata = await entity.metadata;
+        const xmlObject = Sdk.FetchXml.fetch.fromXml(fetchXml);
+        xmlObject.entity.addFilter(new Sdk.FetchXml.filter(Sdk.FetchXml.FilterType.Or, [
+            new Sdk.FetchXml.condition(metadata.PrimaryNameAttribute, Sdk.FetchXml.Operator.Like, [new Sdk.FetchXml.value(`%${query}%`)])
+        ]))
+        return xmlObject.toXml();
+    }
+    return [get, applyLookupQuery]
+}

package/src/components/Lookup/hooks/useLoadedEntities.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { IEntity, IMetadata } from "../interfaces";
+
+interface ILoadedEntity extends Omit<IEntity, 'metadata'> {
+    metadata: IMetadata
+}
+
+export const useLoadedEntities = (entities: IEntity[]): [ILoadedEntity[] | null] => {
+    const [loadedEntities, setLoadedEntities] = useState<ILoadedEntity[] | null>(null);
+    useEffect(() => {
+        (async () => {
+            setLoadedEntities(await Promise.all(entities.map(async entity => {
+                return {
+                    entityName: entity.entityName,
+                    selected: entity.selected,
+                    metadata: await entity.metadata
+                }
+            })))
+        })();
+    }, [entities]);
+
+    return [loadedEntities]
+}

package/src/components/Lookup/hooks/useLookup.ts

@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react";
+import { useComponent } from "../../../hooks";
+import { StringProps } from "../../../types";
+import { IEntity, ILookup, ILookupTranslations } from "../interfaces";
+import { lookupTranslations } from "../translations";
+import { useFetchXml } from "./useFetchXml";
+
+export const useLookup = (props: ILookup): [
+    ComponentFramework.LookupValue[],
+    IEntity[],
+    Required<StringProps<ILookupTranslations>>,
+    {
+        create: (entityName: string) => void,
+        select: (record: ComponentFramework.LookupValue[] | undefined) => void,
+        deselect: (record: ComponentFramework.LookupValue) => void,
+    },
+    (entityName: string | null) => void,
+    (query: string) => Promise<ComponentFramework.LookupValue[]>
+] => {
+
+    const targets = props.parameters.value.attributes.Targets;
+    const boundValue = props.parameters.value.raw;
+    const context = props.context;
+    const [labels, notifyOutputChanged] = useComponent('Lookup', props, lookupTranslations);
+    const [getFetchXml, applyLookupQuery] = useFetchXml(context);
+    
+    const [entities, setEntities] = useState<IEntity[]>(() => {
+        return targets.map(target => {
+            return {
+                entityName: target,
+                selected: targets.length === 1 ? true : false,
+                metadata: props.context.utils.getEntityMetadata(target, []) as any,
+            }
+        })
+    });
+
+    const selectedEntity = entities.find(x => x.selected);
+
+    const selectEntity = (entityName: string | null) => {
+        setEntities([...entities as IEntity[]].map(entity => {
+            return {
+                entityName: entity.entityName,
+                metadata: entity.metadata,
+                selected: entity.entityName === entityName
+            }
+        }))
+    }
+
+    const selectRecords = (records: ComponentFramework.LookupValue[] | undefined) => {
+        notifyOutputChanged({
+            value: records
+        })
+    }
+    const getSearchFetchXml = async (entityName: string, query: string): Promise<string> => {
+        const response = (await props.parameters.value.getAllViews(entityName)).find(x => x.isDefault);
+        if (!response?.viewId) {
+            throw new Error(`Entity ${entityName} does not have a default view id!`);
+        }
+        let fetchXml = response?.fetchXml
+        if(!fetchXml) {
+            fetchXml = await getFetchXml(response.viewId)
+        }
+        return applyLookupQuery(entities.find(x => x.entityName === entityName)!, fetchXml, query);
+
+    }
+    const getSearchResults = async (query: string): Promise<ComponentFramework.LookupValue[]> => {
+        const fetchXmlMap = new Map<string, Promise<string>>();
+        if(selectedEntity) {
+            fetchXmlMap.set(selectedEntity.entityName, getSearchFetchXml(selectedEntity.entityName, query))
+        }
+        else {
+            for (const entity of targets) {
+                fetchXmlMap.set(entity, getSearchFetchXml(entity, query))
+            }
+        }
+        await Promise.all(fetchXmlMap.values());
+        const responsePromiseMap = new Map<string, Promise<ComponentFramework.WebApi.RetrieveMultipleResponse>>()
+        for (const [entityName, fetchXml] of fetchXmlMap) {
+            responsePromiseMap.set(entityName, context.webAPI.retrieveMultipleRecords(entityName, `?fetchXml=${encodeURIComponent((await fetchXml))}`))
+        }
+        await Promise.all(responsePromiseMap.values());
+        const result: ComponentFramework.LookupValue[] = [];
+        for (const [entityName, response] of responsePromiseMap) {
+            for (const entity of (await response).entities) {
+                const entityMetadata = await entities.find(x => x.entityName === entityName)!.metadata;
+                result.push({
+                    entityType: entityName,
+                    id: entity[entityMetadata.PrimaryIdAttribute],
+                    name: entity[entityMetadata.PrimaryNameAttribute]
+                });
+            }
+        }
+        return result;
+    }
+
+    const createRecord = async (entityName: string) => {
+        const result = await context.navigation.openForm({
+            entityName: entityName,
+            useQuickCreateForm: true
+        });
+        if (!result.savedEntityReference) {
+            return;
+        }
+        notifyOutputChanged({
+            value: result.savedEntityReference
+        })
+    }
+
+    const deselectRecord = (record: ComponentFramework.LookupValue) => {
+        const map = new Map<string, ComponentFramework.LookupValue>(boundValue.map(value => [value.id, value]));
+        map.delete(record.id);
+        notifyOutputChanged({
+            value: [...map.values()]
+        })
+    }
+
+    return [
+        boundValue, entities, labels, {
+            create: createRecord,
+            deselect: deselectRecord,
+            select: selectRecords
+        },
+        selectEntity,
+        getSearchResults
+    ];
+};

package/src/components/Lookup/index.ts

@@ -0,0 +1,2 @@
+export * from './Lookup';
+export * from './interfaces';

package/src/components/Lookup/interfaces.ts

@@ -0,0 +1,45 @@
+import { ILookupProperty, ITwoOptionsProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+
+export interface ILookup extends IComponent<ILookupParameters, ILookupOutputs, ILookupTranslations> {
+    /**
+     * If provided, the Lookup will use the returned values of this function to display search results.
+     * @param {any} entityNames An array of entity names that he Lookup is currently targeting.
+     * @param {any} query: User text input
+     * @returns {any}
+     */
+    onSearch?: (entityNames: string[], query: string) => Promise<ComponentFramework.LookupValue[]>
+}
+
+export interface ILookupParameters extends IBaseParameters {
+    IsInlineNewEnabled?: ITwoOptionsProperty;
+    MultipleEnabled?: ITwoOptionsProperty;
+    EnableNavigation?: ITwoOptionsProperty;
+    value: ILookupProperty;
+}
+
+export interface ILookupOutputs extends IOutputs {
+    value?: ComponentFramework.LookupValue[]
+}
+
+export interface ILookupTranslations extends ITranslations {
+    search: {[LCID: number]: string};
+    newRecord: {[LCID: number]: string};
+    searching: {[LCID: number]: string};
+    noRecordsFound: {[LCID: number]: string};
+    resultsFrom: {[LCID: number]: string};
+    noName: {[LCID: number]: string};
+}
+
+export interface IMetadata extends ComponentFramework.PropertyHelper.EntityMetadata {
+    DisplayName: string;
+    PrimaryNameAttribute: string;
+    PrimaryIdAttribute: string;
+}
+
+export interface IEntity {
+    entityName: string;
+    selected: boolean;
+    metadata: Promise<IMetadata>
+}