Offer join form #982

backend/apps/volontulo/tests/views/api/offers/test_join.py

@@ -0,0 +1,43 @@
+# -*- coding: utf-8 -*-
+
+"""
+.. module:: test_join
+"""
+
+from rest_framework import status
+from rest_framework.test import APITestCase
+
+from apps.volontulo.tests.views.offers.commons import TestOffersCommons
+
+
+class TestAuthenticatedUserJoinOffer(TestOffersCommons, APITestCase):
+
+    """Tests for REST API's join offer view for authenticated user."""
+
+    def setUp(self):
+        """Set up each test."""
+        super(TestAuthenticatedUserJoinOffer, self).setUp()
+        self.client.login(username='admin@example.com', password='123admin')
+
+    def test_user_join_offer_authenticated(self):
+        """Test offer's created status for admin user."""
+        response = self.client.post('/api/offers/1/join/')
+
+        self.assertEqual(response.status_code, status.HTTP_201_CREATED)
+
+    def test_user_join_not_existing_offer(self):
+        """Test offer's 404 status for non existing offer."""
+        response = self.client.post('/api/offers/1999999999999/join/')
+
+        self.assertEqual(response.status_code, status.HTTP_404_NOT_FOUND)
+
+
+class TestNotAuthenticatedUserJoinOffer(TestOffersCommons, APITestCase):
+
+    """Tests for REST API's join offer view for not authenitcated user"""
+
+    def test_user_join_offer_not_authenticated(self):
+        """Test offer's forbidden status for not logged in user."""
+        response = self.client.post('/api/offers/1/join/')
+
+        self.assertEqual(response.status_code, status.HTTP_403_FORBIDDEN)

backend/apps/volontulo/views/api.py

@@ -225,6 +225,18 @@ def get_queryset(self):
             )
         return qs.filter(offer_status='published')
 
+    @detail_route(methods=['POST'], permission_classes=(IsAuthenticated,))
+    # pylint: disable=invalid-name
+    def join(self, request, pk):
+        """Endpoint to join offer by current user"""
+        offer = get_object_or_404(self.get_queryset(), id=pk)
+        offer.volunteers.add(request.user)
+
+        return Response(self.serializer_class(
+            offer,
+            context={'request': request}
+        ).data, status=201)
+
 
 class OrganizationViewSet(viewsets.ModelViewSet):
 

frontend/src/app/app.module.ts

@@ -54,6 +54,7 @@ import { ContactResolver } from './resolvers';
 import { FormErrorComponent } from './form-error/form-error.component';
 import { ContactService } from './contact.service';
 import { UserProfileComponent } from './user-profile/user-profile.component';
+import { OfferJoinFormComponent } from './offers/offer-join-form/offer-join-form.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 Raven.config(environment.sentryDSN).install();
@@ -166,6 +167,11 @@ const appRoutes: Routes = [
     component: UserProfileComponent,
     canActivate: [LoggedInGuard],
   },
+  {
+    path: 'offers/:offerSlug/:offerId/join',
+    component: OfferJoinFormComponent,
+    canActivate: [LoggedInGuard],
+  },
   {
     path: '**',
     component: RedirectComponent
@@ -212,7 +218,8 @@ registerLocaleData(localePl);
     ContactComponent,
     FormErrorComponent,
     OrganizationsListComponent,
-    UserProfileComponent
+    UserProfileComponent,
+    OfferJoinFormComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'volontulo' }),

frontend/src/app/homepage-offer/offers.service.ts

@@ -35,4 +35,8 @@ export class OffersService {
     return this.http.put(`${environment.apiRoot}/offers/${id}/`, offer);
   }
 
+  joinOffer(id: number, message: string) {
+    return this.http.post(`${environment.apiRoot}/offers/${id}/join/`, {message}, {observe: 'response'});
+  }
+
 }

frontend/src/app/offers/offer-detail/offer-detail.component.html

@@ -68,7 +68,7 @@ <h2>Pomagasz już w tej inicjatywie</h2>
                 <div class="alert alert-danger">
                     <h2>Możesz pomóc?</h2>
                     <p>Twoja pomoc jest ważna. Potrzebujemy Ciebie!</p>
-                    <a class="btn btn-light" href="{{ getJoinViewUrl(offer) }}"
+                    <a [routerLink]="['/offers', offer.slug, offer.id,'join']" class="btn btn-light"
                     >Zgłoś się na ten wolontariat</a>
                 </div>
              </ng-template>

frontend/src/app/offers/offer-join-form/offer-join-form.component.html

@@ -0,0 +1,35 @@
+<div class="container">
+  <form [formGroup]="joinForm" (ngSubmit)="onSubmit()">
+    <div class="form-group row">
+      <label class="col-form-label" for="{{ email }}">Email:</label>
+        <div class="col-md-5">
+          <input disabled class="form-control" formControlName="applicant_email" id="{{ email }}"/>
+        </div>
+      <label class="col-form-label" for="{{ fullname }}">Imię i nazwisko:</label>
+        <div class="col-md-5">
+          <input disabled class="form-control" formControlName="applicant_name" id="{{ fullname }}"/>
+        </div>
+    </div>
+    <div class="form-group row">
+      <label class="col-form-label" for="{{ phone }}">Telefon:</label>
+        <div class="col-md-5">
+          <input disabled class="form-control" formControlName="phone_no"/>
+        </div>
+    </div>
+    <div class="form-group-row">
+      <label class="col-md-3 col-form-label" for="{{ message }}">Możliwe uwagi:</label>
+      <div class="col-md-9">
+        <textarea class="form-control" rows="3" formControlName="message"></textarea>
+        <volontulo-form-error [fc]="joinForm.controls.message" [minLength]="10" [maxLength]="2000"></volontulo-form-error>
+      </div>
+    </div>
+    <div class="form-group row">
+      <div>
+        <button type="submit" class="btn-primary">
+          Wyślij
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+

frontend/src/app/offers/offer-join-form/offer-join-form.component.ts

@@ -0,0 +1,67 @@
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {HttpClient} from '@angular/common/http';
+import {Location} from '@angular/common'
+
+import {ActivatedRoute} from '@angular/router';
+import {AuthService} from '../../auth.service';
+import {OffersService} from 'app/homepage-offer/offers.service';
+import {User} from '../../user';
+import {UserService} from '../../user.service';
+
+@Component({
+  selector: 'volontulo-offer-join-form',
+  templateUrl: './offer-join-form.component.html'
+})
+
+export class OfferJoinFormComponent implements OnInit {
+  public joinForm: FormGroup = this.fb.group({
+    applicant_email: [''],
+    applicant_name: [''],
+    message: ['', [Validators.minLength(10), Validators.maxLength(2000)]],
+    phone_no: [''],
+  });
+
+  public submitEnabled = false;
+  public success: null | boolean = null;
+  public offerId: number;
+  public error;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private userService: UserService,
+    private httpClient: HttpClient,
+    private offersService: OffersService,
+    private location: Location ,
+  ) {
+  }
+
+  ngOnInit() {
+    this.authService.user$
+      .subscribe(
+        (user: User) => {
+          this.joinForm.controls.applicant_email.setValue(user.email);
+          this.joinForm.controls.applicant_name.setValue(this.userService.getFullName(user));
+          this.joinForm.controls.phone_no.setValue(user.phoneNo);
+        }
+      );
+
+    this.activatedRoute.params
+      .switchMap(params => this.offerId = params.offerId)
+      .subscribe()
+  }
+
+  onSubmit() {
+    if (this.joinForm.valid) {
+      this.submitEnabled = true;
+
+      this.offersService.joinOffer(this.offerId, this.joinForm.value.message).subscribe(
+        response => {
+          if (response.status === 201) {
+            this.location.back()}}
+      )
+    }
+  }
+}