Angular v17 Upgrade: Events Feature Refactor

frontend/src/app/admin/users/list/admin-users-list.component.ts

@@ -36,7 +36,9 @@ export class AdminUsersListComponent {
     canActivate: [permissionGuard('user.list', 'user/')],
     resolve: {
       page: () =>
-        inject(UserAdminService).list(AdminUsersListComponent.PaginationParams)
+        inject(UserAdminService).list(
+          AdminUsersListComponent.PaginationParams as PaginationParams
+        )
     }
   };
 

frontend/src/app/app.module.ts

@@ -42,6 +42,7 @@ import { AboutComponent } from './about/about.component';
 import { GateComponent } from './gate/gate.component';
 import { ProfileEditorComponent } from './profile/profile-editor/profile-editor.component';
 import { SharedModule } from './shared/shared.module';
+import { GroupEventsPipe } from './event/pipes/group-events.pipe';
 
 @NgModule({
   declarations: [
@@ -97,7 +98,8 @@ import { SharedModule } from './shared/shared.module';
       useClass: HttpRequestInterceptor,
       multi: true
     },
-    DatePipe
+    DatePipe,
+    GroupEventsPipe
   ],
   bootstrap: [AppComponent]
 })

frontend/src/app/event/event-details/event-details.component.html

@@ -1,9 +1,9 @@
 <div class="container">
   <div class="events-grid">
-    <event-detail-card [event]="event" [profile]="this.profile" />
+    <event-detail-card [event]="event!" [profile]="this.profile" />
 
-    <event-users-list
-      *ngIf="(this.adminPermission$ | async) || this.event.is_organizer"
-      [event]="event"></event-users-list>
+    @if ((this.canViewEvent() | async) || this.event?.is_organizer ?? false) {
+    <event-users-list [event]="event!"></event-users-list>
+    }
   </div>
 </div>

frontend/src/app/event/event-details/event-details.component.ts

@@ -3,14 +3,13 @@
  * any given event.
  *
  * @author Ajay Gandecha, Jade Keegan, Brianna Ta, Audrey Toney
- * @copyright 2023
+ * @copyright 2024
  * @license MIT
  */
 
-import { Component, inject } from '@angular/core';
-import { profileResolver } from 'src/app/profile/profile.resolver';
-import { eventDetailResolver } from '../event.resolver';
-import { Profile } from 'src/app/profile/profile.service';
+import { Component, OnInit } from '@angular/core';
+import { eventResolver } from '../event.resolver';
+import { Profile, ProfileService } from 'src/app/profile/profile.service';
 import {
   ActivatedRoute,
   ActivatedRouteSnapshot,
@@ -31,54 +30,59 @@ let titleResolver: ResolveFn<string> = (route: ActivatedRouteSnapshot) => {
   templateUrl: './event-details.component.html',
   styleUrls: ['./event-details.component.css']
 })
-export class EventDetailsComponent {
+export class EventDetailsComponent implements OnInit {
   /** Route information to be used in Event Routing Module */
   public static Route = {
     path: ':id',
     title: 'Event Details',
     component: EventDetailsComponent,
     resolve: {
-      profile: profileResolver,
-      event: eventDetailResolver
+      event: eventResolver
     },
     children: [
       { path: '', title: titleResolver, component: EventDetailsComponent }
     ]
   };
 
-  /** Store Event */
-  public event!: Event;
-
   /** Store the currently-logged-in user's profile.  */
   public profile: Profile;
-  public adminPermission$: Observable<boolean>;
 
+  /** The event to show */
+  public event: Event | undefined;
+
+  /**
+   * Determines whether or not a user can view the event.
+   * @returns {Observable<boolean>}
+   */
+  canViewEvent(): Observable<boolean> {
+    return this.permissionService.check(
+      'organization.events.view',
+      `organization/${this.event?.organization!?.id ?? '*'}`
+    );
+  }
+
+  /** Constructs the Event Detail component. */
   constructor(
     private route: ActivatedRoute,
-    private permission: PermissionService,
+    private permissionService: PermissionService,
+    private profileService: ProfileService,
     private gearService: NagivationAdminGearService
   ) {
-    /** Initialize data from resolvers. */
+    this.profile = this.profileService.profile()!;
+
     const data = this.route.snapshot.data as {
-      profile: Profile;
       event: Event;
     };
-    this.profile = data.profile;
-    this.event = data.event;
 
-    // Admin Permission if has the actual permission or is event organizer
-    this.adminPermission$ = this.permission.check(
-      'organization.events.view',
-      `organization/${this.event.organization!.id}`
-    );
+    this.event = data.event;
   }
 
   ngOnInit() {
     this.gearService.showAdminGearByPermissionCheck(
       'events.*',
       '*',
       '',
-      `events/organizations/${this.event.organization?.slug}/events/${this.event.id}/edit`
+      `events/${this.event?.organization_id}/${this.event?.id}/edit`
     );
   }
 }

frontend/src/app/event/event-editor/event-editor.component.html

@@ -1,13 +1,11 @@
 <!-- Show form if user is an admin or organizer of the event. -->
-<form
-  [formGroup]="eventForm"
-  (ngSubmit)="onSubmit()"
-  *ngIf="(enabled$ | async) || this.event.is_organizer; else unauthenticated">
+<form [formGroup]="eventForm" (ngSubmit)="onSubmit()">
   <mat-card appearance="outlined">
     <!-- Header -->
     <mat-card-header>
-      <mat-card-title *ngIf="event.id === null">Create Event</mat-card-title>
-      <mat-card-title *ngIf="event.id !== null">Update Event</mat-card-title>
+      <mat-card-title>
+        {{ this.isNew() ? 'Create' : 'Update' }} Event
+      </mat-card-title>
     </mat-card-header>
 
     <!-- Event Name -->
@@ -66,10 +64,7 @@
       </mat-form-field>
 
       <!-- User Selection / Organizers Form Control -->
-      <user-lookup
-        label="Organizers"
-        [users]="organizers"
-        [disabled]="(enabled$ | async) === false"></user-lookup>
+      <user-lookup label="Organizers" [users]="organizers"></user-lookup>
     </mat-card-content>
 
     <!-- Save Button -->
@@ -80,8 +75,3 @@
     </mat-card-actions>
   </mat-card>
 </form>
-
-<!-- Message for Non-Authenicated Users -->
-<ng-template #unauthenticated>
-  You do not have permission to view this page
-</ng-template>