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

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

@@ -0,0 +1,299 @@
+// 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 {localizedTranslation} from '@leav/utils';
+import {Badge, Button, Input} from 'antd';
+import {useState} from 'react';
+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 {ErrorDisplay} from '_ui/components/ErrorDisplay';
+import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
+import {SearchActionTypes} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
+import {Loading} from '_ui/components/Loading';
+import {PREFIX_SHARED_VIEWS_ORDER_KEY, PREFIX_USER_VIEWS_ORDER_KEY} from '_ui/constants';
+import {useLang} from '_ui/hooks';
+import {useUser} from '_ui/hooks/useUser/useUser';
+import {IView} from '_ui/types/views';
+import {useGetUserDataQuery, useGetViewsListQuery} from '_ui/_gqlTypes';
+import {prepareView} from '_ui/_utils';
+import useUpdateViewsOrderMutation from '../hooks/useUpdateViewsOrderMutation';
+import EditView from './EditView';
+import View from './View';
+
+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);
+        }
+    }
+`;
+
+const SubHeader = styled.div`
+    width: 100%;
+    border-top: ${themeVars.activeColor} 1px solid;
+    border-bottom: ${themeVars.activeColor} 1px solid;
+    padding: 0.3rem;
+    padding-left: 1rem;
+    font-weight: 700;
+    font-size: 14px;
+`;
+
+const Views = styled.div`
+    width: 100%;
+`;
+
+const SearchWrapper = styled.div`
+    margin: 1rem;
+`;
+
+const CustomBadge = styled(Badge)`
+    margin-left: 8px;
+    && > * {
+        background-color: ${themeVars.borderLightColor};
+        color: ${themeVars.defaultTextColor};
+    }
+`;
+
+const _sortViewFunction = (referenceOrder: string[]) => (viewA: IView, viewB: IView) => {
+    const orderA = referenceOrder.indexOf(viewA.id);
+    const orderB = referenceOrder.indexOf(viewB.id);
+    const isAOrdered = orderA !== -1;
+    const isBOrdered = orderB !== -1;
+
+    if (isAOrdered && isBOrdered) {
+        return orderA - orderB;
+    } else if (isAOrdered && !isBOrdered) {
+        return -1;
+    } else if (!isAOrdered && isBOrdered) {
+        return 1;
+    } else {
+        return Number(viewA.id) - Number(viewB.id);
+    }
+};
+
+function ViewPanel(): JSX.Element {
+    const {t} = useTranslation();
+
+    const {userData} = useUser();
+    const {lang} = useLang();
+    const [search, setSearch] = useState('');
+    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
+    const [editView, setEditView] = useState<IView | false>(false);
+
+    const {updateViewsOrder} = useUpdateViewsOrderMutation(searchState.library.id);
+
+    const getViewsList = useGetViewsListQuery({
+        variables: {
+            libraryId: searchState?.library?.id || ''
+        }
+    });
+
+    const getOrderDataQuery = useGetUserDataQuery({
+        variables: {
+            keys: [
+                PREFIX_USER_VIEWS_ORDER_KEY + searchState.library.id,
+                PREFIX_SHARED_VIEWS_ORDER_KEY + searchState.library.id
+            ]
+        },
+        onCompleted: d => {
+            searchDispatch({
+                type: SearchActionTypes.SET_USER_VIEWS_ORDER,
+                userViewsOrder: d.userData?.data[PREFIX_USER_VIEWS_ORDER_KEY + searchState.library.id] || []
+            });
+            searchDispatch({
+                type: SearchActionTypes.SET_SHARED_VIEWS_ORDER,
+                sharedViewsOrder: d.userData?.data[PREFIX_SHARED_VIEWS_ORDER_KEY + searchState.library.id] || []
+            });
+        }
+    });
+
+    if (getViewsList.loading) {
+        return <Loading />;
+    }
+
+    const _handleSearchSubmit = (value: string) => {
+        setSearch(value);
+    };
+
+    const {sharedViews, userViews}: {sharedViews: IView[]; userViews: IView[]} = getViewsList.data?.views.list.reduce(
+        (acc, view) => {
+            const v: IView = prepareView(view, searchState.attributes, searchState.library.id, userData?.userId);
+
+            if (search && !localizedTranslation(v.label, lang).toUpperCase().includes(search.toUpperCase())) {
+                return acc;
+            }
+
+            if (v.shared) {
+                return {...acc, sharedViews: [...acc.sharedViews, v]};
+            }
+
+            return {...acc, userViews: [...acc.userViews, v]};
+        },
+        {sharedViews: [], userViews: []}
+    ) ?? {sharedViews: [], userViews: []};
+
+    if (getViewsList.error || getOrderDataQuery.error) {
+        return <ErrorDisplay message={(getViewsList.error || getOrderDataQuery.error).message} />;
+    }
+
+    if (!sharedViews || !userViews) {
+        return <ErrorDisplay message={t('error.error_occurred')} />;
+    }
+
+    const _showModal = (view: IView) => {
+        setEditView(view);
+    };
+
+    const _closeModal = () => {
+        setEditView(false);
+    };
+
+    const onDragEnd = async (result: DropResult, provided: ResponderProvided) => {
+        if (!result.destination) {
+            return;
+        }
+
+        const isOrderingUserViews = result.source.droppableId === 'user';
+
+        const viewsListBefore = isOrderingUserViews ? userViews : sharedViews;
+        const orderedViews = viewsListBefore.map(v => v.id);
+
+        const element = orderedViews[result.source.index];
+        orderedViews.splice(result.source.index, 1);
+        orderedViews.splice(result.destination.index, 0, element);
+
+        const keyToUpdate = isOrderingUserViews
+            ? PREFIX_USER_VIEWS_ORDER_KEY + searchState.library.id
+            : PREFIX_SHARED_VIEWS_ORDER_KEY + searchState.library.id;
+
+        await updateViewsOrder({
+            key: keyToUpdate,
+            value: orderedViews,
+            global: false
+        });
+    };
+
+    userViews.sort(_sortViewFunction(searchState.userViewsOrder));
+    sharedViews.sort(_sortViewFunction(searchState.sharedViewsOrder));
+
+    const handleHide = () => {
+        searchDispatch({type: SearchActionTypes.TOGGLE_SIDEBAR});
+    };
+
+    return (
+        <Wrapper>
+            {editView && (
+                <EditView
+                    view={editView}
+                    visible={!!editView}
+                    onClose={_closeModal}
+                    libraryId={searchState.library.id}
+                />
+            )}
+            <Header>
+                <span>{t('view.views')}</span>
+                <Button onClick={handleHide} icon={<FontAwesomeIcon icon={faAngleLeft} />}></Button>
+            </Header>
+            <SearchWrapper>
+                <Input.Search placeholder={t('view.search')} onSearch={_handleSearchSubmit} />
+            </SearchWrapper>
+
+            <SubHeader>{t('view.shared-views')}</SubHeader>
+
+            <DragDropContext onDragEnd={onDragEnd}>
+                <Droppable droppableId={'shared'}>
+                    {providedDroppable => (
+                        <Views {...providedDroppable.droppableProps} ref={providedDroppable.innerRef}>
+                            {sharedViews.map((view, idx) => (
+                                <Draggable key={idx} draggableId={idx.toString()} index={idx}>
+                                    {provided => (
+                                        <div
+                                            ref={provided.innerRef}
+                                            {...provided.draggableProps}
+                                            {...provided.dragHandleProps}
+                                        >
+                                            <View
+                                                key={view.id}
+                                                view={view}
+                                                onEdit={() => _showModal(view)}
+                                                handleProps={provided.dragHandleProps}
+                                            />
+                                        </div>
+                                    )}
+                                </Draggable>
+                            ))}
+                            {providedDroppable.placeholder}
+                        </Views>
+                    )}
+                </Droppable>
+            </DragDropContext>
+
+            <SubHeader>
+                {t('view.my-views')}
+                <CustomBadge count={userViews.length} />
+            </SubHeader>
+            <DragDropContext onDragEnd={onDragEnd}>
+                <Droppable droppableId={'user'}>
+                    {providedDroppable => (
+                        <Views {...providedDroppable.droppableProps} ref={providedDroppable.innerRef}>
+                            {userViews.map((view, idx) => (
+                                <Draggable key={idx} draggableId={idx.toString()} index={idx}>
+                                    {provided => (
+                                        <div
+                                            ref={provided.innerRef}
+                                            {...provided.draggableProps}
+                                            {...provided.dragHandleProps}
+                                        >
+                                            <View
+                                                key={view.id}
+                                                view={view}
+                                                onEdit={() => _showModal(view)}
+                                                handleProps={provided.dragHandleProps}
+                                            />
+                                        </div>
+                                    )}
+                                </Draggable>
+                            ))}
+                            {providedDroppable.placeholder}
+                        </Views>
+                    )}
+                </Droppable>
+            </DragDropContext>
+        </Wrapper>
+    );
+}
+
+export default ViewPanel;

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

package/src/components/LibraryItemsList/constants.ts

@@ -0,0 +1,24 @@
+import {IView} from '_ui/types/views';
+import {AttributeFormat, ViewSizes, ViewTypes} from '_ui/_gqlTypes';
+
+export const INFOS_COLUMN_WIDTH = '350px';
+export const selectionColumn = 'selection-column';
+export const infosCol = 'infos';
+export const initialColumnsLimit = 5;
+export const viewSettingsField = 'fields';
+export const attributeExtendedKey = 'extended';
+
+export const defaultView: IView = {
+    id: 'default-view',
+    label: {fr: 'Vue par défaut', en: 'Default view'},
+    owner: true,
+    display: {type: ViewTypes.list, size: ViewSizes.MEDIUM},
+    shared: false,
+    filters: []
+};
+
+export const formatNotUsingCondition = [AttributeFormat.boolean];
+
+export const defaultLinkAttributeFilterFormat = AttributeFormat.text;
+
+export const getSelectedViewKey = (libraryId: string) => `selected_view_${libraryId}`;

package/src/components/LibraryItemsList/helpers/defaultFilterConditionByAttributeFormat.ts

@@ -0,0 +1,18 @@
+import {AttributeConditionFilter, AttributeConditionType} from '_ui/types/search';
+import {AttributeFormat} from '_ui/_gqlTypes';
+
+export const defaultFilterConditionByAttributeFormat = (format: AttributeFormat): AttributeConditionType => {
+    switch (format) {
+        case AttributeFormat.boolean:
+        case AttributeFormat.date:
+        case AttributeFormat.numeric:
+            return AttributeConditionFilter.EQUAL;
+        case AttributeFormat.encrypted:
+            return AttributeConditionFilter.IS_EMPTY;
+        case AttributeFormat.text:
+        case AttributeFormat.date_range:
+        case AttributeFormat.extended:
+        default:
+            return AttributeConditionFilter.CONTAINS;
+    }
+};

package/src/components/LibraryItemsList/helpers/displayTypeToPreviewSize.ts

@@ -0,0 +1,15 @@
+import {PreviewSize} from '_ui/index';
+import {ViewSizes} from '_ui/_gqlTypes';
+
+export const displayTypeToPreviewSize = (displayType: ViewSizes) => {
+    switch (displayType) {
+        case ViewSizes.SMALL:
+            return PreviewSize.small;
+        case ViewSizes.MEDIUM:
+            return PreviewSize.medium;
+        case ViewSizes.BIG:
+            return PreviewSize.big;
+        default:
+            return PreviewSize.small;
+    }
+};

package/src/components/LibraryItemsList/helpers/extractAttributesFromLibrary.ts

@@ -0,0 +1,86 @@
+// 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 {isTypeLink} from '@leav/utils';
+import {IAttribute} from '_ui/types/search';
+import {AttributeFormat, AttributeType} from '_ui/_gqlTypes';
+import {
+    ILibraryDetailExtended,
+    ILibraryDetailExtendedAttributeLink,
+    ILibraryDetailExtendedAttributeStandard,
+    ILibraryDetailExtendedAttributeTree
+} from '_ui/_queries/libraries/getLibraryDetailExtendQuery';
+
+export default (library: ILibraryDetailExtended): IAttribute[] =>
+    library.attributes.reduce((acc: IAttribute[], attribute) => {
+        if (
+            (attribute.format === null ||
+                (attribute.format && Object.values(AttributeFormat).includes(attribute.format))) &&
+            attribute.type &&
+            Object.values(AttributeType).includes(attribute.type)
+        ) {
+            const newAttributes: IAttribute[] = [
+                {
+                    id: attribute.id,
+                    type: attribute.type,
+                    format: attribute.format,
+                    label: attribute.label,
+                    isLink: isTypeLink(attribute.type),
+                    isMultiple: attribute.multiple_values,
+                    linkedLibrary: (attribute as ILibraryDetailExtendedAttributeLink).linked_library,
+                    linkedTree: (attribute as ILibraryDetailExtendedAttributeTree).linked_tree,
+                    library: library.id,
+                    embedded_fields: (attribute as ILibraryDetailExtendedAttributeStandard).embedded_fields
+                }
+            ];
+
+            // case attribute is a linked attribute
+            if (
+                (attribute.type === AttributeType.simple_link || attribute.type === AttributeType.advanced_link) &&
+                (attribute as ILibraryDetailExtendedAttributeLink).linked_library
+            ) {
+                const linkedLibraryId = (attribute as ILibraryDetailExtendedAttributeLink).linked_library.id;
+                const newLinkedAttributes: IAttribute[] = (attribute as ILibraryDetailExtendedAttributeLink).linked_library.attributes.map(
+                    linkedAttribute => ({
+                        id: linkedAttribute.id,
+                        type: linkedAttribute.type,
+                        format: linkedAttribute.format,
+                        label: linkedAttribute.label,
+                        isLink: isTypeLink(linkedAttribute.type),
+                        isMultiple: linkedAttribute.multiple_values,
+                        linkedLibrary: (attribute as ILibraryDetailExtendedAttributeLink).linked_library,
+                        linkedTree: (attribute as ILibraryDetailExtendedAttributeTree).linked_tree,
+                        library: linkedLibraryId
+                    })
+                );
+
+                newAttributes.push(...newLinkedAttributes);
+            }
+
+            if (
+                attribute.type === AttributeType.tree &&
+                (attribute as ILibraryDetailExtendedAttributeTree).linked_tree
+            ) {
+                const newLinkedAttributes: IAttribute[] = (attribute as ILibraryDetailExtendedAttributeTree).linked_tree.libraries
+                    .map(linkedTreeLibrary => {
+                        const linkedLibraryId = linkedTreeLibrary.library.id;
+                        return linkedTreeLibrary.library.attributes.map(linkedAttribute => ({
+                            id: linkedAttribute.id,
+                            type: linkedAttribute.type,
+                            format: linkedAttribute.format,
+                            label: linkedAttribute.label,
+                            isLink: isTypeLink(linkedAttribute.type),
+                            isMultiple: linkedAttribute.multiple_values,
+                            library: linkedLibraryId
+                        }));
+                    })
+                    .flat();
+
+                newAttributes.push(...newLinkedAttributes);
+            }
+
+            return [...acc, ...newAttributes];
+        }
+
+        return acc;
+    }, []);

package/src/components/LibraryItemsList/helpers/getFieldFromKey.ts

@@ -0,0 +1,50 @@
+// 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 {localizedTranslation} from '@leav/utils';
+import {ILang} from '_ui/types/misc';
+import {IAttribute, IField, IParentAttributeData} from '_ui/types/search';
+import {ILibraryDetailExtended} from '_ui/_queries/libraries/getLibraryDetailExtendQuery';
+import {getAttributeFromKey} from '_ui/_utils';
+
+export default (fieldKey: string, library: ILibraryDetailExtended, attributes: IAttribute[], lang: ILang): IField => {
+    let parentAttributeData: IParentAttributeData | undefined;
+    const splitKey = fieldKey.split('.');
+    const attribute = getAttributeFromKey(fieldKey, library.id, attributes);
+    let recordLibrary = null;
+
+    // For attributes through tree attribute, key is [parent attribute].[record library].[attribute]
+    if (splitKey.length === 3) {
+        const parentAttributeId = splitKey[0];
+        const parentAttribute = attributes.find(att => parentAttributeId === att.id && library.id === att.library);
+
+        if (parentAttribute) {
+            parentAttributeData = {
+                id: parentAttribute.id,
+                type: parentAttribute.type
+            };
+
+            recordLibrary = splitKey[1];
+        }
+    }
+
+    if (!attribute) {
+        return null;
+    }
+
+    const label = typeof attribute.label === 'string' ? attribute.label : localizedTranslation(attribute.label, lang);
+
+    const field: IField = {
+        key: fieldKey,
+        id: attribute.id,
+        library: attribute.library,
+        label,
+        format: attribute.format,
+        type: attribute.type,
+        multipleValues: attribute.isMultiple,
+        parentAttributeData,
+        recordLibrary
+    };
+
+    return field;
+};

package/src/components/LibraryItemsList/helpers/getFieldsFromView.ts

@@ -0,0 +1,23 @@
+// 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 {ILang} from '_ui/types/misc';
+import {IField} from '_ui/types/search';
+import {IView} from '_ui/types/views';
+import {ILibraryDetailExtended} from '_ui/_queries/libraries/getLibraryDetailExtendQuery';
+import {viewSettingsField} from '../constants';
+import extractAttributesFromLibrary from './extractAttributesFromLibrary';
+import getFieldFromKey from './getFieldFromKey';
+
+export default (view: IView, library: ILibraryDetailExtended, lang: ILang): IField[] => {
+    const defaultAttributes = extractAttributesFromLibrary(library);
+
+    return !!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;
+              }, [])
+        : [];
+};

package/src/components/LibraryItemsList/helpers/getFieldsKeyFromAttribute.ts

@@ -0,0 +1,14 @@
+import {ISelectedAttribute} from '_ui/types/attributes';
+import {AttributeFormat, AttributeType} from '_ui/_gqlTypes';
+
+export const getFieldsKeyFromAttribute = (attribute: ISelectedAttribute) => {
+    if (attribute?.format === AttributeFormat.extended && attribute.path) {
+        return `${attribute.path}`;
+    } else if (attribute.parentAttributeData) {
+        return attribute.parentAttributeData.type === AttributeType.tree
+            ? `${attribute.parentAttributeData.id}.${attribute.library}.${attribute.id}`
+            : `${attribute.parentAttributeData.id}.${attribute.id}`;
+    }
+
+    return `${attribute.id}`;
+};

package/src/components/LibraryItemsList/helpers/getSortFieldByAttributeType.ts

@@ -0,0 +1,16 @@
+import {AttributeType} from '_ui/_gqlTypes';
+import {infosCol} from '../constants';
+
+export const getSortFieldByAttributeType = (attributeId: string, type: AttributeType) => {
+    attributeId = infosCol === attributeId ? 'id' : attributeId;
+
+    switch (type) {
+        case AttributeType.tree:
+        case AttributeType.simple_link:
+            const subFieldByDefault = 'id';
+            return `${attributeId}.${subFieldByDefault}`;
+        case AttributeType.advanced_link:
+        default:
+            return attributeId;
+    }
+};