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

package/src/components/EditLibraryModal/EditLibrary/EditLibraryAttributes/AttributesList/AttributeCell/AttributeCell.tsx

@@ -1,61 +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 {ExpandAltOutlined} from '@ant-design/icons';
-import {useState} from 'react';
-import styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {PreviewSize} from '../../../../../../constants';
-import {EditAttributeModal} from '../../../../../EditAttributeModal';
-import {EntityCard, IEntityData} from '../../../../../EntityCard';
-import {FloatingMenu} from '../../../../../FloatingMenu';
-import {AttributeListType} from '../AttributesList';
-
-const Wrapper = styled.div`
-    .floating-menu {
-        display: none;
-    }
-
-    &:hover .floating-menu {
-        display: block;
-    }
-`;
-
-interface IAttributeCellProps {
-    attribute: AttributeListType;
-}
-
-function AttributeCell({attribute}: IAttributeCellProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-
-    const _handleOpenEditModal = () => setIsEditModalOpen(true);
-    const _handleCloseEditModal = () => setIsEditModalOpen(false);
-
-    const attributeIdentity: IEntityData = {
-        label: attribute.label,
-        subLabel: attribute.id,
-        preview: null,
-        color: null
-    };
-
-    const menuActions = [
-        {
-            label: t('attributes.edit'),
-            icon: <ExpandAltOutlined />,
-            onClick: _handleOpenEditModal
-        }
-    ];
-
-    return (
-        <Wrapper>
-            <EntityCard entity={attributeIdentity} size={PreviewSize.small} />
-            <FloatingMenu actions={menuActions} />
-            {isEditModalOpen && (
-                <EditAttributeModal attributeId={attribute.id} onClose={_handleCloseEditModal} open={isEditModalOpen} />
-            )}
-        </Wrapper>
-    );
-}
-
-export default AttributeCell;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryAttributes/AttributesList/AttributeCell/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 AttributeCell} from './AttributeCell';

package/src/components/EditLibraryModal/EditLibrary/EditLibraryAttributes/AttributesList/AttributesList.tsx

@@ -1,273 +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 {localizedTranslation, Override} from '@leav/utils';
-import {Table, TableColumnsType, TablePaginationConfig} from 'antd';
-import {FilterValue, SorterResult} from 'antd/es/table/interface';
-import {KitButton, KitInput, KitTag} from 'aristid-ds';
-import {useEffect, useRef, useState} from 'react';
-import styled from 'styled-components';
-import {defaultPaginationPageSize, tagColorByAttributeFormat, tagColorByAttributeType} from '../../../../../constants';
-import {useLang} from '../../../../../hooks';
-import {useSharedTranslation} from '../../../../../hooks/useSharedTranslation';
-import {
-    AttributeFormat,
-    AttributesSortableFields,
-    AttributeType,
-    GetAttributesQuery,
-    GetAttributesQueryVariables,
-    LibraryAttributesFragment,
-    SortOrder,
-    useGetAttributesQuery
-} from '../../../../../_gqlTypes';
-import {AttributePicker} from '../../../../AttributePicker';
-import {AttributeCell} from './AttributeCell';
-import {DeleteButton} from './DeleteButton';
-
-interface IAttributesListProps {
-    readOnly: boolean;
-    library: string;
-    onDeleteAttribute: (attribute: LibraryAttributesFragment) => Promise<void>;
-    onAddAttributes: (attributes: string[]) => Promise<void>;
-}
-
-const HeaderWrapper = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.5rem;
-
-    .kit-input-wrapper {
-        flex-grow: 1;
-    }
-`;
-
-// To fix a cosmetic issue with the table header (see https://github.com/ant-design/ant-design/issues/41975)
-const Wrapper = styled.div`
-    && .ant-table-header {
-        border-radius: 0;
-    }
-`;
-
-export type AttributeListType = Override<GetAttributesQuery['attributes']['list'][number], {label: string}> & {
-    key: string;
-};
-
-function AttributesList({library, readOnly, onDeleteAttribute, onAddAttributes}: IAttributesListProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-    const [isAddAttributeModalOpen, setIsAddAttributeModalOpen] = useState(false);
-
-    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<AttributeListType[]>([]);
-
-    const {loading, error, data, refetch} = useGetAttributesQuery({
-        variables: {
-            pagination: {
-                limit: pageSize,
-                offset: (currentPage - 1) * pageSize
-            },
-            sort,
-            filters: {
-                ...filters,
-                libraries: [library]
-            }
-        }
-    });
-
-    const _handleSubmitAddAttribute = async (selectedAttributes: string[]) => {
-        await onAddAttributes(selectedAttributes);
-        refetch();
-    };
-
-    const _handleDeleteAttribute = (attribute: LibraryAttributesFragment) => async () => {
-        await onDeleteAttribute(attribute);
-        refetch();
-    };
-
-    const _handleClickNewAttribute = () => {
-        setIsAddAttributeModalOpen(true);
-    };
-
-    const _handleCloseAddAttributeModal = () => setIsAddAttributeModalOpen(false);
-
-    const _handleChange = (
-        pagination: TablePaginationConfig,
-        filter: Record<string, FilterValue | null>,
-        sorter: SorterResult<AttributeListType> | Array<SorterResult<AttributeListType>>
-    ) => {
-        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);
-    };
-
-    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 columns: TableColumnsType<AttributeListType> = [
-        {
-            title: t('attributes.attribute'),
-            key: 'label',
-            render: (_, attribute) => <AttributeCell attribute={attribute} />
-        },
-        {
-            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);
-            }
-        },
-        {
-            key: 'delete',
-            title: <span></span>,
-            dataIndex: 'id',
-            width: '50px',
-            align: 'center',
-            render: (_, attribute) => (
-                <DeleteButton readOnly={readOnly} attribute={attribute} onDelete={_handleDeleteAttribute(attribute)} />
-            )
-        }
-    ];
-
-    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}
-            />
-            {!readOnly && (
-                <KitButton type="primary" icon={<PlusOutlined />} onClick={_handleClickNewAttribute}>
-                    {t('attributes.add_attribute')}
-                </KitButton>
-            )}
-        </HeaderWrapper>
-    );
-
-    return (
-        <Wrapper>
-            <Table
-                loading={loading}
-                size="middle"
-                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 - 26rem)'}}
-                title={() => tableHeader}
-                onChange={_handleChange}
-            />
-            {isAddAttributeModalOpen && (
-                <AttributePicker
-                    multiple
-                    onClose={_handleCloseAddAttributeModal}
-                    onSubmit={_handleSubmitAddAttribute}
-                    open={isAddAttributeModalOpen}
-                    baseFilters={{librariesExcluded: [library]}}
-                />
-            )}
-        </Wrapper>
-    );
-}
-
-export default AttributesList;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryAttributes/AttributesList/DeleteButton/DeleteButton.tsx

@@ -1,52 +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 {CloseOutlined} from '@ant-design/icons';
-import {Button, message, Popconfirm} from 'antd';
-import {useState} from 'react';
-import {LibraryAttributesFragment} from '../../../../../../_gqlTypes';
-import {useSharedTranslation} from '../../../../../../hooks/useSharedTranslation';
-
-interface IDeleteButtonProps {
-    attribute: LibraryAttributesFragment;
-    readOnly: boolean;
-    onDelete: (attribute: LibraryAttributesFragment) => Promise<void>;
-}
-
-function DeleteButton({attribute, readOnly, onDelete}: IDeleteButtonProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const [isLoading, setIsLoading] = useState(false);
-    const isDisabled = readOnly || attribute.system;
-
-    const _handleConfirm = async () => {
-        setIsLoading(true);
-        try {
-            await onDelete(attribute);
-        } catch (e) {
-            message.error(e.message);
-        }
-        setIsLoading(false);
-    };
-
-    return (
-        <Popconfirm
-            title={t('attributes.delete_confirm')}
-            onConfirm={_handleConfirm}
-            okText={t('global.submit')}
-            cancelText={t('global.cancel')}
-            okButtonProps={{loading: isLoading}}
-            disabled={isDisabled}
-        >
-            <Button
-                aria-label="delete"
-                size="small"
-                shape="circle"
-                style={{border: 'none', boxShadow: 'none'}}
-                icon={<CloseOutlined />}
-                disabled={isDisabled}
-            />
-        </Popconfirm>
-    );
-}
-
-export default DeleteButton;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryAttributes/AttributesList/DeleteButton/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 DeleteButton} from './DeleteButton';

package/src/components/EditLibraryModal/EditLibrary/EditLibraryAttributes/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/EditLibraryModal/EditLibrary/EditLibraryAttributes/EditLibraryAttributes.test.tsx

@@ -1,116 +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 {QueryResult} from '@apollo/client';
-import {Mockify} from '@leav/utils';
-import userEvent from '@testing-library/user-event';
-import {mockLibraryAttribute} from '_ui/__mocks__/common/attribute';
-import {mockLibraryWithDetails} from '_ui/__mocks__/common/library';
-import * as gqlTypes from '../../../../_gqlTypes';
-import {render, screen, waitFor} from '../../../../_tests/testUtils';
-import EditLibraryAttributes from './EditLibraryAttributes';
-
-jest.mock('../../../../hooks/useSharedTranslation/useSharedTranslation');
-
-describe('EditLibraryAttributes', () => {
-    const mockLibrary = {
-        ...mockLibraryWithDetails,
-        attributes: [
-            {
-                ...mockLibraryAttribute,
-                id: 'attributeA',
-                label: {
-                    fr: 'Attribut A'
-                }
-            },
-            {
-                ...mockLibraryAttribute,
-                id: 'attributeB',
-                label: {
-                    fr: 'Attribut B'
-                }
-            }
-        ]
-    };
-
-    const mockGetAttributesQuery: Mockify<QueryResult> = {
-        loading: false,
-        error: null,
-        data: {
-            attributes: {
-                totalCount: 2,
-                list: [
-                    {
-                        ...mockLibraryAttribute,
-                        id: 'attributeA',
-                        label: {
-                            fr: 'Attribut A'
-                        }
-                    },
-                    {
-                        ...mockLibraryAttribute,
-                        id: 'attributeB',
-                        label: {
-                            fr: 'Attribut B'
-                        }
-                    }
-                ]
-            }
-        }
-    };
-
-    test('Render list of attributes', async () => {
-        const user = userEvent.setup();
-        const mockSaveLibraryMutation = jest.fn().mockReturnValue({
-            data: {
-                saveLibrary: {
-                    ...mockLibraryWithDetails
-                }
-            }
-        });
-        jest.spyOn(gqlTypes, 'useSaveLibraryMutation').mockImplementation(() => [
-            mockSaveLibraryMutation,
-            {loading: false, called: false, client: null, reset: null, error: null}
-        ]);
-
-        jest.spyOn(gqlTypes, 'useGetAttributesQuery').mockImplementation(() => mockGetAttributesQuery as QueryResult);
-
-        render(<EditLibraryAttributes library={mockLibrary} />);
-
-        expect(await screen.findByText('Attribut A')).toBeInTheDocument();
-        expect(screen.getByText('Attribut B')).toBeInTheDocument();
-
-        // Delete attribute A
-        await user.click(screen.getAllByRole('button', {name: /delete/i})[0]);
-        user.click(screen.getByRole('button', {name: /submit/i})); // Confirm
-
-        await waitFor(() => {
-            expect(mockSaveLibraryMutation).toBeCalledWith({
-                variables: {
-                    library: {
-                        id: mockLibrary.id,
-                        attributes: ['attributeB']
-                    }
-                }
-            });
-        });
-    });
-
-    test('If not allowed, cannot delete an attribute', async () => {
-        jest.spyOn(gqlTypes, 'useGetAttributesQuery').mockImplementation(() => mockGetAttributesQuery as QueryResult);
-        render(
-            <EditLibraryAttributes
-                library={{
-                    ...mockLibrary,
-                    permissions: {
-                        ...mockLibrary.permissions,
-                        admin_library: false
-                    }
-                }}
-            />
-        );
-
-        // Delete attribute A
-        expect(screen.getAllByRole('button', {name: /delete/i})[0]).toBeDisabled();
-    });
-});

package/src/components/EditLibraryModal/EditLibrary/EditLibraryAttributes/EditLibraryAttributes.tsx

@@ -1,56 +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 {GetLibraryByIdQuery, LibraryAttributesFragment, useSaveLibraryMutation} from '../../../../_gqlTypes';
-import {AttributesList} from './AttributesList';
-
-interface IEditLibraryAttributesProps {
-    library: GetLibraryByIdQuery['libraries']['list'][number];
-    readOnly?: boolean;
-}
-
-function EditLibraryAttributes({library, readOnly}: IEditLibraryAttributesProps): JSX.Element {
-    const [saveLibrary] = useSaveLibraryMutation();
-    const isReadOnly = readOnly || !(library.permissions?.admin_library ?? true);
-
-    const _handleAddAttributes = async (attributes: string[]) => {
-        const newAttributes = [...(library.attributes ?? []).map(a => a.id), ...attributes];
-
-        try {
-            await saveLibrary({
-                variables: {
-                    library: {
-                        id: library.id,
-                        attributes: newAttributes
-                    }
-                }
-            });
-        } catch (e) {
-            console.error(e);
-        }
-    };
-
-    const _handleDeleteAttribute = async (attribute: LibraryAttributesFragment) => {
-        const newAttributes = (library.attributes ?? []).filter(attr => attr.id !== attribute.id).map(a => a.id);
-
-        await saveLibrary({
-            variables: {
-                library: {
-                    id: library.id,
-                    attributes: newAttributes
-                }
-            }
-        });
-    };
-
-    return (
-        <AttributesList
-            library={library.id}
-            readOnly={isReadOnly}
-            onAddAttributes={_handleAddAttributes}
-            onDeleteAttribute={_handleDeleteAttribute}
-        />
-    );
-}
-
-export default EditLibraryAttributes;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryAttributes/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 EditLibraryAttributes} from './EditLibraryAttributes';