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

package/src/components/LibraryItemsList/LibraryItemsListTable/Table.tsx

@@ -1,328 +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 {isTypeStandard} from '@leav/utils';
-import Paragraph from 'antd/lib/typography/Paragraph';
-import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
-import React, {useEffect, useState} from 'react';
-import {ColumnWithLooseAccessor, useFlexLayout, useTable, UseTableColumnOptions} from 'react-table';
-import {useSticky} from 'react-table-sticky';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {Loading} from '_ui/components';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import useLang from '_ui/hooks/useLang';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IField, ITableCell, ITableRow} from '_ui/types/search';
-import {AttributeFormat, AttributeType} from '_ui/_gqlTypes';
-import {infosCol, INFOS_COLUMN_WIDTH, selectionColumn} from '../constants';
-import LibraryItemsListPagination from '../LibraryItemsListPagination';
-import BodyRow from './BodyRow';
-import Header from './Header';
-
-interface ITableColumn extends UseTableColumnOptions<ITableRow> {
-    accessor: string | ((row, rowIndex) => string);
-    key: string;
-    sticky?: 'left' | 'right';
-    type?: AttributeType;
-    format?: AttributeFormat;
-    embeddedPath?: string;
-}
-
-interface ICustomTableProps {
-    $scrollHorizontalActive: boolean;
-}
-
-enum FieldColumnWidth {
-    TINY = 125,
-    SMALL = 150,
-    MEDIUM = 250,
-    LARGE = 300
-}
-
-const CustomTable = styled.div<ICustomTableProps>`
-    grid-area: data;
-    height: 100%;
-    min-width: 0px;
-    width: 100%;
-    border: 1px solid ${themeVars.borderLightColor};
-    overflow-y: scroll;
-
-    &.sticky {
-        overflow: scroll;
-
-        .header {
-            position: sticky;
-            top: 0;
-            z-index: 1;
-        }
-
-        .body {
-            position: relative;
-            z-index: 0;
-        }
-
-        [data-sticky-td] {
-            position: sticky;
-        }
-    }
-`;
-
-CustomTable.displayName = 'CustomTable';
-
-const TableHead = styled.div`
-    background: ${themeVars.headerBg};
-    width: fit-content;
-    min-width: 100%;
-`;
-
-const HeaderRow = styled.div`
-    margin-left: 1px; // For better alignment with rows
-`;
-
-const HeaderCell = styled.div<{id: string}>`
-    background: ${themeVars.headerBg};
-    border-right: 1px solid ${themeVars.borderLightColor};
-    min-width: 35px;
-    max-width: ${p => (p.id === selectionColumn ? '35px' : 'auto')};
-
-    &:last-child {
-        border-right: none;
-    }
-`;
-
-const TableBody = styled.div`
-    width: fit-content;
-    min-width: 100%;
-`;
-
-const Pagination = styled.div`
-    align-self: start;
-    grid-area: pagination;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-top: 1px solid ${themeVars.borderLightColor};
-    padding-top: 8px;
-`;
-
-const _getFieldColumWidth = (field: IField): FieldColumnWidth => {
-    if (!isTypeStandard(field.type) || field.multipleValues) {
-        return FieldColumnWidth.LARGE;
-    }
-
-    switch (field.format) {
-        case AttributeFormat.boolean:
-            return FieldColumnWidth.TINY;
-        case AttributeFormat.numeric:
-        case AttributeFormat.date:
-            return FieldColumnWidth.SMALL;
-        case AttributeFormat.date_range:
-            return FieldColumnWidth.LARGE;
-        default:
-            return FieldColumnWidth.MEDIUM;
-    }
-};
-
-const Table = () => {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-
-    const {state: searchState} = useSearchReducer();
-    const [tableColumns, setTableColumns] = useState<ITableColumn[]>([]);
-    const [tableData, setTableData] = useState<ITableRow[]>([]);
-    const [scrollHorizontalActive, setScrollHorizontalActive] = useState(false);
-
-    //columns
-    useEffect(() => {
-        const startColumns: ITableColumn[] = [
-            {
-                Header: '',
-                accessor: selectionColumn,
-                key: selectionColumn,
-                sticky: 'left',
-                width: 35,
-                maxWidth: 35,
-                minWidth: 30
-            },
-            {
-                Header: t('items_list.table.infos'),
-                accessor: infosCol,
-                key: infosCol,
-                sticky: 'left'
-            }
-        ];
-
-        let columnsFromFields: ITableColumn[] = [];
-        if (searchState.attributes.length && searchState.fields.length) {
-            columnsFromFields = searchState.fields.map(field => {
-                const validAccessor = field.key.replaceAll('.', '');
-
-                return {
-                    Header: (
-                        <Paragraph
-                            ellipsis={{
-                                rows: 2,
-                                tooltip: field.label
-                            }}
-                            style={{marginBottom: 0, textAlign: 'center'}}
-                        >
-                            {field.label}
-                        </Paragraph>
-                    ),
-                    accessor: validAccessor,
-                    key: field.key,
-                    type: field.type,
-                    format: field.embeddedData?.format || field.format,
-                    embeddedPath: field.embeddedData?.path,
-                    width: _getFieldColumWidth(field)
-                };
-            });
-        }
-
-        const columns = [...startColumns, ...columnsFromFields];
-
-        setTableColumns(currentColumns => {
-            return !isEqual(currentColumns, columns) ? columns : currentColumns;
-        });
-    }, [searchState.fields, searchState.attributes, t]);
-
-    // data
-    useEffect(() => {
-        if (!tableColumns.length) {
-            return;
-        }
-
-        const data: ITableRow[] = searchState.records.reduce((allData, record, index) => {
-            if (index < searchState.pagination) {
-                const tableItem: ITableRow = tableColumns.reduce(
-                    (acc, column) => {
-                        // handle selection and infos column
-                        if (!column.type) {
-                            if (column.accessor === infosCol) {
-                                const value = record.whoAmI;
-
-                                const cellData: ITableCell = {value, type: column.type};
-                                acc[column.accessor] = cellData;
-
-                                return acc;
-                            }
-                        }
-
-                        const key = column.key;
-                        const value = (record.fields?.[key] ?? []).map(v => {
-                            if (column.embeddedPath && column.embeddedPath.length) {
-                                const pathWithoutRoot = column.embeddedPath.split('.').slice(1).join('.');
-                                try {
-                                    const content = JSON.parse(record.fields[key]);
-                                    return get(content, pathWithoutRoot);
-                                } catch (e) {
-                                    return 'error';
-                                }
-                            }
-
-                            return v.value ?? v.linkValue ?? v.treeValue;
-                        });
-
-                        acc[column.accessor as string] = {value, type: column.type, format: column.format};
-
-                        return acc;
-                    },
-                    {[selectionColumn]: null, record: record.whoAmI}
-                );
-
-                return [...allData, tableItem];
-            }
-            return allData;
-        }, []);
-
-        if (data) {
-            setTableData([...data]);
-        }
-    }, [searchState.records, searchState.pagination, tableColumns, lang]);
-
-    const handleScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
-        const scrollValue = (e.target as HTMLDivElement).scrollLeft;
-
-        if (scrollValue > 0) {
-            setScrollHorizontalActive(true);
-        } else {
-            setScrollHorizontalActive(false);
-        }
-    };
-
-    const tableInstance = useTable<ITableRow>(
-        {
-            columns: tableColumns as Array<ColumnWithLooseAccessor<ITableRow>>,
-            data: tableData
-        },
-        useFlexLayout,
-        useSticky
-    );
-
-    const {getTableProps, getTableBodyProps, headerGroups, prepareRow, rows, data} = tableInstance;
-
-    // It means we're still computing columns and data,
-    // so we don't want to render the table to avoid a first render with  empty cells
-    if (searchState.records.length && !data.length) {
-        return <Loading />;
-    }
-
-    return (
-        <>
-            <CustomTable
-                {...getTableProps()}
-                className="table sticky"
-                data-testid="table"
-                onScroll={handleScroll}
-                $scrollHorizontalActive={scrollHorizontalActive}
-            >
-                <TableHead className="header sticky">
-                    {headerGroups.map(headerGroup => (
-                        <HeaderRow {...headerGroup.getHeaderGroupProps()}>
-                            {headerGroup.headers.map(column => {
-                                const headerCellProps = column.getHeaderProps();
-
-                                if (column.id === infosCol) {
-                                    // define info column row style
-                                    headerCellProps.style = {
-                                        ...headerCellProps.style,
-                                        minWidth: INFOS_COLUMN_WIDTH,
-                                        maxWidth: INFOS_COLUMN_WIDTH
-                                    };
-                                }
-
-                                return (
-                                    <HeaderCell {...headerCellProps} id={column.id}>
-                                        {((column as unknown) as ITableColumn).key !== selectionColumn && (
-                                            <Header
-                                                id={((column as unknown) as ITableColumn).key}
-                                                type={AttributeType.simple}
-                                            >
-                                                {column.render('Header')}
-                                            </Header>
-                                        )}
-                                    </HeaderCell>
-                                );
-                            })}
-                        </HeaderRow>
-                    ))}
-                </TableHead>
-                <TableBody {...getTableBodyProps()} className="body sticky">
-                    {rows.map(row => {
-                        // Prepare the row for display
-                        prepareRow(row);
-
-                        return <BodyRow key={row.id} row={row} />;
-                    })}
-                </TableBody>
-            </CustomTable>
-            <Pagination>
-                <LibraryItemsListPagination />
-            </Pagination>
-        </>
-    );
-};
-
-export default Table;

package/src/components/LibraryItemsList/LibraryItemsListTable/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 Table from './Table';
-export default Table;

package/src/components/LibraryItemsList/MenuItemList/MenuItemList.test.tsx

@@ -1,75 +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 {render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import {mockGetLibraryDetailExtendedElement} from '_ui/__mocks__/mockQuery/mockGetLibraryDetailExtendedQuery';
-import MenuItemList from './MenuItemList';
-
-jest.mock(
-    '../MenuView',
-    () =>
-        function MenuView() {
-            return <div>MenuView</div>;
-        }
-);
-
-jest.mock('../MenuSelection', () => {
-    return function MenuSelection() {
-        return <div>MenuSelection</div>;
-    };
-});
-
-jest.mock('../SearchItems', () => {
-    return function SearchItems() {
-        return <div>SearchItems</div>;
-    };
-});
-
-jest.mock('../DisplayOptions', () => {
-    return function DisplayOptions() {
-        return <div>DisplayOptions</div>;
-    };
-});
-
-describe('MenuItemList', () => {
-    test('should have MenuView', async () => {
-        render(
-            <MockSearchContextProvider>
-                <MenuItemList refetch={jest.fn()} library={mockGetLibraryDetailExtendedElement} />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByText('MenuView')).toBeInTheDocument();
-    });
-
-    test('should have MenuSelection', async () => {
-        render(
-            <MockSearchContextProvider>
-                <MenuItemList refetch={jest.fn()} library={mockGetLibraryDetailExtendedElement} />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByText('MenuSelection')).toBeInTheDocument();
-    });
-
-    test('should have SearchItems', async () => {
-        render(
-            <MockSearchContextProvider>
-                <MenuItemList refetch={jest.fn()} library={mockGetLibraryDetailExtendedElement} />
-            </MockSearchContextProvider>
-        );
-
-        expect(await screen.findByText('SearchItems')).toBeInTheDocument();
-    });
-
-    test('should have DisplayOptions', async () => {
-        render(
-            <MockSearchContextProvider>
-                <MenuItemList refetch={jest.fn()} library={mockGetLibraryDetailExtendedElement} />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByText('DisplayOptions')).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/MenuItemList/MenuItemList.tsx

@@ -1,104 +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, RedoOutlined} from '@ant-design/icons';
-import {Button, Space} from 'antd';
-import {useState} from 'react';
-import styled from 'styled-components';
-import {CreateDirectory} from '_ui/components/CreateDirectory';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import EditRecordModal from '_ui/components/RecordEdition/EditRecordModal';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {SearchMode} from '_ui/types/search';
-import {LibraryBehavior} from '_ui/_gqlTypes';
-import {ILibraryDetailExtended} from '_ui/_queries/libraries/getLibraryDetailExtendQuery';
-import {UploadFiles} from '../../UploadFiles';
-import DisplayOptions from '../DisplayOptions';
-import MenuSelection from '../MenuSelection';
-import MenuView from '../MenuView';
-import SearchItems from '../SearchItems';
-
-interface IMenuItemListProps {
-    library: ILibraryDetailExtended;
-    refetch?: () => void;
-}
-
-const Wrapper = styled(Space)`
-    width: 100%;
-`;
-
-function MenuItemList({refetch, library}: IMenuItemListProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {state: searchState} = useSearchReducer();
-    const [isRecordCreationVisible, setIsRecordCreationVisible] = useState<boolean>(false);
-    const [isUploadFilesModalVisible, setIsUploadFilesModalVisible] = useState<boolean>(false);
-    const [isCreateDirectoryModalVisible, setIsCreateDirectoryModalVisible] = useState<boolean>(false);
-
-    const canCreateRecord = library.permissions.create_record;
-
-    const selectionMode = searchState.mode === SearchMode.select;
-
-    const _handleRecordCreationClose = () => {
-        setIsRecordCreationVisible(false);
-    };
-
-    const _handleUploadFilesClose = () => {
-        setIsUploadFilesModalVisible(false);
-    };
-
-    const _handleCreateDirectoryClose = () => {
-        setIsCreateDirectoryModalVisible(false);
-    };
-
-    const _handleClickNew = () => {
-        if (library.behavior === LibraryBehavior.standard) {
-            setIsRecordCreationVisible(true);
-        } else if (library.behavior === LibraryBehavior.files) {
-            setIsUploadFilesModalVisible(true);
-        } else if (library.behavior === LibraryBehavior.directories) {
-            setIsCreateDirectoryModalVisible(true);
-        }
-    };
-
-    return (
-        <Wrapper>
-            {library?.id && <MenuView library={library} />}
-
-            <Space size="large">
-                <MenuSelection />
-                <SearchItems />
-            </Space>
-
-            <Space size="large">
-                {!selectionMode && canCreateRecord && (
-                    <Button type="primary" icon={<PlusOutlined />} className="primary-btn" onClick={_handleClickNew}>
-                        {t('items_list.new')}
-                    </Button>
-                )}
-
-                <Space size="small">
-                    <DisplayOptions />
-                    <Button icon={<RedoOutlined />} onClick={() => refetch && refetch()} />
-                </Space>
-            </Space>
-
-            {isRecordCreationVisible && (
-                <EditRecordModal
-                    record={null}
-                    library={library.id}
-                    open={isRecordCreationVisible}
-                    onClose={_handleRecordCreationClose}
-                    valuesVersion={searchState.valuesVersions}
-                />
-            )}
-            {isUploadFilesModalVisible && (
-                <UploadFiles libraryId={library.id} multiple onClose={_handleUploadFilesClose} />
-            )}
-            {isCreateDirectoryModalVisible && (
-                <CreateDirectory libraryId={library.id} onClose={_handleCreateDirectoryClose} />
-            )}
-        </Wrapper>
-    );
-}
-
-export default MenuItemList;

package/src/components/LibraryItemsList/MenuItemList/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 MenuItemList from './MenuItemList';
-export default MenuItemList;

package/src/components/LibraryItemsList/MenuItemListSelected/ActionsMenu/ActionsMenu.test.tsx

@@ -1,29 +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 {render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import ActionsMenu from './ActionsMenu';
-
-jest.mock('_ui/components/ExportModal', () => {
-    return function ExportModal() {
-        return <div>ExportModal</div>;
-    };
-});
-
-describe('ActionsMenu', () => {
-    test('Render menu', async () => {
-        render(
-            <MockSearchContextProvider>
-                <ActionsMenu />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByRole('button')).toBeInTheDocument();
-
-        await userEvent.click(screen.getByRole('button'));
-
-        expect(await screen.findByText(/export/)).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/MenuItemListSelected/ActionsMenu/ActionsMenu.tsx

@@ -1,107 +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 {DeleteOutlined, DownOutlined, ExportOutlined, PictureOutlined} from '@ant-design/icons';
-import {Button, Dropdown} from 'antd';
-import {ReactNode, useState} from 'react';
-import {DeactivateRecordsModal} from '_ui/components/DeactivateRecordsModal';
-import {ExportModal} from '_ui/components/ExportModal';
-import {TriggerPreviewsGenerationModal} from '_ui/components/TriggerPreviewsGenerationModal';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {LibraryBehavior} from '_ui/_gqlTypes';
-import useSearchReducer from '../../hooks/useSearchReducer';
-
-interface IMenuAction {
-    key: string;
-    icon: ReactNode;
-    title: string;
-    display: boolean;
-    modalComp: (props: any) => JSX.Element;
-    modalProps?: any;
-}
-
-function ActionsMenu(): JSX.Element {
-    const {t} = useSharedTranslation();
-    const [activeAction, setActiveAction] = useState<string>();
-    const {state: searchState} = useSearchReducer();
-
-    const selectedIds = searchState.selection.selected.map(r => r.id);
-    const filters = searchState.filters;
-
-    const actions: IMenuAction[] = [
-        {
-            key: 'export',
-            icon: <ExportOutlined rotate={270} />,
-            title: t('export.title'),
-            modalComp: ExportModal,
-            modalProps: {
-                library: searchState.library.id,
-                selection: searchState.selection,
-                filters: searchState.filters
-            },
-            display: true
-        },
-        {
-            key: 'deactivate',
-            icon: <DeleteOutlined />,
-            title: t('records_deactivation.title'),
-            modalComp: DeactivateRecordsModal,
-            modalProps: {
-                library: searchState.library.id,
-                selection: searchState.selection,
-                filters: searchState.filters
-            },
-            display: true
-        },
-        {
-            key: 'generate_previews',
-            icon: <PictureOutlined />,
-            title: t('files.generate_previews'),
-            modalComp: TriggerPreviewsGenerationModal,
-            display: searchState.library.behavior === LibraryBehavior.files,
-            modalProps: {
-                libraryId: searchState.library.id,
-                recordIds: selectedIds,
-                filters
-            }
-        }
-    ].filter(a => a.display);
-
-    const _handleClick = (actionKey: string) => () => {
-        setActiveAction(actionKey);
-    };
-
-    const _handleCloseModal = () => setActiveAction('');
-
-    return (
-        <>
-            <Dropdown
-                menu={{
-                    items: actions.map(a => ({
-                        icon: a.icon,
-                        key: a.key,
-                        title: a.title,
-                        label: a.title,
-                        onClick: _handleClick(a.key)
-                    }))
-                }}
-            >
-                <Button>
-                    {t('menu-selection.actions')} <DownOutlined />
-                </Button>
-            </Dropdown>
-            {actions
-                .filter(a => activeAction === a.key)
-                .map(a => (
-                    <a.modalComp
-                        key={a.key}
-                        open={activeAction === a.key}
-                        onClose={_handleCloseModal}
-                        {...a.modalProps}
-                    />
-                ))}
-        </>
-    );
-}
-
-export default ActionsMenu;

package/src/components/LibraryItemsList/MenuItemListSelected/ActionsMenu/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 ActionsMenu from './ActionsMenu';
-export default ActionsMenu;

package/src/components/LibraryItemsList/MenuItemListSelected/MenuItemListSelected.test.tsx

@@ -1,18 +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 {render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import MenuItemListSelected from './MenuItemListSelected';
-
-describe('MenuItemListSelected', () => {
-    test('should have quit mode selection button', async () => {
-        render(
-            <MockSearchContextProvider>
-                <MenuItemListSelected active />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByRole('button', {name: /close/})).toBeInTheDocument();
-    });
-});