\r\n {\r\n searchFields.fields.filter(x => x.sortable && !x.hideField).map((element, index) => {\r\n let buttonStyle = (element.isBeingSorted) ? \"primary\" : \"default\";\r\n return (\r\n \r\n )\r\n })\r\n }\r\n
Reduced!
\r\n}\r\n\r\nfunction NewButton(elementProps) {\r\n const {classes} = elementProps;\r\n return New listing
\r\n}\r\n\r\nfunction SoldButton(elementProps) {\r\n const {classes} = elementProps;\r\n return Sold
\r\n}\r\n\r\nconst reducedButton = withStyles(styles)(ReducedButton);\r\nconst newButton = withStyles(styles)(NewButton);\r\nconst soldButton = withStyles(styles)(SoldButton);\r\nexport { reducedButton as ReducedButton, newButton as NewButton, soldButton as SoldButton };\r\n","import React from \"react\";\r\nimport Helpers from \"../Utils/Helpers.js\";\r\nimport {withStyles} from '@material-ui/core/styles';\r\nimport Typography from \"@material-ui/core/es/Typography/Typography\";\r\nimport {NewButton, SoldButton, ReducedButton} from \"./Buttons.js\";\r\nimport moment from 'moment';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n color: \"#0c5460\",\r\n backgroundColor: \"#d1ecf1\",\r\n borderColor: \"#bee5eb\",\r\n marginBottom: \"1rem\",\r\n border: \"1px solid transparent\",\r\n borderRadius: \".25rem\",\r\n padding: \".75rem 1.25rem\"\r\n }\r\n});\r\n\r\nfunction SearchResultHighlight(elementProps) {\r\n\r\n const {classes, element} = elementProps;\r\n\r\n let price = null;\r\n if (element.salePrice > 0 && element.salePrice !== element.price) {\r\n price =\r\n \r\n
\r\n {price}\r\n {extraFeatures} \r\n {newButton}{reducedButton}{soldButton}\r\n {distance} \r\n
\r\n )\r\n}\r\n\r\nexport default withStyles(styles)(SearchResultHighlight);","import React from \"react\";\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Helpers from \"../Utils/Helpers.js\";\r\nimport Hidden from '@material-ui/core/Hidden';\r\nimport {Settings} from '../Utils/Settings.js';\r\nimport { Link } from \"react-router-dom\";\r\n\r\nimport SearchResultThumbnail from './SearchResultThumbnail.js';\r\nimport SearchResultsHighlight from './SearchResultHighlight.js';\r\n\r\nfunction SearchResultRow(elementProps) {\r\n\r\n const {element, index, inventoryType, classes} = elementProps;\r\n\r\n let description = element.description.replace(/<[^>]*>/g, \"\");\r\n let descriptionTrimmed = Helpers.trimAtNextWhitespace(description, 300);\r\n let basePath = \"\";\r\n if (inventoryType === Settings.inventoryTypes.TRAILER) {\r\n basePath = \"/trailer\"\r\n } else if (inventoryType === Settings.inventoryTypes.CARGO) {\r\n basePath = \"/cargo\"\r\n } else if (inventoryType === Settings.inventoryTypes.PART) {\r\n basePath = \"/part\"\r\n } else if (inventoryType === Settings.inventoryTypes.TRUCK) {\r\n basePath = \"/truck\"\r\n } else if (inventoryType === Settings.inventoryTypes.INVENTORY) {\r\n basePath = \"/listing\"\r\n }\r\n\r\n return(\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n {price.length !== null && {price} } {reducedButton}{soldButton}\r\n \r\n Mfg: {details.c_manu[0]}
\r\n Year: {details.c_year[0]}
\r\n Horses: {details.c_horses[0]}
\r\n Model: {details.c_model[0]}
\r\n New: {details.c_new[0]}
\r\n Living Quarters: {details.c_liv[0]}
\r\n Location: {details.c_con_city[0]}, {details.c_con_st[0]}
\r\n Stock: {details.c_stock[0]}
\r\n {details.c_con_e[0].length > 0 &&Email: {details.c_con_e[0]}
}\r\n {details.c_con_ph[0].length > 0 && Phone: {details.c_con_ph[0]}
}\r\n {details.C_con_phtf[0].length > 0 && Toll-Free: {details.C_con_phtf[0]}
}\r\n \r\n\r\n \r\n \r\n \r\n {video}\r\n 
\r\n \r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default (DetailsTrailer);\r\n\r\n","import React, {Component} from 'react';\r\nimport {Settings} from \"../Utils/Settings\";\r\nimport ImageGallery from 'react-image-gallery';\r\nimport \"react-image-gallery/styles/css/image-gallery.css\";\r\nimport Grid from '@material-ui/core/Grid';\r\nimport {Helmet} from \"react-helmet\";\r\nimport Typography from \"@material-ui/core/es/Typography/Typography\";\r\nimport Helpers from \"../Utils/Helpers\";\r\nimport Card from '@material-ui/core/Card';\r\nimport ResponsiveEmbed from \"react-responsive-embed\";\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nimport {\r\n FacebookShareButton,\r\n GooglePlusShareButton,\r\n TwitterShareButton,\r\n PinterestShareButton,\r\n EmailShareButton,\r\n} from 'react-share';\r\n\r\nimport {\r\n FacebookIcon,\r\n GooglePlusIcon,\r\n TwitterIcon,\r\n PinterestIcon,\r\n EmailIcon,\r\n} from 'react-share';\r\n\r\nimport { Link } from \"react-router-dom\"\r\nimport {ReducedButton, SoldButton} from \"./Buttons\";\r\n\r\nclass DetailsCargo extends Component {\r\n\r\n render() {\r\n\r\n const details = this.props.searchDetailsRecord;\r\n\r\n if (!details) {\r\n return \"\";\r\n }\r\n\r\n let images = [];\r\n let firstImage = \"\";\r\n\r\n for (var index = 1; index <= 30; index++) {\r\n let image = details[\"IMG\" + index][0];\r\n let thumbnail = details[\"IMGTHUMB\" + index][0];\r\n let caption = details[\"COM\" + index][0];\r\n if (image && image.length > 0) {\r\n if (firstImage.length === 0) {\r\n firstImage = image;\r\n }\r\n\r\n images.push({\r\n original: image,\r\n thumbnail: thumbnail,\r\n description: caption\r\n });\r\n }\r\n }\r\n\r\n let normalPrice = parseFloat(details.ct_price[0]).toFixed(0);\r\n\r\n let pageTitle = details.ct_year[0] + \" \" + details.ct_manu[0] + \" \" + details.ct_model[0];\r\n let pageCanonicalUrl = details.URL[0];\r\n\r\n let videoUrl = Helpers.getVideoEmbedUrl(details.ct_videourl[0]);\r\n let video =(videoUrl) ?\r\n \r\n Year: {details.c_year[0]}
\r\n Horses: {details.c_horses[0]}
\r\n Model: {details.c_model[0]}
\r\n New: {details.c_new[0]}
\r\n Living Quarters: {details.c_liv[0]}
\r\n Location: {details.c_con_city[0]}, {details.c_con_st[0]}
\r\n Stock: {details.c_stock[0]}
\r\n {details.c_con_e[0].length > 0 &&
\r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n ${Helpers.formatMoney(normalPrice)}
{reducedButton}{soldButton}\r\n \r\n Mfg: {details.ct_manu[0]}
\r\n Model: {details.ct_model[0]}
\r\n Type: {details.ct_type[0]}
\r\n Year: {details.ct_year[0]}
\r\n New: {details.ct_new[0]}
\r\n Pull: {details.ct_pull}
\r\n Location: {details.ct_city[0]}, {details.ct_st[0]}
\r\n Stock: {details.ct_stock[0]}
\r\n {details.ct_email[0].length > 0 &&Email: {details.ct_email[0]}
}\r\n {details.ct_phone[0].length > 0 && Phone: {details.ct_phone[0]}
}\r\n {details.ct_phonetf[0].length > 0 && Toll-Free: {details.ct_phonetf}
}\r\n \r\n\r\n \r\n \r\n \r\n {video}\r\n \r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default (DetailsCargo);\r\n\r\n","import React, {Component} from 'react';\r\nimport {Settings} from \"../Utils/Settings\";\r\nimport ImageGallery from 'react-image-gallery';\r\nimport \"react-image-gallery/styles/css/image-gallery.css\";\r\nimport Grid from '@material-ui/core/Grid';\r\nimport {Helmet} from \"react-helmet\";\r\nimport Typography from \"@material-ui/core/es/Typography/Typography\";\r\nimport Helpers from \"../Utils/Helpers\";\r\nimport Card from '@material-ui/core/Card';\r\nimport Button from \"@material-ui/core/Button\";\r\nimport ResponsiveEmbed from \"react-responsive-embed\";\r\n\r\nimport {\r\n FacebookShareButton,\r\n GooglePlusShareButton,\r\n TwitterShareButton,\r\n PinterestShareButton,\r\n EmailShareButton,\r\n} from 'react-share';\r\n\r\nimport {\r\n FacebookIcon,\r\n GooglePlusIcon,\r\n TwitterIcon,\r\n PinterestIcon,\r\n EmailIcon,\r\n} from 'react-share';\r\nimport { Link } from \"react-router-dom\"\r\nimport {ReducedButton, SoldButton} from \"./Buttons\";\r\n\r\nclass DetailsTruck extends Component {\r\n\r\n render() {\r\n\r\n const details = this.props.searchDetailsRecord;\r\n\r\n if (!details) {\r\n return \"\";\r\n }\r\n\r\n let images = [];\r\n let firstImage = \"\";\r\n\r\n for (let index = 1; index <= 10; index++) {\r\n let image = details[\"t_xpath\" + index][0];\r\n let thumbnail = details[\"t_xpathth\" + index][0];\r\n let caption = details[\"t_com\" + index][0];\r\n if (image && image.length > 0) {\r\n if (firstImage.length === 0) {\r\n firstImage = image;\r\n }\r\n\r\n images.push({\r\n original: image,\r\n thumbnail: thumbnail,\r\n description: caption\r\n });\r\n }\r\n }\r\n\r\n let normalPrice = parseFloat(details.t_price[0]).toFixed(0);\r\n\r\n let pageTitle = details.t_year[0] + \" \" + details.t_make[0] + \" \" + details.t_model[0];\r\n let pageCanonicalUrl = details.URL[0];\r\n\r\n let trackingImage = \"https://dashboard.equinemediaworld.com/Listing/Impression?lt=\" + Settings.inventoryTypes.TRUCK + \"&id=\" + details.t_id[0];\r\n let videoUrl = Helpers.getVideoEmbedUrl(details.t_videolink[0]);\r\n let video =(videoUrl) ?\r\n \r\n Model: {details.ct_model[0]}
\r\n Type: {details.ct_type[0]}
\r\n Year: {details.ct_year[0]}
\r\n New: {details.ct_new[0]}
\r\n Pull: {details.ct_pull}
\r\n Location: {details.ct_city[0]}, {details.ct_st[0]}
\r\n Stock: {details.ct_stock[0]}
\r\n {details.ct_email[0].length > 0 &&
\r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n {Helpers.formatMoney(normalPrice)}
{reducedButton}{soldButton}\r\n \r\n Mfg: {details.t_make[0]}
\r\n Model: {details.t_model[0]}
\r\n Mileage: {details.t_mileage[0]}
\r\n Engine: {details.t_engine[0]}
\r\n Drive: {details.t_drive[0]}
\r\n Dually: {details.t_dually[0]}
\r\n New: {details.t_new[0]}
\r\n Location: {details.t_city[0]}, {details.t_state[0]}
\r\n Stock: {details.t_stock[0]}
\r\n {details.t_email[0].length > 0 &&Email: {details.t_email[0]}
}\r\n {details.t_phone[0].length > 0 && Phone: {details.t_phone[0]}
}\r\n {details.t_fax[0].length > 0 && Fax: {details.t_fax[0]}
}\r\n {details.t_cell[0].length > 0 && Fax: {details.t_cell[0]}
}\r\n \r\n\r\n \r\n \r\n \r\n {video}\r\n \r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default (DetailsTruck);\r\n\r\n","import React, {Component} from 'react';\r\nimport {Settings} from \"../Utils/Settings\";\r\nimport ImageGallery from 'react-image-gallery';\r\nimport \"react-image-gallery/styles/css/image-gallery.css\";\r\nimport Grid from '@material-ui/core/Grid';\r\nimport {Helmet} from \"react-helmet\";\r\nimport Typography from \"@material-ui/core/es/Typography/Typography\";\r\nimport Helpers from \"../Utils/Helpers\";\r\nimport Card from '@material-ui/core/Card';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nimport {\r\n FacebookShareButton,\r\n GooglePlusShareButton,\r\n TwitterShareButton,\r\n PinterestShareButton,\r\n EmailShareButton,\r\n} from 'react-share';\r\n\r\nimport {\r\n FacebookIcon,\r\n GooglePlusIcon,\r\n TwitterIcon,\r\n PinterestIcon,\r\n EmailIcon,\r\n} from 'react-share';\r\nimport { Link } from \"react-router-dom\"\r\n\r\nclass DetailsPart extends Component {\r\n\r\n render() {\r\n\r\n const details = this.props.searchDetailsRecord;\r\n\r\n if (!details) {\r\n return \"\";\r\n }\r\n\r\n let images = [];\r\n let firstImage = \"\";\r\n\r\n for (let index = 1; index <= 10; index++) {\r\n let image = details[\"t_xpath\" + index][0];\r\n let thumbnail = details[\"t_xpathth\" + index][0];\r\n let caption = details[\"t_com\" + index][0];\r\n if (image && image.length > 0) {\r\n if (firstImage.length === 0) {\r\n firstImage = image;\r\n }\r\n\r\n images.push({\r\n original: image,\r\n thumbnail: thumbnail,\r\n description: caption\r\n });\r\n }\r\n }\r\n\r\n let normalPrice = parseFloat(details.t_price[0]).toFixed(0);\r\n\r\n let pageTitle = details.t_year[0] + \" \" + details.t_make[0] + \" \" + details.t_model[0];\r\n let pageCanonicalUrl = details.URL[0];\r\n\r\n let trackingImage = \"https://dashboard.equinemediaworld.com/Listing/Impression?lt=\" + Settings.inventoryTypes.TRUCK + \"&id=\" + details.t_id[0];\r\n let shareUrl = Settings.socialShareUseCanonicalUrls ? pageCanonicalUrl : window.location.href;\r\n\r\n return (\r\n \r\n Model: {details.t_model[0]}
\r\n Mileage: {details.t_mileage[0]}
\r\n Engine: {details.t_engine[0]}
\r\n Drive: {details.t_drive[0]}
\r\n Dually: {details.t_dually[0]}
\r\n New: {details.t_new[0]}
\r\n Location: {details.t_city[0]}, {details.t_state[0]}
\r\n Stock: {details.t_stock[0]}
\r\n {details.t_email[0].length > 0 &&
\r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n ${Helpers.formatMoney(normalPrice)}
\r\n \r\n Mfg: {details.t_make[0]}
\r\n Model: {details.t_model[0]}
\r\n Mileage: {details.t_mileage[0]}
\r\n Engine: {details.t_engine[0]}
\r\n Drive: {details.t_drive}
\r\n Location: {details.t_city[0]}, {details.t_state[0]}
\r\n Stock: {details.t_stock[0]}
\r\n {details.t_email[0].length > 0 &&Email: {details.t_email[0]}
}\r\n {details.t_phone[0].length > 0 && Phone: {details.t_phone[0]}
}\r\n {details.t_fax[0].length > 0 && Fax: {details.t_fax[0]}
}\r\n {details.t_cell[0].length > 0 && Fax: {details.t_cell[0]}
}\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default (DetailsPart);\r\n\r\n","import React, {Component} from 'react';\r\nimport {Settings} from \"../Utils/Settings\";\r\nimport ImageGallery from 'react-image-gallery';\r\nimport \"react-image-gallery/styles/css/image-gallery.css\";\r\nimport Grid from '@material-ui/core/Grid';\r\nimport {Helmet} from \"react-helmet\";\r\nimport Typography from \"@material-ui/core/es/Typography/Typography\";\r\nimport Helpers from \"../Utils/Helpers\";\r\nimport Card from '@material-ui/core/Card';\r\nimport Button from \"@material-ui/core/Button\";\r\nimport ResponsiveEmbed from \"react-responsive-embed\";\r\nimport { Link } from \"react-router-dom\"\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\n\r\nimport {\r\n FacebookShareButton,\r\n GooglePlusShareButton,\r\n TwitterShareButton,\r\n PinterestShareButton,\r\n EmailShareButton,\r\n} from 'react-share';\r\n\r\nimport {\r\n FacebookIcon,\r\n GooglePlusIcon,\r\n TwitterIcon,\r\n PinterestIcon,\r\n EmailIcon,\r\n} from 'react-share';\r\n\r\nimport {ReducedButton, SoldButton} from \"./Buttons\";\r\n\r\nclass DetailsInventory extends Component {\r\n\r\n render() {\r\n\r\n const details = this.props.searchDetailsRecord;\r\n\r\n if (!details) {\r\n return \"\";\r\n }\r\n\r\n let images = [];\r\n let firstImage = \"\";\r\n\r\n images = details.media.filter(x=>x.type === 2).map(val => {\r\n if (firstImage.length === 0) {\r\n firstImage = val.xPath;\r\n }\r\n\r\n return {\r\n original: val.xPath,\r\n thumbnail: val.xPathThumbnail,\r\n description: val.caption\r\n }\r\n });\r\n\r\n let normalPrice = parseFloat(details.price).toFixed(2);\r\n let priceComponent = null;\r\n if (normalPrice > 0) {\r\n priceComponent = \r\n Model: {details.t_model[0]}
\r\n Mileage: {details.t_mileage[0]}
\r\n Engine: {details.t_engine[0]}
\r\n Drive: {details.t_drive}
\r\n Location: {details.t_city[0]}, {details.t_state[0]}
\r\n Stock: {details.t_stock[0]}
\r\n {details.t_email[0].length > 0 &&
\r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {pageTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n {priceComponent} {reducedButton}{soldButton}\r\n Contact \r\n \r\n {details.contactStreet.length > 0 && {details.contactStreet}
}\r\n {details.contactCity.length > 0 && {details.contactCity}, {details.contactState}
}\r\n {details.contactZip.length > 0 && {details.contactZip}
}\r\n {details.contactEmail.length > 0 && Email: {details.contactEmail}
}\r\n {details.contactWeb.length > 0 && {details.contactWeb}
}\r\n {details.contactPhone.length > 0 && Phone: {details.contactPhone}
}\r\n {details.contactPhoneTollFree.length > 0 && Toll-free: {details.contactPhoneTollFree}
}\r\n {details.contactCell.length > 0 && Cell: {details.contactCell}
}\r\n {details.contactFax.length > 0 && Fax: {details.contactFax}
}\r\n {details.contactBestTime.length > 0 && Best time: {details.contactBestTime}
}\r\n \r\n {mapsComponent}\r\n \r\n \r\n \r\n {extraDetailsComponent}\r\n \r\n \r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default (DetailsInventory);\r\n\r\n","import React, {Component} from 'react';\r\nimport Helpers from './Utils/Helpers.js';\r\nimport 'typeface-roboto';\r\nimport {Helmet} from \"react-helmet\"; // Meta tag and title injector\r\nimport {Settings, InventoryTheme, DefaultSearchFields, DefaultSearchHandler} from './Utils/Settings.js';\r\nimport CssBaseline from '@material-ui/core/CssBaseline';\r\nimport { MuiThemeProvider } from '@material-ui/core/styles';\r\nimport { Route, withRouter } from \"react-router-dom\";\r\nimport PrimaryInventorySelector from './Components/PrimaryInventorySelector.js';\r\nimport InventorySelector from './Components/InventorySelector.js';\r\nimport InventorySearchFields from \"./Components/SearchFields.js\";\r\nimport InventorySearchResults from \"./Components/SearchResults.js\";\r\nimport DetailsTrailer from \"./Components/DetailsTrailer.js\";\r\nimport DetailsCargo from \"./Components/DetailsCargo\";\r\nimport DetailsTruck from \"./Components/DetailsTruck\";\r\nimport DetailsPart from \"./Components/DetailsPart\";\r\nimport DetailsInventory from \"./Components/DetailsInventory\";\r\nimport ScrollMemory from \"react-router-scroll-memory\";\r\n\r\nconst queryString = require('query-string'); // helpers for parsing the querystring\r\n\r\nclass App extends Component {\r\n\r\n constructor(props, context) {\r\n\r\n // Note: The primary initiator of state changes comes from react-router and URL changes\r\n // 1. A component will update the URL. Like the search component or next/back paging buttons.\r\n // 2. The app.js detects the URL update in componentDidUpdate() and downloads the necessary data.\r\n // 3. The components receive the data\r\n\r\n super(props, context);\r\n\r\n // Empty defaults for everything\r\n this.state = {\r\n inventoryType: Settings.inventoryTypes.NONE, // Horses, trailers, inventory, etc\r\n searchFieldsIsLoading: false,\r\n searchFields: { fields: []},\r\n searchFieldsPage: 1,\r\n searchFieldsError: null,\r\n searchFieldsCategoryName: \"\",\r\n\r\n searchResultsIsLoading: false,\r\n searchResultsError: null,\r\n searchResults: null,\r\n\r\n searchDetailsRecord: null,\r\n\r\n inventoryCategory: 0, // Category of the modern inventory system (Ranchjunk and other sites)\r\n inventoryCategories: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.populateStateFromRoute(false);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.location.pathname !== prevProps.location.pathname) {\r\n window.scrollTo(0, 0);\r\n this.populateStateFromRoute();\r\n }\r\n else if (this.props.location.search !== prevProps.location.search) {\r\n window.scrollTo(0, 0);\r\n this.populateStateFromRoute(true);\r\n }\r\n }\r\n\r\n populateStateFromRoute(setDefaults) {\r\n // Load initial values from the route properties\r\n let it = Settings.inventoryTypes.NONE;\r\n if (this.props.location.pathname.startsWith(\"/search\")) {\r\n if (this.props.location.pathname.startsWith(\"/search/horse-trailers\")) {\r\n it = Settings.inventoryTypes.TRAILER;\r\n }\r\n if (this.props.location.pathname.startsWith(\"/search/cargo-trailers\")) {\r\n it = Settings.inventoryTypes.CARGO;\r\n }\r\n if (this.props.location.pathname.startsWith(\"/search/trucks\")) {\r\n it = Settings.inventoryTypes.TRUCK;\r\n }\r\n if (this.props.location.pathname.startsWith(\"/search/parts\")) {\r\n it = Settings.inventoryTypes.PART;\r\n }\r\n\r\n // Only reload the search fields and results if we've changed types, or it is specifically requested to do so\r\n if (it !== this.state.inventoryType || setDefaults) {\r\n this.setState({\r\n inventoryType: it,\r\n searchResults: null,\r\n searchDetailsRecord: null\r\n });\r\n this.populateSearchFields(it, this.props.location.search);\r\n }\r\n }\r\n\r\n if (this.props.location.pathname.startsWith(\"/inventory\")) {\r\n if (this.props.location.pathname === \"/inventory\") {\r\n this.populateInventoryCategories();\r\n }\r\n if (this.props.location.pathname.startsWith(\"/inventory\")) {\r\n it = Settings.inventoryTypes.INVENTORY;\r\n let inventoryCategory = this.props.location.pathname.substring(\"/inventory/\".length);\r\n\r\n // Only reload the search fields and results if we've changed types, or it is specifically requested to do so\r\n if (setDefaults || inventoryCategory !== \"\" && ((it !== this.state.inventoryType) || (inventoryCategory !== this.state.inventoryCategory ))) {\r\n this.populateSearchFields(it, this.props.location.search, inventoryCategory);\r\n this.setState({\r\n inventoryType: it,\r\n searchResults: null,\r\n inventoryCategory: inventoryCategory,\r\n searchDetailsRecord: null\r\n });\r\n }\r\n }\r\n }\r\n\r\n if (this.props.location.pathname.startsWith(\"/trailer/details/\")) {\r\n this.setState({\r\n searchDetailsRecord: null,\r\n });\r\n let listingId = Helpers.getListingId(this.props.location.pathname, \"/trailer/details/\");\r\n this.populateDetails(Settings.inventoryTypes.TRAILER, listingId);\r\n }\r\n\r\n if (this.props.location.pathname.startsWith(\"/cargo/details/\")) {\r\n this.setState({\r\n searchDetailsRecord: null,\r\n });\r\n let listingId = Helpers.getListingId(this.props.location.pathname, \"/cargo/details/\");\r\n this.populateDetails(Settings.inventoryTypes.CARGO, listingId);\r\n }\r\n\r\n if (this.props.location.pathname.startsWith(\"/truck/details/\")) {\r\n this.setState({\r\n searchDetailsRecord: null,\r\n });\r\n let listingId = Helpers.getListingId(this.props.location.pathname, \"/truck/details/\");\r\n this.populateDetails(Settings.inventoryTypes.TRUCK, listingId);\r\n }\r\n\r\n if (this.props.location.pathname.startsWith(\"/part/details/\")) {\r\n this.setState({\r\n searchDetailsRecord: null,\r\n });\r\n let listingId = Helpers.getListingId(this.props.location.pathname, \"/part/details/\");\r\n this.populateDetails(Settings.inventoryTypes.PART, listingId);\r\n }\r\n\r\n if (this.props.location.pathname.startsWith(\"/listing/details/\")) {\r\n this.setState({\r\n searchDetailsRecord: null,\r\n });\r\n let listingId = Helpers.getListingId(this.props.location.pathname, \"/listing/details/\");\r\n this.populateDetails(Settings.inventoryTypes.INVENTORY, listingId);\r\n }\r\n }\r\n\r\n // Only called if the inventory type changes. Updates the default search fields based on the inventory type.\r\n // Also populates default choices.\r\n populateSearchFields(newInventoryType, defaultsString, inventoryCategory) {\r\n // https://reactjs.org/docs/faq-ajax.html\r\n let promise = DefaultSearchFields.getFields(newInventoryType, inventoryCategory);\r\n promise.then(\r\n (result) => {\r\n // Apply querystring defaults\r\n let page = 0;\r\n const defaults = queryString.parse(defaultsString);\r\n for (let key in defaults) {\r\n\r\n if (key === \"sort\") {\r\n let filterId = defaults[key];\r\n result.fields.find(x => x.isBeingSorted).isBeingSorted = false;\r\n let sortField = result.fields.find(x => x.filterId === filterId);\r\n if (sortField) {\r\n sortField.isBeingSorted = true;\r\n\r\n let sortDirection = defaults[\"sortDirection\"];\r\n if (sortDirection) {\r\n sortField.sortDirection = sortDirection;\r\n }\r\n }\r\n }\r\n\r\n if (key.startsWith(\"opt\")) {\r\n let filterId = key.substring(3);\r\n let filterField = result.fields.find(x => x.filterId === filterId);\r\n if (filterField) {\r\n if (filterField.fieldType === \"multiselect\") {\r\n if (Array.isArray(defaults[key])) {\r\n filterField.selectedValues = defaults[key];\r\n } else {\r\n filterField.selectedValues = [defaults[key]];\r\n }\r\n } else {\r\n filterField.selectedValue = defaults[key];\r\n }\r\n }\r\n }\r\n\r\n if (key.startsWith(\"zip\")) {\r\n let filterField = result.fields.find(x => x.filterId === \"zip\");\r\n if (filterField)\r\n {\r\n filterField.selectedValue = defaults[key];\r\n }\r\n }\r\n\r\n // If the page parameter is supplied, use it and initiate a search\r\n if (key === \"page\") {\r\n page = parseInt(defaults[key]);\r\n }\r\n\r\n }\r\n this.setState({\r\n searchFieldsError: null,\r\n searchFields: result,\r\n searchFieldsPage: page\r\n })\r\n\r\n if (page > 0) {\r\n this.performSearch();\r\n //this.handleSearch(page);\r\n }\r\n },\r\n (error) => {\r\n this.setState({\r\n searchFieldsError: error,\r\n })\r\n },\r\n )\r\n };\r\n\r\n // Retrieves the details for a listing\r\n populateDetails(inventoryType, listingId) {\r\n DefaultSearchHandler.GetDetails(inventoryType, listingId)\r\n .then(\r\n (result) => {\r\n this.setState({\r\n searchDetailsRecord: result\r\n });\r\n },\r\n (error) => {\r\n window.alert(\"An error occurred. Please try again. \" + error);\r\n },\r\n )\r\n };\r\n\r\n populateInventoryCategories() {\r\n let icPromise = DefaultSearchHandler.GetInventoryCategories();\r\n icPromise.then((result) => {\r\n this.setState({\r\n inventoryCategories: result\r\n });\r\n });\r\n }\r\n\r\n // When a user makes a change to a search parameter\r\n handleSearchFieldChange = (filterId, newValue) => {\r\n\r\n this.setState((previousState, currentProps) => {\r\n\r\n let searchField = previousState.searchFields.fields.find(x=>x.filterId===filterId);\r\n\r\n // Update the previous state with the new values\r\n if (searchField) {\r\n if (Array.isArray(newValue)) {\r\n searchField.selectedValues = newValue;\r\n } else {\r\n searchField.selectedValue = newValue;\r\n }\r\n\r\n // Search field bound to a sort parameter\r\n if (searchField.setFilterIdWhenChanged) {\r\n\r\n // Deselect all current sort filters\r\n previousState.searchFields.fields.find(x => x.isBeingSorted).isBeingSorted = false;\r\n\r\n // If a search field is bound to a sort field, enable the sort if a search value is being supplied\r\n // The user can change this sort using the UI, but the sort will be enabled by default\r\n let dependentField = previousState.searchFields.fields.find(x=>x.filterId===searchField.setFilterIdWhenChanged);\r\n\r\n if (dependentField) {\r\n if (newValue.length > 0) {\r\n dependentField.isBeingSorted = true;\r\n dependentField.disabled = false;\r\n } else {\r\n // If there is no value, deselect the bound sort field and reset to the search's default\r\n previousState.searchFields.fields.find(x => x.isDefaultSort).isBeingSorted = true;\r\n dependentField.disabled = true;\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Merge the searchFields state\r\n return {\r\n searchFields: previousState.searchFields\r\n }\r\n });\r\n }\r\n\r\n handleSortFieldChange = (filterId) => {\r\n this.setState((previousState, currentProps) => {\r\n\r\n // Has the sort actually changed?\r\n let existingSort = previousState.searchFields.fields.find(x=>x.isBeingSorted);\r\n if (existingSort && existingSort.filterId === filterId) {\r\n return null;\r\n }\r\n previousState.searchFields.fields.find(x=>x.isBeingSorted).isBeingSorted = false;\r\n previousState.searchFields.fields.find(x=>x.filterId===filterId).isBeingSorted = true;\r\n this.handleSearch(previousState.searchFieldsPage);\r\n\r\n // Merge the searchFields state\r\n return {\r\n searchFields: previousState.searchFields\r\n }\r\n });\r\n };\r\n\r\n // Updates the querystring which will trigger a componentDidUpdate => performSearch\r\n handleSearch = (page = 1) => {\r\n this.setState({\r\n searchResultsIsLoading: true,\r\n });\r\n\r\n // Update the querystring\r\n let qsParams = DefaultSearchHandler.BuildSearchQuerystring(this.state.searchFields, page);\r\n this.props.history.push(this.props.location.pathname + \"?\" + qsParams);\r\n };\r\n\r\n performSearch = () => {\r\n DefaultSearchHandler.PerformSearch(this.state.inventoryType, this.state.searchFields, this.state.searchFieldsPage, this.state.inventoryCategory)\r\n .then(\r\n (result) => {\r\n this.setState({\r\n searchResultsIsLoading: false,\r\n searchResultsError: null,\r\n searchResults: result.results,\r\n searchResultsTotalRecords: result.totalRecords,\r\n searchResultsTotalPages: result.totalPages,\r\n searchResultsCurrentPage: result.currentPage\r\n })\r\n },\r\n (error) => {\r\n this.setState({\r\n searchFieldsPage: 1,\r\n searchResultsIsLoading: false,\r\n searchResultsError: error,\r\n searchResults: [],\r\n searchResultsTotalRecords: 0,\r\n searchResultsTotalPages: 0,\r\n searchResultsCurrentPage: 0\r\n })\r\n },\r\n )\r\n }\r\n\r\n\r\n\r\n render() {\r\n const {\r\n inventoryType,\r\n searchFieldsIsLoading, searchResultsIsLoading,\r\n searchResultsError, searchFieldsError,\r\n searchFields,\r\n searchResults, searchResultsTotalRecords, searchResultsTotalPages, searchResultsCurrentPage,\r\n searchDetailsRecord,\r\n inventoryCategories\r\n } = this.state;\r\n\r\n const primaryInventorySelectorComponent = () => \r\n
\r\n\r\n \r\n \r\n Remote Inventory \r\n \r\n \r\n \r\n \r\n }/>\r\n\r\n \r\n \r\n }/>\r\n\r\n \r\n \r\n \r\n \r\n \r\n ![\"\"](\"Content/loading.gif\")
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(props => \r\n \r\n
\r\n