Show group events on group page

Author: MikaellaCroskrey-IntelliTect

SyncUp.Web/src/components/PageImageBanner.vue

@@ -21,9 +21,12 @@
           <v-chip v-if="badge1Text" class="mr-1" size="small" color="primary">
             {{ badge1Text }}
           </v-chip>
-          <v-chip v-if="badge2Text" size="small" color="primary">
+          <v-chip v-if="badge2Text" class="mr-1" size="small" color="primary">
             {{ badge2Text }}
           </v-chip>
+          <v-chip v-if="badge3Text" size="small" color="primary">
+            {{ badge3Text }}
+          </v-chip>
         </v-col>
         <v-col align="right">
           <JoinButton
@@ -46,11 +49,13 @@ const props = withDefaults(
     isMember: boolean;
     badge1Text?: string | null;
     badge2Text?: string | null;
+    badge3Text?: string | null;
     minHeight?: string;
   }>(),
   {
     badge1Text: null,
     badge2Text: null,
+    badge3Text: null,
     minHeight: "300",
   },
 );

SyncUp.Web/src/services/GroupService.ts

@@ -1,5 +1,6 @@
-import { GroupUser, Post } from "@/models.g";
+import { Event, GroupUser, Post } from "@/models.g";
 import {
+  EventListViewModel,
   GroupUserListViewModel,
   GroupViewModel,
   PostListViewModel,
@@ -10,12 +11,15 @@ export default class GroupService {
   public group: GroupViewModel;
   public isMember = ref(false);
 
+  public events = new EventListViewModel();
+  private eventsDataSource = new Event.DataSources.EventsByDate();
+
   public posts = new PostListViewModel();
   private postsDataSource = new Post.DataSources.PostsForGroup();
 
   public groupUser = new GroupUserListViewModel();
   private groupUserDataSource = new GroupUser.DataSources.UsersForGroup();
-
+  
   constructor(group: GroupViewModel) {
     this.group = group;
 
@@ -28,10 +32,22 @@ export default class GroupService {
 
         this.groupUserDataSource.groupId = this.group.groupId;
         this.groupUser.$dataSource = this.groupUserDataSource;
+
+        this.events.$params.filter = { groupId: this.group.groupId };
+        this.events.$dataSource = this.eventsDataSource;
       },
     );
   }
 
+  public numberOfEvents = computed(() => {
+    let postfix = "-- ";
+    if (!this.events.$count.isLoading) {
+      postfix = (this.events.$count.result ?? 0).toString();
+    }
+
+    return postfix + " events";
+  });
+
   public numberOfPosts = computed(() => {
     let postfix = "-- ";
     if (!this.posts.$count.isLoading) {

SyncUp.Web/src/views/Group.vue

@@ -5,7 +5,8 @@
         :title="groupService.group.name!"
         :description="groupService.group.description!"
         :badge1-text="groupService.numberOfPosts.value"
-        :badge2-text="groupService.numberOfUsers.value"
+        :badge2-text="groupService.numberOfEvents.value"
+        :badge3-text="groupService.numberOfUsers.value"
         :is-member="groupService.isMember.value"
         @toggle-membership="groupService.toggleMembership()"
       />
@@ -46,6 +47,9 @@
         <v-card-text> {{ truncateText(post.body) }} </v-card-text>
       </v-card>
     </c-loader-status>
+
+    <v-divider class="mt-5 mb-2" />
+    <EventList :group-id="groupId" />
   </v-container>
 </template>
 
@@ -70,6 +74,8 @@ groupService.group.$load(props.groupId).then(async () => {
   groupService.posts.$load();
   groupService.posts.$count();
 
+  groupService.events.$count();
+
   groupService.groupUser.$count();
 });