Skip to content
This repository was archived by the owner on Mar 3, 2019. It is now read-only.

Commit 990dc33

Browse files
kasongoyokasongoyo
committed
add attach personnel from existing contacts form
1 parent aa7fe41 commit 990dc33

File tree

4 files changed

+97
-72
lines changed

4 files changed

+97
-72
lines changed

‎src/common/redux/configureStore.js

-18
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,6 @@ const fakeStore = {
2222
$and: [{ phases: { $in: ['Mitigation'] } }, { types: { $in: ['Agency'] } }],
2323
},
2424
},
25-
contacts: {
26-
data: [
27-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
28-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
29-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
30-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
31-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
32-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
33-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
34-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
35-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
36-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
37-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
38-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
39-
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
40-
],
41-
total: 100,
42-
},
4325
};
4426

4527

‎src/dashboard/Stakeholders/components/StakeholderList/components/StakeholderItem/index.js

+19-13
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames/bind';
44
import { connect } from 'react-redux';
5-
import { Button, Checkbox, Col, List, Popover, Row } from 'antd';
5+
import { Button, Checkbox, Col, List, Popover, Row, Icon } from 'antd';
66
import { selectStakeholder } from '../../../../actions';
77
import styles from './styles.module.css';
88

@@ -70,18 +70,24 @@ class StakeholderItem extends Component {
7070
</Row>
7171
)}
7272
description={(
73-
<Row>
74-
<Col span={8}>
75-
<Button icon="mobile" className={cx("b-0", { 'isSelected': isSelected })}>
76-
{phone}
77-
</Button>
78-
</Col>
79-
<Col span={8}>
80-
<Button icon="mail" className={cx("b-0", { 'isSelected': isSelected })}>
81-
{email}
82-
</Button>
83-
</Col>
84-
</Row>
73+
<div>
74+
<Row>
75+
<Col span={24}>
76+
<span icon="mobile" className={cx("b-0", { 'isSelected': isSelected })}>
77+
<Icon type="mobile" style={{ marginRight: '5px' }} />
78+
{phone}
79+
</span>
80+
</Col>
81+
</Row>
82+
<Row>
83+
<Col span={24}>
84+
<span icon="mail" className={cx("b-0", { 'isSelected': isSelected })}>
85+
<Icon type="mail" style={{ marginRight: '5px' }} />
86+
{email}
87+
</span>
88+
</Col>
89+
</Row>
90+
</div>
8591
)}
8692
/>
8793
</List.Item>

‎src/dashboard/Stakeholders/components/StakeholderList/components/StakeholderItem/styles.module.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.isSelected {
2-
background: #f9f9f9;
2+
/* background: #f9f9f9; */
3+
background: #e6f7ff;
34
}
45

56
.name {

‎src/dashboard/Stakeholders/components/StakeholderProfile/components/AddPersonnelForm/index.js

+76-40
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,99 @@
11
import React, { Component, Fragment } from 'react';
22
import { Button, Row, Col, Divider, AutoComplete, Input, Icon } from 'antd';
3+
import API from 'API';
4+
import { from } from 'rxjs';
5+
import StakeholderForm from '../../../StakeholderForm';
36
import './styles.css';
47

8+
const Option = AutoComplete.Option;
59

10+
11+
function renderOption(item) {
12+
return (
13+
<Option key={item._id} name={`${item.name} <${item.email}>`}>
14+
<div><strong>{item.name}</strong></div>
15+
<div>{item.email}</div>
16+
</Option>
17+
);
18+
}
619
class AddPersonnelForm extends Component {
7-
state = { showAddPersonnelForm: false, dataSource: [], selected: null };
20+
state = { showCreatePersonnelForm: false, dataSource: [], hits: [], selected: null, input: '' };
821

922
onSelect = (value) => {
10-
console.log(value);
1123
this.setState({ selected: value });
1224
}
1325

14-
handleSearch = (value) => {
26+
handleSearch = () => {
1527
this.setState({ selected: null });
16-
this.setState({
17-
dataSource: !value ? [] : [
18-
value,
19-
value + value,
20-
value + value + value,
21-
],
22-
});
28+
}
29+
30+
31+
handleChange = value => {
32+
this.setState({ input: value });
33+
if (value.length > 1) {
34+
from(API.searchStakeholder(value))
35+
.subscribe(result => {
36+
this.setState({ hits: result.data });
37+
});
38+
}
39+
}
40+
41+
handleAttachPersonnel = () => {
42+
console.log(this.state.selected);
43+
this.setState({ input: '' });
44+
}
45+
46+
toggleCreatePersonnelForm = () => {
47+
this.setState({ showCreatePersonnelForm: !this.state.showCreatePersonnelForm });
2348
}
2449

2550
render() {
26-
const { showAddPersonnelForm, dataSource, selected } = this.state;
51+
const { showCreatePersonnelForm, hits, selected, input } = this.state;
52+
2753
return (<Fragment>
2854
{
29-
showAddPersonnelForm ? '' : (
30-
<Row type="flex" align="middle" justify="center">
31-
<Col span={10}>
32-
<div>
33-
<div style={{ width: '100%' }}>
34-
<AutoComplete
35-
className="search-stakeholder"
36-
style={{ width: '100%' }}
37-
dataSource={dataSource}
38-
onSelect={this.onSelect}
39-
onSearch={this.handleSearch}
40-
placeholder="Search stakeholder...."
41-
>
42-
<Input
43-
suffix={selected ? (
44-
<Button className="search-btn" type="primary">
45-
<Icon type="plus" /> Add
46-
</Button>
47-
) : (
48-
<Button className="search-btn" type="primary" disabled>
55+
showCreatePersonnelForm ? <StakeholderForm
56+
handleCancelClick={this.toggleCreatePersonnelForm} /> : (
57+
<Row type="flex" align="middle" justify="center">
58+
<Col span={10}>
59+
<div>
60+
<div style={{ width: '100%' }}>
61+
<AutoComplete
62+
className="search-stakeholder"
63+
style={{ width: '100%' }}
64+
dataSource={hits.map(renderOption)}
65+
onSelect={this.onSelect}
66+
placeholder="Search stakeholder...."
67+
onChange={this.handleChange}
68+
onSearch={this.handleSearch}
69+
value={input}
70+
optionLabelProp="name"
71+
>
72+
<Input
73+
suffix={selected ? (
74+
<Button className="search-btn"
75+
type="primary" onClick={this.handleAttachPersonnel}>
4976
<Icon type="plus" /> Add
5077
</Button>
51-
)}
52-
/>
53-
</AutoComplete>
78+
) : (
79+
<Button className="search-btn" type="primary" disabled>
80+
<Icon type="plus" /> Add
81+
</Button>
82+
)}
83+
/>
84+
</AutoComplete>
85+
</div>
86+
<Divider><div>OR</div></Divider>
87+
<Button
88+
type="primary"
89+
className='block'
90+
onClick={this.toggleCreatePersonnelForm}
91+
>Create New Personnel
92+
</Button>
5493
</div>
55-
<Divider><div>OR</div></Divider>
56-
<Button type="primary" block className='block' >Create New Personnel</Button>
57-
</div>
58-
</Col>
59-
</Row>
60-
)
94+
</Col>
95+
</Row>
96+
)
6197
}
6298

6399
</Fragment>)

0 commit comments

Comments
 (0)