TSK-1069 The number picker now only accepts numbers and can be made required

web/src/app/administration/components/classification-details/classification-details.component.html

@@ -65,9 +65,12 @@
                 </a>
               </div>
               <div class="row">
-                <div class="form-group col-xs-6">
+                <div class="form-group required col-xs-6">
                   <label for="classification-priority" class="control-label">Priority</label>
-                  <taskana-number-picker [(ngModel)]="classification.priority" name="classification.priority" id="classification-priority"></taskana-number-picker>
+                  <taskana-number-picker [(ngModel)]="classification.priority" name="classification.priority" id="classification-priority" [required]="true"></taskana-number-picker>
+                  <taskana-field-error-display [displayError]="!isFieldValid('classification.priority')" [validationTrigger]="this.toogleValidationMap.get('classification.priority')"
+                                               errorMessage="* Priority is required">
+                  </taskana-field-error-display>
                 </div>
                 <div class="form-group required btn-group col-xs-6">
                   <label for="classification-category" class="control-label">Category</label>

web/src/app/shared/components/number-picker/number-picker.component.html

@@ -1,5 +1,5 @@
 <div class="input-group">
-  <input class="form-control input-text" name="number" [(ngModel)]="value">
+  <input class="form-control input-text" name="number" type="number" [(ngModel)]="value" [required]="required">
   <div class="input-group-btn-vertical">
     <button type="button" (click)="increase()" data-toggle="tooltip" title="increase value" class="btn btn-default">
       <span class="material-icons md-14 green-blue">arrow_drop_up</span>
@@ -8,4 +8,4 @@
       <span class="material-icons md-14 green-blue">arrow_drop_down</span>
     </button>
   </div>
-</div>
+</div>

web/src/app/shared/components/number-picker/number-picker.component.scss

@@ -32,4 +32,15 @@ input{
 .input-group-btn-vertical > .btn:last-child {
   margin-top: -3px;
   border-bottom-right-radius: 4px;
-}
+}
+
+// small "hack" to remove the arrows in the input fields of type numbers
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance:textfield;
+}

web/src/app/shared/components/number-picker/number-picker.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, forwardRef } from '@angular/core';
+import { Component, OnInit, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
@@ -14,6 +14,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   ]
 })
 export class NumberPickerComponent implements OnInit, ControlValueAccessor {
+  @Input() required = false;
+
   // The internal data model
   private innerValue: any = 0;
 
@@ -22,6 +24,9 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
   private onTouchedCallback: () => {};
   private onChangeCallback: (_: any) => {};
 
+  ngOnInit() {
+  }
+
   // get accessor
   get value(): any {
     return this.innerValue;
@@ -52,14 +57,17 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
     this.onTouchedCallback = fn;
   }
 
-  ngOnInit() {
-  }
-
   increase() {
+    if (!this.value) {
+      this.value = 0;
+    }
     this.value += 1;
   }
 
   decrease() {
+    if (!this.value) {
+      this.value = 0;
+    }
     this.value -= 1;
   }
 }

web/src/theme/_forms.scss

@@ -1,4 +1,4 @@
-.ng-invalid:not(form)  {
+.ng-invalid.ng-touched:not(form)  {
     border-color: $invalid;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);