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

package/dist/v2/Groups.js

@@ -0,0 +1,749 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, createElement, useMemo, useEffect } from 'react';
+import { Spinner, Avatar, Typography, Alert, Button, Sheet, Tooltip, DataTable, Empty } from '@bigbinary/neeto-atoms';
+import { noop, isPresent, findById, isNotEmpty } from '@bigbinary/neeto-cist';
+import { taxonomies } from '@bigbinary/neeto-commons-frontend/initializers';
+import { useMutationWithInvalidation, withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Container from '@bigbinary/neeto-molecules/v2/Container';
+import NeetoHeader from '@bigbinary/neeto-molecules/v2/Header';
+import { useTranslation, Trans } from 'react-i18next';
+import { B as BASE_URL, Q as QUERY_KEYS, d as DEFAULT_PAGE_PROPERTIES } from '../constants-B1L6arSR.js';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { useQuery } from '@tanstack/react-query';
+import { prop, mergeLeft, isEmpty } from 'ramda';
+import axios from 'axios';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Input, Textarea } from '@bigbinary/neeto-atoms/formik';
+import { captureAnalyticsEvent } from '@bigbinary/neeto-commons-frontend/utils';
+import { F as FormikActionBlock } from '../ActionBlock-jgw1N-As.js';
+import { b as FormikSelect, a as FormikForm } from '../Select-DZ56UG-l.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import { useFormikContext } from 'formik';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { t } from 'i18next';
+import * as yup from 'yup';
+import MoreDropdown from '@bigbinary/neeto-molecules/v2/MoreDropdown';
+import SubHeader from '@bigbinary/neeto-molecules/v2/SubHeader';
+import { pluralizeLabelUsingTaxonomy } from './utils.js';
+import '@bigbinary/neeto-commons-frontend/constants';
+import '../pluralize-BoSEafiC.js';
+import '../_commonjsHelpers-BFTU3MAI.js';
+import '../useTeamsApi-CWp4G7JZ.js';
+import 'qs';
+import '../queryClient-BncpekSV.js';
+
+// eslint-disable-next-line @bigbinary/neeto/no-axios-import-outside-apis
+var list$1 = function list(params) {
+  return axios.get("".concat(BASE_URL, "/api/v1/groups"), {
+    params: params
+  });
+};
+var show = function show(id) {
+  return axios.get("".concat(BASE_URL, "/api/v1/groups/").concat(id));
+};
+var create = function create(payload) {
+  return axios.post("".concat(BASE_URL, "/api/v1/groups"), payload);
+};
+var update = function update(id, payload) {
+  return axios.patch("".concat(BASE_URL, "/api/v1/groups/").concat(id), payload);
+};
+var destroy = function destroy(id) {
+  return axios["delete"]("".concat(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 useQuery({
+    queryKey: [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 useMutationWithInvalidation(function (payload) {
+    return groupsApi.create(payload);
+  }, {
+    keysToInvalidate: [[QUERY_KEYS.GROUPS]].concat(_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 useMutationWithInvalidation(function (id) {
+    return groupsApi.destroy(id);
+  }, {
+    keysToInvalidate: [[QUERY_KEYS.GROUPS]].concat(_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 useQuery({
+    queryKey: [QUERY_KEYS.GROUPS, id],
+    queryFn: function queryFn() {
+      return groupsApi.show(id);
+    },
+    select: 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 useMutationWithInvalidation(function (_ref2) {
+    var id = _ref2.id,
+      payload = _ref2.payload;
+    return groupsApi.update(id, payload);
+  }, {
+    keysToInvalidate: [[QUERY_KEYS.GROUPS]].concat(_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__*/jsx("div", {
+    className: "flex h-full w-full items-center justify-center",
+    children: /*#__PURE__*/jsx(Spinner, {})
+  });
+};
+
+// eslint-disable-next-line @bigbinary/neeto/no-axios-import-outside-apis
+var list = function list() {
+  return axios.get("".concat(BASE_URL, "/api/v1/users"));
+};
+var usersApi = {
+  list: list
+};
+
+var useFetchUsers = function useFetchUsers() {
+  return useQuery({
+    queryKey: [QUERY_KEYS.USERS],
+    queryFn: usersApi.list
+  });
+};
+
+var MAXIMUM_NAME_LENGTH = 25;
+var GROUP_FORM_VALIDATION_SCHEMA = yup.object({
+  name: yup.string().required(t("neetoTeamMembers.validations.required", {
+    what: t("neetoTeamMembers.common.name")
+  })).trim(t("neetoTeamMembers.validations.noWhiteSpaces", {
+    what: t("neetoTeamMembers.common.name")
+  })).max(MAXIMUM_NAME_LENGTH, 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDeleteAlertOpen = _useState2[0],
+    setIsDeleteAlertOpen = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = 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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between neeto-ui-rounded-lg border p-2",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center space-x-2",
+        children: [/*#__PURE__*/jsx(Avatar, {
+          className: "size-8 shrink-0",
+          user: {
+            name: member === null || member === void 0 ? void 0 : member.label
+          }
+        }), /*#__PURE__*/jsxs("div", {
+          className: "ms-2 w-auto",
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "mb-1 text-sm font-medium capitalize",
+            children: member === null || member === void 0 ? void 0 : member.label
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "text-xs text-muted-foreground",
+            children: taxonomies.groupMember.singular
+          })]
+        })]
+      }), /*#__PURE__*/jsx(MoreDropdown, {
+        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__*/jsx(Alert, {
+      cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
+      isOpen: isDeleteAlertOpen,
+      submitButtonLabel: t("neetoTeamMembers.common.remove"),
+      message: /*#__PURE__*/jsx(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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAddNewMemberDropdownVisible = _useState2[0],
+    setIsAddNewMemberDropdownVisible = _useState2[1];
+  var _useFormikContext = 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 = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full space-y-4",
+    children: [/*#__PURE__*/jsxs(Typography, {
+      className: "text-base font-semibold",
+      children: [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__*/jsx(Button, {
+      "data-testid": "new-member-button",
+      variant: "outline",
+      onClick: function onClick() {
+        return setIsAddNewMemberDropdownVisible(true);
+      },
+      children: t("neetoTeamMembers.common.addNew_", {
+        what: taxonomies.groupMember.singular
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-full space-y-1",
+      children: selectedMembers === null || selectedMembers === void 0 ? void 0 : selectedMembers.map(function (member) {
+        return /*#__PURE__*/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(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 ? noop : _ref$onClose;
+  var _useTranslation = 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 : []
+  }) : 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 = 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: 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() {
+          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__*/jsx(PaneSpinner, {});
+  var membersSelect = /*#__PURE__*/jsx(FormikSelect, {
+    isMulti: true,
+    closeMenuOnSelect: false,
+    id: "members-autocomplete",
+    label: taxonomies.groupMember.plural,
+    name: "members",
+    options: memberOptions,
+    placeholder: taxonomies.groupMember.plural
+  });
+  return /*#__PURE__*/jsx(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__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Input, {
+          required: true,
+          "data-testid": "group-name-text-field",
+          label: t("neetoTeamMembers.common.name"),
+          name: "name"
+        }), /*#__PURE__*/jsx(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__*/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__*/jsx(Sheet.Footer, {
+          className: "absolute bottom-0 start-0 gap-x-2",
+          children: /*#__PURE__*/jsx(FormikActionBlock, {
+            cancelButtonProps: {
+              onClick: onClose
+            },
+            isSubmitting: isCreating || isUpdating
+          })
+        })]
+      });
+    }
+  });
+};
+
+var Create = withT(function (_ref) {
+  var t = _ref.t,
+    config = _ref.config,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/jsxs(Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    modal: false,
+    children: [/*#__PURE__*/jsx(Sheet.Header, {
+      children: /*#__PURE__*/jsx(Sheet.Title, {
+        children: t("neetoTeamMembers.common.addNew_", {
+          what: taxonomies.group.singular
+        })
+      })
+    }), /*#__PURE__*/jsx(Sheet.Body, {
+      hasFooter: false,
+      children: /*#__PURE__*/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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchGroup = useFetchGroup(groupId),
+    group = _useFetchGroup.data,
+    isLoading = _useFetchGroup.isLoading;
+  return /*#__PURE__*/jsxs(Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    modal: false,
+    children: [/*#__PURE__*/jsx(Sheet.Header, {
+      children: /*#__PURE__*/jsx(Sheet.Title, {
+        children: t("neetoTeamMembers.common.edit_", {
+          what: taxonomies.group.singular
+        })
+      })
+    }), /*#__PURE__*/jsx(Sheet.Body, {
+      hasFooter: false,
+      children: isLoading ? /*#__PURE__*/jsx("div", {
+        className: "flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsx(Spinner, {})
+      }) : /*#__PURE__*/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__*/jsxs("div", {
+    className: "flex items-center justify-between gap-x-3",
+    children: [/*#__PURE__*/jsx(Tooltip, {
+      content: name,
+      position: "bottom",
+      children: /*#__PURE__*/jsx(Typography, {
+        className: "truncate text-sm",
+        children: name
+      })
+    }), /*#__PURE__*/jsx(MoreDropdown, {
+      dropdownButtonProps: {
+        className: "me-1 my-1"
+      },
+      dropdownProps: {
+        strategy: "fixed",
+        position: "bottom-end",
+        appendTo: function appendTo() {
+          return document.body;
+        }
+      },
+      menuItems: [{
+        key: "edit-menu",
+        label: t("neetoTeamMembers.common.edit"),
+        onClick: function onClick() {
+          return setEditGroupDetail({
+            isVisible: true,
+            groupId: group.id
+          });
+        }
+      }, {
+        key: "delete-menu",
+        label: 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: 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: t("neetoTeamMembers.common.description"),
+    cell: function cell(_ref4) {
+      var getValue = _ref4.getValue;
+      return getValue() || "-";
+    },
+    size: 300
+  }].concat(_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 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 = useState(DEFAULT_EDIT_GROUP),
+    _useState2 = _slicedToArray(_useState, 2),
+    editGroupDetail = _useState2[0],
+    setEditGroupDetail = _useState2[1];
+  var _useState3 = useState(DEFAULT_DELETE_GROUP_DATA),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deleteGroup = _useState4[0],
+    setDeleteGroup = _useState4[1];
+  var _useTranslation = 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 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
+  });
+  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) && 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__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isEmpty(groups) ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(SubHeader, {
+        className: "mb-4",
+        leftActionBlock: totalCount > 0 && /*#__PURE__*/jsx(Typography, {
+          className: "me-4 text-base font-semibold",
+          "data-testid": "item-count",
+          children: pluralizeLabelUsingTaxonomy(taxonomies.group.singular, totalCount)
+        })
+      }), /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(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__*/jsx("div", {
+      className: "flex h-full w-full grow items-center justify-center",
+      children: /*#__PURE__*/jsxs(Empty, {
+        title: t("neetoTeamMembers.helpers.emptyTable", {
+          entity: taxonomies.group.plural
+        }),
+        children: [!searchTerm && /*#__PURE__*/jsx(Button, {
+          onClick: emptyStateAction,
+          children: t("neetoTeamMembers.common.addNew_", {
+            what: taxonomies.group.singular
+          })
+        }), (config === null || config === void 0 ? void 0 : config.noDataProps) && null]
+      })
+    }), /*#__PURE__*/jsx(Edit, {
+      config: config,
+      groupId: editGroupDetail.groupId,
+      isOpen: editGroupDetail.isVisible,
+      onClose: function onClose() {
+        return setEditGroupDetail(DEFAULT_EDIT_GROUP);
+      }
+    }), /*#__PURE__*/jsx(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__*/jsx(Trans, {
+        i18nKey: "neetoTeamMembers.alerts.messages.delete",
+        values: {
+          resource: taxonomies.group.singular,
+          name: deleteGroup.group.name
+        }
+      }),
+      title: t("neetoTeamMembers.labels.deleteTitle", {
+        resource: 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 = useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPaneOpen = _useState2[0],
+    setIsPaneOpen = _useState2[1];
+  var _useState3 = useState(DEFAULT_PAGE_PROPERTIES),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageProperties = _useState4[0],
+    setPageProperties = _useState4[1];
+  var _useTranslation = 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 = isNotEmpty(groups) || isPresent(searchTerm);
+  useEffect(function () {
+    setPageProperties(DEFAULT_PAGE_PROPERTIES);
+  }, [searchTerm]);
+  return /*#__PURE__*/jsxs(Container, {
+    children: [/*#__PURE__*/jsx(NeetoHeader, {
+      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: 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__*/jsx("div", {
+        className: "flex flex-row items-center justify-end",
+        children: /*#__PURE__*/jsx(Button, {
+          "data-testid": "add-new-group-button",
+          onClick: function onClick() {
+            return setIsPaneOpen(true);
+          },
+          children: t("neetoTeamMembers.common.addNew_", {
+            what: taxonomies.group.singular
+          })
+        })
+      }),
+      searchProps: isFiltersVisible && {
+        placeholder: t("neetoTeamMembers.placeholders.searchEntity", {
+          entity: taxonomies.group.plural
+        })
+      }
+    }), /*#__PURE__*/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__*/jsx(Create, {
+      config: config,
+      isOpen: isPaneOpen,
+      onClose: function onClose() {
+        return setIsPaneOpen(false);
+      }
+    })]
+  });
+};
+
+export { Groups as default };
+//# sourceMappingURL=Groups.js.map