@leav/ui 0.0.1-alpha-1 → 1.0.0-beta6

package/src/components/LibraryItemsList/FiltersPanel/FiltersPanel.tsx

@@ -0,0 +1,190 @@
+// 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 {DownOutlined} from '@ant-design/icons';
+import {faAngleLeft} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {Button, Dropdown, Space} from 'antd';
+import {DragDropContext, Draggable, Droppable, DropResult, ResponderProvided} from 'react-beautiful-dnd';
+import {useTranslation} from 'react-i18next';
+import styled from 'styled-components';
+import {themeVars} from '_ui/antdTheme';
+import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
+import {SearchActionTypes} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
+import Filter from './Filter/Filter';
+
+const Wrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    border-right: ${themeVars.borderLightColor} 1px solid;
+    overflow-y: auto;
+    width: 1000px;
+`;
+
+const Header = styled.div`
+    width: 100%;
+    background-color: ${themeVars.headerBg};
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    justify-content: space-between;
+    padding: 0.3rem 0.3rem 0.3rem 1rem;
+    font-weight: 700;
+    border-bottom: 1px solid ${themeVars.borderLightColor};
+
+    & > * {
+        :first-of-type {
+            display: grid;
+            column-gap: 8px;
+            grid-template-columns: repeat(3, auto);
+            align-items: center;
+            justify-items: center;
+        }
+
+        :last-of-type {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            column-gap: 8px;
+            grid-template-columns: repeat(2, auto);
+        }
+    }
+`;
+
+const FiltersWrapper = styled.div`
+    height: calc(100% - 7rem);
+    overflow: auto;
+`;
+
+const ListFilters = styled.div`
+    display: grid;
+`;
+
+function FiltersPanel(): JSX.Element {
+    const {t} = useTranslation();
+
+    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
+
+    const _resetFilters = () => {
+        searchDispatch({type: SearchActionTypes.RESET_FILTERS});
+    };
+
+    const _disableFilters = () => {
+        searchDispatch({type: SearchActionTypes.DISABLE_FILTERS});
+    };
+
+    const _enableFilters = () => {
+        searchDispatch({type: SearchActionTypes.ENABLE_FILTERS});
+    };
+
+    const _handleHide = () => {
+        searchDispatch({type: SearchActionTypes.SET_SIDEBAR, visible: false, sidebarType: searchState.sideBar.type});
+    };
+
+    const onDragEnd = (result: DropResult, provided: ResponderProvided) => {
+        if (!result.destination) {
+            return;
+        }
+
+        const newFilter = searchState.filters
+            .map(filter => {
+                return {
+                    ...filter,
+                    index:
+                        result.source.index === filter.index
+                            ? result.destination.index
+                            : result.destination.index === filter.index
+                            ? result.source.index
+                            : filter.index
+                };
+            })
+            .sort((a, b) => a.index - b.index);
+
+        searchDispatch({
+            type: SearchActionTypes.SET_FILTERS,
+            filters: newFilter
+        });
+    };
+
+    const filtersSorted = searchState.filters.sort((a, b) => a.index - b.index);
+
+    const _handleApplyFilters = () => {
+        searchDispatch({type: SearchActionTypes.APPLY_FILTERS});
+    };
+
+    const allFiltersDisabled = searchState.filters.every(f => f.active === false);
+    const allFiltersEnabled = searchState.filters.every(f => f.active === true);
+
+    return (
+        <Wrapper>
+            <Header>
+                <Dropdown
+                    menu={{
+                        items: [
+                            {
+                                key: 'disable',
+                                disabled: allFiltersDisabled,
+                                onClick: _disableFilters,
+                                label: t('filters.disable-filters')
+                            },
+                            {
+                                key: 'enable',
+                                disabled: allFiltersEnabled,
+                                onClick: _enableFilters,
+                                label: t('filters.enable-filters')
+                            },
+                            {
+                                key: 'remove',
+                                disabled: !searchState.filters.length,
+                                onClick: _resetFilters,
+                                label: t('filters.remove-filters')
+                            }
+                        ]
+                    }}
+                >
+                    <Button type="text" style={{display: 'inline-flex'}}>
+                        {t('filters.filters')}
+                        <DownOutlined style={{marginTop: '5px', marginLeft: '-3px'}} />
+                    </Button>
+                </Dropdown>
+                <Space size="small">
+                    <Button disabled={!searchState.filters.length} onClick={_handleApplyFilters}>
+                        {t('filters.apply')}
+                    </Button>
+                    <Button onClick={_handleHide} icon={<FontAwesomeIcon icon={faAngleLeft} />} />
+                </Space>
+            </Header>
+
+            <FiltersWrapper>
+                <DragDropContext onDragEnd={onDragEnd}>
+                    <Droppable droppableId={'droppable'}>
+                        {providedDroppable => (
+                            <ListFilters {...providedDroppable.droppableProps} ref={providedDroppable.innerRef}>
+                                {filtersSorted.map(filter => (
+                                    <Draggable
+                                        key={filter.index}
+                                        draggableId={filter.index.toString()}
+                                        index={filter.index}
+                                    >
+                                        {provided => (
+                                            <div ref={provided.innerRef} {...provided.draggableProps}>
+                                                <Filter
+                                                    key={filter.index}
+                                                    filter={filter}
+                                                    handleProps={provided.dragHandleProps}
+                                                />
+                                            </div>
+                                        )}
+                                    </Draggable>
+                                ))}
+                                {providedDroppable.placeholder}
+                            </ListFilters>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+            </FiltersWrapper>
+        </Wrapper>
+    );
+}
+
+export default FiltersPanel;

package/src/components/LibraryItemsList/FiltersPanel/index.ts

@@ -0,0 +1,5 @@
+// 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 FiltersPanel from './FiltersPanel';
+export default FiltersPanel;

package/src/components/LibraryItemsList/FiltersPanel/mustHideValue.ts

@@ -0,0 +1,19 @@
+// 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 {AttributeConditionFilter, AttributeConditionType} from '_ui/types/search';
+
+export default (condition: AttributeConditionType): boolean => {
+    const noValueConditions: AttributeConditionType[] = [
+        AttributeConditionFilter.IS_EMPTY,
+        AttributeConditionFilter.IS_NOT_EMPTY,
+        AttributeConditionFilter.TODAY,
+        AttributeConditionFilter.TOMORROW,
+        AttributeConditionFilter.YESTERDAY,
+        AttributeConditionFilter.LAST_MONTH,
+        AttributeConditionFilter.NEXT_MONTH
+    ];
+
+    return noValueConditions.includes(condition);
+};

package/src/components/LibraryItemsList/IconViewType/IconViewType.tsx

@@ -0,0 +1,24 @@
+// 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 {AppstoreFilled, CalendarOutlined, MenuOutlined} from '@ant-design/icons';
+import React from 'react';
+import {ViewTypes} from '_ui/_gqlTypes';
+
+interface IIconViewTypeProps {
+    style?: React.CSSProperties;
+    type: ViewTypes;
+}
+
+const IconViewType = ({type, style}: IIconViewTypeProps) => {
+    switch (type) {
+        case ViewTypes.list:
+            return <MenuOutlined style={style} />;
+        case ViewTypes.cards:
+            return <AppstoreFilled style={style} />;
+        case ViewTypes.timeline:
+            return <CalendarOutlined style={style} />;
+    }
+};
+
+export default IconViewType;

package/src/components/LibraryItemsList/IconViewType/index.ts

@@ -0,0 +1,5 @@
+// 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 IconViewType from './IconViewType';
+export default IconViewType;

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

@@ -0,0 +1,104 @@
+// 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 {getRecordsFromLibraryQuery} from '_ui/_queries/records/getRecordsFromLibraryQuery';
+import {getUserDataQuery} from '_ui/_queries/userData/getUserData';
+import {act, render, screen, waitFor} from '_ui/_tests/testUtils';
+import {mockGetLibraryDetailExtendedElement} from '_ui/__mocks__/mockQuery/mockGetLibraryDetailExtendedQuery';
+import {
+    mockGetRecordsFromLibraryQuery,
+    mockGetRecordsFromLibraryQueryVar
+} from '_ui/__mocks__/mockQuery/mockGetRecordsFromLibraryQuery';
+import LibraryItemsList from './LibraryItemsList';
+
+jest.mock('_ui/hooks/useGetRecordUpdatesSubscription', () => ({
+    useGetRecordUpdatesSubscription: jest.fn()
+}));
+
+jest.mock(
+    './Sidebar',
+    () =>
+        function Sidebar() {
+            return <div>Sidebar</div>;
+        }
+);
+jest.mock(
+    './MenuItemList',
+    () =>
+        function MenuItemList() {
+            return <div>MenuItemList</div>;
+        }
+);
+jest.mock(
+    './MenuItemListSelected',
+    () =>
+        function MenuItemListSelected() {
+            return <div>MenuItemListSelected</div>;
+        }
+);
+jest.mock(
+    './DisplayTypeSelector',
+    () =>
+        function DisplayTypeSelector() {
+            return <div>DisplayTypeSelector</div>;
+        }
+);
+
+describe('LibraryItemsList', () => {
+    const libQueryName = 'test';
+
+    const mockStateItem = {
+        pagination: 20,
+        offset: 0,
+        field: [
+            {
+                id: 'testId',
+                label: 'Test',
+                library: 'testLib',
+                type: AttributeType.simple,
+                key: 'testId_testLib'
+            }
+        ]
+    };
+
+    test('should call the child', async () => {
+        const mocks = [
+            {
+                request: {
+                    query: getRecordsFromLibraryQuery([], true),
+                    variables: mockGetRecordsFromLibraryQueryVar
+                },
+                result: {
+                    data: mockGetRecordsFromLibraryQuery(libQueryName, mockStateItem.field)
+                }
+            },
+            {
+                request: {
+                    query: getUserDataQuery,
+                    variables: {keys: ['selected_view_test']}
+                },
+                result: {
+                    data: {
+                        userData: {
+                            global: false,
+                            data: []
+                        }
+                    }
+                }
+            }
+        ];
+
+        await act(async () => {
+            render(<LibraryItemsList library={mockGetLibraryDetailExtendedElement} selectionMode={true} />, {
+                mocks
+            });
+        });
+
+        await waitFor(() => screen.getByText('DisplayTypeSelector'));
+
+        expect(screen.getByText('Sidebar')).toBeInTheDocument();
+        expect(screen.getByText('MenuItemList')).toBeInTheDocument();
+        expect(screen.getByText('DisplayTypeSelector')).toBeInTheDocument();
+    });
+});

package/src/components/LibraryItemsList/LibraryItemsList.tsx

@@ -0,0 +1,51 @@
+// 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 {FunctionComponent} from 'react';
+import {CSSObject} from 'styled-components';
+import {ErrorDisplay, ErrorDisplayTypes, Loading} from '_ui/index';
+import {SearchMode} from '_ui/types/search';
+import {ILibraryDetailExtended} from '_ui/_queries/libraries/getLibraryDetailExtendQuery';
+import useLibraryView from './hooks/useLibraryView/useLibraryView';
+import LibraryItemsListContent from './LibraryItemsListContent';
+
+interface ILibraryItemsListProps {
+    selectionMode?: boolean;
+    library: ILibraryDetailExtended;
+    style?: CSSObject;
+    showTransparency?: boolean;
+    mode?: SearchMode;
+}
+
+export const LibraryItemsList: FunctionComponent<ILibraryItemsListProps> = ({
+    selectionMode,
+    library,
+    style,
+    showTransparency,
+    mode
+}) => {
+    const {loading: libraryViewLoading, view: libraryView} = useLibraryView(library);
+
+    const hasAccess = library.permissions.access_library;
+
+    if (!hasAccess) {
+        return <ErrorDisplay type={ErrorDisplayTypes.PERMISSION_ERROR} />;
+    }
+
+    if (libraryViewLoading) {
+        return <Loading />;
+    }
+
+    return (
+        <LibraryItemsListContent
+            library={library}
+            selectionMode={selectionMode}
+            defaultView={libraryView}
+            style={style}
+            showTransparency={showTransparency}
+            mode={mode}
+        />
+    );
+};
+
+export default LibraryItemsList;

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

@@ -0,0 +1,274 @@
+// 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 {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 {ErrorDisplay, Loading, useGetRecordUpdatesSubscription, useLang} from '_ui/index';
+import {IField, 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;
+}
+
+function LibraryItemsListContent({
+    selectionMode,
+    library,
+    defaultView,
+    showTransparency,
+    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
+    });
+
+    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]);
+
+    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 =
+        (selectionMode && !!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

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