Added group and person component for #111

src/app/app.module.ts

@@ -94,6 +94,8 @@ import { SendViaModule } from '../components/send-via/send-via.module';
 import { ColorPickerModule } from '../components/color-picker/color-picker.module';
 import { PersonAvatarModule } from '../components/person-avatar/person-avatar.module';
 import { CheckinCardModule } from '../components/checkin-card/checkin-card.module';
+import { PersonRowModule } from '../components/person-row/person-row.module';
+import { GroupRowModule } from '../components/group-row/group-row.module';
 
 import { LoggerProvider } from '../providers/logger/logger';
 import { ApiProvider } from '../providers/api/api';
@@ -116,6 +118,8 @@ import { CameraProvider } from '../providers/camera/camera';
     ColorPickerModule,
     SendViaModule,
     CheckinCardModule,
+    PersonRowModule,
+    GroupRowModule,
     GroupListModule,
     GroupEditModule,
     GroupDetailsModule,

src/components/group-row/group-row.html

@@ -0,0 +1,12 @@
+<ion-item-sliding color="white">
+  <ion-item color="white" detail-push tappable (click)="onRowSelected($event)">
+    <ion-icon item-left class="group-icon" ios="ios-people" md="md-people"></ion-icon>
+    <h2>{{group.name}}</h2>
+    <p>{{group.member_count || 0}} people</p>
+  </ion-item>
+  <ion-item-options side="right" *ngIf="user && user.isOwnerOrAdmin()">
+    <button ion-button color="danger" (click)="onRemoveSelected()">
+      <ion-icon name="trash"></ion-icon> Remove
+    </button>
+  </ion-item-options>
+</ion-item-sliding>

src/components/group-row/group-row.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+
+import { GroupRowComponent } from './group-row';
+
+@NgModule({
+  declarations: [
+    GroupRowComponent,
+  ],
+  imports: [
+    IonicPageModule.forChild(GroupRowComponent),
+  ],
+  exports: [
+    GroupRowComponent
+  ]
+})
+export class GroupRowModule {}

src/components/group-row/group-row.scss

@@ -0,0 +1,3 @@
+group-row {
+
+}

src/components/group-row/group-row.ts

@@ -0,0 +1,47 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+import { Group } from '../../models/group';
+import { Person } from '../../models/person';
+
+@Component({
+  selector: 'group-row',
+  templateUrl: 'group-row.html'
+})
+export class GroupRowComponent {
+
+  @Input()
+  group:Group;
+
+  @Input()
+  user:Person;
+
+  @Input()
+  selected:boolean = false;
+
+  @Output()
+  rowSelected = new EventEmitter();
+
+  @Output()
+  removeSelected = new EventEmitter();
+
+  hasRowSelected:boolean = false;
+
+  hasRemoveSelected:boolean = false;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    this.hasRowSelected = this.rowSelected && this.rowSelected.observers.length > 0;
+    this.hasRemoveSelected = this.removeSelected && this.removeSelected.observers.length > 0;
+  }
+
+  onRowSelected(event:any) {
+    this.rowSelected.emit();
+  }
+
+  onRemoveSelected(event:any) {
+    this.removeSelected.emit();
+  }
+
+}

src/components/person-row/person-row.html

@@ -0,0 +1,11 @@
+<ion-item-sliding color="white">
+  <ion-item color="white" detail-push tappable (click)="onRowSelected($event)">
+    <person-avatar item-left [initials]="person.initials" [image]="person.profile_picture" [large]="false"></person-avatar>
+    <h2>{{person.name}}</h2>
+  </ion-item>
+  <ion-item-options side="right" *ngIf="user && user.isOwnerOrAdmin()">
+    <button ion-button color="danger" (click)="onRemoveSelected()">
+      <ion-icon name="trash"></ion-icon> Remove
+    </button>
+  </ion-item-options>
+</ion-item-sliding>

src/components/person-row/person-row.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+
+import { PersonRowComponent } from './person-row';
+
+import { PersonAvatarModule } from '../../components/person-avatar/person-avatar.module';
+
+@NgModule({
+  declarations: [
+    PersonRowComponent,
+  ],
+  imports: [
+    PersonAvatarModule,
+    IonicPageModule.forChild(PersonRowComponent),
+  ],
+  exports: [
+    PersonRowComponent
+  ]
+})
+export class PersonRowModule {}

src/components/person-row/person-row.scss

@@ -0,0 +1,3 @@
+person-row {
+
+}

src/components/person-row/person-row.ts

@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+import { Person } from '../../models/person';
+
+@Component({
+  selector: 'person-row',
+  templateUrl: 'person-row.html'
+})
+export class PersonRowComponent {
+
+  @Input()
+  person:Person;
+
+  @Input()
+  user:Person;
+
+  @Input()
+  selected:boolean = false;
+
+  @Output()
+  rowSelected = new EventEmitter();
+
+  @Output()
+  removeSelected = new EventEmitter();
+
+  hasRowSelected:boolean = false;
+
+  hasRemoveSelected:boolean = false;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    this.hasRowSelected = this.rowSelected && this.rowSelected.observers.length > 0;
+    this.hasRemoveSelected = this.removeSelected && this.removeSelected.observers.length > 0;
+  }
+
+  onRowSelected(event:any) {
+    this.rowSelected.emit();
+  }
+
+  onRemoveSelected(event:any) {
+    this.removeSelected.emit();
+  }
+
+}

src/models/person.ts

@@ -35,6 +35,7 @@ export class Person extends Model {
         for (let _checkin of data.checkins) {
           console.log(`Checkin ${JSON.stringify(_checkin)}`);
           let checkin = new Checkin(_checkin);
+          //TODO verify this is correct logic to re-use person attributes
           checkin.user_id = this.id;
           checkin.user_name = this.name;
           checkin.user_initials = this.initials;

src/pages/group-list/group-list.html

@@ -23,11 +23,9 @@
       <h2 text-center padding-top margin-top>There currently are no Groups...</h2>
     </ion-item>
     <ion-list *ngIf="organization && organization.groups">
-      <ion-item color="white" detail-push tappable (click)="showGroup(group)" *ngFor="let group of organization.groups">
-        <ion-icon item-left class="group-icon" ios="ios-people" md="md-people"></ion-icon>
-        <h2>{{group.name}}</h2>
-        <p>{{group.member_count || 0}} people</p>
-      </ion-item>
+      <group-row [group]="group" [user]=person [selected]="selected == person"
+                 (rowSelected)="showGroup(group)"  (removeSelected)="removeGroup(group)"
+                 *ngFor="let group of organization.groups"></group-row>
     </ion-list>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="loadMore($event)">

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

@@ -5,6 +5,7 @@ import { GroupListPage } from './group-list';
 
 import { GroupEditModule } from '../../pages/group-edit/group-edit.module';
 import { GroupDetailsModule } from '../../pages/group-details/group-details.module';
+import { GroupRowModule } from '../../components/group-row/group-row.module';
 
 @NgModule({
   declarations: [
@@ -13,6 +14,7 @@ import { GroupDetailsModule } from '../../pages/group-details/group-details.modu
   imports: [
     GroupEditModule,
     GroupDetailsModule,
+    GroupRowModule,
     IonicPageModule.forChild(GroupListPage),
   ],
   exports: [

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

@@ -205,6 +205,37 @@ export class GroupListPage extends BasePage {
     });
   }
 
+  private removeGroup(group:Group) {
+    this.logger.info(this, "removeGroup", group);
+    let loading = this.showLoading("Removing...");
+    this.api.deleteGroup(this.organization, group).then((deleted:any) => {
+      if (this.mobile) {
+        this.database.removeGroup(this.organization, group).then((removed:any) => {
+          let index = this.organization.groups.indexOf(group);
+          if (index > -1) {
+            this.organization.groups.splice(index, 1);
+          }
+          loading.dismiss();
+        },
+        (error:any) => {
+          loading.dismiss();
+          this.showAlert("Problem Removing Group", error);
+        });
+      }
+      else {
+        let index = this.organization.groups.indexOf(group);
+        if (index > -1) {
+          this.organization.groups.splice(index, 1);
+        }
+        loading.dismiss();
+      }
+    },
+    (error:any) => {
+      loading.dismiss();
+      this.showAlert("Problem Removing Group", error);
+    });
+  }
+
   private showGroup(group:Group) {
     this.logger.info(this, "showGroup", group);
     this.showPage(GroupDetailsPage, {

src/pages/person-edit/person-edit.module.ts

@@ -5,13 +5,15 @@ import { PersonEditPage } from './person-edit';
 
 import { DateTimeModule } from '../../pipes/date-time/date-time.module';
 import { PersonAvatarModule } from '../../components/person-avatar/person-avatar.module';
+import { PersonRowModule } from '../../components/person-row/person-row.module';
 
 @NgModule({
   declarations: [
     PersonEditPage,
   ],
   imports: [
     DateTimeModule,
+    PersonRowModule,
     PersonAvatarModule,
     IonicPageModule.forChild(PersonEditPage),
   ],

src/pages/person-list/person-list.html

@@ -19,17 +19,9 @@
     <ion-spinner name="ios"></ion-spinner>
   </div>
   <ion-list *ngIf="organization && organization.people">
-    <ion-item-sliding color="white" *ngFor="let _person of organization.people">
-      <ion-item color="white" detail-push tappable (click)="showPerson(_person, $event)">
-        <person-avatar item-left [initials]="_person.initials" [image]="_person.profile_picture" [large]="false"></person-avatar>
-        <h2>{{_person.name}}</h2>
-      </ion-item>
-      <ion-item-options side="right" *ngIf="person && person.isOwnerOrAdmin()">
-        <button ion-button color="danger" (click)="removePerson(_person)">
-          <ion-icon name="trash"></ion-icon> Remove
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
+    <person-row [person]="_person" [user]="person" [selected]="selected == person"
+                (rowSelected)="showPerson(_person, $event)" (removeSelected)="removePerson(_person)"
+                *ngFor="let _person of organization.people"></person-row>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="loadMore($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>

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

@@ -8,13 +8,15 @@ import { PersonInviteModule } from '../../pages/person-invite/person-invite.modu
 import { PersonImportModule } from '../../pages/person-import/person-import.module';
 
 import { PersonAvatarModule } from '../../components/person-avatar/person-avatar.module';
+import { PersonRowModule } from '../../components/person-row/person-row.module';
 
 @NgModule({
   declarations: [
     PersonListPage,
   ],
   imports: [
     PersonAvatarModule,
+    PersonRowModule,
     PersonEditModule,
     PersonDetailsModule,
     PersonInviteModule,