Search on creation date (client)

This commit is contained in:
jendib 2013-07-31 01:51:03 +02:00
parent 871e531c4b
commit 990a1c3aa5
9 changed files with 62 additions and 24 deletions

View File

@ -1,4 +1,3 @@
- Client/server side search on tags - Client/server side search on tags
- Client side search on creation date
- Client/server side edition of existing tag names - Client/server side edition of existing tag names
- Server side reordering files - Server side reordering files

View File

@ -45,8 +45,8 @@
<div class="navbar-inner"> <div class="navbar-inner">
<a class="brand" href="#">Sismics Docs</a> <a class="brand" href="#">Sismics Docs</a>
<ul class="nav" ng-show="!userInfo.anonymous"> <ul class="nav" ng-show="!userInfo.anonymous">
<li ng-class="{active: $uiRoute}" ui-route="/document"><a href="#/document">Documents</a></li> <li ng-class="{active: $uiRoute}" ui-route="/document.*"><a href="#/document">Documents</a></li>
<li ng-class="{active: $uiRoute}" ui-route="/tag"><a href="#/tag">Tags</a></li> <li ng-class="{active: $uiRoute}" ui-route="/tag.*"><a href="#/tag">Tags</a></li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -12,6 +12,19 @@ App.controller('Document', function($scope, $state, Restangular) {
$scope.offset = 0; $scope.offset = 0;
$scope.currentPage = 1; $scope.currentPage = 1;
$scope.limit = 10; $scope.limit = 10;
$scope.isAdvancedSearchCollapsed = true;
/**
* Initialize search criterias.
*/
$scope.initSearch = function() {
$scope.search = {
query: '',
createDateMin: null,
createDateMax: null,
};
};
$scope.initSearch();
/** /**
* Load new documents page. * Load new documents page.
@ -23,10 +36,13 @@ App.controller('Document', function($scope, $state, Restangular) {
limit: $scope.limit, limit: $scope.limit,
sort_column: $scope.sortColumn, sort_column: $scope.sortColumn,
asc: $scope.asc, asc: $scope.asc,
search: $scope.search search: $scope.search.query,
create_date_min: $scope.isAdvancedSearchCollapsed || !$scope.search.createDateMin ? null : $scope.search.createDateMin.getTime(),
create_date_max: $scope.isAdvancedSearchCollapsed || !$scope.search.createDateMax ? null : $scope.search.createDateMax.getTime()
}) })
.then(function(data) { .then(function(data) {
$scope.documents = data; $scope.documents = data.documents;
$scope.totalDocuments = data.total;
$scope.numPages = Math.ceil(data.total / $scope.limit); $scope.numPages = Math.ceil(data.total / $scope.limit);
}); });
}; };
@ -43,16 +59,20 @@ App.controller('Document', function($scope, $state, Restangular) {
/** /**
* Watch for current page change. * Watch for current page change.
*/ */
$scope.$watch('currentPage', function() { $scope.$watch('currentPage', function(prev, next) {
if (prev == next) {
return;
}
$scope.offset = ($scope.currentPage - 1) * $scope.limit; $scope.offset = ($scope.currentPage - 1) * $scope.limit;
$scope.pageDocuments(); $scope.pageDocuments();
}); });
/**
* Watch for search change.
*/
$scope.$watch('search', function(prev, next) { $scope.$watch('search', function(prev, next) {
if (next) {
$scope.loadDocuments(); $scope.loadDocuments();
} }, true);
})
/** /**
* Sort documents. * Sort documents.

View File

@ -3,7 +3,7 @@
<li ng-repeat="tag in tags"><span class="label label-info">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)"></span></span></li> <li ng-repeat="tag in tags"><span class="label label-info">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)"></span></span></li>
</ul> </ul>
<p class="input-append"> <p class="input-append">
<input type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input" typeahead="tag.name for tag in allTags | filter: $viewValue" ui-keypress="{ 'enter': 'addTag($event)' }" /> <input type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input" typeahead="tag.name for tag in allTags | filter: $viewValue" typeahead-on-select="addTag()" />
<button type="submit" class="btn" ng-click="addTag()">Add</button> <button type="submit" class="btn" ng-click="addTag()">Add</button>
</p> </p>
</div> </div>

View File

@ -1,5 +1,5 @@
<h1> <h1>
{{ documents.total }} <small>document{{ documents.total > 1 ? 's' : '' }} in the database</small> {{ totalDocuments }} <small>document{{ totalDocuments > 1 ? 's' : '' }} in the database</small>
</h1> </h1>
<blockquote class="pull-right"> <blockquote class="pull-right">

View File

@ -14,7 +14,7 @@
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputCreateDate">Creation date</label> <label class="control-label" for="inputCreateDate">Creation date</label>
<div class="controls"> <div class="controls">
<input type="text" id="inputCreateDate" datepicker-popup="yyyy-MM-dd" ng-model="document.create_date" starting-day="1" show-weeks="false" /> <input type="text" id="inputCreateDate" ng-readonly="true" datepicker-popup="yyyy-MM-dd" ng-model="document.create_date" starting-day="1" show-weeks="false" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">

View File

@ -4,10 +4,28 @@
<p class="text-center"> <p class="text-center">
<button class="btn btn-primary" type="button" ng-click="addDocument()"><span class="icon-plus icon-white"></span> Add a document</button> <button class="btn btn-primary" type="button" ng-click="addDocument()"><span class="icon-plus icon-white"></span> Add a document</button>
</p> </p>
<p class="input-prepend text-center input-block-level"> <p class="input-prepend input-append text-center input-block-level">
<span class="add-on"><span class="icon-search"></span></span> <span class="add-on"><span class="icon-search"></span></span>
<input class="span10" type="text" placeholder="Search" ng-model="search" > <input type="text" placeholder="Search" ng-model="search.query" />
<button class="btn" ng-click="isAdvancedSearchCollapsed = !isAdvancedSearchCollapsed">Advanced search <span class="caret"></span></button>
</p> </p>
<div collapse="isAdvancedSearchCollapsed">
<div class="well well-small">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputCreateDateMin">Creation date</label>
<div class="controls">
<input class="span4" ng-readonly="true" ng-change="loadDocuments()" type="text" id="inputCreateDateMin" datepicker-popup="yyyy-MM-dd" ng-model="search.createDateMin" starting-day="1" show-weeks="false" />
to
<input class="span4" ng-readonly="true" ng-change="loadDocuments()" type="text" id="inputCreateDateMax" datepicker-popup="yyyy-MM-dd" ng-model="search.createDateMax" starting-day="1" show-weeks="false" />
</div>
</div>
<div class="form-actions">
<button ng-click="initSearch()" class="btn btn-warning" type="submit">Reset search</button>
</div>
</form>
</div>
</div>
<table class="table table-striped table-hover table-documents"> <table class="table table-striped table-hover table-documents">
<thead> <thead>
<tr> <tr>
@ -16,7 +34,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-click="viewDocument(document.id)" ng-repeat="document in documents.documents"> <tr ng-click="viewDocument(document.id)" ng-repeat="document in documents">
<td>{{ document.title }}</td> <td>{{ document.title }}</td>
<td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td> <td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
</tr> </tr>

View File

@ -1,6 +1,6 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row-fluid"> <div class="row-fluid">
<div class="span3 well text-center"> <div class="span4 well text-center">
<p class="input-prepend input-append"> <p class="input-prepend input-append">
<span class="add-on"><span class="icon-plus"></span></span> <span class="add-on"><span class="icon-plus"></span></span>

View File

@ -13,13 +13,14 @@
cursor: pointer; cursor: pointer;
} }
/*.thumbnails-file li.thumbnail-container {
&:nth-child(6n+1) {
margin-left: 0;
}
}*/
.thumbnails-file [class*="span"]:first-child { .thumbnails-file [class*="span"]:first-child {
margin-left: 2.5641%; margin-left: 2.5641%;
} }
.collapse[style="height: auto;"] {
overflow: visible;
}
input[readonly][datepicker-popup] {
cursor: pointer;
}