@bigbinary/neeto-tags-frontend 1.5.14 → 1.5.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +146 -12
- package/dist/index.cjs.js +73 -56
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +74 -57
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,19 +1,153 @@
|
|
|
1
|
-
# neetoTagsNano
|
|
2
1
|
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
# neeto-tags-nano
|
|
3
|
+
The `neeto-tags-nano` manages tags across neeto applications. The nano exports the `@bigbinary/neeto-tags-frontend` NPM package and `neeto-tags-engine` Rails engine for development.
|
|
5
4
|
|
|
6
|
-
#
|
|
5
|
+
# Contents
|
|
6
|
+
1. [Development with Host Application](#development-with-host-application)
|
|
7
|
+
- [Engine](#engine)
|
|
8
|
+
- [Installation](#installation)
|
|
9
|
+
- [Usage](#usage)
|
|
10
|
+
- [Frontend package](#frontend-package)
|
|
11
|
+
- [Installation](#installation-1)
|
|
12
|
+
- [Components](#components)
|
|
13
|
+
2. [Instructions for Publishing](#instructions-for-publishing)
|
|
7
14
|
|
|
8
|
-
|
|
9
|
-
|
|
15
|
+
# Development with Host Application
|
|
16
|
+
## Engine
|
|
17
|
+
The engine is used to manage tags for any entity across neeto products.
|
|
10
18
|
|
|
11
|
-
|
|
19
|
+
### Installation
|
|
20
|
+
1. Add this line to your application's Gemfile:
|
|
21
|
+
```ruby
|
|
22
|
+
source "NEETO_GEM_SERVER_URL" do
|
|
23
|
+
# ..existing gems
|
|
12
24
|
|
|
13
|
-
|
|
14
|
-
|
|
25
|
+
gem 'neeto-tags-engine'
|
|
26
|
+
end
|
|
27
|
+
```
|
|
28
|
+
2. And then execute:
|
|
29
|
+
```ruby
|
|
30
|
+
bundle install
|
|
31
|
+
```
|
|
32
|
+
3. Add this line to your application's `config/routes.rb` file:
|
|
33
|
+
```ruby
|
|
34
|
+
mount NeetoTagsEngine::Engine => "/neeto_tags_engine"
|
|
35
|
+
```
|
|
36
|
+
4. Run the following command to copy the migrations from the engine to the host application:
|
|
37
|
+
```ruby
|
|
38
|
+
bundle exec rails neeto_tags_engine:install:migrations
|
|
39
|
+
```
|
|
40
|
+
5. Add the migrations to the database:
|
|
41
|
+
```ruby
|
|
42
|
+
bundle exec rails db:migrate
|
|
43
|
+
```
|
|
44
|
+
### Usage
|
|
45
|
+
You can learn more about the setup and usage here:
|
|
46
|
+
1. [Models](/docs/engine/models.md)
|
|
47
|
+
2. [Controllers](/docs/engine/controllers.md)
|
|
15
48
|
|
|
16
|
-
|
|
49
|
+
## Frontend package
|
|
50
|
+
The package exports two components: `NeetoTags` and `Tags`.
|
|
17
51
|
|
|
18
|
-
|
|
19
|
-
|
|
52
|
+
The package also exports one hook: `refetchTags`.
|
|
53
|
+
|
|
54
|
+
### Installation
|
|
55
|
+
1. `neeto-tags-nano` has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:
|
|
56
|
+
```zsh
|
|
57
|
+
yarn add @bigbinary/neeto-commons-frontend@2.0.35 @bigbinary/neeto-icons@1.9.10 @bigbinary/neetoui@4.3.3 @honeybadger-io/js@5.1.1 @honeybadger-io/react@5.1.2 axios@1.3.3 classnames@2.3.2 formik@2.2.9 js-logger@1.6.1 ramda@0.28.0 react-helmet@6.1.0 react-query@3.39.3 react-router-dom@5.3.4 react-toastify@8.2.0 yup@1.0.0
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
2. Now install the latest `neeto-tags-nano` package using the below command:
|
|
61
|
+
```zsh
|
|
62
|
+
yarn add @bigbinary/neeto-tags-frontend
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Components
|
|
66
|
+
#### `NeetoTags` ([source code](https://github.com/bigbinary/neeto-tags-nano/blob/e61f7bd2b9cab9fbf29fcfecf57e66131c86e6ef/app/javascript/src/index.jsx))
|
|
67
|
+
This component provides a dashboard to manage tags for an application.
|
|
68
|
+
|
|
69
|
+
##### Props
|
|
70
|
+
- `config`: Configuration object that includes specifications for tags, display menu, and breadcrumbs.
|
|
71
|
+
|
|
72
|
+
##### Configuration
|
|
73
|
+
Refer to the [NeetoTags](/docs/frontend/neeto_tags.md) section for detailed information on the available configurations for the `NeetoTags` component.
|
|
74
|
+
|
|
75
|
+
##### Usage
|
|
76
|
+
```jsx
|
|
77
|
+
import React from "react";
|
|
78
|
+
|
|
79
|
+
import { NeetoTags } from "@bigbinary/neeto-tags-frontend";
|
|
80
|
+
|
|
81
|
+
const App = () => {
|
|
82
|
+
return <NeetoTags config={config} />;
|
|
83
|
+
};
|
|
84
|
+
export default App;
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
#### `Tags` ([source code](https://github.com/bigbinary/neeto-tags-nano/blob/e61f7bd2b9cab9fbf29fcfecf57e66131c86e6ef/app/javascript/src/components/Tags/index.jsx#L22))
|
|
88
|
+
|
|
89
|
+
This component provides functionality to assign tags to an entity.
|
|
90
|
+
|
|
91
|
+
##### Configuration
|
|
92
|
+
Refer to the [Tags](/docs/frontend/tags.md) section for detailed information on the available configurations for the `Tags` component.
|
|
93
|
+
|
|
94
|
+
##### Usage
|
|
95
|
+
```jsx
|
|
96
|
+
import React from "react";
|
|
97
|
+
|
|
98
|
+
import { TagsComponent } from "@bigbinary/neeto-tags-frontend";
|
|
99
|
+
|
|
100
|
+
const App = ({
|
|
101
|
+
allTags,
|
|
102
|
+
buttonProps,
|
|
103
|
+
selectProps,
|
|
104
|
+
selectedTags,
|
|
105
|
+
handleTagCreate,
|
|
106
|
+
handleTagRemove,
|
|
107
|
+
handleTagSelect,
|
|
108
|
+
}) => {
|
|
109
|
+
return (
|
|
110
|
+
<TagsComponent
|
|
111
|
+
allTags={allTags}
|
|
112
|
+
buttonProps={buttonProps}
|
|
113
|
+
selectProps={selectProps}
|
|
114
|
+
selectedTags={selectedTags}
|
|
115
|
+
onTagCreate={handleTagCreate}
|
|
116
|
+
onTagDelete={handleTagRemove}
|
|
117
|
+
onTagSelect={handleTagSelect}
|
|
118
|
+
/>
|
|
119
|
+
);
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export default App;
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Hooks
|
|
126
|
+
#### `refetchTags` ([source code](https://github.com/bigbinary/neeto-tags-nano/blob/e61f7bd2b9cab9fbf29fcfecf57e66131c86e6ef/app/javascript/src/hooks/useTagsApi.js#L39))
|
|
127
|
+
This function refetches the tags list.
|
|
128
|
+
|
|
129
|
+
##### Usage
|
|
130
|
+
Below is an example usage of the `refetchTags` hook:
|
|
131
|
+
|
|
132
|
+
```js
|
|
133
|
+
const useBulkUpdateTickets = () =>
|
|
134
|
+
useMutationWithInvalidation(
|
|
135
|
+
({ payload }) => ticketsApi.bulkUpdateTickets(payload),
|
|
136
|
+
{
|
|
137
|
+
keysToInvalidate: [
|
|
138
|
+
[QUERY_KEYS.TICKETS_LIST],
|
|
139
|
+
[QUERY_KEYS.TICKETS_DEFAULT_VIEWS],
|
|
140
|
+
[QUERY_KEYS.TEAMS],
|
|
141
|
+
...REPORT_DATA_KEYS_TO_INVALIDATE,
|
|
142
|
+
],
|
|
143
|
+
onSuccess: () => {
|
|
144
|
+
refetchTags();
|
|
145
|
+
},
|
|
146
|
+
}
|
|
147
|
+
);
|
|
148
|
+
```
|
|
149
|
+
Used by [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/5ba3471deae047bc9d08dca6bf26537194b9a209/app/javascript/src/hooks/reactQuery/tickets/useTicketsApi.js#L83)
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
# Instructions for Publishing
|
|
153
|
+
Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
|
package/dist/index.cjs.js
CHANGED
|
@@ -17,9 +17,9 @@ var reactRouterDom = require('react-router-dom');
|
|
|
17
17
|
var Container$1 = require('@bigbinary/neeto-molecules/Container');
|
|
18
18
|
var reactQuery = require('react-query');
|
|
19
19
|
var axios = require('axios');
|
|
20
|
+
var yup = require('yup');
|
|
20
21
|
var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
|
|
21
22
|
var formik = require('@bigbinary/neetoui/formik');
|
|
22
|
-
var yup = require('yup');
|
|
23
23
|
var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
|
|
24
24
|
var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
|
|
25
25
|
var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
|
|
@@ -50,8 +50,8 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
|
50
50
|
var Metadata__default = /*#__PURE__*/_interopDefaultLegacy(Metadata);
|
|
51
51
|
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container$1);
|
|
52
52
|
var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
|
|
53
|
-
var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
|
|
54
53
|
var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
|
|
54
|
+
var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
|
|
55
55
|
var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
|
|
56
56
|
var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
|
|
57
57
|
var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
|
|
@@ -522,13 +522,13 @@ var queryClient = new reactQuery.QueryClient({
|
|
|
522
522
|
})
|
|
523
523
|
});
|
|
524
524
|
|
|
525
|
-
function ownKeys$
|
|
526
|
-
function _objectSpread$
|
|
525
|
+
function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
526
|
+
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
527
527
|
var useFetchTags = function useFetchTags(params) {
|
|
528
528
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
529
529
|
return reactQuery.useQuery([TAG_KEY, params], function () {
|
|
530
530
|
return tagsApi.fetch(params);
|
|
531
|
-
}, _objectSpread$
|
|
531
|
+
}, _objectSpread$4({
|
|
532
532
|
staleTime: STALE_TIME,
|
|
533
533
|
select: function select(response) {
|
|
534
534
|
return response.data || response;
|
|
@@ -577,6 +577,29 @@ var refetchTags = function refetchTags() {
|
|
|
577
577
|
return queryClient.invalidateQueries([TAG_KEY]);
|
|
578
578
|
};
|
|
579
579
|
|
|
580
|
+
var TAG_NAME_MAX_LENGTH = 50;
|
|
581
|
+
var TAG_DESCRIPTION_ROW_LENGTH = 3;
|
|
582
|
+
var TAG_DESCRIPTION_MAX_LENGTH = 255;
|
|
583
|
+
var TAG_SCHEMA = yup__namespace.object().shape({
|
|
584
|
+
name: yup__namespace.string().typeError(i18next.t("neetoTags.validation.nameMustBeString")).required(i18next.t("neetoTags.validation.nameRequired")).max(TAG_NAME_MAX_LENGTH, i18next.t("neetoTags.validation.nameMaxLength", {
|
|
585
|
+
length: TAG_NAME_MAX_LENGTH
|
|
586
|
+
})),
|
|
587
|
+
description: yup__namespace.string().typeError(i18next.t("neetoTags.validation.descriptionMustBeString")).nullable().max(TAG_DESCRIPTION_MAX_LENGTH, i18next.t("neetoTags.validation.descriptionMaxLength", {
|
|
588
|
+
length: TAG_DESCRIPTION_MAX_LENGTH
|
|
589
|
+
}))
|
|
590
|
+
});
|
|
591
|
+
var TAGS_FORMIK_PROPS = {
|
|
592
|
+
validateOnBlur: true,
|
|
593
|
+
validateOnChange: true,
|
|
594
|
+
validationSchema: TAG_SCHEMA
|
|
595
|
+
};
|
|
596
|
+
var DEFAULT_FILTERS = {
|
|
597
|
+
page: constants.DEFAULT_PAGE_INDEX,
|
|
598
|
+
pageSize: constants.DEFAULT_PAGE_SIZE,
|
|
599
|
+
sortBy: "",
|
|
600
|
+
orderBy: ""
|
|
601
|
+
};
|
|
602
|
+
|
|
580
603
|
var Header = function Header(_ref) {
|
|
581
604
|
var breadcrumbs = _ref.breadcrumbs,
|
|
582
605
|
_ref$tagsMergable = _ref.tagsMergable,
|
|
@@ -665,25 +688,8 @@ var useTagsForm = function useTagsForm(_ref) {
|
|
|
665
688
|
};
|
|
666
689
|
};
|
|
667
690
|
|
|
668
|
-
var
|
|
669
|
-
var
|
|
670
|
-
var TAG_DESCRIPTION_MAX_LENGTH = 255;
|
|
671
|
-
var TAG_SCHEMA = yup__namespace.object().shape({
|
|
672
|
-
name: yup__namespace.string().typeError(i18next.t("neetoTags.validation.nameMustBeString")).required(i18next.t("neetoTags.validation.nameRequired")).max(TAG_NAME_MAX_LENGTH, i18next.t("neetoTags.validation.nameMaxLength", {
|
|
673
|
-
length: TAG_NAME_MAX_LENGTH
|
|
674
|
-
})),
|
|
675
|
-
description: yup__namespace.string().typeError(i18next.t("neetoTags.validation.descriptionMustBeString")).nullable().max(TAG_DESCRIPTION_MAX_LENGTH, i18next.t("neetoTags.validation.descriptionMaxLength", {
|
|
676
|
-
length: TAG_DESCRIPTION_MAX_LENGTH
|
|
677
|
-
}))
|
|
678
|
-
});
|
|
679
|
-
var TAGS_FORMIK_PROPS = {
|
|
680
|
-
validateOnBlur: true,
|
|
681
|
-
validateOnChange: true,
|
|
682
|
-
validationSchema: TAG_SCHEMA
|
|
683
|
-
};
|
|
684
|
-
|
|
685
|
-
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
686
|
-
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
691
|
+
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
692
|
+
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
687
693
|
var ManageTags = function ManageTags(_ref) {
|
|
688
694
|
var createTags = _ref.createTags,
|
|
689
695
|
goToFirstPage = _ref.goToFirstPage,
|
|
@@ -715,7 +721,7 @@ var ManageTags = function ManageTags(_ref) {
|
|
|
715
721
|
style: "h2",
|
|
716
722
|
weight: "semibold"
|
|
717
723
|
}, isEdit ? t("neetoTags.common.editTag") : t("neetoTags.common.addNewTag", constants.SINGULAR))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
|
|
718
|
-
formikProps: _objectSpread$
|
|
724
|
+
formikProps: _objectSpread$3(_objectSpread$3({}, TAGS_FORMIK_PROPS), {}, {
|
|
719
725
|
initialValues: initialValues,
|
|
720
726
|
onSubmit: handleSubmit
|
|
721
727
|
})
|
|
@@ -836,13 +842,13 @@ var renderColumnData = function renderColumnData(handleEdit, handleDelete) {
|
|
|
836
842
|
var Table = function Table(_ref) {
|
|
837
843
|
var _data$tags;
|
|
838
844
|
var data = _ref.data,
|
|
845
|
+
filters = _ref.filters,
|
|
839
846
|
handleDelete = _ref.handleDelete,
|
|
840
847
|
handleEdit = _ref.handleEdit,
|
|
848
|
+
handleOnChange = _ref.handleOnChange,
|
|
841
849
|
isLoading = _ref.isLoading,
|
|
842
850
|
onTagRowClick = _ref.onTagRowClick,
|
|
843
|
-
page = _ref.page,
|
|
844
851
|
primaryButtonProps = _ref.primaryButtonProps,
|
|
845
|
-
setPage = _ref.setPage,
|
|
846
852
|
tagType = _ref.tagType;
|
|
847
853
|
var _useTranslation = reactI18next.useTranslation(),
|
|
848
854
|
t = _useTranslation.t;
|
|
@@ -866,13 +872,12 @@ var Table = function Table(_ref) {
|
|
|
866
872
|
type: (tagType === null || tagType === void 0 ? void 0 : tagType.label) || ""
|
|
867
873
|
}))
|
|
868
874
|
}), /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
|
|
869
|
-
hasPagination: (data === null || data === void 0 ? void 0 : data.totalCount) >
|
|
875
|
+
hasPagination: (data === null || data === void 0 ? void 0 : data.totalCount) > filters.pageSize
|
|
870
876
|
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
|
|
871
877
|
fixedHeight: true,
|
|
872
878
|
allowRowClick: !!onTagRowClick,
|
|
873
|
-
currentPageNumber: page,
|
|
874
|
-
defaultPageSize:
|
|
875
|
-
handlePageChange: setPage,
|
|
879
|
+
currentPageNumber: filters.page,
|
|
880
|
+
defaultPageSize: filters.pageSize,
|
|
876
881
|
loading: isLoading,
|
|
877
882
|
paginationProps: {
|
|
878
883
|
showSizeChanger: false
|
|
@@ -884,6 +889,7 @@ var Table = function Table(_ref) {
|
|
|
884
889
|
},
|
|
885
890
|
totalCount: data === null || data === void 0 ? void 0 : data.totalCount,
|
|
886
891
|
columnData: renderColumnData(handleEdit, handleDelete, tagType.columns),
|
|
892
|
+
onChange: handleOnChange,
|
|
887
893
|
onRowClick: function onRowClick(event, record, rowIndex) {
|
|
888
894
|
return onTagRowClick({
|
|
889
895
|
event: event,
|
|
@@ -894,6 +900,8 @@ var Table = function Table(_ref) {
|
|
|
894
900
|
})));
|
|
895
901
|
};
|
|
896
902
|
|
|
903
|
+
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
904
|
+
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
897
905
|
var Dashboard = function Dashboard(_ref) {
|
|
898
906
|
var breadcrumbs = _ref.breadcrumbs,
|
|
899
907
|
createTags = _ref.createTags,
|
|
@@ -911,27 +919,25 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
911
919
|
_useState2 = _slicedToArray(_useState, 2),
|
|
912
920
|
selectedTag = _useState2[0],
|
|
913
921
|
setSelectedTag = _useState2[1];
|
|
914
|
-
var _useState3 = React.useState(
|
|
922
|
+
var _useState3 = React.useState(null),
|
|
915
923
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
var _useState5 = React.useState(
|
|
924
|
+
paneType = _useState4[0],
|
|
925
|
+
setPaneType = _useState4[1];
|
|
926
|
+
var _useState5 = React.useState(false),
|
|
919
927
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
var _useState7 = React.useState(
|
|
928
|
+
isDeleteAlertOpen = _useState6[0],
|
|
929
|
+
setIsDeleteAlertOpen = _useState6[1];
|
|
930
|
+
var _useState7 = React.useState(DEFAULT_FILTERS),
|
|
923
931
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
924
|
-
|
|
925
|
-
|
|
932
|
+
filters = _useState8[0],
|
|
933
|
+
setFilters = _useState8[1];
|
|
926
934
|
var _useQueryParams = reactUtils.useQueryParams(),
|
|
927
935
|
_useQueryParams$searc = _useQueryParams.search_term,
|
|
928
936
|
searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
|
|
929
|
-
var _useFetchTags = useFetchTags({
|
|
937
|
+
var _useFetchTags = useFetchTags(_objectSpread$2({
|
|
930
938
|
url: tagType.url,
|
|
931
|
-
searchTerm: searchTerm
|
|
932
|
-
|
|
933
|
-
page: page
|
|
934
|
-
}),
|
|
939
|
+
searchTerm: searchTerm
|
|
940
|
+
}, filters)),
|
|
935
941
|
data = _useFetchTags.data,
|
|
936
942
|
isLoading = _useFetchTags.isLoading;
|
|
937
943
|
var _useTranslation = reactI18next.useTranslation(),
|
|
@@ -956,6 +962,16 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
956
962
|
setIsDeleteAlertOpen(false);
|
|
957
963
|
setSelectedTag(null);
|
|
958
964
|
};
|
|
965
|
+
var handleOnChange = function handleOnChange(_ref2, _, _ref3) {
|
|
966
|
+
var page = _ref2.current;
|
|
967
|
+
var sortBy = _ref3.field,
|
|
968
|
+
orderBy = _ref3.order;
|
|
969
|
+
return setFilters(ramda.mergeLeft({
|
|
970
|
+
page: page,
|
|
971
|
+
sortBy: sortBy,
|
|
972
|
+
orderBy: orderBy
|
|
973
|
+
}));
|
|
974
|
+
};
|
|
959
975
|
var _useDeleteTag = useDeleteTag(),
|
|
960
976
|
mutate = _useDeleteTag.mutate,
|
|
961
977
|
isDeletingTag = _useDeleteTag.isLoading;
|
|
@@ -970,9 +986,9 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
970
986
|
var _data$tags, _deleteTags$onSuccess;
|
|
971
987
|
setIsDeleteAlertOpen(false);
|
|
972
988
|
if ((data === null || data === void 0 || (_data$tags = data.tags) === null || _data$tags === void 0 ? void 0 : _data$tags.length) === 1) {
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
});
|
|
989
|
+
setFilters(ramda.mergeLeft({
|
|
990
|
+
page: filters.page - 1
|
|
991
|
+
}));
|
|
976
992
|
}
|
|
977
993
|
deleteTags === null || deleteTags === void 0 || (_deleteTags$onSuccess = deleteTags.onSuccess) === null || _deleteTags$onSuccess === void 0 ? void 0 : _deleteTags$onSuccess.callback();
|
|
978
994
|
// @ts-ignore
|
|
@@ -983,6 +999,11 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
983
999
|
}
|
|
984
1000
|
});
|
|
985
1001
|
};
|
|
1002
|
+
var resetPage = function resetPage() {
|
|
1003
|
+
return setFilters(ramda.mergeLeft({
|
|
1004
|
+
page: constants.DEFAULT_PAGE_INDEX
|
|
1005
|
+
}));
|
|
1006
|
+
};
|
|
986
1007
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header, {
|
|
987
1008
|
breadcrumbs: breadcrumbs,
|
|
988
1009
|
data: data,
|
|
@@ -991,30 +1012,26 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
991
1012
|
setSelectedTag: setSelectedTag,
|
|
992
1013
|
tagsMergable: tagsMergable,
|
|
993
1014
|
tagsPath: tagsPath,
|
|
994
|
-
goToFirstPage:
|
|
995
|
-
return setPage(constants.DEFAULT_PAGE_INDEX);
|
|
996
|
-
}
|
|
1015
|
+
goToFirstPage: resetPage
|
|
997
1016
|
}), displayMenu && /*#__PURE__*/React__default["default"].createElement(Menu$1, {
|
|
998
1017
|
setTagType: setTagType,
|
|
999
1018
|
tagType: tagType,
|
|
1000
1019
|
tagTypes: tagTypes
|
|
1001
1020
|
}), /*#__PURE__*/React__default["default"].createElement(Table, {
|
|
1002
1021
|
data: data,
|
|
1022
|
+
filters: filters,
|
|
1003
1023
|
handleDelete: handleDelete,
|
|
1004
1024
|
handleEdit: handleEdit,
|
|
1025
|
+
handleOnChange: handleOnChange,
|
|
1005
1026
|
isLoading: isLoading,
|
|
1006
1027
|
onTagRowClick: onTagRowClick,
|
|
1007
|
-
page: page,
|
|
1008
1028
|
primaryButtonProps: primaryButtonProps,
|
|
1009
|
-
setPage: setPage,
|
|
1010
1029
|
tagType: tagType
|
|
1011
1030
|
})), /*#__PURE__*/React__default["default"].createElement(ManageTags, {
|
|
1012
1031
|
createTags: createTags,
|
|
1013
1032
|
tagType: tagType,
|
|
1014
1033
|
updateTags: updateTags,
|
|
1015
|
-
goToFirstPage:
|
|
1016
|
-
return setPage(constants.DEFAULT_PAGE_INDEX);
|
|
1017
|
-
},
|
|
1034
|
+
goToFirstPage: resetPage,
|
|
1018
1035
|
tag: selectedTag,
|
|
1019
1036
|
type: paneType,
|
|
1020
1037
|
onClose: function onClose() {
|