[986] Added component showing all offers that user joined

frontend/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { HomepageOfferComponent } from 'app/components/homepage-offer/homepage-o
 import { LoginComponent } from 'app/components/login/login.component';
 import { MessagesComponent } from 'app/components/messages/messages.component';
 import { CreateOfferComponent } from 'app/components/offers/create-offer/create-offer.component';
+import { OffersBoxComponent } from 'app/components/offers/offers-box/offers-box.component';
 import { OfferDetailComponent } from 'app/components/offers/offer-detail/offer-detail.component';
 import { OrganizationComponent } from 'app/components/organization/organization.component';
 import { OrganizationContactComponent } from 'app/components/organization/organization-contact/organization-contact.component';
@@ -213,7 +214,8 @@ registerLocaleData(localePl);
     ContactComponent,
     FormErrorComponent,
     OrganizationsListComponent,
-    UserProfileComponent
+    UserProfileComponent,
+    OffersBoxComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'volontulo' }),

frontend/src/app/components/account/account.component.html

@@ -14,7 +14,7 @@ <h3 class="card-header">Profil</h3>
       <div class="card">
         <h3 class="card-header">Aktywność</h3>
         <div class="card-body">
-          <p class="card-text">Zgłoś się w jednej z dostępnych ofert wolontariatu i zapełnij to miejsce.</p>
+          <volontulo-offers-box></volontulo-offers-box>
         </div>
       </div>
     </div>

frontend/src/app/components/homepage-offer/homepage-offer.component.html

@@ -5,7 +5,7 @@
   </div>
   <div class="card-body">
     <h2 class="card-title offer-title">
-      <a [routerLink]="['offers', offer.slug, offer.id]" class="offer-link">{{ offer.title }}</a>
+      <a [routerLink]="['/offers', offer.slug, offer.id]" class="offer-link">{{ offer.title }}</a>
     </h2>
     <ul class="list-group list-group-flush">
       <li class="list-group-item">
@@ -21,7 +21,7 @@ <h2 class="card-title offer-title">
       </li>
       <div class="offer-organizer">
         <span>Organizator:
-        <a [routerLink]="['organizations', offer.organization.slug, offer.organization.id]">
+        <a [routerLink]="['/organizations', offer.organization.slug, offer.organization.id]">
         {{ offer.organization.name }}</a></span>
       </div>
     </ul>

frontend/src/app/components/offers/offers-box/offers-box.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="(offers$ | async) as offers">
+  <div *ngIf="offers.length > 0; else noOffers">
+    <div class="card-deck row">
+      <div class="col-12 col-sm-6 col-lg-4 pb-3" *ngFor="let offer of offers">
+        <volontulo-homepage-offer [offer]="offer" class="card mx-0 h-20"></volontulo-homepage-offer>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #noOffers>
+  <p class="card-text">Zgłoś się w jednej z dostępnych ofert wolontariatu i zapełnij to miejsce.</p>
+</ng-template>

frontend/src/app/components/offers/offers-box/offers-box.component.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { HomepageOfferComponent } from 'app/components/homepage-offer/homepage-offer.component';
+import { OffersBoxComponent } from 'app/components/offers/offers-box/offers-box.component';
+import { OffersService } from 'app/services/offers.service';
+
+describe('OffersBoxComponent', () => {
+  let component: OffersBoxComponent;
+  let fixture: ComponentFixture<OffersBoxComponent>;
+  let offersService: OffersService;
+  let httpClient: HttpClient;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule, HttpClientTestingModule],
+      declarations: [
+        OffersBoxComponent,
+        HomepageOfferComponent
+      ],
+      providers: [OffersService]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OffersBoxComponent);
+    component = fixture.componentInstance;
+    offersService = TestBed.get(OffersService);
+    httpClient = TestBed.get(HttpClient);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/offers/offers-box/offers-box.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { OffersService } from 'app/services/offers.service';
+import { Offer } from 'app/models/offer.model';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'volontulo-offers-box',
+  templateUrl: './offers-box.component.html',
+  providers: [OffersService]
+})
+export class OffersBoxComponent implements OnInit {
+  public offers$: Observable<Offer[]>;
+
+  constructor(private offersService: OffersService) { }
+
+  ngOnInit() {
+    this.offers$ = this.offersService.getUserOffers();
+  }
+}

frontend/src/app/services/offers.service.ts

@@ -35,4 +35,8 @@ export class OffersService {
     return this.http.put(`${environment.apiRoot}/offers/${id}/`, offer);
   }
 
+  getUserOffers(): Observable<Offer[]> {
+    return this.http.get<Offer[]>(`${environment.apiRoot}/joined-offers/`)
+      .map(offers => offers.map(offer => loadDefaultImage(offer)));
+  }
 }