Updated show details logic for #111

Author: dalezak

src/pages/base-page/base-page.ts

@@ -24,6 +24,11 @@ import { Person } from '../../models/person';
 })
 export class BasePage {
 
+  protected WIDTH_SMALL:number = 540;
+  protected WIDTH_MEDIUM:number = 720;
+  protected WIDTH_LARGE:number = 960;
+  protected WIDTH_EXTRA_LARGE:number = 1140;
+
   protected offline:boolean = false;
   protected tablet:boolean = false;
   protected mobile:boolean = false;

src/pages/checkin-details/checkin-details.html

@@ -1,10 +1,10 @@
 <ion-header>
   <ion-navbar color="navbar">
-    <button ion-button icon-only menuToggle color="primary">
-      <ion-icon name="menu"></ion-icon>
-    </button>
+    <ion-buttons left *ngIf="modal == true">
+      <button ion-button color="primary" (click)="closeModal($event)">Close</button>
+    </ion-buttons>
     <ion-title></ion-title>
-    <ion-buttons right *ngIf="person">
+    <ion-buttons right *ngIf="person && mobile">
       <button #create ion-button icon-only color="primary" *ngIf="person.isOwner() || person.isAdmin() || person.isAuthor() || person.isViewer()" (click)="shareCheckin($event)">
         <ion-icon ios="ios-share-outline" md="md-share"></ion-icon>
       </button>

src/pages/checkin-details/checkin-details.ts

@@ -36,6 +36,8 @@ export class CheckinDetailsPage extends BasePage {
 
   person:Person = null;
 
+  modal:boolean = false;
+
   loading:boolean = false;
 
   constructor(
@@ -60,6 +62,7 @@ export class CheckinDetailsPage extends BasePage {
     this.organization = this.getParameter<Organization>("organization");
     this.checkin = this.getParameter<Checkin>("checkin");
     this.person = this.getParameter<Person>("person");
+    this.modal = this.getParameter<boolean>("modal");
     this.loadUpdates(true);
   }
 
@@ -193,6 +196,10 @@ export class CheckinDetailsPage extends BasePage {
     });
   }
 
+  private closeModal(event:any) {
+    this.hideModal({});
+  }
+
   private shareCheckin(event:any) {
     let subject = this.checkin.message;
     let message = [];

src/pages/checkin-list/checkin-list.ts

@@ -28,8 +28,6 @@ import { Notification } from '../../models/notification';
 })
 export class CheckinListPage extends BasePage {
 
-  LARGE_WIDTH:number = 992;
-
   filter:string = "all";
   organization:Organization = null;
   checkins:Checkin[] = [];
@@ -418,12 +416,23 @@ export class CheckinListPage extends BasePage {
   }
 
   private showCheckinDetails(checkin:Checkin, event:any=null) {
-    this.showPage(CheckinDetailsPage, {
-      organization: this.organization,
-      person: this.person,
-      checkin: checkin,
-      checkin_id: checkin.id
-    });
+    if (this.platform.width() > this.WIDTH_LARGE) {
+      this.showModal(CheckinDetailsPage, {
+        organization: this.organization,
+        person: this.person,
+        checkin: checkin,
+        checkin_id: checkin.id,
+        modal: true
+      });
+    }
+    else {
+      this.showPage(CheckinDetailsPage, {
+        organization: this.organization,
+        person: this.person,
+        checkin: checkin,
+        checkin_id: checkin.id
+      });
+    }
   }
 
   private sendReply(checkin:Checkin, event:any=null) {

src/pages/group-details/group-details.html

@@ -1,5 +1,10 @@
 <ion-header>
   <ion-navbar color="navbar">
+    <ion-buttons left *ngIf="modal == true">
+      <button ion-button color="primary" (click)="hideModal($event)">
+        Cancel
+      </button>
+    </ion-buttons>
     <ion-title></ion-title>
     <ion-buttons right *ngIf="person">
       <button ion-button icon-only color="primary" *ngIf="person.isOwner() || person.isAdmin()" (click)="editGroup($event)">Edit</button>

src/pages/group-details/group-details.ts

@@ -28,6 +28,7 @@ export class GroupDetailsPage extends BasePage {
   group:Group = null;
   person:Person = null;
   loading:boolean = false;
+  modal:boolean = false;
 
   constructor(
       protected zone:NgZone,
@@ -50,6 +51,7 @@ export class GroupDetailsPage extends BasePage {
     this.organization = this.getParameter<Organization>("organization");
     this.person = this.getParameter<Person>("person");
     this.group = this.getParameter<Group>("group");
+    this.modal = this.getParameter<boolean>("modal");
     let loading = this.showLoading("Loading...");
     this.loadGroup(true).then(loaded => {
       loading.dismiss();

src/pages/group-list/group-list.ts

@@ -238,12 +238,23 @@ export class GroupListPage extends BasePage {
 
   private showGroup(group:Group) {
     this.logger.info(this, "showGroup", group);
-    this.showPage(GroupDetailsPage, {
-      organization: this.organization,
-      person: this.person,
-      group: group,
-      group_id: group.id
-    });
+    if (this.platform.width() > this.WIDTH_LARGE) {
+      this.showModal(GroupDetailsPage, {
+        organization: this.organization,
+        person: this.person,
+        group: group,
+        group_id: group.id,
+        modal:true
+      });
+    }
+    else {
+      this.showPage(GroupDetailsPage, {
+        organization: this.organization,
+        person: this.person,
+        group: group,
+        group_id: group.id
+      });
+    }
   }
 
 }

src/pages/person-details/person-details.html

@@ -1,9 +1,12 @@
 <ion-header>
   <ion-navbar color="navbar">
-    <ion-buttons left *ngIf="title">
-      <button ion-button icon-only menuToggle color="primary">
+    <ion-buttons left>
+      <button ion-button icon-only menuToggle *ngIf="title" color="primary">
         <ion-icon name="menu"></ion-icon>
       </button>
+      <button ion-button color="primary" *ngIf="modal == true" (click)="hideModal($event)">
+        Cancel
+      </button>
     </ion-buttons>
     <ion-title>{{title}}</ion-title>
     <ion-buttons right *ngIf="user && person">

src/pages/person-details/person-details.ts

@@ -33,6 +33,7 @@ export class PersonDetailsPage extends BasePage {
   checkins:Checkin[] = [];
   limit:number = 3;
   offset:number = 0;
+  modal:boolean = false;
 
   constructor(
       protected zone:NgZone,
@@ -57,6 +58,7 @@ export class PersonDetailsPage extends BasePage {
     this.person = this.getParameter<Person>("person");
     this.user = this.getParameter<Person>("user");
     this.title = this.getParameter<string>("title");
+    this.modal = this.getParameter<boolean>("modal");
     let loading = this.showLoading("Loading...");
     this.loadUpdates(true).then((loaded:any) => {
       loading.dismiss();

src/pages/person-list/person-list.ts

@@ -290,12 +290,23 @@ export class PersonListPage extends BasePage {
 
   private showPerson(person:Person, event:any=null) {
     this.logger.info(this, "showPerson");
-    this.showPage(PersonDetailsPage, {
-      organization: this.organization,
-      person: person,
-      user: this.person,
-      person_id: person.id
-    });
+    if (this.platform.width() > this.WIDTH_LARGE) {
+      this.showModal(PersonDetailsPage, {
+        organization: this.organization,
+        person: person,
+        user: this.person,
+        person_id: person.id,
+        modal: true
+      });
+    }
+    else {
+      this.showPage(PersonDetailsPage, {
+        organization: this.organization,
+        person: person,
+        user: this.person,
+        person_id: person.id
+      });
+    }
   }
 
   private removePerson(person:Person) {