diff --git a/README.md b/README.md index ea0cbb8..54a871f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # PalmPay.io Website files - Feel free to copy any/all of these files if you are creating a clone site such as PalmPay.se, PalmPay.pt, PalmPay.mx, PalmPay.my, PalmPay.ca, PalmPay.pro, etc + Feel free to copy any/all of these files if you are creating a clone site such as PalmPay.se, PalmPay.pt, PalmPay.mx, PalmPay.my, PalmPay.ca, PalmPay.pro, PalmPay.solutions, PalmPay.ch, etc Any questions, feel free to ping us on.. Telegram: https://t.me/Agorise diff --git a/src/components/EnhancedTable.js b/src/components/EnhancedTable.js index 8d972f0..cd7616f 100644 --- a/src/components/EnhancedTable.js +++ b/src/components/EnhancedTable.js @@ -42,7 +42,6 @@ const propTypes = { onEdit: PropTypes.func, onDelete: PropTypes.func, onMultipleDelete: PropTypes.func, - }; /** @@ -142,14 +141,46 @@ class EnhancedTable extends Component { * @param {string} query - The search term. */ updateQuery = (query) => { - query = query.trim(); // If query is empty or undefined if (!query) { this.setState({searchQuery: ''}); + this.props.onSearchChange(this.props.data); return; } // Update the search field as soon as the character is typed this.setState({searchQuery: query}); + + 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; + }); + + this.props.onSearchChange(data); }; /* @@ -177,10 +208,14 @@ class EnhancedTable extends Component { // Iterate over the search column select boxes searchColumns.map(column => { try { - if( column.checked && - (item[column.name] !== undefined) && - ((item[column.name].toLowerCase()).indexOf(searchQuery.toLowerCase()) !== -1) ){ - insert = true; + 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) { @@ -196,6 +231,8 @@ class EnhancedTable extends Component { }); } + + return (
- {n[column.id]} + >{ + ((n[column.id]) !== undefined && (n[column.id]) !== null) ? + ( (n[column.id]).hasOwnProperty('value') ? + n[column.id].value : n[column.id] + ) + : + n[column.id] + } ))} {this.props.isAdmin && diff --git a/src/components/Footer.js b/src/components/Footer.js index 4abc0c0..aeda4b8 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -117,22 +117,6 @@ function Footer() {
- - Site by: - - poqdavid - - {" "} & {" "} - - Leticia Camara - -
diff --git a/src/components/LayerMap.js b/src/components/LayerMap.js index 25b5237..83486df 100644 --- a/src/components/LayerMap.js +++ b/src/components/LayerMap.js @@ -15,7 +15,6 @@ import LayerMapSwitches from './LayerMapSwitches'; // Helpers import GOOGLE_MAPS_API from '../utils/constants'; -import Client from '../utils/feathers'; // Images import MerchantPin from '../assets/img/map/merchant_pin.png'; @@ -33,6 +32,8 @@ const propTypes = { showControls: PropTypes.bool }; + + /** * This object sets default values to the optional props. */ @@ -156,7 +157,9 @@ const propTypesLayerMap = { ambassadorsLayer: PropTypes.bool, merchantsLayer: PropTypes.bool, showControls: PropTypes.bool, - mapHeight: PropTypes.string + mapHeight: PropTypes.string, + ambassadors: PropTypes.array, + merchants: PropTypes.array, }; class LayerMap extends Component { @@ -170,83 +173,8 @@ class LayerMap extends Component { }; } - /** - * @description Lifecycle event handler called just after the App loads into the DOM. - */ - UNSAFE_componentWillMount() { - this.getAmbassadors(); - this.getMerchants(); - } - - /** - * @description Get the ambassadors list from the web service. - * @param {string} id - Merchant ID. - */ - getAmbassadors = () => { - const app = this; - const ambassadors = Client.service('api/v1/ambassadors'); - - this.setState({loading: true}); - - ambassadors.find().then( (results) => { - const markers = results.data.map(ambassador => { - const marker = { - lat: ambassador.lat, - lng: ambassador.lon, - withInfo: true, - infoTitle: ambassador.nickname, - infoDescription: `${ambassador.city} - ${ambassador.country}`, - }; - return marker; - }); - - // Once both return, update the state - app.setState({ - ambassadors: markers, - loading: false - }); - }).catch( error => { - app.setState({responseError: error.message, loading: false}); - }); - }; - - /** - * @description Get the merchants list from the web service. - * @param {string} id - Merchant ID. - */ - getMerchants = () => { - const app = this; - const merchants = Client.service('api/v1/merchants'); - - this.setState({loading: true}); - - merchants.find().then( (results) => { - const markers = results.data.map(merchant => { - const marker = { - lat: merchant.lat, - lng: merchant.lon, - withInfo: true, - infoTitle: merchant.name, - infoDescription: `${merchant.address}, ${merchant.city} - ${merchant.country}`, - }; - return marker; - }); - - // Once both return, update the state - app.setState({ - merchants: markers, - loading: false - }); - }).catch( error => { - app.setState({responseError: error.message, loading: false}); - }); - }; - handleLayerChange = name => event => { this.setState({ [name]: event.target.checked }); - // Update any time changes - this.getAmbassadors(); - this.getMerchants(); }; render() { @@ -265,8 +193,8 @@ class LayerMap extends Component {
)} } diff --git a/src/components/pages/AmbassadorsPage.js b/src/components/pages/AmbassadorsPage.js index 6ef1a6f..b80ca0b 100644 --- a/src/components/pages/AmbassadorsPage.js +++ b/src/components/pages/AmbassadorsPage.js @@ -52,12 +52,12 @@ const mapsStyles = { const columnData = [ { id: 'nickname', numeric: false, disablePadding: true, label: 'Nickname' }, - { id: 'location', numeric: false, disablePadding: true, label: 'Location' }, { id: 'telegram', numeric: false, disablePadding: false, label: 'Telegram Account' }, { id: 'keybase', numeric: false, disablePadding: false, label: 'Keybase' }, { id: 'email', numeric: false, disablePadding: false, label: 'Email' }, { id: 'phone', numeric: false, disablePadding: false, label: 'Phone' }, { id: 'link', numeric: false, disablePadding: false, label: 'URL' }, + { id: 'location', numeric: false, disablePadding: true, label: 'Location' }, { id: 'map', numeric: false, disablePadding: false, label: 'Maps', disableSearch: true} ]; @@ -76,6 +76,8 @@ class AmbassadorsPage extends Component { skip: 0, data: [] }, + ambassadorsSearch: [], + merchantMarkers: [], loading: true, rowsPerPage: [100,200,300], numberOfRows: 100, @@ -95,6 +97,7 @@ class AmbassadorsPage extends Component { UNSAFE_componentWillMount() { // Get the ambassadors list this.getAmbassadors(); + this.getMerchants(); } fillResults(result) { @@ -107,17 +110,64 @@ class AmbassadorsPage extends Component { * @param {number} [limit=10] - Max items to be returned. * @param {number} [skip=0] - Start index search */ - getAmbassadors = async (limit = 10, skip = 0) => { + getAmbassadors = async (limit = 50, skip = 0) => { const app = this; // Initially we don't know how much the total value is, so to make sure we enter the loop // at least once we're just setting it to be 1 let total = 1; - const ambassadors = Client.service('api/v1/ambassadors'); + const ambassadors = Client.service('api/v2/ambassadors'); this.setState({loading: true}); let result; while(skip < total){ let partialResponse = await ambassadors.find({ + query: { + $sort: { account: 1 }, + $limit: limit, + $skip: skip, + disabled: false + } + }); + total = partialResponse.total; + result === undefined ? result = partialResponse : partialResponse.data.map(this.fillResults(result)); + skip = skip + limit; + } + + // Add location and maps button + result.data.forEach(function(ambassador){ + ambassador.location = { + searchText: app.addLocationSearchText(ambassador.cities), + value: app.addLocation(ambassador.cities) + } + ambassador.map = app.addMapButton(ambassador.nickname, ambassador.cities); + ambassador.link = {stripProtocol(ambassador.url)}; + }); + + // Once both return, update the state + app.setState({ + loading: false, + ambassadors: result, + ambassadorsSearch: result.data + }); + }; + + /** + * @description Get merchants from the web service + * @param {number} [limit=10] - Max items to be returned. + * @param {number} [skip=0] - Start index search + */ + getMerchants = async (limit = 50, skip = 0) => { + const app = this; + // Initially we don't know how much the total value is, so to make sure we enter the loop + // at least once we're just setting it to be 1 + let total = 1; + + const merchants = Client.service('api/v1/merchants'); + + let result; + while(skip < total){ + let partialResponse = await merchants.find({ query: { $sort: { account: 1 }, $limit: limit, @@ -129,15 +179,26 @@ class AmbassadorsPage extends Component { skip = skip + limit; } - result.data.forEach(function(ambassador){ - if(ambassador.city !== undefined) ambassador.city = (ambassador.city).replace(/(^|\s)\S/g, l => l.toUpperCase()); - if(ambassador.country !== undefined) ambassador.country = countries.getName(ambassador.country); - // Setup disabled to be string - ambassador.disabled = (ambassador.disabled) ? 'yes': ''; + result.data.forEach(function(merchants){ + if(merchants.city !== undefined) merchants.city = (merchants.city).replace(/(^|\s)\S/g, l => l.toUpperCase()); + if(merchants.country !== undefined) merchants.country = countries.getName(merchants.country); + }); + + const markers = result.data.map(merchant => { + const marker = { + lat: merchant.lat, + lng: merchant.lon, + withInfo: true, + infoTitle: merchant.name, + infoDescription: `${merchant.address}, ${merchant.city} - ${merchant.country}`, + }; + return marker; }); // Once both return, update the state - app.setState({loading: false, ambassadors: result}); + app.setState({ + merchantMarkers: markers + }); }; /** @@ -161,29 +222,78 @@ class AmbassadorsPage extends Component { }); } + addLocationSearchText(cities){ + let searchText = ''; + cities.forEach((location) => { + searchText += `${(location.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - ${countries.getName(location.country)} `; + }); + + return searchText; + } + + addLocation(cities){ + return ( + + {(cities.length > 1) && (
)} + {cities.map((location, index) => ( + + {`${(location.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - ${countries.getName(location.country)}`} + {(cities.length > 1) && (

)} + + ))} + + ); + } + + addMapButton(nickname, cities){ + const app = this; + return ( + + {cities.map((location, index) => ( +
+ +
+ ))} + + ); + } + + handleSearchChange(data){ + this.setState({ ambassadorsSearch: data }); + } + render() { const { data } = this.state.ambassadors; + const { ambassadorsSearch, merchantMarkers } = this.state; - data.map(ambassador => { - ambassador.location = `${ambassador.city} - ${ambassador.country}`; - ambassador.link = {stripProtocol(ambassador.url)}; - ambassador.map = ; - return ambassador; + const ambassadorsMarkers = []; + ambassadorsSearch.forEach(ambassador => { + ambassador.cities.forEach(function(city) { + const marker = { + lat: city.lat, + lng: city.lon, + withInfo: true, + infoTitle: ambassador.nickname, + infoDescription: `${city.name} - ${city.country}`, + }; + ambassadorsMarkers.push(marker); + }); }); return ( @@ -238,6 +348,7 @@ class AmbassadorsPage extends Component { showSearchColumns={false} rowsPerPage={10} isAdmin={false} + onSearchChange={(data) => this.handleSearchChange(data)} /> ) : ( @@ -245,6 +356,8 @@ class AmbassadorsPage extends Component { )}
data.data.push(item); } + /** + * @description Get ambassadors from the web service + * @param {number} [limit=10] - Max items to be returned. + * @param {number} [skip=0] - Start index search + */ + getAmbassadors = async (limit = 50, skip = 0) => { + const app = this; + // Initially we don't know how much the total value is, so to make sure we enter the loop + // at least once we're just setting it to be 1 + let total = 1; + + const ambassadors = Client.service('api/v2/ambassadors'); + + let result; + while(skip < total){ + let partialResponse = await ambassadors.find({ + query: { + $sort: { account: 1 }, + $limit: limit, + $skip: skip + } + }); + total = partialResponse.total; + result === undefined ? result = partialResponse : partialResponse.data.map(this.fillResults(result)); + skip = skip + limit; + } + + const markers = []; + result.data.forEach(ambassador => { + ambassador.cities.forEach(function(city) { + const marker = { + lat: city.lat, + lng: city.lon, + withInfo: true, + infoTitle: ambassador.nickname, + infoDescription: `${city.name} - ${city.country}`, + }; + markers.push(marker); + }); + }); + + // Once both return, update the state + app.setState({ ambassadorsMarkers: markers }); + }; + /** * @description Get merchants from the web service * @param {number} [limit=10] - Max items to be returned. * @param {number} [skip=0] - Start index search */ - getMerchants = async (limit = 10, skip = 0) => { + getMerchants = async (limit = 50, skip = 0) => { const app = this; // Initially we don't know how much the total value is, so to make sure we enter the loop // at least once we're just setting it to be 1 @@ -135,8 +182,31 @@ class MerchantsPage extends Component { if(merchants.country !== undefined) merchants.country = countries.getName(merchants.country); }); + result.data.map(merchant => { + merchant.map = ; + return merchant; + }); + // Once both return, update the state - app.setState({loading: false, merchants: result}); + app.setState({ + loading: false, + merchants: result, + merchantsSearch: result.data + }); }; /** @@ -160,28 +230,26 @@ class MerchantsPage extends Component { }); } - render() { - const { data } = this.state.merchants; + handleSearchChange(data){ + this.setState({ merchantsSearch: data }); + } - data.map(merchant => { - merchant.map = ; - return merchant; + render() { + const { data: merchantsData } = this.state.merchants; + const { ambassadorsMarkers, merchantsSearch } = this.state; + + const merchantMarkers = merchantsSearch.map(merchant => { + const marker = { + lat: merchant.lat, + lng: merchant.lon, + withInfo: true, + infoTitle: merchant.name, + infoDescription: `${merchant.address}, ${merchant.city} - ${merchant.country}`, + }; + return marker; }); + return (
@@ -223,16 +291,17 @@ class MerchantsPage extends Component { /> - {(data.length > 0) ? ( + {(merchantsData.length > 0) ? (

this.handleSearchChange(data)} />
) : ( @@ -240,6 +309,8 @@ class MerchantsPage extends Component { )}
0) ? values[0] : '';