Change templates, views, forms, models

- Allow to test, download and delete single question
- Fix pagination for searching and filtering questions

3 files changed, 147 insertions, 193 deletions

diff --git a/yaksh/templates/yaksh/ajax_question_filter.html b/yaksh/templates/yaksh/ajax_question_filter.html
deleted file mode 100644
index 18f14ff..0000000
--- a/yaksh/templates/yaksh/ajax_question_filter.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<div id="questions">
-    <script>
-    $(document).ready(function(){
-    $("#checkall").change(function(){
-            if($(this).prop("checked")) {
-                    $("#filtered-questions input:checkbox").each(function(index, element) {
-                    $(this).prop('checked', true);
-                    });
-            }
-            else {
-                    $("#filtered-questions input:checkbox").each(function(index, element) {
-                    $(this).prop('checked', false);
-                    });
-            }
-        });
-    });
-    </script>
-    <br>
-    <a class="btn btn-lg btn-success" href="{% url 'yaksh:add_question' %}">
-        <i class="fa fa-plus-circle"></i>&nbsp;Add Question
-    </a>
-    <br><br>
-    {% if questions %}
-    {% include "yaksh/paginator.html" %}
-
-        <h5 class="highlight"><input type="checkbox" id="checkall">
-            Select All
-        </h5>
-        <ul class="inputs-list">
-            <table id="questions-table" class="tablesorter table table table-striped">
-            <thead>
-            <tr>
-            <th> Select </th>
-            <th> Summary </th>
-            <th> Language </th>
-            <th> Type </th>
-            <th> Marks </th>
-            </tr>
-            </thead>
-            <tbody>
-           {% for question in questions %}
-                <tr>
-                <td>
-                <input type="checkbox" name="question" value="{{ question.id }}">
-                </td>
-                <td><a href="{% url 'yaksh:add_question' question.id %}">{{question.summary|capfirst}}</a></td>
-                <td>{{question.language|capfirst}}</td>
-                <td>{{question.type|capfirst}}</td>
-                <td>{{question.points}}</td>
-                </tr>
-            {% endfor %}
-            </tbody>
-            </table>
-        </ul>
-    {% include "yaksh/paginator.html" %}
-    {% endif %}
-</div>
diff --git a/yaksh/templates/yaksh/paginator.html b/yaksh/templates/yaksh/paginator.html
index 5f0df7a..c634d5c 100644
--- a/yaksh/templates/yaksh/paginator.html
+++ b/yaksh/templates/yaksh/paginator.html
@@ -1,7 +1,7 @@
 <ul class="pagination pagination">
     {% if objects.has_previous %}
     <li class="page-item">
-        <a class="page-link" href="?page=1" aria-label="Previous">
+        <a class="page-link" href="?page=1{% if request.GET.question_type %}&question_type={{ request.GET.question_type }}{% endif %}{% if request.GET.language %}&language={{ request.GET.language }}{% endif %}{% if request.GET.marks %}&marks={{ request.GET.marks }}{% endif %}{% if request.GET.question_tags %}&question_tags={{ request.GET.question_tags }}{% endif %}" aria-label="Previous">
             <span aria-hidden="true">
                 <i class="fa fa-angle-double-left"></i>
             </span>
@@ -16,13 +16,13 @@
                 <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
             </li>
         {% elif n > objects.number|add:'-5' and n < objects.number|add:'5' %}
-            <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
+            <li class="page-item"><a class="page-link" href="?page={{ n }}{% if request.GET.question_type %}&question_type={{ request.GET.question_type }}{% endif %}{% if request.GET.language %}&language={{ request.GET.language }}{% endif %}{% if request.GET.marks %}&marks={{ request.GET.marks }}{% endif %}{% if request.GET.question_tags %}&question_tags={{ request.GET.question_tags }}{% endif %}">{{ n }}</a></li>
         {% endif %}
     {% endfor %}
 
     {% if objects.has_next %}
         <li class="page-item">
-            <a class="page-link" href="?page={{ objects.paginator.num_pages }}" aria-label="Next">
+            <a class="page-link" href="?page={{ objects.paginator.num_pages }}{% if request.GET.question_type %}&question_type={{ request.GET.question_type }}{% endif %}{% if request.GET.language %}&language={{ request.GET.language }}{% endif %}{% if request.GET.marks %}&marks={{ request.GET.marks }}{% endif %}{% if request.GET.question_tags %}&question_tags={{ request.GET.question_tags }}{% endif %}" aria-label="Next">
                 <span aria-hidden="true">
                     <i class="fa fa-angle-double-right"></i>
                 </span>
diff --git a/yaksh/templates/yaksh/showquestions.html b/yaksh/templates/yaksh/showquestions.html
index e0cd529..6f05a0b 100644
--- a/yaksh/templates/yaksh/showquestions.html
+++ b/yaksh/templates/yaksh/showquestions.html
@@ -7,154 +7,153 @@
 
 {% block script %}
 <script type="text/javascript" src="{% static 'yaksh/js/show_question.js' %}"></script>
-<script type="text/javascript" src="{% static 'yaksh/js/question_filter.js' %}"></script>
 <script type="text/javascript" src="{% static 'yaksh/js/jquery.tablesorter.min.js' %}"></script>
 {% endblock %}
 
 {% block content %}
-<div class="container">
-  <!-- Side bar -->
-  <div class="nav nav-pills" role="tablist" aria-orientation="vertical">
-    <a href="#show" id="showbar" class="nav-link active"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true"> Show all Questions</a>
-    <a href="#updown" id="updownbar" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false" > Upload Questions</a>
-  </div>
-  <!-- End of side bar -->
-  <div class="tab-content">
+  <div class="container-fluid">
+    <div class="nav nav-pills" role="tablist" aria-orientation="vertical">
+      <a href="#show" id="showbar" class="nav-link active"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true"> Show all Questions</a>
+      <a href="#updown" id="updownbar" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false" > Upload Questions</a>
+    </div>
     <br>
-    <!-- Upload Questions -->
-    <div id="updown" class="card tab-pane fade" role="tabpanel" aria-labelledby="updownbar">
-      <div class="col" role="alert">
-        <p>You can upload question files the following ways -
-          <li><b><u>Yaml File</u></b>
-            <p>One can upload Yaml file with extensions .yaml or .yml. Please note
-              that you cannot upload files associated to a question. Yaml file can
-              have any name.
-            </p>
-          </li>
-          <li><b><u>Zip File</u></b>
-           <p> One can also upload zip with the following zip structure - </p>
-            <pre>
-              .zip
-              |-- .yaml or .yml
-              |-- .yaml or .yml
-              |-- folder1
-              |   |-- Files required by questions
-              |-- folder2
-              |   |-- Files required by questions
-            </pre>
-          </li>
-        </p>
-      </div>
-      <div class="card-body">
-        <form action="" method="post"  enctype="multipart/form-data">
-          {% csrf_token %}
-            <div class="form-group col-md-6">
-                <a class="btn btn-info" href="{% url 'yaksh:download_yaml_template' %}">
-                  <i class="fa fa-download"></i>&nbsp;Download Template</a>
-                <br><br>
-                <h4> Or </h4>
-                <br>
-                <div class="input-group mb-3">
-                    <div class="custom-file">
-                        {{ upload_form }}
-                        <label class="custom-file-label" for="id_file">
-                            Choose file
-                        </label>
-                    </div>
-                    <div class="input-group-append">
-                      <button class="btn btn-outline-primary" type="submit" name="upload" value="upload"><i class="fa fa-upload"></i>&nbsp;Upload File</button>
-                    </div>
-                </div>
-            </div>
-            <script>
-                $('#id_file').on('change',function(){
-                    //get the file name
-                    var fileName = $(this).val();
-                    //replace the "Choose a file" label
-                    $(this).next('.custom-file-label').html(fileName);
-                })
-            </script>
-        </form>
+    <div class="tab-content">
+      <!-- Upload Questions -->
+      <div id="updown" class="card tab-pane fade" role="tabpanel" aria-labelledby="updownbar">
+        <div class="col" role="alert">
+          <p>You can upload question files the following ways -
+            <li><b><u>Yaml File</u></b>
+              <p>One can upload Yaml file with extensions .yaml or .yml. Please note
+                that you cannot upload files associated to a question. Yaml file can
+                have any name.
+              </p>
+            </li>
+            <li><b><u>Zip File</u></b>
+             <p> One can also upload zip with the following zip structure - </p>
+              <pre>
+                .zip
+                |-- .yaml or .yml
+                |-- .yaml or .yml
+                |-- folder1
+                |   |-- Files required by questions
+                |-- folder2
+                |   |-- Files required by questions
+              </pre>
+            </li>
+          </p>
+        </div>
+        <div class="card-body">
+          <form action="" method="post"  enctype="multipart/form-data">
+            {% csrf_token %}
+              <div class="form-group col-md-6">
+                  <a class="btn btn-info" href="{% url 'yaksh:download_yaml_template' %}">
+                    <i class="fa fa-download"></i>&nbsp;Download Template</a>
+                  <br><br>
+                  <h4> Or </h4>
+                  <br>
+                  <div class="input-group mb-3">
+                      <div class="custom-file">
+                          {{ upload_form }}
+                          <label class="custom-file-label" for="id_file">
+                              Choose file
+                          </label>
+                      </div>
+                      <div class="input-group-append">
+                        <button class="btn btn-outline-primary" type="submit" name="upload" value="upload"><i class="fa fa-upload"></i>&nbsp;Upload File</button>
+                      </div>
+                  </div>
+              </div>
+              <script>
+                  $('#id_file').on('change',function(){
+                      //get the file name
+                      var fileName = $(this).val();
+                      //replace the "Choose a file" label
+                      $(this).next('.custom-file-label').html(fileName);
+                  })
+              </script>
+          </form>
+        </div>
       </div>
-    </div>
-    <!-- End of upload questions -->
+      <!-- End of upload questions -->
 
-    <!-- Show questions -->
-    <div id="show" class="tab-pane fade show active" role="tabpanel" aria-labelledby="showbar">
-    {% if messages %}
-        {% for message in messages %}
-        <div class="alert alert-dismissible alert-info">
-            <button type="button" class="close" data-dismiss="alert">
-                <i class="fa fa-close"></i>
-            </button>
-            <strong>{{ message }}</strong>
-        </div>
-        {% endfor %}
-    {% endif %}
-    <form name=frm action="" method="post">
+      <div id="show" class="tab-pane fade show active" role="tabpanel" aria-labelledby="showbar">
+        {% if messages %}
+          {% for message in messages %}
+          <div class="alert alert-dismissible alert-info">
+              <button type="button" class="close" data-dismiss="alert">
+                  <i class="fa fa-close"></i>
+              </button>
+              <strong>{{ message }}</strong>
+          </div>
+          {% endfor %}
+        {% endif %}
         <div class="card">
           <div class="card-body">
-            <!-- Filtering Questions  -->
-            <div id="selectors">
-              <h4>Filters Questions: </h4>
-              <div class="dropdown">
-                    <div class="col-md-4">
-                    {{ form.question_type }}
-                    </div>
-                    <div class="col-md-4">
-                    {{ form.language }}
-                    </div>
-                    <div class="col-md-4">
-                    {{ form.marks }}
-                    </div>
+            <!-- Filter Questions -->
+            <h4>Filters Questions: </h4>
+            <form method="GET" action="{% url 'yaksh:questions_filter' %}">
+
+              <div class="row">
+                  <div class="col-md-4">{{ form.question_type }}</div>
+                  <div class="col-md-4">{{ form.language }}</div>
+                  <div class="col-md-4">{{ form.marks }}</div>
+                  <br><br>
+                  <div class="col">
+                    <button class="btn btn-outline-success">
+                      <i class="fa fa-filter"></i>&nbsp;Filter
+                    </button>
+                  </div>
               </div>
-            </div>
+            </form>
+            <!-- End Filter Questions -->
             <hr>
-            <h4 >Or Search using Tags: </h4>
-            <!-- Searching Tags -->
-            {% csrf_token %}
-            <div class="col-md-14">
-              <div class="input-group">
-                <div class="col-md-6">
+            <!-- Search by Tags -->
+            <h4 >Search using Tags: </h4>
+            <div class="row">
+              <div class="col">
+                <form method="GET" action="{% url 'yaksh:search_questions_by_tags' %}">
                   <div class="input-group">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text" id="basic-addon1">Search Questions</span>
-                    </div>
-                    <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search using comma separated Tags">
+                    <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search questions using comma separated Tags">
                     <span class="input-group-append">
-                      <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-search"></i></button>
+                      <button class="btn btn-outline-success" type="submit">
+                        <i class="fa fa-search"></i>&nbsp;Search
+                      </button>
                     </span>
                   </div>
-                </div>
-                <div class="col-md-6">
-                  <select class="form-control" id="sel1" onchange="append_tag(this);">
-                    {% if all_tags %}
-                     <option value="" disabled selected>Available Tags</option>
-                    {% for tag in all_tags %}
-                    <option>
-                        {{tag}}
-                    </option>
-                    {% endfor %}
-                    {% else %}
-                     <option value="" disabled selected>No Available Tags</option>
-                    {% endif %}
-                  </select>
-                </div>
-                <br><br>
-                <div class="col-md-6">
-                  <a class="btn btn-primary" href="{% url 'yaksh:show_questions' %}">
-                    Clear Filters
-                  </a>
-                </div>
+                </form>
+              </div>
+              <div class="col">
+                <select class="form-control" id="sel1" onchange="append_tag(this);">
+                  {% if all_tags %}
+                   <option value="" disabled selected>Available Tags</option>
+                  {% for tag in all_tags %}
+                  <option>
+                      {{tag}}
+                  </option>
+                  {% endfor %}
+                  {% else %}
+                   <option value="" disabled selected>No Available Tags</option>
+                  {% endif %}
+                </select>
               </div>
             </div>
+            <br>
+            <!-- End Search by Tags -->
+            <a class="btn btn-outline-danger" href="{% url 'yaksh:show_questions' %}">
+              <i class="fa fa-times"></i>&nbsp;Clear
+            </a>
           </div>
+          <!-- End Card body -->
         </div>
+        <!-- End card filters and search -->
+      </div>
+      <form name=frm action="{% url 'yaksh:show_questions' %}" method="post">
+        {% csrf_token %}
         <div id="filtered-questions">
           <br>
           <a class="btn btn-lg btn-success" href="{% url 'yaksh:add_question' %}">
             <i class="fa fa-plus-circle"></i>&nbsp;Add Question</a>
-          {% if questions %}
+          {% if objects %}
             <div>
               <br>
               {% include "yaksh/paginator.html" %}
@@ -163,24 +162,38 @@
                <div class="table-wrapper-2">
                   <table id="questions-table" class="tablesorter table  table-striped table-responsive-sm">
                     <thead>
-                      <tr class="yakshred">
+                      <tr>
                         <th> Select </th>
+                        <th> Sr No. </th>
                         <th> Summary&nbsp;<i class="fa fa-sort"></i> </th>
                         <th> Language&nbsp;<i class="fa fa-sort"></i> </th>
                         <th> Type&nbsp;<i class="fa fa-sort"></i> </th>
                         <th> Marks&nbsp;<i class="fa fa-sort"></i> </th>
+                        <th>Test</th>
+                        <th>Download</th>
+                        <th>Delete</th>
                       </tr>
                     </thead>
                     <tbody>
-                      {% for question in questions %}
+                      {% for question in objects %}
                       <tr>
                         <td>
                          <input type="checkbox" name="question" value="{{ question.id }}">
                         </td>
+                        <td>{{forloop.counter}}</td>
                         <td><a href="{% url 'yaksh:add_question' question.id %}">{{question.summary|capfirst}}</a></td>
                         <td>{{question.language|capfirst}}</td>
                         <td>{{question.type|capfirst}}</td>
                         <td>{{question.points}}</td>
+                        <td>
+                          <a href="{% url 'yaksh:test_question' question.id %}" class="btn btn-info">
+                            Test
+                          </a>
+                        </td>
+                        <td><a href="{% url 'yaksh:download_question' question.id %}" class="btn btn-primary">
+                          <i class="fa fa-download"></i>&nbsp;Download</a></td>
+                        <td><a href="{% url 'yaksh:delete_question' question.id %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete {{question.summary|capfirst}}?')">
+                        <i class="fa fa-trash"></i>&nbsp;Delete</a></td>
                       </tr>
                       {% endfor %}
                     </tbody>
@@ -191,23 +204,21 @@
           {% else %}
             <br><br>
             <div class="alert alert-info">
-              <center><h3>No Questions created</h3></center>
+              <center><h3>No Questions found</h3></center>
             </div>
           {% endif %}
         </div>
         <br>
         <center>
-          {% if questions %}
+          {% if objects %}
             <button class="btn btn-lg btn-primary" type="submit" name='download' value='download'><i class="fa fa-download"></i>&nbsp;Download Selected</button>
             <button class="btn btn-lg btn-primary" type="submit" name="test" value="test">Test Selected</button>
             <button class="btn btn-lg btn-danger" type="submit" onClick="return confirm_delete(frm);" name='delete' value='delete'>
             <i class="fa fa-trash"></i>&nbsp;Delete Selected</button>
           {% endif %}
         </center>
-    </form>
-    </div>
-    <!-- End of Show questions -->
+      </form>
     </div>
-</div>
+  </div>
 {% endblock %}