feat(emailtemplates): fix search bug (#3994)

erxes · Jan 4, 2023 · a3890f1 · a3890f1
1 parent 1a0d8c0
commit a3890f1
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 37 deletions.
diff --git a/packages/plugin-emailtemplates-api/src/graphql/resolvers/queries/emailTemplates.ts b/packages/plugin-emailtemplates-api/src/graphql/resolvers/queries/emailTemplates.ts
@@ -49,8 +49,14 @@ const emailTemplateQueries = {
   /**
    * Get all email templates count. We will use it in pager
    */
-  emailTemplatesTotalCount(_root, _args, { models }: IContext) {
-    return models.EmailTemplates.find({}).countDocuments();
+  emailTemplatesTotalCount(_root, { searchValue }, { models }: IContext) {
+    const filter: any = {};
+
+    if (searchValue) {
+      filter.name = new RegExp(`.*${searchValue}.*`, 'i');
+    }
+
+    return models.EmailTemplates.find(filter).countDocuments();
   }
 };
 

diff --git a/packages/plugin-emailtemplates-api/src/graphql/schema/emailTemplate.ts b/packages/plugin-emailtemplates-api/src/graphql/schema/emailTemplate.ts
@@ -18,7 +18,7 @@ export const types = `
 
 export const queries = `
   emailTemplates(page: Int, perPage: Int, searchValue: String, status: String): [EmailTemplate]
-  emailTemplatesTotalCount: Int
+  emailTemplatesTotalCount(searchValue: String): Int
 `;
 
 export const mutations = `

diff --git a/packages/plugin-emailtemplates-ui/src/containers/List.tsx b/packages/plugin-emailtemplates-ui/src/containers/List.tsx
@@ -78,11 +78,14 @@ export default commonListComposer<Props>({
       };
     }
   }),
-
   gqlTotalCountQuery: graphql(gql(queries.totalCount), {
-    name: 'totalCountQuery'
+    name: 'totalCountQuery',
+    options: ({ queryParams }: { queryParams: any }) => ({
+      variables: {
+        searchValue: queryParams.searchValue
+      }
+    })
   }),
-
   gqlAddMutation: graphql(gql(mutations.emailTemplatesAdd), {
     name: 'addMutation'
   }),

diff --git a/packages/plugin-emailtemplates-ui/src/graphql/queries.ts b/packages/plugin-emailtemplates-ui/src/graphql/queries.ts
@@ -20,8 +20,8 @@ const emailTemplates = `
 `;
 
 const totalCount = `
-  query emailTemplatesTotalCount {
-    emailTemplatesTotalCount
+  query emailTemplatesTotalCount($searchValue: String) {
+    emailTemplatesTotalCount(searchValue: $searchValue)
   }
 `;
 

diff --git a/packages/plugin-inbox-ui/src/inbox/components/InboxCore.tsx b/packages/plugin-inbox-ui/src/inbox/components/InboxCore.tsx
@@ -32,7 +32,13 @@ class Inbox extends React.Component<Props> {
 
     const menuInbox = [{ title: 'Team Inbox', link: '/inbox/index' }];
 
-    const content = () => <MailForm isReply={false} clearOnSubmit={true} />;
+    const content = () => (
+      <MailForm
+        isReply={false}
+        clearOnSubmit={true}
+        queryParams={queryParams}
+      />
+    );
 
     const sendEmail = (
       <ModalTrigger

diff --git a/packages/ui-inbox/src/settings/integrations/components/mail/emailTemplate/EmailTemplate.tsx b/packages/ui-inbox/src/settings/integrations/components/mail/emailTemplate/EmailTemplate.tsx
@@ -17,18 +17,20 @@ import { PopoverLinkWrapper } from '../styles';
 import React from 'react';
 import { SearchInput } from '../../../styles';
 import Tip from '@erxes/ui/src/components/Tip';
-import { __ } from '@erxes/ui/src/utils';
+import { __, router } from '@erxes/ui/src/utils';
+import { withRouter } from 'react-router-dom';
+import { IRouterProps } from '@erxes/ui/src/types';
 
 type Props = {
   fetchMoreEmailTemplates: (page: number) => void;
   targets: Array<{ value: string; label: string }>;
   onSelect: (id: string) => void;
   totalCount?: number;
-};
+  history: any;
+} & IRouterProps;
 
 type State = {
   page: number;
-  searchValue: string;
 };
 
 class EmailTemplate extends React.Component<Props, State> {
@@ -38,14 +40,18 @@ class EmailTemplate extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      page: 1,
-      searchValue: ''
+      page: 1
     };
   }
 
   onSearch = e => {
-    const searchValue = e.target.value.toLowerCase();
-    this.setState({ searchValue });
+    const { history } = this.props;
+
+    const searchValue = e.target.value;
+
+    router.setParams(history, { searchValue });
+
+    this.setState({ page: 1 });
   };
 
   handleFetch = () => {
@@ -68,24 +74,14 @@ class EmailTemplate extends React.Component<Props, State> {
     this.overlayRef.hide();
   };
 
-  filterByValue(array, value) {
-    return array.filter(o =>
-      o.label.toLowerCase().includes(value.toLowerCase())
-    );
-  }
-
   renderContent() {
     const { targets = [] } = this.props;
-    const { searchValue } = this.state;
 
-    const filteredTargets =
-      searchValue === '' ? targets : this.filterByValue(targets, searchValue);
-
-    if (!filteredTargets || filteredTargets.length === 0) {
+    if (!targets || targets.length === 0) {
       return <EmptyState icon="clipboard-1" text="No templates" />;
     }
 
-    return filteredTargets.map(item => {
+    return targets.map(item => {
       const onClick = () => this.handleClick(item.value);
 
       return (
@@ -99,7 +95,7 @@ class EmailTemplate extends React.Component<Props, State> {
   renderLoadMore() {
     const { totalCount, targets } = this.props;
 
-    if (totalCount === targets.length - 1 || targets.length < 20) {
+    if (totalCount === targets.length || targets.length < 20) {
       return null;
     }
 
@@ -118,6 +114,8 @@ class EmailTemplate extends React.Component<Props, State> {
   }
 
   render() {
+    const { history } = this.props;
+
     const popover = (
       <Popover id="templates-popover">
         <Popover.Title as="h3">{__('Email Templates')}</Popover.Title>
@@ -129,6 +127,7 @@ class EmailTemplate extends React.Component<Props, State> {
                 type="text"
                 placeholder={__('Type to search')}
                 onChange={this.onSearch}
+                value={router.getParam(history, 'searchValue')}
               />
             </SearchInput>
             <PopoverList>
@@ -170,4 +169,4 @@ class EmailTemplate extends React.Component<Props, State> {
   }
 }
 
-export default EmailTemplate;
+export default withRouter(EmailTemplate);
diff --git a/packages/ui-inbox/src/settings/integrations/containers/mail/MailForm.tsx b/packages/ui-inbox/src/settings/integrations/containers/mail/MailForm.tsx
@@ -41,6 +41,7 @@ type Props = {
   closeModal?: () => void;
   closeReply?: () => void;
   callback?: () => void;
+  queryParams?: any;
 };
 
 type FinalProps = {
@@ -309,12 +310,21 @@ export default withProps<Props>(
   compose(
     graphql<Props, any>(gql(queries.emailTemplates), {
       name: 'emailTemplatesQuery',
-      options: () => ({
-        variables: { page: 1 }
+      options: ({ queryParams }) => ({
+        variables: {
+          searchValue: queryParams.searchValue || ''
+        },
+        fetchPolicy: 'network-only'
       })
     }),
     graphql<Props, any>(gql(queries.templateTotalCount), {
-      name: 'emailTemplatesTotalCountQuery'
+      name: 'emailTemplatesTotalCountQuery',
+      options: ({ queryParams }) => ({
+        variables: {
+          searchValue: queryParams.searchValue || ''
+        },
+        fetchPolicy: 'network-only'
+      })
     })
   )(withCurrentUser(MailFormContainer))
 );
diff --git a/packages/ui-inbox/src/settings/integrations/graphql/queries.ts b/packages/ui-inbox/src/settings/integrations/graphql/queries.ts
@@ -193,8 +193,8 @@ const integrationsVideoCallUsageStatus = `
 `;
 
 const emailTemplates = `
-  query emailTemplates($page: Int, $perPage: Int) {
-    emailTemplates(page: $page, perPage: $perPage) {
+  query emailTemplates($page: Int, $perPage: Int, $searchValue: String) {
+    emailTemplates(page: $page, perPage: $perPage, searchValue: $searchValue) {
       _id
       name
       content
@@ -203,8 +203,8 @@ const emailTemplates = `
 `;
 
 const templateTotalCount = `
-  query emailTemplatesTotalCount {
-    emailTemplatesTotalCount
+  query emailTemplatesTotalCount($searchValue: String) {
+    emailTemplatesTotalCount(searchValue: $searchValue)
   }
 `;