@bigbinary/neeto-approvals-frontend 0.2.15 → 0.3.0

package/dist/index.js

@@ -6,7 +6,7 @@ import i18next, { t as t$1 } from 'i18next';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
 import { Button, Tag, Pane, Typography, Label, Textarea, Table as Table$1, NoData, Alert, Tab as Tab$1, Select, Callout } from '@bigbinary/neetoui';
 import { isEmpty, keys } from 'ramda';
-import { capitalize, isPresent, findBy, camelToSnakeCase, removeBy, noop, isNotEmpty, findById } from '@bigbinary/neeto-cist';
+import { capitalize, isPresent, findBy, camelToSnakeCase, removeBy, noop } from '@bigbinary/neeto-cist';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import { useTranslation, Trans } from 'react-i18next';
 import { useQuery, useQueryClient } from 'react-query';
@@ -428,7 +428,7 @@ var getApprovalFilter = function getApprovalFilter() {
 
 var MemoizedEditorContent$1 = /*#__PURE__*/React.memo(EditorContent);
 var RequestDetailsPane = function RequestDetailsPane(_ref) {
-  var _window$globalProps, _window$globalProps2, _t;
+  var _window$globalProps, _window$globalProps2;
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     approvalDetails = _ref.approvalDetails,
@@ -521,7 +521,7 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
     label: t("neetoApprovals.common.note"),
     value: note,
     placeholder: t("neetoApprovals.inputs.placeholders.add_", {
-      what: (_t = t("neetoApprovals.common.note")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
+      what: t("neetoApprovals.common.note")
     }),
     onChange: withEventTargetValue(setNote)
   }), !isPending && note && /*#__PURE__*/React.createElement("div", {
@@ -752,24 +752,28 @@ var fetch$2 = function fetch(params) {
     params: params
   });
 };
-var show$1 = function show(id) {
-  return axios.get("".concat(TEMPLATE_URL, "/").concat(id));
+var show$1 = function show(_ref) {
+  var id = _ref.id,
+    params = _ref.params;
+  return axios.get("".concat(TEMPLATE_URL, "/").concat(id), {
+    params: params
+  });
 };
-var create = function create(_ref) {
-  var _ref$url = _ref.url,
-    url = _ref$url === void 0 ? TEMPLATE_URL : _ref$url,
-    payload = _ref.payload;
+var create = function create(_ref2) {
+  var _ref2$url = _ref2.url,
+    url = _ref2$url === void 0 ? TEMPLATE_URL : _ref2$url,
+    payload = _ref2.payload;
   return axios.post(url, payload);
 };
-var update = function update(_ref2) {
-  var id = _ref2.id,
-    payload = _ref2.payload,
-    _ref2$url = _ref2.url,
-    url = _ref2$url === void 0 ? BASE_URL : _ref2$url;
+var update = function update(_ref3) {
+  var id = _ref3.id,
+    payload = _ref3.payload,
+    _ref3$url = _ref3.url,
+    url = _ref3$url === void 0 ? BASE_URL : _ref3$url;
   return axios.put("".concat(url, "/").concat(id), payload);
 };
-var destroy = function destroy(_ref3) {
-  var templateId = _ref3.templateId;
+var destroy = function destroy(_ref4) {
+  var templateId = _ref4.templateId;
   return axios["delete"]("".concat(TEMPLATE_URL, "/").concat(templateId));
 };
 var templatesApi = {
@@ -799,6 +803,18 @@ var useFetchTemplates = function useFetchTemplates() {
     }
   }, options));
 };
+var useFetchTemplate = function useFetchTemplate(_ref2) {
+  var id = _ref2.id,
+    params = _ref2.params;
+  return useQuery([QUERY_KEYS.SHOW_TEMPLATE, id, params], function () {
+    return templatesApi.show({
+      id: id,
+      params: params
+    });
+  }, {
+    enabled: !!id
+  });
+};
 var useCreateTemplate = function useCreateTemplate(options) {
   return useMutationWithInvalidation(templatesApi.create, _objectSpread$8({
     keysToInvalidate: [QUERY_KEYS.TEMPLATES, QUERY_KEYS.VIEWS]
@@ -841,8 +857,8 @@ var MessageEditor = withT(function (_ref) {
     _ref$initialValue = _ref.initialValue,
     initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue;
   return /*#__PURE__*/React.createElement(FormikEditor, {
-    required: true,
     initialValue: initialValue,
+    required: true,
     label: t("neetoApprovals.inputs.labels.message"),
     name: "message",
     rows: 3,
@@ -911,10 +927,10 @@ var Form$2 = function Form(_ref) {
     what: t("neetoApprovals.common.template", SINGULAR)
   });
   return /*#__PURE__*/React.createElement(Pane, {
-    initialFocusRef: inputReference,
-    size: "large",
     isOpen: isOpen,
-    onClose: onClose
+    onClose: onClose,
+    initialFocusRef: inputReference,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2"
   }, header)), /*#__PURE__*/React.createElement(Form$3, {
@@ -962,11 +978,11 @@ var Create = function Create(_ref) {
     });
   };
   return /*#__PURE__*/React.createElement(Form$2, {
-    placeholders: templatePlaceholders,
     isLoading: isLoading,
     isOpen: isOpen,
     onClose: onClose,
-    onSubmit: onSubmit
+    onSubmit: onSubmit,
+    placeholders: templatePlaceholders
   });
 };
 
@@ -1000,12 +1016,12 @@ var Edit = function Edit(_ref) {
     descriptionEnabled: !!template.description
   });
   return /*#__PURE__*/React.createElement(Form$2, {
-    isLoading: isUpdating,
-    placeholders: templatePlaceholders,
+    initialData: initialData,
     isOpen: isOpen,
     onClose: onClose,
     onSubmit: onSubmit,
-    initialData: initialData
+    isLoading: isUpdating,
+    placeholders: templatePlaceholders
   });
 };
 
@@ -1536,23 +1552,34 @@ var Form$1 = function Form(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
-    resetForm = _useFormikContext.resetForm,
     setFieldValue = _useFormikContext.setFieldValue;
   var inputRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     approverId = _useState2[0],
     setApproverId = _useState2[1];
-  var templateParams = {
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    templateId = _useState4[0],
+    setTemplateId = _useState4[1];
+  var params = {
     requestableId: requestableId,
     approverId: approverId,
     approvalRequestorId: (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.id
   };
-  var _useFetchTemplates = useFetchTemplates(templateParams),
+  var _useFetchTemplates = useFetchTemplates(),
     _useFetchTemplates$da = _useFetchTemplates.data,
     _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
+  var _useFetchTemplate = useFetchTemplate({
+      id: templateId,
+      params: params
+    }),
+    _useFetchTemplate$dat = _useFetchTemplate.data,
+    _useFetchTemplate$dat2 = _useFetchTemplate$dat === void 0 ? {} : _useFetchTemplate$dat,
+    _useFetchTemplate$dat3 = _useFetchTemplate$dat2.template,
+    template = _useFetchTemplate$dat3 === void 0 ? {} : _useFetchTemplate$dat3;
   var _useFetchApprovers = useFetchApprovers(),
     _useFetchApprovers$da = _useFetchApprovers.data,
     _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
@@ -1572,27 +1599,24 @@ var Form$1 = function Form(_ref) {
       value: template.id
     };
   });
-  var updateMessage = function updateMessage(template) {
+  var updateMessage = function updateMessage() {
     var _inputRef$current;
     var message = template.parsedMessage || template.message;
     setFieldValue("message", message);
     inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.editor) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.commands) === null || _inputRef$current === void 0 || _inputRef$current.setContent(message);
   };
   var handleTemplateChange = function handleTemplateChange(selectedTemplate) {
-    resetForm();
-    var template = findById(selectedTemplate.value, templates);
-    setSelectedTemplateData(template);
-    updateMessage(template);
+    setTemplateId(selectedTemplate.value);
   };
   var handleApproverChange = function handleApproverChange(approver) {
     setApproverId(approver.value);
     setFieldValue("approver", approver);
   };
   useEffect(function () {
-    if (!(isNotEmpty(templates) && isNotEmpty(selectedTemplateData))) return;
-    var template = findById(selectedTemplateData.id, templates);
-    updateMessage(template);
-  }, [templates]);
+    if (isEmpty(template)) return;
+    setSelectedTemplateData(template);
+    updateMessage();
+  }, [template]);
   return /*#__PURE__*/React.createElement("div", {
     className: "w-full space-y-6"
   }, /*#__PURE__*/React.createElement(Select, {