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

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

@@ -1,182 +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
-// Copyright LEAV Solutions 2017kn
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {CloseOutlined, DownOutlined} from '@ant-design/icons';
-import {Button, Dropdown} from 'antd';
-import uniqBy from 'lodash/uniqBy';
-import {useEffect, useState} from 'react';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {SearchMode} from '_ui/types/search';
-import {SearchActionTypes} from '../hooks/useSearchReducer/searchReducer';
-import ActionsMenu from './ActionsMenu';
-
-interface IMenuItemListSelectedProps {
-    active: boolean;
-}
-
-interface IWrapperProps {
-    $active: boolean;
-}
-
-const Wrapper = styled.div<IWrapperProps>`
-    display: ${({$active}) => ($active ? 'grid' : 'none')};
-    place-items: center;
-
-    position: absolute;
-    top: 0;
-
-    width: 100%;
-    background: ${themeVars.defaultBg};
-    height: 4rem;
-    z-index: 11;
-
-    animation: ${({$active}) => ($active ? 'moveToBottom .3s ease' : 'none')};
-
-    & > div {
-        display: grid;
-        place-items: center;
-        grid-template-columns: repeat(4, auto);
-        column-gap: 1rem;
-    }
-
-    @keyframes moveToBottom {
-        from {
-            top: -105px;
-        }
-        to {
-            top: 0;
-        }
-    }
-`;
-
-const DropdownButton = styled.div`
-    && {
-        display: flex;
-        padding: 0;
-    }
-`;
-
-const SelectionSummary = styled(Button)`
-    && {
-        padding: 0 1em;
-        display: flex;
-        align-items: center;
-        border-right-color: transparent;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-`;
-
-const ClearSelection = styled(Button)`
-    && {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        display: flex;
-        padding: 0 1em;
-        align-items: center;
-    }
-`;
-
-function MenuItemListSelected({active}: IMenuItemListSelectedProps): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-
-    const [countItemsSelected, setCountItemsSelected] = useState(0);
-
-    const disableModeSelection = () => {
-        searchDispatch({
-            type: SearchActionTypes.CLEAR_SELECTION
-        });
-    };
-
-    useEffect(() => {
-        setCountItemsSelected(searchState.selection.selected.length);
-    }, [searchState.selection]);
-
-    const selectVisible = () => {
-        let selected = [...searchState.selection.selected];
-
-        if (searchState.records) {
-            for (const record of searchState.records) {
-                selected = [
-                    ...selected,
-                    {
-                        id: record.whoAmI.id,
-                        library: record.whoAmI.library.id,
-                        label: record.whoAmI.label
-                    }
-                ];
-            }
-        }
-        selected = uniqBy(selected, item => `${item.id}_${item.library}`);
-
-        searchDispatch({
-            type: SearchActionTypes.SET_SELECTION,
-            selected
-        });
-    };
-
-    const selectAll = () => {
-        searchDispatch({
-            type: SearchActionTypes.SELECT_ALL
-        });
-    };
-
-    const unselectAll = () => {
-        searchDispatch({
-            type: SearchActionTypes.CLEAR_SELECTION
-        });
-    };
-
-    const allSelectActive = searchState.selection.allSelected;
-
-    return (
-        <Wrapper $active={active}>
-            <div>
-                <Dropdown
-                    menu={{
-                        items: [
-                            {
-                                key: 'select-visible',
-                                onClick: selectVisible,
-                                label: t('items-menu-dropdown.select-visible', {nb: searchState.records.length})
-                            },
-                            searchState.mode !== SearchMode.select
-                                ? {
-                                      key: 'select-all',
-                                      onClick: selectAll,
-                                      label: t('items-menu-dropdown.select-all', {nb: searchState.totalCount})
-                                  }
-                                : null,
-                            {key: 'unselect-all', onClick: unselectAll, label: t('menu-selection.unselect-all')}
-                        ]
-                    }}
-                >
-                    <DropdownButton>
-                        <SelectionSummary>
-                            {t('menu-selection.nb-selected', {
-                                nbSelected: !allSelectActive ? countItemsSelected : searchState.totalCount,
-                                total: searchState.totalCount
-                            })}
-                            <DownOutlined style={{paddingLeft: 12}} />
-                        </SelectionSummary>
-                        <ClearSelection onClick={disableModeSelection}>
-                            <CloseOutlined />
-                        </ClearSelection>
-                    </DropdownButton>
-                </Dropdown>
-
-                {searchState.mode !== SearchMode.select && <ActionsMenu />}
-            </div>
-        </Wrapper>
-    );
-}
-
-export default MenuItemListSelected;

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

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

@@ -1,16 +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 {act, render, screen} from '_ui/_tests/testUtils';
-import MenuSelection from './MenuSelection';
-
-describe('MenuSelection', () => {
-    test('should display a dropdown', async () => {
-        await act(async () => {
-            render(<MenuSelection />);
-        });
-
-        expect(screen.getByTestId('dropdown-menu-selection')).toBeInTheDocument();
-        expect(screen.queryByText(/items-list-row.nb-elements/i)).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/MenuSelection/MenuSelection.tsx

@@ -1,74 +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 {Button, Dropdown} from 'antd';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {SearchMode} from '_ui/types/search';
-import {SearchActionTypes} from '../hooks/useSearchReducer/searchReducer';
-
-function MenuSelection(): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-
-    const selectAll = () => {
-        searchDispatch({
-            type: SearchActionTypes.SELECT_ALL
-        });
-    };
-
-    const selectVisible = () => {
-        let selected = [...searchState.selection.selected];
-
-        if (searchState.records) {
-            for (const record of searchState.records) {
-                selected = [
-                    ...selected,
-                    {
-                        id: record.whoAmI.id,
-                        library: record.whoAmI.library.id,
-                        label: record.whoAmI.label
-                    }
-                ];
-            }
-        }
-
-        searchDispatch({
-            type: SearchActionTypes.SET_SELECTION,
-            selected
-        });
-    };
-
-    return (
-        <span data-testid="dropdown-menu-selection">
-            <Dropdown
-                menu={{
-                    items: [
-                        searchState.mode !== SearchMode.select
-                            ? {
-                                  key: 'select_all',
-                                  onClick: selectAll,
-                                  label: t('items-menu-dropdown.select-all', {nb: searchState.totalCount})
-                              }
-                            : null,
-                        {
-                            key: 'select',
-                            onClick: selectVisible,
-                            label: t('items-menu-dropdown.select-visible', {nb: searchState.records.length})
-                        }
-                    ]
-                }}
-            >
-                <Button icon={<DownOutlined />}>
-                    {t('items-list-row.nb-elements', {
-                        nbItems: searchState.totalCount
-                    })}
-                </Button>
-            </Dropdown>
-        </span>
-    );
-}
-
-export default MenuSelection;

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

package/src/components/LibraryItemsList/MenuView/MenuView.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 {act, render, screen} from '_ui/_tests/testUtils';
-import {mockGetLibraryDetailExtendedElement} from '_ui/__mocks__/mockQuery/mockGetLibraryDetailExtendedQuery';
-import mocksGetViewsListQuery from '../../../__mocks__/mockQuery/mockGetViewListQuery';
-import MenuView from './MenuView';
-
-describe('SelectView', () => {
-    const mocks = mocksGetViewsListQuery('activeLibraryId');
-    test('should have Dropdown', async () => {
-        await act(async () => {
-            render(<MenuView library={mockGetLibraryDetailExtendedElement} />, {mocks});
-        });
-
-        const ViewOptionsElement = await screen.findByTestId('dropdown-view-options');
-
-        expect(ViewOptionsElement).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/MenuView/MenuView.tsx

@@ -1,248 +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, FilterOutlined, MenuOutlined, PlusOutlined, SaveFilled} from '@ant-design/icons';
-import {localizedTranslation, objectToNameValueArray} from '@leav/utils';
-import {Badge, Button, Dropdown, MenuProps, Space, Tooltip} from 'antd';
-import {GrUndo} from 'react-icons/gr';
-import {VscLayers} from 'react-icons/vsc';
-import styled from 'styled-components';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {SearchActionTypes} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
-import useExecuteAddViewMutation from '_ui/hooks/useExecuteAddViewMutation/useExecuteAddViewMutation';
-import useLang from '_ui/hooks/useLang';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {SidebarContentType} from '_ui/types/search';
-import {ViewInput, ViewTypes} from '_ui/_gqlTypes';
-import {ILibraryDetailExtended} from '_ui/_queries/libraries/getLibraryDetailExtendQuery';
-import {prepareView} from '_ui/_utils';
-import {getRequestFromFilters} from '_ui/_utils/getRequestFromFilter';
-import {PREFIX_USER_VIEWS_ORDER_KEY} from '../../../constants';
-import {useUser} from '../../../hooks/useUser/useUser';
-import {defaultView, viewSettingsField} from '../constants';
-import FiltersDropdown from '../FiltersDropdown';
-import useUpdateViewsOrderMutation from '../hooks/useUpdateViewsOrderMutation';
-import IconViewType from '../IconViewType';
-
-interface IMenuViewProps {
-    library: ILibraryDetailExtended;
-}
-
-const ViewButton = styled(Button)`
-    && {
-        display: flex;
-        align-items: center;
-    }
-`;
-
-const ViewLabel = styled.span`
-    width: 180px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    whitespace: nowrap;
-`;
-
-function MenuView({library}: IMenuViewProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang, defaultLang} = useLang();
-
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-    const {userData} = useUser();
-
-    const {addView} = useExecuteAddViewMutation();
-    const {updateViewsOrder} = useUpdateViewsOrderMutation(library.id);
-
-    const _toggleShowView = () => {
-        const visible = !searchState.sideBar.visible || searchState.sideBar.type !== SidebarContentType.view;
-        searchDispatch({
-            type: SearchActionTypes.SET_SIDEBAR,
-            sidebarType: SidebarContentType.view,
-            visible
-        });
-    };
-
-    const _toggleShowFilters = () => {
-        const visible = !searchState.sideBar.visible || searchState.sideBar.type !== SidebarContentType.filters;
-        searchDispatch({
-            type: SearchActionTypes.SET_SIDEBAR,
-            sidebarType: SidebarContentType.filters,
-            visible
-        });
-    };
-
-    const _toggleShowVersions = () => {
-        const visible = !searchState.sideBar.visible || searchState.sideBar.type !== SidebarContentType.filters;
-        searchDispatch({
-            type: SearchActionTypes.SET_SIDEBAR,
-            sidebarType: SidebarContentType.versions,
-            visible
-        });
-    };
-
-    const _resetView = () => {
-        searchDispatch({
-            type: SearchActionTypes.CHANGE_VIEW,
-            view: searchState.view.current
-        });
-    };
-
-    const _getNewViewFromSearchState = (): ViewInput => {
-        return {
-            library: library.id,
-            label: {
-                [defaultLang]: t('view.add-view.title', {lng: defaultLang})
-            },
-            display: searchState.display,
-            shared: false,
-            sort: searchState.sort,
-            filters: getRequestFromFilters(searchState.filters),
-            valuesVersions: searchState.valuesVersions
-                ? objectToNameValueArray(searchState.valuesVersions)
-                      .map(version => ({
-                          treeId: version?.name ?? null,
-                          treeNode: version?.value?.id ?? null
-                      }))
-                      .filter(v => v.treeId !== null && v.treeNode !== null)
-                : null,
-            settings: [
-                {
-                    name: viewSettingsField,
-                    value: searchState.display.type === ViewTypes.list ? searchState.fields.map(f => f.key) : []
-                }
-            ]
-        };
-    };
-
-    const _saveView = async () => {
-        if (searchState.view.current.id !== defaultView.id) {
-            // save view in backend
-            await addView({
-                view: {
-                    ..._getNewViewFromSearchState(),
-                    id: searchState.view.current.id,
-                    label: searchState.view.current.label,
-                    description: searchState.view.current.description,
-                    shared: searchState.view.current.shared,
-                    color: searchState.view.current.color,
-                    sort: searchState.sort ?? null
-                }
-            });
-
-            searchDispatch({
-                type: SearchActionTypes.SET_VIEW_SYNC,
-                sync: true
-            });
-        }
-    };
-
-    const _handleAddView = async (viewType: ViewTypes) => {
-        const newView: ViewInput = {
-            ..._getNewViewFromSearchState(),
-            display: {...searchState.display, type: viewType}
-        };
-
-        // save view in backend
-        const newViewRes = await addView({
-            view: newView
-        });
-
-        await updateViewsOrder({
-            key: PREFIX_USER_VIEWS_ORDER_KEY + newView.library,
-            value: [...searchState.userViewsOrder, newViewRes.data.saveView.id],
-            global: false
-        });
-
-        searchDispatch({
-            type: SearchActionTypes.CHANGE_VIEW,
-            view: prepareView(
-                newViewRes.data.saveView,
-                searchState.attributes,
-                searchState.library.id,
-                userData?.userId
-            )
-        });
-    };
-
-    const menu: MenuProps = {
-        items: [
-            {
-                key: 'add-group',
-                type: 'group',
-                label: t('view.add-view.title'),
-                children: [
-                    {
-                        key: 'list',
-                        onClick: () => _handleAddView(ViewTypes.list),
-                        icon: <MenuOutlined />,
-                        label: t('view.type-list')
-                    },
-                    {
-                        key: 'cards',
-                        onClick: () => _handleAddView(ViewTypes.cards),
-                        icon: <AppstoreFilled />,
-                        label: t('view.type-cards')
-                    }
-                ]
-            }
-        ]
-    };
-
-    return (
-        <Space size="large">
-            <Button.Group>
-                <Tooltip
-                    title={localizedTranslation(searchState.view.current?.label, lang) || t('select-view.default-view')}
-                >
-                    <ViewButton
-                        icon={
-                            <IconViewType style={{marginRight: '8px'}} type={searchState.view.current.display.type} />
-                        }
-                        data-testid="dropdown-view-options"
-                        onClick={_toggleShowView}
-                        color={searchState.view.current?.color}
-                    >
-                        <ViewLabel>
-                            {localizedTranslation(searchState.view.current?.label, lang) ||
-                                t('select-view.default-view')}
-                        </ViewLabel>
-                    </ViewButton>
-                </Tooltip>
-                <Button
-                    disabled={searchState.view.sync}
-                    icon={<GrUndo />}
-                    onClick={_resetView}
-                    style={{paddingTop: '6px'}}
-                />
-                <Button
-                    icon={<SaveFilled />}
-                    onClick={_saveView}
-                    disabled={
-                        searchState.view.sync ||
-                        searchState.view.current?.id === defaultView.id ||
-                        !searchState.view.current.owner
-                    }
-                />
-                <Dropdown menu={menu} trigger={['click']}>
-                    <Button icon={<PlusOutlined />}></Button>
-                </Dropdown>
-            </Button.Group>
-            <Badge dot={!!searchState.filters.length}>
-                <Button.Group>
-                    <Button onClick={_toggleShowFilters} icon={<FilterOutlined />}>
-                        {t('filters.filters')}
-                    </Button>
-                    <FiltersDropdown
-                        libraryId={library.id}
-                        button={<Button icon={<PlusOutlined />} type={'default'} />}
-                        attributes={library.attributes}
-                        trees={library.linkedTrees}
-                        libraries={[]}
-                    />
-                </Button.Group>
-            </Badge>
-            <Button onClick={_toggleShowVersions} icon={<VscLayers />} style={{paddingTop: '5px'}} />
-        </Space>
-    );
-}
-
-export default MenuView;

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

package/src/components/LibraryItemsList/SearchItems/SearchItems.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 {act, render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import SearchItems from './SearchItems';
-
-describe('SearchItems', () => {
-    test('should display text field and submit button', async () => {
-        await act(async () => {
-            render(
-                <MockSearchContextProvider>
-                    <SearchItems />
-                </MockSearchContextProvider>
-            );
-        });
-
-        expect(screen.getByRole('textbox')).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/SearchItems/SearchItems.tsx

@@ -1,37 +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 {Input} from 'antd';
-import React from 'react';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {SearchActionTypes} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-
-function SearchItems(): JSX.Element {
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-
-    const {t} = useSharedTranslation();
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        searchDispatch({type: SearchActionTypes.SET_FULLTEXT, fullText: event.target.value});
-    };
-
-    const handleEnter = e => {
-        searchDispatch({type: SearchActionTypes.APPLY_FILTERS});
-    };
-
-    return (
-        <Input.Search
-            style={{maxWidth: 500, minWidth: 250}}
-            placeholder={t('search.placeholder')}
-            value={searchState.fullText}
-            onChange={handleChange}
-            onPressEnter={handleEnter}
-            onSearch={handleEnter}
-            loading={searchState.loading}
-            allowClear
-        />
-    );
-}
-
-export default SearchItems;

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