@steroidsjs/core 2.0.0-rc.7 → 2.0.1-beta.113

package/ui/crud/Crud/Crud.tsx

@@ -0,0 +1,454 @@
+import * as React from 'react';
+import _get from 'lodash-es/get';
+import _isString from 'lodash-es/isString';
+import _isArray from 'lodash-es/isArray';
+import _isEmpty from 'lodash-es/isEmpty';
+import _omit from 'lodash-es/omit';
+import {connect} from 'react-redux';
+import {components, fetch, normalize} from '../../../hoc';
+import {getRouteId, getRouteParams, getRouteProp} from '../../../reducers/router';
+import {goToRoute} from '../../../actions/router';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IFormProps} from '../../form/Form/Form';
+import {IGridProps} from '../../list/Grid/Grid';
+import CrudGrid from './CrudGrid';
+import {IControlItem} from '../../nav/Controls/Controls';
+import {IDetailProps} from '../../list/Detail/Detail';
+import CrudForm from './CrudForm';
+import CrudDetail from './CrudDetail';
+import {closeModal, openModal} from '../../../actions/modal';
+import Modal from '../../modal/Modal';
+import {getOpened} from '../../../reducers/modal';
+import {listRefresh} from '../../../actions/list';
+
+export interface ICrudItem extends Omit<IControlItem, 'visible' | 'confirm' | 'onClick'> {
+    title?: string,
+    actionName?: string,
+    pkRequired?: boolean,
+    mode?: 'page' | 'modal',
+    component?: any,
+    componentProps?: any,
+    controlsInclude?: string[],
+    controlsExclude?: string[],
+    visible?: boolean | ((item: any, crudItem: ICrudItem, isGrid: boolean) => boolean),
+    confirm?: string | ((e: any, itemId: PrimaryKey, item: any, props: ICrudClickProps) => any),
+    onClick?: (e: Event | React.MouseEvent, itemId: PrimaryKey, item: any, props: ICrudClickProps) => any,
+}
+
+export interface ICrudClickProps extends ICrudProps, IConnectHocOutput, IComponentsHocOutput {
+    routeId?: string,
+    routeParams?: any,
+    item?: any,
+    itemId?: PrimaryKey,
+    action?: string,
+}
+
+export interface ICrudProps {
+    crudId?: string;
+    title?: string,
+    mode?: 'page' | 'modal',
+    restUrl?: string | ((props: ICrudClickProps) => string),
+    primaryKey?: 'id' | string,
+    queryKey?: 'id' | string,
+    model?: string,
+    searchModel?: string,
+    index?: boolean | ICrudItem,
+    create?: boolean | ICrudItem,
+    update?: boolean | ICrudItem,
+    view?: boolean | ICrudItem,
+    delete?: boolean | ICrudItem,
+    items?: ICrudItem[] | { [key: string]: ICrudItem };
+    grid?: IGridProps | ((props: ICrudClickProps) => IGridProps),
+    gridComponent?: any,
+    form?: IFormProps | ((props: ICrudClickProps) => IFormProps),
+    formComponent?: any,
+    detail?: IDetailProps,
+    detailComponent?: any,
+    [key: string]: any,
+}
+
+export interface ICrudChildrenProps extends ICrudProps, IConnectHocOutput, IComponentsHocOutput {
+    item?: any,
+    itemId?: PrimaryKey,
+    action?: string,
+    routeId?: string,
+    controlsGetter?: any,
+    restUrl?: string,
+    onComplete?: () => void,
+    form?: IFormProps,
+    grid?: IGridProps,
+}
+
+interface ICrudPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+    item?: any,
+    itemId?: PrimaryKey,
+    action?: string,
+    modalId?: string,
+    routeId?: string,
+    routeTitle?: string,
+    routeAction?: string,
+    routeParams?: any,
+    hasModal?: boolean,
+    _items?: ICrudItem[];
+}
+
+const MODE_PAGE = 'page';
+const MODE_MODAL = 'modal';
+
+export const DEFAULT_PRIMARY_KEY = 'id';
+export const DEFAULT_QUERY_KEY = 'id';
+export const DEFAULT_MODE = MODE_PAGE;
+export const CRUD_ACTION_INDEX = 'index';
+
+export interface ICrudViewProps {
+    className?: CssClassName,
+    controls?: IControlItem[],
+    title?: string,
+}
+
+export const getCrudId = (props: ICrudProps & ICrudPrivateProps) => props.crudId || props.routeId;
+export const getCrudModalId = (props: ICrudProps & ICrudPrivateProps) => getCrudId(props);
+export const getCrudGridId = (props: ICrudProps & ICrudPrivateProps) => getCrudId(props);
+export const getCrudFormId = (props: ICrudProps & ICrudPrivateProps, suffix = null) => [getCrudId(props), props.itemId, suffix].filter(Boolean).join('_');
+
+const defaultItems: ({ [key: string]: ICrudItem }) = {
+    index: {
+        component: CrudGrid,
+        pkRequired: false,
+    },
+    create: {
+        title: __('Добавление'),
+        component: CrudForm,
+        pkRequired: false,
+    },
+    update: {
+        title: __('Редактирование'),
+        component: CrudForm,
+        controlsInclude: ['create', 'delete', 'view'],
+    },
+    view: {
+        title: __('Просмотр'),
+        component: CrudDetail,
+        controlsInclude: ['update', 'delete'],
+    },
+    delete: {
+        position: 'right',
+        confirm: (e, id) => __('Удалить запись {id}?', {id}),
+        onClick: async (e, itemId, item, props: ICrudClickProps) => {
+            const restUrl = typeof props.restUrl === 'function' ? props.restUrl(props) : props.restUrl;
+            await props.http.delete(`${restUrl}/${itemId}`);
+
+            if (props.action === CRUD_ACTION_INDEX) {
+                props.dispatch(listRefresh(getCrudGridId(props)));
+            } else {
+                props.dispatch(goToRoute(props.routeId, {
+                    ...props.routeParams,
+                    [props.queryKey]: null,
+                    [props.queryKey + 'Action']: null,
+                }));
+            }
+        },
+    },
+};
+
+@components('http', 'ui')
+@normalize(
+    {
+        fromKey: 'items',
+        toKey: '_items',
+        normalizer: (items, props) => {
+            // Array -> Object
+            if (_isArray(items)) {
+                items = items.reduce((obj, item: ICrudItem) => {
+                    obj[item.id] = {
+                        ...item,
+                    };
+                    return obj;
+                }, {});
+            } else if (!items) {
+                items = {};
+            }
+
+            // Merge with defaults
+            Object.keys(defaultItems).forEach(id => {
+                items[id] = {
+                    id,
+                    ...defaultItems[id],
+                    ...items[id],
+                    ...(typeof props[id] === 'object' ? props[id] : null),
+                };
+                if (props[id] === false) {
+                    items[id].visible = false;
+                }
+            });
+
+            // Object -> Array + defaults
+            return Object.keys(items).map(id => ({
+                id,
+                actionName: id,
+                pkRequired: true,
+                ...items[id],
+            }));
+        },
+    },
+)
+@connect((state, props) => {
+    const routeParams = getRouteParams(state);
+    const queryKey = props.queryKey || DEFAULT_QUERY_KEY;
+    const isModal = !!props.modalId;
+
+    const routeAction = _get(routeParams, queryKey + 'Action') || _get(routeParams, queryKey) || CRUD_ACTION_INDEX;
+    let itemId = _get(routeParams, queryKey + 'Action') ? _get(routeParams, queryKey) : null;
+
+    let action = routeAction;
+    const crudItem = props._items.find(item => item.actionName === action);
+    const mode = crudItem && crudItem.mode || props.mode || DEFAULT_MODE;
+    if (mode === MODE_MODAL && !isModal) {
+        action = CRUD_ACTION_INDEX;
+        itemId = null;
+    }
+
+    return {
+        routeId: getRouteId(state),
+        routeTitle: getRouteProp(state, null, 'title') || getRouteProp(state, null, 'label'),
+        routeAction,
+        action,
+        itemId,
+        routeParams,
+        hasModal: !_isEmpty(getOpened(state)),
+    };
+})
+@fetch(props => {
+    const restUrl = typeof props.restUrl === 'function' ? props.restUrl(props) : props.restUrl;
+    return props.itemId && restUrl && {
+        id: getCrudId(props) + '_' + props.itemId,
+        url: `${restUrl}/${props.itemId}`,
+        key: 'item',
+    };
+})
+export default class Crud extends React.PureComponent<ICrudProps & ICrudPrivateProps> {
+
+    static defaultProps = {
+        primaryKey: DEFAULT_PRIMARY_KEY,
+        queryKey: DEFAULT_QUERY_KEY,
+        mode: DEFAULT_MODE,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this._getControls = this._getControls.bind(this);
+        this._onComplete = this._onComplete.bind(this);
+        this._onModalClose = this._onModalClose.bind(this);
+    }
+
+    componentDidMount() {
+        this._modalUpdate();
+    }
+
+    componentDidUpdate(prevProps) {
+        this._modalUpdate(prevProps);
+    }
+
+    render() {
+        let crudItem = this.props._items.find(item => item.actionName === this.props.action);
+        const mode = crudItem && crudItem.mode || this.props.mode;
+        const isModal = !!this.props.modalId;
+
+        // In modal mode always render index on page
+        if (mode === MODE_MODAL && !isModal) {
+            crudItem = this.props._items.find(item => item.actionName === CRUD_ACTION_INDEX);
+        }
+
+        // No crud
+        if (!crudItem) {
+            return this.props.children;
+        }
+
+        // No render index in modal
+        if (isModal && this.props.action === CRUD_ACTION_INDEX) {
+            return null;
+        }
+
+        const ItemComponent = crudItem.component;
+        const CrudView = /* TODO this.props.view || */this.props.ui.getView('crud.CrudView');
+        const restUrl = typeof this.props.restUrl === 'function' ? this.props.restUrl(this.props) : this.props.restUrl;
+        const form = typeof this.props.form === 'function' ? this.props.form(this.props) : this.props.form;
+        const grid = typeof this.props.grid === 'function' ? this.props.grid(this.props) : this.props.grid;
+        return (
+            <CrudView
+                title={this.props.routeTitle}
+                {...this.props}
+                controls={this._getControls()}
+            >
+                {ItemComponent && (
+                    <ItemComponent
+                        {...this.props}
+                        restUrl={restUrl}
+                        form={form}
+                        grid={grid}
+                        mode={mode}
+                        routeId={this.props.routeId}
+                        controlsGetter={this._getControls}
+                        onComplete={this._onComplete}
+                        {...crudItem.componentProps}
+                    />
+                )}
+            </CrudView>
+        );
+    }
+
+    _modalUpdate(prevProps: ICrudProps & ICrudPrivateProps = null) {
+        const crudItem = this.props._items.find(item => item.actionName === this.props.routeAction);
+        const mode = crudItem && crudItem.mode || this.props.mode;
+        const isModal = !!this.props.modalId;
+
+        if (mode !== MODE_MODAL) {
+            if (isModal) {
+                this.props.dispatch(closeModal(getCrudModalId(this.props)));
+            }
+            return;
+        }
+
+        if (isModal) {
+            return;
+        }
+
+        const prevAction = prevProps ? prevProps.routeAction : null;
+        const nextAction = this.props.routeAction;
+        if (prevAction !== nextAction) {
+            if (prevAction === CRUD_ACTION_INDEX) {
+                this.props.dispatch(closeModal(getCrudModalId(this.props)));
+            }
+            if (nextAction !== CRUD_ACTION_INDEX) {
+                this.props.dispatch(openModal(Modal, {
+                    modalId: getCrudModalId(this.props),
+                    size: 'lg',
+                    title: crudItem.title || crudItem.label || null,
+                    onClose: this._onModalClose,
+                    component: Crud,
+                    componentProps: this.props,
+                }));
+            }
+        }
+    }
+
+    _onComplete() {
+        const crudItem = this.props._items.find(item => item.actionName === this.props.routeAction);
+        const mode = crudItem && crudItem.mode || this.props.mode;
+        if (mode === MODE_MODAL) {
+            this.props.dispatch(closeModal(getCrudModalId(this.props)));
+            this._onModalClose();
+        } else {
+            this.props.dispatch(goToRoute(this.props.routeId, {
+                ...this.props.routeParams,
+                [this.props.queryKey]: null,
+                [this.props.queryKey + 'Action']: null,
+            }));
+        }
+    }
+
+    _onModalClose() {
+        this.props.dispatch([
+            listRefresh(getCrudGridId(this.props)),
+            goToRoute(this.props.routeId, {
+                ...this.props.routeParams,
+                [this.props.queryKey]: null,
+                [this.props.queryKey + 'Action']: null,
+            }),
+        ]);
+    }
+
+    _getControls(item = null) {
+        let action;
+        let itemId;
+        const isGrid = !!item;
+
+        if (this.props.hasModal && !this.props.modalId) {
+            action = CRUD_ACTION_INDEX
+        } else {
+            action = this.props.action;
+            itemId = item && item[this.props.primaryKey];
+
+            // Try get item id from route params
+            if (!isGrid && !itemId) {
+                itemId = this.props.itemId;
+            }
+        }
+
+        const currentCrudItem = this.props._items.find(i => i.actionName === action);
+
+        return (this.props._items || []).map((crudItem: ICrudItem) => {
+            let visible = this._resolveVisible(currentCrudItem, crudItem, itemId, isGrid);
+            if (visible && typeof crudItem.visible === 'function') {
+                visible = !!crudItem.visible(item, crudItem, isGrid);
+            }
+
+            const button: IControlItem = {
+                ..._omit(crudItem, ['actionName', 'pkRequired', 'component', 'componentProps', 'visible', 'confirm', 'onClick']),
+                confirm: typeof crudItem.confirm === 'string' ? crudItem.confirm : null,
+                visible,
+            };
+            if (crudItem.onClick) {
+                button.onClick = e => this._onClick(e, itemId, item, crudItem);
+            } else {
+                button.toRoute = this.props.routeId;
+                button.toRouteParams = {
+                    ...this.props.routeParams,
+                    [this.props.queryKey]: crudItem.pkRequired ? itemId : undefined,
+                    [this.props.queryKey + 'Action']: crudItem.actionName !== CRUD_ACTION_INDEX ? crudItem.actionName : undefined,
+                };
+            }
+
+            return button;
+        });
+    }
+
+    _onClick(e, itemId: PrimaryKey, item: any, crudItem: ICrudItem) {
+        // Custom confirm
+        if (typeof crudItem.confirm === 'function') {
+            const value = crudItem.confirm(e, itemId, item, this.props);
+            const result = _isString(value) ? confirm(value) : !!value;
+            if (!result) {
+                e.preventDefault();
+                return;
+            }
+        }
+        crudItem.onClick(e, itemId, item, this.props);
+    }
+
+    _resolveVisible(currentCrudItem: ICrudItem, crudItem: ICrudItem, itemId: PrimaryKey, isGrid: boolean) {
+        // Force disable visible
+        if (crudItem.visible === false) {
+            return false;
+        }
+
+        // No render control on self page
+        if (currentCrudItem.actionName === crudItem.actionName) {
+            return false;
+        }
+
+        // Grid render only "pkRequired" actions
+        if (isGrid) {
+            return !!crudItem.pkRequired;
+        }
+
+        // Always show index action in page mode
+        if (crudItem.actionName === CRUD_ACTION_INDEX) {
+            return !this.props.hasModal;
+        }
+
+        // Check includes
+        if (currentCrudItem.controlsInclude && !currentCrudItem.controlsInclude.includes(crudItem.id)) {
+            return false;
+        }
+
+        // Check excludes
+        if (currentCrudItem.controlsExclude && currentCrudItem.controlsExclude.includes(crudItem.id)) {
+            return false;
+        }
+
+        return !crudItem.pkRequired === !itemId;
+    }
+}

package/ui/crud/Crud/CrudDetail.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import {ICrudChildrenProps} from './Crud';
+import Detail from '../../list/Detail';
+
+export default class CrudGrid extends React.PureComponent<ICrudChildrenProps> {
+
+    render() {
+        return (
+            <Detail
+                item={this.props.item}
+                model={this.props.model}
+                attributes={[this.props.primaryKey]}
+                {...this.props.detail}
+            />
+        );
+    }
+}

package/ui/crud/Crud/CrudForm.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {showNotification} from '../../../actions/notifications';
+import Form from '../../form/Form/Form';
+import {getCrudFormId, ICrudChildrenProps} from './Crud';
+
+export default class CrudForm extends React.PureComponent<ICrudChildrenProps> {
+
+    render() {
+        return (
+            <Form
+                formId={getCrudFormId(this.props)}
+                action={[this.props.restUrl, this.props.itemId].filter(Boolean).join('/')}
+                model={this.props.model}
+                autoFocus
+                submitLabel={this.props.itemId ? __('Сохранить') : __('Добавить')}
+                layout='horizontal'
+                onComplete={() => {
+                    window.scrollTo(0, 0);
+                    this.props.dispatch(showNotification(__('Запись успешно обновлена.')));
+
+                    if (this.props.onComplete) {
+                        this.props.onComplete();
+                    }
+                }}
+                {...this.props.form}
+                initialValues={{
+                    ...this.props.form.initialValues,
+                    ...this.props.item,
+                }}
+            />
+        );
+    }
+}

package/ui/crud/Crud/CrudGrid.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Grid from '../../list/Grid';
+import {getCrudGridId, ICrudChildrenProps} from './Crud';
+
+export default class CrudGrid extends React.PureComponent<ICrudChildrenProps> {
+
+    render() {
+        return (
+            <Grid
+                listId={getCrudGridId(this.props)}
+                action={this.props.restUrl}
+                scope={['model', 'permission']}
+                primaryKey={this.props.primaryKey}
+                model={this.props.model}
+                //searchModel={this.props.searchModel}
+                controls={this.props.controlsGetter}
+                columns={[this.props.primaryKey]}
+                pagination={{
+                    loadMore: false,
+                }}
+                {...this.props.grid}
+            />
+        );
+    }
+}

package/ui/crud/Crud/demo/default.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Crud from '../Crud';
+
+
+
+/**
+ * Default
+ * @order 1
+ * @col 8
+ */
+export default () => (
+    <>
+        <Crud
+            grid={{
+                items: [
+                    {
+                        id: 1,
+                        name: 'Foo',
+                    },
+                    {
+                        id: 2,
+                        name: 'Bar',
+                    },
+                ],
+                columns: [
+                    {
+                        attribute: 'id',
+                        label: __('ИД'),
+                    },
+                    {
+                        attribute: 'name',
+                        label: __('Имя'),
+                    },
+                ],
+            }}
+            form={{
+                fields: [
+                    {
+                        attribute: 'name',
+                        label: __('Имя'),
+                    },
+                ]
+            }}
+            detail={{
+                attributes: [
+                    {
+                        attribute: 'id',
+                        label: __('ИД'),
+                    },
+                    {
+                        attribute: 'name',
+                        label: __('Имя'),
+                    },
+                ]
+            }}
+        />
+    </>
+)

package/ui/crud/index.ts

@@ -0,0 +1,31 @@
+import _trimEnd from 'lodash-es/trimEnd';
+
+import Crud from './Crud';
+import {IRouteItem} from '../nav/Router/Router';
+import {DEFAULT_QUERY_KEY, ICrudProps} from './Crud/Crud';
+
+export interface ICrudGeneratorProps extends ICrudProps {
+    path?: string,
+    label?: string,
+    models?: string | string[],
+    enums?: string | string[],
+    route?: IRouteItem,
+}
+
+export {Crud};
+export const generateCrud = (routeId: string, props: ICrudGeneratorProps) => {
+    const queryKey = props.queryKey || DEFAULT_QUERY_KEY;
+    return {
+        id: routeId,
+        path: _trimEnd(props.path, '/') + `/:${queryKey}?/:${queryKey}Action?`,
+        label: props.label,
+        models: [
+            props.model,
+            props.searchModel,
+        ].filter(Boolean).concat(props.models || []),
+        enums: props.enums,
+        component: Crud,
+        ...props.route,
+        componentProps: props,
+    };
+};

package/ui/form/AutoCompleteField/AutoCompleteField.story.js

@@ -0,0 +1,9 @@
+import basic from './demo/basic';
+
+export default {
+  title: 'form.AutoCompleteField',
+};
+
+export {
+    basic,
+}