feat: implement contact form

src/app/pages/static/imprint/imprint.component.html

@@ -1,27 +1,16 @@
 <section class="content-narrow">
-    <h1>Contact ed impressum</h1>
+    <h1>Contact</h1>
 
-    <p>Tar dumondas davart il cuntegn e la moderaziun da quel pudais Vus gugent contactar:</p>
+    <app-contact-form/>
 
-    <p>
-        RTR Radiotelevisiun Svizra Rumantscha<br>
-        Via da Masans 2<br>
-        7000 Cuira<br>
-        Tel. 058 136 30 00<br>
-        <a href="mailto:[email protected]" target="_blank">[email protected]</a><br>
-        <a href="https://www.rtr.ch" target="_blank">www.rtr.ch</a>
-    </p>
-
-    <p style="margin-top: 3rem;">Autras dumondas en connex cun la pagina pudais Vus trametter a:</p>
+    <h1>Impressum</h1>
 
     <p>
         Uniun da las Rumantschas <br>
         e dals Rumantschs en la Bassa<br>
         Roman Pfister<br>
         Zimikerried 11<br>
         8603 Schwerzenbach<br>
-        <a href="mailto:[email protected]"
-           target="_blank">[email protected]</a><br>
-        <a href="https://www.uniun-urb.ch" target="_blank">www.uniun-urb.ch</a>
+        <a href="mailto:[email protected]" target="_blank">[email protected]</a><br>
     </p>
 </section>

src/app/shared/components/forms/contact-form/contact-form.component.html

@@ -0,0 +1,70 @@
+<form [formGroup]="f" (ngSubmit)="onSubmit()">
+    <ngb-alert [type]="message.type" *ngIf="message.title.length > 0">
+        <b>{{ message.title }}.</b> {{ message.message }}
+    </ngb-alert>
+
+    <div class="mb-3">
+        <label for="name" class="form-label">num / prenum * </label>
+        <input formControlName="name" type="text" class="form-control" id="name"
+               [class.is-invalid]="isFieldInvalid('name')">
+        <div class="invalid-feedback" *ngIf="isFieldInvalid('name')">
+            Endatescha p.pl. in num.
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="email" class="form-label">adressa dad e-mail * </label>
+        <input formControlName="email" type="text" class="form-control" id="email"
+               [class.is-invalid]="isFieldInvalid('email')">
+        <div class="invalid-feedback" *ngIf="isFieldInvalid('email')">
+            Endatescha p.pl. ina adressa dad e-mail.
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="phone" class="form-label">telefon * </label>
+        <input formControlName="phone" type="text" class="form-control" id="phone"
+               [class.is-invalid]="isFieldInvalid('phone')">
+        <div class="invalid-feedback" *ngIf="isFieldInvalid('phone')">
+            Endatescha p.pl. ina adressa dad e-mail.
+        </div>
+    </div>
+
+    <div class="mb-3">
+        tip da vossa dumonda:<br>
+        <input class="form-check-input" type="radio" name="type" id="typeContent"
+               formControlName="type" value="content">
+        <label class="form-check-label" for="typeContent">
+            cuntegn / moderaziun
+        </label>
+        <br>
+
+        <input class="form-check-input" type="radio" name="type" id="typeTechnical"
+               formControlName="type" value="technical">
+        <label class="form-check-label" for="typeTechnical">
+            dumonda tecnica
+        </label>
+        <br>
+
+        <input class="form-check-input" type="radio" name="type" id="typeOther"
+               formControlName="type" value="other">
+        <label class="form-check-label" for="typeOther" [class.is-invalid]="isFieldInvalid('type')">
+            autra dumonda
+        </label>
+        <div class="invalid-feedback" *ngIf="isFieldInvalid('type')">
+            Tscherna in tip.
+        </div>
+    </div>
+
+
+    <div class="mb-3">
+        <label for="message" class="form-label">messadi * </label>
+        <textarea formControlName="message" class="form-control" id="message" style="height: 150px"
+                  [class.is-invalid]="isFieldInvalid('message')"></textarea>
+        <div class="invalid-feedback" *ngIf="isFieldInvalid('message')">
+            Endatescha p.pl. in messadi.
+        </div>
+    </div>
+
+    <button type="submit" class="clndr accent" [disabled]="isSending">Trametter</button>
+</form>

src/app/shared/components/forms/contact-form/contact-form.component.scss

@@ -0,0 +1,3 @@
+.form-check-label {
+    margin-left: 8px;
+}

src/app/shared/components/forms/contact-form/contact-form.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactFormComponent } from './contact-form.component';
+
+describe('ContactFormComponent', () => {
+  let component: ContactFormComponent;
+  let fixture: ComponentFixture<ContactFormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ContactFormComponent]
+    });
+    fixture = TestBed.createComponent(ContactFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/forms/contact-form/contact-form.component.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ContactFormService } from '../../../services/contact-form.service';
+import { Message } from '../../../data/notifications';
+
+@Component({
+    selector: 'app-contact-form',
+    templateUrl: './contact-form.component.html',
+    styleUrls: ['./contact-form.component.scss']
+})
+export class ContactFormComponent {
+    f: FormGroup = new FormGroup<any>({});
+    message = new Message('danger', '', '');
+    isSending = false;
+
+    constructor(
+        private contactFormService: ContactFormService,
+    ) {
+        this.initForm();
+    }
+
+    onSubmit() {
+        this.f.markAllAsTouched();
+
+        if (!this.f.valid) {
+            return;
+        }
+
+        this.isSending = true;
+
+        this.contactFormService.sendForm(this.f.value).subscribe(form => {
+            this.message.type = 'success';
+            this.message.title = 'Success';
+            this.message.message = 'Tramess cun success il formular da contact.'
+
+            this.initForm();
+            this.isSending = false;
+        }, error => {
+            this.message.type = 'danger';
+            this.message.title = 'Errur';
+            this.message.message = 'Impussibel da trametter il formular. Emprova pli tard anc ina giada.'
+
+            this.isSending = false;
+        });
+    }
+
+    isFieldInvalid(fieldName: string) {
+        return this.f.get(fieldName)!.invalid && (this.f.get(fieldName)!.dirty || this.f.get(fieldName)!.touched);
+    }
+
+    private initForm() {
+        this.f = new FormGroup({
+            name: new FormControl('', [Validators.required]),
+            email: new FormControl('', [Validators.required, Validators.email]),
+            phone: new FormControl('', [Validators.required]),
+            type: new FormControl('', [Validators.required]),
+            message: new FormControl('', [Validators.required])
+        });
+    }
+}

src/app/shared/data/contact-form.ts

@@ -0,0 +1,7 @@
+export class ContactForm {
+    name?: string;
+    email?: string;
+    phone?: string;
+    type?: string;
+    message?: string;
+}

src/app/shared/services/contact-form.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ContactFormService } from './contact-form.service';
+
+describe('ContactFormService', () => {
+  let service: ContactFormService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ContactFormService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/services/contact-form.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from '../../../environments/environment';
+import { ContactForm } from '../data/contact-form';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ContactFormService {
+    private basePath = 'contact';
+
+    constructor(private httpClient: HttpClient,) {
+    }
+
+    public sendForm(contactForm: ContactForm): Observable<ContactForm> {
+        const body: any = Object.assign({}, contactForm);
+        return this.httpClient.post<ContactForm>(this.getUrl('contact-form'), body);
+    }
+
+    getUrl(type: string) {
+        return environment.apiBasePath.concat(this.basePath.concat('/' + type));
+    }
+}

src/app/shared/shared.module.ts

@@ -80,6 +80,7 @@ import { ContactFormComponent } from './components/forms/contact-form/contact-fo
         ShortDomainPipe,
         InfoButtonComponent,
         IframeCodeGeneratorComponent,
+        ContactFormComponent,
     ]
 })
 export class SharedModule {