@panneau/field-resource-item 2.0.72 → 2.0.77

package/es/index.js

@@ -7,7 +7,7 @@ import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { usePanneauResource } from '@panneau/core/contexts';
@@ -27,6 +27,7 @@ var propTypes = {
   errors: PropTypes$1.formErrors,
   resource: PropTypes.string,
   resourceType: PropTypes.string,
+  paginated: PropTypes.bool,
   query: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
   page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -45,8 +46,10 @@ var propTypes = {
   itemLabelWithId: PropTypes.bool,
   placeholder: PropTypes.string,
   canCreate: PropTypes.bool,
-  createInPlace: PropTypes.bool,
-  createButtonLabel: PropTypes.string,
+  canEdit: PropTypes.bool,
+  withoutModal: PropTypes.bool,
+  createButtonLabel: PropTypes$1.string,
+  editButtonLabel: PropTypes$1.message,
   multiple: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
@@ -59,6 +62,7 @@ var defaultProps = {
   errors: null,
   resource: null,
   resourceType: null,
+  paginated: true,
   query: null,
   page: null,
   count: null,
@@ -73,8 +77,10 @@ var defaultProps = {
   itemLabelWithId: false,
   placeholder: null,
   canCreate: false,
-  createInPlace: false,
+  canEdit: false,
+  withoutModal: false,
   createButtonLabel: null,
+  editButtonLabel: null,
   multiple: false,
   disabled: false,
   className: null,
@@ -82,12 +88,13 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref8;
+  var _ref9;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
     resourceId = _ref.resource,
     resourceType = _ref.resourceType,
+    paginated = _ref.paginated,
     initialQuery = _ref.query,
     initialPage = _ref.page,
     initialCount = _ref.count,
@@ -102,45 +109,53 @@ var ResourceItemField = function ResourceItemField(_ref) {
     itemLabelWithId = _ref.itemLabelWithId,
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
-    createInPlace = _ref.createInPlace,
+    canEdit = _ref.canEdit,
+    withoutModal = _ref.withoutModal,
     createButtonLabel = _ref.createButtonLabel,
+    editButtonLabel = _ref.editButtonLabel,
     multiple = _ref.multiple,
     disabled = _ref.disabled,
     className = _ref.className,
     inputClassName = _ref.inputClassName,
     onChange = _ref.onChange;
   var intl = useIntl();
+  var resource = usePanneauResource(resourceId);
+  var resourceValues = useResourceValues(resource);
+  var defaultPage = initialPage || (paginated ? 1 : null);
+  var defaultCount = initialCount || (paginated ? 10 : null);
   // const [initialValue] = useState(value);
-  var _useState = useState(initialQuery),
+
+  var _useState = useState(initialCount),
     _useState2 = _slicedToArray(_useState, 2),
-    query = _useState2[0];
-    _useState2[1];
-  var _useState3 = useState(initialPage),
+    formOpen = _useState2[0],
+    setFormOpen = _useState2[1];
+
+  // The text input search query
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    page = _useState4[0];
-    _useState4[1];
-  var _useState5 = useState(initialCount),
+    inputTextValue = _useState4[0],
+    setInputTextValue = _useState4[1];
+  var onInputChange = useCallback(function (textValue) {
+    setInputTextValue(textValue);
+  }, []);
+
+  // TODO: list state controls?
+  var _useState5 = useState(initialQuery),
     _useState6 = _slicedToArray(_useState5, 2),
-    count = _useState6[0];
+    query = _useState6[0];
     _useState6[1];
-  var _useState7 = useState(initialOptions),
+  var _useState7 = useState(defaultPage),
     _useState8 = _slicedToArray(_useState7, 2),
-    resourceOptions = _useState8[0];
-    _useState8[1];
-
-  // The create option
-  var _useState9 = useState(initialCount),
+    page = _useState8[0],
+    setPage = _useState8[1];
+  var _useState9 = useState(defaultCount),
     _useState10 = _slicedToArray(_useState9, 2),
-    createOpen = _useState10[0],
-    setCreateOpen = _useState10[1];
-
-  // The search query
-  var _useState11 = useState(''),
+    count = _useState10[0];
+    _useState10[1];
+  var _useState11 = useState(initialOptions),
     _useState12 = _slicedToArray(_useState11, 2),
-    inputTextValue = _useState12[0],
-    setInputTextValue = _useState12[1];
-  var resource = usePanneauResource(resourceId);
-  var resourceValues = useResourceValues(resource);
+    resourceOptions = _useState12[0];
+    _useState12[1];
   var queryResource = useMemo(function () {
     return {
       id: resourceId
@@ -148,19 +163,36 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, [resourceId]);
   var finalQuery = useMemo(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, query), !isEmpty(inputTextValue) ? _defineProperty({}, searchParamName, inputTextValue) : null), {}, {
-      paginated: false // TODO: implement this...
+      paginated: paginated
     });
-  }, [inputTextValue]);
-
-  // console.log('resource', resourceId, resource);
-
-  var resourceItems = useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
+  }, [inputTextValue, paginated]);
+  var resourceItems = useResourceItems(queryResource, finalQuery, paginated ? page : null, paginated ? count : null, resourceOptions);
   var _ref3 = resourceItems || {},
-    _ref3$items = _ref3.items,
-    partialItems = _ref3$items === void 0 ? null : _ref3$items;
+    _ref3$allItems = _ref3.allItems,
+    partialItems = _ref3$allItems === void 0 ? null : _ref3$allItems,
+    _ref3$reload = _ref3.reload,
+    reload = _ref3$reload === void 0 ? null : _ref3$reload,
+    _ref3$reloadPage = _ref3.reloadPage,
+    reloadPage = _ref3$reloadPage === void 0 ? null : _ref3$reloadPage,
+    _ref3$reset = _ref3.reset,
+    reset = _ref3$reset === void 0 ? null : _ref3$reset,
+    _ref3$lastPage = _ref3.lastPage,
+    lastPage = _ref3$lastPage === void 0 ? null : _ref3$lastPage;
   var items = (partialItems || []).concat(multiple && isArray(value) ? value : [value]).filter(function (it) {
     return it !== null;
+  }).filter(function (v, i, a) {
+    return a.findIndex(function (v2) {
+      return v2.id === v.id;
+    }) === i;
   });
+  var onScrollEnd = useCallback(function () {
+    if (page !== null && page >= lastPage) {
+      return;
+    }
+    if (paginated) {
+      setPage(page + 1);
+    }
+  }, [paginated, page, setPage, lastPage]);
   var getItemLabel = useCallback(function (it, path) {
     var id = get(it, 'id', null);
     if (itemLabelWithId) {
@@ -178,45 +210,32 @@ var ResourceItemField = function ResourceItemField(_ref) {
       label: finalLabel
     };
   }, [getItemLabel, getItemDescription, itemLabelPath, itemDescriptionPath]);
-  var partialValue = multiple && isArray(value) ? value.map(function (it) {
-    return parseItem(it);
-  }) : value || null;
-  var finalValue = multiple && isArray(partialValue) ? partialValue.map(function (_ref4) {
+  var finalValue = multiple && isArray(value) ? value.map(function (_ref4) {
     var _ref4$id = _ref4.id,
       id = _ref4$id === void 0 ? null : _ref4$id;
     return id;
   }) : (value === null || value === void 0 ? void 0 : value.id) || null;
+  var _ref5 = !multiple && value !== null ? value : {
+      type: resourceType
+    },
+    _ref5$type = _ref5.type,
+    finalType = _ref5$type === void 0 ? null : _ref5$type;
   var options = (items || []).map(function (it) {
     return parseItem(it);
   });
-
-  // TODO: filter duplicate IDs blabla
-  // const { id: valueId = null } = value || {};
-  // const filteredItems =
-  //     responseItems !== null && valueId !== null
-  //         ? responseItems.filter((it) => (it !== null && it.id ? it.id !== valueId : true))
-  //         : responseItems || [];
-  // const arrayedValue = multiple ? value : [value];
-  // const items = [...filteredItems, ...(value !== null ? arrayedValue : [])];
-  // console.log(options, items, value, finalValue, onChange);
-  // console.log('ultimate', options, finalValue);
-
-  var onInputChange = useCallback(function (textValue) {
-    setInputTextValue(textValue);
-  }, []);
   var onValueChange = useCallback(function (newId) {
     if (onChange === null) return;
     if (multiple) {
-      var newValue = items.filter(function (_ref5) {
-        var _ref5$id = _ref5.id,
-          id = _ref5$id === void 0 ? null : _ref5$id;
+      var newValue = items.filter(function (_ref6) {
+        var _ref6$id = _ref6.id,
+          id = _ref6$id === void 0 ? null : _ref6$id;
         return newId.indexOf(id) !== -1;
       }) || [];
       onChange(newValue);
     } else {
-      var _newValue = items.filter(function (_ref6) {
-        var _ref6$id = _ref6.id,
-          id = _ref6$id === void 0 ? null : _ref6$id;
+      var _newValue = items.filter(function (_ref7) {
+        var _ref7$id = _ref7.id,
+          id = _ref7$id === void 0 ? null : _ref7$id;
         return id === newId;
       }) || [];
       if (_newValue !== null && _newValue.length > 0) {
@@ -226,13 +245,13 @@ var ResourceItemField = function ResourceItemField(_ref) {
       }
     }
   }, [items, onChange, multiple]);
-  var onOpenCreate = useCallback(function () {
-    setCreateOpen(true);
-  }, [setCreateOpen]);
-  var onCloseCreate = useCallback(function () {
-    setCreateOpen(false);
-  }, [setCreateOpen]);
-  var onCreateSuccess = useCallback(function (newValue) {
+  var onOpenForm = useCallback(function () {
+    setFormOpen(true);
+  }, [setFormOpen]);
+  var onCloseForm = useCallback(function () {
+    setFormOpen(false);
+  }, [setFormOpen]);
+  var onFormSuccess = useCallback(function (newValue) {
     if (onChange === null) return;
     var finalNewValue = resourceType !== null ? _objectSpread({
       type: resourceType
@@ -242,16 +261,45 @@ var ResourceItemField = function ResourceItemField(_ref) {
     } else {
       onChange(finalNewValue);
     }
-    setCreateOpen(false);
-  }, [onChange, multiple, value, setCreateOpen, resourceType]);
+    setFormOpen(false);
+  }, [onChange, multiple, value, setFormOpen, resourceType, paginated, initialPage]);
+
+  // If empty try to fetch
+  var onFocus = useCallback(function () {
+    if ((partialItems || []).length === 0) {
+      if (paginated) {
+        reloadPage();
+      } else {
+        reload();
+      }
+    }
+  }, [paginated, partialItems]);
   var onClickRemove = useCallback(function () {
     if (onChange !== null) {
       onChange(null);
     }
-  }, [onChange]);
+    // Clear the page and be good
+    if (paginated) {
+      setPage(defaultPage);
+      reset();
+    } else {
+      reset();
+    }
+  }, [onChange, paginated, defaultPage, reload, reloadPage, reset]);
+  var form = formOpen ? /*#__PURE__*/React.createElement(ResourceForm, {
+    resource: resource,
+    type: finalType,
+    item: !multiple ? value : null,
+    onSuccess: onFormSuccess
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['position-relative', _defineProperty({}, className, className != null)])
-  }, value !== null && !multiple ? /*#__PURE__*/React.createElement(ResourceCard, {
+  }, value !== null && !multiple ? /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-10 flex-grow-1"
+  }, /*#__PURE__*/React.createElement(ResourceCard, {
+    className: "flex-grow-1",
     item: value,
     getItemLabel: initialGetItemLabel,
     getItemDescription: getItemDescription,
@@ -262,12 +310,20 @@ var ResourceItemField = function ResourceItemField(_ref) {
     itemLabelWithId: itemLabelWithId,
     disable: disabled,
     onClickRemove: onClickRemove
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: classNames(['row', 'align-items-center'])
+  })), canEdit && !multiple ? /*#__PURE__*/React.createElement("div", {
+    className: "col-auto"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    icon: editButtonLabel === null ? 'pencil-square' : null,
+    onClick: formOpen ? onCloseForm : onOpenForm,
+    outline: true,
+    disabled: finalValue === null
+  }, editButtonLabel)) : null) : /*#__PURE__*/React.createElement("div", {
+    className: "row align-items-center"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "col-auto flex-grow-1"
+    className: "col-10 flex-grow-1"
   }, /*#__PURE__*/React.createElement(Select, {
-    className: classNames(['py-1', 'shadow-none', (_ref8 = {}, _defineProperty(_ref8, disabled, disabled), _defineProperty(_ref8, 'is-invalid', errors !== null), _defineProperty(_ref8, inputClassName, inputClassName !== null), _ref8)]),
+    className: classNames(['py-1', 'shadow-none', (_ref9 = {}, _defineProperty(_ref9, disabled, disabled), _defineProperty(_ref9, 'is-invalid', errors !== null), _defineProperty(_ref9, inputClassName, inputClassName !== null), _ref9)]),
     disabled: disabled,
     name: name,
     value: finalValue,
@@ -283,20 +339,30 @@ var ResourceItemField = function ResourceItemField(_ref) {
     }),
     onChange: onValueChange,
     onInputChange: onInputChange,
+    onFocus: onFocus,
+    onMenuScrollToBottom: onScrollEnd,
     multiple: multiple
   })), canCreate ? /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
     icon: createButtonLabel === null ? 'plus-lg' : null,
-    onClick: createOpen ? onCloseCreate : onOpenCreate,
+    onClick: formOpen ? onCloseForm : onOpenForm,
     outline: true
-  }, createButtonLabel)) : null, createOpen ? createInPlace ? /*#__PURE__*/React.createElement(ResourceForm, {
-    resource: resource,
-    type: resourceType,
-    onSuccess: onCreateSuccess
-  }) : /*#__PURE__*/React.createElement(Dialog, {
-    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, createButtonLabel)) : null), formOpen ? withoutModal ? /*#__PURE__*/React.createElement("div", {
+    className: "card mt-4 p-4"
+  }, form) : /*#__PURE__*/React.createElement(Dialog, {
+    title: !multiple && value !== null ? /*#__PURE__*/React.createElement(FormattedMessage, {
+      values: resourceValues,
+      id: "mCfzkJ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Edit "
+      }, {
+        "type": 1,
+        "value": "a_singular"
+      }]
+    }) : /*#__PURE__*/React.createElement(FormattedMessage, {
       values: resourceValues,
       id: "6viUpq",
       defaultMessage: [{
@@ -308,12 +374,8 @@ var ResourceItemField = function ResourceItemField(_ref) {
       }]
     }),
     size: "lg",
-    onClickClose: onCloseCreate
-  }, /*#__PURE__*/React.createElement(ResourceForm, {
-    resource: resource,
-    type: resourceType,
-    onSuccess: onCreateSuccess
-  })) : null));
+    onClickClose: onCloseForm
+  }, form) : null);
 };
 ResourceItemField.propTypes = propTypes;
 ResourceItemField.defaultProps = defaultProps;

package/lib/index.js

@@ -49,6 +49,7 @@ var propTypes = {
   errors: core.PropTypes.formErrors,
   resource: PropTypes__default["default"].string,
   resourceType: PropTypes__default["default"].string,
+  paginated: PropTypes__default["default"].bool,
   query: PropTypes__default["default"].object,
   // eslint-disable-line react/forbid-prop-types
   page: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
@@ -67,8 +68,10 @@ var propTypes = {
   itemLabelWithId: PropTypes__default["default"].bool,
   placeholder: PropTypes__default["default"].string,
   canCreate: PropTypes__default["default"].bool,
-  createInPlace: PropTypes__default["default"].bool,
-  createButtonLabel: PropTypes__default["default"].string,
+  canEdit: PropTypes__default["default"].bool,
+  withoutModal: PropTypes__default["default"].bool,
+  createButtonLabel: core.PropTypes.string,
+  editButtonLabel: core.PropTypes.message,
   multiple: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
@@ -81,6 +84,7 @@ var defaultProps = {
   errors: null,
   resource: null,
   resourceType: null,
+  paginated: true,
   query: null,
   page: null,
   count: null,
@@ -95,8 +99,10 @@ var defaultProps = {
   itemLabelWithId: false,
   placeholder: null,
   canCreate: false,
-  createInPlace: false,
+  canEdit: false,
+  withoutModal: false,
   createButtonLabel: null,
+  editButtonLabel: null,
   multiple: false,
   disabled: false,
   className: null,
@@ -104,12 +110,13 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref8;
+  var _ref9;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
     resourceId = _ref.resource,
     resourceType = _ref.resourceType,
+    paginated = _ref.paginated,
     initialQuery = _ref.query,
     initialPage = _ref.page,
     initialCount = _ref.count,
@@ -124,45 +131,53 @@ var ResourceItemField = function ResourceItemField(_ref) {
     itemLabelWithId = _ref.itemLabelWithId,
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
-    createInPlace = _ref.createInPlace,
+    canEdit = _ref.canEdit,
+    withoutModal = _ref.withoutModal,
     createButtonLabel = _ref.createButtonLabel,
+    editButtonLabel = _ref.editButtonLabel,
     multiple = _ref.multiple,
     disabled = _ref.disabled,
     className = _ref.className,
     inputClassName = _ref.inputClassName,
     onChange = _ref.onChange;
   var intl$1 = reactIntl.useIntl();
+  var resource = contexts.usePanneauResource(resourceId);
+  var resourceValues = intl.useResourceValues(resource);
+  var defaultPage = initialPage || (paginated ? 1 : null);
+  var defaultCount = initialCount || (paginated ? 10 : null);
   // const [initialValue] = useState(value);
-  var _useState = React.useState(initialQuery),
+
+  var _useState = React.useState(initialCount),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
-    query = _useState2[0];
-    _useState2[1];
-  var _useState3 = React.useState(initialPage),
+    formOpen = _useState2[0],
+    setFormOpen = _useState2[1];
+
+  // The text input search query
+  var _useState3 = React.useState(''),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    page = _useState4[0];
-    _useState4[1];
-  var _useState5 = React.useState(initialCount),
+    inputTextValue = _useState4[0],
+    setInputTextValue = _useState4[1];
+  var onInputChange = React.useCallback(function (textValue) {
+    setInputTextValue(textValue);
+  }, []);
+
+  // TODO: list state controls?
+  var _useState5 = React.useState(initialQuery),
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    count = _useState6[0];
+    query = _useState6[0];
     _useState6[1];
-  var _useState7 = React.useState(initialOptions),
+  var _useState7 = React.useState(defaultPage),
     _useState8 = _slicedToArray__default["default"](_useState7, 2),
-    resourceOptions = _useState8[0];
-    _useState8[1];
-
-  // The create option
-  var _useState9 = React.useState(initialCount),
+    page = _useState8[0],
+    setPage = _useState8[1];
+  var _useState9 = React.useState(defaultCount),
     _useState10 = _slicedToArray__default["default"](_useState9, 2),
-    createOpen = _useState10[0],
-    setCreateOpen = _useState10[1];
-
-  // The search query
-  var _useState11 = React.useState(''),
+    count = _useState10[0];
+    _useState10[1];
+  var _useState11 = React.useState(initialOptions),
     _useState12 = _slicedToArray__default["default"](_useState11, 2),
-    inputTextValue = _useState12[0],
-    setInputTextValue = _useState12[1];
-  var resource = contexts.usePanneauResource(resourceId);
-  var resourceValues = intl.useResourceValues(resource);
+    resourceOptions = _useState12[0];
+    _useState12[1];
   var queryResource = React.useMemo(function () {
     return {
       id: resourceId
@@ -170,19 +185,36 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, [resourceId]);
   var finalQuery = React.useMemo(function () {
     return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, query), !isEmpty__default["default"](inputTextValue) ? _defineProperty__default["default"]({}, searchParamName, inputTextValue) : null), {}, {
-      paginated: false // TODO: implement this...
+      paginated: paginated
     });
-  }, [inputTextValue]);
-
-  // console.log('resource', resourceId, resource);
-
-  var resourceItems = data.useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
+  }, [inputTextValue, paginated]);
+  var resourceItems = data.useResourceItems(queryResource, finalQuery, paginated ? page : null, paginated ? count : null, resourceOptions);
   var _ref3 = resourceItems || {},
-    _ref3$items = _ref3.items,
-    partialItems = _ref3$items === void 0 ? null : _ref3$items;
+    _ref3$allItems = _ref3.allItems,
+    partialItems = _ref3$allItems === void 0 ? null : _ref3$allItems,
+    _ref3$reload = _ref3.reload,
+    reload = _ref3$reload === void 0 ? null : _ref3$reload,
+    _ref3$reloadPage = _ref3.reloadPage,
+    reloadPage = _ref3$reloadPage === void 0 ? null : _ref3$reloadPage,
+    _ref3$reset = _ref3.reset,
+    reset = _ref3$reset === void 0 ? null : _ref3$reset,
+    _ref3$lastPage = _ref3.lastPage,
+    lastPage = _ref3$lastPage === void 0 ? null : _ref3$lastPage;
   var items = (partialItems || []).concat(multiple && isArray__default["default"](value) ? value : [value]).filter(function (it) {
     return it !== null;
+  }).filter(function (v, i, a) {
+    return a.findIndex(function (v2) {
+      return v2.id === v.id;
+    }) === i;
   });
+  var onScrollEnd = React.useCallback(function () {
+    if (page !== null && page >= lastPage) {
+      return;
+    }
+    if (paginated) {
+      setPage(page + 1);
+    }
+  }, [paginated, page, setPage, lastPage]);
   var getItemLabel = React.useCallback(function (it, path) {
     var id = get__default["default"](it, 'id', null);
     if (itemLabelWithId) {
@@ -200,45 +232,32 @@ var ResourceItemField = function ResourceItemField(_ref) {
       label: finalLabel
     };
   }, [getItemLabel, getItemDescription, itemLabelPath, itemDescriptionPath]);
-  var partialValue = multiple && isArray__default["default"](value) ? value.map(function (it) {
-    return parseItem(it);
-  }) : value || null;
-  var finalValue = multiple && isArray__default["default"](partialValue) ? partialValue.map(function (_ref4) {
+  var finalValue = multiple && isArray__default["default"](value) ? value.map(function (_ref4) {
     var _ref4$id = _ref4.id,
       id = _ref4$id === void 0 ? null : _ref4$id;
     return id;
   }) : (value === null || value === void 0 ? void 0 : value.id) || null;
+  var _ref5 = !multiple && value !== null ? value : {
+      type: resourceType
+    },
+    _ref5$type = _ref5.type,
+    finalType = _ref5$type === void 0 ? null : _ref5$type;
   var options = (items || []).map(function (it) {
     return parseItem(it);
   });
-
-  // TODO: filter duplicate IDs blabla
-  // const { id: valueId = null } = value || {};
-  // const filteredItems =
-  //     responseItems !== null && valueId !== null
-  //         ? responseItems.filter((it) => (it !== null && it.id ? it.id !== valueId : true))
-  //         : responseItems || [];
-  // const arrayedValue = multiple ? value : [value];
-  // const items = [...filteredItems, ...(value !== null ? arrayedValue : [])];
-  // console.log(options, items, value, finalValue, onChange);
-  // console.log('ultimate', options, finalValue);
-
-  var onInputChange = React.useCallback(function (textValue) {
-    setInputTextValue(textValue);
-  }, []);
   var onValueChange = React.useCallback(function (newId) {
     if (onChange === null) return;
     if (multiple) {
-      var newValue = items.filter(function (_ref5) {
-        var _ref5$id = _ref5.id,
-          id = _ref5$id === void 0 ? null : _ref5$id;
+      var newValue = items.filter(function (_ref6) {
+        var _ref6$id = _ref6.id,
+          id = _ref6$id === void 0 ? null : _ref6$id;
         return newId.indexOf(id) !== -1;
       }) || [];
       onChange(newValue);
     } else {
-      var _newValue = items.filter(function (_ref6) {
-        var _ref6$id = _ref6.id,
-          id = _ref6$id === void 0 ? null : _ref6$id;
+      var _newValue = items.filter(function (_ref7) {
+        var _ref7$id = _ref7.id,
+          id = _ref7$id === void 0 ? null : _ref7$id;
         return id === newId;
       }) || [];
       if (_newValue !== null && _newValue.length > 0) {
@@ -248,13 +267,13 @@ var ResourceItemField = function ResourceItemField(_ref) {
       }
     }
   }, [items, onChange, multiple]);
-  var onOpenCreate = React.useCallback(function () {
-    setCreateOpen(true);
-  }, [setCreateOpen]);
-  var onCloseCreate = React.useCallback(function () {
-    setCreateOpen(false);
-  }, [setCreateOpen]);
-  var onCreateSuccess = React.useCallback(function (newValue) {
+  var onOpenForm = React.useCallback(function () {
+    setFormOpen(true);
+  }, [setFormOpen]);
+  var onCloseForm = React.useCallback(function () {
+    setFormOpen(false);
+  }, [setFormOpen]);
+  var onFormSuccess = React.useCallback(function (newValue) {
     if (onChange === null) return;
     var finalNewValue = resourceType !== null ? _objectSpread__default["default"]({
       type: resourceType
@@ -264,16 +283,45 @@ var ResourceItemField = function ResourceItemField(_ref) {
     } else {
       onChange(finalNewValue);
     }
-    setCreateOpen(false);
-  }, [onChange, multiple, value, setCreateOpen, resourceType]);
+    setFormOpen(false);
+  }, [onChange, multiple, value, setFormOpen, resourceType, paginated, initialPage]);
+
+  // If empty try to fetch
+  var onFocus = React.useCallback(function () {
+    if ((partialItems || []).length === 0) {
+      if (paginated) {
+        reloadPage();
+      } else {
+        reload();
+      }
+    }
+  }, [paginated, partialItems]);
   var onClickRemove = React.useCallback(function () {
     if (onChange !== null) {
       onChange(null);
     }
-  }, [onChange]);
+    // Clear the page and be good
+    if (paginated) {
+      setPage(defaultPage);
+      reset();
+    } else {
+      reset();
+    }
+  }, [onChange, paginated, defaultPage, reload, reloadPage, reset]);
+  var form = formOpen ? /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
+    resource: resource,
+    type: finalType,
+    item: !multiple ? value : null,
+    onSuccess: onFormSuccess
+  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({}, className, className != null)])
-  }, value !== null && !multiple ? /*#__PURE__*/React__default["default"].createElement(ResourceCard__default["default"], {
+  }, value !== null && !multiple ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-10 flex-grow-1"
+  }, /*#__PURE__*/React__default["default"].createElement(ResourceCard__default["default"], {
+    className: "flex-grow-1",
     item: value,
     getItemLabel: initialGetItemLabel,
     getItemDescription: getItemDescription,
@@ -284,12 +332,20 @@ var ResourceItemField = function ResourceItemField(_ref) {
     itemLabelWithId: itemLabelWithId,
     disable: disabled,
     onClickRemove: onClickRemove
-  }) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['row', 'align-items-center'])
+  })), canEdit && !multiple ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-auto"
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    theme: "primary",
+    icon: editButtonLabel === null ? 'pencil-square' : null,
+    onClick: formOpen ? onCloseForm : onOpenForm,
+    outline: true,
+    disabled: finalValue === null
+  }, editButtonLabel)) : null) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row align-items-center"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "col-auto flex-grow-1"
+    className: "col-10 flex-grow-1"
   }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
-    className: classNames__default["default"](['py-1', 'shadow-none', (_ref8 = {}, _defineProperty__default["default"](_ref8, disabled, disabled), _defineProperty__default["default"](_ref8, 'is-invalid', errors !== null), _defineProperty__default["default"](_ref8, inputClassName, inputClassName !== null), _ref8)]),
+    className: classNames__default["default"](['py-1', 'shadow-none', (_ref9 = {}, _defineProperty__default["default"](_ref9, disabled, disabled), _defineProperty__default["default"](_ref9, 'is-invalid', errors !== null), _defineProperty__default["default"](_ref9, inputClassName, inputClassName !== null), _ref9)]),
     disabled: disabled,
     name: name,
     value: finalValue,
@@ -305,20 +361,30 @@ var ResourceItemField = function ResourceItemField(_ref) {
     }),
     onChange: onValueChange,
     onInputChange: onInputChange,
+    onFocus: onFocus,
+    onMenuScrollToBottom: onScrollEnd,
     multiple: multiple
   })), canCreate ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-auto"
   }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     theme: "primary",
     icon: createButtonLabel === null ? 'plus-lg' : null,
-    onClick: createOpen ? onCloseCreate : onOpenCreate,
+    onClick: formOpen ? onCloseForm : onOpenForm,
     outline: true
-  }, createButtonLabel)) : null, createOpen ? createInPlace ? /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
-    resource: resource,
-    type: resourceType,
-    onSuccess: onCreateSuccess
-  }) : /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
-    title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, createButtonLabel)) : null), formOpen ? withoutModal ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "card mt-4 p-4"
+  }, form) : /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
+    title: !multiple && value !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      values: resourceValues,
+      id: "mCfzkJ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Edit "
+      }, {
+        "type": 1,
+        "value": "a_singular"
+      }]
+    }) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       values: resourceValues,
       id: "6viUpq",
       defaultMessage: [{
@@ -330,12 +396,8 @@ var ResourceItemField = function ResourceItemField(_ref) {
       }]
     }),
     size: "lg",
-    onClickClose: onCloseCreate
-  }, /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
-    resource: resource,
-    type: resourceType,
-    onSuccess: onCreateSuccess
-  })) : null));
+    onClickClose: onCloseForm
+  }, form) : null);
 };
 ResourceItemField.propTypes = propTypes;
 ResourceItemField.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-resource-item",
-    "version": "2.0.72",
+    "version": "2.0.77",
     "description": "An item mapping a resource",
     "keywords": [
         "javascript"
@@ -45,14 +45,14 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^2.0.71",
-        "@panneau/data": "^2.0.71",
-        "@panneau/element-button": "^2.0.71",
-        "@panneau/element-resource-card": "^2.0.72",
-        "@panneau/element-select": "^2.0.71",
-        "@panneau/form-resource": "^2.0.71",
-        "@panneau/intl": "^2.0.71",
-        "@panneau/modal-dialog": "^2.0.72",
+        "@panneau/core": "^2.0.75",
+        "@panneau/data": "^2.0.75",
+        "@panneau/element-button": "^2.0.75",
+        "@panneau/element-resource-card": "^2.0.75",
+        "@panneau/element-select": "^2.0.75",
+        "@panneau/form-resource": "^2.0.77",
+        "@panneau/intl": "^2.0.75",
+        "@panneau/modal-dialog": "^2.0.75",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -61,5 +61,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "dec3ab57e02e99a81625bf5c2f7d8589fd222e57"
+    "gitHead": "ba3b77e9c0b5640790858793f96b48b7c20d0c97"
 }