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

package/dist/Features/SYSTEM/Group/SearchUser/component.d.ts

@@ -5,6 +5,9 @@ interface SearchUserGroupUserProps {
     users: User[];
     onSearch?: (searchString: string) => void;
     loading?: boolean;
+    loadingMore?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
 }
 declare function SearchUserGroupUser(props: SearchUserGroupUserProps): import("react/jsx-runtime").JSX.Element;
 export default SearchUserGroupUser;

package/dist/Features/SYSTEM/Group/SearchUser/component.d.ts.map

@@ -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,2CAqE3D;AAED,eAAe,mBAAmB,CAAC"}
+{"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"}

package/dist/Features/SYSTEM/Group/SearchUser/component.js

@@ -1,10 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { filter, some } from "lodash";
-import { Checkbox, FormControlLabel, Paper } from "@mui/material";
+import { Box, Checkbox, FormControlLabel, Paper } from "@mui/material";
 import { CircularProgress, NoData, SearchBox } from "../../../../AWING/index.js";
 import Grid from "@mui/material/Grid";
 function SearchUserGroupUser(props) {
-    const { listUserId, onListUserIdChange, users, onSearch, loading } = props;
+    const { listUserId, onListUserIdChange, users, onSearch, loading, loadingMore = false, hasMore = false, onLoadMore } = props;
+    const scrollContainerRef = useRef(null);
+    useEffect(()=>{
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        if (hasMore && !loadingMore && container.scrollHeight <= container.clientHeight) return void onLoadMore?.();
+        const handleScroll = ()=>{
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            if (scrollHeight - scrollTop <= clientHeight + 50 && hasMore && !loadingMore) onLoadMore?.();
+        };
+        container.addEventListener('scroll', handleScroll);
+        return ()=>container.removeEventListener('scroll', handleScroll);
+    }, [
+        hasMore,
+        loadingMore,
+        onLoadMore
+    ]);
     const handleChangeUserList = (userId, e)=>{
         let newUserIds = listUserId.slice();
         if (e.target.checked) onListUserIdChange([
@@ -16,15 +33,13 @@ function SearchUserGroupUser(props) {
             onListUserIdChange(newUserIds);
         }
     };
-    const handleSearch = (searchString)=>{
-        if (onSearch) onSearch(searchString);
-    };
     return /*#__PURE__*/ jsxs(Paper, {
         sx: (theme)=>({
-                padding: (theme)=>theme.spacing(3),
+                padding: theme.spacing(3),
                 border: theme.palette.background.paper,
                 minHeight: '200px',
-                position: 'relative'
+                position: 'relative',
+                height: '89vh'
             }),
         children: [
             /*#__PURE__*/ jsx(SearchBox, {
@@ -33,7 +48,7 @@ function SearchUserGroupUser(props) {
                     width: '100%'
                 },
                 onSearch: (_searchType, searchString)=>{
-                    handleSearch(searchString);
+                    onSearch?.(searchString);
                 }
             }),
             loading ? /*#__PURE__*/ jsx(Grid, {
@@ -43,28 +58,43 @@ function SearchUserGroupUser(props) {
                     mt: 3
                 },
                 children: /*#__PURE__*/ jsx(CircularProgress, {})
-            }) : users && users?.length > 0 ? /*#__PURE__*/ jsx(Grid, {
-                container: true,
+            }) : users && users.length > 0 ? /*#__PURE__*/ jsxs(Box, {
+                ref: scrollContainerRef,
                 sx: {
+                    maxHeight: '90%',
+                    overflowY: 'auto',
                     mt: 3
                 },
-                children: users?.map((user, key)=>/*#__PURE__*/ jsx(Grid, {
-                        size: {
-                            xs: 12,
-                            sm: 6,
-                            md: 4,
-                            lg: 3
+                children: [
+                    /*#__PURE__*/ jsx(Grid, {
+                        container: true,
+                        children: users.map((user, key)=>/*#__PURE__*/ jsx(Grid, {
+                                size: {
+                                    xs: 12,
+                                    sm: 6,
+                                    md: 4,
+                                    lg: 3
+                                },
+                                children: /*#__PURE__*/ jsx(FormControlLabel, {
+                                    control: /*#__PURE__*/ jsx(Checkbox, {
+                                        color: "primary",
+                                        checked: some(listUserId, (id)=>id === user.id),
+                                        onChange: (e)=>void 0 !== user.id && handleChangeUserList(user.id, e),
+                                        value: user.id
+                                    }),
+                                    label: user.username
+                                })
+                            }, key))
+                    }),
+                    loadingMore && /*#__PURE__*/ jsx(Grid, {
+                        container: true,
+                        justifyContent: "center",
+                        sx: {
+                            py: 1
                         },
-                        children: /*#__PURE__*/ jsx(FormControlLabel, {
-                            control: /*#__PURE__*/ jsx(Checkbox, {
-                                color: "primary",
-                                checked: some(listUserId, (id)=>id === user.id),
-                                onChange: (e)=>void 0 !== user.id && handleChangeUserList(user.id, e),
-                                value: user.id
-                            }),
-                            label: user.username
-                        })
-                    }, key))
+                        children: /*#__PURE__*/ jsx(CircularProgress, {})
+                    })
+                ]
             }) : /*#__PURE__*/ jsx(NoData, {})
         ]
     });

package/dist/Features/SYSTEM/Group/SearchUser/container.d.ts.map

@@ -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"}
+{"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"}

package/dist/Features/SYSTEM/Group/SearchUser/container.js

@@ -6,13 +6,19 @@ import { useTranslation } from "react-i18next";
 import { ClassicDrawer } from "../../../../Commons/index.js";
 import { useContextGroup } from "../context.js";
 import component from "./component.js";
+import { convertArrayFiltersToCondition } from "../../../../index.js";
+const PAGE_SIZE = 50;
 const AddUser = (props)=>{
     const { t } = useTranslation();
     const { usersSelected, onChangeAddUser = ()=>null } = props;
     const [listUserId, setListUserId] = useState([]);
     const [usersData, setUsersData] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [hasMore, setHasMore] = useState(false);
     const usersCache = useRef({});
+    const searchStringRef = useRef('');
+    const skipRef = useRef(0);
     const { services } = useContextGroup();
     useEffect(()=>{
         setListUserId(usersSelected.length > 0 ? usersSelected.map((item)=>item.id).filter((id)=>void 0 !== id) : []);
@@ -27,45 +33,65 @@ const AddUser = (props)=>{
     };
     const handleSubmitUser = (userIds)=>{
         const newUserIds = lodash.differenceWith(userIds, usersSelected, (a, b)=>a === b.id);
-        const newUsers = [
-            ...newUserIds.map((userId)=>{
-                const user = usersCache.current[userId];
-                return {
-                    id: userId,
-                    username: user?.username ?? '',
-                    name: user?.name ?? ''
-                };
-            })
-        ];
+        const newUsers = newUserIds.map((userId)=>{
+            const user = usersCache.current[userId];
+            return {
+                id: userId,
+                username: user?.username ?? '',
+                name: user?.name ?? ''
+            };
+        });
         onChangeAddUser(newUsers);
     };
-    const fetchUsers = (searchString)=>{
-        if (services?.getUsers) {
-            setLoading(true);
-            services.getUsers({
+    const fetchUsers = (searchString, skip, isLoadMore)=>{
+        if (!services?.getUsers) return;
+        isLoadMore ? setLoadingMore(true) : setLoading(true);
+        services.getUsers({
+            input: {
                 where: {
-                    username: {
-                        eq: searchString
-                    }
-                }
-            }).then((data)=>{
-                setUsersData(data.users);
-                data.users.forEach((user)=>{
-                    if (void 0 !== user.id) usersCache.current[user.id] = user;
-                });
-            }).finally(()=>setLoading(false));
-        }
+                    ...convertArrayFiltersToCondition([
+                        {
+                            key: 'name',
+                            value: searchString.trim(),
+                            type: 'contains'
+                        }
+                    ])
+                },
+                skip,
+                take: PAGE_SIZE
+            }
+        }).then((data)=>{
+            data.users.forEach((user)=>{
+                if (void 0 !== user.id) usersCache.current[user.id] = user;
+            });
+            isLoadMore ? setUsersData((prev)=>[
+                    ...prev,
+                    ...data.users
+                ]) : setUsersData(data.users);
+            setHasMore(skip + data.users.length < data.total);
+        }).finally(()=>{
+            isLoadMore ? setLoadingMore(false) : setLoading(false);
+        });
     };
-    const debouncedFetchUsers = useRef(lodash.debounce((query)=>{
-        fetchUsers(query);
+    const debouncedFetch = useRef(lodash.debounce((searchString)=>{
+        skipRef.current = 0;
+        fetchUsers(searchString, 0, false);
     }, 500)).current;
     const handleSearch = (val)=>{
-        if ('' !== val) debouncedFetchUsers(val);
+        searchStringRef.current = val;
+        if ('' !== val) debouncedFetch(val);
         else {
-            debouncedFetchUsers.cancel();
+            debouncedFetch.cancel();
+            skipRef.current = 0;
             setUsersData([]);
+            setHasMore(false);
         }
     };
+    const handleLoadMore = ()=>{
+        const newSkip = skipRef.current + PAGE_SIZE;
+        skipRef.current = newSkip;
+        fetchUsers(searchStringRef.current, newSkip, true);
+    };
     return /*#__PURE__*/ jsx(ClassicDrawer, {
         title: t('UserGroup.TitleAdd'),
         onSubmit: ()=>new Promise((resolve, _reject)=>{
@@ -85,7 +111,10 @@ const AddUser = (props)=>{
                 listUserId: listUserId,
                 onListUserIdChange: handleListUserIdChange,
                 onSearch: handleSearch,
-                loading: loading
+                loading: loading,
+                loadingMore: loadingMore,
+                hasMore: hasMore,
+                onLoadMore: handleLoadMore
             })
         })
     });

package/dist/Features/SYSTEM/Group/Services.d.ts

@@ -1,5 +1,5 @@
 import type { Group, GroupInput } from './types';
-import type { CustomPagingRequestInput, PagingQueryInput } from '../../types';
+import type { CustomPagingRequestInput } from '../../types';
 import { User } from '../User/types';
 import { MenuOption, ValueBase } from '../../../AWING/interface';
 import { fetchOptionsType } from '../../../AWING/AsyncAutocomplete';
@@ -8,7 +8,9 @@ export type GroupServices = {
     /** Get Users
      * @param p - PagingQueryInput<Users> - Không truyền param sẽ lấy tất cả Users
      */
-    getUsers: (p?: PagingQueryInput<User>) => Promise<{
+    getUsers: (p?: {
+        input: CustomPagingRequestInput;
+    }) => Promise<{
         users: User[];
         total: number;
     }>;

package/dist/Features/SYSTEM/Group/Services.d.ts.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
     "name": "awing-library",
-    "version": "2.1.2-stable.31",
+    "version": "2.1.2-stable.32",
     "license": "MIT",
     "exports": {
         ".": {