awing-library 2.1.2-stable.30 → 2.1.2-stable.32

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.
@@ -9,7 +9,7 @@ var __webpack_modules__ = {
9
9
  "AWING/DataInput": function(module) {
10
10
  module.exports = __WEBPACK_EXTERNAL_MODULE__DataInput_index_js_c7933a4f__;
11
11
  },
12
- "AWING/helper": function(module) {
12
+ "../helper": function(module) {
13
13
  module.exports = __WEBPACK_EXTERNAL_MODULE__helper_js_663c9e82__;
14
14
  }
15
15
  };
@@ -92,9 +92,9 @@ jest.mock('@mui/material', ()=>({
92
92
  })
93
93
  }));
94
94
  const mockInputFactory = __webpack_require__("AWING/DataInput")["default"];
95
- const mockCalculateValue = __webpack_require__("AWING/helper").calculateValue;
96
- const mockConvertFormulaToBinaryTree = __webpack_require__("AWING/helper").convertFormulaToBinaryTree;
97
- const mockReplaceFieldsValue = __webpack_require__("AWING/helper").replaceFieldsValue;
95
+ const mockCalculateValue = __webpack_require__("../helper").calculateValue;
96
+ const mockConvertFormulaToBinaryTree = __webpack_require__("../helper").convertFormulaToBinaryTree;
97
+ const mockReplaceFieldsValue = __webpack_require__("../helper").replaceFieldsValue;
98
98
  describe('DataForm Component', ()=>{
99
99
  const mockFields = [
100
100
  {
@@ -5,6 +5,9 @@ interface SearchUserGroupUserProps {
5
5
  users: User[];
6
6
  onSearch?: (searchString: string) => void;
7
7
  loading?: boolean;
8
+ loadingMore?: boolean;
9
+ hasMore?: boolean;
10
+ onLoadMore?: () => void;
8
11
  }
9
12
  declare function SearchUserGroupUser(props: SearchUserGroupUserProps): import("react/jsx-runtime").JSX.Element;
10
13
  export default SearchUserGroupUser;
@@ -1 +1 @@
1
- {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../src/Features/SYSTEM/Group/SearchUser/component.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,UAAU,wBAAwB;IAC9B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAwE3D;AAED,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../src/Features/SYSTEM/Group/SearchUser/component.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,UAAU,wBAAwB;IAC9B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CA8F3D;AAED,eAAe,mBAAmB,CAAC"}
@@ -1,12 +1,27 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { useState } from "react";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useRef } from "react";
3
3
  import { filter, some } from "lodash";
4
- import { Checkbox, FormControlLabel, Paper } from "@mui/material";
4
+ import { Box, Checkbox, FormControlLabel, Paper } from "@mui/material";
5
5
  import { CircularProgress, NoData, SearchBox } from "../../../../AWING/index.js";
6
6
  import Grid from "@mui/material/Grid";
7
7
  function SearchUserGroupUser(props) {
8
- const { listUserId, onListUserIdChange, users, onSearch, loading } = props;
9
- const [keyWordSearch, setKeyWordSearch] = useState('');
8
+ const { listUserId, onListUserIdChange, users, onSearch, loading, loadingMore = false, hasMore = false, onLoadMore } = props;
9
+ const scrollContainerRef = useRef(null);
10
+ useEffect(()=>{
11
+ const container = scrollContainerRef.current;
12
+ if (!container) return;
13
+ if (hasMore && !loadingMore && container.scrollHeight <= container.clientHeight) return void onLoadMore?.();
14
+ const handleScroll = ()=>{
15
+ const { scrollTop, scrollHeight, clientHeight } = container;
16
+ if (scrollHeight - scrollTop <= clientHeight + 50 && hasMore && !loadingMore) onLoadMore?.();
17
+ };
18
+ container.addEventListener('scroll', handleScroll);
19
+ return ()=>container.removeEventListener('scroll', handleScroll);
20
+ }, [
21
+ hasMore,
22
+ loadingMore,
23
+ onLoadMore
24
+ ]);
10
25
  const handleChangeUserList = (userId, e)=>{
11
26
  let newUserIds = listUserId.slice();
12
27
  if (e.target.checked) onListUserIdChange([
@@ -18,16 +33,13 @@ function SearchUserGroupUser(props) {
18
33
  onListUserIdChange(newUserIds);
19
34
  }
20
35
  };
21
- const handleSearch = (searchString)=>{
22
- setKeyWordSearch(searchString);
23
- if (onSearch) onSearch(searchString);
24
- };
25
36
  return /*#__PURE__*/ jsxs(Paper, {
26
37
  sx: (theme)=>({
27
- padding: (theme)=>theme.spacing(3),
38
+ padding: theme.spacing(3),
28
39
  border: theme.palette.background.paper,
29
40
  minHeight: '200px',
30
- position: 'relative'
41
+ position: 'relative',
42
+ height: '89vh'
31
43
  }),
32
44
  children: [
33
45
  /*#__PURE__*/ jsx(SearchBox, {
@@ -36,7 +48,7 @@ function SearchUserGroupUser(props) {
36
48
  width: '100%'
37
49
  },
38
50
  onSearch: (_searchType, searchString)=>{
39
- handleSearch(searchString);
51
+ onSearch?.(searchString);
40
52
  }
41
53
  }),
42
54
  loading ? /*#__PURE__*/ jsx(Grid, {
@@ -46,31 +58,44 @@ function SearchUserGroupUser(props) {
46
58
  mt: 3
47
59
  },
48
60
  children: /*#__PURE__*/ jsx(CircularProgress, {})
49
- }) : users && users?.length > 0 ? /*#__PURE__*/ jsx(Grid, {
50
- container: true,
61
+ }) : users && users.length > 0 ? /*#__PURE__*/ jsxs(Box, {
62
+ ref: scrollContainerRef,
51
63
  sx: {
64
+ maxHeight: '90%',
65
+ overflowY: 'auto',
52
66
  mt: 3
53
67
  },
54
- children: users?.map((user, key)=>/*#__PURE__*/ jsx(Grid, {
55
- size: {
56
- xs: 12,
57
- sm: 6,
58
- md: 4,
59
- lg: 3
68
+ children: [
69
+ /*#__PURE__*/ jsx(Grid, {
70
+ container: true,
71
+ children: users.map((user, key)=>/*#__PURE__*/ jsx(Grid, {
72
+ size: {
73
+ xs: 12,
74
+ sm: 6,
75
+ md: 4,
76
+ lg: 3
77
+ },
78
+ children: /*#__PURE__*/ jsx(FormControlLabel, {
79
+ control: /*#__PURE__*/ jsx(Checkbox, {
80
+ color: "primary",
81
+ checked: some(listUserId, (id)=>id === user.id),
82
+ onChange: (e)=>void 0 !== user.id && handleChangeUserList(user.id, e),
83
+ value: user.id
84
+ }),
85
+ label: user.username
86
+ })
87
+ }, key))
88
+ }),
89
+ loadingMore && /*#__PURE__*/ jsx(Grid, {
90
+ container: true,
91
+ justifyContent: "center",
92
+ sx: {
93
+ py: 1
60
94
  },
61
- children: /*#__PURE__*/ jsx(FormControlLabel, {
62
- control: /*#__PURE__*/ jsx(Checkbox, {
63
- color: "primary",
64
- checked: some(listUserId, (id)=>id === user.id),
65
- onChange: (e)=>void 0 !== user.id && handleChangeUserList(user.id, e),
66
- value: user.id
67
- }),
68
- label: user.username
69
- })
70
- }, key))
71
- }) : /*#__PURE__*/ jsx(Fragment, {
72
- children: keyWordSearch ? /*#__PURE__*/ jsx(NoData, {}) : null
73
- })
95
+ children: /*#__PURE__*/ jsx(CircularProgress, {})
96
+ })
97
+ ]
98
+ }) : /*#__PURE__*/ jsx(NoData, {})
74
99
  ]
75
100
  });
76
101
  }
@@ -1 +1 @@
1
- {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/Features/SYSTEM/Group/SearchUser/container.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAQlD,UAAU,YAAY;IAClB,aAAa,EAAE,IAAI,EAAE,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CAC7C;AAED,QAAA,MAAM,OAAO,UAAW,YAAY,4CA+GnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/Features/SYSTEM/Group/SearchUser/container.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AASlD,UAAU,YAAY;IAClB,aAAa,EAAE,IAAI,EAAE,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CAC7C;AAID,QAAA,MAAM,OAAO,UAAW,YAAY,4CA4InC,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -6,13 +6,19 @@ import { useTranslation } from "react-i18next";
6
6
  import { ClassicDrawer } from "../../../../Commons/index.js";
7
7
  import { useContextGroup } from "../context.js";
8
8
  import component from "./component.js";
9
+ import { convertArrayFiltersToCondition } from "../../../../index.js";
10
+ const PAGE_SIZE = 50;
9
11
  const AddUser = (props)=>{
10
12
  const { t } = useTranslation();
11
13
  const { usersSelected, onChangeAddUser = ()=>null } = props;
12
14
  const [listUserId, setListUserId] = useState([]);
13
15
  const [usersData, setUsersData] = useState([]);
14
16
  const [loading, setLoading] = useState(false);
17
+ const [loadingMore, setLoadingMore] = useState(false);
18
+ const [hasMore, setHasMore] = useState(false);
15
19
  const usersCache = useRef({});
20
+ const searchStringRef = useRef('');
21
+ const skipRef = useRef(0);
16
22
  const { services } = useContextGroup();
17
23
  useEffect(()=>{
18
24
  setListUserId(usersSelected.length > 0 ? usersSelected.map((item)=>item.id).filter((id)=>void 0 !== id) : []);
@@ -27,45 +33,65 @@ const AddUser = (props)=>{
27
33
  };
28
34
  const handleSubmitUser = (userIds)=>{
29
35
  const newUserIds = lodash.differenceWith(userIds, usersSelected, (a, b)=>a === b.id);
30
- const newUsers = [
31
- ...newUserIds.map((userId)=>{
32
- const user = usersCache.current[userId];
33
- return {
34
- id: userId,
35
- username: user?.username ?? '',
36
- name: user?.name ?? ''
37
- };
38
- })
39
- ];
36
+ const newUsers = newUserIds.map((userId)=>{
37
+ const user = usersCache.current[userId];
38
+ return {
39
+ id: userId,
40
+ username: user?.username ?? '',
41
+ name: user?.name ?? ''
42
+ };
43
+ });
40
44
  onChangeAddUser(newUsers);
41
45
  };
42
- const fetchUsers = (searchString)=>{
43
- if (services?.getUsers) {
44
- setLoading(true);
45
- services.getUsers({
46
+ const fetchUsers = (searchString, skip, isLoadMore)=>{
47
+ if (!services?.getUsers) return;
48
+ isLoadMore ? setLoadingMore(true) : setLoading(true);
49
+ services.getUsers({
50
+ input: {
46
51
  where: {
47
- username: {
48
- eq: searchString
49
- }
50
- }
51
- }).then((data)=>{
52
- setUsersData(data.users);
53
- data.users.forEach((user)=>{
54
- if (void 0 !== user.id) usersCache.current[user.id] = user;
55
- });
56
- }).finally(()=>setLoading(false));
57
- }
52
+ ...convertArrayFiltersToCondition([
53
+ {
54
+ key: 'name',
55
+ value: searchString.trim(),
56
+ type: 'contains'
57
+ }
58
+ ])
59
+ },
60
+ skip,
61
+ take: PAGE_SIZE
62
+ }
63
+ }).then((data)=>{
64
+ data.users.forEach((user)=>{
65
+ if (void 0 !== user.id) usersCache.current[user.id] = user;
66
+ });
67
+ isLoadMore ? setUsersData((prev)=>[
68
+ ...prev,
69
+ ...data.users
70
+ ]) : setUsersData(data.users);
71
+ setHasMore(skip + data.users.length < data.total);
72
+ }).finally(()=>{
73
+ isLoadMore ? setLoadingMore(false) : setLoading(false);
74
+ });
58
75
  };
59
- const debouncedFetchUsers = useRef(lodash.debounce((query)=>{
60
- fetchUsers(query);
76
+ const debouncedFetch = useRef(lodash.debounce((searchString)=>{
77
+ skipRef.current = 0;
78
+ fetchUsers(searchString, 0, false);
61
79
  }, 500)).current;
62
80
  const handleSearch = (val)=>{
63
- if ('' !== val) debouncedFetchUsers(val);
81
+ searchStringRef.current = val;
82
+ if ('' !== val) debouncedFetch(val);
64
83
  else {
65
- debouncedFetchUsers.cancel();
84
+ debouncedFetch.cancel();
85
+ skipRef.current = 0;
66
86
  setUsersData([]);
87
+ setHasMore(false);
67
88
  }
68
89
  };
90
+ const handleLoadMore = ()=>{
91
+ const newSkip = skipRef.current + PAGE_SIZE;
92
+ skipRef.current = newSkip;
93
+ fetchUsers(searchStringRef.current, newSkip, true);
94
+ };
69
95
  return /*#__PURE__*/ jsx(ClassicDrawer, {
70
96
  title: t('UserGroup.TitleAdd'),
71
97
  onSubmit: ()=>new Promise((resolve, _reject)=>{
@@ -85,7 +111,10 @@ const AddUser = (props)=>{
85
111
  listUserId: listUserId,
86
112
  onListUserIdChange: handleListUserIdChange,
87
113
  onSearch: handleSearch,
88
- loading: loading
114
+ loading: loading,
115
+ loadingMore: loadingMore,
116
+ hasMore: hasMore,
117
+ onLoadMore: handleLoadMore
89
118
  })
90
119
  })
91
120
  });
@@ -1,5 +1,5 @@
1
1
  import type { Group, GroupInput } from './types';
2
- import type { CustomPagingRequestInput, PagingQueryInput } from '../../types';
2
+ import type { CustomPagingRequestInput } from '../../types';
3
3
  import { User } from '../User/types';
4
4
  import { MenuOption, ValueBase } from '../../../AWING/interface';
5
5
  import { fetchOptionsType } from '../../../AWING/AsyncAutocomplete';
@@ -8,7 +8,9 @@ export type GroupServices = {
8
8
  /** Get Users
9
9
  * @param p - PagingQueryInput<Users> - Không truyền param sẽ lấy tất cả Users
10
10
  */
11
- getUsers: (p?: PagingQueryInput<User>) => Promise<{
11
+ getUsers: (p?: {
12
+ input: CustomPagingRequestInput;
13
+ }) => Promise<{
12
14
  users: User[];
13
15
  total: number;
14
16
  }>;
@@ -1 +1 @@
1
- {"version":3,"file":"Services.d.ts","sourceRoot":"","sources":["../../../../src/Features/SYSTEM/Group/Services.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG;IAExB,WAAW,EAAE,gBAAgB,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC;QAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEpF,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,wBAAwB,CAAA;KAAE,KAAK,OAAO,CAAC;QAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEpG,yBAAyB;IACzB,WAAW,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEzC,YAAY,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;IAEpD,uBAAuB;IACvB,WAAW,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzD,yBAAyB;IACzB,WAAW,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzF,8BAA8B;IAC9B,SAAS,EAAE,OAAO,CAAC;IAEnB,iCAAiC;IACjC,eAAe,EAAE,OAAO,CAAC;CAC5B,CAAC"}
1
+ {"version":3,"file":"Services.d.ts","sourceRoot":"","sources":["../../../../src/Features/SYSTEM/Group/Services.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG;IAExB,WAAW,EAAE,gBAAgB,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,wBAAwB,CAAA;KAAE,KAAK,OAAO,CAAC;QAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEjG,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,wBAAwB,CAAA;KAAE,KAAK,OAAO,CAAC;QAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEpG,yBAAyB;IACzB,WAAW,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEzC,YAAY,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;IAEpD,uBAAuB;IACvB,WAAW,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzD,yBAAyB;IACzB,WAAW,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzF,8BAA8B;IAC9B,SAAS,EAAE,OAAO,CAAC;IAEnB,iCAAiC;IACjC,eAAe,EAAE,OAAO,CAAC;CAC5B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "awing-library",
3
- "version": "2.1.2-stable.30",
3
+ "version": "2.1.2-stable.32",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {