Skip to content

Commit

Permalink
Search box added for consumers
Browse files Browse the repository at this point in the history
  • Loading branch information
PGBI committed Jul 4, 2017
1 parent 6e5afd5 commit 1826e16
Show file tree
Hide file tree
Showing 7 changed files with 514 additions and 441 deletions.
40 changes: 37 additions & 3 deletions src/html/consumers/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,43 @@
<div class="container" infinite-scroll="loadMore()" infinite-scroll-distance="5" infinite-scroll-use-document-bottom="true">
<a href="#/consumers/add" class="btn-floating btn-large waves-effect waves-light right" ng-show="consumers.length >= 1">

<ul ng-show="consumers.length >= 1" class="horizontal right">
<li class="search" style="width:300px;">
<div class="search-wrapper card">
<input class="search" placeholder="Search consumer" value=""
ng-focus="searchBarFocused = true"
ng-blur="searchBarFocused = false"
ng-model="searchInput"
ng-change="searchConsumers()">
<i class="material-icons">search</i>
<div class="search-results collection" ng-show="searchBarFocused || viewingResults" ng-mouseover="viewingResults = true" ng-mouseout="viewingResults = false">
<p class="collection-item grey-text" ng-if="!searchInput">
<small>
Search consumer by ID, custom ID, username, or Oauth2 client_id.
</small>
</p>
<p class="collection-item grey-text" ng-if="searching && Utils.keys(searchResults).length == 0">
No results found.
</p>
<a class="collection-item" ng-repeat="(id, name) in searchResults" href="#/consumers/{{ id }}">
{{ name }}
</a>
<!--
<a href="#" class="collection-item">Consumer 1</a>
<a href="#" class="collection-item">Consumer 2</a>
-->
</div>
</div>
</li>
<li>
<a href="#/consumers/add" class="btn-floating btn-large waves-effect waves-light">
<i class="material-icons">add</i>
</a>
</a>
</li>
</ul>

<h3 class="header">Consumers</h3>
<h3 class="header">
Consumers
</h3>

<p class="flow-text center" ng-show="total === null" style="margin-top:50px;">
<app-loader></app-loader>
Expand Down
131 changes: 45 additions & 86 deletions src/html/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,56 @@
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-strict-di>
<head>
<meta charset="UTF-8">
<title>Kong Dashboard</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/app.min.css" >
<meta charset="UTF-8">
<title>Kong Dashboard</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/app.min.css" >
</head>
<body>
<app-route-loading-indicator></app-route-loading-indicator>
<app-route-loading-indicator></app-route-loading-indicator>

<nav class="top_nav fade ng-hide-animate" ng-show="app.config.url">
<ul class="right hide-on-med-and-down">
<li>
<a href="#/">
<i class="material-icons">home</i>
Home
</a>
</li>
<li>
<a href="#/apis">
<i class="material-icons">apps</i>
APIs
</a>
</li>
<li>
<a href="#/consumers">
<i class="material-icons">account_box</i>
Consumers
</a>
</li>
<li>
<a href="#/plugins">
<i class="material-icons">extension</i>
Plugins
</a>
</li>
<li>
<a href="#/config">
<i class="material-icons">settings</i>
Settings
</a>
</li>
</ul>
<ul id="slide-out" class="side-nav">
<li>
<a href="#/">
<i class="material-icons">home</i>
Home
</a>
</li>
<li>
<a href="#/apis">
<i class="material-icons">apps</i>
APIs
</a>
</li>
<li>
<a href="#/consumers">
<i class="material-icons">account_box</i>
Consumers
</a>
</li>
<li>
<a href="#/plugins">
<i class="material-icons">extension</i>
Plugins
</a>
</li>
<li>
<a href="#/config">
<i class="material-icons">settings</i>
Settings
</a>
</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse app-slide-out"><i class="material-icons">menu</i></a>
</nav>
<nav class="fade ng-hide-animate" ng-show="app.config.url">
<div class="nav-wrapper">
<ul class="right">
<li>
<a href="#/">
<i class="material-icons">home</i>
</a>
</li>
<li>
<a href="#/apis">
<i class="material-icons tooltipped" data-position="bottom" data-tooltip="Manage APIs" data-delay="0">apps</i>
</a>
</li>
<li>
<a href="#/consumers">
<i class="material-icons tooltipped" data-position="bottom" data-tooltip="Manage Consumers" data-delay="0">account_box</i>
</a>
</li>
<li>
<a href="#/plugins">
<i class="material-icons tooltipped" data-position="bottom" data-tooltip="Manage Plugins" data-delay="0">extension</i>
</a>
</li>
</ul>
</div>
</nav>

<main ng-view ng-show="initialized"></main>
<app-loader ng-hide="initialized"></app-loader>
<main ng-view ng-show="initialized"></main>
<app-loader ng-hide="initialized"></app-loader>

<footer ng-show="app.config.url" class="fade ng-hide-animate">
<div class="container">
<p class="grey-text text-lighten-4 right">
Current kong node:
<em>
{{app.config.url}} (v{{app.config.kong_version}})
(<a class="white-text" href="#/config" style="text-decoration:underline">Edit</a>)
</em>
</p>
</div>
</footer>
<footer ng-show="app.config.url" class="fade ng-hide-animate">
<div class="container">
<p class="grey-text text-lighten-4 right">
Current kong node:
<em>
{{app.config.url}} (v{{app.config.kong_version}})
(<a class="white-text" href="#/config" style="text-decoration:underline">Edit</a>)
</em>
</p>
</div>
</footer>

<script src="js/app.min.js"></script>
<script src="js/app.min.js"></script>
</body>
</html>
Loading

0 comments on commit 1826e16

Please sign in to comment.