@stratusjs/idx
Version:
AngularJS idx/property Service and Components bundle to be used as an add on to StratusJS
299 lines (275 loc) • 18.2 kB
HTML
<div id="{{elementId}}" class="property-search property-search-classic search-mini font-primary" role="search" aria-label="Property" data-ng-cloak>
<div class="search-row">
<h2 data-ng-show="widgetName" data-ng-bind="widgetName"></h2>
<div class="search-input">
<md-input-container class="md-block minimal">
<!-- TODO: add Address -->
<label>City, Neighborhood, Zip, Address</label>
<input
data-ng-if="!options.query.where.Location"
data-ng-model="options.query.where.eLocation"
type="text" maxlength="250"
data-ng-keyup="$event.keyCode == 13 && search()"
autocomplete="off"
>
<input
data-ng-if="options.query.where.Location"
data-ng-model="options.query.where.Location"
type="text" maxlength="250"
data-ng-keyup="$event.keyCode == 13 && search()"
autocomplete="off"
>
</md-input-container>
</div>
</div>
<div class="search-row" data-layout="row" data-layout-align="space-around center">
<div style="display: none; visibility: hidden;">
<div class="stratus-idx-property-search-menu property-search-classic md-whiteframe-z2">
<div class="outer-padding" data-layout="column" data-layout-align="space-around center">
<div class="property-specs" data-layout="row">
<div class="search-input" data-flex="50" data-flex-gt-sm="25">
<md-input-container class="md-block minimal">
<label>Min Price</label>
<input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMin" type="text" maxlength="11" size="8" autocomplete="off">
</md-input-container>
</div>
<div class="search-input" data-flex="50" data-flex-gt-sm="25">
<md-input-container class="md-block minimal">
<label>Max Price</label>
<input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMax" type="text" maxlength="11" size="8" autocomplete="off">
</md-input-container>
</div>
<div class="search-input" data-flex="50" data-flex-gt-sm="25">
<md-input-container class="md-block minimal">
<label>Beds</label>
<md-select data-ng-model="options.query.where.Bedrooms">
<md-option></md-option>
<md-option data-ng-repeat="option in options.selection.Bedrooms" data-ng-value="option.value">
{{option.name}}
</md-option>
</md-select>
</md-input-container>
</div>
<div class="search-input" data-flex="50" data-flex-gt-sm="25">
<md-input-container class="md-block minimal">
<label>Baths</label>
<md-select data-ng-model="options.query.where.Bathrooms">
<md-option></md-option>
<md-option data-ng-repeat="option in options.selection.Bathrooms" data-ng-value="option.value">
{{option.name}}
</md-option>
</md-select>
</md-input-container>
</div>
</div>
<div class="property-specs-border dotted-spaced-underline"></div>
<div class="toggle-switch" data-layout="row" data-layout-align="center center" aria-label="Listings to Buy or Rent">
<div class="option-choice font-primary" data-ng-class="{inactive: options.forRent}" data-flex>
Buy
</div>
<md-switch
data-ng-model="options.forRent"
data-ng-change="selectDefaultListingType()"
aria-label="Buy or Rent"
data-flex>
</md-switch>
<div class="option-choice font-primary" data-ng-class="{inactive: !options.forRent}" data-flex>
Rent
</div>
</div>
<div data-layout="row" data-ng-show="!options.forRent" data-layout-align="space-around center" aria-label="Listing Status">
<md-button class="md-raised font-primary"
data-ng-class="{'md-primary': _.includes(options.query.where.Status, 'Active')}"
data-ng-click="options.query.where.Status = ['Active', 'Contract'];"
aria-label="For Sale"
data-md-prevent-menu-close
>
For Sale
</md-button>
<md-button class="md-raised font-primary"
data-ng-class="{'md-primary': _.includes(options.query.where.Status, 'Closed')}"
data-ng-click="options.query.where.Status = ['Closed']"
aria-label="Sold"
data-md-prevent-menu-close
>
Sold
</md-button>
</div>
<div data-ng-show="!options.forRent">
<md-checkbox
class="show-under-contract font-secondary"
data-ng-checked="_.includes(options.query.where.Status, 'Contract')"
data-ng-click="toggleArrayElement('Contract', options.query.where.Status)"
aria-label="Under Contract"
data-md-prevent-menu-close
>
Show Under Contract
</md-checkbox>
</div>
<div data-ng-show="isPresetLocationSet() || options.query.where.eLocation.length || options.query.where.Location.length || options.query.where.AgentLicense.length || options.query.where.OfficeNumber.length">
<!-- 'Openhouses Only' is only allowed when more filters are supplied due to speed restrictions -->
<md-checkbox
class="show-open-houses"
data-ng-model="options.query.where.OpenHouseOnly"
aria-label="Open Houses Only"
data-md-prevent-menu-close
>
Open Houses Only
</md-checkbox>
</div>
<div class="sale-status-border dotted-spaced-underline"></div>
<!--
<div data-layout="row" data-layout-align="space-around center">
<div class="search-input">
<md-input-container class="md-block minimal">
<label>Sort</label>
<md-select data-ng-model="options.query.Order">
<md-option data-ng-repeat="option in options.selection.Order" data-ng-value="option.value">
{{option.name}}
</md-option>
</md-select>
</md-input-container>
</div>
</div>-->
<div class="property-zoning" data-layout="row" data-layout-align="space-around center" aria-label="Listing Zoning">
<md-button
class="font-primary"
data-ng-class="{'md-primary': options.selection.ListingType.group.Residential}"
data-ng-click="selectDefaultListingType('Residential')"
aria-label="Residential"
data-md-prevent-menu-close
>
Residential
</md-button>
<md-button
class="font-primary"
data-ng-class="{'md-primary': options.selection.ListingType.group.Commercial}"
data-ng-click="selectDefaultListingType('Commercial')"
aria-label="Commercial"
data-md-prevent-menu-close
>
Commercial
</md-button>
</div>
<div data-layout="row" data-layout-align="center center" aria-label="Listing Types" data-layout-wrap>
<md-button
data-ng-repeat="listType in ::options.selection.ListingType.All"
class="md-raised font-primary"
data-ng-show="options.forRent === listType.lease && options.selection.ListingType.group[listType.group]"
data-ng-class="{'md-primary': _.includes(options.query.where.ListingType, listType.value)}"
data-ng-click="toggleArrayElement(listType.value, options.query.where.ListingType)"
aria-label="{{::listType.name}}"
data-md-prevent-menu-close
data-ng-bind="::listType.name"
></md-button>
</div>
<!-- Only Include if these were preset in a Property Filter pages and we need the ability to remove them -->
<div data-ng-if="options.query.where.eCity.length || options.query.where.City.length || options.query.where.eMLSAreaMajor.length || options.query.where.MLSAreaMajor.length || options.PostalCode.length">
<div class="sale-status-border dotted-spaced-underline"></div>
<h3 data-layout-align="space-around center">Preset Filters</h3>
<div class="specific-filters" data-layout="row" data-layout-align="space-around center" aria-label="Specific Areas">
<div class="search-input" data-ng-if="options.query.where.eCity.length">
<md-chips
class="city-id font-secondary"
aria-label="Cities to Limit"
data-ng-model="options.query.where.eCity"
data-md-enable-chip-edit="true"
data-md-add-on-blur="true"
data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]"
data-placeholder="City"
data-secondary-placeholder="+City"
data-delete-button-label="Remove City"
data-delete-hint="Press delete to remove City"
></md-chips>
</div>
<div class="search-input" data-ng-if="options.query.where.City.length">
<md-chips
class="city-id font-secondary"
aria-label="Cities to Limit"
data-ng-model="options.query.where.City"
data-md-enable-chip-edit="true"
data-md-add-on-blur="true"
data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]"
data-placeholder="City"
data-secondary-placeholder="+City"
data-delete-button-label="Remove City"
data-delete-hint="Press delete to remove City"
></md-chips>
</div>
<div class="search-input" data-ng-if="options.query.where.eMLSAreaMajor.length">
<md-chips
class="area-id font-secondary"
aria-label="Areas to Limit"
data-ng-model="options.query.where.eMLSAreaMajor"
data-md-enable-chip-edit="true"
data-md-add-on-blur="true"
data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]"
data-placeholder="Area"
data-secondary-placeholder="+Area"
data-delete-button-label="Remove Area"
data-delete-hint="Press delete to remove Area"
></md-chips>
</div>
<div class="search-input" data-ng-if="options.query.where.MLSAreaMajor.length">
<md-chips
class="area-id font-secondary"
aria-label="Areas to Limit"
data-ng-model="options.query.where.MLSAreaMajor"
data-md-enable-chip-edit="true"
data-md-add-on-blur="true"
data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]"
data-placeholder="Area"
data-secondary-placeholder="+Area"
data-delete-button-label="Remove Area"
data-delete-hint="Press delete to remove Area"
></md-chips>
</div>
<div class="search-input" data-ng-if="options.query.where.PostalCode.length">
<md-chips
class="postal-code font-secondary"
aria-label="Postal Code(s) to Limit"
data-ng-model="options.query.where.PostalCode"
data-md-enable-chip-edit="true"
data-md-add-on-blur="true"
data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]"
data-placeholder="Postal Code"
data-secondary-placeholder="+PostalCode"
data-delete-button-label="Remove Postal Code"
data-delete-hint="Press delete to remove Postal Code"
></md-chips>
</div>
</div>
</div>
<!-- Not needed for public search
<div data-layout="row" data-layout-align="space-around center">
<md-chips
class="agent-license font-secondary"
aria-label="Agent License(s) to Search"
data-ng-model="options.query.where.AgentLicense"
data-md-enable-chip-edit="true"
data-md-add-on-blur="true"
data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]"
data-placeholder="Agent License"
data-secondary-placeholder="+License"
data-delete-button-label="Remove License"
data-delete-hint="Press delete to remove License"
></md-chips>
</div>
-->
<div class="sale-status-border dotted-spaced-underline"></div>
<div data-layout="row" data-layout-align="space-around center">
<a class="btn" data-ng-click="search();filterMenu.close();" aria-label="Search Submission">Search</a>
</div>
</div>
</div>
</div>
<a aria-label="Open Additional Search Options"
data-ng-click="showInlinePopup($event, '.stratus-idx-property-search-menu')"
class="open-filters">
Advanced Filters
</a>
</div>
<div class="search-row" data-layout="row" data-layout-align="space-around center">
<a class="btn btn-submit" data-ng-click="search()" aria-label="Search Submission">Search Now</a>
</div>
</div>