From 81c3a2b18d3a3f16a79de14de070a42611f1294c Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Jun 19 2018 01:57:31 +0000
Subject: Restyle the pull requests list page


This changes the list of pull requests to match the recently
re-done issues list.

It only implements the filters and sorting that was in the
old pull-requests page. (which has fewer options than the
issues page)

Fixes #3341

Signed-off-by: Ryan Lerch <rlerch@redhat.com>

---

diff --git a/pagure/templates/_render_pullrequests.html b/pagure/templates/_render_pullrequests.html
new file mode 100644
index 0000000..483f755
--- /dev/null
+++ b/pagure/templates/_render_pullrequests.html
@@ -0,0 +1,99 @@
+{% macro render_pullrequest_row(request, repo, username) %}
+    {% if request.status|lower == 'open' %}
+        {% set status_color = "success" %}
+    {% elif request.status|lower == 'merged' %}
+        {% set status_color = "info" %}
+    {% else %}
+        {% set status_color = "danger" %}
+    {% endif %}
+
+<div class="request-row list-group-item list-group-item-action">
+        <div class="d-flex align-items-start">
+            <span class="fa fa-fw text-{{status_color}} fa-arrow-circle-down pt-1"></span>
+            <div class="ml-1">
+                <div>
+                    <span class="text-{{status_color}} font-weight-bold">#{{request.id}}</span>
+                    <span class="font-weight-bold">
+                        <a class="notblue" href="{{ url_for(
+                            'ui_ns.request_pull',
+                            repo=repo.name,
+                            username=username,
+                            namespace=repo.namespace,
+                            requestid=request.id) }}">
+                        {{request.title}}
+                        </a>
+                    </span>
+
+                </div>
+                <div>
+                    {% if request.status|lower == 'merged'%}
+                        <small>
+                            <span class="text-info font-weight-bold">Merged</span>
+                            <span data-toggle="tooltip" title="{{
+                            request.closed_at | format_datetime
+                          }}">{{ request.closed_at | humanize}}</span>.
+
+                          Opened <span data-toggle="tooltip" title="{{
+                            request.date_created | format_datetime
+                          }}">{{ request.date_created | humanize}}</span> by <span title="{{
+                          request.user.html_title }}">{{ request.user.user }}</span>.
+
+                        </small>
+                    {% elif request.status|lower == 'closed' %}
+                        <small>
+                            <span class="text-danger font-weight-bold">Cancelled</span>
+                            <span data-toggle="tooltip" title="{{
+                            request.closed_at | format_datetime
+                          }}">{{ request.closed_at | humanize}}</span>.
+                          Opened <span data-toggle="tooltip" title="{{
+                            request.date_created | format_datetime
+                          }}">{{ request.date_created | humanize}}</span> by <span title="{{
+                          request.user.html_title }}">{{ request.user.user }}</span>.
+                        </small>
+                    {% else %}
+                    <small>
+                        <span class="text-success font-weight-bold">Opened</span> 
+                        <span data-toggle="tooltip" title="{{
+                        request.date_created | format_datetime
+                      }}">{{ request.date_created | humanize}}</span> by <span title="{{
+                      request.user.html_title }}">{{ request.user.user }}</span>.
+                      Modified <span data-toggle="tooltip" title="{{
+                        request.last_updated | format_datetime
+                      }}">{{ request.last_updated | humanize}}</span>
+                      </small>
+                    {% endif %}
+                </div>
+                <div>
+                        {% for tag in request.tags %}
+                            <span id="tag-{{ tag.tag }}" title="{{ tag.tag_description }}"
+                                  style="background-color:{{ tag.tag_color}}; font-size:90%"
+                                  class="badge badge-secondary"
+                                  >
+                                {{ tag.tag }}
+                            </span>
+                        {% endfor %}
+                </div>
+            </div>
+            <span class="font-weight-bold text-muted ml-auto">
+
+            {% if request.assignee %}
+            <span title="{{ request.assignee.username}}" class="ml-3 assigned-user">
+                <i class="fa fa-fw fa-user-plus pr-2"></i>
+                {{ request.assignee.username | avatar(size=20) | safe}}
+            </span>
+            {% endif %}
+
+            <span title="branch to" class="text-muted ml-3">
+                <span class="fa fa-fw fa-random pr-2"></span>
+                  {{request.branch}}
+              </span>
+
+            <span title="Comments on the ticket" class="text-muted ml-3">
+              <span class="fa fa-fw fa-comment pr-2"></span>
+                {{request.user_comments|count}}
+            </span>
+            
+            </span>
+        </div>
+</div><!--end request-row-->
+{% endmacro%}
diff --git a/pagure/templates/requests.html b/pagure/templates/requests.html
index 170017a..2dabb87 100644
--- a/pagure/templates/requests.html
+++ b/pagure/templates/requests.html
@@ -1,202 +1,363 @@
 {% extends "repo_master.html" %}
 
 {% from "_render_repo.html" import pagination_link %}
+{% from "_render_pullrequests.html" import render_pullrequest_row %}
+
 
 {% block title %}Pull requests - {{
     repo.namespace + '/' if repo.namespace }}{{ repo.name }}{% endblock %}
 {% set tag = "home" %}
 
+{% block header %}
+<link href="{{ url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}"
+  rel="stylesheet" />
+{% endblock %}
 
 {% block repo %}
 
-<div>
-  <h2 class="p-b-1">
-    {{ requests|count }} {%-
-    if status and status|lower != 'open' and status|lower != 'false'
-     %} {{ status }} {%-
-    elif status|lower in ['closed', 'false']
-    %} Closed/Merged {%- endif
-    %} Pull Requests (of {{ requests_cnt }})
-  </h2>
-
-<div>
-  <span class="btn-group btn-group-sm issues-tagbar py-3" role="group">
-      <a class="btn {%
-            if status|lower in ['open', 'true'] %}btn-primary{%
-            else %}btn-secondary{%
-            endif %} btn-sm" href="{{ url_for(
-                'ui_ns.request_pulls',
-                repo=repo.name,
-                username=username,
-                namespace=repo.namespace) }}">Open</a>
-      <a class="btn {%
-        if status|lower in ['closed', 'false'] %}btn-primary{%
-        else %}btn-outline-dark{%
-        endif %} btn-sm" href="{{ url_for(
-            'ui_ns.request_pulls',
-            repo=repo.name,
-            username=username,
-            author=author,
-            namespace=repo.namespace,
-            status=0) }}">Closed</a>
-      <a class="btn {%
-        if status|lower in ['all', 'none'] %}btn-primary{%
-        else %}btn-outline-dark{%
-        endif %} btn-sm" href="{{ url_for(
-            'ui_ns.request_pulls',
-            repo=repo.name,
-            username=username,
-            author=author,
-            namespace=repo.namespace,
-            status='all') }}">All</a>
-  </span>
-  <a class="btn btn-outline-dark btn-sm float-right mt-2" href="{{ url_for(
-    'ui_ns.request_pulls',
-    repo=repo.name,
-    username=username,
-    namespace=repo.namespace) }}">Reset Filters</a>
-</div>
-</div>
-<div class="card m-t-1 table-responsive">
-<table id="pagure-issues-list" class="table table-hover table-striped mb-0">
-    <thead class="thead-default">
-        <tr>
-            <th class="stretch-table-column">Pull Request</th>
-            <th class="branch_to nowrap">To</th>
-           <th class="open_date"><a href="{{ url_for('ui_ns.request_pulls',
-            repo=repo.name, username=username, namespace=repo.namespace,
-            tags=tags, author=author, assignee=assignee, priority=priority,
-            status=status or 'all', order_key='date_created',
-            order='date_created' | table_get_link_order(order_key, order)) }}">Opened</a>
-            {{ 'date_created' | table_sort_arrow(order_key, order) | safe }}</th>
-
-           <th class="mod_date"><a href="{{ url_for('ui_ns.request_pulls',
-            repo=repo.name, username=username, namespace=repo.namespace,
-            tags=tags, author=author, assignee=assignee, priority=priority,
-            status=status or 'all', order_key='last_updated',
-            order='last_updated' | table_get_link_order(order_key, order)) }}">Modified</a>
-            {{ 'last_updated' | table_sort_arrow(order_key, order) | safe }}</th>
-
-            {% if status|lower not in ['open', 'true'] %}
-            <th class="closed_date nowrap">Closed</th>
-            {% endif %}
-            <th class="open_by">
-              Reporter(<a href="{{ url_for(
-                'ui_ns.request_pulls',
-                repo=repo.name,
-                username=username,
-                namespace=repo.namespace,
-                assignee=assignee, status=status) }}">reset</a>)
-            </th>
-            {% if status|lower == 'open' %}
-            <th class="assigned">
-              Assignee(<a href="{{ url_for(
-                'ui_ns.request_pulls',
-                repo=repo.name,
-                username=username,
-                namespace=repo.namespace,
-                author=author, status=status) }}">reset</a>)
-            </th>
-            {% endif %}
-        </tr>
-    </thead>
-    <tfoot>
-    </tfoot>
-    <tbody>
-    {% for request in requests %}
-        <tr>
-            <td>
-              <a href="{{ url_for(
-                  'ui_ns.request_pull',
-                  repo=repo.name,
-                  username=username,
-                  namespace=repo.namespace,
-                  requestid=request.id) }}">
-                <span class="label label-default">PR#{{ request.id }}</span>
-                {% if status|lower not in ['open', 'true'] %}<span class="label {%
-                    if request.status|lower == 'merged' %}label-success{%
-                    elif request.status|lower == 'closed'%}label-danger{%
-                    elif request.status|lower == 'open' %}label-primary{%
-                    endif %}">{{request.status}}</span>{%
-                  endif %} {{ request.title | noJS("img") | safe }}
-              </a>
-              {% if request.user_comments|count > 0 %}
-               &nbsp;&nbsp;
-              <span class="text-muted nowrap">
-                <span class="fa fa-comment"
-                    title="Comments on the Pull Request"></span>
-                  {{ request.user_comments|count }}
-              </span>
-              {% endif %}
-            </td>
-            <td class="nowrap">
-              <span>{{ request.branch }}</span>
-            </td>
-            <td class="nowrap">
-              <span title="{{request.date_created | format_datetime}}">{{
-                request.date_created | humanize}}</span>
-            </td>
-            <td class="nowrap">
-              <span title="{{request.last_updated | format_datetime}}">{{
-                request.updated_on | humanize}}</span>
-            </td>
-            {% if status|lower not in ['open', 'true'] %}
-            <td class="nowrap">
-              <span title="{{
-                request.closed_at | format_datetime
-                if request.closed_at
-              }}">{{
-                request.closed_at | humanize
-                if request.closed_at }}</span>
-            </td>
-            {% endif %}
-            <td class="nowrap">
-              <a href="{{ url_for(
-                  'ui_ns.request_pulls',
-                  repo=repo.name,
-                  username=username,
-                  namespace=repo.namespace,
-                  author=request.user.user,
-                  assignee=assignee, status=status) }}"
-                  title="Filter requests by reporter">
-                {{ request.user.default_email | avatar(16) | safe }}
-                {{ request.user.user }}
-              </a>
-            </td>
-            {% if status|lower in ['open', 'true'] %}
-            <td class="nowrap">
-              {% if request.assignee %}
-              <a href="{{ url_for(
-                'ui_ns.request_pulls',
-                repo=repo.name,
-                username=username,
-                namespace=repo.namespace,
-                assignee=request.assignee.username,
-                author=author, status=status) }}"
-                title="Filter issues by assignee">
-                {{ request.assignee.default_email | avatar(16) | safe }}
-                {{ request.assignee.user }}
-              </a>
-              {% else %}
-              <a class="text-muted" href="{{ url_for(
-                'ui_ns.request_pulls',
-                repo=repo.name,
-                username=username,
-                namespace=repo.namespace,
-                assignee=0,
-                author=author, status=status) }}">unassigned</a>
-              {% endif %}
-            </td>
-            {% endif %}
-        </tr>
-    {% else %}
-        <tr>
-            <td colspan="6" class="noresult">No Pull Requests found</td>
-        </tr>
-    {% endfor %}
-    </tbody>
-</table>
+<h3 class="font-weight-bold">
+  <i class="fa fa-arrow-circle-down text-muted"></i>
+  Pull Requests
+  <div class="btn-group btn-group-sm float-right" role="group">
+      <a class="btn btn-sm btn-outline-success font-weight-bold"
+          href="{{ url_for('ui_ns.request_pulls',
+          repo=repo.name,
+          username=username,
+          namespace=repo.namespace,
+          status=True) }}">
+        <span class="fa fa-fw fa-arrow-circle-down"></span> {{total_open}} Open
+      </a>
+      <a class="btn btn-sm btn-outline-info font-weight-bold"
+          href="{{ url_for('ui_ns.request_pulls',
+          repo=repo.name,
+          username=username,
+          namespace=repo.namespace,
+          status=False) }}">
+          <span class="fa fa-fw fa-arrow-circle-down"></span> {{total_merged}} Merged
+      </a>
+  </div>
+</h3>
+<div class="row mt-4">
+  <div class="col">
+    <div class="list-group">
+        <div class="list-group-item bg-light">
+          <div class="row">
+            <div class="col">
+              <div class="btn-group">
+                <div class="dropdown">
+                {% if status_filter == 'Open' %}
+                  <a class="btn btn-sm btn-outline-success border-0 font-weight-bold dropdown-toggle" href="#" data-toggle="dropdown" id="issue-status-dropdown">
+                      <span class="fa fa-fw fa-arrow-circle-down"></span> {{open_cnt}} Open PRs
+                {% elif status_filter == 'Merged' %}
+                    <a class="btn btn-sm btn-outline-info border-0 font-weight-bold dropdown-toggle" href="#" data-toggle="dropdown" id="issue-status-dropdown">
+                        <span class="fa fa-fw fa-arrow-circle-down"></span> {{merged_cnt}} Merged PRs
+                {% elif status_filter == 'Closed' %}
+                    <a class="btn btn-sm btn-outline-danger border-0 font-weight-bold dropdown-toggle" href="#" data-toggle="dropdown" id="issue-status-dropdown">
+                        <span class="fa fa-fw fa-arrow-circle-down"></span> {{closed_cnt}} Cancelled PRs
+                {% else %}
+                  <a class="btn btn-sm btn-outline-secondary border-0 font-weight-bold dropdown-toggle" href="#" data-toggle="dropdown" id="issue-status-dropdown">
+                       <span class="fa fa-fw fa-arrow-circle-down"></span> {{open_cnt+closed_cnt+merged_cnt}} All PRs
+                {% endif %}                              
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item {% if status_filter == 'Open' %}active{%endif%}" 
+                          href="{{ url_for('ui_ns.request_pulls',
+                          repo=repo.name,
+                          username=username,
+                          namespace=repo.namespace, 
+                          author=author,
+                          assignee=assignee) }}">
+                          {{open_cnt}} Open PRs
+                    </a>
+
+                    <a class="dropdown-item {% if status_filter == 'Merged' %}active{%endif%}" 
+                        href="{{ url_for('ui_ns.request_pulls',
+                          repo=repo.name,
+                          username=username,
+                          namespace=repo.namespace,
+                          author=author, status='Merged',
+                          assignee=assignee) }}">
+                          {{merged_cnt}} Merged PRs
+                    </a>
+
+                    <a class="dropdown-item {% if status_filter == 'Closed' %}active{%endif%}" 
+                        href="{{ url_for('ui_ns.request_pulls',
+                          repo=repo.name,
+                          username=username,
+                          namespace=repo.namespace,
+                          author=author, status='Closed',
+                          assignee=assignee) }}">
+                          {{closed_cnt}} Cancelled PRs
+                    </a>
+
+                    <a class="dropdown-item {% if status_filter == None %}active{%endif%}" 
+                          href="{{ url_for('ui_ns.request_pulls',
+                          repo=repo.name,
+                          username=username,
+                          namespace=repo.namespace,
+                          author=author, status='all',
+                          assignee=assignee) }}">
+                          {{open_cnt+closed_cnt+merged_cnt}} All PRs
+                    </a>
+                  </div>
+                </div>
+                <div class="btn-group">
+                  <button class="btn btn-sm btn-outline-secondary border-0 dropdown-toggle" data-flip="false" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <span class="font-weight-bold">Filter{%if 
+                        author or
+                        assignee %}:{% endif %}
+                    </span>
+                    {% if author %}
+                    <i class="fa fa-user pl-2 pr-1" title="reported by"></i>
+                      {{ author }} 
+                    {% endif %}
+                    {% if assignee %}
+                    <i class="fa fa-user-plus pl-2 pr-1" title="assigned to"></i>
+                      {{ assignee }} 
+                    {% endif %}
+                  </button>
+                  <div class="dropdown-menu p-4" style="min-width:400px" aria-labelledby="dropdownMenuButton" id="filters-dropdown">
+                    <div>
+                      <form id="filters_form" action="{{ url_for('ui_ns.request_pulls',
+                            username=username,
+                            namespace=repo.namespace,
+                            repo=repo.name ) }}" method="GET">
+                        <input type="hidden" name="status" value="{{ status }}" />
+
+                        <div class="form-group row mb-1" id="assignee-filter-group">
+                          <label for="assignee" class="col-auto align-self-center pl-1 pr-0"><i class="text-muted fa fa-fw fa-user-plus"></i></label>
+                          <div class="col pl-1">
+                            <select name="assignee" id="assignee-selectize" placeholder="Assignee">
+                              {% if assignee %}
+                              <option value="{{assignee}}" selected="selected">{{assignee}}</option>
+                              {% endif %}
+                            </select>
+                          </div>
+                          <div class="col-auto pl-0 pr-1 pt-1">
+                            <i class="fa fa-times fa-fw text-muted" id="assignee-selectize-reset"></i>
+                          </div>
+                        </div>
+
+                        <div class="form-group row mb-1" id="author-filter-group">
+                          <label for="author" class="col-auto align-self-center pl-1 pr-0"><i class="text-muted fa fa-fw fa-user"></i></label>
+                          <div class="col pl-1">
+                            <select name="author" id="author-selectize" placeholder="Submitted by">
+                              {% if author %}
+                              <option value="{{author}}" selected="selected">{{author}}</option>
+                              {% endif %}
+                            </select>
+                          </div>
+                          <div class="col-auto pl-0 pr-1 pt-1">
+                            <i class="fa fa-times fa-fw text-muted" id="author-selectize-reset"></i>
+                          </div>
+                        </div>
+
+                        <input type="submit" class="btn btn-block btn-primary" value="Apply Filters" />
+
+                        <a href="{{ url_for('ui_ns.request_pulls',
+                        repo=repo.name,
+                        username=username,
+                        namespace=repo.namespace,
+                        status=status) }}" class="btn btn-link btn-block">Reset Filters</a>
+
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="btn-group float-right">
+
+                <div class="btn-group">
+                {% set filters_list = [
+                    {"key": "date_created", "display_string": "Open Date", "sort_icon_prefix": "fa-sort-numeric-", "icon":"fa-calendar"},
+                    {"key": "last_updated", "display_string": "Last Modified Date", "sort_icon_prefix": "fa-sort-numeric-", "icon":"fa-calendar"},
+                ] %}
+                  <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-flip="false" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fa fa-fw fa-sort"></i> Sort
+                  </button>
+                  <div class="dropdown-menu dropdown-menu-right" style="min-width:300px" aria-labelledby="dropdownMenuButton">
+                    <div class="list-group list-group-flush">
+                    {% for filter in filters_list %}
+                      <div class="list-group-item pl-1">
+                        <div class="btn btn-outline-dark border-0 font-weight-bold disabled">
+                          <span class="fa fa-fw {{filter['icon']}}"></span> {{filter["display_string"]}}
+                        </div>
+                        <div class="btn-group float-right">
+                              <a class="btn {%if filter['key'] == order_key and order == 'asc' %}btn-primary{%else%}btn-outline-primary{%endif%}" 
+                              href="{{ url_for('ui_ns.request_pulls',
+                              repo=repo.name, username=username, namespace=repo.namespace,
+                              author=author, assignee=assignee,
+                              status=status, order_key=filter['key'],
+                              order='asc' )}}"><i class="fa fa-fw {{filter['sort_icon_prefix']}}asc"></i></a>
+                              <a class="btn {%if filter['key'] == order_key and order == 'desc' %}btn-primary{%else%}btn-outline-primary{%endif%}"
+                              href="{{ url_for('ui_ns.request_pulls',
+                              repo=repo.name, username=username, namespace=repo.namespace,
+                              author=author, assignee=assignee,
+                              status=status, order_key=filter['key'],
+                              order='desc' )}}"><i class="fa fa-fw {{filter['sort_icon_prefix']}}desc"></i></a>
+                        </div>
+                      </div>
+                    {% endfor %}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {% if requests %}
+          {% for request in requests %}
+            {{render_pullrequest_row(request, repo, username)}}
+          {% endfor %}
+        {% else %}
+        <div class="list-group-item">
+            <div class="row">
+                <div class="col text-center p-5">
+                    <h4 class="text-muted">
+                      {% if status_filter == 'Open'%}
+                        <span class="font-weight-bold">no open pull requests found</span>
+                        {% if merged_cnt %}
+                        <div>
+                          <small>
+                            <a href="{{ url_for('ui_ns.request_pulls',
+                                      repo=repo.name,
+                                      username=username,
+                                      namespace=repo.namespace,
+                                      author=author,
+                                      status='Merged',
+                                      assignee=assignee) }}">
+                              {{merged_cnt}} merged pull requests
+                            </a> 
+                            match this filter
+                          </small>
+                        </div>
+                        {% else %}
+                        <div><small>no merged pull requests match this filter either</small></div>
+                        {% endif %}
+                      {% elif status_filter == 'Merged'%}
+                        <span class="font-weight-bold">no merged pull requests found</span>
+                        {% if open_cnt %}
+                        <div>
+                          <small>
+                            <a href="{{ url_for('ui_ns.request_pulls',
+                                      repo=repo.name,
+                                      username=username,
+                                      namespace=repo.namespace,
+                                      author=author,
+                                      assignee=assignee) }}">
+                              {{open_cnt}} open pull requests
+                            </a> 
+                            match this filter
+                          </small>
+                        </div>
+                        {% else %}
+                        <div><small>no open pull requests match this filter either</small></div>
+                        {% endif %}
+                      {% else %}
+                        no pull requests found
+                      {% endif %}
+                    </h4>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+  </div>
 </div>
+{% if total_page > 1 %}
 {{ pagination_link('page', g.page, total_page) }}
+{% endif %}
+{% endblock %}
+
+{% block jscripts %}
+{{ super() }}
+
+<script type="text/javascript"
+  src="{{ url_for('static', filename='vendor/selectize/selectize.min.js') }}"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+
+    var $assignee_selectize = $('#assignee-selectize').selectize({
+      valueField: 'user',
+      labelField: 'user',
+      searchField: 'user',
+      maxItems: 1,
+      create: false,
+      onInitialize: function(){
+      $("#assignee-filter-group .selectize-control").on('click', function(event){
+        event.stopPropagation();
+      })
+      $("#filters-dropdown").on('click', function(event){
+        event.stopPropagation();
+      })
+      }, 
+      load: function(query, callback) {
+        if (!query.length) return callback();
+        $.getJSON(
+          "{{ url_for('api_ns.api_users') }}", {
+            pattern: query.term
+          },
+          function( data ) {
+            callback( data.users.map(function(x) { return { user: x }; }) );
+          }
+        );
+      }
+    });
+
+    var assignee_selectize_control = $assignee_selectize[0].selectize;
+
+    $("#assignee-selectize-reset").on('click', function(e){
+      assignee_selectize_control.clear();
+    });
+
+var $author_selectize = $('#author-selectize').selectize({
+  valueField: 'user',
+  labelField: 'user',
+  searchField: 'user',
+  maxItems: 1,
+  create: false,
+  onInitialize: function(){
+      $("#author-filter-group .selectize-control").on('click', function(event){
+        event.stopPropagation();
+      })
+      $("#filters-dropdown").on('click', function(event){
+        event.stopPropagation();
+      })
+  }, 
+  load: function(query, callback) {
+    if (!query.length) return callback();
+    $.getJSON(
+      "{{ url_for('api_ns.api_users') }}", {
+        pattern: query.term
+      },
+      function( data ) {
+        callback( data.users.map(function(x) { return { user: x }; }) );
+      }
+    );
+  }
+});
+
+    var author_selectize_control = $author_selectize[0].selectize;
+
+$("#author-selectize-reset").on('click', function(e){
+  author_selectize_control.clear();
+});
+
+  $( "#filters_form" ).submit(function( event ) {
+
+  if ($('select[name="assignee"]').val() == ''){
+    $('select[name="assignee"]').prop("disabled", true);
+   }
+
+  if ($('select[name="author"]').val() == ''){
+    $('select[name="author"]').prop("disabled", true);
+   }
+    
+  });
+
+});
+</script>
 {% endblock %}
 
diff --git a/pagure/ui/fork.py b/pagure/ui/fork.py
index 4d3a865..38ab14e 100644
--- a/pagure/ui/fork.py
+++ b/pagure/ui/fork.py
@@ -78,61 +78,90 @@ def request_pulls(repo, username=None, namespace=None):
     if not repo.settings.get('pull_requests', True):
         flask.abort(404, 'No pull-requests found for this project')
 
-    if is_true(status, ['false', '0']):
-        status = False
-    elif is_true(status, ['all']):
-        status = None
-
-    if is_true(status, ['true', '1', 'open']):
+    total_open = pagure.lib.search_pull_requests(
+        flask.g.session,
+        project_id=repo.id,
+        status=True,
+        count=True)
+
+    total_merged = pagure.lib.search_pull_requests(
+        flask.g.session,
+        project_id=repo.id,
+        status='Merged',
+        count=True)
+
+    if status.lower() == 'merged' or is_true(status, ['false', '0']):
+        status_filter = 'Merged'
         requests = pagure.lib.search_pull_requests(
             flask.g.session,
             project_id=repo.id,
-            status=True,
+            status='Merged',
             order=order,
             order_key=order_key,
             assignee=assignee,
             author=author,
             offset=flask.g.offset,
             limit=flask.g.limit)
-        requests_cnt = pagure.lib.search_pull_requests(
+    elif is_true(status, ['true', '1', 'open']):
+        status_filter = 'Open'
+        requests = pagure.lib.search_pull_requests(
             flask.g.session,
             project_id=repo.id,
-            status=True,
+            status='Open',
+            order=order,
+            order_key=order_key,
             assignee=assignee,
             author=author,
-            count=True)
-        oth_requests = pagure.lib.search_pull_requests(
+            offset=flask.g.offset,
+            limit=flask.g.limit)
+    elif status.lower() == 'closed':
+        status_filter = 'Closed'
+        requests = pagure.lib.search_pull_requests(
             flask.g.session,
             project_id=repo.id,
-            status=False,
+            status='Closed',
+            order=order,
+            order_key=order_key,
             assignee=assignee,
             author=author,
-            count=True)
+            offset=flask.g.offset,
+            limit=flask.g.limit)
     else:
+        status_filter = None
         requests = pagure.lib.search_pull_requests(
             flask.g.session,
             project_id=repo.id,
+            status=None,
             order=order,
             order_key=order_key,
             assignee=assignee,
             author=author,
-            status=status,
             offset=flask.g.offset,
             limit=flask.g.limit)
-        requests_cnt = pagure.lib.search_pull_requests(
-            flask.g.session,
-            project_id=repo.id,
-            assignee=assignee,
-            author=author,
-            status=status,
-            count=True)
-        oth_requests = pagure.lib.search_pull_requests(
-            flask.g.session,
-            project_id=repo.id,
-            status=True,
-            assignee=assignee,
-            author=author,
-            count=True)
+
+    open_cnt = pagure.lib.search_pull_requests(
+        flask.g.session,
+        project_id=repo.id,
+        status='Open',
+        assignee=assignee,
+        author=author,
+        count=True)
+
+    merged_cnt = pagure.lib.search_pull_requests(
+        flask.g.session,
+        project_id=repo.id,
+        status='Merged',
+        assignee=assignee,
+        author=author,
+        count=True)
+
+    closed_cnt = pagure.lib.search_pull_requests(
+        flask.g.session,
+        project_id=repo.id,
+        status='Closed',
+        assignee=assignee,
+        author=author,
+        count=True)
 
     repo_obj = flask.g.repo_obj
     if not repo_obj.is_empty and not repo_obj.head_is_unborn:
@@ -141,8 +170,8 @@ def request_pulls(repo, username=None, namespace=None):
         head = 'master'
 
     total_page = 1
-    if requests_cnt:
-        total_page = int(ceil(requests_cnt / float(flask.g.limit)))
+    if len(requests):
+        total_page = int(ceil(len(requests) / float(flask.g.limit)))
 
     return flask.render_template(
         'requests.html',
@@ -150,15 +179,19 @@ def request_pulls(repo, username=None, namespace=None):
         repo=repo,
         username=username,
         requests=requests,
-        requests_cnt=requests_cnt,
-        oth_requests=oth_requests,
+        open_cnt=open_cnt,
+        merged_cnt=merged_cnt,
+        closed_cnt=closed_cnt,
         order=order,
         order_key=order_key,
         status=status,
+        status_filter=status_filter,
         assignee=assignee,
         author=author,
         head=head,
         total_page=total_page,
+        total_open=total_open,
+        total_merged=total_merged,
     )
 
 
diff --git a/tests/test_pagure_flask_ui_fork.py b/tests/test_pagure_flask_ui_fork.py
index 386ba37..bce6766 100644
--- a/tests/test_pagure_flask_ui_fork.py
+++ b/tests/test_pagure_flask_ui_fork.py
@@ -924,16 +924,12 @@ class PagureFlaskForktests(tests.Modeltests):
         # sort by last_updated
         output = self.app.get('/test/pull-requests?order_key=last_updated')
         output_text = output.get_data(as_text=True)
-        tr_elements = re.findall('<tr>(.*?)</tr>', output_text, re.M | re.S)
+        tr_elements = re.findall('<div class="request-row list-group-item list-group-item-action">(.*?)</div><!--end request-row-->', output_text, re.M | re.S)
         self.assertEqual(output.status_code, 200)
-        arrowed_th = ('Modified</a>\n            <span class="oi" data-glyph='
-                      '"arrow-thick-bottom"></span>')
-        # First table row is the header
-        self.assertIn(arrowed_th, tr_elements[0])
         # Make sure that issue four is first since it was modified last
-        self.assertIn('href="/test/pull-request/4"', tr_elements[1])
-        self.assertIn('href="/test/pull-request/2"', tr_elements[2])
-        self.assertIn('href="/test/pull-request/1"', tr_elements[3])
+        self.assertIn('href="/test/pull-request/4"', tr_elements[0])
+        self.assertIn('href="/test/pull-request/2"', tr_elements[1])
+        self.assertIn('href="/test/pull-request/1"', tr_elements[2])
 
         pr_one = pagure.lib.search_pull_requests(
             self.session, project_id=1, requestid=1)
@@ -944,27 +940,24 @@ class PagureFlaskForktests(tests.Modeltests):
         # sort by last_updated
         output = self.app.get('/test/pull-requests?order_key=last_updated')
         output_text = output.get_data(as_text=True)
-        tr_elements = re.findall(r'<tr>(.*?)</tr>', output_text, re.M | re.S)
+        tr_elements = re.findall('<div class="request-row list-group-item list-group-item-action">(.*?)</div><!--end request-row-->', output_text, re.M | re.S)
         self.assertEqual(output.status_code, 200)
         # Make sure that PR four is first since it was modified last
-        self.assertIn('href="/test/pull-request/1"', tr_elements[1])
+        self.assertIn('href="/test/pull-request/1"', tr_elements[0])
         # Make sure that PR two is second since it was modified second
-        self.assertIn('href="/test/pull-request/4"', tr_elements[2])
+        self.assertIn('href="/test/pull-request/4"', tr_elements[1])
         # Make sure that PR one is last since it was modified first
-        self.assertIn('href="/test/pull-request/2"', tr_elements[3])
+        self.assertIn('href="/test/pull-request/2"', tr_elements[2])
 
 
         # Now query so that the results are ascending
         output = self.app.get('/test/pull-requests?'
                 'order_key=last_updated&order=asc')
         output_text = output.get_data(as_text=True)
-        tr_elements = re.findall(r'<tr>(.*?)</tr>', output_text, re.M | re.S)
-        arrowed_th = ('Modified</a>\n            <span class="oi" data-glyph='
-                      '"arrow-thick-top"></span>')
-        self.assertIn(arrowed_th, tr_elements[0])
-        self.assertIn('href="/test/pull-request/2"', tr_elements[1])
-        self.assertIn('href="/test/pull-request/4"', tr_elements[2])
-        self.assertIn('href="/test/pull-request/1"', tr_elements[3])
+        tr_elements = re.findall('<div class="request-row list-group-item list-group-item-action">(.*?)</div><!--end request-row-->', output_text, re.M | re.S)
+        self.assertIn('href="/test/pull-request/2"', tr_elements[0])
+        self.assertIn('href="/test/pull-request/4"', tr_elements[1])
+        self.assertIn('href="/test/pull-request/1"', tr_elements[2])
 
     @patch('pagure.lib.notify.send_email')
     def test_request_pulls(self, send_email):
@@ -983,15 +976,8 @@ class PagureFlaskForktests(tests.Modeltests):
         self.assertEqual(output.status_code, 200)
         output_text = output.get_data(as_text=True)
         self.assertIn(
-            '<h2 class="p-b-1">\n    0 Pull Requests (of 0)\n  </h2>',
+            '<span class="fa fa-fw fa-arrow-circle-down"></span> 0 Open PRs\n',
             output_text)
-        # Open is primary
-        self.assertIn(
-            '<a class="btn btn-primary btn-sm" '
-            'href="/test/pull-requests">Open</a>', output_text)
-        self.assertIn(
-            '<a class="btn btn-outline-dark btn-sm" '
-            'href="/test/pull-requests?status=0">Closed</a>', output_text)
 
         self.set_up_git_repo(new_project=None, branch_from='feature')
 
@@ -999,44 +985,44 @@ class PagureFlaskForktests(tests.Modeltests):
         self.assertEqual(output.status_code, 200)
         output_text = output.get_data(as_text=True)
         self.assertIn(
-            '<h2 class="p-b-1">\n    1 Pull Requests (of 1)\n  </h2>',
+            '<span class="fa fa-fw fa-arrow-circle-down"></span> 1 Open PRs\n',
             output_text)
-        # Open is primary
-        self.assertIn(
-            '<a class="btn btn-primary btn-sm" '
-            'href="/test/pull-requests">Open</a>', output_text)
-        self.assertIn(
-            '<a class="btn btn-outline-dark btn-sm" '
-            'href="/test/pull-requests?status=0">Closed</a>', output_text)
 
-        output = self.app.get('/test/pull-requests?status=Closed')
+        output = self.app.get('/test/pull-requests?status=1')
         self.assertEqual(output.status_code, 200)
         output_text = output.get_data(as_text=True)
         self.assertIn(
-            '<h2 class="p-b-1">\n    0 Closed Pull Requests (of 0)\n  </h2>',
+            '<span class="fa fa-fw fa-arrow-circle-down"></span> 1 Open PRs\n',
             output_text)
-        # Close is primary
+
+        output = self.app.get('/test/pull-requests?status=true')
+        self.assertEqual(output.status_code, 200)
+        output_text = output.get_data(as_text=True)
         self.assertIn(
-            '<a class="btn btn-secondary btn-sm" '
-            'href="/test/pull-requests">Open</a>', output_text)
+            '<span class="fa fa-fw fa-arrow-circle-down"></span> 1 Open PRs\n',
+            output_text)
+
+        output = self.app.get('/test/pull-requests?status=Merged')
+        self.assertEqual(output.status_code, 200)
+        output_text = output.get_data(as_text=True)
         self.assertIn(
-            '<a class="btn btn-primary btn-sm" '
-            'href="/test/pull-requests?status=0">Closed</a>', output_text)
+            '<span class="fa fa-fw fa-arrow-circle-down"></span> 0 Merged PRs\n',
+            output_text)
 
         output = self.app.get('/test/pull-requests?status=0')
         self.assertEqual(output.status_code, 200)
         output_text = output.get_data(as_text=True)
         self.assertIn(
-            '<h2 class="p-b-1">\n    0 Closed/Merged Pull Requests (of 0)\n  </h2>',
+            '<span class="fa fa-fw fa-arrow-circle-down"></span> 0 Merged PRs\n',
             output_text)
 
-        # Close is primary
-        self.assertIn(
-            '<a class="btn btn-secondary btn-sm" '
-            'href="/test/pull-requests">Open</a>', output_text)
+        output = self.app.get('/test/pull-requests?status=Closed')
+        self.assertEqual(output.status_code, 200)
+        output_text = output.get_data(as_text=True)
         self.assertIn(
-            '<a class="btn btn-primary btn-sm" '
-            'href="/test/pull-requests?status=0">Closed</a>', output_text)
+            '<span class="fa fa-fw fa-arrow-circle-down"></span> 0 Cancelled PRs\n',
+            output_text)
+
 
         # Project w/o pull-request
         repo = pagure.lib.get_authorized_project(self.session, 'test')