Page Comparison

// a new "module" just for this page that depends on various modules from uicommons
angular.module('relationships', ['relationshipTypeService', 'relationshipService', 'personService', 'uicommons.widget.select-person' ]).
 
    // this page has a single controller, which gets several dependencies injected 
    controller('PersonRelationshipsCtrl', ['$scope', 'RelationshipTypeService', 'RelationshipService', 'PersonService', '$modal',
    function($scope, RelationshipTypeService, RelationshipService, PersonService, $modal) {


       <div class="dialog-header">
     // the model for our view
       <%= ui.message("coreapps.relationships.add.header", "{{ addDialogOtherLabel }}") %>$scope.thisPersonUuid = null;
        $scope.relationshipTypes  </div>= [];
        <div$scope.relationships class="dialog-content">= [];
 
        // this is invoked  <div>
            by ng-init="init($patient.patient.uuid)" in the gsp page, which is how we communicate that specific bit of
   <label>     // bootstrapping data to our javascript app
        $scope.init <%= ui.message("coreapps.relationships.add.choose", "{{ addDialogOtherLabel }}") %>function(personUuid) {
            $scope.thisPersonUuid = personUuid;
    </label>        // these   calls (which use $resource under <select-person ng-model="otherPerson" exclude-person="${ patient.patient.uuid }" />
            </div>the hood) are asynchronous, so we need to use .then on the promise they return
            RelationshipService.getRelationships({ v: 'default', person: <div class="add-confirm-spacer">personUuid }).then(function(result) {
                <div ng-show="otherPerson" >$scope.relationships = result;
                });
   <h3>${ ui.message("coreapps.relationships.add.confirm") }</h3>        RelationshipTypeService.getRelationshipTypes({ v: 'default' }).then(function(result) {
        <p>{{ addDialogThisLabel }}: ${ ui.format(patient.patient) } ${ ui.message("coreapps.relationships.add.thisPatient") }</p>
     $scope.relationshipTypes = result;
            });
      <p>{{ addDialogOtherLabel }}:

{{ otherPerson.display }}</p>      // Helper method, since after saving a relationship, the response object </div>we get back from the OpenMRS REST resource does not
   </div>     // include a full rep of its relationshipType, <div>so this helper gets the full rep that we download on init
     <button class="confirm right" ng-disabled="!otherPerson" ng-click="doAddRelationship()">${ ui.message("uicommons.save") }</button> $scope.relType = function(relationship) {
            if (!relationship) {
 <button class="cancel" ng-click="cancelAddRelationship()">${ ui.message("uicommons.cancel") }</button>              return null;
       </div>     }
   </div>     </div>     <div ng-show="relationshipToDelete" class="dialog" id="delete-relationship-dialog">return _.findWhere($scope.relationshipTypes, { uuid: relationship.relationshipType.uuid });
        }
 
  <div class="dialog-header">${ ui.message("coreapps.relationships.delete.header") }</div>   $scope.relationshipsByType = function(relationshipType, whichSide) {
 <div class="dialog-content">          return _.filter($scope.relationships, function(item) <form>{
                ${if ui.message("coreappsitem.relationships.delete.title") }relationshipType.uuid != relationshipType.uuid) {
                <p>    return false;
               <label>{{ relType(relationshipToDelete).aIsToB }}</label>
                if (whichSide ==  {{ relationshipToDelete.personA.display }}
 'A' && item.personB.uuid == $scope.thisPersonUuid) {
              </p>      return true;
         <p>       } else if (whichSide == 'B' && item.personA.uuid == $scope.thisPersonUuid) {
   <label>{{ relType(relationshipToDelete).bIsToA }}</label>               return true;
    {{ relationshipToDelete.personB.display }}           }
     </p>       });
        }
<button 
class="confirm right" ng-click="doDeleteRelationship(relationshipToDelete)">${ ui.message("uicommons.delete") }</button>    // ----------
        // Add New <button class="cancel" ng-click="cancelDeleteRelationship(relationshipToDelete)">${ ui.message("uicommons.cancel") }</button>
            </form>
  Relationship Dialog (maybe this should be refactored to be its own controller and child scope)
        </div>
    </div>
    <form id="existing-relationships"> ----------

        <div ng-repeat="relType in relationshipTypes">$scope.addDialogMode = null;
        $scope.addDialogThisLabel = '';
  <p>      $scope.addDialogOtherLabel = '';
        <label>{{ relType.aIsToB }}</label>
$scope.otherPerson = null;


             <span ng-repeat="rel in relationshipsByType(relType, 'A')" class="relationship">
$scope.showAddDialog = function(relationshipType, whichSide) {
            $scope.otherPerson = null;
    {{ rel.personA.display }}      $scope.addDialogMode = {
            <a ng-click="showDeleteDialog(rel)">    relationshipType: relationshipType,
                whichSide: whichSide
   <i class="small icon-remove"></i>       };
             </a>
      $scope.addDialogOtherLabel = whichSide == 'A' ? relationshipType.aIsToB : relationshipType.bIsToA;
         </span>   $scope.addDialogThisLabel = whichSide == 'A' ? relationshipType.bIsToA : relationshipType.aIsToB;
      <span ng-show="relType.aIsToB == relType.bIsToA" ng-repeat="rel in relationshipsByType$(relType, 'B')" class="relationship">'#select-other-person').focus();
        }

        $scope.doAddRelationship = function() {{ rel.personB.display }}
            var relationship = {
         <a ng-click="showDeleteDialog(rel)">      relationshipType: $scope.addDialogMode.relationshipType.uuid,
                 <i class="small icon-remove"></i>
   personA: $scope.addDialogMode.whichSide == 'A' ? $scope.otherPerson.uuid : $scope.thisPersonUuid,
                </a>
      personB: $scope.addDialogMode.whichSide == 'A' ? $scope.thisPersonUuid : $scope.otherPerson.uuid
         </span>   };
            var <acreated ng-click="showAddDialog(relType, 'A')">= RelationshipService.createRelationship(relationship);
            $scope.relationships.push(created);
        <i class="small icon-plus-sign"></i>  $scope.otherPerson = null;
            </a>
 $scope.addDialogMode = null;
        }

</p>        $scope.cancelAddRelationship = function() {
 <p ng-hide="relType.aIsToB == relType.bIsToA">        $scope.otherPerson = null;
      <label>{{ relType.bIsToA }}</label>    $scope.addDialogMode = null;
        }
 
<span ng-repeat="rel in relationshipsByType(relType, 'B')" class="relationship">   // ----------
        // Delete Relationship Dialog (maybe this should be {{ rel.personB.display }}
     refactored to be its own controller and child scope)
        // ----------

   <a ng-click="showDeleteDialog(rel)">    $scope.relationshipToDelete = null;

        $scope.showDeleteDialog = function(relationship) {
     <i class="small icon-remove"></i>     $scope.relationshipToDelete = relationship;
        }

   </a>     $scope.doDeleteRelationship = function(relationship) {
        </span>    RelationshipService.deleteRelationship(relationship);
            <a ng-click="showAddDialog(relType, 'B')">
$scope.relationships = _.reject($scope.relationships, function(item) {
                return item.uuid  <i class="small icon-plus-sign"></i>== relationship.uuid;
            });
          </a>  $scope.relationshipToDelete = null;
        </p>}

       </div> $scope.cancelDeleteRelationship = function(relationship) {
</form> </div> <script type="text/javascript">     // manually bootstrap angular app, in case there are multiple angular apps on a page
$scope.relationshipToDelete = null;
        }
   angular.bootstrap('#relationships-app', ['relationships' }]);
</script>