@bigbinary/neeto-team-members-frontend 5.0.28 → 5.0.30

package/dist/cjs/v2/Groups.js

@@ -0,0 +1,781 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+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/v2/Container');
+var NeetoHeader = require('@bigbinary/neeto-molecules/v2/Header');
+var reactI18next = require('react-i18next');
+var constants = require('../../constants-CMNbKvoF.js');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var reactQuery = require('@tanstack/react-query');
+var ramda = require('ramda');
+var axios = require('axios');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var formik$1 = require('@bigbinary/neeto-atoms/formik');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var ActionBlock = require('../../ActionBlock-C9Iy0jGZ.js');
+var Select = require('../../Select-CshPoN2b.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
+var formik = require('formik');
+var jsxRuntime = require('react/jsx-runtime');
+var i18next = require('i18next');
+var yup = require('yup');
+var MoreDropdown = require('@bigbinary/neeto-molecules/v2/MoreDropdown');
+var SubHeader = require('@bigbinary/neeto-molecules/v2/SubHeader');
+var v2_utils = require('./utils.js');
+require('@bigbinary/neeto-commons-frontend/constants');
+require('../../pluralize-CFlSRsRn.js');
+require('../../_commonjsHelpers-BJu3ubxk.js');
+require('../../useTeamsApi-Ch5sHR2_.js');
+require('qs');
+require('../../queryClient-B-JFya8X.js');
+
+function _interopDefault (e) { return e && e.__esModule ? 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 _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var Container__default = /*#__PURE__*/_interopDefault(Container);
+var NeetoHeader__default = /*#__PURE__*/_interopDefault(NeetoHeader);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
+var axios__default = /*#__PURE__*/_interopDefault(axios);
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var MoreDropdown__default = /*#__PURE__*/_interopDefault(MoreDropdown);
+var SubHeader__default = /*#__PURE__*/_interopDefault(SubHeader);
+
+// eslint-disable-next-line @bigbinary/neeto/no-axios-import-outside-apis
+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__default.default((_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__default.default((_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__default.default((_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(neetoAtoms.Spinner, {})
+  });
+};
+
+// eslint-disable-next-line @bigbinary/neeto/no-axios-import-outside-apis
+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 = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_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;
+  var handleRemoveMember = function handleRemoveMember(memberToRemove) {
+    setFieldValue("members", values.members.filter(function (id) {
+      return id !== memberToRemove.value;
+    }));
+    setIsDeleteAlertOpen(false);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between neeto-ui-rounded-lg border p-2",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Avatar, {
+          className: "size-8 shrink-0",
+          user: {
+            name: member === null || member === void 0 ? void 0 : member.label
+          }
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "ms-2 w-auto",
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            className: "mb-1 text-sm font-medium capitalize",
+            children: member === null || member === void 0 ? void 0 : member.label
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            className: "text-xs text-muted-foreground",
+            children: initializers.taxonomies.groupMember.singular
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default.default, {
+        dropdownProps: {
+          strategy: "fixed",
+          position: "bottom-end"
+        },
+        menuItems: [{
+          key: "delete-menu",
+          "data-testid": "member-remove-button",
+          label: t("neetoTeamMembers.common.remove"),
+          onClick: function onClick() {
+            return setIsDeleteAlertOpen(true);
+          }
+        }]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Alert, {
+      cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
+      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.label
+        }
+      }),
+      title: t("neetoTeamMembers.labels.removeMember", {
+        member: member === null || member === void 0 ? void 0 : member.label
+      }),
+      onClose: function onClose() {
+        return setIsDeleteAlertOpen(false);
+      },
+      onSubmit: function onSubmit() {
+        return handleRemoveMember(member);
+      }
+    })]
+  });
+};
+
+var Members = function Members(_ref) {
+  var _selectedMembers$leng;
+  var members = _ref.members,
+    membersSelectbox = _ref.membersSelectbox;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_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 _values$members;
+    return values === null || values === void 0 || (_values$members = values.members) === null || _values$members === void 0 ? void 0 : _values$members.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(neetoAtoms.Typography, {
+      className: "text-base font-semibold",
+      children: [initializers.taxonomies.groupMember.plural, " (", (_selectedMembers$leng = selectedMembers === null || selectedMembers === void 0 ? void 0 : selectedMembers.length) !== null && _selectedMembers$leng !== void 0 ? _selectedMembers$leng : 0, ")"]
+    }), isAddNewMemberDropdownVisible ? membersSelectbox : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      "data-testid": "new-member-button",
+      variant: "outline",
+      onClick: function onClick() {
+        return setIsAddNewMemberDropdownVisible(true);
+      },
+      children: t("neetoTeamMembers.common.addNew_", {
+        what: initializers.taxonomies.groupMember.singular
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-full space-y-1",
+      children: selectedMembers === null || selectedMembers === void 0 ? void 0 : selectedMembers.map(function (member) {
+        return /*#__PURE__*/React.createElement(Member, {
+          member: member,
+          key: member.value
+        });
+      })
+    })]
+  });
+};
+
+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), true).forEach(function (r) { _defineProperty__default.default(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 Form = function Form(_ref) {
+  var _group$members$map, _group$members, _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 ? _objectSpread(_objectSpread({}, group), {}, {
+    members: (_group$members$map = (_group$members = group.members) === null || _group$members === void 0 ? void 0 : _group$members.map(function (m) {
+      return String(m.id);
+    })) !== null && _group$members$map !== void 0 ? _group$members$map : []
+  }) : 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 memberOptions = React.useMemo(function () {
+    var _users$map;
+    return (_users$map = users === null || users === void 0 ? void 0 : users.map(function (u) {
+      return {
+        label: u.name,
+        value: String(u.id)
+      };
+    })) !== null && _users$map !== void 0 ? _users$map : [];
+  }, [users]);
+  var handleSubmit = function handleSubmit(values) {
+    var _values$members, _config$form3, _config$form3$otherPa;
+    var payload = {
+      group: ramda.mergeLeft({
+        name: values.name,
+        description: values.description,
+        userIds: (_values$members = values.members) !== null && _values$members !== void 0 ? _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, {});
+  var membersSelect = /*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
+    isMulti: true,
+    closeMenuOnSelect: false,
+    id: "members-autocomplete",
+    label: initializers.taxonomies.groupMember.plural,
+    name: "members",
+    options: memberOptions,
+    placeholder: initializers.taxonomies.groupMember.plural
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Select.FormikForm, {
+    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(formik$1.Input, {
+          required: true,
+          "data-testid": "group-name-text-field",
+          label: t("neetoTeamMembers.common.name"),
+          name: "name"
+        }), /*#__PURE__*/jsxRuntime.jsx(formik$1.Textarea, {
+          "data-testid": "group-description-text-area",
+          label: t("neetoTeamMembers.common.description"),
+          name: "description",
+          rows: 4
+        }), 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: memberOptions,
+          membersSelectbox: membersSelect
+        }) : membersSelect, 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(neetoAtoms.Sheet.Footer, {
+          className: "absolute bottom-0 start-0 gap-x-2",
+          children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock.FormikActionBlock, {
+            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(neetoAtoms.Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    modal: false,
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
+        children: t("neetoTeamMembers.common.addNew_", {
+          what: initializers.taxonomies.group.singular
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+      hasFooter: false,
+      children: /*#__PURE__*/jsxRuntime.jsx(Form, {
+        config: config,
+        onClose: onClose
+      })
+    })]
+  });
+});
+
+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;
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    modal: false,
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
+        children: t("neetoTeamMembers.common.edit_", {
+          what: initializers.taxonomies.group.singular
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+      hasFooter: false,
+      children: isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+      }) : /*#__PURE__*/jsxRuntime.jsx(Form, {
+        config: config,
+        group: group,
+        onClose: onClose,
+        isEdit: true
+      })
+    })]
+  });
+};
+
+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(neetoAtoms.Tooltip, {
+      content: name,
+      position: "bottom",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "truncate text-sm",
+        children: name
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default.default, {
+      dropdownButtonProps: {
+        className: "me-1 my-1"
+      },
+      dropdownProps: {
+        strategy: "fixed",
+        position: "bottom-end",
+        appendTo: function appendTo() {
+          return document.body;
+        }
+      },
+      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 [{
+    accessorKey: "name",
+    id: "name",
+    header: i18next.t("neetoTeamMembers.common.name"),
+    size: 250,
+    cell: function cell(_ref3) {
+      var row = _ref3.row;
+      return renderName({
+        name: row.original.name,
+        group: row.original,
+        config: config,
+        setEditGroupDetail: setEditGroupDetail,
+        setDeleteGroup: setDeleteGroup,
+        getGroupDetail: getGroupDetail
+      });
+    }
+  }, {
+    accessorKey: "description",
+    id: "description",
+    header: i18next.t("neetoTeamMembers.common.description"),
+    cell: function cell(_ref4) {
+      var getValue = _ref4.getValue;
+      return getValue() || "-";
+    },
+    size: 300
+  }].concat(_toConsumableArray__default.default((_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 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 = React.useState(DEFAULT_EDIT_GROUP),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    editGroupDetail = _useState2[0],
+    setEditGroupDetail = _useState2[1];
+  var _useState3 = React.useState(DEFAULT_DELETE_GROUP_DATA),
+    _useState4 = _slicedToArray__default.default(_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
+  });
+  React.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: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!ramda.isEmpty(groups) ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(SubHeader__default.default, {
+        className: "mb-4",
+        leftActionBlock: totalCount > 0 && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "me-4 text-base font-semibold",
+          "data-testid": "item-count",
+          children: v2_utils.pluralizeLabelUsingTaxonomy(initializers.taxonomies.group.singular, totalCount)
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DataTable, {
+          totalCount: totalCount,
+          fixedHeight: true,
+          allowRowClick: false,
+          columns: columnData,
+          currentPage: pageProperties.index,
+          data: groups || [],
+          loading: isLoading,
+          pageSize: pageProperties.size,
+          onPageChange: function onPageChange(index, size) {
+            return setPageProperties({
+              index: index,
+              size: size
+            });
+          }
+        })
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full grow items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Empty, {
+        title: t("neetoTeamMembers.helpers.emptyTable", {
+          entity: initializers.taxonomies.group.plural
+        }),
+        children: [!searchTerm && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          onClick: emptyStateAction,
+          children: t("neetoTeamMembers.common.addNew_", {
+            what: initializers.taxonomies.group.singular
+          })
+        }), (config === null || config === void 0 ? void 0 : config.noDataProps) && null]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Edit, {
+      config: config,
+      groupId: editGroupDetail.groupId,
+      isOpen: editGroupDetail.isVisible,
+      onClose: function onClose() {
+        return setEditGroupDetail(DEFAULT_EDIT_GROUP);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Alert, {
+      cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
+      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, _config$header$titleH, _config$header2;
+  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 = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    isPaneOpen = _useState2[0],
+    setIsPaneOpen = _useState2[1];
+  var _useState3 = React.useState(constants.DEFAULT_PAGE_PROPERTIES),
+    _useState4 = _slicedToArray__default.default(_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);
+  React.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,
+      titleHelpPopoverProps: (_config$header$titleH = config === null || config === void 0 || (_config$header2 = config.header) === null || _config$header2 === void 0 ? void 0 : _config$header2.titleHelpPopoverProps) !== null && _config$header$titleH !== void 0 ? _config$header$titleH : {},
+      actionBlock: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-row items-center justify-end",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          "data-testid": "add-new-group-button",
+          onClick: function onClick() {
+            return setIsPaneOpen(true);
+          },
+          children: t("neetoTeamMembers.common.addNew_", {
+            what: initializers.taxonomies.group.singular
+          })
+        })
+      }),
+      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