fix: requirements of eventSeparate Upcoming and Past events on View and Edit page of group

app/components/forms/group/group-events-form.js

@@ -4,6 +4,8 @@ import { action, computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import classic from 'ember-classic-decorator';
 import FormMixin from 'open-event-frontend/mixins/form';
+import moment from 'moment';
+import { sortBy } from 'lodash-es';
 
 @classic
 export default class GroupEventsForm extends Component.extend(FormMixin) {
@@ -41,7 +43,17 @@ export default class GroupEventsForm extends Component.extend(FormMixin) {
 
   @computed('events.[]', 'group.events.[]')
   get remainingEvents() {
-    return this.events.toArray().filter(event => !this.group.events.toArray().includes(event));
+    return sortBy(this.events.toArray().filter(event => !this.group.events.toArray().includes(event)), ['startsAt']).reverse();
+  }
+
+  @computed('events.[]', 'group.events.[]')
+  get pastEvents() {
+    return sortBy(this.events.toArray().filter(event => { return moment(event.endsAt) < moment()}), ['startsAt']).reverse();
+  }
+
+  @computed('events.[]', 'group.events.[]')
+  get upcomingEvents() {
+    return sortBy(this.events.toArray().filter(event => { return moment(event.endsAt) > moment()}), ['startsAt']).reverse();
   }
 
   @action

app/components/forms/group/group-view.js

@@ -1,10 +1,23 @@
 import Component from '@ember/component';
-import { action } from '@ember/object';
+import { computed, action } from '@ember/object';
 import classic from 'ember-classic-decorator';
 import FormMixin from 'open-event-frontend/mixins/form';
+import moment from 'moment';
+import { sortBy } from 'lodash-es';
 
 @classic
 export default class GroupView extends Component.extend(FormMixin) {
+
+  @computed('events.[]', 'group.events.[]')
+  get pastEvents() {
+    return sortBy(this.group.events.toArray().filter(event => { return moment(event.endsAt) < moment()}), ['startsAt']).reverse();
+  }
+
+  @computed('events.[]', 'group.events.[]')
+  get upcomingEvents() {
+    return sortBy(this.group.events.toArray().filter(event => { return moment(event.endsAt) > moment()}), ['startsAt']).reverse();
+  }
+
   @action
   shareEvent() {}
 }

app/templates/components/forms/group/group-events-form.hbs

@@ -30,12 +30,19 @@
         </div>
       {{/if}}
     </div>
-
     <div class="mb-4">
       {{#if this.remainingEvents}}
-        <h2 class="main-heading mb-4">{{t 'All Events'}}</h2>
+        <div class="ui hidden divider"></div>
+        <h2 class="main-heading">{{t 'Upcoming Events'}}</h2>
+        <div class="ui stackable three column grid">
+          {{#each this.upcomingEvents as |event|}}
+            <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} @addToGroup={{true}} @addEvent={{action "addEvent"}}/>
+          {{/each}}
+        </div>
+        <div class="ui hidden divider"></div>
+        <h2 class="main-heading">{{t 'Past Events'}}</h2>
         <div class="ui stackable three column grid">
-          {{#each this.remainingEvents as |event|}}
+          {{#each this.pastEvents as |event|}}
             <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} @addToGroup={{true}} @addEvent={{action "addEvent"}}/>
           {{/each}}
         </div>

app/templates/components/forms/group/group-view.hbs

@@ -19,11 +19,22 @@
               {{/if}}
           {{/each}}
         </div>
-        <div class="ui stackable three column grid">
-          {{#each @group.events as |event|}}
-            <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} @removeFromGroup={{false}} />
-          {{/each}}
-        </div>
+        {{#if this.upcomingEvents}}
+          <h2 class="main-heading mb-4">{{t 'Upcoming Events'}}</h2>
+          <div class="ui stackable three column grid">
+            {{#each this.upcomingEvents as |event|}}
+              <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} />
+            {{/each}}
+          </div>
+        {{/if}}
+        {{#if this.pastEvents}}
+          <h2 class="main-heading mb-4">{{t 'Past Events'}}</h2>
+          <div class="ui stackable three column grid">
+            {{#each this.pastEvents as |event|}}
+              <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} />
+            {{/each}}
+          </div>
+        {{/if}}
       {{/if}}
     </div>
 </div>