('');
const [uploadingContacts, setUploadingContacts] = useState(false);
@@ -32,13 +32,14 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
const [collection] = useState();
const [optedIn] = useState(false);
- const { data: collections, loading } = useQuery(FILTER_COLLECTIONS, {
+ const { data: collections, loading } = useQuery(GET_COLLECTIONS_LIST, {
variables: {
filter: {
groupType: 'WABA',
+ label: searchTerm,
},
opts: {
- limit: null,
+ limit: 50,
offset: 0,
order: 'ASC',
},
@@ -94,6 +95,8 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
multiple: false,
optionLabel: 'label',
label: t('Collection'),
+ onInputChange: (event: any) => setSearchTerm(event?.target?.value),
+ noOptionsText: loading ? 'Loading...' : 'No options available',
},
{
component: Checkbox,
@@ -133,32 +136,28 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
alignButtons="left"
disableOk={!csvContent}
>
- {loading ? (
-
- ) : (
- <>
-
- {formFieldItems.map((field: any) => (
-
- ))}
-
+ <>
+
+ {formFieldItems.map((field: any) => (
+
+ ))}
+
-
- {
- setFileName(media.name);
- setCsvContent(result);
- }}
- fileType=".csv"
- />
-
-
- >
- )}
+
+ {
+ setFileName(media.name);
+ setCsvContent(result);
+ }}
+ fileType=".csv"
+ />
+
+
+ >
)}
diff --git a/src/graphql/queries/Collection.ts b/src/graphql/queries/Collection.ts
index d36d6bf93..d521456ba 100644
--- a/src/graphql/queries/Collection.ts
+++ b/src/graphql/queries/Collection.ts
@@ -109,3 +109,12 @@ export const EXPORT_COLLECTION_DATA = gql`
}
}
`;
+
+export const GET_COLLECTIONS_LIST = gql`
+ query groups($filter: GroupFilter!, $opts: Opts!) {
+ groups(filter: $filter, opts: $opts) {
+ id
+ label
+ }
+ }
+`;
diff --git a/src/mocks/Collection.tsx b/src/mocks/Collection.tsx
index f99f918d9..fa4689bfc 100644
--- a/src/mocks/Collection.tsx
+++ b/src/mocks/Collection.tsx
@@ -5,6 +5,7 @@ import {
GET_COLLECTION,
GET_COLLECTIONS,
GET_COLLECTIONS_COUNT,
+ GET_COLLECTIONS_LIST,
GET_COLLECTION_INFO,
GET_COLLECTION_USERS,
GET_ORGANIZATION_COLLECTIONS,
@@ -443,3 +444,38 @@ export const deleteContactFromCollection = {
},
},
};
+
+export const getCollectionsList = (label?: string) => ({
+ request: {
+ query: GET_COLLECTIONS_LIST,
+ variables: {
+ filter: {
+ groupType: 'WABA',
+ label,
+ },
+ opts: {
+ limit: 50,
+ offset: 0,
+ order: 'ASC',
+ },
+ },
+ },
+ result: {
+ data: {
+ groups: [
+ {
+ id: '1',
+ label: 'Staff group',
+ },
+ {
+ id: '2',
+ label: 'Optin group',
+ },
+ {
+ id: '3',
+ label: 'Optout group',
+ },
+ ],
+ },
+ },
+});