Merge pull request #731 from readthedocs/davidfischer/staff-dashboard…

…-home-filter

Add a filter for the dashboard home screen

adserver/templates/adserver/dashboard.html

@@ -13,6 +13,17 @@
 
 
 {% block content_container %}
+
+{% if request.user.is_staff %}
+<div>
+  <form>
+    <div class="form-group">
+      <input type="search" class="form-control" id="publisher-advertiser-filter" data-bind="textInput: dashboardFilter" placeholder="Filter advertisers or publishers...">
+    </div>
+  </form>
+</div>
+{% endif %}
+
 <div class="row">
 
   {% if request.user.is_staff %}
@@ -39,9 +50,9 @@ <h2>{% trans 'Publishers' %}</h2>
     <p>
       {% trans 'Reports for your publisher accounts.' %}
     </p>
-    <ul>
+    <ul id="publishers-list">
       {% for publisher in publishers %}
-        <li><a href="{% url 'publisher_main' publisher.slug %}">{{ publisher.name }}</a></li>
+        <li data-bind="visible: shouldShow('{{ publisher.slug }}')"><a href="{% url 'publisher_main' publisher.slug %}">{{ publisher.name }}</a></li>
       {% endfor %}
     </ul>
   </div>
@@ -53,9 +64,9 @@ <h2>{% trans 'Advertisers' %}</h2>
     <p>
       {% trans 'Reports for your advertiser accounts.' %}
     </p>
-    <ul>
+    <ul id="advertisers-list">
       {% for advertiser in advertisers %}
-        <li><a href="{% url 'advertiser_main' advertiser.slug %}">{{ advertiser.name }}</a></li>
+        <li data-bind="visible: shouldShow('{{ advertiser.slug }}')"><a href="{% url 'advertiser_main' advertiser.slug %}">{{ advertiser.name }}</a></li>
       {% endfor %}
     </ul>
   </div>

assets/src/views/dashboard-home.js

@@ -0,0 +1,22 @@
+import * as jquery from 'jquery';
+const ko = require('knockout');
+
+
+function DashboardHomeViewModel(method) {
+  this.dashboardFilter = ko.observable();
+
+  // Determines whether a specific advertiser/publisher slug should be visible
+  this.shouldShow = function (slug) {
+    let filterValue = this.dashboardFilter();
+    if (!filterValue) return true;
+
+    filterValue = filterValue.toLowerCase();
+    if (slug.search(filterValue) >= 0) return true;
+
+    return false;
+  }
+}
+
+if ($('#publisher-advertiser-filter').length > 0) {
+  ko.applyBindings(new DashboardHomeViewModel());
+}

assets/src/views/index.js

@@ -1,3 +1,4 @@
 export * from './publisher_settings';
 export * from './advertisement-form';
 export * from './flight_update';
+export * from './dashboard-home';