openproject/frontend/app/components/wp-relations/wp-relations.directive.html

<div ng-class="['relation', $ctrl.relationGroup.id]">
  <h3>
    <accessible-by-keyboard execute="$ctrl.toggleExpand()"
                            link-class="{{ $ctrl.relationGroup.id }}-toggle-link">
      <i class="icon-pull-content" ng-class="$ctrl.stateClass"></i> {{ $ctrl.text.title }}
      <span ng-if="$ctrl.relationGroup.id !== 'parent'">
        ({{ $ctrl.relationGroup.relations.length }})
      </span>
    </accessible-by-keyboard>
  </h3>
  <div class="content" ng-if="$ctrl.expand">
    <div class="workpackages">
      <div ng-if="!$ctrl.relationGroup.isEmpty">
        <table class="attributes-table">
          <colgroup>
            <col style="width: 50%"/>
            <col style="width: 15%"/>
            <col/>
            <col style="width: 1rem"/>
          </colgroup>
          <thead>
          <tr>
            <td title="{{ $ctrl.text.table.subject }}">{{ $ctrl.text.table.subject }}</td>
            <td title="{{ $ctrl.text.table.status }}">{{ $ctrl.text.table.status }}</td>
            <td title="{{ $ctrl.text.table.assignee }}">{{ $ctrl.text.table.assignee }}</td>
            <td></td>
          </tr>
          </thead>
          <tbody>
          <tr wp-relation-row
              ng-repeat="relation in $ctrl.relationGroup.relations">
            <td focus="$ctrl.isFocused($index)">
              <a title="{{ fullIdentifier }}" class="work_package" ng-class="state"
                 href="{{ workPackagePath(relatedWorkPackage.id) }}">
                {{ fullIdentifier }}
              </a>
            </td>
            <td title="{{ relatedWorkPackage.status.name }}">
              {{ relatedWorkPackage.status.name }}
            </td>
            <td>
              <a
                  ng-if="relatedWorkPackage.assignee
                 && relatedWorkPackage.assignee.subtype != 'Group'"
                  title="{{ relatedWorkPackage.assignee.name }}"
                  href="{{ userPath(relatedWorkPackage.assignee.id) }}">
                {{ relatedWorkPackage.assignee.name }}
              </a>
                <span ng-if="relatedWorkPackage.assignee
                 && relatedWorkPackage.assignee.subtype == 'Group'">
                  {{ relatedWorkPackage.assignee.name }}
                </span>
              <empty-element ng-if="!relatedWorkPackage.assignee"></empty-element>
            </td>
            <td class="icon">
              <accessible-by-keyboard ng-if="$ctrl.canRemoveRelation(relation)"
                                      execute="$ctrl.removeRelation(relation)">
                <icon-wrapper icon-name="remove"
                              icon-title="{{ $ctrl.text.relations.remove }}">
                </icon-wrapper>
              </accessible-by-keyboard>
            </td>
          </tr>

          </tbody>
        </table>
      </div>
      <div ng-if="$ctrl.relationGroup.isEmpty">
        {{ $ctrl.text.relations.empty }}
      </div>
    </div>
    <div
        class="add-relation"
        ng-if="$ctrl.relationGroup.canAddRelation"
        ng-switch="$ctrl.relationGroup.type"
        focus="$ctrl.isFocused(-1)">

      <!-- Add WP child -->
      <button
          ng-switch-when="child"
          class="button add-work-package-child-button"
          title="{{ $ctrl.btnTitle }}"
          ng-bind-html="$ctrl.btnIcon + ' ' + $ctrl.btnTitle"
          ng-click="$ctrl.addRelation()"
          focus="$ctrl.isFocused(-1)"
      ></button>


      <!-- Add WP relation -->
      <add-wp-relation ng-switch-default></add-wp-relation>
    </div>
  </div>
</div>