Issue dose-amigos#79: Added Swipe functionality and delete calls for …

…Dose Series Added the abilty to swipe over dose series and call delete. This triggers a delete on that dose series, publishes the delete event, which is then subscribed by the main list, causing a reload of the series.
jking31cs · Jul 28, 2016 · 041ae6b · 041ae6b
1 parent 4366eb7
commit 041ae6b
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 4 deletions.
diff --git a/app/dose-series-service/dose-series.service.ts b/app/dose-series-service/dose-series.service.ts
@@ -48,6 +48,23 @@ export class DoseSeriesService {
         );
     }
 
+    /**
+     * Deletes a DoseSeries from the server.
+     * @param id to lookup.
+     * @returns {Promise<DoseSeries>}.
+     */
+    public delete(
+        id: number
+    ): Promise<DoseSeries> {
+        return this.http.delete(
+            `${this.doseSeriesUrl}/${id}`
+        ).toPromise().then(
+            (response) => response.json()
+        ).catch(
+            this.handleError
+        );
+    }
+
     /**
      * Creates a new DoseSeries object.
      * @param doseSeries to save.

diff --git a/app/dose-series-slider/dose-series-slider.component.html b/app/dose-series-slider/dose-series-slider.component.html
@@ -0,0 +1,13 @@
+<ion-item-sliding #slidingItem *ngIf="doseSeries">
+    <ion-item>
+        <h2>{{doseSeries.med.name}}</h2>
+        <p>Take {{doseSeries.med.doseAmount}} {{doseSeries.med.doseUnit}}, {{doseSeries.med.doseInstructions}} </p>
+    </ion-item>
+    <ion-item-options>
+        <button primary (click)="slidingDelete(slidingItem)">
+            <ion-icon name="Delete"></ion-icon>
+            Delete
+        </button>
+    </ion-item-options>
+
+</ion-item-sliding>
diff --git a/app/dose-series-slider/dose-series-slider.component.ts b/app/dose-series-slider/dose-series-slider.component.ts
@@ -0,0 +1,39 @@
+import {Component, Input} from "@angular/core";
+import {DoseSeries} from "../dose-series/dose-series";
+import {ItemSliding} from "ionic-angular/index";
+import {DoseSeriesService} from "../dose-series-service/dose-series.service";
+import {Events} from "ionic-angular/index";
+
+/**
+ * DoseEventSlider for rendering a dose-events.
+ */
+@Component(
+    {
+        selector: "dose-series-slider",
+        templateUrl: "build/dose-series-slider/dose-series-slider.component.html"
+    }
+)
+
+export class DoseSeriesSliderComponent {
+
+    @Input()
+    public doseSeries: DoseSeries;
+
+    constructor(
+        private doseSeriesService: DoseSeriesService,
+        private events: Events
+    ) {
+    }
+
+    slidingDelete(slidingItem: ItemSliding) {
+        this.doseSeriesService.delete(this.doseSeries.id).then(
+            (doseSeries: DoseSeries) => {
+                this.events.publish(
+                    "doseSeries:created",
+                    doseSeries as DoseSeries
+                );
+            }
+        );
+    }
+}
+
diff --git a/app/pages/med-list/med-list.html b/app/pages/med-list/med-list.html
@@ -7,8 +7,8 @@
     <logon-required>
 		<ion-list>
 
-	        <med-list-event *ngFor="let doseSeries of listOfDoseSeries"
-	                  [doseSeries]="doseSeries"></med-list-event>
+	        <dose-series-slider *ngFor="let doseSeries of listOfDoseSeries"
+	                  [doseSeries]="doseSeries"></dose-series-slider>
 
 	    </ion-list>
 	</logon-required>

diff --git a/app/pages/med-list/med-list.ts b/app/pages/med-list/med-list.ts
@@ -1,8 +1,9 @@
 import {Component, OnInit} from "@angular/core";
 import {DoseAmigosToolbar} from "../../dose-amigos-toolbar/dose-amigos-toolbar.component";
-import {MedListComponenet} from "../../med-list-event/med-list-event.component";
+import {DoseSeriesSliderComponent} from "../../dose-series-slider/dose-series-slider.component";
 import {DoseSeries} from "../../dose-series/dose-series";
 import {DoseSeriesService} from "../../dose-series-service/dose-series.service";
+
 import {MedListCreateComponent} from "../../med-list-create-component/med-list-create.component";
 import {Events, NavController} from "ionic-angular/index";
 import {LoadingStatusService} from "../../loading-status-service/loading-status.service";
@@ -13,7 +14,7 @@ import {LoadingStatus} from "../../loading-status/loading-status";
         templateUrl: "build/pages/med-list/med-list.html",
         directives: [
             DoseAmigosToolbar,
-            MedListComponenet,
+            DoseSeriesSliderComponent,
             MedListCreateComponent
         ]
     }
@@ -38,6 +39,13 @@ export class MedListPage implements OnInit {
             }
         );
 
+        events.subscribe(
+            "doseSeries:deleted",
+            () => {
+                this.loadMedicationList();            }
+
+        )
+
     }
 
     public loadMedicationList = (): any => {