@panneau/field-resource-item 2.0.58 → 2.0.65

package/es/index.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -14,8 +15,9 @@ import { isMessage, getPathValue } from '@panneau/core/utils';
 import { useResourceItems } from '@panneau/data';
 import Button from '@panneau/element-button';
 import Select from '@panneau/element-select';
-
-// import Dialog from '@panneau/modal-dialog';
+import ResourceForm from '@panneau/form-resource';
+import { useResourceValues } from '@panneau/intl';
+import Dialog from '@panneau/modal-dialog';
 
 var propTypes = {
   name: PropTypes.string,
@@ -73,7 +75,7 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref7;
+  var _ref8;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
@@ -125,9 +127,9 @@ var ResourceItemField = function ResourceItemField(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     inputTextValue = _useState12[0],
     setInputTextValue = _useState12[1];
-  var completeResource = usePanneauResource(resourceId);
-  console.log(resourceId, completeResource);
-  var resource = useMemo(function () {
+  var resource = usePanneauResource(resourceId);
+  var resourceValues = useResourceValues(resource);
+  var queryResource = useMemo(function () {
     return {
       id: resourceId
     };
@@ -135,10 +137,17 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var finalQuery = useMemo(function () {
     return _objectSpread(_objectSpread({}, query), !isEmpty(inputTextValue) ? _defineProperty({}, searchParamName, inputTextValue) : null);
   }, [inputTextValue]);
-  var resourceItems = useResourceItems(resource, finalQuery, page, count, resourceOptions);
+  var resourceItems = useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
   var _ref3 = resourceItems || {},
     _ref3$items = _ref3.items,
-    items = _ref3$items === void 0 ? null : _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 getItemLabel = useCallback(function (it, path) {
     var id = get(it, 'id', null);
     if (itemLabelWithId) {
@@ -168,16 +177,16 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var onValueChange = useCallback(function (newId) {
     if (onChange === null) return;
     if (multiple) {
-      var newValue = items.filter(function (_ref4) {
-        var _ref4$id = _ref4.id,
-          id = _ref4$id === void 0 ? null : _ref4$id;
+      var newValue = items.filter(function (_ref5) {
+        var _ref5$id = _ref5.id,
+          id = _ref5$id === void 0 ? null : _ref5$id;
         return newId.indexOf(id) !== -1;
       }) || [];
       onChange(newValue);
     } else {
-      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 id === newId;
       }) || [];
       if (_newValue !== null && _newValue.length > 0) {
@@ -193,6 +202,11 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var onCloseCreate = useCallback(function () {
     setCreateOpen(false);
   }, [setCreateOpen]);
+  var onCreateSuccess = useCallback(function (newValue) {
+    onChange(newValue);
+    setCreateOpen(false);
+    setInputTextValue('');
+  }, [onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['position-relative', _defineProperty({}, className, className != null)])
   }, /*#__PURE__*/React.createElement("div", {
@@ -200,7 +214,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto flex-grow-1"
   }, /*#__PURE__*/React.createElement(Select, {
-    className: classNames(['py-1', 'shadow-none', (_ref7 = {}, _defineProperty(_ref7, disabled, disabled), _defineProperty(_ref7, 'is-invalid', errors !== null), _defineProperty(_ref7, inputClassName, inputClassName !== null), _ref7)]),
+    className: classNames(['py-1', 'shadow-none', (_ref8 = {}, _defineProperty(_ref8, disabled, disabled), _defineProperty(_ref8, 'is-invalid', errors !== null), _defineProperty(_ref8, inputClassName, inputClassName !== null), _ref8)]),
     disabled: disabled,
     name: name,
     value: finalValue,
@@ -223,6 +237,22 @@ var ResourceItemField = function ResourceItemField(_ref) {
     theme: "primary",
     icon: "plus-lg",
     onClick: createOpen ? onCloseCreate : onOpenCreate
+  })) : null, createOpen ? /*#__PURE__*/React.createElement(Dialog, {
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      values: resourceValues,
+      id: "6viUpq",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Create "
+      }, {
+        "type": 1,
+        "value": "a_singular"
+      }]
+    }),
+    onClickClose: onCloseCreate
+  }, /*#__PURE__*/React.createElement(ResourceForm, {
+    resource: resource,
+    onSuccess: onCreateSuccess
   })) : null));
 };
 ResourceItemField.propTypes = propTypes;

package/lib/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
@@ -18,9 +19,13 @@ var utils = require('@panneau/core/utils');
 var data = require('@panneau/data');
 var Button = require('@panneau/element-button');
 var Select = require('@panneau/element-select');
+var ResourceForm = require('@panneau/form-resource');
+var intl = require('@panneau/intl');
+var Dialog = require('@panneau/modal-dialog');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
@@ -32,8 +37,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
-
-// import Dialog from '@panneau/modal-dialog';
+var ResourceForm__default = /*#__PURE__*/_interopDefaultLegacy(ResourceForm);
+var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
 
 var propTypes = {
   name: PropTypes__default["default"].string,
@@ -91,7 +96,7 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref7;
+  var _ref8;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
@@ -113,7 +118,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
     className = _ref.className,
     inputClassName = _ref.inputClassName,
     onChange = _ref.onChange;
-  var intl = reactIntl.useIntl();
+  var intl$1 = reactIntl.useIntl();
   // const [initialValue] = useState(value);
   var _useState = React.useState(initialQuery),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -143,9 +148,9 @@ var ResourceItemField = function ResourceItemField(_ref) {
     _useState12 = _slicedToArray__default["default"](_useState11, 2),
     inputTextValue = _useState12[0],
     setInputTextValue = _useState12[1];
-  var completeResource = contexts.usePanneauResource(resourceId);
-  console.log(resourceId, completeResource);
-  var resource = React.useMemo(function () {
+  var resource = contexts.usePanneauResource(resourceId);
+  var resourceValues = intl.useResourceValues(resource);
+  var queryResource = React.useMemo(function () {
     return {
       id: resourceId
     };
@@ -153,10 +158,17 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var finalQuery = React.useMemo(function () {
     return _objectSpread__default["default"](_objectSpread__default["default"]({}, query), !isEmpty__default["default"](inputTextValue) ? _defineProperty__default["default"]({}, searchParamName, inputTextValue) : null);
   }, [inputTextValue]);
-  var resourceItems = data.useResourceItems(resource, finalQuery, page, count, resourceOptions);
+  var resourceItems = data.useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
   var _ref3 = resourceItems || {},
     _ref3$items = _ref3.items,
-    items = _ref3$items === void 0 ? null : _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 getItemLabel = React.useCallback(function (it, path) {
     var id = get__default["default"](it, 'id', null);
     if (itemLabelWithId) {
@@ -186,16 +198,16 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var onValueChange = React.useCallback(function (newId) {
     if (onChange === null) return;
     if (multiple) {
-      var newValue = items.filter(function (_ref4) {
-        var _ref4$id = _ref4.id,
-          id = _ref4$id === void 0 ? null : _ref4$id;
+      var newValue = items.filter(function (_ref5) {
+        var _ref5$id = _ref5.id,
+          id = _ref5$id === void 0 ? null : _ref5$id;
         return newId.indexOf(id) !== -1;
       }) || [];
       onChange(newValue);
     } else {
-      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 id === newId;
       }) || [];
       if (_newValue !== null && _newValue.length > 0) {
@@ -211,6 +223,11 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var onCloseCreate = React.useCallback(function () {
     setCreateOpen(false);
   }, [setCreateOpen]);
+  var onCreateSuccess = React.useCallback(function (newValue) {
+    onChange(newValue);
+    setCreateOpen(false);
+    setInputTextValue('');
+  }, [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", {
@@ -218,14 +235,14 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, /*#__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', (_ref7 = {}, _defineProperty__default["default"](_ref7, disabled, disabled), _defineProperty__default["default"](_ref7, 'is-invalid', errors !== null), _defineProperty__default["default"](_ref7, inputClassName, inputClassName !== null), _ref7)]),
+    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)]),
     disabled: disabled,
     name: name,
     value: finalValue,
     options: options,
     isClearable: true,
     isSearchable: true,
-    placeholder: utils.isMessage(placeholder) ? intl.formatMessage(placeholder) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    placeholder: utils.isMessage(placeholder) ? intl$1.formatMessage(placeholder) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       id: "oc3YLT",
       defaultMessage: [{
         "type": 0,
@@ -241,6 +258,22 @@ var ResourceItemField = function ResourceItemField(_ref) {
     theme: "primary",
     icon: "plus-lg",
     onClick: createOpen ? onCloseCreate : onOpenCreate
+  })) : null, createOpen ? /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
+    title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      values: resourceValues,
+      id: "6viUpq",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Create "
+      }, {
+        "type": 1,
+        "value": "a_singular"
+      }]
+    }),
+    onClickClose: onCloseCreate
+  }, /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
+    resource: resource,
+    onSuccess: onCreateSuccess
   })) : null));
 };
 ResourceItemField.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-resource-item",
-    "version": "2.0.58",
+    "version": "2.0.65",
     "description": "An item mapping a resource",
     "keywords": [
         "javascript"
@@ -47,8 +47,11 @@
         "@babel/runtime": "^7.12.5",
         "@panneau/core": "^2.0.58",
         "@panneau/data": "^2.0.58",
-        "@panneau/element-button": "^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.65",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -57,5 +60,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "73bfb739e4c3845e5a1bc031652cffc2cf80426c"
+    "gitHead": "296e9ef82abdc2af9ffd2910a65e2630a630bfd4"
 }