payload 0.20.0 → 0.20.1

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/index.js

@@ -0,0 +1,202 @@
+import React, { useReducer, useState, useCallback, useEffect } from 'react';
+import { useConfig } from '../../../../utilities/Config';
+import optionsReducer from './optionsReducer';
+import useDebounce from '../../../../../hooks/useDebounce';
+import ReactSelect from '../../../ReactSelect';
+import './index.scss';
+const baseClass = 'condition-value-relationship';
+const maxResultsPerRequest = 10;
+const RelationshipField = (props) => {
+    const { onChange, value, relationTo, hasMany } = props;
+    const { serverURL, routes: { api, }, collections, } = useConfig();
+    const hasMultipleRelations = Array.isArray(relationTo);
+    const [options, dispatchOptions] = useReducer(optionsReducer, []);
+    const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
+    const [lastLoadedPage, setLastLoadedPage] = useState(1);
+    const [search, setSearch] = useState('');
+    const [errorLoading, setErrorLoading] = useState('');
+    const [hasLoadedFirstOptions, setHasLoadedFirstOptions] = useState(false);
+    const debouncedSearch = useDebounce(search, 300);
+    const addOptions = useCallback((data, relation) => {
+        const collection = collections.find((coll) => coll.slug === relation);
+        dispatchOptions({ type: 'ADD', data, relation, hasMultipleRelations, collection });
+    }, [collections, hasMultipleRelations]);
+    const getResults = useCallback(async ({ lastFullyLoadedRelation: lastFullyLoadedRelationArg, lastLoadedPage: lastLoadedPageArg, search: searchArg, }) => {
+        let lastLoadedPageToUse = typeof lastLoadedPageArg !== 'undefined' ? lastLoadedPageArg : 1;
+        const lastFullyLoadedRelationToUse = typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1;
+        const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
+        const relationsToFetch = lastFullyLoadedRelationToUse === -1 ? relations : relations.slice(lastFullyLoadedRelationToUse + 1);
+        let resultsFetched = 0;
+        if (!errorLoading) {
+            relationsToFetch.reduce(async (priorRelation, relation) => {
+                var _a;
+                await priorRelation;
+                if (resultsFetched < 10) {
+                    const collection = collections.find((coll) => coll.slug === relation);
+                    const fieldToSearch = ((_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id';
+                    const searchParam = searchArg ? `&where[${fieldToSearch}][like]=${searchArg}` : '';
+                    const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPageToUse}&depth=0${searchParam}`);
+                    if (response.ok) {
+                        const data = await response.json();
+                        if (data.docs.length > 0) {
+                            resultsFetched += data.docs.length;
+                            addOptions(data, relation);
+                            setLastLoadedPage(data.page);
+                            if (!data.nextPage) {
+                                setLastFullyLoadedRelation(relations.indexOf(relation));
+                                // If there are more relations to search, need to reset lastLoadedPage to 1
+                                // both locally within function and state
+                                if (relations.indexOf(relation) + 1 < relations.length) {
+                                    lastLoadedPageToUse = 1;
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        setErrorLoading('An error has occurred.');
+                    }
+                }
+            }, Promise.resolve());
+        }
+    }, [addOptions, api, collections, serverURL, errorLoading, relationTo]);
+    const findOptionsByValue = useCallback(() => {
+        if (value) {
+            if (hasMany) {
+                if (Array.isArray(value)) {
+                    return value.map((val) => {
+                        if (hasMultipleRelations) {
+                            let matchedOption;
+                            options.forEach((opt) => {
+                                if (opt.options) {
+                                    opt.options.some((subOpt) => {
+                                        if ((subOpt === null || subOpt === void 0 ? void 0 : subOpt.value) === val.value) {
+                                            matchedOption = subOpt;
+                                            return true;
+                                        }
+                                        return false;
+                                    });
+                                }
+                            });
+                            return matchedOption;
+                        }
+                        return options.find((opt) => opt.value === val);
+                    });
+                }
+                return undefined;
+            }
+            if (hasMultipleRelations) {
+                let matchedOption;
+                const valueWithRelation = value;
+                options.forEach((opt) => {
+                    if (opt === null || opt === void 0 ? void 0 : opt.options) {
+                        opt.options.some((subOpt) => {
+                            if ((subOpt === null || subOpt === void 0 ? void 0 : subOpt.value) === valueWithRelation.value) {
+                                matchedOption = subOpt;
+                                return true;
+                            }
+                            return false;
+                        });
+                    }
+                });
+                return matchedOption;
+            }
+            return options.find((opt) => opt.value === value);
+        }
+        return undefined;
+    }, [hasMany, hasMultipleRelations, value, options]);
+    const handleInputChange = useCallback((newSearch) => {
+        if (search !== newSearch) {
+            setSearch(newSearch);
+        }
+    }, [search]);
+    const addOptionByID = useCallback(async (id, relation) => {
+        if (!errorLoading && id !== 'null') {
+            const response = await fetch(`${serverURL}${api}/${relation}/${id}?depth=0`);
+            if (response.ok) {
+                const data = await response.json();
+                addOptions({ docs: [data] }, relation);
+            }
+            else {
+                console.error(`There was a problem loading the document with ID of ${id}.`);
+            }
+        }
+    }, [addOptions, api, errorLoading, serverURL]);
+    // ///////////////////////////
+    // Get results when search input changes
+    // ///////////////////////////
+    useEffect(() => {
+        dispatchOptions({
+            type: 'CLEAR',
+            required: true,
+        });
+        setHasLoadedFirstOptions(true);
+        setLastLoadedPage(1);
+        setLastFullyLoadedRelation(-1);
+        getResults({ search: debouncedSearch });
+    }, [getResults, debouncedSearch, relationTo]);
+    // ///////////////////////////
+    // Format options once first options have been retrieved
+    // ///////////////////////////
+    useEffect(() => {
+        if (value && hasLoadedFirstOptions) {
+            if (hasMany) {
+                const matchedOptions = findOptionsByValue();
+                (matchedOptions || []).forEach((option, i) => {
+                    if (!option) {
+                        if (hasMultipleRelations) {
+                            addOptionByID(value[i].value, value[i].relationTo);
+                        }
+                        else {
+                            addOptionByID(value[i], relationTo);
+                        }
+                    }
+                });
+            }
+            else {
+                const matchedOption = findOptionsByValue();
+                if (!matchedOption) {
+                    if (hasMultipleRelations) {
+                        const valueWithRelation = value;
+                        addOptionByID(valueWithRelation.value, valueWithRelation.relationTo);
+                    }
+                    else {
+                        addOptionByID(value, relationTo);
+                    }
+                }
+            }
+        }
+    }, [addOptionByID, findOptionsByValue, hasMany, hasMultipleRelations, relationTo, value, hasLoadedFirstOptions]);
+    const classes = [
+        'field-type',
+        baseClass,
+        errorLoading && 'error-loading',
+    ].filter(Boolean).join(' ');
+    const valueToRender = (findOptionsByValue() || value);
+    return (React.createElement("div", { className: classes },
+        !errorLoading && (React.createElement(ReactSelect, { placeholder: "Select a value", onInputChange: handleInputChange, onChange: (selected) => {
+                if (hasMany) {
+                    onChange(selected ? selected.map((option) => {
+                        if (hasMultipleRelations) {
+                            return {
+                                relationTo: option.relationTo,
+                                value: option.value,
+                            };
+                        }
+                        return option.value;
+                    }) : null);
+                }
+                else if (hasMultipleRelations) {
+                    onChange({
+                        relationTo: selected.relationTo,
+                        value: selected.value,
+                    });
+                }
+                else {
+                    onChange(selected.value);
+                }
+            }, onMenuScrollToBottom: () => {
+                getResults({ lastFullyLoadedRelation, lastLoadedPage: lastLoadedPage + 1 });
+            }, value: valueToRender, options: options, isMulti: hasMany })),
+        errorLoading && (React.createElement("div", { className: `${baseClass}__error-loading` }, errorLoading))));
+};
+export default RelationshipField;

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/index.scss

@@ -0,0 +1,11 @@
+@import '../../../../../scss/styles.scss';
+
+.condition-value-relationship {
+  &__error-loading {
+    border: 1px solid $color-red;
+    min-height: base(2);
+    padding: base(.5) base(.75);
+    background-color: $color-red;
+    color: white;
+  }
+}

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/optionsReducer.d.ts

@@ -0,0 +1,3 @@
+import { Option, Action } from './types';
+declare const optionsReducer: (state: Option[], action: Action) => Option[];
+export default optionsReducer;

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/optionsReducer.js

@@ -0,0 +1,76 @@
+const reduceToIDs = (options) => options.reduce((ids, option) => {
+    if (option.options) {
+        return [
+            ...ids,
+            ...reduceToIDs(option.options),
+        ];
+    }
+    return [
+        ...ids,
+        option.id,
+    ];
+}, []);
+const optionsReducer = (state, action) => {
+    switch (action.type) {
+        case 'CLEAR': {
+            return action.required ? [] : [{ value: 'null', label: 'None' }];
+        }
+        case 'ADD': {
+            const { hasMultipleRelations, collection, relation, data } = action;
+            const labelKey = collection.admin.useAsTitle || 'id';
+            const loadedIDs = reduceToIDs(state);
+            if (!hasMultipleRelations) {
+                return [
+                    ...state,
+                    ...data.docs.reduce((docs, doc) => {
+                        if (loadedIDs.indexOf(doc.id) === -1) {
+                            loadedIDs.push(doc.id);
+                            return [
+                                ...docs,
+                                {
+                                    label: doc[labelKey],
+                                    value: doc.id,
+                                },
+                            ];
+                        }
+                        return docs;
+                    }, []),
+                ];
+            }
+            const newOptions = [...state];
+            const optionsToAddTo = newOptions.find((optionGroup) => optionGroup.label === collection.labels.plural);
+            const newSubOptions = data.docs.reduce((docs, doc) => {
+                if (loadedIDs.indexOf(doc.id) === -1) {
+                    loadedIDs.push(doc.id);
+                    return [
+                        ...docs,
+                        {
+                            label: doc[labelKey],
+                            relationTo: relation,
+                            value: doc.id,
+                        },
+                    ];
+                }
+                return docs;
+            }, []);
+            if (optionsToAddTo) {
+                optionsToAddTo.options = [
+                    ...optionsToAddTo.options,
+                    ...newSubOptions,
+                ];
+            }
+            else {
+                newOptions.push({
+                    label: collection.labels.plural,
+                    options: newSubOptions,
+                    value: undefined,
+                });
+            }
+            return newOptions;
+        }
+        default: {
+            return state;
+        }
+    }
+};
+export default optionsReducer;

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/types.d.ts

@@ -0,0 +1,35 @@
+import { RelationshipField } from '../../../../../../fields/config/types';
+import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
+import { PaginatedDocs } from '../../../../../../mongoose/types';
+export declare type Props = {
+    onChange: (val: unknown) => void;
+    value: unknown;
+} & RelationshipField;
+export declare type Option = {
+    label: string;
+    value: string;
+    relationTo?: string;
+    options?: Option[];
+};
+declare type CLEAR = {
+    type: 'CLEAR';
+    required: boolean;
+};
+declare type ADD = {
+    type: 'ADD';
+    data: PaginatedDocs<any>;
+    relation: string;
+    hasMultipleRelations: boolean;
+    collection: SanitizedCollectionConfig;
+};
+export declare type Action = CLEAR | ADD;
+export declare type ValueWithRelation = {
+    relationTo: string;
+    value: string;
+};
+export declare type GetResults = (args: {
+    lastFullyLoadedRelation?: number;
+    lastLoadedPage?: number;
+    search?: string;
+}) => Promise<void>;
+export {};

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/elements/WhereBuilder/Condition/Text/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Text: React.FC<Props>;
+export default Text;

package/dist/admin/components/elements/WhereBuilder/Condition/Text/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+const baseClass = 'condition-value-text';
+const Text = ({ onChange, value }) => (React.createElement("input", { placeholder: "Enter a value", className: baseClass, type: "text", onChange: (e) => onChange(e.target.value), value: value || '' }));
+export default Text;

package/dist/admin/components/elements/WhereBuilder/Condition/Text/index.scss

@@ -0,0 +1,5 @@
+@import '../../../../../scss/styles.scss';
+
+.condition-value-text {
+  @include formInput;
+}

package/dist/admin/components/elements/WhereBuilder/Condition/Text/types.d.ts

@@ -0,0 +1,4 @@
+export declare type Props = {
+    onChange: (val: string) => void;
+    value: string;
+};

package/dist/admin/components/elements/WhereBuilder/Condition/Text/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/elements/WhereBuilder/Condition/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Condition: React.FC<Props>;
+export default Condition;

package/dist/admin/components/elements/WhereBuilder/Condition/index.js

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
+import ReactSelect from '../../ReactSelect';
+import Button from '../../Button';
+import Date from './Date';
+import Number from './Number';
+import Text from './Text';
+import Relationship from './Relationship';
+import useDebounce from '../../../../hooks/useDebounce';
+import './index.scss';
+const valueFields = {
+    Date,
+    Number,
+    Text,
+    Relationship,
+};
+const baseClass = 'condition';
+const Condition = (props) => {
+    var _a, _b, _c;
+    const { fields, dispatch, value, orIndex, andIndex, } = props;
+    const fieldValue = Object.keys(value)[0];
+    const operatorAndValue = (value === null || value === void 0 ? void 0 : value[fieldValue]) ? Object.entries(value[fieldValue])[0] : undefined;
+    const operatorValue = operatorAndValue === null || operatorAndValue === void 0 ? void 0 : operatorAndValue[0];
+    const queryValue = operatorAndValue === null || operatorAndValue === void 0 ? void 0 : operatorAndValue[1];
+    const [activeField, setActiveField] = useState(() => fields.find((field) => fieldValue === field.value));
+    const [internalValue, setInternalValue] = useState(queryValue);
+    const debouncedValue = useDebounce(internalValue, 300);
+    useEffect(() => {
+        const newActiveField = fields.find((field) => fieldValue === field.value);
+        if (newActiveField) {
+            setActiveField(newActiveField);
+        }
+    }, [fieldValue, fields]);
+    useEffect(() => {
+        dispatch({
+            type: 'update',
+            orIndex,
+            andIndex,
+            value: debouncedValue || '',
+        });
+    }, [debouncedValue, dispatch, orIndex, andIndex]);
+    const ValueComponent = valueFields[activeField === null || activeField === void 0 ? void 0 : activeField.component] || valueFields.Text;
+    return (React.createElement("div", { className: baseClass },
+        React.createElement("div", { className: `${baseClass}__wrap` },
+            React.createElement("div", { className: `${baseClass}__inputs` },
+                React.createElement("div", { className: `${baseClass}__field` },
+                    React.createElement(ReactSelect, { value: fields.find((field) => fieldValue === field.value), options: fields, onChange: (field) => dispatch({
+                            type: 'update',
+                            orIndex,
+                            andIndex,
+                            field: field.value,
+                        }) })),
+                React.createElement("div", { className: `${baseClass}__operator` },
+                    React.createElement(ReactSelect, { disabled: !fieldValue, value: activeField.operators.find((operator) => operatorValue === operator.value), options: activeField.operators, onChange: (operator) => {
+                            dispatch({
+                                type: 'update',
+                                orIndex,
+                                andIndex,
+                                operator: operator.value,
+                            });
+                        } })),
+                React.createElement("div", { className: `${baseClass}__value` },
+                    React.createElement(RenderCustomComponent, { CustomComponent: (_c = (_b = (_a = activeField === null || activeField === void 0 ? void 0 : activeField.props) === null || _a === void 0 ? void 0 : _a.admin) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.Filter, DefaultComponent: ValueComponent, componentProps: {
+                            ...activeField === null || activeField === void 0 ? void 0 : activeField.props,
+                            operator: operatorValue,
+                            value: internalValue,
+                            onChange: setInternalValue,
+                        } }))),
+            React.createElement("div", { className: `${baseClass}__actions` },
+                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => dispatch({
+                        type: 'remove',
+                        orIndex,
+                        andIndex,
+                    }) }),
+                React.createElement(Button, { icon: "plus", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => dispatch({
+                        type: 'add',
+                        field: fields[0].value,
+                        relation: 'and',
+                        orIndex,
+                        andIndex: andIndex + 1,
+                    }) })))));
+};
+export default Condition;

package/dist/admin/components/elements/WhereBuilder/Condition/index.scss

@@ -0,0 +1,52 @@
+@import '../../../../scss/styles.scss';
+
+.condition {
+  &__wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  &__inputs {
+    display: flex;
+    flex-grow: 1;
+
+    > div {
+      flex-basis: 100%;
+    }
+  }
+
+  &__field,
+  &__operator {
+    margin-right: $baseline;
+  }
+
+  &__actions {
+    flex-shrink: 0;
+  }
+
+  .btn {
+    vertical-align: middle;
+    margin: 0 0 0 $baseline;
+  }
+
+  @include mid-break {
+    &__wrap {
+      align-items: initial;
+    }
+
+    &__inputs {
+      display: block;
+    }
+
+    &__actions {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    &__field,
+    &__operator {
+      margin: 0 0 base(.5);
+    }
+  }
+}

package/dist/admin/components/elements/WhereBuilder/Condition/types.d.ts

@@ -0,0 +1,9 @@
+import { Where } from '../../../../../types';
+import { Action, FieldCondition } from '../types';
+export declare type Props = {
+    fields: FieldCondition[];
+    value: Where;
+    dispatch: (action: Action) => void;
+    orIndex: number;
+    andIndex: number;
+};

package/dist/admin/components/elements/WhereBuilder/Condition/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/elements/WhereBuilder/field-types.d.ts

@@ -0,0 +1,87 @@
+declare const fieldTypeConditions: {
+    text: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    email: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    textarea: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    code: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    richText: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    number: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    date: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    point: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    upload: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    relationship: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    select: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+    checkbox: {
+        component: string;
+        operators: {
+            label: string;
+            value: string;
+        }[];
+    };
+};
+export default fieldTypeConditions;