Skip to content

Commit 33c55ad

Browse files
maheshgunturmaheshguntur
authored
Feature accounts (#5)
* update pagination component-wip * update tagsinput ui component - done * minor change does not change functionality
1 parent 621112b commit 33c55ad

File tree

6 files changed

+141
-128
lines changed

6 files changed

+141
-128
lines changed

‎public/main.css

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1110,19 +1110,6 @@ header .navbar .navbar-form .btn.btn-default {
11101110
margin: 10px 0
11111111
}
11121112

1113-
.pagination li a {
1114-
padding: 5px 10px;
1115-
border: 1px solid #ddd;
1116-
font-weight: 600
1117-
}
1118-
1119-
.pagination li .active {
1120-
background: #369cbe;
1121-
padding: 5px 10px;
1122-
border: 1px solid #369cbe;
1123-
color: #fff
1124-
}
1125-
11261113
.text-center {
11271114
justify-content: center!important
11281115
}
@@ -2320,4 +2307,18 @@ input[type=number] {
23202307
.modal-text-display {
23212308
display: inline-block;
23222309
}
2323-
2310+
2311+
/* Paginatioon Componenet */
2312+
2313+
.pagination li a {
2314+
padding: 5px 10px;
2315+
border: 1px solid #ddd;
2316+
font-weight: 600
2317+
}
2318+
2319+
.pagination li .active {
2320+
background: #369cbe;
2321+
padding: 5px 10px;
2322+
border: 1px solid #369cbe;
2323+
color: #fff
2324+
}

‎src/crm/Accounts/Accounts.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import DeleteActionButton from '../UIComponents/ActionButtons/DeleteActionButton
1111
import Modal from '../UIComponents/Modal/Modal';
1212
import { getApiResults } from '../Utilities';
1313

14-
const Accounts = (props) => {
15-
16-
console.log(props);
14+
const Accounts = (props) => {
1715

1816
const [openAccounts, setOpenAccounts] = useState([]);
1917
const [closedAccounts, setClosedAccounts] = useState([]);

‎src/crm/Accounts/AddAccount.js

Lines changed: 7 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@ const AddAccount = (props) => {
2828
const [contacts, setContacts] = useState([]);
2929
const [tags, setTags] = useState([]);
3030
const [file, setFile] = useState('');
31-
const [errors, setErrors] = useState({});
32-
const [tagErrorStyle, setTagErrorStyle] = useState('');
33-
const [invalidTag, setIsInvalidTag] = useState([]);
31+
const [errors, setErrors] = useState({});
3432

3533
useEffect(() => {
3634
getContacts();
@@ -61,41 +59,14 @@ const AddAccount = (props) => {
6159
setAccountObject({...accountObject, [e.target.name]: e.target.value})
6260
}
6361

64-
const addTags = event => {
65-
event.preventDefault();
66-
if (event.key === 'Enter' && event.target.value !== "") {
67-
let val = event.target.value;
68-
if(!tags.includes(val)) {
69-
setTags([...tags, event.target.value]);
70-
setIsInvalidTag('');
71-
}
72-
event.target.value="";
73-
}
74-
}
75-
76-
const handleTag = (e) => {
77-
e.preventDefault();
78-
if(tags.includes(e.target.value)) {
79-
setTagErrorStyle('invalid_tag');
80-
}else{
81-
setTagErrorStyle('');
82-
}
83-
setIsInvalidTag(e.target.value);
84-
}
85-
86-
const removeTags = index => {
87-
setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
88-
}
89-
9062
const fileUpload = (e) => {
9163
setFile(e.target.files[0]);
9264
}
9365

9466
const saveAccount = (e) => {
9567
e.preventDefault();
9668

97-
let targetName = e.target.name;
98-
console.log(targetName);
69+
let targetName = e.target.name;
9970

10071
// Validation
10172
let validationResults = Validations(accountObject);
@@ -147,9 +118,9 @@ const AddAccount = (props) => {
147118
state: "accounts"
148119
});
149120
}
150-
})
151-
}
152-
121+
})
122+
.catch(err => err)
123+
}
153124
}
154125

155126

@@ -201,13 +172,8 @@ const AddAccount = (props) => {
201172
<ReactSelect elementSize="col-md-12" labelName="Users" isDisabled={true}/>
202173
<ReactSelect elementSize="col-md-12" labelName="Assigned To"/>
203174
<SelectComponent elementSize="col-md-12" labelName="Status" attrName="status" attrPlaceholder="Status" attrId="id_status"
204-
value={accountObject.status} getInputValue={handleChange} options={twoStatus}/>
205-
<TagsInput tags={tags}
206-
removeTags={(index) => removeTags(index)}
207-
addTags={(event) => addTags(event)}
208-
value={invalidTag}
209-
handleTag={(e) => handleTag(e)}
210-
tagErrorStyle={tagErrorStyle}/>
175+
value={accountObject.status} getInputValue={handleChange} options={twoStatus}/>
176+
<TagsInput type="add" getTags={setTags}/>
211177
<FileInput elementSize="col-md-12" labelName="Attachment" attrName="account_attachment" inputId="id_file"
212178
getFile={fileUpload}/>
213179
</div>

‎src/crm/Accounts/EditAccount.js

Lines changed: 16 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,16 @@ import axios from 'axios';
1616

1717
export default function EditAccount(props) {
1818

19-
// console.log(props);
20-
2119
const [accountObject, setAccountObject] = useState({
2220
name: '', website: '', phone: '', email: '',
2321
billing_address_line: '', billing_street: '', billing_postcode: '',
2422
billing_city: '', billing_state: '', billing_country: '',
2523
status: 'open', lead:[], contacts: [], files: []
2624
});
27-
const [leads, setLeads] = useState([]);
28-
const [availableLeads, setAvailableLeads] = useState([]);
29-
const [contacts, setContacts] = useState([]);
30-
const [availableContacts, setAvailableContacts] = useState([]);
31-
const [tags, setTags] = useState([]);
32-
const [file, setFile] = useState([]);
33-
const [isValidations, setIsValidations] = useState('true');
34-
const [errors, setErrors] = useState({});
35-
const [tagErrorStyle, setTagErrorStyle] = useState('');
36-
const [invalidTag, setIsInvalidTag] = useState([]);
25+
const [leads, setLeads] = useState([]);
26+
const [contacts, setContacts] = useState([]);
27+
const [tags, setTags] = useState([]);
28+
const [errors, setErrors] = useState({});
3729

3830
useEffect(() => {
3931
getContacts();
@@ -86,65 +78,36 @@ export default function EditAccount(props) {
8678
})
8779
}
8880

89-
// console.log(accountObject);
90-
9181
const handleChange = (e) => {
9282
setAccountObject({...accountObject, [e.target.name]: e.target.value})
9383
}
94-
95-
const addTags = event => {
96-
event.preventDefault();
97-
if (event.key === 'Enter' && event.target.value !== "") {
98-
let val = event.target.value;
99-
if(!tags.includes(val)) {
100-
setTags([...tags, event.target.value]);
101-
setIsInvalidTag('');
102-
}
103-
event.target.value="";
104-
}
105-
}
106-
107-
const handleTag = (e) => {
108-
e.preventDefault();
109-
if(tags.includes(e.target.value)) {
110-
setTagErrorStyle('invalid_tag');
111-
}else{
112-
setTagErrorStyle('');
113-
}
114-
setIsInvalidTag(e.target.value);
115-
}
116-
117-
const removeTags = index => {
118-
setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
119-
}
12084

12185
const fileUpload = (e) => {
12286
let filesArray = [...accountObject.files];
12387
let newFile = e.target.files[0];
124-
filesArray.push(newFile);
125-
// console.log(newFile);
88+
filesArray.push(newFile);
12689
setAccountObject({...accountObject, files: filesArray});
12790
}
12891

129-
13092
const removeFile = (createdOn) => {
13193
let dupFiles = [...accountObject.files];
132-
let remainingFiles = dupFiles.filter(file => file.created_on !== createdOn);
133-
console.log(remainingFiles);
94+
let remainingFiles = dupFiles.filter(file => file.created_on !== createdOn);
13495
setAccountObject({...accountObject, files: remainingFiles});
135-
}
136-
console.log(accountObject);
96+
}
13797

13898
const updateAccount = (e) => {
13999
e.preventDefault();
140100
let userId = window.location.pathname.split('/')[2];
141101

142102
// Validations
143-
let validationResults = Validations(accountObject);
103+
let validationResults = Validations(accountObject);
144104
setErrors(validationResults);
105+
106+
let isValidationspassed = true;
107+
145108
for (let i in validationResults) {
146109
if (validationResults[i].length > 0) {
147-
setIsValidations(false);
110+
isValidationspassed = false;
148111
break;
149112
}
150113
}
@@ -179,7 +142,7 @@ export default function EditAccount(props) {
179142
})
180143

181144

182-
if (isValidations) {
145+
if (isValidationspassed) {
183146
axios.put(`${ACCOUNTS}${userId}/`, formData, config)
184147
.then(res => {
185148
if(res.status === 200) {
@@ -188,10 +151,9 @@ export default function EditAccount(props) {
188151
state: "accounts"
189152
});
190153
}
191-
}).catch(err => {
192154
})
155+
.catch(err => err)
193156
}
194-
195157
}
196158

197159
return (
@@ -244,14 +206,8 @@ export default function EditAccount(props) {
244206
<ReactSelect elementSize="col-md-12" labelName="Users" isDisabled={true}/>
245207
<ReactSelect elementSize="col-md-12" labelName="Assigned To"/>
246208
<SelectComponent elementSize="col-md-12" labelName="Status" attrName="status" attrPlaceholder="Status" attrId="id_status"
247-
value={accountObject.status} getInputValue={handleChange} options={twoStatus}/>
248-
<TagsInput tags={tags}
249-
removeTags={(index) => removeTags(index)}
250-
addTags={(event) => addTags(event)}
251-
value={invalidTag}
252-
handleTag={(e) => handleTag(e)}
253-
tagErrorStyle={tagErrorStyle}/>
254-
209+
value={accountObject.status} getInputValue={handleChange} options={twoStatus}/>
210+
<TagsInput type="edit" sendTags={tags} getTags={setTags}/>
255211
<FileInput elementSize="col-md-12" labelName="Attachment" attrName="account_attachment" inputId="id_file"
256212
getFile={fileUpload}/>
257213
<div>

‎src/crm/UIComponents/Inputs/TagsInput.js

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,80 @@
1-
import React from 'react';
1+
import React, {useState, useEffect} from 'react';
22

33
export default function TagsInput(props) {
4+
5+
const [tags, setTags] = useState([]);
6+
const [tagErrorStyle, setTagErrorStyle] = useState('');
7+
const [invalidTag, setIsInvalidTag] = useState([]);
8+
const [isEditTags, setIsEditTags] = useState(false);
9+
10+
const addTags = event => {
11+
event.preventDefault();
12+
if (event.key === 'Enter' && event.target.value !== "") {
13+
let val = event.target.value;
14+
if(!tags.includes(val)) {
15+
setTags([...tags, event.target.value]);
16+
setIsInvalidTag('');
17+
if(props.type === "edit") setIsEditTags(true);
18+
}
19+
event.target.value="";
20+
}
21+
}
22+
23+
const handleTag = (e) => {
24+
e.preventDefault();
25+
if(tags.includes(e.target.value)) {
26+
setTagErrorStyle('invalid_tag');
27+
}else{
28+
setTagErrorStyle('');
29+
}
30+
setIsInvalidTag(e.target.value);
31+
}
32+
33+
const removeTags = index => {
34+
setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
35+
if(props.type === 'edit') setIsEditTags(true);
36+
}
37+
38+
useEffect(() => {
39+
// Sending tags to Add Account
40+
if (props.type === 'add') props.getTags(tags);
41+
//
42+
if(props.type === "edit") {
43+
if (props.sendTags && isEditTags === false) {
44+
setTags(props.sendTags);
45+
}
46+
if(isEditTags === true) props.getTags(tags);
47+
}
48+
});
49+
450
return (
551
<div className="filter_col col-12">
652
<div className="form-group">
753
<label>Tags</label>
8-
954
<div className="tags-wrapper">
10-
<ul className="tags-ul">
11-
{props.tags.map((tag, index) => (
55+
<ul className="tags-ul">
56+
{
57+
tags.map((tag, index) => (
1258
<li
1359
className="tag-list-item" key={index}>
1460
<span className={`${tag}`}>{tag}</span>
15-
<b onClick={() => props.removeTags(index)}>x</b>
61+
<b onClick={() => removeTags(index)}>x</b>
1662
</li>
17-
))}
63+
))
64+
}
1865
</ul>
1966
<input
20-
className={`tags-input ${props.tagErrorStyle}`}
67+
className={`tags-input ${tagErrorStyle}`}
2168
type="text"
22-
onKeyUp={event => props.addTags(event)}
69+
onKeyUp={event => addTags(event)}
2370
placeholder="add a tag"
24-
value={props.value}
25-
onChange={(e) => {props.handleTag(e)}}
71+
value={invalidTag}
72+
onChange={(e) => {handleTag(e)}}
2673
/>
2774
</div>
2875
</div>
2976
</div>
3077
)
3178
}
79+
80+

0 commit comments

Comments
 (0)