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

<div class="generic-table--container work-package-table--container"
  ng-class="{ '-with-footer': displaySums }">
  <div class="generic-table--results-container" ng-if="rows.length">
    <table interactive-table class="keyboard-accessible-list generic-table">
      <colgroup>
        <col highlight-col />
        <col highlight-col ng-repeat="column in columns" />
      </colgroup>
      <thead>
        <tr>
          <th class="checkbox -short hide-when-print">
            <div class="generic-table--header-outer">
              <a href
                 alt="{{ text.toggleRows }}"
                 class="no-decoration-on-hover"
                 ng-click="setCheckedStateForAllRows(!(rows | allRowsChecked))"
                 title="{{ text.toggleRows }}">

                <icon-wrapper icon-title="{{ text.toggleRows }}"
                              icon-name="checkmark"></icon-wrapper>
              </a>
            </div>
          </th>
          <th sort-header ng-repeat="column in columns"
                          has-dropdown-menu
                          position-relative-to=".generic-table--sort-header-outer"
                          target="columnContextMenu"
                          locals="columns, column"
                          locale="column.custom_field && columns.custom_field.name_locale || locale"
                          header-name="column.name"
                          header-title="column.title"
                          sortable="column.sortable"
                          query="query"
                          ng-class="column.name == 'id' && '-short' ">
          </th>
        </tr>
      </thead>

      <tbody>

        <!-- Group headers -->

        <tr wp-group-header
            ng-repeat-start="row in rows track by row.object.id"
            ng-if="!!groupByColumn &&
                   ($first || row.groupName !== rows[$index-1].groupName)"
            ng-class="{
              group: true,
              open: groupExpanded[currentGroup],
              closed: !groupExpanded[currentGroup],
              keyboard_hover: true
            }"
            id="group-header-{{ row.groupName }}">
          <td colspan="{{ columns.length + 2 - (!!hideWorkPackageDetails * 1) }}">
            <div ng-class="[
                    'expander',
                    'icon-context',
                    'icon-' + (groupExpanded[currentGroup] && 'minus2' || 'plus')
                  ]"
                  ng-click="toggleCurrentGroup()">
              <span ng-class="{
                'hidden-for-sighted': true,
                expand: !groupExpanded[currentGroup],
                collapse: groupExpanded[currentGroup]
              }">
                {{ groupExpanded[currentGroup] && text.collapse || text.expand }}
              </span>
              <span class="hidden-for-sighted collapse">{{ text.collapse }}</span>
            </div>

            <div>
              {{ currentGroupObject.value }}
              <span class="count">
                ({{ currentGroupObject.count }})
              </span>
            </div>

          </td>
        </tr>

        <!-- Work package rows -->

        <tr wp-row
            id="work-package-{{ row.object.id }}"
            class="wp--row"
            has-dropdown-menu
            trigger-on-event="contextmenu"
            target="WorkPackageContextMenu"
            locals="rows,row,$index"
            after-focus-on=".id :focusable"
            single-click="!row.object.isNew && selectWorkPackage(row, $event)"
            ng-dblclick="!row.object.isNew && openWorkPackageInFullView(row)"
            ng-class="[
              'issue',
              'hascontextmenu',
              row.checked && 'context-menu-selection',
              !row.object['leaf?'] && 'parent' || '',
              row.level > 0 && 'child idnt' || '',
              row.level > 0 && ('idnt-' + row.level) || '',
              row.object.isNew && '-new' || '',
              !(row.object.isNew || row.object.inlineCreate) && '-animated' || '',
            ]"
            ng-show="!groupByColumn || groupExpanded[row.groupName]"

            wp-edit-form="row.object">

          <td ng-if="!row.object.isNew" class="checkbox -short hide-when-print">
            <accessible-checkbox name="ids[]"
                                 checkbox-id="work_package{{row.object.id}}"
                                 checkbox-value="row.object.id"
                                 checkbox-title="{{checkboxTitle}}"
                                 model="row.checked">
            </accessible-checkbox>
            <span>
              <a class="wp-table--details-link"
                 ui-sref="work-packages.list.details.overview({workPackageId: row.object.id})">
                <i class="icon icon-view-split"></i>
                <span ng-bind="I18n.t('js.button_open_details')"/>
              </a>
            </span>
          </td>
          <td ng-if="row.object.isNew" class="cancel-inline-create -short">
            <span>
              <a class="wp-table--cancel-create-link"
                 ng-click="cancelInlineWorkPackage($index, row)">
                <i class="icon icon-cancel"></i>
                <span ng-bind="I18n.t('js.button_cancel')"/>
              </a>
            </span>
          </td>

          <td ng-repeat="column in columns"
              lang="{{column.custom_field && column.custom_field.name_locale || locale}}"
              wp-edit-field="column.name"
              columns="columns"
              field-index="$index"
              class="wp-table--cell"
              ng-class="{ '-short': column.name == 'id' }">
            <wp-td attribute="column.name"
                   schema="row.object.schema"
                   object="row.object"
                   ng-class="[row.level > 0 && column.name == 'subject' && 'icon-context icon-arrow-right5 icon-small']">
            </wp-td>
          </td>
        </tr>


        <!-- Sums for groups -->

        <tr wp-group-sums
            ng-repeat-end
            ng-if="sumsLoaded() && !!groupByColumn &&
                   ($last || row.groupName !== rows[$index+1].groupName)"
            ng-show="!groupByColumn || groupExpanded[row.groupName]"
            ng-class="[
              'group-sum',
              'sum',
              'grouped',
              'group',
              'issue',
              'work_package'
            ]">
            <td colspan="{{1  - (!!hideWorkPackageDetails * 1)}}">
              {{ text.sumFor }}
              {{ currentGroupObject.value }}
            </td>
            <td ng-repeat="column in columns">
              <wp-td attribute="column.name"
                     schema="resource.sumsSchema"
                     object="currentGroupObject.sums">
              </wp-td>
            </td>
        </tr>
      </tbody>
      <tfoot>
        <!-- Inline create button -->
        <tr class="wp-inline-create-button-row">
          <!--  Add 2 to the colspan attr because of the id and the checkbox columns  -->
          <td colspan="{{ columns.length + 2 }}">
            <wp-inline-create-button
                project-identifier="projectIdentifier"
                query="query"
                rows="rows"
            ></wp-inline-create-button>
          </td>
        </tr>

        <!-- Total sums -->

        <tr ng-if="sumsLoaded()"
            class="sum group all issue work_package">
          <td colspan="{{1  - (!!hideWorkPackageDetails * 1)}}">
            <div class="generic-table--footer-outer">
              {{ text.sumFor }} {{ text.allWorkPackages }}
            </div>
          </td>
          <td ng-repeat="column in columns">
            <wp-td class="generic-table--footer-outer"
                   attribute="column.name"
                   schema="resource.sumsSchema"
                   object="resource.totalSums">
            </wp-td>
          </td>
        </tr>
      </tfoot>
    </table>
    <div class="generic-table--header-background"></div>
    <div class="generic-table--footer-background" ng-if="sumsLoaded()"></div>
  </div>
  <div class="generic-table--no-results-container" ng-if="!rows.length">
    <i class="icon-info1"></i>
    <h2 class="generic-table--no-results-title">
      {{ text.noResults }}
    </h2>
    <div class="generic-table--no-results-description"
      ng-bind-html="text.noResultsDescription"></div>
  </div>
</div>