Leave Request Details modal

index.html

<div>
  <modal
    name="ToilLeaveRequestDetails"
    title="Accrue TOIL for additional work"
    is-open="false">
    <leave-request-details-type type="toil" leave-request="leaveRequest"></leave-request-details-type>
  </modal>
  
  <button open-modal="ToilLeaveRequestDetails">
    Record a new Toil Accrual
  </button>
</div>

leave-request-details-type.directive.js

function leaveRequestDetailsType ($compile) {
  return {
    scope: {
      leaveRequest: '<',
      type: '@'
    },
    link: function ($scope, $element, $attrs) {
      var componentElement, componentName, componentHtml;

      componentName = $scope.type + '-leave-request-details';
      componentHtml = '<'+ componentName + ' leave-request="leaveRequest"></' + componentName + '>';
      componentElement = $compile(componentHtml)($scope);
 
      $element.append(componentElement);
  };
}

leave-request-details.html

<div class="leave-request-details.component">
  <contact-selector contact="leaveRequestDetails.contact"></contact-selector>
  <absence-type-selector absence-type="leaveRequestDetails.absenceType"></absence-type-selector>

  <hr />

  <tabs>
    <tab title="Details">
      <leave-request-general-details>
        <ng-transclude></ng-transclude> <!-- specific leave fields will be inserted here -->
      </leave-request-general-details>
    </tab>
    <tab title="Comments">
      <leave-request-comments></leave-request-comments>
    </tab>
    <tab title="Files">
      <leave-request-files></leave-request-files>
    </tab>
  </tabs>
</div>

leave-request-expiry-date-field.js

function LeaveRequestExpiryDateField ($scope) {
  $scope.$on('LeaveRequestDetails::datesChange', function (event, dates) {
    calculateToilExpiryDate();
  });
  
  function calculateToilExpiryDate () {
    vm.expiryDate = moment().add(160, 'days').toDate(); // sample calculation
  }
}

toil-leave-request-details.html

<leave-request-details leave-request="toilLeave.leaveRequest">
  <leave-request-toil-to-be-accrued-field
    leave-request="toilLeave.leaveRequest">
  </leave-request-toil-to-be-accrued-field>
  <leave-request-balance-change
    leave-request="toilLeave.leaveRequest">
  </leave-request-balance-change>
  <leave-request-expiry-date-field
    leave-request="toilLeave.leaveRequest">
  </leave-request-expiry-date-field>
</leave-request-details>

In this case the index.html file would be akin to something like leave-request-actions.html.

<leave-request-details-type type="toil" leave-request="leaveRequest"></leave-request-details-type> instantiates the component we need using $compile. In this case it will try to to instantiate a toil-leave-request-details component and pass the leave-request value to it. In this way we can have as many absence types as we need without one having to know about the other.

All leave request types need to include the `" component. Anything inside of this component will be transcluded into the leave request general details tab, right after the Dates and Duration fields. In this case the TOIL request passes the toil to be accrued, the balance change, and the expiry date components. Since the balance change changes from position depending on the leave request type, it's best used as a separate component (and also reduces the clutter of code in a single a component).

Since each absence type now can define the custom fields they use, they can add the business logic needed to update these fields. The general business logic for dates, selecting a contact, changing the absence type, etc. can rest within the leave-request-details component.