[Search] Updating searchbar

Updating the searchbar to be again more
similar to the search view. It now has
a 'load more' button, but it is not
clickable for some reason. In progress.
This commit is contained in:
shale 2015-07-21 16:21:23 -07:00
parent 739fa423c5
commit b5f8e6d90c
4 changed files with 76 additions and 11 deletions

View File

@ -28,11 +28,11 @@
> >
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<!-- div> <div>
<mct-include key="'searchbar'" <mct-include key="'searchbar'"
mct-object="domainObject"> mct-object="domainObject">
</mct-include> </mct-include>
</div --> </div>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
<mct-representation key="'tree'" <mct-representation key="'tree'"
mct-object="domainObject" mct-object="domainObject"

View File

@ -20,7 +20,7 @@
{ {
"key": "SearchbarController", "key": "SearchbarController",
"implementation": "controllers/SearchbarController.js", "implementation": "controllers/SearchbarController.js",
"depends": [ "$scope", "searchService" ] "depends": [ "$scope", "$timeout", "searchService" ]
} }
], ],
"templates": [ "templates": [

View File

@ -36,4 +36,11 @@
mct-object="result.object"> mct-object="result.object">
</mct-representation> </mct-representation>
</div> </div>
<!-- Load more? -->
<div ng-if="controller.areMore()">
<button ng-click="controller.loadMore()">
Load more
</button>
</div>
</span> </span>

View File

@ -27,23 +27,81 @@
define(function () { define(function () {
"use strict"; "use strict";
function SearchbarController($scope, searchService) { var INITIAL_LOAD_NUMBER = 20,
LOAD_INCREMENT = 5;
function SearchbarController($scope, $timeout, searchService) {
// Starting amount of results to load. Will get increased.
var numResults = INITIAL_LOAD_NUMBER;
function update(timestamp) {
// Get the results
$scope.results = searchService.getLatestResults(0, numResults);
// Check to make sure that these results are the latest ones
function waitForLatest() {
var timestamps = searchService.getLatestTimestamps(),
areOld = timestamps.some(function(c) {return c < timestamp;});
// If any of the timestamps are older than the one we made the query with
if (areOld) {
// Then wait and try to update again
searchService.updateResults();
$timeout(waitForLatest, 100);
} else {
// We got the latest results now
$scope.results = searchService.getLatestResults(0, numResults);
}
}
waitForLatest();
}
function search(inputID) {
var date = new Date(),
timestamp = date.getTime();
// Reset 'load more'
numResults = INITIAL_LOAD_NUMBER;
// Send the query
searchService.sendQuery(inputID, timestamp);
update(timestamp);
}
return { return {
// Search the database using the user input of id "searchinput" /**
search: function (inputID) { * Search the filetree.
searchService.query(inputID).then(function (c) { *
$scope.results = c; * @param inputID The name of the ID property of the html text
}); * input where this funcion should find the search term.
}, */
search: search,
// Check to see if there are any search results to display. /**
* Checks to see if there are any search results to display.
*/
areResults: function () { areResults: function () {
if ($scope.results) { if ($scope.results) {
return $scope.results.length > 0; return $scope.results.length > 0;
} else { } else {
return false; return false;
} }
},
/**
* Checks to see if there are more search results to display.
*/
areMore: function () {
return numResults < searchService.getNumResults();
},
/**
* Increases the number of search results to display, and then
* load them.
*/
loadMore: function () {
numResults += LOAD_INCREMENT;
update();
} }
}; };
} }