@panneau/field-resource-item 2.0.67 → 2.0.69

package/es/index.js

@@ -14,6 +14,7 @@ import { usePanneauResource } from '@panneau/core/contexts';
 import { isMessage, getPathValue } from '@panneau/core/utils';
 import { useResourceItems } from '@panneau/data';
 import Button from '@panneau/element-button';
+import ResourceCard from '@panneau/element-resource-card';
 import Select from '@panneau/element-select';
 import ResourceForm from '@panneau/form-resource';
 import { useResourceValues } from '@panneau/intl';
@@ -36,13 +37,14 @@ var propTypes = {
   searchParamName: PropTypes.string,
   getItemLabel: PropTypes.func,
   getItemDescription: PropTypes.func,
-  // getItemImage: PropTypes.func,
+  getItemImage: PropTypes.func,
   itemLabelPath: PropTypes.string,
   itemDescriptionPath: PropTypes.string,
-  // itemImagePath: PropTypes.string,
+  itemImagePath: PropTypes.string,
   itemLabelWithId: PropTypes.bool,
   placeholder: PropTypes.string,
   canCreate: PropTypes.bool,
+  createInPlace: PropTypes.bool,
   multiple: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
@@ -61,13 +63,14 @@ var defaultProps = {
   searchParamName: 'search',
   getItemLabel: getPathValue,
   getItemDescription: getPathValue,
-  // getItemImage: getPathValue,
+  getItemImage: getPathValue,
   itemLabelPath: 'label',
   itemDescriptionPath: null,
-  // itemImagePath: 'image',
+  itemImagePath: 'image',
   itemLabelWithId: false,
   placeholder: null,
   canCreate: false,
+  createInPlace: false,
   multiple: false,
   disabled: false,
   className: null,
@@ -87,11 +90,14 @@ var ResourceItemField = function ResourceItemField(_ref) {
     searchParamName = _ref.searchParamName,
     initialGetItemLabel = _ref.getItemLabel,
     getItemDescription = _ref.getItemDescription,
+    getItemImage = _ref.getItemImage,
     itemLabelPath = _ref.itemLabelPath,
     itemDescriptionPath = _ref.itemDescriptionPath,
+    itemImagePath = _ref.itemImagePath,
     itemLabelWithId = _ref.itemLabelWithId,
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
+    createInPlace = _ref.createInPlace,
     multiple = _ref.multiple,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -135,19 +141,20 @@ var ResourceItemField = function ResourceItemField(_ref) {
     };
   }, [resourceId]);
   var finalQuery = useMemo(function () {
-    return _objectSpread(_objectSpread({}, query), !isEmpty(inputTextValue) ? _defineProperty({}, searchParamName, inputTextValue) : null);
+    return _objectSpread(_objectSpread(_objectSpread({}, query), !isEmpty(inputTextValue) ? _defineProperty({}, searchParamName, inputTextValue) : null), {}, {
+      paginated: false // TODO: implement this...
+    });
   }, [inputTextValue]);
+
+  // console.log('resource', resourceId, resource);
+
   var resourceItems = useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
   var _ref3 = resourceItems || {},
-    _ref3$data = _ref3.data,
-    responseItems = _ref3$data === void 0 ? null : _ref3$data;
-  var _ref4 = value || {},
-    _ref4$id = _ref4.id,
-    valueId = _ref4$id === void 0 ? null : _ref4$id;
-  var filteredItems = responseItems !== null && valueId !== null ? responseItems.filter(function (it) {
-    return it !== null && it.id ? it.id !== valueId : true;
-  }) : responseItems || [];
-  var items = [].concat(_toConsumableArray(filteredItems), _toConsumableArray(value !== null ? value : []));
+    _ref3$items = _ref3.items,
+    partialItems = _ref3$items === void 0 ? null : _ref3$items;
+  var items = (partialItems || []).concat(multiple && isArray(value) ? value : [value]).filter(function (it) {
+    return it !== null;
+  });
   var getItemLabel = useCallback(function (it, path) {
     var id = get(it, 'id', null);
     if (itemLabelWithId) {
@@ -165,12 +172,29 @@ 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 _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 options = (items || []).map(function (it) {
     return parseItem(it);
   });
-  var finalValue = multiple && isArray(value) ? value.map(function (it) {
-    return parseItem(it);
-  }) : value;
+
+  // 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);
   }, []);
@@ -203,13 +227,33 @@ var ResourceItemField = function ResourceItemField(_ref) {
     setCreateOpen(false);
   }, [setCreateOpen]);
   var onCreateSuccess = useCallback(function (newValue) {
-    onChange(newValue);
+    if (onChange === null) return;
+    if (multiple) {
+      onChange(value !== null && isArray(value) ? [].concat(_toConsumableArray(value), [newValue]) : [newValue]);
+    } else {
+      onChange(newValue);
+    }
     setCreateOpen(false);
-    // setInputTextValue('');
+  }, [onChange, multiple, value, setCreateOpen]);
+  var onClickRemove = useCallback(function () {
+    if (onChange !== null) {
+      onChange(null);
+    }
   }, [onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['position-relative', _defineProperty({}, className, className != null)])
-  }, /*#__PURE__*/React.createElement("div", {
+  }, value !== null && !multiple ? /*#__PURE__*/React.createElement(ResourceCard, {
+    item: value,
+    getItemLabel: initialGetItemLabel,
+    getItemDescription: getItemDescription,
+    getItemImage: getItemImage,
+    itemLabelPath: itemLabelPath,
+    itemDescriptionPath: itemDescriptionPath,
+    itemImagePath: itemImagePath,
+    itemLabelWithId: itemLabelWithId,
+    disable: disabled,
+    onClickRemove: onClickRemove
+  }) : /*#__PURE__*/React.createElement("div", {
     className: classNames(['row', 'align-items-center'])
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto flex-grow-1"
@@ -236,8 +280,12 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
     icon: "plus-lg",
-    onClick: createOpen ? onCloseCreate : onOpenCreate
-  })) : null, createOpen ? /*#__PURE__*/React.createElement(Dialog, {
+    onClick: createOpen ? onCloseCreate : onOpenCreate,
+    outline: true
+  })) : null, createOpen ? createInPlace ? /*#__PURE__*/React.createElement(ResourceForm, {
+    resource: resource,
+    onSuccess: onCreateSuccess
+  }) : /*#__PURE__*/React.createElement(Dialog, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
       values: resourceValues,
       id: "6viUpq",
@@ -249,6 +297,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
         "value": "a_singular"
       }]
     }),
+    size: "lg",
     onClickClose: onCloseCreate
   }, /*#__PURE__*/React.createElement(ResourceForm, {
     resource: resource,

package/lib/index.js

@@ -18,6 +18,7 @@ var contexts = require('@panneau/core/contexts');
 var utils = require('@panneau/core/utils');
 var data = require('@panneau/data');
 var Button = require('@panneau/element-button');
+var ResourceCard = require('@panneau/element-resource-card');
 var Select = require('@panneau/element-select');
 var ResourceForm = require('@panneau/form-resource');
 var intl = require('@panneau/intl');
@@ -36,6 +37,7 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var ResourceCard__default = /*#__PURE__*/_interopDefaultLegacy(ResourceCard);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var ResourceForm__default = /*#__PURE__*/_interopDefaultLegacy(ResourceForm);
 var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
@@ -57,13 +59,14 @@ var propTypes = {
   searchParamName: PropTypes__default["default"].string,
   getItemLabel: PropTypes__default["default"].func,
   getItemDescription: PropTypes__default["default"].func,
-  // getItemImage: PropTypes.func,
+  getItemImage: PropTypes__default["default"].func,
   itemLabelPath: PropTypes__default["default"].string,
   itemDescriptionPath: PropTypes__default["default"].string,
-  // itemImagePath: PropTypes.string,
+  itemImagePath: PropTypes__default["default"].string,
   itemLabelWithId: PropTypes__default["default"].bool,
   placeholder: PropTypes__default["default"].string,
   canCreate: PropTypes__default["default"].bool,
+  createInPlace: PropTypes__default["default"].bool,
   multiple: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
@@ -82,13 +85,14 @@ var defaultProps = {
   searchParamName: 'search',
   getItemLabel: utils.getPathValue,
   getItemDescription: utils.getPathValue,
-  // getItemImage: getPathValue,
+  getItemImage: utils.getPathValue,
   itemLabelPath: 'label',
   itemDescriptionPath: null,
-  // itemImagePath: 'image',
+  itemImagePath: 'image',
   itemLabelWithId: false,
   placeholder: null,
   canCreate: false,
+  createInPlace: false,
   multiple: false,
   disabled: false,
   className: null,
@@ -108,11 +112,14 @@ var ResourceItemField = function ResourceItemField(_ref) {
     searchParamName = _ref.searchParamName,
     initialGetItemLabel = _ref.getItemLabel,
     getItemDescription = _ref.getItemDescription,
+    getItemImage = _ref.getItemImage,
     itemLabelPath = _ref.itemLabelPath,
     itemDescriptionPath = _ref.itemDescriptionPath,
+    itemImagePath = _ref.itemImagePath,
     itemLabelWithId = _ref.itemLabelWithId,
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
+    createInPlace = _ref.createInPlace,
     multiple = _ref.multiple,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -156,19 +163,20 @@ var ResourceItemField = function ResourceItemField(_ref) {
     };
   }, [resourceId]);
   var finalQuery = React.useMemo(function () {
-    return _objectSpread__default["default"](_objectSpread__default["default"]({}, query), !isEmpty__default["default"](inputTextValue) ? _defineProperty__default["default"]({}, searchParamName, inputTextValue) : null);
+    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...
+    });
   }, [inputTextValue]);
+
+  // console.log('resource', resourceId, resource);
+
   var resourceItems = data.useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
   var _ref3 = resourceItems || {},
-    _ref3$data = _ref3.data,
-    responseItems = _ref3$data === void 0 ? null : _ref3$data;
-  var _ref4 = value || {},
-    _ref4$id = _ref4.id,
-    valueId = _ref4$id === void 0 ? null : _ref4$id;
-  var filteredItems = responseItems !== null && valueId !== null ? responseItems.filter(function (it) {
-    return it !== null && it.id ? it.id !== valueId : true;
-  }) : responseItems || [];
-  var items = [].concat(_toConsumableArray__default["default"](filteredItems), _toConsumableArray__default["default"](value !== null ? value : []));
+    _ref3$items = _ref3.items,
+    partialItems = _ref3$items === void 0 ? null : _ref3$items;
+  var items = (partialItems || []).concat(multiple && isArray__default["default"](value) ? value : [value]).filter(function (it) {
+    return it !== null;
+  });
   var getItemLabel = React.useCallback(function (it, path) {
     var id = get__default["default"](it, 'id', null);
     if (itemLabelWithId) {
@@ -186,12 +194,29 @@ 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 _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 options = (items || []).map(function (it) {
     return parseItem(it);
   });
-  var finalValue = multiple && isArray__default["default"](value) ? value.map(function (it) {
-    return parseItem(it);
-  }) : value;
+
+  // 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);
   }, []);
@@ -224,13 +249,33 @@ var ResourceItemField = function ResourceItemField(_ref) {
     setCreateOpen(false);
   }, [setCreateOpen]);
   var onCreateSuccess = React.useCallback(function (newValue) {
-    onChange(newValue);
+    if (onChange === null) return;
+    if (multiple) {
+      onChange(value !== null && isArray__default["default"](value) ? [].concat(_toConsumableArray__default["default"](value), [newValue]) : [newValue]);
+    } else {
+      onChange(newValue);
+    }
     setCreateOpen(false);
-    // setInputTextValue('');
+  }, [onChange, multiple, value, setCreateOpen]);
+  var onClickRemove = React.useCallback(function () {
+    if (onChange !== null) {
+      onChange(null);
+    }
   }, [onChange]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({}, className, className != null)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, value !== null && !multiple ? /*#__PURE__*/React__default["default"].createElement(ResourceCard__default["default"], {
+    item: value,
+    getItemLabel: initialGetItemLabel,
+    getItemDescription: getItemDescription,
+    getItemImage: getItemImage,
+    itemLabelPath: itemLabelPath,
+    itemDescriptionPath: itemDescriptionPath,
+    itemImagePath: itemImagePath,
+    itemLabelWithId: itemLabelWithId,
+    disable: disabled,
+    onClickRemove: onClickRemove
+  }) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['row', 'align-items-center'])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-auto flex-grow-1"
@@ -257,8 +302,12 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     theme: "primary",
     icon: "plus-lg",
-    onClick: createOpen ? onCloseCreate : onOpenCreate
-  })) : null, createOpen ? /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
+    onClick: createOpen ? onCloseCreate : onOpenCreate,
+    outline: true
+  })) : null, createOpen ? createInPlace ? /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
+    resource: resource,
+    onSuccess: onCreateSuccess
+  }) : /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
     title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       values: resourceValues,
       id: "6viUpq",
@@ -270,6 +319,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
         "value": "a_singular"
       }]
     }),
+    size: "lg",
     onClickClose: onCloseCreate
   }, /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
     resource: resource,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-resource-item",
-    "version": "2.0.67",
+    "version": "2.0.69",
     "description": "An item mapping a resource",
     "keywords": [
         "javascript"
@@ -45,13 +45,14 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^2.0.58",
-        "@panneau/data": "^2.0.58",
-        "@panneau/element-button": "^2.0.59",
-        "@panneau/element-select": "^2.0.58",
-        "@panneau/form-resource": "^2.0.58",
-        "@panneau/intl": "^2.0.58",
-        "@panneau/modal-dialog": "^2.0.67",
+        "@panneau/core": "^2.0.69",
+        "@panneau/data": "^2.0.69",
+        "@panneau/element-button": "^2.0.69",
+        "@panneau/element-resource-card": "^2.0.69",
+        "@panneau/element-select": "^2.0.69",
+        "@panneau/form-resource": "^2.0.69",
+        "@panneau/intl": "^2.0.69",
+        "@panneau/modal-dialog": "^2.0.69",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -60,5 +61,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ac972a8e66c405de1c4d4606d347f3a3f1e839e8"
+    "gitHead": "270c1e84966861e94a390d20ee525c33f7edadb0"
 }