@stratusjs/idx/src/property/search.component.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-default idx-search-component search-full"
     role="search" aria-label="Property" data-ng-cloak
>
    <h2 data-ng-show="widgetName" data-ng-bind="widgetName"></h2>
    <!-- div class="search-header">
        <h4>Search Filters</h4>
        <div class="basic-advanced">
            <a class="close-filters-link border-default border-default-right" data-ng-click="$parent.advancedFiltersStatus = false">Basic</a>
            <a class="open-filters-link" data-ng-click="$parent.advancedFiltersStatus = true">Advanced</a>
        </div>
    </div -->

    <div class="search-row search-basic clearfix">
        <div class="search-input search-location"
             data-ng-class="{'location-input-active': !isPresetLocationSet()}">

            <!-- If there are preset filters like City, MLS Area, Postal Code, which are subsets of Location, then we
            will show that we are filtering by those, and we will not show the Location field. They remain in the filter
            though so that other filters like beds/baths will still use these preset filters. Then if someone wants to
            change the location they will hit the clear button to remove those, and enter a generic Location. -->
            <!-- TODO: add a "search" icon that shows up ONLY when the location field is clickable and enterable. It should NOT show up with the preset-location text is showing up because it is confusing and makes a person feel like they should be able to click and edit. -->
            <!-- NOTE: some of these fields are arrays -->
            <md-icon class="search-icon"
                     data-ng-click="search()"
                     data-ng-if="!isPresetLocationSet()"
                     md-svg-src="{{ localDir + 'images/icons/actionButtons/search.svg' }}"
            ></md-icon>
            <!-- NOTE: the data-ng-keyup should not be setting: && options.query.where.Location (seems useless???) -->
            <!-- NOTE: data-ng-keyup will run $event.keyCode == 13 && search(). If $event.keyCode is not Enter, search() cannot be reached -->
            <md-input-container
                    class="location-input md-block minimal"
                    data-ng-if="!isPresetLocationSet()">
                <label>City, Neighborhood, Zip</label>
                <input
                        class="input-eLocation"
                        data-ng-if="!options.query.where.Location"
                        data-ng-model="options.query.where.eLocation"
                        data-ng-blur="options.query.where.eLocation.length && search()"
                        type="text"
                        size="22"
                        maxlength="250"
                        data-ng-keyup="$event.keyCode == 13 && search()"
                        autocomplete="off"
                >
                <input
                        class="input-Location"
                        data-ng-if="options.query.where.Location"
                        data-ng-model="options.query.where.Location"
                        data-ng-blur="search()"
                        type="text"
                        size="22"
                        maxlength="250"
                        data-ng-keyup="$event.keyCode == 13 && search()"
                        autocomplete="off"
                >
            </md-input-container>


            <div class="preset-location" data-ng-if="isPresetLocationSet()">
                <span class="location-list-truncated span-comma-delimited" data-ng-bind-html="presetLocationHTML"></span>
                <span class="preset-locations-count location-popup-on-hover" data-ng-show="presetLocationsRemainingCountText" data-ng-bind="presetLocationsRemainingCountText"></span>
                <span class="preset-other-filters-count" data-ng-show="!presetLocationsRemainingCountText && presetOtherFiltersCountText" data-ng-bind="presetOtherFiltersCountText"></span>
                <div class="location-popup-list">
                    <div class="span-comma-delimited" data-ng-bind-html="presetLocationHTML"></div>
                    <div class="preset-other-filters-count" data-ng-show="presetOtherFiltersCountText" data-ng-bind="presetOtherFiltersCountText"></div>
                </div>
            </div>

            <!-- TODO: We cannot currently get focus to work because we can't find the element: data-ng-click="angular.element('#filterLocation').focus()". In the future it would be nice to populate. FIX: Element doesn't not exist on load, should possibly be given as a widget option when Element is ready with relying on id. -->
            <!-- NOTE: We shouldn't supply ids unless they are given a unique number at the end as HTML does not allow duplicate ids -->
            <!-- NOTE: three of these get cleared as arrays -->
            <a
                    class="custom-clear"
                    data-ng-if="(options.query.where.eLocation.length || options.query.where.Location.length || isPresetLocationSet())"
                    data-ng-click="resetLocationQuery(); focusElement('.location-input .input-eLocation')"
            >
                <md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/clear.svg' }}"></md-icon>
            </a>
        </div>

        <div class="search-input search-buy-rent" data-ng-if="searchType == 'advanced'">
            <div class="toggle-switch" aria-label="Listings to Buy or Rent" data-layout="row" data-layout-align="center center">
                <div class="option-choice buy" data-ng-class="{inactive: options.forRent}" data-flex>
                    Buy
                </div>

                <md-switch
                        data-ng-model="options.forRent"
                        data-ng-change="selectDefaultListingType(); search()"
                        aria-label="Buy or Rent"
                >
                </md-switch>
                <div class="option-choice rent" data-ng-class="{inactive: !options.forRent}" data-flex>
                    Rent
                </div>
            </div>
        </div>

        <div class="search-input search-price" data-ng-if="searchType != 'simple'">
            <a class="open-price-link"
               data-ng-click="openPrice=!openPrice">
                <span data-ng-show="options.query.where.ListPriceMin == null && options.query.where.ListPriceMax == null">Any Price</span>
                <span data-ng-show="options.query.where.ListPriceMin != null || options.query.where.ListPriceMax != null">
                    <span data-ng-show="options.query.where.ListPriceMin != null"><span data-ng-bind="options.query.where.ListPriceMin | numeral:{format:'$0[.]0a'} | uppercase"></span></span>
                    <span data-ng-show="options.query.where.ListPriceMin == null">No Min</span>
                    &nbsp;&ndash;&nbsp;
                    <span data-ng-show="options.query.where.ListPriceMax != null"><span data-ng-bind="options.query.where.ListPriceMax | numeral:{format:'$0[.]0a'} | uppercase"></span></span>


                    <span data-ng-show="options.query.where.ListPriceMax == null">No Max</span>
                </span>
                <md-icon md-svg-src="{{ localDir + 'images/dropDownFat.svg' }}"></md-icon>
            </a>

            <div class="price-dropdown" data-ng-class="{'open-price' : openPrice == true}">
                <!-- TODO: replace dollar sign with dynamic currency sign -->
                <span>$</span>
                <md-input-container class="md-block minimal">
                    <label>Min Price</label>
                    <input
                            type="text" maxlength="13" size="13" autocomplete="off"
                            stratus-string-to-number="comma"
                            data-ng-model="options.query.where.ListPriceMin"
                            data-ng-blur="!options.query.where.ListPriceMin ? options.query.where.ListPriceMin = null : true ; search()"
                            data-ng-keyup="$event.keyCode == 13 && $event.target.blur()"
                    >
                </md-input-container>
                <span>$</span>
                <md-input-container class="md-block minimal">
                    <label>Max Price</label>
                    <input
                            type="text" maxlength="13" size="13" autocomplete="off"
                            stratus-string-to-number="comma"
                            data-ng-model="options.query.where.ListPriceMax"
                            data-ng-blur="!options.query.where.ListPriceMax ? options.query.where.ListPriceMax = null : true ; search()"
                            data-ng-keyup="$event.keyCode == 13 && $event.target.blur()"
                    >
                </md-input-container>
            </div>
            <div class="click-out" data-ng-show="openPrice == true" data-ng-click="openPrice = false"></div>
        </div>
        <div class="search-input search-beds" data-ng-if="searchType != 'simple'">
            <md-input-container class="md-block minimal">
                <label>0+ Beds</label>
                <md-select data-ng-model="options.query.where.Bedrooms" data-ng-change="search()">
                    <md-option>0+ Beds</md-option>
                    <md-option data-ng-repeat="option in options.selection.Bedrooms" data-ng-value="option.value">
                        {{option.name}} Beds
                    </md-option>
                </md-select>
            </md-input-container>
        </div>
        <div class="search-input search-baths" data-ng-if="searchType != 'simple'">
            <md-input-container class="md-block minimal">
                <label>0+ Baths</label>
                <md-select data-ng-model="options.query.where.Bathrooms" data-ng-change="search()">
                    <md-option>0+ Baths</md-option>
                    <md-option data-ng-repeat="option in options.selection.Bathrooms" data-ng-value="option.value">
                        {{option.name}} Baths
                    </md-option>
                </md-select>
            </md-input-container>
        </div>
        <div class="search-more-filters" data-ng-if="listInitialized && searchType == 'advanced'">
            <a class="open-filters-link"
               data-ng-click="$parent.advancedFiltersStatus = !$parent.advancedFiltersStatus">
                <md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/filters.svg' }}"></md-icon>
                <span class="btn-text"><span data-ng-show="!$parent.advancedFiltersStatus">More </span><span data-ng-show="$parent.advancedFiltersStatus">Less </span><span class="optional-btn-text">Filters</span></span>
            </a>
        </div>

        <div class="search-more-filters" data-ng-if="listInitialized && searchType != 'advanced' && advancedSearchUrl">
            <!-- Only display the href if there is a list -->
            <a class="open-filters-link"
               data-ng-href="{{ advancedSearchUrl }}">
                <md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/filters.svg' }}"></md-icon>
                <span class="btn-text"><span data-ng-bind="advancedSearchLinkName"></span></span>
            </a>
        </div>

        <div class="search-more-filters" data-ng-if="!listInitialized">
            <!-- If there isn't a list, run the search() function to send to a pre-filled search page -->
            <a class="open-filters-link" data-ng-click="search(true)">
                <md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/filters.svg' }}"></md-icon>
                <span class="btn-text"><span data-ng-bind="advancedSearchLinkName"></span></span>
            </a>
        </div>

        <!-- NO LONGER NEEDED because data-ng-change gives instant results -->
        <!--<div class="submit-row">-->
            <!--<a class="btn btn-submit" data-ng-click="search()">Search</a>-->
        <!--</div>-->

    </div>

    <!-- More Filters -->
    <div id="stratus-idx-property-search-menu"
         class="property-search property-search-default"
         data-ng-class="{'open-filters' : $parent.advancedFiltersStatus}"
         data-ng-if="searchType == 'advanced'"
    >
        <div class="more-filters" data-stratus-full-height="{{ displayFilterFullHeight }}" data-full-height-minus-elements='[".demo-switcher-bar", ".header-common-parent", ".search-filter-top", ".sf-toolbarreset"]'>

            <!-- Close Button -->
            <button type="button" class="btn-close" data-ng-click="$parent.advancedFiltersStatus = !$parent.advancedFiltersStatus">
                <span class="sr-only">Close Dialog</span>
                <md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/close.svg' }}" aria-hidden="true"></md-icon>
            </button>


            <!-- Buy or Rent -->
            <div class="toggle-switch buy-rent" aria-label="Listings to Buy or Rent">
                <div class="option-choice buy" data-ng-class="{inactive: options.forRent}">
                    Buy
                </div>

                <md-switch
                        data-ng-model="options.forRent"
                        data-ng-change="selectDefaultListingType()"
                        aria-label="Buy or Rent"
                >
                </md-switch>
                <div class="option-choice rent" data-ng-class="{inactive: !options.forRent}">
                    Rent
                </div>
            </div>

            <!-- Price -->
            <div class="price">
                <!-- TODO: replace dollar sign with dynamic currency sign -->
                <span>$</span>
                <md-input-container class="md-block minimal">
                    <label>Min Price</label>
                    <input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMin" data-ng-blur="search()" type="text" maxlength="12" size="12" autocomplete="off">
                </md-input-container>
                <span>$</span>
                <md-input-container class="md-block minimal">
                    <label>Max Price</label>
                    <input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMax" data-ng-blur="search()" type="text" maxlength="12" size="12" autocomplete="off">
                </md-input-container>
            </div>


            <div class="beds-baths">
                <md-input-container class="md-block minimal">
                    <label>0+ Beds</label>
                    <md-select data-ng-model="options.query.where.Bedrooms" data-ng-change="search()">
                        <md-option>0+ Beds</md-option>
                        <md-option data-ng-repeat="option in options.selection.Bedrooms" data-ng-value="option.value">
                            {{option.name}} Beds
                        </md-option>
                    </md-select>
                </md-input-container>
                <md-input-container class="md-block minimal">
                    <label>0+ Baths</label>
                    <md-select data-ng-model="options.query.where.Bathrooms" data-ng-change="search()">
                        <md-option>0+ Baths</md-option>
                        <md-option data-ng-repeat="option in options.selection.Bathrooms" data-ng-value="option.value">
                            {{option.name}} Baths
                        </md-option>
                    </md-select>
                </md-input-container>
            </div>

            <!-- Zoning -->
            <div class="property-zoning" aria-label="Listing Zoning">
                <div class="custom-toggle"
                     data-ng-class="[{'active-left': options.selection.ListingType.group.Residential},
                     {'active-right': options.selection.ListingType.group.Commercial}]">
                    <md-button
                            class="font-primary"
                            data-ng-class="{'active': 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="{'active': options.selection.ListingType.group.Commercial}"
                            data-ng-click="selectDefaultListingType('Commercial')"
                            aria-label="Commercial"
                            data-md-prevent-menu-close
                    >
                        Commercial
                    </md-button>
                </div>
            </div>

            <!-- Listing Types -->
            <div class="listing-types" aria-label="Listing Types">
                <md-checkbox
                    data-ng-repeat="listType in ::options.selection.ListingType.All"
                    data-ng-click="toggleArrayElement(listType.value, options.query.where.ListingType); search()"
                    data-ng-show="options.forRent === listType.lease && options.selection.ListingType.group[listType.group]"
                    data-ng-checked="_.includes(options.query.where.ListingType, listType.value)"
                    data-md-prevent-menu-close
                    aria-label="{{::listType.name}}">
                    <span data-ng-bind="::listType.name"></span>
                </md-checkbox>
            </div>


            <!-- Listing Status -->
            <div class="listing-status" aria-label="Listing Status">
                <h4>Status</h4>

                <md-checkbox
                        data-ng-checked="_.includes(options.query.where.Status, 'Active')"
                        data-ng-click="toggleArrayElement('Active', options.query.where.Status); search()"
                        data-md-prevent-menu-close
                        aria-label="For Sale">
                        For Sale
                </md-checkbox>
                <md-checkbox
                        data-ng-checked="_.includes(options.query.where.Status, 'Closed')"
                        data-ng-click="toggleArrayElement('Closed', options.query.where.Status); search()"
                        data-md-prevent-menu-close
                        aria-label="Sold">
                        Sold
                </md-checkbox>
                <md-checkbox
                        class="show-under-contract"
                        data-ng-show="!options.forRent && (_.includes(options.query.where.Status, 'Active') || _.includes(options.query.where.Status, 'Contract'))"
                        data-ng-checked="_.includes(options.query.where.Status, 'Contract')"
                        data-ng-click="toggleArrayElement('Contract', options.query.where.Status); search()"
                        aria-label="Under Contract"
                        data-md-prevent-menu-close
                >
                    Under Contract
                </md-checkbox>
            </div>

            <div
                    class="extras"
                    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"
            >
                <h4>Extras</h4>
                <!-- '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"
                        data-ng-change="search()"
                        aria-label="Open Houses Only"
                        data-md-prevent-menu-close
                >
                    Open Houses Only
                </md-checkbox>

            </div>

            <div data-ng-if="options.officeGroups.length || options.query.where.AgentLicense.length || options.query.where.ListingId.length">
                <h4>Preset Filters</h4>
                <div class="search-input" data-ng-if="options.officeGroups.length">
                    <!--h5>Office</h5-->
                    <md-chips
                            class="office-groups font-secondary"
                            aria-label="Office"
                            data-ng-model="options.officeGroups"
                            data-md-enable-chip-edit="false"
                            readonly="true"
                            data-md-removable="true"
                            data-delete-button-label="Remove Office"
                            data-delete-hint="Press delete to remove Office"
                            data-md-on-remove="validateOfficeGroups(true)"
                    >
                        <md-chip-template>
                            <!-- add to enable editing: data-ng-click="displayOfficeGroupSelector(null, $index, $event)" -->
                            <span>{{$chip.name}}</span>
                        </md-chip-template>
                    </md-chips>
                </div>
                <div class="search-input" data-ng-if="options.query.where.AgentLicense.length">
                    <h5>Agent License</h5>
                    <md-chips
                            class="agent-license-groups font-secondary"
                            aria-label="Agent Licenses"
                            data-ng-model="options.query.where.AgentLicense"
                            data-md-enable-chip-edit="false"
                            data-md-removable="true"
                            data-delete-button-label="Remove License"
                            data-delete-hint="Press delete to remove License"
                            data-md-on-add="search()"
                            data-md-on-remove="search()"
                    >
                        <md-chip-template>
                            <span>{{$chip}}</span>
                        </md-chip-template>
                    </md-chips>
                </div>
                <div class="search-input" data-ng-if="options.query.where.ListingId.length">
                    <h5>Listing Id</h5>
                    <md-chips
                            class="listing-id-groups font-secondary"
                            aria-label="Listing Ids"
                            data-ng-model="options.query.where.ListingId"
                            data-md-enable-chip-edit="false"
                            data-md-removable="true"
                            data-delete-button-label="Remove ListingId"
                            data-delete-hint="Press delete to remove ListingId"
                            data-md-on-add="search()"
                            data-md-on-remove="search()"
                    >
                        <md-chip-template>
                            <span>{{$chip}}</span>
                        </md-chip-template>
                    </md-chips>
                </div>
            </div>

            <!-- Preset Filters: these are currently subsets of Location and they swap out so aren't needed right now -->
            <!--
            <div data-ng-if="options.query.where.City.length || options.query.where.CountyOrParish.length || options.query.where.MLSAreaMajor.length || options.query.where.PostalCode.length">
                <h4>Preset Filters</h4>
                <div class="specific-filters" aria-label="Specific Areas">
                    <div class="search-input" data-ng-if="options.query.where.City.length">
                        <md-input-container class="md-block minimal">
                            <label>City</label>
                            <input data-ng-model="options.query.where.City"
                                   type="text"
                                   maxlength="250"
                                   autocomplete="off">
                        </md-input-container>
                    </div>
                    <div class="search-input" data-ng-if="options.query.where.CountyOrParish.length">
                        <md-chips
                                class="area-id font-secondary"
                                aria-label="Counties to Limit"
                                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"
                                data-secondary-placeholder="+County"
                                data-delete-button-label="Remove County"
                                data-delete-hint="Press delete to remove County"
                        ></md-chips>
                    </div>
                    <div class="search-input" data-ng-if="options.query.where.MLSAreaMajor.length">
                        <md-chips
                                class="area-id font-secondary"
                                aria-label="Neighborhoods 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="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-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>
            -->

        </div>
        <div class="click-out" data-ng-show="$parent.advancedFiltersStatus" data-ng-click="$parent.advancedFiltersStatus = false"></div>
    </div>
</div>