@stratusjs/idx/src/property/admin/search.filter.component.min.html

AngularJS idx/property Service and Components bundle to be used as an add on to StratusJS

<div id="{{elementId}}" class="property-search property-search-filter-admin search-mini font-primary" data-ng-cloak><h2 data-ng-show="widgetName" data-ng-bind="widgetName"></h2><div class="search-row"><div class="stratus-idx-property-search-menu property-search-filter-admin"><h3>Location</h3><div class="location-specs" data-layout="column"><div data-layout="row" data-ng-if="options.query.where.eLocation && options.query.where.eLocation.length"><div class="search-input" data-flex><md-chips class="location font-secondary" aria-label="Location to Limit" data-ng-model="options.query.where.eLocation" 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, Neighborhood, Zip, Address" data-secondary-placeholder="+Location" data-delete-button-label="Remove Location" data-delete-hint="Press delete to remove Location"></md-chips></div></div><div data-layout="row" data-ng-if="options.query.where.Location && options.query.where.Location.length"><div class="search-input deprecated" data-flex><md-chips class="location font-secondary" aria-label="Location to Limit (deprecated)" data-ng-model="options.query.where.Location" 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, Neighborhood, Zip, Address" data-secondary-placeholder="+Location (deprecated)" data-delete-button-label="Remove Location (deprecated)" data-delete-hint="Press delete to remove Location (deprecated)"></md-chips></div></div><div data-layout="row"><div class="search-input deprecated" data-flex="50" data-ng-if="options.query.where.City && options.query.where.City.length"><md-chips class="city font-secondary" aria-label="City to Limit (deprecated)" 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 (deprecated)" data-secondary-placeholder="+City (deprecated)" data-delete-button-label="Remove City (deprecated)" data-delete-hint="Press delete to remove City (deprecated)"></md-chips></div><div class="search-input" data-flex="50"><md-chips class="city font-secondary" aria-label="City 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 deprecated" data-flex="50" data-ng-if="options.query.where.CountyOrParish && options.query.where.CountyOrParish.length"><md-chips class="county font-secondary" aria-label="Counties to Limit (deprecated)" data-ng-model="options.query.where.CountyOrParish" 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="County (deprecated)" data-secondary-placeholder="+County (deprecated)" data-delete-button-label="Remove County (deprecated)" data-delete-hint="Press delete to remove County (deprecated)"></md-chips></div><div class="search-input" data-flex="50"><md-chips class="county font-secondary" aria-label="Counties to Limit" data-ng-model="options.query.where.eCountyOrParish" 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="County" data-secondary-placeholder="+County" data-delete-button-label="Remove County" data-delete-hint="Press delete to remove County"></md-chips></div></div><div data-layout="row"><div class="search-input deprecated" data-flex="50" data-ng-if="options.query.where.MLSAreaMajor && options.query.where.MLSAreaMajor.length"><md-chips class="neighborhood font-secondary" aria-label="Areas to Limit (deprecated)" 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 (deprecated)" data-secondary-placeholder="+Area (deprecated)" data-delete-button-label="Remove Area (deprecated)" data-delete-hint="Press delete to remove Area (deprecated)"></md-chips></div><div class="search-input deprecated" data-flex="50" data-ng-if="options.query.where.Neighborhood && options.query.where.Neighborhood.length"><md-chips class="neighborhood font-secondary" aria-label="Neighborhoods to Limit" data-ng-model="options.query.where.Neighborhood" 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="Neighborhood (deprecated)" data-secondary-placeholder="+Neighborhood (deprecated)" data-delete-button-label="Remove Neighborhood (deprecated)" data-delete-hint="Press delete to remove Neighborhood (deprecated)"></md-chips></div><div class="search-input" data-flex="50"><md-chips class="neighborhood font-secondary" aria-label="Neighborhoods to Limit" data-ng-model="options.query.where.eNeighborhood" 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="Neighborhood" data-secondary-placeholder="+Neighborhood" data-delete-button-label="Remove Neighborhood" data-delete-hint="Press delete to remove Neighborhood"></md-chips></div><div class="search-input" data-flex="50"><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 data-layout="row"><div class="search-input" data-flex="50"><md-chips class="street-address font-secondary" aria-label="Street Address(es) to Limit" data-ng-model="options.query.where.eStreetAddress" 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="Street Address" data-secondary-placeholder="+Address" data-delete-button-label="Remove Address" data-delete-hint="Press delete to remove Address"></md-chips></div><div class="search-input deprecated" data-flex="50" data-ng-if="options.query.where.UnparsedAddress && options.query.where.UnparsedAddress.length"><md-chips class="full-address font-secondary" aria-label="Full Address(es) to Limit" data-ng-model="options.query.where.UnparsedAddress" 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="Full Address" data-secondary-placeholder="+Address" data-delete-button-label="Remove Address" data-delete-hint="Press delete to remove Address"></md-chips></div></div></div><h3>Specs</h3><div class="property-specs"><div 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 data-layout="row"><div class="search-input" data-flex><md-chips class="listing-id font-secondary" aria-label="Specific Listing Ids" data-ng-model="options.query.where.ListingId" 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="Listing Id" data-secondary-placeholder="+Listing Id" data-delete-button-label="Remove Listing Id" data-delete-hint="Press delete to remove Listing Id"></md-chips></div></div></div><div class="toggle-switch" data-layout="row" aria-label="Listings to Buy or Rent" data-layout-align="start center"><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"></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="left" 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="toggleArrayElement('Active', options.query.where.Status)" 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="toggleArrayElement('Closed', options.query.where.Status)" aria-label="Sold" data-md-prevent-menu-close>Sold</md-button><div data-ng-show="!options.forRent || _.includes(options.query.where.Status, 'Contract')" data-layout="row" data-layout-align="left"><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><md-checkbox data-ng-show="options.query.where.OpenHouseOnly || isPresetLocationSet() || options.query.where.eLocation.length || options.query.where.Location.length || options.query.where.AgentLicense.length || options.query.where.OfficeNumber.length" data-ng-model="options.query.where.OpenHouseOnly" aria-label="Open Houses Only" data-layout="row" data-layout-align="left">Open Houses Only</md-checkbox></div><div class="property-zoning" aria-label="Listing Zoning" data-layout="row" data-layout-align="left"><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="left" aria-label="Listing Types" data-layout-wrap data-ng-if="initialized"><md-button data-ng-repeat="listType in ::options.selection.ListingType.All" class="md-raised font-primary" data-ng-show="canDisplayListingTypeButton(listType)" 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><h3>Agent</h3><div class="agent-specs" data-layout="row" data-layout-align="left" aria-label="Agent Specs"><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="agent-specs-border dotted-spaced-underline"></div><h3>Office</h3><div class="office-specs" data-layout="row" data-layout-align="left"><md-chips class="office-groups font-secondary" aria-label="Office" data-ng-model="options.officeGroups" data-md-enable-chip-edit="true" data-placeholder="Office" data-secondary-placeholder="+Office" data-delete-button-label="Remove Office" data-delete-hint="Press delete to remove Office" data-md-transform-chip="displayOfficeGroupSelector($chip, null, $event)" data-md-on-remove="validateOfficeGroups()"><md-chip-template><span data-ng-click="displayOfficeGroupSelector(null, $index, $event)">{{$chip.name}}</span></md-chip-template></md-chips></div><div class="office-specs-border dotted-spaced-underline"></div><h3>Display Options</h3><div class="display-specs" aria-label="Display Specs"><div class="search-input" data-layout="row"><md-input-container class="md-block minimal"><label data-ng-bind="_.isArray(options.query.order) ? 'Sort: ' + options.query.order : 'Sort'">Sort</label><md-select data-ng-model="options.query.order" aria-label="Sort Options"><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 class="search-input" data-layout="row"><md-input-container class="md-block minimal"><label>Restrict Data Source</label><md-select data-ng-model="options.query.service" placeholder="Restrict Data Source" aria-label="Restricted Data Source Displayed" md-select-only-option required multiple="multiple"><md-option data-ng-repeat="mls in getMLSVariables()" data-ng-value="mls.id">{{mls.name}}</md-option></md-select></md-input-container></div></div></div></div><div class="search-row" data-layout="row" data-layout-align="space-around left" data-ng-if="listId"><button type="button" class="btn btn-submit" data-ng-click="search()">Preview Results</button></div></div>