Skip to content

Commit 8a358d4

Browse files
dalezakdalezak
committed
Added group and person component for #111 
1 parent ca19e1a commit 8a358d4

16 files changed

+207
-16
lines changed

‎src/app/app.module.ts

+4
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ import { SendViaModule } from '../components/send-via/send-via.module';
9494
import { ColorPickerModule } from '../components/color-picker/color-picker.module';
9595
import { PersonAvatarModule } from '../components/person-avatar/person-avatar.module';
9696
import { CheckinCardModule } from '../components/checkin-card/checkin-card.module';
97+
import { PersonRowModule } from '../components/person-row/person-row.module';
98+
import { GroupRowModule } from '../components/group-row/group-row.module';
9799

98100
import { LoggerProvider } from '../providers/logger/logger';
99101
import { ApiProvider } from '../providers/api/api';
@@ -116,6 +118,8 @@ import { CameraProvider } from '../providers/camera/camera';
116118
ColorPickerModule,
117119
SendViaModule,
118120
CheckinCardModule,
121+
PersonRowModule,
122+
GroupRowModule,
119123
GroupListModule,
120124
GroupEditModule,
121125
GroupDetailsModule,

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<ion-item-sliding color="white">
2+
<ion-item color="white" detail-push tappable (click)="onRowSelected($event)">
3+
<ion-icon item-left class="group-icon" ios="ios-people" md="md-people"></ion-icon>
4+
<h2>{{group.name}}</h2>
5+
<p>{{group.member_count || 0}} people</p>
6+
</ion-item>
7+
<ion-item-options side="right" *ngIf="user && user.isOwnerOrAdmin()">
8+
<button ion-button color="danger" (click)="onRemoveSelected()">
9+
<ion-icon name="trash"></ion-icon> Remove
10+
</button>
11+
</ion-item-options>
12+
</ion-item-sliding>

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

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
4+
import { GroupRowComponent } from './group-row';
5+
6+
@NgModule({
7+
declarations: [
8+
GroupRowComponent,
9+
],
10+
imports: [
11+
IonicPageModule.forChild(GroupRowComponent),
12+
],
13+
exports: [
14+
GroupRowComponent
15+
]
16+
})
17+
export class GroupRowModule {}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
group-row {
2+
3+
}

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Component, Input, Output, EventEmitter } from '@angular/core';
2+
3+
import { Group } from '../../models/group';
4+
import { Person } from '../../models/person';
5+
6+
@Component({
7+
selector: 'group-row',
8+
templateUrl: 'group-row.html'
9+
})
10+
export class GroupRowComponent {
11+
12+
@Input()
13+
group:Group;
14+
15+
@Input()
16+
user:Person;
17+
18+
@Input()
19+
selected:boolean = false;
20+
21+
@Output()
22+
rowSelected = new EventEmitter();
23+
24+
@Output()
25+
removeSelected = new EventEmitter();
26+
27+
hasRowSelected:boolean = false;
28+
29+
hasRemoveSelected:boolean = false;
30+
31+
constructor() {
32+
}
33+
34+
ngOnInit() {
35+
this.hasRowSelected = this.rowSelected && this.rowSelected.observers.length > 0;
36+
this.hasRemoveSelected = this.removeSelected && this.removeSelected.observers.length > 0;
37+
}
38+
39+
onRowSelected(event:any) {
40+
this.rowSelected.emit();
41+
}
42+
43+
onRemoveSelected(event:any) {
44+
this.removeSelected.emit();
45+
}
46+
47+
}

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<ion-item-sliding color="white">
2+
<ion-item color="white" detail-push tappable (click)="onRowSelected($event)">
3+
<person-avatar item-left [initials]="person.initials" [image]="person.profile_picture" [large]="false"></person-avatar>
4+
<h2>{{person.name}}</h2>
5+
</ion-item>
6+
<ion-item-options side="right" *ngIf="user && user.isOwnerOrAdmin()">
7+
<button ion-button color="danger" (click)="onRemoveSelected()">
8+
<ion-icon name="trash"></ion-icon> Remove
9+
</button>
10+
</ion-item-options>
11+
</ion-item-sliding>

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
4+
import { PersonRowComponent } from './person-row';
5+
6+
import { PersonAvatarModule } from '../../components/person-avatar/person-avatar.module';
7+
8+
@NgModule({
9+
declarations: [
10+
PersonRowComponent,
11+
],
12+
imports: [
13+
PersonAvatarModule,
14+
IonicPageModule.forChild(PersonRowComponent),
15+
],
16+
exports: [
17+
PersonRowComponent
18+
]
19+
})
20+
export class PersonRowModule {}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
person-row {
2+
3+
}

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

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Component, Input, Output, EventEmitter } from '@angular/core';
2+
3+
import { Person } from '../../models/person';
4+
5+
@Component({
6+
selector: 'person-row',
7+
templateUrl: 'person-row.html'
8+
})
9+
export class PersonRowComponent {
10+
11+
@Input()
12+
person:Person;
13+
14+
@Input()
15+
user:Person;
16+
17+
@Input()
18+
selected:boolean = false;
19+
20+
@Output()
21+
rowSelected = new EventEmitter();
22+
23+
@Output()
24+
removeSelected = new EventEmitter();
25+
26+
hasRowSelected:boolean = false;
27+
28+
hasRemoveSelected:boolean = false;
29+
30+
constructor() {
31+
}
32+
33+
ngOnInit() {
34+
this.hasRowSelected = this.rowSelected && this.rowSelected.observers.length > 0;
35+
this.hasRemoveSelected = this.removeSelected && this.removeSelected.observers.length > 0;
36+
}
37+
38+
onRowSelected(event:any) {
39+
this.rowSelected.emit();
40+
}
41+
42+
onRemoveSelected(event:any) {
43+
this.removeSelected.emit();
44+
}
45+
46+
}

‎src/models/person.ts

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

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

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

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

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { GroupListPage } from './group-list';
55

66
import { GroupEditModule } from '../../pages/group-edit/group-edit.module';
77
import { GroupDetailsModule } from '../../pages/group-details/group-details.module';
8+
import { GroupRowModule } from '../../components/group-row/group-row.module';
89

910
@NgModule({
1011
declarations: [
@@ -13,6 +14,7 @@ import { GroupDetailsModule } from '../../pages/group-details/group-details.modu
1314
imports: [
1415
GroupEditModule,
1516
GroupDetailsModule,
17+
GroupRowModule,
1618
IonicPageModule.forChild(GroupListPage),
1719
],
1820
exports: [

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

+31
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,37 @@ export class GroupListPage extends BasePage {
205205
});
206206
}
207207

208+
private removeGroup(group:Group) {
209+
this.logger.info(this, "removeGroup", group);
210+
let loading = this.showLoading("Removing...");
211+
this.api.deleteGroup(this.organization, group).then((deleted:any) => {
212+
if (this.mobile) {
213+
this.database.removeGroup(this.organization, group).then((removed:any) => {
214+
let index = this.organization.groups.indexOf(group);
215+
if (index > -1) {
216+
this.organization.groups.splice(index, 1);
217+
}
218+
loading.dismiss();
219+
},
220+
(error:any) => {
221+
loading.dismiss();
222+
this.showAlert("Problem Removing Group", error);
223+
});
224+
}
225+
else {
226+
let index = this.organization.groups.indexOf(group);
227+
if (index > -1) {
228+
this.organization.groups.splice(index, 1);
229+
}
230+
loading.dismiss();
231+
}
232+
},
233+
(error:any) => {
234+
loading.dismiss();
235+
this.showAlert("Problem Removing Group", error);
236+
});
237+
}
238+
208239
private showGroup(group:Group) {
209240
this.logger.info(this, "showGroup", group);
210241
this.showPage(GroupDetailsPage, {

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

+2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ import { PersonEditPage } from './person-edit';
55

66
import { DateTimeModule } from '../../pipes/date-time/date-time.module';
77
import { PersonAvatarModule } from '../../components/person-avatar/person-avatar.module';
8+
import { PersonRowModule } from '../../components/person-row/person-row.module';
89

910
@NgModule({
1011
declarations: [
1112
PersonEditPage,
1213
],
1314
imports: [
1415
DateTimeModule,
16+
PersonRowModule,
1517
PersonAvatarModule,
1618
IonicPageModule.forChild(PersonEditPage),
1719
],

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

+3-11
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,9 @@
1919
<ion-spinner name="ios"></ion-spinner>
2020
</div>
2121
<ion-list *ngIf="organization && organization.people">
22-
<ion-item-sliding color="white" *ngFor="let _person of organization.people">
23-
<ion-item color="white" detail-push tappable (click)="showPerson(_person, $event)">
24-
<person-avatar item-left [initials]="_person.initials" [image]="_person.profile_picture" [large]="false"></person-avatar>
25-
<h2>{{_person.name}}</h2>
26-
</ion-item>
27-
<ion-item-options side="right" *ngIf="person && person.isOwnerOrAdmin()">
28-
<button ion-button color="danger" (click)="removePerson(_person)">
29-
<ion-icon name="trash"></ion-icon> Remove
30-
</button>
31-
</ion-item-options>
32-
</ion-item-sliding>
22+
<person-row [person]="_person" [user]="person" [selected]="selected == person"
23+
(rowSelected)="showPerson(_person, $event)" (removeSelected)="removePerson(_person)"
24+
*ngFor="let _person of organization.people"></person-row>
3325
</ion-list>
3426
<ion-infinite-scroll (ionInfinite)="loadMore($event)">
3527
<ion-infinite-scroll-content></ion-infinite-scroll-content>

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

+2
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ import { PersonInviteModule } from '../../pages/person-invite/person-invite.modu
88
import { PersonImportModule } from '../../pages/person-import/person-import.module';
99

1010
import { PersonAvatarModule } from '../../components/person-avatar/person-avatar.module';
11+
import { PersonRowModule } from '../../components/person-row/person-row.module';
1112

1213
@NgModule({
1314
declarations: [
1415
PersonListPage,
1516
],
1617
imports: [
1718
PersonAvatarModule,
19+
PersonRowModule,
1820
PersonEditModule,
1921
PersonDetailsModule,
2022
PersonInviteModule,

0 commit comments

Comments
 (0)