@panneau/field-resource-item 2.0.66 → 2.0.68

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';
@@ -43,6 +44,7 @@ var propTypes = {
   itemLabelWithId: PropTypes.bool,
   placeholder: PropTypes.string,
   canCreate: PropTypes.bool,
+  createInPlace: PropTypes.bool,
   multiple: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
@@ -68,6 +70,7 @@ var defaultProps = {
   itemLabelWithId: false,
   placeholder: null,
   canCreate: false,
+  createInPlace: false,
   multiple: false,
   disabled: false,
   className: null,
@@ -75,7 +78,7 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref8;
+  var _ref9;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
@@ -92,6 +95,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
     itemLabelWithId = _ref.itemLabelWithId,
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
+    createInPlace = _ref.createInPlace,
     multiple = _ref.multiple,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -135,19 +139,26 @@ 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 hahahaha
+    });
   }, [inputTextValue]);
+
+  // console.log('resource', resourceId, resource);
+  // console.log('value', value);
+
   var resourceItems = useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
   var _ref3 = resourceItems || {},
-    _ref3$data = _ref3.data,
-    responseItems = _ref3$data === void 0 ? null : _ref3$data;
+    _ref3$items = _ref3.items,
+    responseItems = _ref3$items === void 0 ? null : _ref3$items;
   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 : []));
+  var arrayedValue = multiple ? value : [value];
+  var items = [].concat(_toConsumableArray(filteredItems), _toConsumableArray(value !== null ? arrayedValue : []));
   var getItemLabel = useCallback(function (it, path) {
     var id = get(it, 'id', null);
     if (itemLabelWithId) {
@@ -168,25 +179,32 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var options = (items || []).map(function (it) {
     return parseItem(it);
   });
-  var finalValue = multiple && isArray(value) ? value.map(function (it) {
+  var partialValue = multiple && isArray(value) ? value.map(function (it) {
     return parseItem(it);
-  }) : value;
+  }) : value || null;
+  var finalValue = multiple && isArray(partialValue) ? partialValue.map(function (_ref5) {
+    var _ref5$id = _ref5.id,
+      id = _ref5$id === void 0 ? null : _ref5$id;
+    return id;
+  }) : value === null || value === void 0 ? void 0 : value.id;
+  // 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) {
@@ -203,18 +221,26 @@ var ResourceItemField = function ResourceItemField(_ref) {
     setCreateOpen(false);
   }, [setCreateOpen]);
   var onCreateSuccess = useCallback(function (newValue) {
-    onChange(newValue);
-    setCreateOpen(false);
-    // setInputTextValue('');
-  }, [onChange]);
+    // console.log('newValue', newValue);
+    if (multiple) {
+      onChange(value !== null && isArray(value) ? [].concat(_toConsumableArray(value), [newValue]) : [newValue]);
+    } else {
+      onChange(newValue);
+    }
+    setTimeout(function () {
+      setCreateOpen(false);
+    }, 1000);
+  }, [onChange, multiple, value]);
   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
+  }) : /*#__PURE__*/React.createElement("div", {
     className: classNames(['row', 'align-items-center'])
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto 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,
@@ -236,8 +262,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("div", null, /*#__PURE__*/React.createElement(ResourceForm, {
+    resource: resource,
+    onSuccess: onCreateSuccess
+  })) : /*#__PURE__*/React.createElement(Dialog, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
       values: resourceValues,
       id: "6viUpq",

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);
@@ -64,6 +66,7 @@ var propTypes = {
   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,
@@ -89,6 +92,7 @@ var defaultProps = {
   itemLabelWithId: false,
   placeholder: null,
   canCreate: false,
+  createInPlace: false,
   multiple: false,
   disabled: false,
   className: null,
@@ -96,7 +100,7 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref8;
+  var _ref9;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
@@ -113,6 +117,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
     itemLabelWithId = _ref.itemLabelWithId,
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
+    createInPlace = _ref.createInPlace,
     multiple = _ref.multiple,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -156,19 +161,26 @@ 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 hahahaha
+    });
   }, [inputTextValue]);
+
+  // console.log('resource', resourceId, resource);
+  // console.log('value', value);
+
   var resourceItems = data.useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
   var _ref3 = resourceItems || {},
-    _ref3$data = _ref3.data,
-    responseItems = _ref3$data === void 0 ? null : _ref3$data;
+    _ref3$items = _ref3.items,
+    responseItems = _ref3$items === void 0 ? null : _ref3$items;
   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 : []));
+  var arrayedValue = multiple ? value : [value];
+  var items = [].concat(_toConsumableArray__default["default"](filteredItems), _toConsumableArray__default["default"](value !== null ? arrayedValue : []));
   var getItemLabel = React.useCallback(function (it, path) {
     var id = get__default["default"](it, 'id', null);
     if (itemLabelWithId) {
@@ -189,25 +201,32 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var options = (items || []).map(function (it) {
     return parseItem(it);
   });
-  var finalValue = multiple && isArray__default["default"](value) ? value.map(function (it) {
+  var partialValue = multiple && isArray__default["default"](value) ? value.map(function (it) {
     return parseItem(it);
-  }) : value;
+  }) : value || null;
+  var finalValue = multiple && isArray__default["default"](partialValue) ? partialValue.map(function (_ref5) {
+    var _ref5$id = _ref5.id,
+      id = _ref5$id === void 0 ? null : _ref5$id;
+    return id;
+  }) : value === null || value === void 0 ? void 0 : value.id;
+  // 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) {
@@ -224,18 +243,26 @@ var ResourceItemField = function ResourceItemField(_ref) {
     setCreateOpen(false);
   }, [setCreateOpen]);
   var onCreateSuccess = React.useCallback(function (newValue) {
-    onChange(newValue);
-    setCreateOpen(false);
-    // setInputTextValue('');
-  }, [onChange]);
+    // console.log('newValue', newValue);
+    if (multiple) {
+      onChange(value !== null && isArray__default["default"](value) ? [].concat(_toConsumableArray__default["default"](value), [newValue]) : [newValue]);
+    } else {
+      onChange(newValue);
+    }
+    setTimeout(function () {
+      setCreateOpen(false);
+    }, 1000);
+  }, [onChange, multiple, value]);
   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
+  }) : /*#__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"
   }, /*#__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,
@@ -257,8 +284,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("div", null, /*#__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",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-resource-item",
-    "version": "2.0.66",
+    "version": "2.0.68",
     "description": "An item mapping a resource",
     "keywords": [
         "javascript"
@@ -48,10 +48,12 @@
         "@panneau/core": "^2.0.58",
         "@panneau/data": "^2.0.58",
         "@panneau/element-button": "^2.0.59",
+        "@panneau/element-modal": "^2.0.58",
+        "@panneau/element-resource-card": "^2.0.68",
         "@panneau/element-select": "^2.0.58",
-        "@panneau/form-resource": "^2.0.58",
-        "@panneau/intl": "^2.0.58",
-        "@panneau/modal-dialog": "^2.0.65",
+        "@panneau/form-resource": "^2.0.68",
+        "@panneau/intl": "^2.0.68",
+        "@panneau/modal-dialog": "^2.0.68",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -60,5 +62,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c4bdabed61ebb59f383ced1055d859a4a331dfa4"
+    "gitHead": "7f91dc52ac77f545d1438dd2d612845bfd445522"
 }