add delete functionality for indicators (#498)

hikaya-io · Apr 28, 2020 · 9c71d6f · 9c71d6f
1 parent b1f9c5b
commit 9c71d6f
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 19 deletions.
diff --git a/indicators/urls.py b/indicators/urls.py
@@ -7,7 +7,7 @@
     IndicatorUpdate, IndicatorDelete, PeriodicTargetDeleteView,
     PeriodicTargetView, CollectedDataReportData, CollectedDataCreate, CollectedDataDelete,
     CollectedDataList, CollectedDataUpdate, CollectedDataAdd, CollectedDataEdit,
-    CollectedDataDeleteVue, collecteddata_import, indicator_report,
+    CollectedDataDeleteVue, collecteddata_import, indicator_report, indicator_delete,
     TVAReport, TVAPrint, DisaggregationReport, DisaggregationPrint, IndicatorReport,
     program_indicator_report, indicator_data_report, IndicatorExport, service_json,
     collected_data_json, program_indicators_json, IndicatorReportData, IndicatorDataExport, ObjectiveView, objectives_list, objectives_tree, 
@@ -33,7 +33,7 @@
     path('indicator_update/<int:pk>/',
          IndicatorUpdate.as_view(), name='indicator_update'),
     path('indicator_delete/<int:pk>/',
-         IndicatorDelete.as_view(), name='indicator_delete'),
+         indicator_delete, name='indicator_delete'),
 
     path('periodic_target_delete/<int:pk>/',
          PeriodicTargetDeleteView.as_view(), name='pt_delete'),

diff --git a/indicators/views.py b/indicators/views.py
@@ -674,6 +674,13 @@ def form_valid(self, form):
     form_class = IndicatorForm
 
 
+def indicator_delete(request, pk):
+    indicator = Indicator.objects.get(pk=int(pk))
+    indicator.delete()
+
+    return redirect('/indicators/home/0/0/0/')
+
+
 class PeriodicTargetDeleteView(DeleteView):
     model = PeriodicTarget
 

diff --git a/static/vue.js/collected_data_table.js b/static/vue.js/collected_data_table.js
@@ -81,7 +81,6 @@ $(document).ready(() => {
               this.documentation = ''
               this.disaggregations = {}
               this.show_disaggregations = false
-              console.log(this.collectedData)
 
               if(this.showModal) {
                 let self = this;

diff --git a/static/vue.js/indicators/target_period.js b/static/vue.js/indicators/target_period.js
@@ -42,7 +42,6 @@ new Vue({
 
         this.makeRequest('GET', '/indicators/indicator_data')
             .then(response => {
-                console.log(response)
                 if(response.data){
                     this.level_1_label = response.data.level_1_label
                     this.frequencies = [{"id": "1", "text":`Life of ${this.level_1_label}`},
@@ -319,9 +318,7 @@ new Vue({
             this.modalHeader = "Add Target Periods"
 
             this.target_period_data.forEach(target =>{
-                console.log(target)
                 if(target.indicator.id == this.indicator_id){
-                    console.log("gere")
                     this.isEdit = true
                     this.overall_target = target.indicator.lop_target
                     this.sum = target.indicator.lop_target
@@ -410,7 +407,6 @@ new Vue({
 
             const id = this.indicator_id
             this.targets = this.targets.map(function (obj) {
-                console.log(obj)
                 obj['indicator_id'] = obj['id'];
                 obj['start_date'] = moment(obj['start_date']).format("YYYY-MM-DD")
                 obj['end_date'] = moment(obj['end_date']).format("YYYY-MM-DD")
@@ -426,7 +422,6 @@ new Vue({
                 periodic_targets: this.targets
             }
 
-            console.log(data)
             try {
                 const response = await this.makeRequest(
                     'POST',

diff --git a/templates/indicators/indicator_confirm_delete.html b/templates/indicators/indicator_confirm_delete.html
@@ -1,12 +1,68 @@
-{% extends "base.html" %}
-{% block page_title %}Indicator Confirm Delete{% endblock %}
+<div
+	class="modal fade"
+	id="deleteIndicatorModal{{indicator.id}}"
+	tabindex="-1"
+	role="dialog"
+	aria-labelledby="deleteItemModalLabel"
+>
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true">&times;</span>
+				</button>
+				<h4 class="modal-title" id="deleteIndicatorLabel">Confirm Delete</h4>
+			</div>
+			<div class="modal-body">
+				<p>
+					Are you sure you want to delete "<strong>{{ indicator.name }}"</strong>?
+				</p>
+				<div class="text-right">
+					<button 
+						type="submit"
+						class="btn btn-close" 
+						onclick="deleteCancel()">
+						Cancel
+					</button>
+					<button
+						type="submit"
+						class="btn btn-danger"
+						onclick="deleteItem()"
+						id="deleteItem{{ indicator.id }}"
+					>
+						Delete
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
 
-{% block content %}
+<script>
+	var itemId;
+	var activeButton;
+	/**
+	 * Set the Item to delete
+	 **/
+	function setItemToDelete(id) {
+		itemId = id;
+	}
 
-<form action="" method="post">{% csrf_token %}
-    <p>Are you sure you want to delete?</p>
-    <input type="submit" value="Confirm" />
-</form>
+	/**
+	 * Redirect to the page to delete the item
+	 **/
+	function deleteItem() {
+		toastr.success('You have successfully delete the indicator');
+		setTimeout(() => {
+			window.location.href = `/indicators/indicator_delete/${itemId}/`;
+		}, 2000);
+	}
 
-
-{% endblock content %}
+	/**
+	 * reload the page to close the modal
+	 **/
+	function deleteCancel() {
+		window.location.reload();
+	}
+	$(document).ready(() => {});
+</script>
diff --git a/templates/indicators/indicator_list.html b/templates/indicators/indicator_list.html
@@ -98,7 +98,7 @@ <h4 class="page-title">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
             </button>
-            <ul class="dropdown-menu nav">
+            <ul class="dropdown-menu">
               <li class="dropdown-header">Related</li>
               <!-- <li><a href="">Results</a></li> -->
               <li><a @click="toggleTargetModal({{indicator.id}})" >Target Periods</a></li>
@@ -110,10 +110,17 @@ <h4 class="page-title">
               <li role="separator" class="divider"></li>
 
               <li><a class="" href="{% url 'indicator_update' indicator.id %}">Edit</a></li>
-              <li><a class="text-danger" href="">Delete</a></li>
+              <li>
+                <a class="text-danger"
+                  href="#deleteIndicatorModal{{ indicator.id }}"
+                  data-toggle="modal"
+                  onclick="setItemToDelete({{ indicator.id }})"
+                  data-target="#deleteIndicatorModal{{ indicator.id }}">
+                  Delete</a></li>
             </ul>
           </div>
         </td>
+        {% include './indicator_confirm_delete.html' %}
       </tr>
       {% endfor %}
     </tbody>