Events verification fixed

Author: DineshBaghelDev

package.json

@@ -6,7 +6,7 @@
     "start": "ng serve --hmr --host 0.0.0.0",
     "build": "ng build --prod",
     "lint": "ng lint"
-  },
+  }, 
   "private": true,
   "dependencies": {
     "@angular/animations": "^10.0.7",

src/api.ts

@@ -12,6 +12,9 @@ export const API = {
     EventApproveMail: 'api/events/{uuid}/approve-mail',
     EventRejectMail: 'api/events/{uuid}/reject-mail',
     EventVerificationBodies: 'api/bodies-with-privilege/',
+    EventToVerify: 'api/events-to-verify',
+    EventAll: 'api/events-all',
+    EventMy: 'api/events-my',
 
     Bodies: 'api/bodies',
     Body: 'api/bodies/{uuid}',

src/app/comp/search-box/search-box.component.css

@@ -7,5 +7,5 @@
 .full-width-post {
     width: -webkit-fill-available;
     width: -moz-available;
-    width: fill-available;
+    width: stretch;
 }

src/app/data.service.ts

@@ -293,6 +293,18 @@ export class DataService {
     return this.FireGET<IEnumContainer>(API.Events);
   }
 
+  GetAllEventsVerified(): Observable<IEnumContainer> {
+    return this.FireGET<IEnumContainer>(API.EventAll);
+  }
+
+  GetEventsToVerify(): Observable<IEnumContainer> {
+    return this.FireGET<IEnumContainer>(API.EventToVerify);
+  }
+  
+  GetMyEvents(): Observable<IEnumContainer> {
+    return this.FireGET<IEnumContainer>(API.EventMy);
+  }
+
   /** Get detailed information on an event */
   GetEvent(uuid: string): Observable<IEvent> {
     return this.FireGET<IEvent>(API.Event, { uuid: uuid });

src/app/page/feed/feed.component.css

@@ -45,10 +45,40 @@
 }
 
 .badge {
-    width: 20px; height: 20px;
+    width: 20px; 
+    height: 20px;
     float: right;
 }
 
+.pending-badge{
+    background-color: rgb(249, 51, 51);
+    transform: translateX(-60px);
+    border-radius: 4px;
+    padding: 2px 4px;
+    width: fit-content;
+    color: white;
+}
+
+.menu-box{
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-start;
+    
+}
+
+select{
+    font-size: 16px;
+    background-color: #e9e9e9d8;
+    border-radius: 4px;
+    border: none;
+    padding: 4px 6px;
+}
+
+legend{
+    font-size: 18px;
+}
+
 @media (min-width: 961px) and (max-width: 1200px) {
     .events-list {
         padding: 10px 3% 0 3%;

src/app/page/feed/feed.component.html

@@ -1,51 +1,46 @@
+<div class="menu-box" style="margin: 24px 40px;">
+    <legend>View Event:</legend>
+    <select (change)="onFilterChange($event.target.value)">
+        <option value="all" [selected]="eventFilter === 'all'">All Events</option>
+        <option value="mine" [selected]="eventFilter === 'mine'">My Events</option>
+        <option value="verify" [selected]="eventFilter === 'verify'">Events to Verify</option>
+    </select>
+</div>
 <app-xunk-spinner *ngIf="!containers || error" [error]="error"></app-xunk-spinner>
 
-<app-event-sidebar-desktop
-    *ngIf="containers && !error"
-    [event]="selectedEvent">
+<app-event-sidebar-desktop *ngIf="containers && !error" [event]="selectedEvent">
 
     <div class="events-list">
         <div *ngFor="let c of containers" class="events-block">
-            <div class="rl-header date-header"
-                *ngIf="c.title !== ''">
+            <div class="rl-header date-header" *ngIf="c.title !== ''">
                 {{ c.title }}
             </div>
-            <mat-card *ngIf="!nobig"
-                       mat-ripple
-                       class="sub-card head-card"
-                      (click)=OpenEvent(c.events[0])>
+            <mat-card *ngIf="!nobig && c.events[0]" mat-ripple class="sub-card head-card"
+                (click)=OpenEvent(c.events[0])>
 
-                <img mat-card-image
-                     class="head-img"
-                    [src]="c.events[0].image_url" alt=""
-                    (click)=OpenEvent(c.events[0])
-                    [src-fallback]="c.events[0].bodies[0].image_url">
+                <img mat-card-image *ngIf="c.events[0].bodies && c.events[0].bodies.length > 0" class="head-img"
+                    [src]="c.events[0].image_url || (c.events[0].bodies[0]?.image_url)" alt=""
+                    (click)=OpenEvent(c.events[0]) [src-fallback]="c.events[0].bodies[0]?.image_url">
 
                 <div> {{ c.events[0].name }} </div>
                 <span class="subhead">{{ dataService.GetEventSubtitle(c.events[0]) }}</span>
 
-                <img *ngIf="c.events[0].offered_achievements.length > 0"
-                      class="badge img-circle object-cover"
-                      src="assets/badge-medal.png" />
+                <img *ngIf="c.events[0].offered_achievements && c.events[0].offered_achievements.length > 0"
+                    class="badge img-circle object-cover" src="assets/badge-medal.png" />
 
             </mat-card>
 
             <app-event-card *ngFor="let event of (nobig ? c.events : c.events.slice(1, c.events.length))"
-                            (click)=OpenEvent(event)
-                            [event]="event"
-                            overrideClick=true>
+                (click)=OpenEvent(event) [event]="event" overrideClick=true>
             </app-event-card>
         </div>
     </div>
 
 </app-event-sidebar-desktop>
 
 <div class="float-fixed-right-bottom">
-    <button mat-fab
-            *ngIf="dataService.hasRole()"
-            [class.gone]="dataService.isScrollingDown()"
-            class="add-button mat-elevation-z2"
-            [routerLink]="['/add-event']">
+    <button mat-fab *ngIf="dataService.hasRole()" [class.gone]="dataService.isScrollingDown()"
+        class="add-button mat-elevation-z2" [routerLink]="['/add-event']">
         <mat-icon>add</mat-icon>
     </button>
-</div>
+</div>

src/app/page/feed/feed.component.ts

@@ -14,9 +14,10 @@ export const TITLE = 'Feed';
 export class FeedComponent implements OnInit {
   @Input() public containers: IEventContainer[];
   @Input() public nobig = false;
-  public events: IEvent[];
+  public events: IEvent[] = [];
   public selectedEvent: IEvent;
   public error: number;
+  public eventFilter: 'all' | 'mine' | 'verify' = 'all';
 
   constructor(
     public dataService: DataService,
@@ -33,18 +34,34 @@ export class FeedComponent implements OnInit {
     /* Set title */
     this.dataService.setTitle(TITLE);
 
-    /* Get all events */
-    this.dataService.GetAllEvents().subscribe(result => {
+    this.loadEvents();
+  }
+
+  loadEvents() {
+    this.error = null;
+    let obs;
+    if (this.eventFilter === 'mine') {
+      obs = this.dataService.GetMyEvents();
+    } else if (this.eventFilter === 'verify') {
+      obs = this.dataService.GetEventsToVerify();
+    } else {
+      obs = this.dataService.GetAllEventsVerified();
+    }
+
+    obs.subscribe(result => {
       this.events = result.data;
-      if (this.events.length === 0) {
-        this.error = 204;
-      }
-      this.containers = this.MakeContainers(result.data);
+      if (this.events.length === 0) this.error = 204;
+      this.containers = this.MakeContainers(this.events);
     }, (e) => {
       this.error = e.status;
     });
   }
 
+  onFilterChange(filter: 'all' | 'mine' | 'verify') {
+    this.eventFilter = filter;
+    this.loadEvents();
+  }
+
   /** Opens the event-details component */
   OpenEvent(event: IEvent) {
     if (this.dataService.isMobile()) {
@@ -58,8 +75,8 @@ export class FeedComponent implements OnInit {
   MakeContainers(events: IEvent[]): IEventContainer[] {
     /* Initialize */
     for (const event of events) {
-      /* Set fallback images explictly */
-      if (!event.image_url || event.image_url === '') {
+      // Safe fallback image
+      if ((!event.image_url || event.image_url === '') && event.bodies && event.bodies.length > 0) {
         event.image_url = event.bodies[0].image_url;
       }
     }
@@ -77,7 +94,7 @@ export class FeedComponent implements OnInit {
     /** Static first tab */
     result.push({
       title: 'Upcoming',
-      events: events.splice(0, 3)
+      events: events.slice(0, 3)
     });
 
     /** Check if not enough events */
@@ -95,7 +112,7 @@ export class FeedComponent implements OnInit {
       }
       prev.events.push(event);
     }
-    if (prev.events !== []) {
+    if (prev.events.length > 0) {
       result.push(prev);
     }
     return result;