@stratusjs/idx/src/property/admin/search.filter.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-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" data-flex="50">
                        <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 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>

            <!-- FIXME alignment problems due to sitetheory css: https://app.asana.com/0/1154407311832843/1155341970037633 -->
            <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>

            <!-- Office look up widget replaces office id-->
            <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>

            <!--div class="office-specs"
                 data-layout="row"
                 data-layout-align="left"
            >
                <md-chips
                        class="office-number font-secondary"
                        aria-label="Office Number(s) to Search"
                        data-ng-model="options.query.where.OfficeNumber"
                        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="Office Number"
                        data-secondary-placeholder="+Number"
                        data-delete-button-label="Remove Number"
                        data-delete-hint="Press delete to remove Number"
                ></md-chips>
            </div>
            <div class="office-specs-border dotted-spaced-underline"></div>

            <div class="office-specs"
                 data-layout="row"
                 data-layout-align="left"
            >
                <md-chips
                        class="office-name font-secondary"
                        aria-label="Office Names(s) to Search"
                        data-ng-model="options.query.where.OfficeName"
                        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="Office Name"
                        data-secondary-placeholder="+Office"
                        data-delete-button-label="Remove Office"
                        data-delete-hint="Press delete to remove Office"
                ></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">
                        <!--md-select can't auto select an array...so this is a bandaid to so the value in the label -->
                        <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>
                        <!-- Multiple fields are enabled even though there is a known paging bug, because there are use cases where someone wants to show past solds that include their own exclusives and total pages can be increased -->
                        <md-select
                                data-ng-model="options.query.service"
                                placeholder="Restrict Data Source"
                                aria-label="Restricted Data Source Displayed"
                                md-select-only-option
                                required
                                multiple
                        >
                            <md-option data-ng-repeat="mls in getMLSVariables()" data-ng-value="mls.id">
                                {{mls.name}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                    <!--<div class="disclaimer" data-ng-if="options.query.service.length > 1">NOTE: Our component can display multiple data sources in the same feed, but we do not fully support this yet because there is a complex logic problem with mixing the data across multiple pages (sometimes the same property appears twice). However there are cases where you may want to show all your own "Exclusive" previously sold properties along side your MLS sold properties, so since this is a limited number of properties, it could be displayed all on one page (go to the advanced tab and increase items per page to the maximum to avoid paging).</div>-->
                </div>
            </div>

        </div>

    </div>

    <!-- Preview Results will not appear if a list isn't defined -->
    <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>