@talxis/base-controls 1.2406.2 → 1.2406.3

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

@@ -1,81 +0,0 @@
-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

@@ -1,199 +0,0 @@
-
-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

@@ -1,53 +0,0 @@
-
-//@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

@@ -1,43 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

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

package/src/components/Lookup/interfaces.ts

@@ -1,45 +0,0 @@
-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>
-}