@bigbinary/neeto-team-members-frontend 4.2.5 → 4.3.0

package/dist/cjs/Groups.js

@@ -0,0 +1,812 @@
+'use strict';
+
+var slicedToArray = require('../slicedToArray-8e69d42b.js');
+var require$$0 = require('react');
+var neetoCist = require('@bigbinary/neeto-cist');
+var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var Container = require('@bigbinary/neeto-molecules/Container');
+var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
+var Button = require('@bigbinary/neetoui/Button');
+var reactI18next = require('react-i18next');
+var toConsumableArray = require('../toConsumableArray-e41a15ba.js');
+var reactQuery = require('@tanstack/react-query');
+var ramda = require('ramda');
+var axios = require('axios');
+var constants = require('../constants-2685e5d6.js');
+var Pane = require('@bigbinary/neetoui/Pane');
+var Typography = require('@bigbinary/neetoui/Typography');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var Form$1 = require('@bigbinary/neetoui/formik/Form');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var Select = require('@bigbinary/neetoui/formik/Select');
+var Textarea = require('@bigbinary/neetoui/formik/Textarea');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var jsxRuntime = require('react/jsx-runtime');
+var i18next = require('i18next');
+var yup = require('yup');
+var formik = require('formik');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var Avatar = require('@bigbinary/neetoui/Avatar');
+var Alert = require('@bigbinary/neetoui/Alert');
+var defineProperty = require('../defineProperty-9b13c73c.js');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
+var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var Table = require('@bigbinary/neetoui/Table');
+var NoData = require('@bigbinary/neetoui/NoData');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var utils$1 = require('./utils.js');
+require('../unsupportedIterableToArray-fa2816fd.js');
+require('@bigbinary/neeto-commons-frontend/constants');
+require('../_commonjsHelpers-b3309d7b.js');
+require('../utils-d5dc0b0b.js');
+require('../useTeamsApi-6254d23b.js');
+require('../objectWithoutProperties-2fed2d7d.js');
+require('util');
+require('../queryClient-febad37e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
+var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form$1);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var Avatar__default = /*#__PURE__*/_interopDefaultLegacy(Avatar);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
+var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
+var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
+var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
+
+var list$1 = function list(params) {
+  return axios__default["default"].get("".concat(constants.BASE_URL, "/api/v1/groups"), {
+    params: params
+  });
+};
+var show = function show(id) {
+  return axios__default["default"].get("".concat(constants.BASE_URL, "/api/v1/groups/").concat(id));
+};
+var create = function create(payload) {
+  return axios__default["default"].post("".concat(constants.BASE_URL, "/api/v1/groups"), payload);
+};
+var update = function update(id, payload) {
+  return axios__default["default"].patch("".concat(constants.BASE_URL, "/api/v1/groups/").concat(id), payload);
+};
+var destroy = function destroy(id) {
+  return axios__default["default"]["delete"]("".concat(constants.BASE_URL, "/api/v1/groups/").concat(id));
+};
+var groupsApi = {
+  create: create,
+  list: list$1,
+  update: update,
+  show: show,
+  destroy: destroy
+};
+
+var useFetchGroups = function useFetchGroups(_ref) {
+  var page = _ref.page,
+    pageSize = _ref.pageSize,
+    _ref$searchTerm = _ref.searchTerm,
+    searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm;
+  return reactQuery.useQuery({
+    queryKey: [constants.QUERY_KEYS.GROUPS, searchTerm, page, pageSize],
+    queryFn: function queryFn() {
+      return groupsApi.list({
+        searchTerm: searchTerm,
+        page: page,
+        pageSize: pageSize,
+        loadDetails: true
+      });
+    }
+  });
+};
+var useCreateGroup = function useCreateGroup() {
+  var _config$form$otherKey, _config$form;
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return reactUtils.useMutationWithInvalidation(function (payload) {
+    return groupsApi.create(payload);
+  }, {
+    keysToInvalidate: [[constants.QUERY_KEYS.GROUPS]].concat(toConsumableArray._toConsumableArray((_config$form$otherKey = config === null || config === void 0 || (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.otherKeysToInvalidate) !== null && _config$form$otherKey !== void 0 ? _config$form$otherKey : []))
+  });
+};
+var useDeleteGroup = function useDeleteGroup() {
+  var _config$form$otherKey2, _config$form2;
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return reactUtils.useMutationWithInvalidation(function (id) {
+    return groupsApi.destroy(id);
+  }, {
+    keysToInvalidate: [[constants.QUERY_KEYS.GROUPS]].concat(toConsumableArray._toConsumableArray((_config$form$otherKey2 = config === null || config === void 0 || (_config$form2 = config.form) === null || _config$form2 === void 0 ? void 0 : _config$form2.otherKeysToInvalidate) !== null && _config$form$otherKey2 !== void 0 ? _config$form$otherKey2 : []))
+  });
+};
+var useFetchGroup = function useFetchGroup(id) {
+  return reactQuery.useQuery({
+    queryKey: [constants.QUERY_KEYS.GROUPS, id],
+    queryFn: function queryFn() {
+      return groupsApi.show(id);
+    },
+    select: ramda.prop("group"),
+    enabled: !!id
+  });
+};
+var useUpdateGroup = function useUpdateGroup() {
+  var _config$form$otherKey3, _config$form3;
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return reactUtils.useMutationWithInvalidation(function (_ref2) {
+    var id = _ref2.id,
+      payload = _ref2.payload;
+    return groupsApi.update(id, payload);
+  }, {
+    keysToInvalidate: [[constants.QUERY_KEYS.GROUPS]].concat(toConsumableArray._toConsumableArray((_config$form$otherKey3 = config === null || config === void 0 || (_config$form3 = config.form) === null || _config$form3 === void 0 ? void 0 : _config$form3.otherKeysToInvalidate) !== null && _config$form$otherKey3 !== void 0 ? _config$form$otherKey3 : []))
+  });
+};
+
+var PaneSpinner = function PaneSpinner() {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex h-full w-full items-center justify-center",
+    children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+  });
+};
+
+var list = function list() {
+  return axios__default["default"].get("".concat(constants.BASE_URL, "/api/v1/users"));
+};
+var usersApi = {
+  list: list
+};
+
+var useFetchUsers = function useFetchUsers() {
+  return reactQuery.useQuery({
+    queryKey: [constants.QUERY_KEYS.USERS],
+    queryFn: usersApi.list
+  });
+};
+
+var MAXIMUM_NAME_LENGTH = 25;
+var GROUP_FORM_VALIDATION_SCHEMA = yup__namespace.object({
+  name: yup__namespace.string().required(i18next.t("neetoTeamMembers.validations.required", {
+    what: i18next.t("neetoTeamMembers.common.name")
+  })).trim(i18next.t("neetoTeamMembers.validations.noWhiteSpaces", {
+    what: i18next.t("neetoTeamMembers.common.name")
+  })).max(MAXIMUM_NAME_LENGTH, i18next.t("neetoTeamMembers.validations.max", {
+    size: MAXIMUM_NAME_LENGTH
+  }))
+});
+var GROUP_FORM_INITIAL_VALUES = {
+  name: "",
+  description: "",
+  members: []
+};
+var DEFAULT_DELETE_GROUP_DATA = {
+  isDeleting: false,
+  group: {}
+};
+var DEFAULT_EDIT_GROUP = {
+  isVisible: false,
+  groupId: ""
+};
+var EVENTS = {
+  GROUP_CREATED: "group_created"
+};
+
+var Member = function Member(_ref) {
+  var member = _ref.member;
+  var _useState = require$$0.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isDeleteAlertOpen = _useState2[0],
+    setIsDeleteAlertOpen = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-ui-neeto-ui-rounded-lg neeto-desk-team-settings__member-list flex items-center justify-between p-2",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Avatar__default["default"], {
+          className: "flex-shrink-0",
+          size: "medium",
+          user: {
+            name: member === null || member === void 0 ? void 0 : member.name
+          }
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "ml-2 w-auto",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            className: "mb-1 capitalize",
+            style: "h5",
+            weight: "medium",
+            children: member === null || member === void 0 ? void 0 : member.name
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            style: "body3",
+            weight: "normal",
+            children: initializers.taxonomies.groupMember.singular
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
+        dropdownProps: {
+          strategy: "fixed",
+          position: "bottom-end"
+        },
+        menuItems: [{
+          key: "delete-menu",
+          "data-cy": "member-remove-button",
+          "data-test-id": "member-remove-button",
+          label: t("neetoTeamMembers.common.remove"),
+          onClick: function onClick() {
+            return setIsDeleteAlertOpen(true);
+          }
+        }]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
+      isOpen: isDeleteAlertOpen,
+      submitButtonLabel: t("neetoTeamMembers.common.remove"),
+      message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoTeamMembers.alerts.messages.removeMember",
+        values: {
+          member: member === null || member === void 0 ? void 0 : member.name
+        }
+      }),
+      title: t("neetoTeamMembers.labels.removeMember", {
+        member: member === null || member === void 0 ? void 0 : member.name
+      }),
+      onClose: function onClose() {
+        return setIsDeleteAlertOpen(false);
+      },
+      onSubmit: function onSubmit() {
+        setFieldValue("members", neetoCist.removeBy({
+          id: member.id
+        }, values.members));
+        setIsDeleteAlertOpen(false);
+      }
+    })]
+  });
+};
+
+var Members = function Members(_ref) {
+  var members = _ref.members,
+    membersSelectbox = _ref.membersSelectbox;
+  var _useState = require$$0.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isAddNewMemberDropdownVisible = _useState2[0],
+    setIsAddNewMemberDropdownVisible = _useState2[1];
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values;
+  var selectedMembers = members === null || members === void 0 ? void 0 : members.filter(function (member) {
+    var _nullSafe;
+    return (_nullSafe = neetoCist.nullSafe(ramda.pluck)("value", values === null || values === void 0 ? void 0 : values.members)) === null || _nullSafe === void 0 ? void 0 : _nullSafe.includes(member.value);
+  });
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "w-full space-y-4",
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Typography__default["default"], {
+      style: "h4",
+      weight: "semibold",
+      children: [initializers.taxonomies.groupMember.plural, " (", members ? members.length : 0, ")"]
+    }), isAddNewMemberDropdownVisible ? membersSelectbox : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      "data-cy": "new-member-button",
+      "data-test-id": "new-member-button",
+      iconPosition: "left",
+      style: "secondary",
+      label: t("neetoTeamMembers.common.addNew_", {
+        what: initializers.taxonomies.groupMember.singular
+      }),
+      onClick: function onClick() {
+        return setIsAddNewMemberDropdownVisible(true);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-full space-y-1",
+      children: selectedMembers === null || selectedMembers === void 0 ? void 0 : selectedMembers.map(function (member) {
+        return /*#__PURE__*/require$$0.createElement(Member, {
+          member: member,
+          key: member.id
+        });
+      })
+    })]
+  });
+};
+
+var Form = function Form(_ref) {
+  var _config$form$initialV, _config$form, _config$form2, _config$pane;
+  var _ref$group = _ref.group,
+    group = _ref$group === void 0 ? {} : _ref$group,
+    _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {} : _ref$config,
+    _ref$isEdit = _ref.isEdit,
+    isEdit = _ref$isEdit === void 0 ? false : _ref$isEdit,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? neetoCist.noop : _ref$onClose;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchUsers = useFetchUsers(),
+    _useFetchUsers$data = _useFetchUsers.data,
+    _useFetchUsers$data2 = _useFetchUsers$data === void 0 ? {} : _useFetchUsers$data,
+    users = _useFetchUsers$data2.users,
+    isLoading = _useFetchUsers.isLoading;
+  var _useCreateGroup = useCreateGroup(config),
+    create = _useCreateGroup.mutate,
+    isCreating = _useCreateGroup.isPending;
+  var _useUpdateGroup = useUpdateGroup(config),
+    update = _useUpdateGroup.mutate,
+    isUpdating = _useUpdateGroup.isPending;
+  var initialValues = isEdit ? group : ramda.mergeLeft(GROUP_FORM_INITIAL_VALUES, (_config$form$initialV = config === null || config === void 0 || (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.initialValues) !== null && _config$form$initialV !== void 0 ? _config$form$initialV : {});
+  var validationSchema = GROUP_FORM_VALIDATION_SCHEMA.concat(config === null || config === void 0 || (_config$form2 = config.form) === null || _config$form2 === void 0 ? void 0 : _config$form2.validationSchema);
+  var getUserIds = function getUserIds(members) {
+    return members ? ramda.pluck("id", members) : [];
+  };
+  var handleSubmit = function handleSubmit(values) {
+    var _config$form3, _config$form3$otherPa;
+    var payload = {
+      group: ramda.mergeLeft({
+        name: values.name,
+        description: values.description,
+        userIds: getUserIds(values.members)
+      }, config === null || config === void 0 || (_config$form3 = config.form) === null || _config$form3 === void 0 || (_config$form3$otherPa = _config$form3.otherPayloadData) === null || _config$form3$otherPa === void 0 ? void 0 : _config$form3$otherPa.call(_config$form3, values))
+    };
+    if (isEdit) {
+      update({
+        id: group.id,
+        payload: payload
+      }, {
+        onSuccess: function onSuccess() {
+          return onClose();
+        }
+      });
+    } else {
+      create(payload, {
+        onSuccess: function onSuccess() {
+          utils.captureAnalyticsEvent(EVENTS.GROUP_CREATED);
+          onClose();
+        }
+      });
+    }
+  };
+  if (isLoading || config !== null && config !== void 0 && (_config$pane = config.pane) !== null && _config$pane !== void 0 && _config$pane.isLoading) return /*#__PURE__*/jsxRuntime.jsx(PaneSpinner, {});
+  return /*#__PURE__*/jsxRuntime.jsx(Form__default["default"], {
+    formProps: {
+      noValidate: true,
+      className: "flex w-full flex-col gap-y-4 pb-6"
+    },
+    formikProps: {
+      enableReinitialize: true,
+      initialValues: initialValues,
+      validationSchema: validationSchema,
+      onSubmit: handleSubmit
+    },
+    children: function children(_ref2) {
+      var _config$form4, _config$form4$otherEl, _config$form5, _config$form5$otherEl;
+      var values = _ref2.values;
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+          required: true,
+          "data-cy": "group-name-text-field",
+          label: t("neetoTeamMembers.common.name"),
+          name: "name"
+        }), /*#__PURE__*/jsxRuntime.jsx(Textarea__default["default"], {
+          "data-cy": "group-description-text-area",
+          label: t("neetoTeamMembers.common.description"),
+          name: "description",
+          rows: 4,
+          size: "medium"
+        }), config === null || config === void 0 || (_config$form4 = config.form) === null || _config$form4 === void 0 || (_config$form4$otherEl = _config$form4.otherElements) === null || _config$form4$otherEl === void 0 ? void 0 : _config$form4$otherEl.call(_config$form4, values), isEdit ? /*#__PURE__*/jsxRuntime.jsx(Members, {
+          members: values.members,
+          membersSelectbox: /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
+            isMulti: true,
+            closeMenuOnSelect: false,
+            getOptionLabel: ramda.prop("name"),
+            getOptionValue: ramda.prop("id"),
+            id: "members-autocomplete",
+            label: initializers.taxonomies.groupMember.plural,
+            name: "members",
+            options: users,
+            placeholder: initializers.taxonomies.groupMember.plural
+          })
+        }) : /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
+          isMulti: true,
+          closeMenuOnSelect: false,
+          getOptionLabel: ramda.prop("name"),
+          getOptionValue: ramda.prop("id"),
+          id: "members-autocomplete",
+          label: initializers.taxonomies.groupMember.plural,
+          name: "members",
+          options: users,
+          placeholder: initializers.taxonomies.groupMember.plural
+        }), config === null || config === void 0 || (_config$form5 = config.form) === null || _config$form5 === void 0 || (_config$form5$otherEl = _config$form5.otherElementsAtLast) === null || _config$form5$otherEl === void 0 ? void 0 : _config$form5$otherEl.call(_config$form5, values), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
+          className: "absolute bottom-0 left-0",
+          children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+            cancelButtonProps: {
+              onClick: onClose
+            },
+            isSubmitting: isCreating || isUpdating
+          })
+        })]
+      });
+    }
+  });
+};
+
+var Create = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    config = _ref.config,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        weight: "semibold",
+        children: t("neetoTeamMembers.common.addNew_", {
+          what: initializers.taxonomies.group.singular
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Form, {
+        config: config,
+        onClose: onClose
+      })
+    })]
+  });
+});
+
+var renderName = function renderName(_ref) {
+  var name = _ref.name,
+    group = _ref.group,
+    config = _ref.config,
+    setEditGroupDetail = _ref.setEditGroupDetail,
+    setDeleteGroup = _ref.setDeleteGroup,
+    getGroupDetail = _ref.getGroupDetail;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between gap-x-3",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Tooltip__default["default"], {
+      content: name,
+      position: "bottom",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "truncate",
+        style: "body2",
+        children: name
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
+      dropdownProps: {
+        strategy: "fixed",
+        position: "bottom-end"
+      },
+      menuItems: [{
+        key: "edit-menu",
+        label: i18next.t("neetoTeamMembers.common.edit"),
+        onClick: function onClick() {
+          return setEditGroupDetail({
+            isVisible: true,
+            groupId: group.id
+          });
+        }
+      }, {
+        key: "delete-menu",
+        label: i18next.t("neetoTeamMembers.common.delete"),
+        onClick: function onClick() {
+          var _config$groupDependen, _config$table, _config$table$onBefor;
+          config !== null && config !== void 0 && (_config$groupDependen = config.groupDependency) !== null && _config$groupDependen !== void 0 && _config$groupDependen.isCheckEnabled ? config === null || config === void 0 || (_config$table = config.table) === null || _config$table === void 0 || (_config$table$onBefor = _config$table.onBeforeDelete) === null || _config$table$onBefor === void 0 ? void 0 : _config$table$onBefor.call(_config$table, group) : setDeleteGroup({
+            isDeleting: true,
+            group: getGroupDetail(group.id)
+          });
+        }
+      }]
+    })]
+  });
+};
+var getColumnData = function getColumnData(_ref2) {
+  var _config$table$columns, _config$table2, _config$table2$column;
+  var _ref2$config = _ref2.config,
+    config = _ref2$config === void 0 ? {} : _ref2$config,
+    setEditGroupDetail = _ref2.setEditGroupDetail,
+    setDeleteGroup = _ref2.setDeleteGroup,
+    getGroupDetail = _ref2.getGroupDetail;
+  return [{
+    dataIndex: "name",
+    key: "name",
+    title: i18next.t("neetoTeamMembers.common.name"),
+    ellipsis: true,
+    width: 150,
+    render: function render(name, group) {
+      return renderName({
+        name: name,
+        group: group,
+        config: config,
+        setEditGroupDetail: setEditGroupDetail,
+        setDeleteGroup: setDeleteGroup,
+        getGroupDetail: getGroupDetail
+      });
+    }
+  }, {
+    dataIndex: "description",
+    key: "description",
+    title: i18next.t("neetoTeamMembers.common.description"),
+    render: function render(description) {
+      return description || "-";
+    },
+    width: 200
+  }].concat(toConsumableArray._toConsumableArray((_config$table$columns = config === null || config === void 0 || (_config$table2 = config.table) === null || _config$table2 === void 0 || (_config$table2$column = _config$table2.columnsData) === null || _config$table2$column === void 0 ? void 0 : _config$table2$column.call(_config$table2)) !== null && _config$table$columns !== void 0 ? _config$table$columns : []));
+};
+
+var Edit = function Edit(_ref) {
+  var config = _ref.config,
+    groupId = _ref.groupId,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchGroup = useFetchGroup(groupId),
+    group = _useFetchGroup.data,
+    isLoading = _useFetchGroup.isLoading;
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "h-screen w-full",
+      children: /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        weight: "semibold",
+        children: t("neetoTeamMembers.common.edit_", {
+          what: initializers.taxonomies.group.singular
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Form, {
+        config: config,
+        group: group,
+        onClose: onClose,
+        isEdit: true
+      })
+    })]
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var List = function List(_ref) {
+  var _config$table$deleteA, _config$table, _config$table$deleteA2;
+  var config = _ref.config,
+    groups = _ref.groups,
+    isLoading = _ref.isLoading,
+    searchTerm = _ref.searchTerm,
+    pageProperties = _ref.pageProperties,
+    setPageProperties = _ref.setPageProperties,
+    emptyStateAction = _ref.emptyStateAction;
+  var _useState = require$$0.useState(DEFAULT_EDIT_GROUP),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    editGroupDetail = _useState2[0],
+    setEditGroupDetail = _useState2[1];
+  var _useState3 = require$$0.useState(DEFAULT_DELETE_GROUP_DATA),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    deleteGroup = _useState4[0],
+    setDeleteGroup = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var totalCount = groups === null || groups === void 0 ? void 0 : groups.length;
+  var _useDeleteGroup = useDeleteGroup(config),
+    groupDelete = _useDeleteGroup.mutate,
+    isDeleting = _useDeleteGroup.isPending;
+  var getGroupDetail = function getGroupDetail(id) {
+    return neetoCist.findById(id, groups);
+  };
+  var handleGroupDelete = function handleGroupDelete(group) {
+    groupDelete(group.id, {
+      onSuccess: function onSuccess() {
+        setDeleteGroup(DEFAULT_DELETE_GROUP_DATA);
+      }
+    });
+  };
+  var columnData = getColumnData({
+    config: config,
+    setEditGroupDetail: setEditGroupDetail,
+    setDeleteGroup: setDeleteGroup,
+    getGroupDetail: getGroupDetail
+  });
+  require$$0.useEffect(function () {
+    var _config$groupDependen, _config$groupDependen2, _config$groupDependen3, _config$groupDependen4;
+    if (config !== null && config !== void 0 && (_config$groupDependen = config.groupDependency) !== null && _config$groupDependen !== void 0 && _config$groupDependen.isCheckEnabled && ((_config$groupDependen2 = config.groupDependency) === null || _config$groupDependen2 === void 0 ? void 0 : _config$groupDependen2.verificationStatus) === "successful" && !(config !== null && config !== void 0 && (_config$groupDependen3 = config.groupDependency) !== null && _config$groupDependen3 !== void 0 && _config$groupDependen3.isDependent) && neetoCist.isPresent(config === null || config === void 0 || (_config$groupDependen4 = config.groupDependency) === null || _config$groupDependen4 === void 0 ? void 0 : _config$groupDependen4.selectedGroup)) {
+      var _config$groupDependen5;
+      setDeleteGroup({
+        isDeleting: true,
+        group: config === null || config === void 0 || (_config$groupDependen5 = config.groupDependency) === null || _config$groupDependen5 === void 0 ? void 0 : _config$groupDependen5.selectedGroup
+      });
+    }
+  }, [config === null || config === void 0 ? void 0 : config.groupDependency]);
+  if (isLoading || isDeleting) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "h-screen w-full",
+      children: /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!ramda.isEmpty(groups) ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"], {
+        leftActionBlock: totalCount > 0 && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "mr-4 font-semibold",
+          component: "h4",
+          "data-cy": "item-count",
+          children: utils$1.pluralizeLabelUsingTaxonomy(initializers.taxonomies.group.singular, totalCount)
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+        hasPagination: totalCount > pageProperties.size,
+        children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+          columnData: columnData,
+          totalCount: totalCount,
+          fixedHeight: true,
+          allowRowClick: false,
+          currentPageNumber: pageProperties.index,
+          defaultPageSize: pageProperties.size,
+          loading: isLoading,
+          rowData: groups,
+          rowSelection: false,
+          scroll: {
+            x: "100%"
+          },
+          handlePageChange: function handlePageChange(index, size) {
+            return setPageProperties({
+              index: index,
+              size: size
+            });
+          }
+        })
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], _objectSpread(_objectSpread({
+        title: t("neetoTeamMembers.helpers.emptyTable", {
+          entity: initializers.taxonomies.group.plural
+        })
+      }, !searchTerm && {
+        primaryButtonProps: {
+          label: t("neetoTeamMembers.common.addNew_", {
+            what: initializers.taxonomies.group.singular
+          }),
+          onClick: emptyStateAction
+        }
+      }), config === null || config === void 0 ? void 0 : config.noDataProps))
+    }), /*#__PURE__*/jsxRuntime.jsx(Edit, {
+      config: config,
+      groupId: editGroupDetail.groupId,
+      isOpen: editGroupDetail.isVisible,
+      onClose: function onClose() {
+        return setEditGroupDetail(DEFAULT_EDIT_GROUP);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
+      isOpen: deleteGroup.isDeleting,
+      submitButtonLabel: t("neetoTeamMembers.common.delete"),
+      message: (_config$table$deleteA = config === null || config === void 0 || (_config$table = config.table) === null || _config$table === void 0 || (_config$table$deleteA2 = _config$table.deleteAlertMessage) === null || _config$table$deleteA2 === void 0 ? void 0 : _config$table$deleteA2.call(_config$table, deleteGroup.group)) !== null && _config$table$deleteA !== void 0 ? _config$table$deleteA : /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoTeamMembers.alerts.messages.delete",
+        values: {
+          resource: initializers.taxonomies.group.singular,
+          name: deleteGroup.group.name
+        }
+      }),
+      title: t("neetoTeamMembers.labels.deleteTitle", {
+        resource: initializers.taxonomies.group.singular
+      }),
+      onClose: function onClose() {
+        return setDeleteGroup(DEFAULT_DELETE_GROUP_DATA);
+      },
+      onSubmit: function onSubmit() {
+        return handleGroupDelete(deleteGroup.group);
+      }
+    })]
+  });
+};
+
+var Groups = function Groups(_ref) {
+  var _config$header$breadc, _config$header;
+  var _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {} : _ref$config;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _useState = require$$0.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isPaneOpen = _useState2[0],
+    setIsPaneOpen = _useState2[1];
+  var _useState3 = require$$0.useState(constants.DEFAULT_PAGE_PROPERTIES),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    pageProperties = _useState4[0],
+    setPageProperties = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchGroups = useFetchGroups({
+      page: pageProperties.index,
+      pageSize: pageProperties.size,
+      searchTerm: searchTerm
+    }),
+    _useFetchGroups$data = _useFetchGroups.data,
+    _useFetchGroups$data2 = _useFetchGroups$data === void 0 ? {} : _useFetchGroups$data,
+    groups = _useFetchGroups$data2.groups,
+    isLoading = _useFetchGroups.isLoading;
+  var isFiltersVisible = neetoCist.isNotEmpty(groups) || neetoCist.isPresent(searchTerm);
+  require$$0.useEffect(function () {
+    setPageProperties(constants.DEFAULT_PAGE_PROPERTIES);
+  }, [searchTerm]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Container__default["default"], {
+    children: [/*#__PURE__*/jsxRuntime.jsx(NeetoHeader__default["default"], {
+      breadcrumbs: (_config$header$breadc = config === null || config === void 0 || (_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.breadcrumbs) !== null && _config$header$breadc !== void 0 ? _config$header$breadc : [],
+      title: initializers.taxonomies.group.plural,
+      actionBlock: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-row items-center justify-end",
+        children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          "data-cy": "add-new-group-button",
+          style: "primary",
+          label: t("neetoTeamMembers.common.addNew_", {
+            what: initializers.taxonomies.group.singular
+          }),
+          onClick: function onClick() {
+            return setIsPaneOpen(true);
+          }
+        })
+      }),
+      searchProps: isFiltersVisible && {
+        placeholder: t("neetoTeamMembers.placeholders.searchEntity", {
+          entity: initializers.taxonomies.group.plural
+        })
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(List, {
+      config: config,
+      groups: groups,
+      isLoading: isLoading,
+      pageProperties: pageProperties,
+      searchTerm: searchTerm,
+      setPageProperties: setPageProperties,
+      emptyStateAction: function emptyStateAction() {
+        return setIsPaneOpen(true);
+      },
+      onClose: function onClose() {
+        return setIsPaneOpen(false);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(Create, {
+      config: config,
+      isOpen: isPaneOpen,
+      onClose: function onClose() {
+        return setIsPaneOpen(false);
+      }
+    })]
+  });
+};
+
+module.exports = Groups;
+//# sourceMappingURL=Groups.js.map