Angular v17 Upgrade: Events Feature Refactor (#462)

Refactors the entire events feature to the new standards of Angular v17. This pull request also rewrites most of the functionality to be more concise and readable, following the best conventions for future students in COMP 423 and 393, using everything we have learned so far. This refactor also fully utilizes the new frontend pagination abstraction created in #456.
unc-csxl · May 28, 2024 · 16fcd10 · 16fcd10
1 parent 097ade9
commit 16fcd10
Show file tree

Hide file tree

Showing 31 changed files with 487 additions and 888 deletions.
diff --git a/backend/services/event.py b/backend/services/event.py
@@ -77,9 +77,8 @@ def get_paginated_events(
             range_start = pagination_params.range_start
             range_end = pagination_params.range_end
             criteria = and_(
-                EventEntity.time
-                >= datetime.strptime(range_start, "%d/%m/%Y, %H:%M:%S"),
-                EventEntity.time <= datetime.strptime(range_end, "%d/%m/%Y, %H:%M:%S"),
+                EventEntity.time >= datetime.fromisoformat(range_start),
+                EventEntity.time <= datetime.fromisoformat(range_end),
             )
             statement = statement.where(criteria)
             length_statement = length_statement.where(criteria)
@@ -106,11 +105,13 @@ def get_paginated_events(
         limit = pagination_params.page_size
 
         if pagination_params.order_by != "":
-            statement = statement.order_by(
-                    getattr(EventEntity, pagination_params.order_by)
-                ) if pagination_params.ascending else statement.order_by(
+            statement = (
+                statement.order_by(getattr(EventEntity, pagination_params.order_by))
+                if pagination_params.ascending
+                else statement.order_by(
                     getattr(EventEntity, pagination_params.order_by).desc()
                 )
+            )
 
         statement = statement.offset(offset).limit(limit)
 

diff --git a/frontend/src/app/admin/users/list/admin-users-list.component.ts b/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
+        )
     }
   };
 

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -40,7 +40,6 @@ import { ErrorDialogComponent } from './navigation/error-dialog/error-dialog.com
 import { HomeComponent } from './home/home.component';
 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';
 
 @NgModule({

diff --git a/frontend/src/app/event/event-details/event-details.component.html b/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>
diff --git a/frontend/src/app/event/event-details/event-details.component.ts b/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`
     );
   }
 }
diff --git a/frontend/src/app/event/event-editor/event-editor.component.html b/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>