feat(data): use general template for all offers

With help of Object.keys (which is provided to the
template) make offers template general for different
price group types (which are academic or sport course
for now).

See discussions on !2

src/app/modules/data/data.module.ts

@@ -26,8 +26,8 @@ import {DataRoutingModule} from './data-routing.module';
 import {DataProvider} from './data.provider';
 import {DataDetailContentComponent} from './detail/data-detail-content.component';
 import {DataDetailComponent} from './detail/data-detail.component';
-import {AcademicOffersDetailComponent} from './elements/academic-offers-detail.component';
+import {OffersDetailComponent} from './elements/offers-detail.component';
-import {AcademicOffersInListComponent} from './elements/academic-offers-in-list.component';
+import {OffersInListComponent} from './elements/offers-in-list.component';
 import {AddressDetailComponent} from './elements/address-detail.component';
 import {LongInlineText} from './elements/long-inline-text.component';
 import {OriginDetailComponent} from './elements/origin-detail.component';
@@ -63,8 +63,8 @@ import {VideoListItem} from './types/video/video-list-item.component';
 
 @NgModule({
   declarations: [
-    AcademicOffersDetailComponent,
+    OffersDetailComponent,
-    AcademicOffersInListComponent,
+    OffersInListComponent,
     AddressDetailComponent,
     ArticleDetailContentComponent,
     ArticleListItem,

src/app/modules/data/elements/academic-offers-detail.html

@@ -1,36 +0,0 @@
-<ion-card>
-  <ion-card-header>Offers</ion-card-header>
-  <ion-card-content>
-    <div *ngFor="let offer of offers">
-        <p *ngIf="offer.inPlace">
-          <ion-icon name="pin"></ion-icon>
-          <a [routerLink]="['/data-detail', offer.inPlace.uid]">{{offer.inPlace.name}}</a>,&nbsp;
-          <span *ngIf="offer.availabilityStarts">
-            <ion-icon name="calendar"></ion-icon> {{offer.availabilityStarts | date}}
-          </span>
-        </p>
-      <ion-grid>
-        <ion-row *ngIf="offer.prices.student">
-          <ion-col>Students:</ion-col>
-          <ion-col width-20 text-right>
-            <p *ngIf="offer.prices.student"> {{offer.prices.student | currency:'EUR':'symbol':undefined:'de'}}</p>
-          </ion-col>
-        </ion-row>
-        <ion-row *ngIf="offer.prices.employee">
-          <ion-col>Employees:</ion-col>
-          <ion-col width-20 text-right>
-            <p *ngIf="offer.prices.employee"> {{offer.prices.employee | currency:'EUR':'symbol':undefined:'de'}}
-            </p>
-          </ion-col>
-        </ion-row>
-        <ion-row *ngIf="offer.prices.guest">
-          <ion-col>Guests:</ion-col>
-          <ion-col width-20 text-right>
-            <p *ngIf="offer.prices.guest">
-              {{offer.prices.guest | currency:'EUR':'symbol':undefined:'de'}}</p>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </div>
-  </ion-card-content>
-</ion-card>

src/app/modules/data/elements/offers-detail.component.ts

@@ -16,9 +16,10 @@ import {Component, Input} from '@angular/core';
 import {SCAcademicPriceGroup, SCThingThatCanBeOfferedOffer} from '@openstapps/core';
 
 @Component({
-  selector: 'stapps-academic-offers-in-list',
+  selector: 'stapps-offers-detail',
-  templateUrl: 'academic-offers-in-list.html',
+  templateUrl: 'offers-detail.html',
 })
-export class AcademicOffersInListComponent {
+export class OffersDetailComponent {
+  objectKeys = Object.keys;
   @Input() offers: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>;
 }

src/app/modules/data/elements/offers-detail.html

@@ -0,0 +1,22 @@
+<ion-card>
+  <ion-card-header>Offers</ion-card-header>
+  <ion-card-content>
+    <div *ngFor="let offer of offers">
+      <p *ngIf="offer.inPlace">
+        <ion-icon name="pin"></ion-icon>
+        <a [routerLink]="['/data-detail', offer.inPlace.uid]">{{offer.inPlace.name}}</a>,&nbsp;
+        <span *ngIf="offer.availabilityStarts">
+          <ion-icon name="calendar"></ion-icon> {{offer.availabilityStarts | date}}
+        </span>
+      </p>
+      <ion-grid *ngFor="let group of objectKeys(offer.prices)">
+        <ion-row>
+          <ion-col>{{group | titlecase}}</ion-col>
+          <ion-col width-20 text-right>
+            <p> {{offer.prices[group] | currency:'EUR':'symbol':undefined:'de'}}</p>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
+  </ion-card-content>
+</ion-card>

src/app/modules/data/elements/offers-in-list.component.ts

@@ -16,9 +16,9 @@ import {Component, Input} from '@angular/core';
 import {SCAcademicPriceGroup, SCThingThatCanBeOfferedOffer} from '@openstapps/core';
 
 @Component({
-  selector: 'stapps-academic-offers-detail',
+  selector: 'stapps-offers-in-list',
-  templateUrl: 'academic-offers-detail.html',
+  templateUrl: 'offers-in-list.html',
 })
-export class AcademicOffersDetailComponent {
+export class OffersInListComponent {
   @Input() offers: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>;
 }

src/app/modules/data/types/date-series/date-series-detail-content.html

@@ -9,5 +9,5 @@
 </ion-card>
 <stapps-simple-card [title]="'Duration'" [content]="[item.duration | amDuration:'minutes']"></stapps-simple-card>
 <stapps-simple-card *ngIf="item.performers" [title]="'Performers'" [content]="item.performers"></stapps-simple-card>
-<stapps-academic-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-academic-offers-detail>
+<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
 <stapps-origin-detail [origin]="item.origin"></stapps-origin-detail>

src/app/modules/data/types/date-series/date-series-list-item.html

@@ -12,7 +12,7 @@
       <ion-note *ngIf="item.event.type === 'academic event'">{{item.event.categories.join(', ')}}</ion-note>
     </ion-col>
     <ion-col width-20 text-right>
-      <stapps-academic-offers-in-list *ngIf="item.offers" [offers]="item.offers"></stapps-academic-offers-in-list>
+      <stapps-offers-in-list *ngIf="item.offers" [offers]="item.offers"></stapps-offers-in-list>
     </ion-col>
   </ion-row>
 </ion-grid>

src/app/modules/data/types/dish/dish-detail-content.html

@@ -9,7 +9,7 @@
     </p>
   </ion-card-content>
 </ion-card>
-<stapps-academic-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-academic-offers-detail>
+<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
 <stapps-simple-card *ngIf="item.additives" [title]="'Additives'" [content]="translator.translate(item).additives().join(', ')">
 </stapps-simple-card>
 <ion-card *ngIf="item.nutrition">

src/app/modules/data/types/dish/dish-list-item.html

@@ -6,7 +6,7 @@
       <p>{{item.categories.join(',')}}</p>
     </ion-col>
     <ion-col width-20 text-right>
-      <stapps-academic-offers-in-list *ngIf="item.offers" [offers]="item.offers"></stapps-academic-offers-in-list>
+      <stapps-offers-in-list *ngIf="item.offers" [offers]="item.offers"></stapps-offers-in-list>
     </ion-col>
   </ion-row>
 </ion-grid>

src/app/modules/data/types/video/video-detail-content.html

@@ -3,4 +3,4 @@
 <stapps-simple-card *ngIf="item.datePublished" [title]="'Authors'" [content]="item.authors"></stapps-simple-card>
 <stapps-simple-card *ngIf="item.datePublished" [title]="'Published'"
 [content]="item.datePublished | amDateFormat:'DD. MMM YYYY'"></stapps-simple-card>
-<stapps-academic-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-academic-offers-detail>
+<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>