Added angular form validations to filters.

app/assets/javascripts/angular/directives/work_packages/query-filters-directive.js

@@ -17,10 +17,10 @@ angular.module('openproject.workPackages.directives')
               scope.filterToBeAdded = undefined;
             }
           });
-
-          scope.query.filters = [new Filter({name: 'status_id', operator: 'o', values: undefined}),
-                                 new Filter({name: 'subject', operator: '!~', values: undefined}),
-                                 new Filter({name: 'created_at', operator: 't-', values: undefined})]; // Mock
+          scope.query.filters = [];
+          // scope.query.filters = [new Filter({name: 'status_id', operator: 'o', values: undefined}),
+          //                        new Filter({name: 'subject', operator: '!~', values: undefined}),
+          //                        new Filter({name: 'created_at', operator: 't-', values: undefined})]; // Mock
 
         }
       };

app/assets/stylesheets/work_packages.css

@@ -37,4 +37,10 @@ See doc/COPYRIGHT.rdoc for more details.
 
 .icon-button {
   cursor: pointer;
-}
+}
+
+select.to-validate.ng-pristine, input.to-validate.ng-pristine { border:1px solid Gold; }
+select.to-validate.ng-dirty.ng-valid, input.to-validate.ng-dirty.ng-valid { border:1px solid Green; }
+select.to-validate.ng-dirty.ng-invalid, input.to-validate.ng-dirty.ng-invalid { border:1px solid Red; }
+select.to-validate.ng-dirty.ng-valid ~ span.ok, input.to-validate.ng-dirty.ng-valid ~ span.ok { color:green; display:inline; }
+select.to-validate.ng-dirty.ng-invalid ~ span.ko, input.to-validate.ng-dirty.ng-invalid ~ span.ko { color:red; display:inline; }

public/templates/components/toggled_multiselect.html

@@ -5,7 +5,8 @@
           id="values-{{name}}"
           class="select-small"
           style="vertical-align: top;"
-          ng-options="value[1] as value[0] for value in availableFilterValues"/>
+          ng-options="value[1] as value[0] for value in availableFilterValues"
+          require/>
 
   <select multiple
           ng-show="isMultiselect"
@@ -14,7 +15,8 @@
           id="values-{{name}}"
           class="select-small"
           style="vertical-align: top;"
-          ng-options="value[1] as value[0] for value in availableFilterValues"/>
+          ng-options="value[1] as value[0] for value in availableFilterValues"
+          require/>
 
   <a alt="Toggle multiselect" href="#" style="vertical-align: bottom;" title="Toggle multiselect" ng-click="toggleMultiselect()">
     <img alt="Bullet_toggle_plus" src="/assets/bullet_toggle_plus.png"/>

public/templates/work_packages/query_filters.html

@@ -26,12 +26,12 @@
                   <!-- Operator -->
                   <td style="width:150px;">
                     <label class="hidden-for-sighted" for="operators_{{filter.name}}">Filter</label>
-                    <select class="select-small"
+                    <select require
+                            class="select-small to-validate"
                             id="operators-{{filter.name}}"
                             name="op_{{filter.name}}"
                             ng-options="operator as label for (operator, label) in operatorsAndLabelsByFilterType[query.getFilterType(filter.name)]"
                             ng-model="filter.operator"
-                            ng-required
                             style="vertical-align: top;">
                     </select>
                   </td>
@@ -45,7 +45,8 @@
                       <input ng-switch-when="string"
                              ng-model="filter.values"
                              ng-minlength="3"
-                             class="select-small"
+                             ng-required="true"
+                             class="select-small to-validate"
                              id="values-{{filter.name}}"
                              name="v_{{filter.name}}"
                              size="30"
@@ -60,7 +61,8 @@
                       <input ng-switch-when="text"
                              ng-model="filter.values"
                              ng-minlength="3"
-                             class="select-small"
+                             ng-required="true"
+                             class="select-small to-validate"
                              id="values-{{filter.name}}"
                              name="v_{{filter.name}}"
                              size="30"
@@ -70,7 +72,8 @@
 
                       <input ng-switch-when="integer"
                              ng-model="filter.values"
-                             class="select-small"
+                             ng-required="true"
+                             class="select-small to-validate"
                              id="values-{{filter.name}}"
                              name="v_{{filter.name}}"
                              size="3"
@@ -80,7 +83,8 @@
 
                       <input ng-switch-when="date"
                              ng-model="filter.values"
-                             class="select-small"
+                             ng-required="true"
+                             class="select-small to-validate"
                              id="values-{{filter.name}}"
                              name="v_{{filter.name}}"
                              size="3"
@@ -89,7 +93,8 @@
 
                       <input ng-switch-when="date_past"
                              ng-model="filter.values"
-                             class="select-small"
+                             ng-required="true"
+                             class="select-small to-validate"
                              id="values-{{filter.name}}"
                              name="v_{{filter.name}}"
                              size="3"
@@ -103,7 +108,8 @@
                       <toggled-multiselect available-filter-values="query.getAvailableFilterValues(filter.name)"
                                            name="filter.name"
                                            values="filter.values"
-                                           is-multiselect="false"/>
+                                           is-multiselect="false"
+                                           ng-required="true"/>
 
                     </div>
                   </td>