#328043 #327413 Add registered label to events list and event details screens. Fix scrolling on group members and event participants screens.

WIP: Unregister button and change vote button should be moved to action bar.

app/events/event-date-votes/event-date-votes.component.ts

@@ -1,33 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import { EventsService, AlertService } from '../../services';
-import { Event } from '../../shared/models';
-import { utilities } from '../../shared';
-
-@Component({
-    selector: 'event-date-votes',
-    templateUrl: 'events/event-date-votes/event-date-votes.template.html',
-    styleUrls: [ 'events/event-date-votes/event-date-votes.component.css' ]
-})
-export class EventDateVotesComponent implements OnInit {
-    event: Event;
-    countsByDate: any; // obj with keys the dats and values the counts
-    dateFormat: string = utilities.dateFormat;
-
-    constructor(
-        private _route: ActivatedRoute,
-        private _alertsService: AlertService,
-        private _eventsService: EventsService
-    ) {}
-
-    ngOnInit() {
-        this._route.params.subscribe(params => {
-            this._eventsService.getDateChoicesVotes(params['id'])
-                .then(result => {
-                    this.event = result.event;
-                    this.countsByDate = result.countByDate;
-                });
-        });
-    }
-}

app/events/event-date-votes/event-date-votes.template.html

@@ -1,13 +0,0 @@
-<StackLayout>
-    <ActionBarExtension>
-        <ActionItem>
-            <Label [text]="event && event.Name" textWrap="true"></Label>
-        </ActionItem>
-    </ActionBarExtension>
-    <StackLayout *ngIf="event">
-        <StackLayout *ngFor="let date of (event.EventDateChoices || [])" orientation="horizontal">
-            <Label [text]="date | date:dateFormat"></Label>
-            <Label [text]="' : ' + (countsByDate[date] || 0)"></Label>
-        </StackLayout>
-    </StackLayout>
-</StackLayout>

app/events/event-details/event-details.template.html

@@ -18,6 +18,7 @@
         </ActionBarExtension>
 
         <StackLayout *ngIf="event">
+            <Label *ngIf="alreadyRegistered" text="Registered"></Label>
             <photo-picker [url]="event.ImageUrl" [type]="'event'" [noImageIcon]="'&#x77;'" [noImageText]="'No image available'"></photo-picker>
 
             <StackLayout class="info-container">

app/events/event-list/event-list.component.css

@@ -56,3 +56,9 @@
   border-color: #c8c7cc;
   height: 1;
 }
+
+.registered-label {
+  border-width: 1;
+  border-color: #F4550F;
+  height: 25;
+}

app/events/event-list/event-list.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Event } from '../../shared/models';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Event, User } from '../../shared/models';
+import { EventsService, UsersService, EventRegistrationsService } from '../../services';
 import { utilities } from '../../shared';
 
 @Component({
@@ -7,8 +8,25 @@ import { utilities } from '../../shared';
     templateUrl: 'events/event-list/event-list.template.html',
     styleUrls: ['events/event-list/event-list.component.css']
 })
-export class EventListComponent {
+export class EventListComponent implements OnInit {
     dateFormat: string = utilities.dateFormat;
+    private _userEventsById: any = {};
+
+    constructor(
+        private _eventsService: EventsService,
+        private _regsService: EventRegistrationsService,
+        private _usersService: UsersService
+    ) {}
+
+    ngOnInit() {
+        this._usersService.currentUser()
+            .then(user => this._eventsService.getUserEvents(user.Id))
+            .then(userEvents => {
+                userEvents.forEach(ev => {
+                    this._userEventsById[ev.Id] = true;
+                });
+            });
+    }
     
     @Input() events: Event[];
     @Output() onEventTap: EventEmitter<any> = new EventEmitter<any>();
@@ -17,6 +35,14 @@ export class EventListComponent {
         this.onEventTap.emit(event);
     }
 
+    userIsRegistered(eventId: string) {
+        return this._userEventsById && this._userEventsById[eventId];
+    }
+
+    isPastEvent(event: Event) {
+        return this._eventsService.isPastEvent(event);
+    }
+
     getEventDate(event: Event) {
         let date: Date = null;
 

app/events/event-list/event-list.template.html

@@ -1,7 +1,10 @@
 <ScrollView class="list-events">
     <StackLayout>
         <StackLayout *ngFor="let event of events; let isLast = last" (tap)="eventTap(event)">
-            <Label [text]="event.Name" textWrap="true" class="event-name"></Label>
+            <WrapLayout>
+                <Label [text]="event.Name" textWrap="true" class="event-name"></Label>
+                <Label *ngIf="userIsRegistered(event.Id) && !isPastEvent(event)" class="registered-label" text="Registered"></Label>
+            </WrapLayout>
             <GridLayout columns="auto, *" class="event-date-wrp">
                 <Label *ngIf="getEventDate(event)" [text]="getEventDate(event) | date:dateFormat | uppercase" col="0" class="event-date" textWrap="true"></Label>
                 <Label [text]="getRemainingTime(event)" col="1" class="event-remaining-time"></Label>

app/events/event-participants/event-participants.template.html

@@ -1,4 +1,4 @@
-<StackLayout class="cntnr">
+<ScrollView class="cntnr">
     <ActionBarExtension>
         <NavigationButton *ngIf="isAndroid" icon="res://icon_back" (tap)="onBack()"></NavigationButton>
         <ActionItem *ngIf="!isAndroid" ios.systemIcon="1" ios.position="left" (tap)="onBack()"></ActionItem>
@@ -24,4 +24,4 @@
     <ScrollView class="cntnr">
         <ActivityIndicator [busy]="!participants" [visibility]="participants ? 'collapse' : 'visible'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
     </ScrollView>
-</StackLayout>
+</ScrollView>

app/events/events/events.template.html

@@ -29,4 +29,3 @@
         <ActivityIndicator [busy]="!initialized" [visibility]="initialized ? 'collapse' : 'visible'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
     </ScrollView>
 </ScrollView>
-

app/events/index.ts

@@ -6,5 +6,4 @@ export * from './editable-event/editable-event.component';
 export * from './edit-event/edit-event.component';
 export * from './event-registration-modal/event-registration-modal.component';
 export * from './event-creation-modal/event-creation-modal.component';
-export * from './event-date-votes/event-date-votes.component';
 export * from './event-participants/event-participants.component';

app/groups/group-members/group-members.template.html

@@ -1,4 +1,4 @@
-<StackLayout class="cntnr">
+<ScrollVIew class="cntnr">
     <ActionBarExtension>
         <NavigationButton *ngIf="isAndroid"android.systemIcon="ic_menu_back" (tap)="onBack()"></NavigationButton>
         <ActionItem *ngIf="!isAndroid" ios.systemIcon="1" ios.position="left" (tap)="onBack()"></ActionItem>
@@ -16,4 +16,4 @@
     <ScrollView class="cntnr">
         <ActivityIndicator [busy]="!members" [visibility]="members ? 'collapse' : 'visible'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
     </ScrollView>
-</StackLayout>
+</ScrollVIew>

app/main.ts

@@ -27,7 +27,6 @@ import {
     AddEventComponent,
     EditableEventComponent,
     EditEventComponent,
-    EventDateVotesComponent,
     EventParticipantsComponent
 } from './events';
 
@@ -56,7 +55,6 @@ const routes = [
     { path: 'events/:id', component: EventDetailsComponent },
     { path: 'events/:id/edit', component: EditEventComponent },
     { path: 'events/:id/participants', component: EventParticipantsComponent },
-    { path: 'events/:id/date-choices', component: EventDateVotesComponent },
 
     { path: 'groups', component: GroupsComponent },
     { path: 'groups/add', component: AddGroupComponent },
@@ -90,7 +88,6 @@ const routes = [
         ListPickerModalComponent,
         DateTimePickerModalComponent,
         EventCreationModalComponent,
-        EventDateVotesComponent,
         GroupCreationModalComponent,
         GroupEventsComponent,
         PhotoPickerComponent,

app/services/event-registrations.service.ts

@@ -7,7 +7,7 @@ import { EventRegistration } from '../shared/models';
 @Injectable()
 export class EventRegistrationsService {
     private _data: Data<EventRegistration>;
-    private readonly expandExp = {
+    private readonly _expandUserExpression = {
         UserId: {
             TargetTypeName: 'Users',
             ReturnAs: 'User',
@@ -24,10 +24,19 @@ export class EventRegistrationsService {
         this._data = this._elProvider.get.data<EventRegistration>('EventRegistrations');
     }
 
+    getAllForUser(userId: string, expandExpression?: any) {
+        let query = this._elProvider.getNewQuery();
+        query.where({ UserId: userId });
+        if (expandExpression) {
+            query.expand(expandExpression);
+        }
+        return this._data.get(query);
+    }
+
     getParticipants(eventId: string) {
         let query: any = this._elProvider.getNewQuery();
         query.where().eq('EventId', eventId);
-        query.expand(this.expandExp);
+        query.expand(this._expandUserExpression);
         query.select('User');
         return this._data.get(query).then(r => r.result.map(r => r.User));
     }

app/services/events.service.ts

@@ -50,6 +50,32 @@ export class EventsService {
         return this._getWithFilter({});
     }
 
+    getUserEvents(userId: string) {
+        let expandEventExpression = {
+            EventId: {
+                TargetTypeName: 'Events',
+                ReturnAs: 'Event',
+                Expand: {
+                    Image: {
+                        ReturnAs: 'ImageUrl',
+                        SingleField: 'Uri'
+                    },
+                    OrganizerId: {
+                        TargetTypeName: 'Users',
+                        ReturnAs: 'Organizer',
+                        Expand: {
+                            Image: {
+                                ReturnAs: 'ImageUrl',
+                                SingleField: 'Uri'
+                            }
+                        }
+                    }
+                }}
+        };
+        return this._registrationsService.getAllForUser(userId, expandEventExpression)
+            .then(resp => resp.result.map(expandedReg => expandedReg.Event));
+    }
+
     getByGroupId(groupId: string) {
         let filter = { GroupId: groupId };
         let sort = [{ field: 'EventDateChoices', desc: true }, { field: 'EventDate', desc: true }];

app/shared/user-list/user-list.template.html

@@ -1,13 +1,9 @@
 <StackLayout>
-    <ListView [items]="users" separatorColor="transparent">
-        <template let-user="item">
-            <StackLayout>
-                <StackLayout orientation="horizontal" class="item">
-                    <user-display class="user-display" [users]="[user]" [showNames]="true"></user-display>
-                    <Label class="organizer" *ngIf="user._label" [text]="getUserLabel(user)" textWrap="true"></Label>
-                </StackLayout>
-                <Label class="list-separator" text=""></Label>
-            </StackLayout>
-        </template>
-    </ListView>
+    <StackLayout *ngFor="let user of users">
+        <StackLayout orientation="horizontal" class="item">
+            <user-display class="user-display" [users]="[user]" [showNames]="true"></user-display>
+            <Label class="organizer" *ngIf="user._label" [text]="getUserLabel(user)" textWrap="true"></Label>
+        </StackLayout>
+        <Label class="list-separator" text=""></Label>
+    </StackLayout>
 </StackLayout>