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

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

@@ -1,190 +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 {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 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 {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-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} = useSharedTranslation();
-
-    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

@@ -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 FiltersPanel from './FiltersPanel';
-export default FiltersPanel;

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

@@ -1,19 +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 {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

@@ -1,24 +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 {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

@@ -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 IconViewType from './IconViewType';
-export default IconViewType;

package/src/components/LibraryItemsList/LibraryItemsList.test.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 {AttributeType} from '_ui/_gqlTypes';
-import {getRecordsFromLibraryQuery} from '_ui/_queries/records/getRecordsFromLibraryQuery';
-import {getUserDataQuery} from '_ui/_queries/userData/getUserData';
-import {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('react-router-dom', () => ({
-    useParams: jest.fn(() => ({libId: 'test', libQueryName: 'test', filterName: 'TestFilter'})),
-    useHistory: 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 children', 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: []
-                        }
-                    }
-                }
-            }
-        ];
-
-        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

@@ -1,55 +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 {FunctionComponent} from 'react';
-import {CSSObject} from 'styled-components';
-import {ErrorDisplay, Loading} from '_ui/components';
-import {ErrorDisplayTypes} from '_ui/constants';
-import {IFilter, ISearchSelection, 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;
-    onSelectChange?: (selection: ISearchSelection, filters?: IFilter[]) => void;
-}
-
-export const LibraryItemsList: FunctionComponent<ILibraryItemsListProps> = ({
-    selectionMode,
-    library,
-    style,
-    showTransparency,
-    mode,
-    onSelectChange
-}) => {
-    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}
-            onSelectChange={onSelectChange}
-            mode={mode}
-        />
-    );
-};
-
-export default LibraryItemsList;