Client: Add form validation and request handling

client/src/app/shared/validators/custom-validators.ts

@@ -1,4 +1,4 @@
-import { FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
 
 /**
  * Constant to validate a `duration` field.
@@ -17,3 +17,13 @@ export const durationValidator: ValidatorFn = (control: FormGroup): ValidationEr
     const regExp = /^\s*([0-9]+)(:)?([0-5][0-9]?)?\s*[h|m]?$/g;
     return regExp.test(control.value) || control.value === '' ? null : { valid: false };
 };
+
+export function isNumberRange(minCtrlName: string, maxCtrlName: string): ValidatorFn {
+    return (formControl: AbstractControl): { [key: string]: any } => {
+        const min = formControl.get(minCtrlName).value;
+        const max = formControl.get(maxCtrlName).value;
+        if (min > max) {
+            return { rangeError: true };
+        }
+    };
+}

client/src/app/site/assignments/modules/assignment-poll/components/assignment-poll-meta-info/assignment-poll-meta-info.component.html

@@ -40,10 +40,10 @@
         <!-- Amount of Votes -->
         <small *ngIf="poll.max_votes_amount > 1">
             <ng-container *ngIf="poll.max_votes_amount !== poll.min_votes_amount">
-                <span> {{ pollPropertyVerbose.max_votes_amount | translate }}: {{ poll.max_votes_amount }}</span>
-                <br />
                 <span> {{ pollPropertyVerbose.min_votes_amount | translate }}: {{ poll.min_votes_amount }}</span>
                 <br />
+                <span> {{ pollPropertyVerbose.max_votes_amount | translate }}: {{ poll.max_votes_amount }}</span>
+                <br />
             </ng-container>
 
             <ng-container *ngIf="poll.max_votes_amount === poll.min_votes_amount">

client/src/app/site/assignments/modules/assignment-poll/components/assignment-poll-meta-info/assignment-poll-meta-info.component.ts

@@ -27,8 +27,7 @@ export class AssignmentPollMetaInfoComponent {
     public constructor() {}
 
     public userCanVoe(): boolean {
-        // this.poll.canBeVotedFor
+        return this.poll.canBeVotedFor();
-        return true;
     }
 
     public getOptionTitle(option: ViewAssignmentOption): string {

client/src/app/site/assignments/modules/assignment-poll/components/assignment-poll-vote/assignment-poll-vote.component.html

@@ -31,6 +31,11 @@
         <h4 *ngIf="(poll.isMethodY || poll.isMethodN) && poll.max_votes_amount > 1">
             {{ 'Available votes' | translate }}:
             <b> {{ getVotesAvailable(delegation) }}/{{ poll.max_votes_amount }} </b>
+
+            <span *ngIf="poll.min_votes_amount > 1">
+                ({{ 'At least' | translate }} <b>{{ poll.min_votes_amount }}</b
+                >)
+            </span>
         </h4>
 
         <!-- Options and Actions -->
@@ -169,7 +174,7 @@
             mat-flat-button
             color="accent"
             (click)="submitVote(delegation)"
-            [disabled]="getVotesCount(delegation) == 0"
+            [disabled]="getVotesCount(delegation) < minVotes"
         >
             <mat-icon> how_to_vote </mat-icon>
             <span>

client/src/app/site/assignments/modules/assignment-poll/components/assignment-poll-vote/assignment-poll-vote.component.ts

@@ -57,6 +57,10 @@ export class AssignmentPollVoteComponent extends BasePollVoteComponentDirective<
         return this.poll.assignment.default_poll_description;
     }
 
+    public get minVotes(): number {
+        return this.poll.min_votes_amount;
+    }
+
     public constructor(
         title: Title,
         protected translate: TranslateService,

client/src/app/site/polls/components/base-poll-dialog.component.ts

@@ -58,6 +58,8 @@ export abstract class BasePollDialogComponent<
             votes: this.getVoteData(),
             publish_immediately: this.publishImmediately
         };
+        console.log('answer: ', answer);
+
         this.dialogRef.close(answer);
     }
 

client/src/app/site/polls/components/poll-form/poll-form.component.html

@@ -30,7 +30,7 @@
                 </mat-form-field>
 
                 <!-- Groups entitled to Vote -->
-                <mat-form-field *ngIf="contentForm.get('type').value && contentForm.get('type').value !== 'analog'">
+                <mat-form-field *ngIf="isEVotingSelected">
                     <os-search-value-selector
                         formControlName="groups_id"
                         [multiple]="true"
@@ -57,6 +57,23 @@
                     <mat-error>{{ 'This field is required.' | translate }}</mat-error>
                 </mat-form-field>
 
+                <ng-container formGroupName="votes_amount" *ngIf="isEVotingSelected">
+                    <!-- Min Amount of Votes -->
+                    <mat-form-field *ngIf="showAmountAndGlobal(data)">
+                        <input
+                            type="number"
+                            matInput
+                            placeholder="{{ PollPropertyVerbose.min_votes_amount | translate }}"
+                            formControlName="min_votes_amount"
+                            min="1"
+                            required
+                            [errorStateMatcher]="parentErrorStateMatcher"
+                        />
+                        <mat-error *ngIf="contentForm.controls['votes_amount'].hasError('rangeError')">
+                            {{ 'Min votes must be smaller or equal to max votes' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+
                     <!-- Max Amount of Votes -->
                     <mat-form-field *ngIf="showAmountAndGlobal(data)">
                         <input
@@ -68,22 +85,11 @@
                             required
                         />
                     </mat-form-field>
-
+                </ng-container>
-                <!-- Min Amount of Votes -->
-                <mat-form-field>
-                    <input
-                        type="number"
-                        matInput
-                        placeholder="{{ PollPropertyVerbose.min_votes_amount | translate }}"
-                        formControlName="min_votes_amount"
-                        min="1"
-                        required
-                    />
-                </mat-form-field>
             </div>
 
             <!-- Amount of Votes and global options -->
-            <div class="global-options" *ngIf="showAmountAndGlobal(data)">
+            <div class="global-options" *ngIf="isEVotingSelected && showAmountAndGlobal(data)">
                 <mat-checkbox formControlName="global_yes">
                     {{ PollPropertyVerbose.global_yes | translate }}
                 </mat-checkbox>

client/src/app/site/polls/components/poll-form/poll-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
@@ -13,7 +13,9 @@ import { VotingPrivacyWarningComponent } from 'app/shared/components/voting-priv
 import { AssignmentPollMethod, AssignmentPollPercentBase } from 'app/shared/models/assignments/assignment-poll';
 import { PercentBase } from 'app/shared/models/poll/base-poll';
 import { PollType } from 'app/shared/models/poll/base-poll';
+import { ParentErrorStateMatcher } from 'app/shared/parent-error-state-matcher';
 import { infoDialogSettings } from 'app/shared/utils/dialog-settings';
+import { isNumberRange } from 'app/shared/validators/custom-validators';
 import { ViewAssignmentPoll } from 'app/site/assignments/models/view-assignment-poll';
 import { BaseViewComponentDirective } from 'app/site/base/base-view';
 import {
@@ -39,6 +41,7 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
      * The form-group for the meta-info.
      */
     public contentForm: FormGroup;
+    public parentErrorStateMatcher = new ParentErrorStateMatcher();
 
     public PollType = PollType;
     public PollPropertyVerbose = PollPropertyVerbose;
@@ -102,6 +105,10 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
         }
     }
 
+    public get isEVotingSelected(): boolean {
+        return this.contentForm.get('type').value && this.contentForm.get('type').value !== 'analog';
+    }
+
     /**
      * Constructor. Retrieves necessary metadata from the pollService,
      * injects the poll itself
@@ -141,11 +148,7 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
                 }
             }
 
-            Object.keys(this.contentForm.controls).forEach(key => {
+            this.patchForm(this.contentForm);
-                if (this.data[key]) {
-                    this.contentForm.get(key).patchValue(this.data[key]);
-                }
-            });
         }
         this.updatePollValues(this.contentForm.value);
         this.updatePercentBases(this.contentForm.get('pollmethod').value);
@@ -173,6 +176,25 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
         this.setWarning();
     }
 
+    /**
+     * Generic recursive helper function to patch the form
+     * will transitive move poll.min_votes_amount and poll.max_votes_amount into
+     * form.votes_amount.min_votes_amount/max_votes_amount
+     * @param formGroup
+     */
+    private patchForm(formGroup: FormGroup): void {
+        for (const key of Object.keys(formGroup.controls)) {
+            const currentControl = formGroup.controls[key];
+            if (currentControl instanceof FormControl) {
+                if (this.data[key]) {
+                    currentControl.patchValue(this.data[key]);
+                }
+            } else if (currentControl instanceof FormGroup) {
+                this.patchForm(currentControl);
+            }
+        }
+    }
+
     private disablePollType(): void {
         this.contentForm.get('type').disable();
     }
@@ -243,8 +265,14 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
         }
     }
 
-    public getValues<V extends ViewBasePoll>(): Partial<V> {
+    public getValues(): Partial<T> {
-        return { ...this.data, ...this.contentForm.value };
+        return { ...this.data, ...this.serializeForm(this.contentForm) };
+    }
+
+    private serializeForm(formGroup: FormGroup): Partial<T> {
+        const formData = { ...formGroup.value, ...formGroup.value.votes_amount };
+        delete formData.votes_amount;
+        return formData;
     }
 
     /**
@@ -300,8 +328,13 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
             pollmethod: ['', Validators.required],
             onehundred_percent_base: ['', Validators.required],
             majority_method: ['', Validators.required],
+            votes_amount: this.fb.group(
+                {
                     max_votes_amount: [1, [Validators.required, Validators.min(1)]],
-            min_votes_amount: [1, [Validators.required, Validators.min(1)]],
+                    min_votes_amount: [1, [Validators.required, Validators.min(1)]]
+                },
+                { validator: isNumberRange('min_votes_amount', 'max_votes_amount') }
+            ),
             groups_id: [],
             global_yes: [false],
             global_no: [false],