mirror of
https://github.com/sismics/docs.git
synced 2024-11-26 07:34:55 +01:00
Closes #23: Tag tree search
This commit is contained in:
parent
80bd11b44e
commit
c7b7527183
@ -13,6 +13,7 @@ angular.module('docs').controller('Document', function($scope, $timeout, $state,
|
|||||||
$scope.currentPage = 1;
|
$scope.currentPage = 1;
|
||||||
$scope.limit = _.isUndefined(localStorage.documentsPageSize) ? 10 : localStorage.documentsPageSize;
|
$scope.limit = _.isUndefined(localStorage.documentsPageSize) ? 10 : localStorage.documentsPageSize;
|
||||||
$scope.search = '';
|
$scope.search = '';
|
||||||
|
$scope.setSearch = function(search) { $scope.search = search };
|
||||||
|
|
||||||
// A timeout promise is used to slow down search requests to the server
|
// A timeout promise is used to slow down search requests to the server
|
||||||
// We keep track of it for cancellation purpose
|
// We keep track of it for cancellation purpose
|
||||||
@ -101,4 +102,20 @@ angular.module('docs').controller('Document', function($scope, $timeout, $state,
|
|||||||
$scope.viewDocument = function(id) {
|
$scope.viewDocument = function(id) {
|
||||||
$state.transitionTo('document.view', { id: id });
|
$state.transitionTo('document.view', { id: id });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Load tags
|
||||||
|
var tags = [];
|
||||||
|
Restangular.one('tag/list').getList().then(function(data) {
|
||||||
|
tags = data.tags;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Find children tags.
|
||||||
|
* @param parent
|
||||||
|
*/
|
||||||
|
$scope.getChildrenTags = function(parent) {
|
||||||
|
return _.filter(tags, function(tag) {
|
||||||
|
return tag.parent == parent;
|
||||||
|
});
|
||||||
|
};
|
||||||
});
|
});
|
@ -5,49 +5,60 @@
|
|||||||
<a href="#/document/add" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add a document</a>
|
<a href="#/document/add" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add a document</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="input-group">
|
<div class="row">
|
||||||
<span class="input-group-addon">
|
<div class="dropdown col-md-2 tag-tree-dropdown" dropdown>
|
||||||
<span class="glyphicon glyphicon glyphicon-info-sign"
|
<button class="btn btn-block btn-default" dropdown-toggle ng-disabled="disabled">
|
||||||
tooltip-placement="bottom"
|
Tags <span class="caret"></span>
|
||||||
tooltip-html-unsafe="before:2012-05<br/>
|
</button>
|
||||||
after:2012-05<br/>
|
<ul class="dropdown-menu tag-tree">
|
||||||
at:2012-05<br/>
|
<li ng-repeat="tag in getChildrenTags()" ng-include="'tag-tree-item'"></li>
|
||||||
tag:car<br/>
|
</ul>
|
||||||
full:led<br/>
|
</div>
|
||||||
shared:yes<br/>
|
|
||||||
lang:fra"></span>
|
<div class="col-md-10 input-group">
|
||||||
</span>
|
<span class="input-group-addon">
|
||||||
<input type="search" class="form-control" placeholder="Search" ng-model="search" />
|
<span class="glyphicon glyphicon glyphicon-info-sign"
|
||||||
<span class="input-group-addon">
|
tooltip-placement="bottom"
|
||||||
<span class="glyphicon glyphicon-search" ng-show="search.length == 0"></span>
|
tooltip-html-unsafe="before:2012-05<br/>
|
||||||
<span class="glyphicon glyphicon-remove" ng-show="search.length > 0" ng-click="search = ''"></span>
|
after:2012-05<br/>
|
||||||
</span>
|
at:2012-05<br/>
|
||||||
|
tag:car<br/>
|
||||||
|
full:led<br/>
|
||||||
|
shared:yes<br/>
|
||||||
|
lang:fra"></span>
|
||||||
|
</span>
|
||||||
|
<input type="search" class="form-control" placeholder="Search" ng-model="search" />
|
||||||
|
<span class="input-group-addon">
|
||||||
|
<span class="glyphicon glyphicon-search" ng-show="search.length == 0"></span>
|
||||||
|
<span class="glyphicon glyphicon-remove" ng-show="search.length > 0" ng-click="search = ''"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="row table table-striped table-hover table-documents">
|
<table class="row table table-striped table-hover table-documents">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="col-xs-6" ng-click="sortDocuments(1)"><span class="glyphicon glyphicon-chevron-{{ sortColumn == 1 ? (asc ? 'down' : 'up') : '' }}"></span> Title</th>
|
<th class="col-xs-6" ng-click="sortDocuments(1)"><span class="glyphicon glyphicon-chevron-{{ sortColumn == 1 ? (asc ? 'down' : 'up') : '' }}"></span> Title</th>
|
||||||
<th class="col-xs-3" ng-click="sortDocuments(3)"><span class="glyphicon glyphicon-chevron-{{ sortColumn == 3 ? (asc ? 'down' : 'up') : '' }}"></span> Creation date</th>
|
<th class="col-xs-3" ng-click="sortDocuments(3)"><span class="glyphicon glyphicon-chevron-{{ sortColumn == 3 ? (asc ? 'down' : 'up') : '' }}"></span> Creation date</th>
|
||||||
<th class="col-xs-3 hidden-xs">Tags</th>
|
<th class="col-xs-3 hidden-xs">Tags</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr ng-click="viewDocument(document.id)" ng-repeat="document in documents">
|
<tr ng-click="viewDocument(document.id)" ng-repeat="document in documents">
|
||||||
<td>
|
<td>
|
||||||
{{ document.title }} ({{ document.file_count }})
|
{{ document.title }} ({{ document.file_count }})
|
||||||
<span class="glyphicon glyphicon-share" ng-if="document.shared" tooltip="Shared"></span>
|
<span class="glyphicon glyphicon-share" ng-if="document.shared" tooltip="Shared"></span>
|
||||||
<a href="#/document/view/{{ document.id }}" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-link"></span></a>
|
<a href="#/document/view/{{ document.id }}" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-link"></span></a>
|
||||||
</td>
|
</td>
|
||||||
<td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
|
<td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
|
||||||
<td class="hidden-xs cell-tags">
|
<td class="hidden-xs cell-tags">
|
||||||
<div class="tags">
|
<div class="tags">
|
||||||
<span class="label label-info" ng-repeat="tag in document.tags" ng-style="{ 'background': tag.color }">
|
<span class="label label-info" ng-repeat="tag in document.tags" ng-style="{ 'background': tag.color }">
|
||||||
<span class="shorten">{{ tag.name | shorten }}</span><span class="full">{{ tag.name }}</span>
|
<span class="shorten">{{ tag.name | shorten }}</span><span class="full">{{ tag.name }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
@ -71,3 +82,13 @@
|
|||||||
<div ui-view="document"></div>
|
<div ui-view="document"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script type="text/ng-template" id="tag-tree-item">
|
||||||
|
<span class="btn" ng-style="{ 'background-color': tag.color }"></span>
|
||||||
|
<span class="btn btn-link" ng-click="setSearch('tag:' + tag.name)">
|
||||||
|
{{ tag.name }}
|
||||||
|
</span>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li ng-repeat="tag in getChildrenTags(tag.id)" ng-include="'tag-tree-item'"></li>
|
||||||
|
</ul>
|
||||||
|
</script>
|
@ -184,3 +184,16 @@ input[readonly].share-link {
|
|||||||
.tab-pane {
|
.tab-pane {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Tag tree
|
||||||
|
.tag-tree-dropdown {
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
.tag-tree {
|
||||||
|
li {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user