search-module.html

<div id="test-panel" class="col-md-3">

    <!-- facet selection controller -->
    <ul class="facet-panel"
        data-source="{{appleseedsSearchSolrProxy}}"
        ng-controller="FacetSelectionController"
        ng-show="items.length>0"
        ng-cloak>
        <li class="facet-heading"><p>Filtering By</p></li>
        <li>
            <ul class="items unstyled">
                <li class="facet" ng-repeat="item in items">
                    <i class="icon-tag"></i>
                    <a ng-click="remove($index)">
                        <span class="value">{{item | prettyFacetLabel | swapFacetLabels}}</span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
    <!-- /facet selection controller -->

    <!-- type facet controller -->
    <ul id="type-panel" class="facet-panel"
        ng-controller="FieldFacetController"
        ng-hide="selected"
        data-exclusive="true"
        data-field="type"
        data-source="{{appleseedsSearchSolrProxy}}"
        ng-cloak>
        <li class="facet-heading"><p>Type</p></li>
        <li>
            <ul class="facets unstyled">
                <li ng-repeat="item in items" ng-show="items">
                    <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value}}</a></span>
                    <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                </li>
            </ul>
        </li>
    </ul>
    <!-- /type facet controller -->

    <!-- source facet controller -->
    <ul id="source-panel" class="facet-panel"
        ng-controller="FieldFacetController"
        ng-hide="selected"
        data-exclusive="false"
        data-field="source"
        data-source="{{appleseedsSearchSolrProxy}}"
        ng-cloak>
        <li class="facet-heading"><p>Source</p></li>
        <li>
            <ul class="facets unstyled">
                <li ng-repeat="item in items | limitTo:7" ng-show="items">
                    <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value}}</a></span>
                    <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                </li>
            </ul>
        </li>
    </ul>
    <!-- source facet controller -->

    <!-- keywords facet controller -->
    <ul id="keywords-panel" class="facet-panel"
        ng-controller="FieldFacetController"
        ng-hide="selected"
        data-exclusive="false"
        data-field="smartKeywords"
        data-source="{{appleseedsSearchSolrProxy}}"
        ng-cloak>
        <li class="facet-heading"><p>Keywords</p></li>
        <li>
            <ul class="facets unstyled">
                <li ng-repeat="item in items | limitTo:7" ng-show="items">
                    <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value | cleanFacetLabel }}</a></span>
                    <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                </li>
            </ul>
        </li>
    </ul>
    <!-- /keywords facet controller -->
                    
    <!-- published date facet controller -->
    <!--<ul id="published-panel" class="facet-panel"
        ng-controller="DateFacetController"
        ng-hide="selected && exclusive"
        data-exclusive="false"
        data-field="createdDate"
        data-source="{{appleseedsSearchSolrProxy}}"
        ng-cloak>
        <li class="facet-heading"><p>Published</p></li>
        <li>
            <ul class="facets unstyled">
                <li ng-repeat="item in items" ng-show="items">
                    <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value | cleanFacetLabel  }}</a></span>
                    <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                </li>
            </ul>
        </li>
    </ul>-->
    <!-- /published date facet controller -->

    <!-- date range facet controller -->
    <ul id="date-range-panel"
        class="facet-panel"
        ng-controller="DateFacetController"
        data-start-date-field="createdDate"
        data-end-date-field="createdDate"
        data-source="{{appleseedsSearchSolrProxy}}"
        ng-cloak>
        <li class="facet-heading"><p>Dates</p></li>
        <li>
            <div id="date-histogram"
                 ng-controller="DateFacetHistogramController">

            </div>

            <form class="form-horizontal" ng-submit="submit()" style="margin-bottom:0px;">
                <div id="date-range-histogram"></div>
                <div class="input-prepend">
                    <span class="add-on">From</span>
                    <input id="fromDate" name="startDate" class="year-input" type="text" ng-model="startDate" size="4" />
                </div>
                <div class="input-prepend pull-right">
                    <span class="add-on">To</span>
                    <input id="toDate" name="endDate" class="year-input" type="text" ng-model="endDate" size="4" />
                </div>
                <button style="position: absolute; left: -9999px; width: 1px; height: 1px;">Update</button>
            </form>
        </li>
    </ul>
    <!-- /date range facet controller -->

    <!-- search history panel -->
    <ul id="search-history-panel"
        class="facet-panel" ng-controller="SearchHistoryController" ng-cloak>
        <li class="facet-heading"><p>Search History</p></li>
        <li>
            <ul class="unstyled">
                <li ng-repeat="q in historyQueries">
                    <a ng-href="{{q.query}}" ng-click="add($event,q)">{{q.query}}</a>
                </li>
            </ul>
        </li>
    </ul>
    <!-- /search history panel -->
    
</div>
<!-- /test panel -->

<section id="search-bar">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="search-box col-md-5">

                <form ng-controller="SearchBoxController"
                      ng-submit="handleSubmit()"
                      data-near-match="true"
                      data-search-hints-field="name"
                      data-source="{{appleseedsSearchSolrProxy}}">
                    <input name="q" type="text" placeholder="Keyword or placename" ng-model="userquery" searchbox />
                    <input class="search-input" name="submit" type="submit" value="Search" ng-click="handleSubmit()" searchbutton />
                </form>

            </div>
        </div>
    </div>
</section>

<section id="content">
    <div class="container-fluid">
        <div class="row-fluid">

            <!-- search panel -->
            <div id="search-panel" class="col-md-3">

                <!-- facet selection controller -->
                <ul class="facet-panel"
                    data-source="{{appleseedsSearchSolrProxy}}"
                    ng-controller="FacetSelectionController"
                    ng-show="items.length>0"
                    ng-cloak>
                    <li class="facet-heading"><p>Filtering By</p></li>
                    <li>
                        <ul class="items unstyled">
                            <li class="facet" ng-repeat="item in items">
                                <i class="icon-tag"></i>
                                <a ng-click="remove($index)">
                                    <span class="value">{{item | prettyFacetLabel | swapFacetLabels | cleanDateRange}}</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- /facet selection controller -->

                <!-- type facet controller -->
                <ul id="type-panel" class="facet-panel"
                    ng-controller="FieldFacetController"
                    ng-hide="selected"
                    data-exclusive="true"
                    data-field="type"
                    data-source="{{appleseedsSearchSolrProxy}}"
                    ng-cloak>
                    <li class="facet-heading"><p>Type</p></li>
                    <li>
                        <ul class="facets unstyled">
                            <li ng-repeat="item in items" ng-show="items">
                                <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value}}</a></span>
                                <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- /type facet controller -->

                <!-- source facet controller -->
                <ul id="source-panel" class="facet-panel"
                    ng-controller="FieldFacetController"
                    ng-hide="selected"
                    data-exclusive="false"
                    data-field="source"
                    data-source="{{appleseedsSearchSolrProxy}}"
                    ng-cloak>
                    <li class="facet-heading"><p>Source</p></li>
                    <li>
                        <ul class="facets unstyled">
                            <li ng-repeat="item in items" ng-show="items">
                                <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value}}</a></span>
                                <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- source facet controller -->

                <!-- keywords facet controller -->
                <ul id="keywords-panel" class="facet-panel"
                    ng-controller="FieldFacetController"
                    ng-hide="selected"
                    data-exclusive="false"
                    data-field="smartKeywords"
                    data-source="{{appleseedsSearchSolrProxy}}"
                    ng-cloak>
                    <li class="facet-heading"><p>Keywords</p></li>
                    <li>
                        <ul class="facets unstyled">
                            <li ng-repeat="item in items" ng-show="items">
                                <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value | cleanFacetLabel }}</a></span>
                                <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- /keywords facet controller -->

                <!-- published date facet controller -->
                <!--<ul id="published-panel" class="facet-panel"
                    ng-controller="DateFacetController"
                    ng-hide="selected && exclusive"
                    data-exclusive="false"
                    data-field="createdDate"
                    data-source="{{appleseedsSearchSolrProxy}}"
                    ng-cloak>
                    <li class="facet-heading"><p>Published</p></li>
                    <li>
                        <ul class="facets unstyled">
                            <li ng-repeat="item in items" ng-show="items">
                                <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value | cleanFacetLabel  }}</a></span>
                                <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                            </li>
                        </ul>
                    </li>
                </ul>-->
                <!-- /published date facet controller -->

                <!-- published date range facet controller -->
                <ul id="published-range-panel" class="facet-panel"
                    ng-controller="DateRangeFacetController"
                    ng-hide="selected && exclusive"
                    data-exclusive="true"
                    data-field="createdDate"
                    data-source="{{appleseedsSearchSolrProxy}}"
                    ng-cloak>
                    <li class="facet-heading"><p>Published (Range)</p></li>
                    <li>
                        <ul class="facets unstyled">
                            <li ng-repeat="item in items" ng-show="items">
                                <span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value | cleanFacetLabel  }}</a></span>
                                <span class="facet-score" ng-show="item.score">({{item.score}})</span>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- /published date range facet controller -->

                <!-- date range facet controller -->
                <ul id="date-range-panel"
                    class="facet-panel"
                    ng-controller="DatePickerFacetController"
                    data-start-date-field="createdDate"
                    data-end-date-field="createdDate"
                    data-source="{{appleseedsSearchSolrProxy}}"
                    ng-cloak>
                    <li class="facet-heading"><p>Dates</p></li>
                    <li>

                        <form class="form-horizontal" ng-submit="submit()">
                            <div id="date-range-histogram"></div>

                            <div class="date-input-row">
                                <span class="add-on input-prepend-label">From</span>
                                <div class="input-prepend">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                    <input type="text" id="sDate" name="startDate" class="input-sm form-control"  ng-model="startDate"placeholder="Enter Date"  />
                                </div>
                            </div>
                            <div class="date-input-row">
                                <span class="add-on input-prepend-label">To</span>
                                <div class="input-prepend">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                    <input type="text" id="eDate" name="endDate" class="input-sm form-control"  ng-model="endDate" placeholder="Enter Date"  />
                                </div>

                                <label id="dateValidation" style="color:red"></label>
                            </div>

                            <button style="width: 94%">Update</button>

                        </form>

                    </li>
                </ul>
                <!-- /date range facet controller -->

                <!-- search history panel -->
                <ul id="search-history-panel"
                    class="facet-panel" ng-controller="SearchHistoryController" ng-cloak>
                    <li class="facet-heading"><p>Search History</p></li>
                    <li>
                        <ul class="unstyled" >
                            <li ng-repeat="q in historyQueries">
                                <a ng-href="{{q.query}}" ng-click="add($event,q)">{{q.query}}</a>
                                <!--<span class="facet-name"><a href="#" ng-click="add($event,$index)">{{item.value}}</a></span>-->
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- /search history panel -->

            </div>
            <!-- /search panel -->

            <!-- search results -->
            <div id="search-results"  class="col-md-8">
                <!-- Featured Section -->
                <div class="featured-section row document"
                     ng-controller="DocumentSearchFeaturedResultController"
                     data-field="featured"
                     data-source="{{appleseedsSearchSolrProxy}}"
                     ng-cloak>

                    <div ng-repeat="doc in documents| filter: {'source':'featured'}|limitTo:2" class="featured col-md-6">
                        <div class="col-xs-5 alpha" ng-show="doc.dobj_proxy_small">
                            <a ng-href="{{doc.path[0]}}" class="thumbnail">
                                <img ng-src="{{doc.dobj_proxy_small}}" alt="{{doc.name}}" />
                            </a>
                        </div>
                        <div class="content-wrapper no-padding">
                            <div class="resource-header" ng-show="doc.type">
                                <!--<div ng-switch="doc.source[0]">
                                    <div ng-switch-when="Featured" class="region">Featured</div>
                                    <div ng-switch-default ></div>
                                </div>-->
                                <a ng-href="{{doc.path[0]}}" class="title" ng-show="doc.name[0]" target="_blank">{{doc.name[0]}}</a>
                                <a ng-href="{{doc.path[0]}}" class="title" ng-bind-html='doc.content[0]| truncate:75' ng-hide="doc.name[0]" target="_blank"></a>
                            </div>

                            <div class="resource-content">
                                <span class="text" ng-repeat="contentitem in doc.highlights.content" ng-show="doc.highlights.content">
                                    <span class="item" ng-bind-html='contentitem'></span>
                                    <span ng-show="doc.highlights.content">...</span>
                                </span>
                                <span class="text" ng-repeat="contentitem in doc.content" >
                                    {{contentitem | truncate:500}}
                                </span>
                            </div>

                            <div class="meta inline">
                                <span class="region doc-type" ng-show="doc.type && doc.type[0]!=='Page'">{{doc.type[0]}}</span>
                                <span class="region doc-source" ng-show="doc.source">{{doc.source[0]}}</span>
                                <div class="existdates">
                                    <span class="edate date1">Created: {{doc.createdDate[0] | date:'MM/dd/yyyy'}}</span>
                                    <span ng-show="doc.toDate">&ndash;</span>
                                    <span class="edate date2">{{doc.toDate[0] | date:'MM/dd/yyyy'}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Featured Section -->
                <!-- Main Results Section -->
                <div class="main-results"
                     ng-controller="DocumentSearchResultsController"
                     data-fields="*"
                     data-source="{{appleseedsSearchSolrProxy}}"
                     ng-cloak>

                    <div class="loading" ng-show="loading" ng-cloak>
                        <p>Loading search results ...</p>
                        <img src="/Portals/_Appleseed/Search.Web.User.Ng/app/img/ajax-loader-bar.gif" alt="Search Loader Bar" />
                    </div>


                    <div class="summary" ng-show="documents.length > 0" ng-controller="SearchHistoryController" ng-cloak>
                        <div class="results-bar">
                            <span>Search Results </span>
                            <span class="bold" ng-repeat="page in pagesOnly" ng-show="page.isCurrent">{{(page.name * 10)-9}}</span>
                            <span class="bold">-</span>
                            <span class="bold" ng-repeat="page in pagesOnly" ng-show="page.isCurrent"> {{(page.name *10)<(totalResults)?(page.name * 10):(totalResults)}} </span>
                            <span>of </span>
                            <span class="bold">{{totalResults}} </span>
                            <span>found for </span>
                            <span class="bold latest-query" ng-repeat="query in historyQueries" ng-show="$first">{{query.query}}</span>
                        </div>
                        <div class="alert alert-error" ng-show="error">{{error}}</div>
                        <div class="alert alert-info" ng-show="message">{{message}}</div>
                    </div>

                    <div class="no-results-message" ng-show="userquery && !loading && documents.length == 0" ng-cloak>
                        <h4>No results were found.</h4>
                    </div>

                    <div class="pagination" ng-hide="error" ng-cloak>
                        <ul ng-show="totalResults > 10">
                            <li ng-repeat="page in pages">
                                <a ng-class="{iscurrent:page.isCurrent}" ng-click="$parent.handleSetPage(page.number)">{{page.name}}</a>
                            </li>
                        </ul>
                    </div>

                    <article ng-repeat="doc in documents" class="document" ng-cloak>
                        <div ng-show="doc.type" class="meta inline">
                            <!--<div ng-switch="doc.source[0]">
                                <div ng-switch-when="Featured" class="region">Featured</div>
                                <div ng-switch-default ></div>
                            </div>-->
                            <a ng-href="{{doc.path[0]}}" class="title"  ng-show="doc.name[0]" target="_blank">{{doc.name[0]}}</a>
                            <a ng-href="{{doc.path[0]}}" class="title" ng-bind-html='doc.content[0]| truncate:75' ng-hide="doc.name[0]" target="_blank"></a>
                        </div>

                        <div class="thumb" ng-show="doc.dobj_proxy_small" style="margin-left:10px;">
                            <a ng-href="{{doc.name}}" class="thumbnail">
                                <img ng-src="{{doc.dobj_proxy_small}}" alt="{{doc.name}}" height="64px" width="64px" />
                            </a>
                        </div>

                        <div class="resource-content">
                            <span class="text" ng-repeat="contentitem in doc.highlights.content" ng-show="doc.highlights.content">
                                <span class="item" ng-bind-html='contentitem'></span>
                                <span>...</span>
                            </span>
                            <span class="text" ng-repeat="contentitem in doc.content" >
                                {{contentitem | truncate:250}}
                            </span>
                        </div>

                        <div class="meta inline">
                            <span class="region doc-type" ng-show="doc.type && doc.type[0]!=='Page'">{{doc.type[0]}}</span>
                            <span class="region doc-source" ng-show="doc.source">{{doc.source[0]}}</span>
                            <div class="existdates">
                                <span class="edate date1">Created: {{doc.createdDate[0] | date:'MM/dd/yyyy'}}</span>
                                <span ng-show="doc.toDate">&ndash;</span>
                                <span class="edate date2">{{doc.toDate[0] | date:'MM/dd/yyyy'}}</span>
                            </div>
                            <div class="more-like-this">
                                <div class="region mlt doc-source" ng-show="doc.moreLikeThis.docs" ng-click="isExpand = !isExpand">More Like This</div>
                                <div class="text" ng-repeat="item in doc.moreLikeThis.docs" ng-show="isExpand">
                                    <span><a ng-href="{{item.path[0]}}" class="thumbnail" target="_blank" ng-show="item.name[0]">{{item.name[0]}}</a></span>
                                    <span><a ng-href="{{item.path[0]}}" class="thumbnail" target="_blank" ng-hide="item.name[0]">{{item.content[0] | truncate: 100}}</a></span>
                                </div>
                            </div>
                        </div>
                    </article>

                    <div class="pagination" ng-hide="error" ng-cloak>
                        <ul ng-show="totalResults > 10">
                            <li ng-repeat="page in pages">
                                <a ng-class="{iscurrent:page.isCurrent}" ng-click="$parent.handleSetPage(page.number)">{{page.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <!-- display results on map -->
                    <!--<div class="locations-links">
                        <a href="locations.html"><img src="img/map-results-32.png" class="thumbnail"></a>
                        <span class="locations-text-link">
                            <a href="locations.html">Show search results on map</a>
                        </span>
                    </div>-->
                    <!-- /display results on map -->
                </div>
                <!-- /Main Results Section -->
            </div>
            <!-- /search results panel -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</section>