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

package/src/components/LibraryItemsList/VersionsPanel/VersionsPanel.tsx

@@ -1,85 +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 {faAngleLeft} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {Button} from 'antd';
-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 ValuesVersionConfigurator from '_ui/components/ValuesVersionConfigurator';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IValueVersion} from '_ui/types/values';
-
-const Wrapper = styled.div`
-    width: 100%;
-    display: flex;
-    flex-flow: column nowrap;
-    border-right: ${themeVars.borderLightColor} 1px solid;
-    overflow-y: auto;
-`;
-
-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: grid;
-            align-items: center;
-            justify-content: flex-end;
-            column-gap: 8px;
-            grid-template-columns: repeat(2, auto);
-        }
-    }
-`;
-
-function VersionsPanel(): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-
-    const _handleHidePanel = () => {
-        searchDispatch({
-            type: SearchActionTypes.TOGGLE_SIDEBAR
-        });
-    };
-
-    const _handleVersionChange = (version: IValueVersion) => {
-        searchDispatch({
-            type: SearchActionTypes.SET_VALUES_VERSIONS,
-            valuesVersions: version
-        });
-    };
-
-    return (
-        <Wrapper>
-            <Header>
-                <span>{t('values_version.title')}</span>
-                <Button onClick={_handleHidePanel} icon={<FontAwesomeIcon icon={faAngleLeft} />}></Button>
-            </Header>
-            <ValuesVersionConfigurator
-                libraryId={searchState.library.id}
-                selectedVersion={searchState.valuesVersions}
-                onVersionChange={_handleVersionChange}
-            />
-        </Wrapper>
-    );
-}
-
-export default VersionsPanel;

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

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

@@ -1,41 +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 {ViewSizes, ViewTypes} from '_ui/_gqlTypes';
-import {render, screen} from '_ui/_tests/testUtils';
-import mocksGetViewsListQuery from '_ui/__mocks__/mockQuery/mockGetViewListQuery';
-import EditView from './EditView';
-
-describe('EditView', () => {
-    const mocks = mocksGetViewsListQuery('');
-
-    test('should show two input', async () => {
-        render(
-            <EditView
-                libraryId="lib_id"
-                visible={true}
-                onClose={jest.fn()}
-                view={{
-                    id: 'id',
-                    label: {fr: 'label', en: 'label'},
-                    display: {type: ViewTypes.list, size: ViewSizes.MEDIUM},
-                    shared: false,
-                    owner: true
-                }}
-            />,
-            {mocks}
-        );
-
-        expect(screen.getByTestId('viewName-input-fr')).toBeInTheDocument();
-
-        const nameElement = screen.getByTestId('viewName-input-fr');
-        const descriptionElement = screen.getByTestId('description-input-fr');
-        const typeElement = screen.getByTestId('input-type');
-        const sharedElement = screen.getByTestId('input-shared');
-
-        expect(nameElement).toBeInTheDocument();
-        expect(descriptionElement).toBeInTheDocument();
-        expect(typeElement).toBeInTheDocument();
-        expect(sharedElement).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/ViewPanel/EditView/EditView.tsx

@@ -1,176 +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 {Checkbox, Divider, Form, Input, Modal, Select} from 'antd';
-import {useState} from 'react';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {SearchActionTypes} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
-import useLang from '_ui/hooks/useLang';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {SystemTranslation} from '_ui/types/scalars';
-import {IView} from '_ui/types/views';
-import {useAddViewMutation, ViewInput, ViewTypes} from '_ui/_gqlTypes';
-import {getRequestFromFilters} from '_ui/_utils/getRequestFromFilter';
-import {PREFIX_SHARED_VIEWS_ORDER_KEY, PREFIX_USER_VIEWS_ORDER_KEY} from '../../../../constants';
-import useUpdateViewsOrderMutation from '../../hooks/useUpdateViewsOrderMutation';
-
-interface IFormValues {
-    label: SystemTranslation;
-    description: SystemTranslation | null;
-    type: ViewTypes;
-    shared: boolean;
-}
-
-interface IEditViewProps {
-    view: IView;
-    libraryId: string;
-    onClose: () => void;
-    visible: boolean;
-}
-
-function EditView({visible, onClose, view, libraryId}: IEditViewProps): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-
-    const {availableLangs, defaultLang} = useLang();
-    const [form] = Form.useForm();
-    const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
-
-    const [addView] = useAddViewMutation();
-    const {updateViewsOrder} = useUpdateViewsOrderMutation(libraryId);
-
-    const _handleOk = async () => {
-        form.submit();
-    };
-
-    const _handleCancel = () => {
-        form.resetFields();
-        onClose();
-    };
-
-    const _handleSubmit = async (values: IFormValues) => {
-        setConfirmLoading(true);
-
-        const upView: ViewInput = {
-            id: view.id,
-            library: libraryId,
-            display: {type: values.type, size: view.display.size},
-            shared: values.shared,
-            label: values.label,
-            description: !Object.values(values.description).every(x => x === '') ? values.description : null,
-            settings: view.settings,
-            filters: getRequestFromFilters(view.filters),
-            sort: view.sort
-        };
-
-        try {
-            // save view in backend
-            await addView({variables: {view: upView}});
-        } catch (e) {
-            console.error(e);
-        }
-
-        if (view.shared !== values.shared) {
-            const userViewsOrder = !values.shared
-                ? [...searchState.userViewsOrder, view.id]
-                : searchState.userViewsOrder.filter(id => id !== view.id);
-
-            await updateViewsOrder({
-                key: PREFIX_USER_VIEWS_ORDER_KEY + searchState.library.id,
-                value: userViewsOrder,
-                global: false
-            });
-
-            const sharedViewsOrder = !values.shared
-                ? searchState.sharedViewsOrder.filter(id => id !== view.id)
-                : [...searchState.sharedViewsOrder, view.id];
-
-            await updateViewsOrder({
-                key: PREFIX_SHARED_VIEWS_ORDER_KEY + searchState.library.id,
-                value: sharedViewsOrder,
-                global: false
-            });
-        }
-
-        if (view.id === searchState.view.current.id) {
-            searchDispatch({
-                type: SearchActionTypes.CHANGE_VIEW,
-                view: {
-                    ...searchState.view.current,
-                    label: values.label,
-                    description: !Object.values(values.description).every(x => x === '') ? values.description : null,
-                    display: {type: values.type, size: view.display.size},
-                    shared: values.shared
-                }
-            });
-        }
-
-        setConfirmLoading(false);
-        onClose();
-    };
-
-    return (
-        <Modal
-            forceRender
-            title={t('view.edit-view.title')}
-            open={visible}
-            onCancel={_handleCancel}
-            onOk={_handleOk}
-            confirmLoading={confirmLoading}
-        >
-            <Form labelCol={{span: 8}} wrapperCol={{span: 16}} form={form} onFinish={_handleSubmit}>
-                {availableLangs.map(availableLang => (
-                    <div key={availableLang}>
-                        <h2>{t(`language.${availableLang}`)}</h2>
-
-                        <Form.Item
-                            label={t('view.edit-view.label')}
-                            name={['label', availableLang]}
-                            initialValue={view.label[availableLang]}
-                            rules={defaultLang === availableLang ? [{required: true}] : []}
-                            data-testid={`viewName-input-${availableLang}`}
-                        >
-                            <Input />
-                        </Form.Item>
-
-                        <Form.Item
-                            label={t('view.edit-view.description')}
-                            initialValue={!!view.description ? view.description[availableLang] || '' : ''}
-                            name={['description', availableLang]}
-                            data-testid={`description-input-${availableLang}`}
-                        >
-                            <Input />
-                        </Form.Item>
-
-                        <Divider />
-                    </div>
-                ))}
-
-                <Form.Item
-                    label={t('view.edit-view.type')}
-                    name="type"
-                    data-testid="input-type"
-                    initialValue={view.display.type}
-                >
-                    <Select>
-                        <Select.Option value={ViewTypes.list}>{t('view.type-list')}</Select.Option>
-                        <Select.Option value={ViewTypes.cards}>{t('view.type-cards')}</Select.Option>
-                    </Select>
-                </Form.Item>
-
-                <Form.Item
-                    name="shared"
-                    initialValue={view.shared}
-                    valuePropName="checked"
-                    data-testid="input-shared"
-                    wrapperCol={{offset: 8, span: 16}}
-                >
-                    <Checkbox>{t('view.edit-view.shared')}</Checkbox>
-                </Form.Item>
-            </Form>
-        </Modal>
-    );
-}
-
-export default EditView;

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

package/src/components/LibraryItemsList/ViewPanel/View/View.test.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 {IView} from '_ui/types/views';
-import {SortOrder, ViewSizes, ViewTypes} from '_ui/_gqlTypes';
-import {act, render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import View from './View';
-
-describe('View', () => {
-    const mockView: IView = {
-        id: '0',
-        label: {en: 'My view 1', fr: 'My view 1'},
-        display: {type: ViewTypes.list, size: ViewSizes.MEDIUM},
-        color: '#50F0C4',
-        shared: false,
-        filters: [],
-        owner: true,
-        sort: {
-            field: 'id',
-            order: SortOrder.asc
-        }
-    };
-
-    test('should show view label', async () => {
-        await act(async () => {
-            render(
-                <MockSearchContextProvider>
-                    <View view={mockView} onEdit={jest.fn()} />
-                </MockSearchContextProvider>
-            );
-        });
-
-        expect(screen.getByTestId('view-title')).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/ViewPanel/View/View.tsx

@@ -1,262 +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 {CopyOutlined, DeleteOutlined, EditOutlined} from '@ant-design/icons';
-import {localizedTranslation, objectToNameValueArray} from '@leav/utils';
-import {Button, Tooltip, Typography} from 'antd';
-import omit from 'lodash/omit';
-import {useState} from 'react';
-import {DraggableProvidedDragHandleProps} from 'react-beautiful-dnd';
-import {RiUserReceivedLine} from 'react-icons/ri';
-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 IconViewType from '_ui/components/LibraryItemsList/IconViewType';
-import {PREFIX_SHARED_VIEWS_ORDER_KEY, PREFIX_USER_VIEWS_ORDER_KEY} from '_ui/constants';
-import {useLang} from '_ui/hooks';
-import useExecuteAddViewMutation from '_ui/hooks/useExecuteAddViewMutation/useExecuteAddViewMutation';
-import useExecuteDeleteViewMutation from '_ui/hooks/useExecuteDeleteViewMutation/useExecuteDeleteViewMutation';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IView} from '_ui/types/views';
-import {ViewInput, ViewSizes, ViewTypes} from '_ui/_gqlTypes';
-import {getRequestFromFilters} from '_ui/_utils/getRequestFromFilter';
-import {defaultView} from '../../constants';
-import useUpdateViewsOrderMutation from '../../hooks/useUpdateViewsOrderMutation';
-
-interface IWrapperProps {
-    selected: boolean;
-}
-
-const Infos = styled.div`
-    width: 100%;
-`;
-
-const Wrapper = styled.div<IWrapperProps>`
-    background: ${({selected}) => (selected ? `${themeVars.activeColor} ` : 'none')};
-    padding: 0.5rem;
-    display: flex;
-    align-items: center;
-`;
-
-const Handle = styled.div`
-    content: '....';
-    width: 20px;
-    height: 30px;
-    display: inline-block;
-    line-height: 5px;
-    padding: 3px 4px;
-    vertical-align: middle;
-    font-size: 12px;
-    font-family: sans-serif;
-    letter-spacing: 2px;
-    color: ${themeVars.borderLightColor};
-    text-shadow: 1px 0 1px black;
-
-    &::after {
-        content: '.. .. .. ..';
-    }
-`;
-
-const Title = styled.div`
-    display: flex;
-    align-items: center;
-    margin-left: 10px;
-`;
-
-const Description = styled.div`
-    opacity: 0.8;
-    margin-left: 10px;
-    overflow: hidden;
-`;
-
-interface IViewProps {
-    view: IView;
-    onEdit: (viewId: string) => void;
-    handleProps?: DraggableProvidedDragHandleProps;
-}
-
-function View({view, onEdit, handleProps}: IViewProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang, defaultLang} = useLang();
-
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-    const [description, setDescription] = useState<{expand: boolean; key: number}>({expand: false, key: 0});
-
-    const {addView} = useExecuteAddViewMutation();
-
-    const {deleteView} = useExecuteDeleteViewMutation();
-    const {updateViewsOrder} = useUpdateViewsOrderMutation(searchState.library.id);
-
-    const _changeView = () => {
-        searchDispatch({type: SearchActionTypes.CHANGE_VIEW, view});
-    };
-
-    const ROWS_DESCRIPTION = 3;
-
-    const _handleDelete = async (event: any) => {
-        // stop progation to avoid click on view
-        event.stopPropagation();
-
-        await deleteView(view.id);
-
-        const newOrder = (view.shared ? searchState.sharedViewsOrder : searchState.userViewsOrder).filter(
-            vId => vId !== view.id
-        );
-
-        await updateViewsOrder({
-            key: (view.shared ? PREFIX_SHARED_VIEWS_ORDER_KEY : PREFIX_USER_VIEWS_ORDER_KEY) + searchState.library.id,
-            value: newOrder,
-            global: false
-        });
-
-        if (view.id === searchState.view.current.id) {
-            searchDispatch({type: SearchActionTypes.CHANGE_VIEW, view: defaultView});
-        }
-    };
-
-    const _handleDuplicate = async (event: any) => {
-        // stop progation to avoid click on view
-        event.stopPropagation();
-
-        try {
-            const newView: ViewInput = {
-                ...omit(view, ['id', 'owner']),
-                library: searchState.library.id,
-                label: {
-                    [defaultLang]: `${localizedTranslation(view.label, lang)} (${t('global.copy')})`
-                },
-                filters: getRequestFromFilters(view.filters),
-                display: {
-                    size: ViewSizes.MEDIUM,
-                    type: ViewTypes.list
-                },
-                valuesVersions: objectToNameValueArray(view.valuesVersions).map(version => ({
-                    treeId: version.name,
-                    treeNode: version.value.id
-                })),
-                shared: false
-            };
-
-            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
-            });
-        } catch (e) {
-            console.error(e);
-        }
-    };
-
-    const _handleEdit = (event: any) => {
-        // stop progation to avoid click on view
-        event.stopPropagation();
-
-        onEdit(view.id);
-    };
-
-    const _onExpand = () => {
-        setDescription({expand: true, key: description.key});
-    };
-
-    const _onClose = () => {
-        setDescription({expand: false, key: description.key + 1});
-    };
-
-    const selected = view.id === searchState.view.current?.id;
-
-    const [isActionsShown, setIsActionsShown] = useState(false);
-
-    const viewLabel = localizedTranslation(view.label, lang);
-
-    return (
-        <Wrapper
-            key={view.id}
-            selected={selected}
-            onClick={_changeView}
-            color={view.color}
-            onMouseEnter={() => setIsActionsShown(true)}
-            onMouseLeave={() => setIsActionsShown(false)}
-        >
-            <Handle className="view-handle" {...handleProps} />
-            <Infos>
-                <Title data-testid="view-title">
-                    <IconViewType type={view.display.type} />
-                    <Typography.Text ellipsis={{tooltip: true}} style={{padding: '0 .5em', width: 'calc(100% - 1em)'}}>
-                        {viewLabel}
-                    </Typography.Text>
-                </Title>
-                {view.description && (
-                    <Description>
-                        <Typography.Paragraph
-                            key={description.key}
-                            ellipsis={{
-                                rows: ROWS_DESCRIPTION,
-                                expandable: true,
-                                onExpand: _onExpand,
-                                symbol: t('view.see-more')
-                            }}
-                            style={{marginBottom: 0}}
-                        >
-                            {localizedTranslation(view.description, lang)}
-                        </Typography.Paragraph>
-                        {description.expand && (
-                            <a
-                                href="!#"
-                                onClick={ev => {
-                                    ev.preventDefault();
-                                    _onClose();
-                                }}
-                            >
-                                {t('global.close')}
-                            </a>
-                        )}
-                    </Description>
-                )}
-            </Infos>
-            {!view.owner && !isActionsShown && <RiUserReceivedLine size="1.3em" />}
-            {isActionsShown && (
-                <>
-                    <Tooltip title={t('global.edit')}>
-                        <Button
-                            key="edit"
-                            onClick={_handleEdit}
-                            disabled={!view.owner}
-                            type="text"
-                            size="small"
-                            shape="circle"
-                            icon={<EditOutlined />}
-                        />
-                    </Tooltip>
-                    <Tooltip title={t('global.duplicate')}>
-                        <Button
-                            key="duplicate"
-                            onClick={_handleDuplicate}
-                            type="text"
-                            size="small"
-                            shape="circle"
-                            icon={<CopyOutlined />}
-                        />
-                    </Tooltip>
-                    <Tooltip title={t('global.delete')}>
-                        <Button
-                            key="delete"
-                            onClick={_handleDelete}
-                            disabled={!view.owner}
-                            type="text"
-                            size="small"
-                            shape="circle"
-                            icon={<DeleteOutlined />}
-                        />
-                    </Tooltip>
-                </>
-            )}
-        </Wrapper>
-    );
-}
-
-export default View;

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