agorise
/
palmpay.mx-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into mx

master
Letícia Camara 2019-01-24 00:19:50 -02:00
parent 2a5618a999 3489f29089
commit 84d64b3194
6 changed files with 198 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/EnhancedTable.js
View File

@ -169,37 +169,38 @@ class EnhancedTable extends Component {
const searchQuery = query;
const searchColumns = this.state.searchColumns;
const data = this.props.data.filter((item) => {
let insert = false;
// Iterate over the search column select boxes
searchColumns.map(column => {
try {
if( column.checked && (item[column.name] !== undefined) ) {
if(item[column.name].hasOwnProperty('searchText') && item[column.name].searchText.toLowerCase().indexOf(searchQuery.toLowerCase().trim()) !== -1){
insert = true;
}
else if(item[column.name].toLowerCase().indexOf(searchQuery.toLowerCase().trim()) !== -1){
insert = true;
}
}
}
catch(error) {
//console.error(error);
}
return column;
});
if(insert){
return item;
}
return false;
});
const data = this.filterData(this.props.data, searchQuery, searchColumns);
this.props.onSearchChange(data);
};
// Sort the passed data based on the current component state.
sortData = (data) => {
const orderBy = this.state.orderBy;
const order = this.state.order;
data =
order === 'desc'
? data.sort((a, b) => {
let a_value = (a[orderBy] !== undefined) ? a[orderBy]: '';
let b_value = (b[orderBy] !== undefined) ? b[orderBy]: '';
a_value = a_value.hasOwnProperty('searchText') ? a_value.searchText.toLowerCase() : a_value.toLowerCase();
b_value = b_value.hasOwnProperty('searchText') ? b_value.searchText.toLowerCase() : b_value.toLowerCase();
return (b_value < a_value) ? -1 : 1;
})
: data.sort((a, b) => {
let a_value = (a[orderBy] !== undefined) ? a[orderBy]: '';
let b_value = (b[orderBy] !== undefined) ? b[orderBy]: '';
a_value = a_value.hasOwnProperty('searchText') ? a_value.searchText.toLowerCase() : a_value.toLowerCase();
b_value = b_value.hasOwnProperty('searchText') ? b_value.searchText.toLowerCase() : b_value.toLowerCase();
if(a_value.trim() === '') a_value = 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';
if(b_value.trim() === '') b_value = 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';
return (a_value < b_value) ? -1 : 1;
}
);
return data;
};
/*
* Update the search column select box
*/
@ -212,6 +213,48 @@ class EnhancedTable extends Component {
isSelected = id => this.state.selected.indexOf(id) !== -1;
filterData(data, searchQuery, searchColumns) {
// Remove white spaces and wrong "" split
const queryTerms = searchQuery.split(' ').filter(value => value !== '');
return data.filter((item) => {
const insertArray = [];
// Implement hardcoded AND query over each column
// Iterate over each search term
queryTerms.forEach(searchItem => {
let insert = false;
// Iterate over the search column select boxes
searchColumns.map(column => {
try {
if( column.checked && (item[column.name] !== undefined) ) {
if(item[column.name].hasOwnProperty('searchText') &&
item[column.name].searchText.toLowerCase().indexOf(searchItem.toLowerCase().trim()) !== -1
){
insert = true;
}
else if(item[column.name].toLowerCase().indexOf(searchItem.toLowerCase().trim()) !== -1){
insert = true;
}
}
}
catch(error) {
//console.error(error);
}
return column;
});
insertArray.push(insert);
});
// AND logic
if(insertArray.filter(item => !item).length === 0){
return item;
}
return false;
});
}
render() {
let { data } = this.props;
const { columnData, rowsPerPageOptions, showSearchColumns } = this.props;
@ -219,36 +262,10 @@ class EnhancedTable extends Component {
// Logic of search query and columns
if(searchQuery.length > 0) {
data = data.filter((item) => {
let insert = false;
// Iterate over the search column select boxes
searchColumns.map(column => {
try {
if( column.checked && (item[column.name] !== undefined) ) {
if(item[column.name].hasOwnProperty('searchText') && item[column.name].searchText.toLowerCase().indexOf(searchQuery.toLowerCase().trim()) !== -1){
insert = true;
}
else if(item[column.name].toLowerCase().indexOf(searchQuery.toLowerCase().trim()) !== -1){
insert = true;
}
}
}
catch(error) {
//console.error(error);
}
return column;
});
if(insert){
return item;
}
return false;
});
data = this.filterData(data, searchQuery, searchColumns);
}
data = this.sortData(data);
return (
<div style={styles.root}>

151
src/components/LayerMap.js
View File

@ -44,6 +44,10 @@ import tel_m3 from '../assets/img/map/cluster/tellers/m3.png';
import tel_m4 from '../assets/img/map/cluster/tellers/m4.png';
import tel_m5 from '../assets/img/map/cluster/tellers/m5.png';
import { addProtocol, getProtocol } from '../utils/url';
import { WHICH_OPTIONS } from '../utils/constants';
// List of countries
const countries = Countries();
@ -59,8 +63,6 @@ const propTypes = {
showControls: PropTypes.bool
};
/**
* This object sets default values to the optional props.
*/
@ -308,10 +310,27 @@ CustomLayerMap.propTypes = propTypes;
// Assign default values to the optional props
CustomLayerMap.defaultProps = defaultProps;
// Type checking the props of the component
CustomLayerMap.propTypes = propTypes;
// Assign default values to the optional props
CustomLayerMap.defaultProps = defaultProps;
/**
* This object is used for type checking the props of the component.
*/
const propTypesLayerMap = {
ambassadorsLayer: PropTypes.bool,
merchantsLayer: PropTypes.bool,
showControls: PropTypes.bool,
mapHeight: PropTypes.string,
ambassadors: PropTypes.array,
merchants: PropTypes.array,
tellers: PropTypes.array,
};
/**
* This object sets default values to the optional props.
*/
const defaultPropsLayerMap = {
ambassadors: null,
merchants: null,
tellers: null
};
class LayerMap extends Component {
constructor(props) {
@ -330,9 +349,22 @@ class LayerMap extends Component {
* @description Lifecycle event handler called just after the App loads into the DOM.
*/
UNSAFE_componentWillMount() {
this.getAmbassadors();
this.getMerchants();
this.getTellers();
this.updateMarkers();
}
// Update markers based if props are informed
updateMarkers() {
if(!this.props.ambassadors) {
this.getAmbassadors();
}
if(!this.props.merchants) {
this.getMerchants();
}
if (!this.props.tellers) {
this.getTellers();
}
}
fillResults(result) {
@ -496,25 +528,53 @@ class LayerMap extends Component {
if(tellers.country !== undefined) tellers.country = countries.getName(tellers.country);
});
const markers = result.data.map(merchant => {
const infoDescription = <div>
<div><b>Address</b>: {merchant.address}</div>
{(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
{(merchant.telegram) && (<div><b>Telegram</b>:
<a
href={`https://t.me/${(merchant.telegram.trim().charAt(0) === '@') ? merchant.telegram.trim().slice(1): merchant.telegram.trim()}`}
target="_blank"
rel="noopener noreferrer"
>{merchant.telegram}</a>
</div>)}
{(merchant.url) && (<div><b>Website:</b>: <a target="_blank" rel="noopener noreferrer"
href={merchant.url}>{stripProtocol(merchant.url)}</a></div>)}
</div>;
const markers = result.data.map(teller => {
if(teller.telegram){
teller.telegram_original = teller.telegram;
teller.telegram = {
searchText: teller.telegram_original,
value: (
<a
href={`https://t.me/${(teller.telegram_original.trim().charAt(0) === '@') ?
teller.telegram_original.trim().slice(1): teller.telegram_original.trim()}`}
target="_blank"
rel="noopener noreferrer"
>{teller.telegram}</a>
)
};
}
const which = WHICH_OPTIONS.filter(w => w.id.toLowerCase() === teller.which.toLowerCase());
teller.which_value = ( teller.which && which.length > 0) ?
which[0].value :
'';
const infoDescription = (
<div>
<div><b>Address</b>: {teller.address}</div>
{(teller.which) && (<div><b>Which:</b>: {teller.which}</div>)}
{(teller.bitshares_address) && (<div><b>BTS Account:</b>: {teller.bitshares_address}</div>)}
{(teller.address) && (<div><b>Address:</b>: {teller.address}</div>)}
{(teller.telegram_original) && (<div><b>Telegram</b>:
<a
href={`https://t.me/${(teller.telegram_original.trim().charAt(0) === '@') ? teller.telegram_original.trim().slice(1): teller.telegram_original.trim()}`}
target="_blank"
rel="noopener noreferrer"
>{teller.telegram_original}</a>
</div>)
}
{(teller.keybase) && (<div><b>Keybase</b>: {teller.keybase}</div>)}
{(teller.whatsapp) && (<div><b>Whatsapp</b>: {teller.whatsapp}</div>)}
{(teller.viber) && (<div><b>Viber</b>: {teller.viber}</div>)}
{(teller.email) && (<div><b>Email</b>: {teller.email}</div>)}
{(teller.phone) && (<div><b>Phone</b>: {teller.phone}</div>)}
{(teller.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
href={addProtocol(teller.url, getProtocol(teller.url))}>{stripProtocol(teller.url)}</a></div>)}
</div>
);
const marker = {
lat: merchant.lat,
lng: merchant.lon,
lat: teller.lat,
lng: teller.lon,
withInfo: true,
infoTitle: merchant.gt_name,
infoTitle: teller.gt_name,
infoDescription: infoDescription,
};
return marker;
@ -530,13 +590,33 @@ class LayerMap extends Component {
handleLayerChange = name => event => {
this.setState({ [name]: event.target.checked });
// Update any time changes
this.getAmbassadors();
this.getMerchants();
this.getTellers();
this.updateMarkers();
};
render() {
// create an array with marker components
const {
ambassadors: ambassadorsProps,
merchants: merchantsProps,
tellers: tellersProps
} = this.props;
let {
ambassadors,
merchants,
tellers
} = this.state;
if(ambassadorsProps) {
ambassadors = ambassadorsProps;
}
if(merchantsProps) {
merchants = merchantsProps;
}
if(tellersProps) {
tellers = tellersProps;
}
return (
<div>
@ -551,9 +631,9 @@ class LayerMap extends Component {
<div style={{ height: 56 }}></div>
)}
<CustomLayerMap
ambassadors={this.state.ambassadorLayer ? this.state.ambassadors: []}
merchants={this.state.merchantLayer ? this.state.merchants: []}
tellers={this.state.tellerLayer ? this.state.tellers: []}
ambassadors={this.state.ambassadorLayer ? ambassadors: []}
merchants={this.state.merchantLayer ? merchants: []}
tellers={this.state.tellerLayer ? tellers: []}
mapZoom={3}
mapCenter={{ lat: 0, lng: 0 }}
loadingElement={<div style={{ height: `100%` }} />}
@ -565,4 +645,9 @@ class LayerMap extends Component {
}
}
// Type checking the props of the component
LayerMap.propTypes = propTypesLayerMap;
// Assign default values to the optional props
LayerMap.defaultProps = defaultPropsLayerMap;
export default LayerMap;

4
src/components/pages/AmbassadorsPage.js
View File

@ -357,7 +357,7 @@ class AmbassadorsPage extends Component {
});
});
data = data.sort(sortBy('location.searchText'));
data = data.sort(sortBy('nickname'));
const textComponent = (
<span>
@ -374,7 +374,7 @@ class AmbassadorsPage extends Component {
<AppHeader />
<div id="maincontent">
<section data-spy="scroll" data-target="#mainNav" id="services">
<section data-spy="scroll" data-target="#mainNav" id="services" className="ambs_services">
<div className="containerfix">
<div className="row">
<div className="col-md-10 mx-md-auto">

4
src/components/pages/MerchantsPage.css
View File

@ -3,4 +3,8 @@
}
.merchants_services .MuiNotchedOutline-focused-120 {
border-color: rgb(19, 143, 82) !important;
}
.merchants_services table,
.ambs_services table {
min-width: 100% !important;
}

6
src/components/pages/MerchantsPage.js
View File

@ -307,10 +307,6 @@ class MerchantsPage extends Component {
});
result.data.map(merchant => {
const infoDescription = <div>
<div><b>Address</b>: {merchant.address}</div>
{(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
</div>;
if(merchant.telegram){
merchant.telegram_original = merchant.telegram;
merchant.telegram = {
@ -419,7 +415,7 @@ class MerchantsPage extends Component {
return this.getMerchantMarker(merchant);
});
merchantsData = merchantsData.sort(sortBy('location.searchText'));
merchantsData = merchantsData.sort(sortBy('name'));
const textComponent = (
<span>

2
src/utils/feathers.js
View File

@ -3,7 +3,7 @@ import feathers from '@feathersjs/client';
const app = feathers();
// Change to your production ambassador web service
//const restClient = feathers.rest('http://localhost:3030');
const restClient = feathers.rest('https://intranet.palmpay.io');
const restClient = feathers.rest('https://websvc.palmpay.io');
// Configure an Fetch AJAX library with that client. For fetch details see https://facebook.github.io/react-native/docs/network.html
// For rest details see https://docs.feathersjs.com/api/client/rest.html