nicer person edit form

angular_app/index.html

@@ -51,7 +51,12 @@
                         <li ng-class="{active: n.isActive('/persons') ||  n.isActive('/person') || n.isActive('/import/persons')}"><a ui-sref="persons">{{'Persons' | translate}}</a></li>
                     </ul>
                     <ul class="nav navbar-nav navbar-right">
-                        <li><a href="/logout">{{'logout' | translate}}</a></li>
+                        <li>
+                            <button  class="btn btn-link">
+                                <span class="fa fa-sign-out vcenter"></span>
+                                <a href="/logout">{{'logout' | translate}}</a>
+                            </button>
+                        </li>
                     </ul>
                 </div>
             </div>

angular_app/js/controllers.js

@@ -147,7 +147,7 @@ eventManControllers.controller('EventDetailsCtrl', ['$scope', 'Event', 'Person',
                 } else {
                     $scope.event = Event.update(this_event);
                 }
-                $scope.eventForm.$dirty = false;
+                $scope.eventForm.$setPristine(false);
         };
 
         $scope.calcAttendees = function() {
@@ -348,7 +348,7 @@ eventManControllers.controller('PersonDetailsCtrl', ['$scope', '$stateParams', '
                     }
                 });
             }
-            $scope.personForm.$dirty = false;
+            $scope.personForm.$setPristine(false);
         };
 
         $scope.setPersonAttributeAtEvent = function(evnt, key, value) {

angular_app/person-edit.html

@@ -1,62 +1,69 @@
 <!-- show details of a Person -->
 <div class="container">
-    <h1><span ng-if="!(person.name || person.surname)">{{'New person' | translate}}</span>{{person.name}} {{person.surname}}&nbsp;
-        <button ng-if="person._id" ng-click="$state.go('person.info', {id: person._id})" class="btn btn-success">
-            <span class="fa fa-info-circle vcenter"></span>
-            {{'Info' | translate}}
-        </button>
-    </h1>
-
-    <form name="personForm" ng-model="persondetails" ng-submit="save()">
-        <div ng-class="{clearfix: true, alert: true, 'alert-success': !personForm.$dirty, 'alert-danger': personForm.$dirty}">
-            <button type="button" class="btn btn-default pull-right" ng-click="save($event)" ng-disabled="!personForm.$dirty">
-                <span class="fa fa-floppy-o vcenter"></span>
-                {{'save' | translate}}
-            </button>
+    <div class="panel panel-primary table-striped top5">
+        <div class="panel-heading">
+            <h1>
+                <button ng-if="person._id" ng-click="$state.go('person.info', {id: person._id})" class="btn btn-success">
+                    <span class="fa fa-info-circle vcenter"></span>
+                    {{'Info' | translate}}
+                </button>
+                &nbsp;<span ng-if="!(person.name || person.surname)">{{'New person' | translate}}</span>{{person.name}} {{person.surname}}
+            </h1>
         </div>
+        <div class="panel-body">
 
-        <div class="input-group input-group-lg">
-            <span class="input-group-addon min120">{{'Name' | translate}}</span>
-            <input type="text" class="form-control" placeholder="{{'Name' | translate}}" ng-model="person.name" ng-required="1">
-        </div>
+            <form name="personForm" ng-model="persondetails" ng-submit="save()">
+                <div ng-class="{clearfix: true, alert: true, 'alert-success': !personForm.$dirty, 'alert-danger': personForm.$dirty}">
+                    <button type="button" class="btn btn-default pull-right" ng-click="save($event)" ng-disabled="!personForm.$dirty">
+                        <span class="fa fa-floppy-o vcenter"></span>
+                        {{'save' | translate}}
+                    </button>
+                </div>
 
-        <div class="input-group input-group-lg top5">
-            <span class="input-group-addon min120">{{'Surname' | translate}}</span>
-            <input type="text" class="form-control" placeholder="{{'Surname' | translate}}" ng-model="person.surname">
-        </div>
+                <div class="input-group input-group-lg">
+                    <span class="input-group-addon min120">{{'Name' | translate}}</span>
+                    <input type="text" class="form-control" placeholder="{{'Name' | translate}}" ng-model="person.name" ng-required="1">
+                </div>
 
-        <div class="input-group input-group-lg top5">
-            <span class="input-group-addon min120">{{'Email' | translate}}</span>
-            <input type="email" name="email" class="form-control" placeholder="{{'name.surname@example.com' | translate}}"  ng-model="person.email">
-        </div>
+                <div class="input-group input-group-lg top5">
+                    <span class="input-group-addon min120">{{'Surname' | translate}}</span>
+                    <input type="text" class="form-control" placeholder="{{'Surname' | translate}}" ng-model="person.surname">
+                </div>
 
-        <div class="input-group input-group-lg top5">
-            <span class="input-group-addon min120">{{'Company' | translate}}</span>
-            <input name="company" class="form-control" placeholder="{{'Acme Corporation' | translate}}"  ng-model="person.company">
-        </div>
+                <div class="input-group input-group-lg top5">
+                    <span class="input-group-addon min120">{{'Email' | translate}}</span>
+                    <input type="email" name="email" class="form-control" placeholder="{{'name.surname@example.com' | translate}}"  ng-model="person.email">
+                </div>
 
-        <div class="input-group input-group-lg top5">
-            <span class="input-group-addon min120">{{'Job' | translate}}</span>
-            <input name="job_title" class="form-control" placeholder="{{'Evil Ruler' | translate}}"  ng-model="person.job_title">
-        </div>
+                <div class="input-group input-group-lg top5">
+                    <span class="input-group-addon min120">{{'Company' | translate}}</span>
+                    <input name="company" class="form-control" placeholder="{{'Acme Corporation' | translate}}"  ng-model="person.company">
+                </div>
 
-        <div class="form-group top5">
-            <label for="addToEvent">{{'Add to event:' | translate}}</label>
-            <select class="form-control" id="addToEvent" ng-model="addToEvent">
-                <option value=""></option>
-                <option ng-repeat="event in events | eventWithPersonData:false" value="{{event._id}}">{{event.title}}</option>
-            </select>
-            <option>
-                <tr ng-repeat="event in events | splittedFilter:query | orderBy:eventsOrderProp">
-        </div>
+                <div class="input-group input-group-lg top5">
+                    <span class="input-group-addon min120">{{'Job' | translate}}</span>
+                    <input name="job_title" class="form-control" placeholder="{{'Evil Ruler' | translate}}"  ng-model="person.job_title">
+                </div>
 
-        <div ng-repeat="custom in customFields" class="form-group top5">
-            <label for="custom_{{custom['key']}}">{{custom.label | translate}}</span>
-            <input ng-if="custom.type == 'boolean'" id="custom_{{custm['key']}}" type="checkbox" class="form-control" placeholder="{{custom.label | translate}}" ng-model="person[custom.key]">
-            <input ng-if="custom.type != 'boolean'" id="custom_{{custm['key']}}" type="text" class="form-control" placeholder="{{custom.label | translate}}" ng-model="person[custom.key]">
-        </div>
+                <div class="form-group top5">
+                    <label for="addToEvent">{{'Add to event:' | translate}}</label>
+                    <select class="form-control" id="addToEvent" ng-model="addToEvent">
+                        <option value=""></option>
+                        <option ng-repeat="event in events | eventWithPersonData:false" value="{{event._id}}">{{event.title}}</option>
+                    </select>
+                    <option>
+                        <tr ng-repeat="event in events | splittedFilter:query | orderBy:eventsOrderProp">
+                </div>
 
-        <input type="submit" class="outside-screen" />
-    </form>
+                <div ng-repeat="custom in customFields" class="form-group top5">
+                    <label for="custom_{{custom['key']}}">{{custom.label | translate}}</span>
+                    <input ng-if="custom.type == 'boolean'" id="custom_{{custm['key']}}" type="checkbox" class="form-control" placeholder="{{custom.label | translate}}" ng-model="person[custom.key]">
+                    <input ng-if="custom.type != 'boolean'" id="custom_{{custm['key']}}" type="text" class="form-control" placeholder="{{custom.label | translate}}" ng-model="person[custom.key]">
+                </div>
+
+                <input type="submit" class="outside-screen" />
+            </form>
+        </div>
+    </div>
 </div>