Merge branch 'main' into enh/events-e2e-test-confirm-button

haibun-e2e-tests/local/backgrounds/environment/service.feature

@@ -4,4 +4,5 @@ Set about to http://localhost:4200/about
 Set gctools to https://github.com/gctools-outilsgc
 Set privacy to http://localhost:4200/privacy
 Set statistics to http://localhost:4200/stats
-Set terms to http://localhost:4200/terms
+Set terms to http://localhost:4200/terms
+Set events to http://localhost:4200/events

haibun-e2e-tests/local/backgrounds/pages/site.feature

@@ -17,7 +17,8 @@ Set Privacy to //*[@id="gcc-footer-privacy-btn"]
 Set Terms to //*[@id="gcc-footer-terms-btn"]
 Set FAQs to //*[@id="gcc-footer-faqs-btn"]
 Set Help to //*[@id="gcc-footer-support-btn"]
+Set Events to //*[@id="gcc-events-more-events"]
 Set ConfirmEvent to //*[contains(@ng-reflect-message, "Confirm event")]
 Set RemoveConfirmationEvent to //*[contains(@ng-reflect-message, "Remove confirmation")]
 Set DeclineEvent to //*[contains(@ng-reflect-message, "Decline event")]
-Set RescindDeclinationEvent to //*[contains(@ng-reflect-message, "Rescind declination")]
+Set RescindDeclinationEvent to //*[contains(@ng-reflect-message, "Rescind declination")]

haibun-e2e-tests/local/features/events/more-events.feature

@@ -0,0 +1,10 @@
+
+Feature: Event description feature 
+
+    Backgrounds: environment/service, pages/site
+
+    go to the home webpage
+    click the button Events
+    be on the events webpage
+
+    page is accessible accepting serious 0 and moderate 0 

src/app/core/models/location.model.ts

@@ -1,17 +1,113 @@
-export class Location {
+import { ILocationForm } from 'src/app/shared/components/location-form/location-form.component';
+
+export class Location implements ILocationForm {
   address: string;
+  postalCode: string;
   city: string;
-  province: string;
+  province: IProvince;
   country: string;
 
-  constructor(address: string, city: string, province: string, country: string = 'Canada') {
+  constructor(address: string, postalCode: string, city: string, province: IProvince, country: string = 'Canada') {
     this.address = address;
+    this.postalCode = postalCode;
     this.city = city;
     this.province = province;
     this.country = country;
   }
 
   toString(): string {
-    return `${this.address}, ${this.city}, ${this.province}`;
+    return `${this.address} ${this.postalCode}, ${this.city}, ${this.province.abbreviation}`;
   }
 }
+
+export interface IProvince {
+  titleEn: string;
+  titleFr: string;
+  abbreviation: string;
+}
+
+export const Provinces: IProvince[] = [
+  {
+    titleEn: 'Alberta',
+    titleFr: 'Alberta',
+    abbreviation: 'AB',
+  },
+  {
+    titleEn: 'British Columbia',
+    titleFr: 'Colombie-Britannique',
+    abbreviation: 'BC',
+  },
+  {
+    titleEn: 'Manitoba',
+    titleFr: 'Manitoba',
+    abbreviation: 'MB',
+  },
+  {
+    titleEn: 'New Brunswick',
+    titleFr: 'Nouveau-Brunswick',
+    abbreviation: 'NB',
+  },
+  {
+    titleEn: 'Newfoundland and Labrador',
+    titleFr: 'Terre-Neuve-et-Labrador',
+    abbreviation: 'NL',
+  },
+  {
+    titleEn: 'Northwest Territories',
+    titleFr: 'Territoires du Nord-Ouest',
+    abbreviation: 'NT',
+  },
+  {
+    titleEn: 'Nova Scotia',
+    titleFr: 'Nouvelle-Écosse',
+    abbreviation: 'NS',
+  },
+  {
+    titleEn: 'Nunavut',
+    titleFr: 'Nunavut',
+    abbreviation: 'NU',
+  },
+  {
+    titleEn: 'Ontario',
+    titleFr: 'Ontario',
+    abbreviation: 'ON',
+  },
+  {
+    titleEn: 'Prince Edward Island',
+    titleFr: 'Île-du-Prince-Édouard',
+    abbreviation: 'PE',
+  },
+  {
+    titleEn: 'Quebec',
+    titleFr: 'Québec',
+    abbreviation: 'QC',
+  },
+  {
+    titleEn: 'Saskatchewan',
+    titleFr: 'Saskatchewan',
+    abbreviation: 'SK',
+  },
+  {
+    titleEn: 'Yukon Territory',
+    titleFr: 'Territoire du Yukon',
+    abbreviation: 'YT',
+  },
+];
+Object.freeze(Provinces);
+
+export class Province {
+  static AB: IProvince = Provinces[0];
+  static BC: IProvince = Provinces[1];
+  static MB: IProvince = Provinces[2];
+  static NB: IProvince = Provinces[3];
+  static NL: IProvince = Provinces[4];
+  static NT: IProvince = Provinces[5];
+  static NS: IProvince = Provinces[6];
+  static NU: IProvince = Provinces[7];
+  static ON: IProvince = Provinces[8];
+  static PE: IProvince = Provinces[9];
+  static QC: IProvince = Provinces[10];
+  static SK: IProvince = Provinces[11];
+  static YT: IProvince = Provinces[12];
+}
+Object.freeze(Province);

src/app/core/services/event.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Event } from 'src/app/features/events/models/event';
-import { Location } from '../models/location.model';
+import { Location, Province } from '../models/location.model';
 import { PeopleService } from './people.service';
 
 import { LoremIpsum } from 'lorem-ipsum';
@@ -145,11 +145,11 @@ export class EventService implements IListService {
 
   private randomLocation(): Location {
     const addresses: Location[] = [
-      new Location('2910 Woodroffe Ave', 'Ottawa', 'Ontario'),
-      new Location('4230 Innes Rd', 'Ottawa', 'Ontario'),
-      new Location('2440 Bank St', 'Ottawa', 'Ontario'),
-      new Location('464 Rideau St', 'Ottawa', 'Ontario'),
-      new Location('464 Bank St', 'Ottawa', 'Ontario'),
+      new Location('2910 Woodroffe Ave', 'K2C2C7', 'Ottawa', Province.ON),
+      new Location('4230 Innes Rd', 'K2C2C7', 'Ottawa', Province.ON),
+      new Location('2440 Bank St', 'K2C2C7', 'Ottawa', Province.ON),
+      new Location('464 Rideau St', 'K2C2C7', 'Ottawa', Province.ON),
+      new Location('464 Bank St', 'K2C2C7', 'Ottawa', Province.ON),
     ];
     return addresses[Math.floor(Math.random() * addresses.length)];
   }

src/app/core/services/people.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Person } from '../models/person.model';
 import { Observable } from 'rxjs';
-import { Location } from '../models/location.model';
+import { Location, Province } from '../models/location.model';
 import { IListService } from '../interfaces/list-service.interface';
 import { ProfileCardComponent } from 'src/app/features/profile/components/profile-card/profile-card.component';
 
@@ -110,11 +110,11 @@ export class PeopleService implements IListService {
 
   private randomAddress(): Location {
     const addresses: Location[] = [
-      new Location('2910 Woodroffe Ave', 'Ottawa', 'Ontario'),
-      new Location('4230 Innes Rd', 'Ottawa', 'Ontario'),
-      new Location('2440 Bank St', 'Ottawa', 'Ontario'),
-      new Location('464 Rideau St', 'Ottawa', 'Ontario'),
-      new Location('464 Bank St', 'Ottawa', 'Ontario'),
+      new Location('2910 Woodroffe Ave', 'K2C2C7', 'Ottawa', Province.ON),
+      new Location('4230 Innes Rd', 'K2C2C7', 'Ottawa', Province.ON),
+      new Location('2440 Bank St', 'K2C2C7', 'Ottawa', Province.ON),
+      new Location('464 Rideau St', 'K2C2C7', 'Ottawa', Province.ON),
+      new Location('464 Bank St', 'K2C2C7', 'Ottawa', Province.ON),
     ];
     return addresses[Math.floor(Math.random() * addresses.length)];
   }

src/app/features/calendar/calendar.component.ts

@@ -35,6 +35,7 @@ import { Subscription } from 'rxjs';
 import { DebounceService } from 'src/app/core/services/debounce.service';
 import { Event } from 'src/app/features/events/models/event';
 import { FormGroup } from '@angular/forms';
+import { Province } from 'src/app/core/models/location.model';
 
 @Component({
   selector: 'app-calendar',
@@ -71,7 +72,13 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
     eventName: '',
     eventLanguage: 'Bilingual',
     eventDescription: '',
-    eventLocation: '',
+    eventLocation: {
+      address: '',
+      postalCode: '',
+      city: '',
+      province: Province.ON,
+      country: 'Canada',
+    },
     eventOnlinePlatform: '',
     eventDuration: 'Single',
     eventStartDate: '',
@@ -333,7 +340,13 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
       eventName: '',
       eventLanguage: 'Bilingual',
       eventDescription: '',
-      eventLocation: '',
+      eventLocation: {
+        address: '',
+        postalCode: '',
+        city: '',
+        province: Province.ON,
+        country: 'Canada',
+      },
       eventOnlinePlatform: '',
       eventDuration: 'Single',
       eventStartDate: '',

src/app/features/calendar/components/calendar-events/calendar-events.component.html

@@ -60,7 +60,7 @@
           <div>
             {{ event.eventType }}
           </div>
-          <div>{{ event.location.address }}, {{ event.location.city }}, {{ event.location.province }}</div>
+          <div>{{ event.location.address }}, {{ event.location.city }}, {{ event.location.province.abbreviation }}</div>
         </div>
 
         <div class="actions">

src/app/features/events/components/event-card/event-card.component.spec.ts

@@ -8,6 +8,7 @@ import { Location } from 'src/app/core/models/location.model';
 import { Person } from 'src/app/core/models/person.model';
 import { Group } from 'src/app/features/groups/models/group';
 import { Event } from '../../models/event';
+import { Province } from 'src/app/core/models/location.model';
 
 describe('EventCardComponent', () => {
   let component: EventCardComponent;
@@ -41,12 +42,12 @@ describe('EventCardComponent', () => {
       title: 'Test Event',
       eventType: 'Hybrid',
       description: 'Test Event Description',
-      location: new Location('123 Main St.', 'Ottawa', 'Ontario'),
+      location: new Location('123 Main St.', 'k2c2c7', 'Ottawa', Province.ON),
       language: 'English',
       tags: [''],
       startDate: new Date(),
       endDate: new Date(),
-      author: new Person('0', 'Shea', 'Dougherty-Gill', 'Web Developer', new Location('123 Main St.', 'Ottawa', 'Ontario')),
+      author: new Person('0', 'Shea', 'Dougherty-Gill', 'Web Developer', new Location('123 Main St.', 'k2c2c7', 'Ottawa', Province.ON)),
       authoredDate: new Date(),
       canceled: false,
       image: '../assets/image/group-banner.png',

src/app/features/events/components/event/event.component.html

@@ -85,7 +85,7 @@ <h3>
       <p *ngIf="!loading">
         {{ model.location.address }}
       </p>
-      <p *ngIf="!loading">{{ model.location.city }}, {{ model.location.province }}</p>
+      <p *ngIf="!loading">{{ model.location.city }}, {{ model.location.province.abbreviation }}</p>
       <ngx-skeleton-loader *ngIf="loading" count="2" appearance="line" animation="progress" class="loading-section"></ngx-skeleton-loader>
     </section>
 

src/app/features/events/models/event.ts

@@ -1,5 +1,5 @@
 import { Person } from 'src/app/core/models/person.model';
-import { Location } from 'src/app/core/models/location.model';
+import { Location, Province } from 'src/app/core/models/location.model';
 import { Group } from '../../groups/models/group';
 import { IEventForm } from 'src/app/shared/components/event-form/event-form.component';
 import { format, isSameDay } from 'date-fns';
@@ -9,7 +9,7 @@ export class Event {
   title: string = '';
   eventType: string = 'Hybrid';
   description: string = '';
-  location: Location = new Location('', '', '');
+  location: Location = new Location('', '', '', Province.ON);
   language: string = 'English';
   tags: [string] = [''];
   startDate: Date = new Date();
@@ -36,7 +36,7 @@ export class Event {
       eventName: this.title,
       eventLanguage: this.language,
       eventDescription: this.description,
-      eventLocation: this.location.toString(),
+      eventLocation: this.location,
       eventOnlinePlatform: this.onlinePlatform,
       eventDuration: sameDay ? 'Single' : 'Multi',
       eventStartDate: format(this.startDate, 'y-MM-dd'),
@@ -54,10 +54,13 @@ export class Event {
     event.title = eventForm.eventName;
     event.eventType = eventForm.eventType;
     event.description = eventForm.eventDescription;
-
-    const addCityProv = eventForm.eventLocation.split(',');
-    event.location = new Location(addCityProv[0].trim(), addCityProv[1].trim(), addCityProv[2].trim());
-
+    event.location = new Location(
+      eventForm.eventLocation.address,
+      eventForm.eventLocation.postalCode,
+      eventForm.eventLocation.city,
+      eventForm.eventLocation.province,
+      eventForm.eventLocation.country
+    );
     event.language = eventForm.eventLanguage;
     event.tags = this.tags;
     event.startDate = new Date([eventForm.eventStartDate, eventForm.eventStartTime].join(' '));
@@ -84,10 +87,13 @@ export class Event {
     event.title = eventForm.eventName;
     event.eventType = eventForm.eventType;
     event.description = eventForm.eventDescription;
-
-    // TODO: Setup location form for use in the event form instead of a string.
-    event.location = new Location(eventForm.eventLocation, eventForm.eventLocation, eventForm.eventLocation);
-
+    event.location = new Location(
+      eventForm.eventLocation.address,
+      eventForm.eventLocation.postalCode,
+      eventForm.eventLocation.city,
+      eventForm.eventLocation.province,
+      eventForm.eventLocation.country
+    );
     event.language = eventForm.eventLanguage;
     event.tags = [''];
     event.startDate = new Date([eventForm.eventStartDate, eventForm.eventStartTime].join(' '));

src/app/features/home/home.component.html

@@ -29,7 +29,7 @@
     <!-- Events -->
     <section>
       <app-event-list [model]="events" [isLoading]="loadingEvents" (confirm)="confirmEvent($event)" (decline)="declineEvent($event)"> </app-event-list>
-      <div class="click-for-more">
+      <div class="click-for-more" id="gcc-events-more-events">
         <a routerLink="{{ '/' + routes.Events }}">
           {{ translations.features.home.moreEvents | translate }}
         </a>

src/app/shared/components/event-form/event-form.component.html

@@ -78,17 +78,7 @@
   >
   </app-editor>
 
-  <app-input
-    *ngIf="model.eventType !== eventType.Online"
-    [value]="model.eventLocation"
-    [name]="'eventLocation'"
-    formControlName="eventLocation"
-    [control]="form.controls['eventLocation'] | formControl"
-    [label]="translations.forms.event.location | translate"
-    [placeholder]="translations.forms.placeholder | translate"
-    [required]="true"
-  >
-  </app-input>
+  <app-location-form [(form)]="form" [model]="model.eventLocation"></app-location-form>
 
   <app-input
     *ngIf="model.eventType !== eventType.InPerson"