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

package/src/components/LibraryItemsList/LibraryItemsListContent/LibraryItemsListContent.tsx

@@ -1,288 +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 {useQuery} from '@apollo/client';
-import {useEffect, useMemo, useReducer} from 'react';
-import styled, {CSSObject} from 'styled-components';
-import {ErrorDisplay, Loading} from '_ui/components';
-import {SearchContext} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchContext';
-import searchReducer, {
-    initialSearchState,
-    SearchActionTypes
-} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
-import {ISearchRecord} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/_types';
-import {useGetRecordUpdatesSubscription, useLang} from '_ui/hooks';
-import {IField, IFilter, ISearchSelection, SearchMode} from '_ui/types/search';
-import {IView} from '_ui/types/views';
-import {useSaveUserDataMutation} from '_ui/_gqlTypes';
-import {ILibraryDetailExtended} from '_ui/_queries/libraries/getLibraryDetailExtendQuery';
-import {
-    getRecordsFromLibraryQuery,
-    IGetRecordsFromLibraryQuery,
-    IGetRecordsFromLibraryQueryVariables
-} from '_ui/_queries/records/getRecordsFromLibraryQuery';
-import {objectValueVersionToArray} from '_ui/_utils';
-import {getRequestFromFilters} from '_ui/_utils/getRequestFromFilter';
-import {getSelectedViewKey, viewSettingsField} from '../constants';
-import DisplayTypeSelector from '../DisplayTypeSelector';
-import extractAttributesFromLibrary from '../helpers/extractAttributesFromLibrary';
-import getFieldFromKey from '../helpers/getFieldFromKey';
-import LibraryItemsListEmpty from '../LibraryItemsListEmpty';
-import {manageItems} from '../manageItems';
-import MenuItemList from '../MenuItemList';
-import MenuItemListSelected from '../MenuItemListSelected';
-import Sidebar from '../Sidebar';
-
-const MenuWrapper = styled.div`
-    border-bottom: 1px solid rgb(235, 237, 240);
-    padding: 0 1rem;
-    height: 4rem;
-
-    display: flex;
-    align-content: center;
-    justify-content: space-around;
-`;
-
-interface IWrapperProps {
-    $showSide: boolean;
-    style?: CSSObject;
-}
-
-const panelSize = '22.5rem';
-const Wrapper = styled.div<IWrapperProps>`
-    display: grid;
-
-    ${({$showSide}) =>
-        $showSide
-            ? `
-            grid-template-columns: ${panelSize} calc(100% - ${panelSize});
-            grid-template-rows: 92% auto;
-            grid-template-areas:
-                'side data'
-                'side pagination';`
-            : `
-            grid-template-columns: auto;
-            grid-template-rows: 92% auto;
-            grid-template-areas:
-                'data'
-                'pagination';`}
-
-    height: calc(100vh - 7rem);
-    position: relative;
-    overflow: auto;
-`;
-
-interface ILibraryItemsListContentProps {
-    selectionMode?: boolean;
-    library: ILibraryDetailExtended;
-    defaultView: IView;
-    style?: CSSObject;
-    showTransparency?: boolean;
-    mode?: SearchMode;
-    onSelectChange?: (selection: ISearchSelection, filters?: IFilter[]) => void;
-}
-
-function LibraryItemsListContent({
-    selectionMode,
-    library,
-    defaultView,
-    showTransparency,
-    onSelectChange,
-    style
-}: ILibraryItemsListContentProps): JSX.Element {
-    const {lang} = useLang();
-    const defaultAttributes = extractAttributesFromLibrary(library);
-
-    const _getFieldsFromView = (view: IView): IField[] =>
-        !!view.settings?.find(s => s.name === viewSettingsField)
-            ? view.settings
-                  .find(s => s.name === viewSettingsField)
-                  .value.reduce((acc, fieldKey) => {
-                      const field = getFieldFromKey(fieldKey, library, defaultAttributes, lang);
-                      return field ? [...acc, field] : acc;
-                  }, [])
-            : [];
-
-    const [searchState, searchDispatch] = useReducer(searchReducer, {
-        ...initialSearchState,
-        library,
-        loading: true,
-        attributes: defaultAttributes,
-        trees: library.linkedTrees,
-        fields: _getFieldsFromView(defaultView),
-        filters: defaultView.filters,
-        sort: defaultView.sort,
-        display: defaultView.display,
-        view: {
-            current: defaultView,
-            reload: false,
-            sync: true
-        },
-        lang,
-        valuesVersions: defaultView.valuesVersions,
-        showTransparency,
-        mode: selectionMode ? SearchMode.select : SearchMode.search
-    });
-
-    useGetRecordUpdatesSubscription({libraries: [library.id]});
-
-    const [updateSelectedViewMutation] = useSaveUserDataMutation();
-    const selectedViewKey = getSelectedViewKey(library.id);
-
-    const _applyResults = (data: IGetRecordsFromLibraryQuery) => {
-        const itemsFromQuery = data ? data.records.list : [];
-
-        const newRecords: ISearchRecord[] = manageItems({
-            items: itemsFromQuery,
-            fields: searchState.fields
-        });
-
-        searchDispatch({
-            type: SearchActionTypes.UPDATE_RESULT,
-            records: newRecords,
-            totalCount: data?.records.totalCount ?? searchState.totalCount
-        });
-    };
-
-    const _getVersionForRequest = () =>
-        searchState.valuesVersions
-            ? objectValueVersionToArray(searchState.valuesVersions).filter(v => !!v.treeNodeId)
-            : [];
-
-    // We're using a useMemo here to prevent query being fired on every change of searchState.
-    // Subsequent search will be triggered on user request and are handled elsewhere.
-    // We were previously using the skip property of useQuery but it was causing issues with data update
-    const variables = useMemo(
-        () => ({
-            library: library.id,
-            limit: searchState.pagination,
-            offset: searchState.offset,
-            filters: getRequestFromFilters(searchState.filters),
-            sort: searchState.sort,
-            fullText: searchState.fullText,
-            version: _getVersionForRequest()
-        }),
-        []
-    );
-
-    const {loading: getRecordsLoading, data: searchData, fetchMore: getRecordsFetchMore} = useQuery<
-        IGetRecordsFromLibraryQuery,
-        IGetRecordsFromLibraryQueryVariables
-    >(getRecordsFromLibraryQuery(searchState.fields, !searchState.offset), {
-        fetchPolicy: 'network-only',
-        variables,
-        onError: err => {
-            searchDispatch({
-                type: SearchActionTypes.UPDATE_RESULT,
-                error: err
-            });
-        }
-    });
-
-    const _fetchRecords = async () => {
-        try {
-            const queryFilters = getRequestFromFilters(searchState.filters);
-
-            const currentVariables = {
-                library: library.id,
-                limit: searchState.pagination,
-                offset: searchState.offset,
-                filters: queryFilters,
-                sort: searchState.sort,
-                fullText: searchState.fullText,
-                version: _getVersionForRequest()
-            };
-
-            // Records have already been fetched, we use fetchMore to make sure
-            // we request the right fields by passing in a whole new query
-            const results = await getRecordsFetchMore({
-                query: getRecordsFromLibraryQuery(searchState.fields, !searchState.offset),
-                variables: currentVariables
-            });
-
-            const recordsData = results.data;
-
-            // We have to call applyResults here because onCompleted is not called when fetchMore is used
-            _applyResults(recordsData);
-        } catch (err) {
-            searchDispatch({type: SearchActionTypes.SET_LOADING, loading: false});
-            // Error is already handled. This try/catch is just to avoid unhandled rejection
-        }
-    };
-
-    const isLoading = getRecordsLoading || searchState.view.reload || searchState.loading;
-
-    useEffect(() => {
-        if (searchData) {
-            _applyResults(searchData);
-        }
-    }, [searchData]);
-
-    useEffect(() => {
-        if (searchState.loading) {
-            _fetchRecords();
-        }
-    }, [searchState.loading]);
-
-    /**
-     * Called when current view changes. In charge of refetching record and saving last used view
-     */
-    useEffect(() => {
-        if (!searchState.view.reload) {
-            return;
-        }
-
-        _fetchRecords();
-
-        updateSelectedViewMutation({
-            variables: {
-                key: selectedViewKey,
-                value: searchState.view.current.id,
-                global: false
-            }
-        });
-        searchDispatch({type: SearchActionTypes.SET_VIEW_RELOAD, reload: false});
-    }, [selectedViewKey, updateSelectedViewMutation, searchState.view, searchState.fields, searchDispatch, library]);
-
-    /**
-     * Calls onSelectChange when selection changes
-     */
-    useEffect(() => {
-        if (!onSelectChange) {
-            return;
-        }
-
-        onSelectChange(searchState.selection, searchState.selection.allSelected ? searchState.filters : null);
-    }, [searchState.selection]);
-
-    const _reload = () => {
-        searchDispatch({type: SearchActionTypes.SET_LOADING, loading: true});
-    };
-
-    // If some elements are selected and the selection type is search, show the selection Menu
-    const menuSelectedActive = !!searchState.selection.selected.length || searchState.selection.allSelected;
-
-    return (
-        <SearchContext.Provider value={{state: searchState, dispatch: searchDispatch}}>
-            <MenuWrapper>
-                <MenuItemList refetch={_reload} library={library} />
-                <MenuItemListSelected active={menuSelectedActive} />
-            </MenuWrapper>
-
-            <Wrapper
-                $showSide={searchState.sideBar.visible}
-                className={searchState.sideBar.visible ? 'wrapper-open' : 'wrapper-close'}
-                style={style}
-            >
-                <Sidebar />
-                {isLoading && <Loading />}
-                {!isLoading && searchState.error && <ErrorDisplay message={searchState.error.message} />}
-                {!isLoading &&
-                    !searchState.error &&
-                    (!searchState.records.length ? <LibraryItemsListEmpty /> : <DisplayTypeSelector />)}
-            </Wrapper>
-        </SearchContext.Provider>
-    );
-}
-
-export default LibraryItemsListContent;

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

package/src/components/LibraryItemsList/LibraryItemsListEmpty/LibraryItemsListEmpty.tsx

@@ -1,106 +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 {CloudUploadOutlined,PlusOutlined} from '@ant-design/icons';
-import {Button,Col,Empty,Row} from 'antd';
-import {useState} from 'react';
-import {ImportModal} from '_ui/components/ImportModal';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import EditRecordModal from '_ui/components/RecordEdition/EditRecordModal';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-
-const LibraryItemsListEmpty = () => {
-    const {t} = useSharedTranslation();
-    const {state: searchState} = useSearchReducer();
-
-    const [isRecordCreationVisible, setIsRecordCreationVisible] = useState<boolean>(false);
-    const [isImportModalVisible, setIsImportModalVisible] = useState<boolean>(false);
-
-    const _handleCreateRecord = () => {
-        setIsRecordCreationVisible(true);
-    };
-
-    const _handleRecordCreationClose = () => {
-        setIsRecordCreationVisible(false);
-    };
-
-    const _handleImportModalOpen = () => {
-        setIsImportModalVisible(true);
-    };
-
-    const _handleImportModalClose = () => {
-        setIsImportModalVisible(false);
-    };
-
-    return (
-        <>
-            <Empty
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-                imageStyle={{
-                    height: 60
-                }}
-                description={<span>{t('items_list.no_data')}.</span>}
-            >
-                <Row>
-                    <Col span={11}>
-                        <Row justify="end">
-                            <Col>
-                                <Button
-                                    type="primary"
-                                    block
-                                    style={{
-                                        width: 'fit-content'
-                                    }}
-                                    icon={<PlusOutlined />}
-                                    className="primary-btn"
-                                    onClick={_handleCreateRecord}
-                                >
-                                    {t('items_list.new_record')}
-                                </Button>
-                            </Col>
-                        </Row>
-                    </Col>
-                    <Col span={2}>
-                        <span>{t('global.or')}</span>
-                    </Col>
-                    <Col span={11}>
-                        <Row justify="start">
-                            <Col>
-                                <Button
-                                    type="primary"
-                                    style={{
-                                        width: 'fit-content'
-                                    }}
-                                    block
-                                    icon={<CloudUploadOutlined />}
-                                    className="primary-btn"
-                                    onClick={_handleImportModalOpen}
-                                >
-                                    {t('items_list.import_data')}
-                                </Button>
-                            </Col>
-                        </Row>
-                    </Col>
-                </Row>
-            </Empty>
-            {isRecordCreationVisible && (
-                <EditRecordModal
-                    record={null}
-                    library={searchState.library.id}
-                    open={isRecordCreationVisible}
-                    onClose={_handleRecordCreationClose}
-                    valuesVersion={searchState.valuesVersions}
-                />
-            )}
-            {isImportModalVisible && (
-                <ImportModal
-                    open={isImportModalVisible}
-                    library={searchState.library.id}
-                    onClose={_handleImportModalClose}
-                />
-            )}
-        </>
-    );
-};
-
-export default LibraryItemsListEmpty;

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

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

@@ -1,20 +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 {ISearchState} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/_types';
-import {render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import LibraryItemsListPagination from './LibraryItemsListPagination';
-
-describe('LibraryItemsListPagination', () => {
-    test('should have pagination', async () => {
-        const mockState: Partial<ISearchState> = {pagination: 5, offset: 0, totalCount: 15};
-        render(
-            <MockSearchContextProvider state={mockState}>
-                <LibraryItemsListPagination />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getAllByRole('listitem')).toHaveLength(6); // 3 page, 1 previous, 1 next and 1 size selector
-    });
-});

package/src/components/LibraryItemsList/LibraryItemsListPagination/LibraryItemsListPagination.tsx

@@ -1,36 +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 {Pagination} from 'antd';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {SearchActionTypes} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
-
-function LibraryItemsListPagination(): JSX.Element {
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-
-    const setPagination = (current: number, size: number) => {
-        searchDispatch({type: SearchActionTypes.SET_PAGINATION, page: size});
-    };
-
-    const setOffset = (page: number, pageSize: number) => {
-        searchDispatch({type: SearchActionTypes.SET_OFFSET, offset: (page - 1) * (pageSize ?? 0)});
-    };
-
-    const currentPage = searchState.offset / searchState.pagination + 1;
-    const paginationOptions = [5, 10, 20, 50, 100];
-
-    return (
-        <Pagination
-            defaultCurrent={currentPage}
-            current={currentPage}
-            total={searchState.totalCount}
-            defaultPageSize={searchState.pagination}
-            onShowSizeChange={setPagination}
-            showSizeChanger
-            pageSizeOptions={paginationOptions.map(option => option.toString())}
-            onChange={setOffset}
-        />
-    );
-}
-
-export default LibraryItemsListPagination;

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

package/src/components/LibraryItemsList/LibraryItemsListTable/BodyCell/BodyCell.test.tsx

@@ -1,39 +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 {AttributeType} from '_ui/_gqlTypes';
-import {act, render, screen} from '_ui/_tests/testUtils';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import BodyCell from './BodyCell';
-
-jest.mock(
-    '../Cell',
-    () =>
-        function Cell() {
-            return <div>Cell</div>;
-        }
-);
-
-describe('BodyCell', () => {
-    const mockCell = {
-        getCellProps: jest.fn(),
-        column: {
-            id: 'columnId'
-        },
-        value: {value: 'valueCell', type: AttributeType.simple, id: 'idCell'},
-        row: {
-            original: {
-                record: mockRecord
-            }
-        },
-        render: jest.fn()
-    };
-
-    test('should call cell', async () => {
-        await act(async () => {
-            render(<BodyCell cell={mockCell as any} selected={false} />);
-        });
-
-        expect(screen.getByText('Cell')).toBeInTheDocument();
-    });
-});

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

@@ -1,70 +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 {Cell as ReactTableTypeCell} from 'react-table';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {ITableRow} from '_ui/types/search';
-import {infosCol, INFOS_COLUMN_WIDTH, selectionColumn} from '../../constants';
-import Cell from '../Cell';
-import CellSelection from '../Cell/CellSelection';
-
-const CustomBodyCell = styled.div<{id?: string | number; selected: boolean}>`
-    // Inherit background from row. If background is transparent, the sticky column won't behave properly
-    background-color: inherit;
-    padding: 4px 0;
-
-    &:not(:first-child) {
-        border-left: 1px solid ${props => (props.selected ? themeVars.activeColor : themeVars.borderLightColor)};
-    }
-
-    max-width: ${p => (p.id === selectionColumn ? '35px' : 'auto')};
-
-    display: flex;
-    align-items: center;
-`;
-
-interface IBodyCellProps {
-    cell: ReactTableTypeCell<ITableRow>;
-    selected: boolean;
-}
-
-function BodyCell({cell, selected}: IBodyCellProps): JSX.Element {
-    const props = cell.getCellProps();
-    if (cell.column.id === infosCol) {
-        // define info column row style
-        props.style = {
-            ...props.style,
-            flex: '1 0 auto',
-            maxWidth: INFOS_COLUMN_WIDTH,
-            minWidth: INFOS_COLUMN_WIDTH,
-            zIndex: 3
-        };
-    }
-
-    const data = {
-        id: cell?.value?.id,
-        key: cell?.value?.id,
-        library: cell?.value?.library,
-        label: cell?.value?.label,
-        value: cell?.value?.value,
-        type: cell?.value?.type,
-        format: cell?.value?.format
-    };
-
-    if (!cell.value) {
-        return <CustomBodyCell selected={selected} {...props} />;
-    }
-
-    return (
-        <CustomBodyCell {...props} id={cell.column.id} selected={selected} className="body-cell">
-            {cell.column.id === selectionColumn ? (
-                <CellSelection selected={selected} />
-            ) : (
-                <Cell columnName={cell.column.id} data={data} />
-            )}
-        </CustomBodyCell>
-    );
-}
-
-export default BodyCell;

package/src/components/LibraryItemsList/LibraryItemsListTable/BodyCell/index.ts

@@ -1,6 +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 BodyCell from './BodyCell';
-
-export default BodyCell;

package/src/components/LibraryItemsList/LibraryItemsListTable/BodyRow/BodyRow.test.tsx

@@ -1,48 +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 {mockRecord} from '_ui/__mocks__/common/record';
-import BodyRow from './BodyRow';
-
-jest.mock(
-    '../BodyCell',
-    () =>
-        function BodyCell() {
-            return <div>BodyCell</div>;
-        }
-);
-
-jest.mock(
-    '../BodyCell',
-    () =>
-        function BodyCell() {
-            return <div>BodyCell</div>;
-        }
-);
-
-describe('BodyRow', () => {
-    const mockRow = {
-        cells: [
-            {
-                getCellProps: () => ({
-                    key: 1
-                }),
-                column: {
-                    id: 'test'
-                },
-                row: {
-                    original: {
-                        record: mockRecord
-                    }
-                }
-            }
-        ],
-        getRowProps: jest.fn()
-    };
-    test('should display n cells', async () => {
-        render(<BodyRow row={mockRow as any} />);
-
-        expect(screen.getByText('BodyCell')).toBeInTheDocument();
-    });
-});