@leav/ui 0.0.1-alpha-2 → 0.0.1-alpha-3

package/src/components/AttributePicker/AttributesList/AttributesList.tsx

@@ -1,330 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {PlusOutlined, SearchOutlined} from '@ant-design/icons';
-import {useApolloClient} from '@apollo/client';
-import {localizedTranslation, Override} from '@leav/utils';
-import {Table, TableColumnsType, TablePaginationConfig} from 'antd';
-import {FilterValue, SorterResult} from 'antd/lib/table/interface';
-import {KitButton, KitInput, KitTag} from 'aristid-ds';
-import {Key, useEffect, useRef, useState} from 'react';
-import styled from 'styled-components';
-import {
-    defaultPaginationPageSize,
-    PreviewSize,
-    tagColorByAttributeFormat,
-    tagColorByAttributeType
-} from '../../../constants';
-import {useLang} from '../../../hooks';
-import {useSharedTranslation} from '../../../hooks/useSharedTranslation';
-import {
-    AttributeDetailsFragment,
-    AttributeFormat,
-    AttributesSortableFields,
-    AttributeType,
-    GetAttributesQuery,
-    GetAttributesQueryVariables,
-    PermissionsActions,
-    PermissionTypes,
-    SortOrder,
-    useGetAttributesQuery,
-    useIsAllowedQuery
-} from '../../../_gqlTypes';
-import {getAttributesQuery} from '../../../_queries/attributes/getAttributesQuery';
-import {extractPermissionFromQuery} from '../../../_utils';
-import {EditAttributeModal} from '../../EditAttributeModal';
-import {EntityCard, IEntityData} from '../../EntityCard';
-import {ErrorDisplay} from '../../ErrorDisplay';
-
-const HeaderWrapper = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.5rem;
-
-    .kit-input-wrapper {
-        flex-grow: 1;
-    }
-`;
-
-type ListAttributeType = Override<GetAttributesQuery['attributes']['list'][number], {label: string}> & {key: string};
-
-interface IAttributesListProps {
-    onSelect: (selectedAttributes: string[]) => void;
-    selected?: string[];
-    multiple?: boolean;
-    showCreateButton?: boolean;
-    baseFilters?: GetAttributesQueryVariables['filters'];
-}
-
-function AttributesList({
-    onSelect,
-    selected = [],
-    multiple = true,
-    showCreateButton = true,
-    baseFilters
-}: IAttributesListProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    const [pageSize, setPageSize] = useState(defaultPaginationPageSize);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [sort, setSort] = useState<GetAttributesQueryVariables['sort']>();
-    const [filters, setFilters] = useState<GetAttributesQueryVariables['filters']>({});
-    const [tableData, setTableData] = useState<ListAttributeType[]>([]);
-
-    const {loading, error, data} = useGetAttributesQuery({
-        variables: {
-            pagination: {
-                limit: pageSize,
-                offset: (currentPage - 1) * pageSize
-            },
-            sort,
-            filters: {
-                ...filters,
-                ...baseFilters
-            }
-        }
-    });
-
-    const isAllowedQueryResult = useIsAllowedQuery({
-        fetchPolicy: 'cache-and-network',
-        variables: {
-            type: PermissionTypes.admin,
-            actions: [PermissionsActions.admin_create_attribute]
-        }
-    });
-    const canCreate =
-        showCreateButton && extractPermissionFromQuery(isAllowedQueryResult, PermissionsActions.admin_create_attribute);
-
-    const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>(selected);
-    const [isNewAttributeModalOpen, setIsNewAttributeModalOpen] = useState(false);
-    const client = useApolloClient();
-
-    const _handleSelectionChange = (selection: Key[]) => {
-        setSelectedRowKeys(selection);
-        onSelect(selection as string[]);
-    };
-
-    const _handleRowClick = (record: ListAttributeType) => {
-        let newSelection;
-
-        if (selectedRowKeys.indexOf(record.key) === -1) {
-            newSelection = multiple ? [...selectedRowKeys, record.key] : [record.key]; // Add to selection
-        } else {
-            newSelection = multiple ? selectedRowKeys.filter(key => key !== record.key) : []; // Remove from selection
-        }
-
-        setSelectedRowKeys(newSelection);
-        onSelect(newSelection as string[]);
-    };
-
-    const _handleSearchSubmit = (e: React.SyntheticEvent<HTMLInputElement>) => {
-        setFilters({
-            ...filters,
-            label: `%${e.currentTarget.value}%`
-        });
-    };
-
-    const _handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        // Handle clearing input only. Submitting input is otherwise handled by "onPressEnter"
-        if (!e.currentTarget.value) {
-            _handleSearchSubmit(e);
-        }
-    };
-
-    const _handleClickNewAttribute = () => {
-        setIsNewAttributeModalOpen(true);
-    };
-    const _handleCloseNewAttribute = () => setIsNewAttributeModalOpen(false);
-
-    const _handlePostCreate = async (newAttribute: AttributeDetailsFragment) => {
-        const allAttributesData = client.readQuery<GetAttributesQuery>({query: getAttributesQuery});
-
-        if (allAttributesData) {
-            client.writeQuery({
-                query: getAttributesQuery,
-                data: {
-                    attributes: {
-                        ...allAttributesData.attributes,
-                        list: [newAttribute, ...allAttributesData.attributes.list]
-                    }
-                }
-            });
-        }
-        const newSelection = [...selectedRowKeys, newAttribute.id];
-        onSelect(newSelection as string[]);
-        setSelectedRowKeys(newSelection);
-    };
-
-    const _handleChange = (
-        pagination: TablePaginationConfig,
-        filter: Record<string, FilterValue | null>,
-        sorter: SorterResult<ListAttributeType> | Array<SorterResult<ListAttributeType>>
-    ) => {
-        setCurrentPage(pagination.current);
-        setPageSize(pagination.pageSize);
-
-        const relevantSorter = Array.isArray(sorter) ? sorter[0] : sorter;
-        if (relevantSorter.column && relevantSorter.order) {
-            const newSort = {
-                field: AttributesSortableFields[relevantSorter.columnKey],
-                order: relevantSorter.order === 'ascend' ? SortOrder.asc : SortOrder.desc
-            };
-            setSort(newSort);
-        }
-
-        const newFilters: GetAttributesQueryVariables['filters'] = {};
-        for (const [field, filterValue] of Object.entries(filter)) {
-            if (filterValue) {
-                newFilters[field] = filterValue;
-            }
-        }
-        setFilters(newFilters);
-    };
-
-    if (error || isAllowedQueryResult.error) {
-        return <ErrorDisplay message={error?.message || isAllowedQueryResult?.error?.message} />;
-    }
-
-    const columns: TableColumnsType<ListAttributeType> = [
-        {
-            title: t('attributes.attribute'),
-            key: 'attribute',
-            render: (_, attribute) => {
-                const attributeIdentity: IEntityData = {
-                    label: attribute.label,
-                    subLabel: attribute.id,
-                    preview: null,
-                    color: null
-                };
-                return <EntityCard entity={attributeIdentity} size={PreviewSize.small} />;
-            }
-        },
-        {
-            title: t('attributes.type'),
-            dataIndex: 'type',
-            key: 'type',
-            width: '150px',
-            render: (type: AttributeType) => (
-                <KitTag color={tagColorByAttributeType[type]}>{t(`attributes.type_${type}`)}</KitTag>
-            ),
-            filters: Object.values(AttributeType).map(type => ({
-                text: t(`attributes.type_${type}`),
-                value: type
-            })),
-            onFilter: (value, record) => record.type === value,
-            sorter: (a, b) => {
-                const aTypeLabel = t(`attributes.type_${a.type}`);
-                const bTypeLabel = t(`attributes.type_${b.type}`);
-
-                return aTypeLabel.localeCompare(bTypeLabel);
-            }
-        },
-        {
-            title: t('attributes.format'),
-            dataIndex: 'format',
-            key: 'format',
-            width: '150px',
-            render: (format: AttributeFormat) =>
-                format ? (
-                    <KitTag color={tagColorByAttributeFormat[format]}>{t(`attributes.format_${format}`)}</KitTag>
-                ) : null,
-            filters: Object.values(AttributeFormat).map(format => ({
-                text: t(`attributes.format_${format}`),
-                value: format
-            })),
-            onFilter: (value, record) => record.format === value,
-            sorter: (a, b) => {
-                const aFormatLabel = t(`attributes.format_${a.format}`);
-                const bFormatLabel = t(`attributes.format_${b.format}`);
-
-                return aFormatLabel.localeCompare(bFormatLabel);
-            }
-        }
-    ];
-
-    useEffect(() => {
-        // To avoid temporary display of "no data" when pagination changes
-        if (loading || !data) {
-            return;
-        }
-
-        const newTableData = data?.attributes?.list
-            ? [...data.attributes.list].map(attribute => ({
-                  ...attribute,
-                  key: attribute.id,
-                  label: localizedTranslation(attribute.label, lang)
-              }))
-            : [];
-
-        setTableData(newTableData);
-    }, [loading, data]);
-
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [inputRef]);
-
-    const tableHeader = (
-        <HeaderWrapper>
-            <KitInput
-                onPressEnter={_handleSearchSubmit}
-                onChange={_handleSearchChange}
-                placeholder={t('global.search') + '...'}
-                allowClear
-                suffix={<SearchOutlined />}
-                // @ts-ignore - ref is a valid prop
-                ref={inputRef}
-            />
-            {canCreate && (
-                <KitButton type="primary" icon={<PlusOutlined />} onClick={_handleClickNewAttribute}>
-                    {t('attributes.new_attribute')}
-                </KitButton>
-            )}
-        </HeaderWrapper>
-    );
-
-    return (
-        <>
-            <Table
-                loading={loading}
-                size="middle"
-                rowSelection={{
-                    type: multiple ? 'checkbox' : 'radio',
-                    selectedRowKeys,
-                    onChange: _handleSelectionChange
-                }}
-                columns={columns}
-                dataSource={tableData}
-                bordered
-                pagination={{
-                    position: ['bottomCenter'],
-                    pageSize,
-                    current: currentPage,
-                    total: data?.attributes?.totalCount ?? 0,
-                    showTotal: total => t('global.total_count', {total})
-                }}
-                scroll={{y: 'calc(95vh - 20rem)'}}
-                title={() => tableHeader}
-                onRow={record => ({
-                    onClick: () => _handleRowClick(record)
-                })}
-                onChange={_handleChange}
-            />
-            {isNewAttributeModalOpen && (
-                <EditAttributeModal
-                    open={isNewAttributeModalOpen}
-                    onClose={_handleCloseNewAttribute}
-                    onPostCreate={_handlePostCreate}
-                    width={790}
-                />
-            )}
-        </>
-    );
-}
-
-export default AttributesList;

package/src/components/AttributePicker/AttributesList/index.ts

@@ -1,4 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as AttributesList} from './AttributesList';

package/src/components/AttributePicker/index.ts

@@ -1,4 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as AttributePicker} from './AttributePicker';

package/src/components/AttributesSelectionList/Attribute/Attribute.tsx

@@ -1,67 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {localizedTranslation} from '@leav/utils';
-import {Checkbox, Radio, Space} from 'antd';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {useLang} from '_ui/hooks';
-import {attributeToSelectedAttribute} from '../helpers/attributeToSelectedAttribute';
-import {AttributesSelectionListActionTypes} from '../reducer/attributesSelectionListReducer';
-import {useAttributesSelectionListState} from '../reducer/attributesSelectionListStateContext';
-import {SmallText, TextAttribute} from '../sharedComponents';
-import {ICommonAttributeComponentProps} from '../_types';
-
-const Item = styled.div`
-    padding: 0.5em;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    cursor: pointer;
-    border: 2px solid transparent;
-
-    &:hover {
-        border-color: ${themeVars.primaryColor};
-        background-color: ${themeVars.activeColor};
-    }
-`;
-
-const CheckboxWrapper = styled.div`
-    margin-left: 1em;
-`;
-
-function Attribute({attribute, path, library, parentAttribute}: ICommonAttributeComponentProps): JSX.Element {
-    const attributePath = [path, attribute.id].filter(p => !!p).join('.');
-    const {lang} = useLang();
-    const {state, dispatch} = useAttributesSelectionListState();
-
-    const _handleClick = () => {
-        dispatch({
-            type: AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_SELECTION,
-            attribute: attributeToSelectedAttribute(attribute, {
-                path: attributePath,
-                library,
-                parentAttributeData: parentAttribute
-            })
-        });
-    };
-
-    const label = localizedTranslation(attribute.label, lang);
-    const isSelected =
-        state.selectedAttributes.findIndex(selectedAttribute => selectedAttribute.path === attributePath) !== -1;
-
-    return (
-        <Item onClick={_handleClick} data-testid="attribute-in-list">
-            <Space>
-                <TextAttribute>{label ?? attribute.id}</TextAttribute>
-                {label && <SmallText>{attribute.id}</SmallText>}
-            </Space>
-            <CheckboxWrapper>
-                {state.multiple ? <Checkbox checked={isSelected} /> : <Radio checked={isSelected} />}
-            </CheckboxWrapper>
-        </Item>
-    );
-}
-
-export default Attribute;

package/src/components/AttributesSelectionList/Attribute/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import Attribute from './Attribute';
-export default Attribute;

package/src/components/AttributesSelectionList/AttributesSelectionList.test.tsx

@@ -1,115 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import userEvent from '@testing-library/user-event';
-import {AttributeFormat, AttributeType} from '_ui/_gqlTypes';
-import {getAttributesByLibQuery} from '_ui/_queries/attributes/getAttributesByLib';
-import {act, render, screen, within} from '_ui/_tests/testUtils';
-import AttributesSelectionList from './AttributesSelectionList';
-
-describe('AttributesSelectionList', () => {
-    test('Can select attributes in list', async () => {
-        const mocks = [
-            {
-                request: {
-                    query: getAttributesByLibQuery,
-                    variables: {
-                        library: 'test_lib'
-                    }
-                },
-                result: {
-                    data: {
-                        attributes: {
-                            list: [
-                                {
-                                    __typename: 'StandardAttribute',
-                                    id: 'test_lib',
-                                    type: AttributeType.simple,
-                                    format: AttributeFormat.text,
-                                    label: {fr: 'test attribute'},
-                                    multiple_values: false,
-                                    system: false,
-                                    readonly: false,
-                                    embedded_fields: null
-                                }
-                            ]
-                        }
-                    }
-                }
-            }
-        ];
-
-        render(<AttributesSelectionList selectedAttributes={[]} library="test_lib" onSelectionChange={jest.fn()} />, {
-            mocks
-        });
-
-        const attributesList = await screen.findByTestId('attributes-list');
-        const attributeElem = await within(attributesList).findByText('test attribute');
-
-        expect(attributeElem).toBeInTheDocument();
-
-        await act(async () => {
-            userEvent.click(attributeElem);
-        });
-
-        const selectedAttributesList = screen.getByTestId('attributes-list');
-        expect(await within(selectedAttributesList).findByText('test attribute')).toBeInTheDocument();
-    });
-
-    test('Can filter list of attributes', async () => {
-        const mocks = [
-            {
-                request: {
-                    query: getAttributesByLibQuery,
-                    variables: {
-                        library: 'test_lib'
-                    }
-                },
-                result: {
-                    data: {
-                        attributes: {
-                            list: [
-                                {
-                                    __typename: 'StandardAttribute',
-                                    id: 'attrA',
-                                    type: AttributeType.simple,
-                                    format: AttributeFormat.text,
-                                    label: {fr: 'attributeA'},
-                                    multiple_values: false,
-                                    embedded_fields: null,
-                                    system: false,
-                                    readonly: false
-                                },
-                                {
-                                    __typename: 'StandardAttribute',
-                                    id: 'attrB',
-                                    type: AttributeType.simple,
-                                    format: AttributeFormat.text,
-                                    label: {fr: 'attributeB'},
-                                    multiple_values: false,
-                                    embedded_fields: null,
-                                    system: false,
-                                    readonly: false
-                                }
-                            ]
-                        }
-                    }
-                }
-            }
-        ];
-
-        render(<AttributesSelectionList selectedAttributes={[]} library="test_lib" onSelectionChange={jest.fn()} />, {
-            mocks
-        });
-
-        const attributesList = await screen.findByTestId('attributes-list');
-
-        expect(within(attributesList).getAllByTestId('attribute-in-list')).toHaveLength(2);
-
-        await userEvent.type(screen.getByRole('textbox', {name: /search/}), 'attributeb');
-
-        expect(within(attributesList).getAllByTestId('attribute-in-list')).toHaveLength(1);
-        expect(within(attributesList).queryByText('attributeA')).not.toBeInTheDocument();
-        expect(within(attributesList).queryByText('attributeB')).toBeInTheDocument();
-    });
-});

package/src/components/AttributesSelectionList/AttributesSelectionList.tsx

@@ -1,132 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {localizedTranslation} from '@leav/utils';
-import {Input, List, Spin} from 'antd';
-import {useEffect, useReducer, useRef, useState} from 'react';
-import styled from 'styled-components';
-import {useLang} from '_ui/hooks';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {ISelectedAttribute} from '_ui/types/attributes';
-import {useGetAttributesByLibQuery} from '_ui/_gqlTypes';
-import {ErrorDisplay} from '../ErrorDisplay';
-import Attribute from './Attribute';
-import attributeSelectionListReducer, {
-    AttributesSelectionListActionTypes,
-    initialState
-} from './reducer/attributesSelectionListReducer';
-import {AttributesSelectionListStateContext} from './reducer/attributesSelectionListStateContext';
-import SelectedAttributesList from './SelectedAttributesList';
-import {CustomForm} from './sharedComponents';
-
-const ListWrapper = styled.div`
-    padding: 0.3rem 1rem 0 1rem;
-    overflow-y: scroll;
-    height: calc(100vh - 15rem);
-`;
-
-const Wrapper = styled.div<{$multiple: boolean}>`
-    display: Grid;
-    grid-template-columns: repeat(${props => (props.$multiple ? 2 : 1)}, 1fr);
-    grid-column-gap: 0.3rem;
-`;
-
-interface IAttributesSelectionListProps {
-    library: string;
-    multiple?: boolean;
-    selectedAttributes?: ISelectedAttribute[];
-    canExpandExtendedAttributes?: boolean;
-    onSelectionChange: (selectedAttributes: ISelectedAttribute[]) => void;
-}
-
-function AttributesSelectionList({
-    library,
-    multiple = true,
-    selectedAttributes = [],
-    canExpandExtendedAttributes = true,
-    onSelectionChange
-}: IAttributesSelectionListProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const searchRef = useRef<any>(null);
-    const {lang} = useLang();
-    const [searchValue, setSearchValue] = useState<string>('');
-
-    const [state, dispatch] = useReducer(attributeSelectionListReducer, {
-        ...initialState,
-        library,
-        multiple,
-        selectedAttributes,
-        canExpandExtendedAttributes
-    });
-
-    // Retrieve attributes list
-    const {loading, error} = useGetAttributesByLibQuery({
-        variables: {
-            library
-        },
-        onCompleted: data => {
-            dispatch({
-                type: AttributesSelectionListActionTypes.SET_ATTRIBUTES,
-                attributes: data.attributes?.list || []
-            });
-        }
-    });
-
-    useEffect(() => {
-        onSelectionChange(state.selectedAttributes);
-    }, [onSelectionChange, state.selectedAttributes]);
-
-    // Display list
-    if (loading) {
-        return <Spin />;
-    }
-
-    const _handleSearchChange = (search: string) => {
-        setSearchValue(search);
-    };
-
-    const attributesList = state.attributes.filter(attribute => {
-        if (!searchValue) {
-            return true;
-        }
-
-        const attributeLabel = localizedTranslation(attribute.label, lang).toLowerCase();
-
-        return attributeLabel.indexOf(searchValue) !== -1 || attribute.id.indexOf(searchValue) !== -1;
-    });
-
-    return (
-        <AttributesSelectionListStateContext.Provider value={{state, dispatch}}>
-            <Wrapper $multiple={state.multiple}>
-                <ListWrapper data-testid="attributes-list">
-                    <CustomForm>
-                        <Input.Search
-                            placeholder={t('attributes-list.search')}
-                            aria-label="search"
-                            ref={searchRef}
-                            onChange={event => _handleSearchChange(event.target.value ?? '')}
-                        />
-                    </CustomForm>
-                    {error ? (
-                        <ErrorDisplay message={error.message} />
-                    ) : (
-                        <List>
-                            {attributesList.map(attribute => (
-                                <Attribute
-                                    key={attribute.id}
-                                    attribute={attribute}
-                                    depth={0}
-                                    library={library}
-                                    path=""
-                                />
-                            ))}
-                        </List>
-                    )}
-                </ListWrapper>
-                {multiple && <SelectedAttributesList data-testid="selected-attributes-list" />}
-            </Wrapper>
-        </AttributesSelectionListStateContext.Provider>
-    );
-}
-
-export default AttributesSelectionList;