@bigbinary/neeto-fields-frontend 1.1.1 → 1.1.3

package/README.md

@@ -163,15 +163,19 @@ default, but you can customize its behavior by passing optional props.
    shown in the dashboard table. This prop is expected when `showOwnersInMenu`
    is set to `true`.
 5. `allowedKinds`:Specifies the list of field kinds allowed to be created.
-6. `paneProps`: Props to be passed to the Add/Edit pane. It accepts `children`
-   to be rendered inside the pane and `validations` for the formik input fields
-   in the `children`. `validations` must be provided as a map with the field
-   name as key and the corresponding yup validation schema as the value.
-   `initialValues` must also be provided as a map with the field name as key and
-   the corresponding value. Prop `hideRequiredSwitch` set to `true` hides the
-   toggle switch for `isRequried`. Also `onMutationSuccess`,a callback function
-   which is triggered on the success of mutation functions( create, update &
-   delete).
+6. `paneProps`: Props to be passed to the Add/Edit pane. It accepts the
+   following.
+   - `children`: The children components to be rendered inside the pane.
+   - `validations`: The validations for the formik input fields in the
+     `children`. `validations` must be provided as an object with the field name
+     as key and the corresponding yup validation schema as the value.
+   - `initialValues`: The initial values for the formik input fields in the
+     `children`. It is provided as an object with the field name as key and the
+     corresponding value.
+   - `hideRequiredSwitch`: A boolean value when set to `true` hides the toggle
+     switch for `isRequried`.
+   - `onMutationSuccess`: Callback function which is triggered on the success of
+     mutation functions (create, update & delete).
 7. `showStateFilter`: Boolean value which specifies whether to show or hide
    state filters.
 8. `fieldStatesTaxonomy`: Specifies the names to be rendered for `active` and
@@ -546,7 +550,9 @@ This is a React Query hook for creating a field.
 
 ```jsx
 const { mutate: create } = useCreateField();
-const payload = { field: { name, kind, resourceType, ownerId, data } };
+const payload = {
+  field: { name, kind, resourceType, ownerId, displayOrder, data },
+};
 create(payload);
 ```
 
@@ -558,7 +564,9 @@ This is a React Query hook for updating a field.
 
 ```jsx
 const { mutate: update } = useUpdateField();
-const payload = { field: { name, kind, resourceType, ownerId, data } };
+const payload = {
+  field: { name, kind, resourceType, ownerId, displayOrder, data },
+};
 update({ fieldId, payload });
 ```
 

package/dist/index.cjs.js

@@ -5286,8 +5286,8 @@ var titles = {
 	addField: "Add new field",
 	editField: "Edit field",
 	deleteField: "Delete field ?",
-	name: "Name",
-	kind: "Kind",
+	fieldName: "Field name",
+	fieldKind: "Field type",
 	required: "Required",
 	dropdownOptions: "Dropdown options",
 	regexOptions: "Regex options",
@@ -5299,7 +5299,7 @@ var labels = {
 	edit: "Edit",
 	"delete": "Delete",
 	fieldName: "Field name",
-	fieldKind: "Field kind",
+	fieldKind: "Field type",
 	createField: "Create field",
 	updateField: "Update field",
 	addMoreOption: "Add more option",
@@ -5316,7 +5316,8 @@ var placeholders = {
 	enterFieldName: "Enter field name",
 	enterAnOption: "Enter an option",
 	regexExample: "Example: /^[0-9]{5}$/",
-	enterErrorMessage: "Message to show on error"
+	enterErrorMessage: "Message to show on error",
+	searchFields: "Search fields"
 };
 var fields = {
 	kinds: {
@@ -5982,7 +5983,7 @@ var validateField = /*#__PURE__*/function () {
         case 7:
           _context.prev = 7;
           _context.t0 = _context["catch"](1);
-          return _context.abrupt("return", _context.t0.errors);
+          return _context.abrupt("return", _context.t0.errors[0]);
         case 10:
         case "end":
           return _context.stop();
@@ -6061,7 +6062,7 @@ var useFormikFields = function useFormikFields(_ref) {
     handleSubmit: handleSubmit,
     fieldProps: _objectSpread$a(_objectSpread$a({}, formikFieldProps), {}, {
       required: props[isRequiredColumnName],
-      error: meta.touched && meta.error,
+      error: individualSubmit ? meta.error : meta.touched && meta.error,
       options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
       value: getValueForField(formikFieldProps.value),
       dirty: dirty,
@@ -6366,12 +6367,14 @@ var fieldUrl = function fieldUrl(fieldId) {
 var fetch$1 = function fetch(_ref) {
   var resourceType = _ref.resourceType,
     ownerId = _ref.ownerId,
-    state = _ref.state;
+    state = _ref.state,
+    searchTerm = _ref.searchTerm;
   return axios__default["default"].get(FIELDS_URL, {
     params: {
       resourceType: resourceType,
       ownerId: ownerId,
-      state: state
+      state: state,
+      searchTerm: searchTerm
     }
   });
 };
@@ -6428,12 +6431,14 @@ var useFetchFields = function useFetchFields(_ref, options) {
     ownerId = _ref.ownerId,
     state = _ref.state,
     _ref$prefixQueryKeys = _ref.prefixQueryKeys,
-    prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys;
-  return reactQuery.useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state]), function () {
+    prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys,
+    searchTerm = _ref.searchTerm;
+  return reactQuery.useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state, searchTerm]), function () {
     return fieldsApi.fetch({
       resourceType: resourceType,
       ownerId: ownerId,
-      state: state
+      state: state,
+      searchTerm: searchTerm
     });
   }, _objectSpread$7({
     staleTime: DEFAULT_STALE_TIME
@@ -6674,7 +6679,7 @@ var DEFAULT_OPTION = {
 };
 var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
 var DEFAULT_REGEX_DATA = {
-  regex: "",
+  condition: "",
   helpMessage: ""
 };
 var BASIC_FIELD_FORM_VALIDATIONS = {
@@ -6899,7 +6904,8 @@ var Edit = function Edit(_ref) {
     _useShowField$data = _useShowField.data,
     _useShowField$data2 = _useShowField$data === void 0 ? {} : _useShowField$data,
     _useShowField$data2$f = _useShowField$data2.field,
-    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f;
+    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f,
+    isLoading = _useShowField.isLoading;
   var _useUpdateField = useUpdateField({
       onSuccess: function onSuccess() {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -6923,7 +6929,7 @@ var Edit = function Edit(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2"
-  }, t("titles.editField"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+  }, t("titles.editField"))), isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
       initialValues: _objectSpread$4(_objectSpread$4({}, initialValues), ramda.assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
@@ -6974,7 +6980,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
   return [{
     key: "name",
     dataIndex: "name",
-    title: t$1("titles.name"),
+    title: t$1("titles.fieldName"),
     render: function render(name, field) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -7000,7 +7006,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
   }, {
     key: "kind",
     dataIndex: "kind",
-    title: t$1("titles.kind"),
+    title: t$1("titles.fieldKind"),
     render: function render(kind) {
       return DISPLAY_KINDS[kind];
     }
@@ -7120,7 +7126,9 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
-    showOwnersInMenu = _ref.showOwnersInMenu;
+    showOwnersInMenu = _ref.showOwnersInMenu,
+    fieldStatesTaxonomy = _ref.fieldStatesTaxonomy,
+    nameAliases = _ref.nameAliases;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPaneOpen = _useState2[0],
@@ -7141,11 +7149,18 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     selectedField = _useState10[0],
     setSelectedField = _useState10[1];
+  var _useState11 = React.useState(""),
+    _useState12 = _slicedToArray(_useState11, 2),
+    searchTerm = _useState12[0],
+    setSearchTerm = _useState12[1];
   var _getQueryParams = utils.getQueryParams(),
     resource = _getQueryParams.resource,
     state = _getQueryParams.state;
   var ownerId = showOwnersInMenu ? resource : undefined;
+  var debouncedSearchTerm = reactUtils.useDebounce(searchTerm.trim());
   var history = reactRouterDom.useHistory();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFetchConfigs = useFetchConfigs(),
     _useFetchConfigs$data = _useFetchConfigs.data,
     _useFetchConfigs$data2 = _useFetchConfigs$data === void 0 ? {} : _useFetchConfigs$data,
@@ -7157,10 +7172,12 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var fieldParams = {
     resourceType: !showOwnersInMenu ? resource : undefined,
     ownerId: ownerId,
-    state: state || FIELD_STATES.active
+    state: state || FIELD_STATES.active,
+    searchTerm: debouncedSearchTerm
   };
   var _useFetchFields = useFetchFields(fieldParams, {
-      enabled: !!resource
+      enabled: !!resource,
+      keepPreviousData: true
     }),
     _useFetchFields$data = _useFetchFields.data,
     _useFetchFields$data2 = _useFetchFields$data === void 0 ? {} : _useFetchFields$data,
@@ -7171,6 +7188,16 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
     isFieldsLoading = _useFetchFields.isLoading,
     isFieldsFetching = _useFetchFields.isFetching;
+  var _useFetchFields2 = useFetchFields(_objectSpread$2(_objectSpread$2({}, fieldParams), {}, {
+      state: FIELD_STATES.active,
+      searchTerm: ""
+    }), {
+      enabled: !!resource
+    }),
+    _useFetchFields2$data = _useFetchFields2.data,
+    _useFetchFields2$data2 = _useFetchFields2$data === void 0 ? {} : _useFetchFields2$data,
+    _useFetchFields2$data3 = _useFetchFields2$data2.fields,
+    allFields = _useFetchFields2$data3 === void 0 ? [] : _useFetchFields2$data3;
   var _useDestroyField = useDestroyField({
       onSuccess: function onSuccess() {
         setIsDeleteAlertOpen(false);
@@ -7238,6 +7265,31 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var menuItems = showOwnersInMenu ? owners : resourceTypes;
   var isScreenLoading = isFieldsLoading || isConfigsLoading;
   var showCountSubheader = count > 0;
+  var searchProps = {
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    value: searchTerm,
+    placeholder: t("placeholders.searchFields")
+  };
+  var menuBarFilters = React.useMemo(function () {
+    return renderMenuBarFilters({
+      selectedState: state,
+      fieldStatesTaxonomy: fieldStatesTaxonomy,
+      activeFieldsCount: activeFieldsCount,
+      inactiveFieldsCount: inactiveFieldsCount,
+      handleBlockClick: handleBlockClick
+    });
+  }, [activeFieldsCount, inactiveFieldsCount, state]);
+  var menuBarItems = React.useMemo(function () {
+    return renderMenuBarItems({
+      isOwnerBased: showOwnersInMenu,
+      items: menuItems,
+      selectedMenu: resource,
+      handleBlockClick: handleBlockClick,
+      nameAliases: nameAliases
+    });
+  }, [menuItems, resource]);
   React.useEffect(function () {
     handleURLWithDefaultValues();
   }, [isConfigsLoading]);
@@ -7252,8 +7304,6 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     fields: fields,
     owners: owners,
     count: count,
-    activeFieldsCount: activeFieldsCount,
-    inactiveFieldsCount: inactiveFieldsCount,
     menuItems: menuItems,
     columnData: columnData,
     selectedField: selectedField,
@@ -7270,7 +7320,10 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     handleAlertClose: handleAlertClose,
     handleClosePane: handleClosePane,
     handleReorderPaneClose: handleReorderPaneClose,
-    handleBlockClick: handleBlockClick
+    searchProps: searchProps,
+    menuBarFilters: menuBarFilters,
+    menuBarItems: menuBarItems,
+    allFields: allFields
   };
 };
 
@@ -11686,7 +11739,9 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     t = _useTranslation.t;
   var _useFieldsDashboard = useFieldsDashboard({
       buildColumnData: buildColumnData,
-      showOwnersInMenu: showOwnersInMenu
+      showOwnersInMenu: showOwnersInMenu,
+      fieldStatesTaxonomy: fieldStatesTaxonomy,
+      nameAliases: nameAliases
     }),
     isPaneOpen = _useFieldsDashboard.isPaneOpen,
     setIsPaneOpen = _useFieldsDashboard.setIsPaneOpen,
@@ -11698,8 +11753,6 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     fields = _useFieldsDashboard.fields,
     owners = _useFieldsDashboard.owners,
     count = _useFieldsDashboard.count,
-    activeFieldsCount = _useFieldsDashboard.activeFieldsCount,
-    inactiveFieldsCount = _useFieldsDashboard.inactiveFieldsCount,
     menuItems = _useFieldsDashboard.menuItems,
     columnData = _useFieldsDashboard.columnData,
     selectedField = _useFieldsDashboard.selectedField,
@@ -11715,26 +11768,17 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     handleAlertClose = _useFieldsDashboard.handleAlertClose,
     handleClosePane = _useFieldsDashboard.handleClosePane,
     handleReorderPaneClose = _useFieldsDashboard.handleReorderPaneClose,
-    handleBlockClick = _useFieldsDashboard.handleBlockClick;
+    searchProps = _useFieldsDashboard.searchProps,
+    menuBarFilters = _useFieldsDashboard.menuBarFilters,
+    menuBarItems = _useFieldsDashboard.menuBarItems,
+    allFields = _useFieldsDashboard.allFields;
   var isMenuBarNeeded = showStateFilter || menuItems.length > 1;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMenuBarNeeded && /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
     showMenu: isMenuBarOpen,
     title: t("titles.field", PLURAL)
   }, isConfigsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : renderMenuBarItems({
-    isOwnerBased: showOwnersInMenu,
-    items: menuItems,
-    selectedMenu: selectedMenu,
-    handleBlockClick: handleBlockClick,
-    nameAliases: nameAliases
-  }), showStateFilter && renderMenuBarFilters({
-    selectedState: selectedState,
-    fieldStatesTaxonomy: fieldStatesTaxonomy,
-    activeFieldsCount: activeFieldsCount,
-    inactiveFieldsCount: inactiveFieldsCount,
-    handleBlockClick: handleBlockClick
-  })), isScreenLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : menuBarItems, showStateFilter && menuBarFilters), isScreenLoading && ramda.isEmpty(fields) ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex w-full flex-grow items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null)) : /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], _extends({
     breadcrumbs: breadcrumbs
@@ -11746,10 +11790,10 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     actionBlock: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       label: t("labels.reorder"),
       style: "secondary",
-      disabled: !pure.existsBy({
+      disabled: selectedState === FIELD_STATES.inactive || !pure.existsBy({
         isSystem: false,
         state: "active"
-      }, fields),
+      }, allFields),
       onClick: function onClick() {
         return setIsReorderPaneOpen(true);
       }
@@ -11758,19 +11802,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
       onClick: function onClick() {
         return setIsPaneOpen(true);
       }
-    }), /*#__PURE__*/React__default["default"].createElement(FieldsPane, {
-      additionalValidations: paneProps === null || paneProps === void 0 ? void 0 : paneProps.validations,
-      allowedKinds: allowedKinds,
-      hideRequiredSwitch: paneProps === null || paneProps === void 0 ? void 0 : paneProps.hideRequiredSwitch,
-      initialValues: paneProps === null || paneProps === void 0 ? void 0 : paneProps.initialValues,
-      isOpen: isPaneOpen,
-      ownerId: showOwnersInMenu ? selectedMenu : "",
-      resourceType: showOwnersInMenu ? resourceType : selectedMenu //Currently we support only one resource type when fields are classified based on owners
-      ,
-      selectedField: selectedField,
-      onClose: handleClosePane,
-      onMutationSuccess: paneProps === null || paneProps === void 0 ? void 0 : paneProps.onMutationSuccess
-    }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)),
+    })),
+    searchProps: searchProps,
     title: pure.humanize(getDashBoardTitle({
       isOwnerBased: showOwnersInMenu,
       owners: owners,
@@ -11781,7 +11814,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "mr-4 font-semibold",
       style: "h4"
-    }, "".concat(count, " "), t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
+    }, count, " ", selectedState, " ", t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
   }), /*#__PURE__*/React__default["default"].createElement(FieldsTable, {
     columnData: columnData,
     helpDocUrl: helpDocUrl,
@@ -11789,11 +11822,23 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     rowData: ramda.isEmpty(rowData) ? fields : rowData,
     setIsPaneOpen: setIsPaneOpen,
     totalCount: count
-  })), /*#__PURE__*/React__default["default"].createElement(ReorderPane, {
-    allFields: fields,
+  }), /*#__PURE__*/React__default["default"].createElement(FieldsPane, {
+    additionalValidations: paneProps === null || paneProps === void 0 ? void 0 : paneProps.validations,
+    allowedKinds: allowedKinds,
+    hideRequiredSwitch: paneProps === null || paneProps === void 0 ? void 0 : paneProps.hideRequiredSwitch,
+    initialValues: paneProps === null || paneProps === void 0 ? void 0 : paneProps.initialValues,
+    isOpen: isPaneOpen,
+    ownerId: showOwnersInMenu ? selectedMenu : "",
+    resourceType: showOwnersInMenu ? resourceType : selectedMenu //Currently we support only one resource type when fields are classified based on owners
+    ,
+    selectedField: selectedField,
+    onClose: handleClosePane,
+    onMutationSuccess: paneProps === null || paneProps === void 0 ? void 0 : paneProps.onMutationSuccess
+  }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)), /*#__PURE__*/React__default["default"].createElement(ReorderPane, {
     isOpen: isReorderPaneOpen,
     ownerId: showOwnersInMenu ? selectedMenu : "",
-    onClose: handleReorderPaneClose
+    onClose: handleReorderPaneClose,
+    allFields: allFields
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: isDeleteAlertOpen,
     isSubmitting: isDeleting,
@@ -11881,6 +11926,7 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
   return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+    scrollToErrorField: true,
     className: classnames__default["default"]("flex w-full", className),
     formikProps: {
       initialValues: getInitialFieldValue(field, fieldValues),