Skip to content

Commit ab25e82

Browse files
rusp-odoorusp-odoo
committed
[ADD] outlook: add refresh button and generalize functionality with search
After this commit: - Add a refrech button to refrech the data from the back-end.
1 parent c638d43 commit ab25e82

File tree

4 files changed

+89
-87
lines changed

4 files changed

+89
-87
lines changed

‎outlook/src/taskpane/api.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ const api = {
1414
searchPartner: '/mail_plugin/partner/search',
1515
getTranslations: '/mail_plugin/get_translations',
1616
searchProject: '/mail_plugin/project/search',
17-
getLeads: '/mail/plugin/leads/search',
18-
getTasks: '/mail/plugin/tasks/search',
19-
getTickets: '/mail/plugin/tickets/search',
17+
Leads: '/mail/plugin/leads',
18+
Tasks: '/mail/plugin/tasks',
19+
Tickets: '/mail/plugin/tickets',
2020

2121
// Authentication
2222
loginPage: '/web/login', // Should be the usual Odoo login page.

‎outlook/src/taskpane/components/CollapseSection/CollapseSection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { faChevronDown, faChevronRight, faPlus } from '@fortawesome/free-solid-s
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
44
import './CollapseSection.css';
55
import { ReactElement } from 'react';
6-
import SearchRefrech from '../SearchRefrech/SearchRefrech';
6+
import HelpdeskTicket from '../../../classes/HelpdeskTicket';
77
import Lead from '../../../classes/Lead';
88
import Partner from '../../../classes/Partner';
9+
import SearchRefrech from '../SearchRefrech/SearchRefrech';
910
import Task from '../../../classes/Task';
10-
import HelpdeskTicket from '../../../classes/HelpdeskTicket';
1111

1212
type CollapseSectionProps = {
1313
title: string;
@@ -20,7 +20,7 @@ type CollapseSectionProps = {
2020
partner?: Partner;
2121
searchType?: 'lead' | 'task' | 'ticket';
2222
setIsLoading?: (isLoading: boolean) => void;
23-
updateRecords?: (records: Lead[] | Task[] | HelpdeskTicket[] | any | null) => void;
23+
updateRecords?: (records: Lead[] | Task[] | HelpdeskTicket[]) => void;
2424
};
2525

2626
type CollapseSectionSate = {

‎outlook/src/taskpane/components/SearchRefrech/SearchRefrech.tsx‎

Lines changed: 79 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2-
import { TextField, TooltipHost } from 'office-ui-fabric-react';
31
import * as React from 'react';
42
import { _t } from '../../../utils/Translator';
5-
import { faArrowLeft, faRedoAlt, faSearch } from '@fortawesome/free-solid-svg-icons';
63
import { ContentType, HttpVerb, sendHttpRequest } from '../../../utils/httpRequest';
7-
import api from '../../api';
4+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5+
import { TextField, TooltipHost } from 'office-ui-fabric-react';
6+
import { faArrowLeft, faRedoAlt, faSearch } from '@fortawesome/free-solid-svg-icons';
87
import AppContext from '../AppContext';
8+
import HelpdeskTicket from '../../../classes/HelpdeskTicket';
99
import Lead from '../../../classes/Lead';
1010
import Partner from '../../../classes/Partner';
1111
import Task from '../../../classes/Task';
12-
import HelpdeskTicket from '../../../classes/HelpdeskTicket';
12+
import api from '../../api';
1313

1414
type SearchRefrechProps = {
1515
title: string;
1616
partner: Partner;
1717
searchType: 'lead' | 'task' | 'ticket';
1818
setIsSearching: (isSearching: boolean) => void;
1919
setIsLoading: (isLoading: boolean) => void;
20-
updateRecords: (records: Lead[] | Task[] | HelpdeskTicket[] | any | null) => void;
20+
updateRecords: (records: Lead[] | Task[] | HelpdeskTicket[]) => void;
2121
};
2222

2323
type SearchRefrechState = {
@@ -34,89 +34,91 @@ class SearchRefrech extends React.Component<SearchRefrechProps, SearchRefrechSta
3434
};
3535
}
3636

37-
render() {
38-
let broadCampStyle = {
39-
display: 'flex',
40-
justifyContent: 'space-between',
41-
alignItems: 'center',
42-
fontSize: 'medium',
43-
color: '#787878',
44-
fontWeight: 600,
45-
marginRight: '10px',
46-
};
47-
48-
const onBackClick = () => {
37+
private onBackClick = () => {
4938
this.setState({ isSearching: !this.state.isSearching, query: '' });
5039
this.props.updateRecords(null);
5140
this.props.setIsSearching(false);
5241
};
5342

54-
const onSearchClick = () => {
55-
this.setState({ isSearching: true });
56-
this.props.setIsSearching(true);
57-
};
43+
private onRefrechClick = () => {
44+
this.searchData();
45+
};
5846

59-
const onKeyDown = (event) => {
60-
if (event.key == 'Enter') {
61-
if (!this.state.query.trim()) {
62-
return;
63-
}
64-
searchData(this.state.query);
65-
}
66-
};
47+
private onSearchClick = () => {
48+
this.setState({ isSearching: true });
49+
this.props.setIsSearching(true);
50+
};
6751

68-
const onRefrechClick = () => {
69-
if (this.state.query) {
70-
searchData(this.state.query);
52+
private onKeyDown = (event) => {
53+
if (event.key == 'Enter') {
54+
if (!this.state.query.trim()) {
55+
return;
7156
}
72-
};
73-
74-
const searchData = async (query: string) => {
75-
this.props.setIsLoading(true);
76-
77-
let endPoint = '';
57+
this.searchData(this.state.query);
58+
}
59+
};
60+
61+
private getEndPoint = (params: string) => {
62+
let endPoint = '';
63+
if (this.props.searchType === 'lead') {
64+
endPoint = api.Leads;
65+
} else if (this.props.searchType === 'task') {
66+
endPoint = api.Tasks;
67+
} else {
68+
endPoint = api.Tickets;
69+
}
70+
return endPoint + `/${params}`;
71+
};
72+
73+
private searchData = async (query?: string) => {
74+
this.props.setIsLoading(true);
75+
let endPoint = '';
76+
if (query) {
77+
endPoint = this.getEndPoint('search');
78+
} else {
79+
endPoint = this.getEndPoint('refresh');
80+
}
81+
try {
82+
const res = sendHttpRequest(
83+
HttpVerb.POST,
84+
api.baseURL + endPoint,
85+
ContentType.Json,
86+
this.context.getConnectionToken(),
87+
{ query: query, partner: this.props.partner },
88+
true,
89+
);
90+
const data = JSON.parse(await res.promise);
7891
if (this.props.searchType === 'lead') {
79-
endPoint = api.getLeads;
92+
data.result = data.result.map((lead: Lead) => Lead.fromJSON(lead));
8093
} else if (this.props.searchType === 'task') {
81-
endPoint = api.getTasks;
94+
data.result = data.result.map((task: Task) => Task.fromJSON(task));
8295
} else {
83-
endPoint = api.getTickets;
96+
data.result = data.result.map((ticket: HelpdeskTicket) => HelpdeskTicket.fromJSON(ticket));
8497
}
85-
86-
try {
87-
const res = sendHttpRequest(
88-
HttpVerb.POST,
89-
api.baseURL + endPoint,
90-
ContentType.Json,
91-
this.context.getConnectionToken(),
92-
{ query: query, partner_id: this.props.partner.id },
93-
true,
94-
);
95-
96-
const data = JSON.parse(await res.promise);
97-
98-
if (this.props.searchType === 'lead') {
99-
data.result = data.result.map((lead: Lead) => Lead.fromJSON(lead));
100-
} else if (this.props.searchType === 'task') {
101-
data.result = data.result.map((task: Task) => Task.fromJSON(task));
102-
} else {
103-
data.result = data.result.map((ticket: HelpdeskTicket) => HelpdeskTicket.fromJSON(ticket));
104-
}
105-
106-
if (data.result) {
107-
this.props.updateRecords(data.result);
108-
}
109-
this.props.setIsLoading(false);
110-
} catch (error) {
111-
this.props.setIsLoading(false);
112-
this.context.showHttpErrorMessage(error);
98+
if (data.result) {
99+
this.props.updateRecords(data.result);
113100
}
101+
this.props.setIsLoading(false);
102+
} catch (error) {
103+
this.props.setIsLoading(false);
104+
this.context.showHttpErrorMessage(error);
105+
}
106+
};
107+
108+
render() {
109+
let broadCampStyle = {
110+
display: 'flex',
111+
justifyContent: 'space-between',
112+
alignItems: 'center',
113+
fontSize: 'medium',
114+
color: '#787878',
115+
fontWeight: 600,
114116
};
115117

116118
let backButton = null;
117119
if (this.state.isSearching) {
118120
backButton = (
119-
<div className="odoo-muted-button" onClick={onBackClick} style={{ border: 'none' }}>
121+
<div className="odoo-muted-button" onClick={this.onBackClick} style={{ border: 'none' }}>
120122
<FontAwesomeIcon icon={faArrowLeft} />
121123
</div>
122124
);
@@ -127,7 +129,7 @@ class SearchRefrech extends React.Component<SearchRefrechProps, SearchRefrechSta
127129
searchButton = (
128130
<div style={{ display: 'flex' }}>
129131
<TooltipHost content={_t(`Search ${this.props.title.slice(0, this.props.title.indexOf(' '))}`)}>
130-
<div className="odoo-muted-button" onClick={onSearchClick} style={{ border: 'none' }}>
132+
<div className="odoo-muted-button" onClick={this.onSearchClick} style={{ border: 'none' }}>
131133
<FontAwesomeIcon icon={faSearch} />
132134
</div>
133135
</TooltipHost>
@@ -144,26 +146,26 @@ class SearchRefrech extends React.Component<SearchRefrechProps, SearchRefrechSta
144146
style={{ marginLeft: '2px', marginRight: '2px' }}
145147
placeholder={_t(`Search ${this.props.title.slice(0, this.props.title.indexOf(' '))}`)}
146148
value={this.state.query}
147-
onKeyDown={onKeyDown}
149+
onKeyDown={this.onKeyDown}
148150
onChange={(_, newValue) => this.setState({ query: newValue || '' })}
149151
onFocus={(e) => e.target.select()}
150152
autoFocus
151153
/>
152154
<div
153155
className="odoo-muted-button search-icon"
154156
style={{ border: 'none' }}
155-
onClick={() => searchData(this.state.query)}>
157+
onClick={() => this.searchData(this.state.query)}>
156158
<FontAwesomeIcon icon={faSearch} />
157159
</div>
158160
</div>
159161
);
160162
}
161163

162164
let refrechButton = null;
163-
if (this.state.isSearching) {
165+
if (!this.state.isSearching) {
164166
refrechButton = (
165167
<TooltipHost content={_t('Refresh search')}>
166-
<div className="odoo-muted-button" onClick={onRefrechClick} style={{ border: 'none' }}>
168+
<div className="odoo-muted-button" onClick={this.onRefrechClick} style={{ border: 'none' }}>
167169
<FontAwesomeIcon icon={faRedoAlt} />
168170
</div>
169171
</TooltipHost>
@@ -174,8 +176,8 @@ class SearchRefrech extends React.Component<SearchRefrechProps, SearchRefrechSta
174176
<div style={broadCampStyle}>
175177
{backButton}
176178
{searchButton}
177-
{searchBar}
178179
{refrechButton}
180+
{searchBar}
179181
</div>
180182
);
181183
}

‎outlook/src/taskpane/components/Section/Section.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import CollapseSection from '../CollapseSection/CollapseSection';
66
import ListItem from '../ListItem/ListItem';
77
import api from '../../api';
88
import AppContext from '../AppContext';
9+
import { OdooTheme } from '../../../utils/Themes';
10+
import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
11+
import HelpdeskTicket from '../../../classes/HelpdeskTicket';
912
import Lead from '../../../classes/Lead';
1013
import Task from '../../../classes/Task';
11-
import HelpdeskTicket from '../../../classes/HelpdeskTicket';
12-
import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
13-
import { OdooTheme } from '../../../utils/Themes';
1414

1515
type SectionAbstractProps = {
1616
className?: string;
@@ -40,7 +40,7 @@ type SectionAbstractProps = {
4040
msgLogEmail: string;
4141
getRecordDescription: (any) => string;
4242
searchType: 'lead' | 'task' | 'ticket';
43-
updateRecords: (records: Lead[] | Task[] | HelpdeskTicket[] | null) => void;
43+
updateRecords: (records: Lead[] | Task[] | HelpdeskTicket[]) => void;
4444
};
4545

4646
type SectionAbstractState = {

0 commit comments

Comments
 (0)