Merge pull request #468 from unc-csxl/angular-upgrade-frontend-refactor

Angular upgrade frontend refactor progress on Events and Organizations.
unc-csxl · May 28, 2024 · 7e111dc · 7e111dc
2 parents 3962905 + 16fcd10
commit 7e111dc
Show file tree

Hide file tree

Showing 62 changed files with 1,089 additions and 1,650 deletions.
diff --git a/backend/api/organizations.py b/backend/api/organizations.py
@@ -4,7 +4,7 @@
 
 from fastapi import APIRouter, Depends
 
-from ..services import OrganizationService
+from ..services import OrganizationService, RoleService
 from ..models.organization import Organization
 from ..models.organization_details import OrganizationDetails
 from ..api.authentication import registered_user
@@ -44,6 +44,7 @@ def new_organization(
     organization: Organization,
     subject: User = Depends(registered_user),
     organization_service: OrganizationService = Depends(),
+    role_service: RoleService = Depends(),
 ) -> Organization:
     """
     Create organization
@@ -60,7 +61,10 @@ def new_organization(
         HTTPException 422 if create() raises an Exception
     """
 
-    return organization_service.create(subject, organization)
+    new_organization = organization_service.create(subject, organization)
+    # Create a new role for the organization newly created
+    role_service.create(subject, new_organization.slug)
+    return new_organization
 
 
 @api.get(

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/academics/academics-home/academics-home.component.ts b/frontend/src/app/academics/academics-home/academics-home.component.ts
@@ -37,7 +37,7 @@ export class AcademicsHomeComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.gearService.showAdminGear(
+    this.gearService.showAdminGearByPermissionCheck(
       'academics.*',
       '*',
       '',

diff --git a/frontend/src/app/academics/course-catalog/course-catalog.component.ts b/frontend/src/app/academics/course-catalog/course-catalog.component.ts
@@ -70,7 +70,7 @@ export class CoursesHomeComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.gearService.showAdminGear(
+    this.gearService.showAdminGearByPermissionCheck(
       'academics.*',
       '*',
       '',

diff --git a/frontend/src/app/academics/section-offerings/section-offerings.component.ts b/frontend/src/app/academics/section-offerings/section-offerings.component.ts
@@ -102,7 +102,7 @@ export class SectionOfferingsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.gearService.showAdminGear(
+    this.gearService.showAdminGearByPermissionCheck(
       'academics.*',
       '*',
       '',

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
@@ -4,7 +4,7 @@ import { Profile } from 'src/app/profile/profile.service';
 import { UserAdminService } from 'src/app/admin/users/user-admin.service';
 import { permissionGuard } from 'src/app/permission.guard';
 
-import { Paginated } from 'src/app/pagination';
+import { Paginated, PaginationParams } from 'src/app/pagination';
 import { PageEvent } from '@angular/material/paginator';
 
 @Component({
@@ -13,7 +13,7 @@ import { PageEvent } from '@angular/material/paginator';
   styleUrls: []
 })
 export class AdminUsersListComponent {
-  public page: Paginated<Profile>;
+  public page: Paginated<Profile, PaginationParams>;
 
   public displayedColumns: string[] = [
     'first_name',
@@ -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
+        )
     }
   };
 
@@ -45,7 +47,9 @@ export class AdminUsersListComponent {
     private router: Router,
     route: ActivatedRoute
   ) {
-    let data = route.snapshot.data as { page: Paginated<Profile> };
+    let data = route.snapshot.data as {
+      page: Paginated<Profile, PaginationParams>;
+    };
     this.page = data.page;
   }
 

diff --git a/frontend/src/app/admin/users/user-admin.service.ts b/frontend/src/app/admin/users/user-admin.service.ts
@@ -15,7 +15,7 @@ export class UserAdminService {
       filter: params.filter
     };
     let query = new URLSearchParams(paramStrings);
-    return this.http.get<Paginated<Profile>>(
+    return this.http.get<Paginated<Profile, PaginationParams>>(
       '/api/admin/users?' + query.toString()
     );
   }

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.showAdminGear(
+    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>