@panneau/app 1.0.1-alpha.0 → 1.0.3-alpha.2

package/src/components/pages/ResourceForm.jsx

@@ -1,361 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import isObject from 'lodash/isObject';
-import classNames from 'classnames';
-import { defineMessages } from 'react-intl';
-import { PropTypes as PanneauPropTypes, useResourceApi } from '@panneau/core';
-import { getErrorsFromResponseError } from '@panneau/core/requests';
-import { Loading, Errors } from '@panneau/core/components';
-import { useComponent } from '@panneau/core/contexts';
-
-import ResourceFormHeader from '../partials/ResourceFormHeader';
-
-import styles from '../../styles/pages/resource-form.scss';
-
-export const messages = defineMessages({
-    cancel: {
-        id: 'app.buttons.resources.cancel',
-        description: 'The label of the "cancel" button',
-        defaultMessage: 'Cancel',
-    },
-    save: {
-        id: 'app.buttons.resources.save',
-        description: 'The label of the "save" button',
-        defaultMessage: 'Save',
-    },
-    title: {
-        id: 'app.titles.resources.default',
-        description: 'The title of the resource form',
-        defaultMessage: '{name}',
-    },
-    titleTyped: {
-        id: 'app.titles.resources.typed',
-        description: 'The title of the typed resource form',
-        defaultMessage: '{name} <small class="text-muted">({type})</small>',
-    },
-    successNotice: {
-        id: 'app.notices.resources.success',
-        description: 'The text of the "success" form notice',
-        defaultMessage: 'Success!',
-    },
-    errorNotice: {
-        id: 'app.notices.resources.error',
-        description: 'The text of the "error" form notice',
-        defaultMessage: 'Failed. The form contains errors.',
-    },
-});
-
-const propTypes = {
-    action: PropTypes.string,
-    resource: PanneauPropTypes.resource.isRequired,
-    resourceApi: PanneauPropTypes.resourceApi.isRequired,
-    itemId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    item: PropTypes.shape({
-        id: PropTypes.number,
-        type: PropTypes.string,
-    }),
-    query: PropTypes.shape({
-        type: PropTypes.string,
-    }),
-    successNoticeLabel: PanneauPropTypes.label,
-    errorNoticeLabel: PanneauPropTypes.label,
-    buttons: PanneauPropTypes.buttons,
-    saveButtonLabel: PanneauPropTypes.message,
-    confirmSwitchTypeMessage: PanneauPropTypes.message,
-    errors: PropTypes.arrayOf(PropTypes.string),
-    formValue: PropTypes.shape({}),
-    formErrors: PropTypes.objectOf(PropTypes.array),
-    readOnly: PropTypes.bool,
-    title: PanneauPropTypes.label,
-    titleTyped: PanneauPropTypes.label,
-    gotoResourceAction: PropTypes.func.isRequired,
-    onFormComplete: PropTypes.func,
-};
-
-const defaultProps = {
-    action: 'create',
-    title: messages.title,
-    titleTyped: messages.titleTyped,
-    query: null,
-    itemId: null,
-    item: null,
-    errors: null,
-    formValue: null,
-    formErrors: null,
-    readOnly: false,
-    successNoticeLabel: messages.successNotice,
-    errorNoticeLabel: messages.errorNotice,
-    confirmSwitchTypeMessage: messages.confirmSwitchType,
-    buttons: [
-        {
-            id: 'cancel',
-            type: 'button',
-            label: messages.cancel,
-            className: 'btn-link btn-lg',
-        },
-        {
-            id: 'submit',
-            type: 'submit',
-            label: messages.save,
-            className: 'btn-primary btn-lg',
-        },
-    ],
-    saveButtonLabel: null,
-    onFormComplete: null,
-};
-
-const ResourceForm = ({
-    resource,
-    item: currentItem,
-    itemId,
-    query,
-    action,
-    readOnly,
-    errors: currentErrors,
-    formValue: initialFormValue,
-    formErrors: initialFormErrors,
-    title,
-    titleTyped,
-    buttons,
-    saveButtonLabel,
-    successNoticeLabel,
-    errorNoticeLabel,
-    onFormComplete: customOnFormComplete,
-    gotoResourceAction,
-}) => {
-    const [item, setItem] = useState(currentItem);
-    const [isLoading, setIsLoading] = useState(false);
-    const [errors, setErrors] = useState(currentErrors || item);
-    const [formValue, setFormValue] = useState(initialFormValue || item);
-    const [formErrors, setFormErrors] = useState(initialFormErrors || item);
-    const [formSuccess, setFormSuccess] = useState(initialFormErrors !== null ? false : null);
-    const resourceApi = useResourceApi(resource);
-    const isTyped = resource.type() === 'typed';
-    const waitingItem = action === 'edit' && item === null;
-
-    // Load item if needed
-    useEffect(() => {
-        if (isLoading) {
-            return;
-        }
-        const onItemLoaded = newItem => {
-            setItem(newItem);
-        };
-        const onItemLoadError = newErrors => {
-            setErrors(newErrors);
-        };
-        const itemChanged = item !== null && `${item.id}` !== `${itemId}`;
-        const itemShouldReload = item === null || itemChanged;
-        if ((action === 'edit' || action === 'show') && itemShouldReload) {
-            setIsLoading(true);
-            resourceApi
-                .show(itemId)
-                .then(onItemLoaded)
-                .catch(onItemLoadError)
-                .then(() => {
-                    setIsLoading(false);
-                });
-        }
-    }, [action, item, itemId, isLoading]);
-
-    // Get current type
-    const currentType = useMemo(() => {
-        if (!isTyped || waitingItem) {
-            return null;
-        }
-
-        const types = resource.types();
-        const itemTypeId = item !== null ? item.type || null : null;
-        const { type: queryTypeId = null } = query || {};
-        const typeId = itemTypeId || queryTypeId;
-        const definedType = typeId !== null ? types.find(it => it.id === typeId) || null : null;
-        if (definedType !== null) {
-            return definedType;
-        }
-
-        return types.length > 0
-            ? types.find(({ default: isDefault = false }) => isDefault) || types[0] || null
-            : null;
-    }, [item, query, resource]);
-
-    const onClickCancel = useCallback(
-        e => {
-            e.preventDefault();
-            gotoResourceAction('index');
-        },
-        [gotoResourceAction],
-    );
-
-    const formButtons = useMemo(
-        () =>
-            readOnly
-                ? []
-                : buttons.map(button => {
-                      if (button.id === 'save' && saveButtonLabel !== null) {
-                          return {
-                              ...button,
-                              label: saveButtonLabel,
-                          };
-                      }
-                      if (button.id === 'cancel' && typeof button.onClick === 'undefined') {
-                          return {
-                              ...button,
-                              onClick: onClickCancel,
-                          };
-                      }
-                      return button;
-                  }),
-        [buttons, readOnly],
-    );
-
-    const submitForm = useCallback(() => {
-        const data = isTyped
-            ? {
-                  type: currentType !== null ? currentType.id : null,
-                  ...(formValue || item),
-              }
-            : formValue;
-
-        setFormSuccess(null);
-
-        return action === 'create'
-            ? resourceApi.store(data)
-            : resourceApi.update(item.id, data || item);
-    }, [resourceApi, action, isTyped, currentType]);
-
-    const onFormChange = useCallback(value => {
-        setFormValue(value);
-        setFormSuccess(null);
-    }, []);
-
-    const onFormComplete = useCallback(
-        newItem => {
-            setItem(newItem);
-            setFormValue(null);
-            setFormErrors(null);
-            setFormSuccess(true);
-            if (customOnFormComplete !== null) {
-                customOnFormComplete(item);
-            }
-        },
-        [customOnFormComplete],
-    );
-
-    const onFormErrors = useCallback(error => {
-        const newErrors = getErrorsFromResponseError(error);
-        setFormErrors(newErrors);
-        setFormSuccess(false);
-    }, []);
-
-    // Get form definition
-    const { type: formType = null, fullscreen, className = null, ...formProps } = useMemo(() => {
-        const { fields = [], ...form } = resource.form(action);
-        let finalFields;
-        if (waitingItem) {
-            finalFields = null;
-        } else if (currentType !== null && isObject(fields)) {
-            finalFields = fields[currentType.id] || fields.default || fields;
-        } else {
-            finalFields = fields;
-        }
-        return {
-            type: 'normal',
-            fullscreen: false,
-            fields: finalFields,
-            ...form,
-        };
-    }, [waitingItem, resource, currentType]);
-
-    const FormComponent = useComponent(formType, 'forms');
-    const form =
-        !waitingItem && FormComponent !== null ? (
-            <FormComponent
-                {...formProps}
-                className={classNames([
-                    styles.form,
-                    {
-                        [className]: className !== null,
-                    },
-                ])}
-                readOnly={readOnly}
-                buttons={formButtons}
-                value={formValue || item}
-                errors={formErrors}
-                notice={
-                    formSuccess !== null
-                        ? {
-                              type: formSuccess ? 'success' : 'error',
-                              label: formSuccess ? successNoticeLabel : errorNoticeLabel,
-                          }
-                        : null
-                }
-                submitForm={submitForm}
-                onChange={onFormChange}
-                onComplete={onFormComplete}
-                onErrors={onFormErrors}
-            />
-        ) : null;
-
-    const header = (
-        <ResourceFormHeader
-            resource={resource}
-            type={currentType}
-            action={action}
-            fullscreen={fullscreen}
-            valueHasChanged={formValue !== null}
-            title={title}
-            titleTyped={titleTyped}
-        />
-    );
-
-    const errorsMessages =
-        errors !== null && errors.length > 0 ? (
-            <Errors errors={errors} className={styles.errors} />
-        ) : null;
-
-    const content =
-        isLoading && item === null ? (
-            <div className={classNames(['py-4', styles.loading])}>
-                <Loading loading />
-            </div>
-        ) : (
-            form
-        );
-
-    return (
-        <div
-            className={classNames([
-                styles.container,
-                {
-                    [styles.isFullscreen]: fullscreen,
-                },
-            ])}
-        >
-            {fullscreen ? (
-                <div className={classNames([styles.inner])}>
-                    {header}
-                    <div className={classNames([styles.content])}>
-                        {errorsMessages}
-                        {content}
-                    </div>
-                </div>
-            ) : (
-                <div className="container">
-                    <div className="row justify-content-md-center">
-                        <div className="col-lg-9">
-                            {header}
-                            {errorsMessages}
-                            {content}
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
-
-ResourceForm.propTypes = propTypes;
-ResourceForm.defaultProps = defaultProps;
-
-export default ResourceForm;

package/src/components/pages/ResourceIndex.jsx

@@ -1,256 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid, react/no-array-index-key, react/jsx-props-no-spreading */
-import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import get from 'lodash/get';
-import classNames from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl';
-import { PropTypes as PanneauPropTypes, useResourceApi } from '@panneau/core';
-import { isMessage } from '@panneau/core/utils';
-import { useComponent } from '@panneau/core/contexts';
-import { Loading, Errors } from '@panneau/core/components';
-
-import ResourceIndexHeader from '../partials/ResourceIndexHeader';
-
-import styles from '../../styles/pages/resource-index.scss';
-
-const messages = defineMessages({
-    add: {
-        id: 'core.buttons.resources.add',
-        description: 'The label of the "add" index button',
-        defaultMessage: 'Add {name}',
-    },
-    title: {
-        id: 'core.titles.resources.index',
-        description: 'The title of the resource index page',
-        defaultMessage: '{name}',
-    },
-    confirmDelete: {
-        id: 'core.resources.index.confirm_delete',
-        description: 'The confirm message when deleting on the resource index page',
-        defaultMessage: 'Are you sure you want to delete this item from {name}?',
-    },
-});
-
-const propTypes = {
-    intl: PanneauPropTypes.intl.isRequired,
-    resource: PanneauPropTypes.resource.isRequired,
-    query: PropTypes.shape({
-        page: PropTypes.string,
-    }),
-    title: PanneauPropTypes.message,
-    showAddButton: PropTypes.bool,
-    addButtonLabel: PanneauPropTypes.message,
-    confirmDeleteMessage: PanneauPropTypes.message,
-    getResourceActionUrl: PropTypes.func.isRequired,
-    gotoResourceAction: PropTypes.func.isRequired,
-};
-
-const defaultProps = {
-    query: null,
-    title: messages.title,
-    showAddButton: true,
-    addButtonLabel: messages.add,
-    confirmDeleteMessage: messages.confirmDelete,
-};
-
-const ResourceIndex = ({
-    intl,
-    resource,
-    query,
-    title,
-    addButtonLabel,
-    confirmDeleteMessage,
-    getResourceActionUrl,
-    gotoResourceAction,
-    showAddButton,
-}) => {
-    const [request, setRequest] = useState({
-        isLoading: false,
-        query: null,
-        items: null,
-        errors: null,
-        pagination: null,
-    });
-    const resourceApi = useResourceApi(resource);
-    const { isLoading, items, pagination, errors } = request;
-    const { type: listType, pagination: hasPagination = false, ...listProps } = resource.list(
-        'index',
-    );
-
-    useEffect(() => {
-        if (isLoading) {
-            return null;
-        }
-        let canceled = false;
-        const onItemsLoaded = data => {
-            if (canceled) {
-                return;
-            }
-            if (hasPagination) {
-                const { data: newItems, ...newPagination } = data;
-                setRequest({
-                    ...request,
-                    items: newItems,
-                    pagination: newPagination,
-                    isLoading: false,
-                });
-                return;
-            }
-            setRequest({
-                ...request,
-                items: data,
-                isLoading: false,
-            });
-        };
-
-        const onItemsLoadError = newErrors => {
-            if (canceled) {
-                return;
-            }
-            setRequest({
-                ...request,
-                errors: newErrors,
-                isLoading: false,
-            });
-        };
-
-        const { page = null } = query || {};
-        const params = {};
-        if (hasPagination && page !== null) {
-            params.page = page;
-        }
-        resourceApi
-            .index(params)
-            .then(onItemsLoaded)
-            .catch(onItemsLoadError);
-
-        setRequest({
-            ...request,
-            isLoading: true,
-        });
-
-        return () => {
-            canceled = true;
-        };
-    }, [query, hasPagination]);
-
-    const deleteItem = useCallback(
-        id => {
-            const onItemDeleted = ({ id: itemId }) => {
-                setRequest({
-                    ...request,
-                    items: items.filter(it => it.id !== itemId),
-                });
-            };
-
-            const { name } = resource;
-            const confirmMessage = resource.message('confirm_delete', confirmDeleteMessage);
-            const message = isMessage(confirmMessage)
-                ? intl.formatMessage(confirmMessage, {
-                      name,
-                      id,
-                  })
-                : confirmMessage;
-            // eslint-disable-next-line no-alert
-            if (window.confirm(message)) {
-                resourceApi.destroy(id).then(onItemDeleted);
-            }
-        },
-        [resource, request],
-    );
-
-    const onClickAction = useCallback(
-        (e, action, it) => {
-            const useRouter = get(action, 'useRouter', true);
-
-            switch (action.id) {
-                case 'edit':
-                case 'show':
-                    if (useRouter) {
-                        gotoResourceAction(action.id, it.id);
-                    } else {
-                        window.location.href = getResourceActionUrl(action.id);
-                    }
-                    break;
-                case 'delete': {
-                    const hasPage = get(action, 'hasPage', false);
-                    if (!hasPage) {
-                        deleteItem(it.id);
-                    } else if (useRouter) {
-                        gotoResourceAction(action.id, it.id);
-                    } else {
-                        window.location.href = getResourceActionUrl(action.id);
-                    }
-                    break;
-                }
-                default:
-                    break;
-            }
-        },
-        [deleteItem, gotoResourceAction, getResourceActionUrl],
-    );
-
-    // Components
-    const ListComponent = useComponent(listType || 'table', 'lists');
-    const Pagination = useComponent('pagination', 'lists');
-
-    return (
-        <div className={classNames([styles.container])}>
-            <div className="container">
-                <div className="row justify-content-md-center">
-                    <div className="col-lg-8">
-                        <ResourceIndexHeader
-                            resource={resource}
-                            title={title}
-                            addButtonLabel={addButtonLabel}
-                            showAddButton={showAddButton}
-                            getResourceActionUrl={getResourceActionUrl}
-                        />
-                        <div className={styles.listContainer}>
-                            <Errors errors={errors} />
-                            <div className={styles.list}>
-                                {items !== null && ListComponent !== null ? (
-                                    <div className={styles.list}>
-                                        <ListComponent
-                                            {...listProps}
-                                            items={items || []}
-                                            onClickAction={onClickAction}
-                                        />
-                                    </div>
-                                ) : null}
-                            </div>
-                            {isLoading ? (
-                                <div
-                                    className={classNames({
-                                        [styles.loading]: true,
-                                        [styles.alone]: items === null,
-                                    })}
-                                >
-                                    <div className={styles.inner}>
-                                        <div className={styles.middle}>
-                                            <Loading loading />
-                                        </div>
-                                    </div>
-                                </div>
-                            ) : null}
-                        </div>
-                        {pagination !== null && pagination.last_page > 1 ? (
-                            <Pagination
-                                total={pagination.total}
-                                perPage={pagination.per_page}
-                                currentPage={pagination.current_page}
-                                lastPage={pagination.last_page}
-                                url={getResourceActionUrl('index')}
-                            />
-                        ) : null}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-ResourceIndex.propTypes = propTypes;
-ResourceIndex.defaultProps = defaultProps;
-
-export default injectIntl(ResourceIndex);

package/src/components/pages/ResourceShow.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import ResourceForm from './ResourceForm';
-
-const propTypes = {
-
-};
-
-const defaultProps = {
-
-};
-
-const ResourceShow = props => (
-    <ResourceForm
-        readOnly
-        {...props}
-    />
-);
-
-ResourceShow.propTypes = propTypes;
-ResourceShow.defaultProps = defaultProps;
-
-export default ResourceShow;