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"
       wp-virtual-scroll-table>
    <timeline-control></timeline-control>
    <table interactive-table class="keyboard-accessible-list generic-table work-package-table">
      <colgroup>
        <col highlight-col />
        <col highlight-col ng-repeat="column in columns" />
      </colgroup>
      <caption class="hidden-for-sighted">
        <span ng-bind="::text.tableSummary"></span>
        <span id="wp-table-sort-summary"></span>
        <span ng-bind="::text.tableSummaryHints"></span>
      </caption>
      <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>

          <th ng-show="wpTimelineContainer.visible">
            <div class="wp-timeline--slider-wrapper">
              <div class="wp-timeline--slider"></div>
            </div>
            <div class="wp-timeline-header-container generic-table--sort-header-outer">
              <div class="wp-timeline--scroll-wrapper">
                <span class="generic-table--sort-header wp-timeline-header">
                </span>
              </div>
            </div>
          </th>
        </tr>
      </thead>

      <tbody>
        <!-- Empty row notification -->
        <tr id="empty-row-notification" ng-if="!rows.length">
          <td colspan="{{ numTableColumns }}">
            <span ng-if="!query.hasError">
              <i class="icon-info1 icon-context"></i>
              <strong ng-bind="text.noResults.title"></strong>
              <span ng-bind="text.noResults.description"></span>
            </span>
            <span ng-if="query.hasError">
              <i class="wp-table--faulty-query-icon icon-warning icon-context"></i>
              <strong ng-bind="text.faultyQuery.title"></strong>
              <span ng-bind="text.faultyQuery.description"></span>
            </span>
          </td>
        </tr>
        <!-- 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-show="row.groupName != undefined"
            ng-class="{
              group: true,
              open: groupExpanded[$ctrl.currentGroup],
              closed: !groupExpanded[$ctrl.currentGroup],
              keyboard_hover: true
            }"
            id="group-header-{{ row.groupName }}">
          <td colspan="{{ numTableColumns }}">
            <div ng-class="[
                    'expander',
                    'icon-context',
                    'icon-' + (groupExpanded[$ctrl.currentGroup] && 'minus2' || 'plus')
                  ]"
                  ng-click="$ctrl.toggleCurrentGroup()">
              <span ng-class="{
                'hidden-for-sighted': true,
                expand: !groupExpanded[$ctrl.currentGroup],
                collapse: groupExpanded[$ctrl.currentGroup]
              }">
                {{ groupExpanded[$ctrl.currentGroup] && text.collapse || text.expand }}
              </span>
            </div>

            <div>
              {{ $ctrl.currentGroupName }}
              <span class="count">
                ({{ $ctrl.currentGroupObject.count }})
              </span>
            </div>

          </td>
        </tr>

        <!-- Work package rows -->

        <tr wp-virtual-scroll-row="$index"
            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 :tabbable"
            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"
            wp-edit-form-on-error="handleErroneousColumns(workPackage, fields, attributes)"
            wp-edit-form-on-save="onWorkPackageSave(workPackage, fields)"
            wp-attachments-formattable
            tabindex="-1">
          <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 hidden-for-sighted"
                 ui-state="desiredSplitViewState"
                 ui-state-params="{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>
              <accessible-by-keyboard
                          execute="cancelInlineWorkPackage($index, row)"
                          span-class="icon icon-cancel"
                          link-title="{{ text.cancel }}"
                          link-class="wp-table--cancel-create-link">
              </accessible-by-keyboard>
            </span>
          </td>

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

          <td class="wp-timeline-cell -max"
              style="
                display: none;
                position: relative;
                ">
          </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-display-attr attribute="column.name"
                     custom-schema="resource.sumsSchema"
                     work-package="currentGroupObject.sums">
              </wp-display-attr>
            </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="{{ numTableColumns }}">
            <wp-inline-create-button
                project-identifier="projectIdentifier"
                allowed="!!resource.createWorkPackage"
                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-display-attr class="generic-table--footer-outer"
                   attribute="column.name"
                   custom-schema="resource.sumsSchema"
                   work-package="resource.totalSums">
            </wp-display-attr>
          </td>
        </tr>
      </tfoot>
    </table>
    <div class="generic-table--header-background"></div>
    <div class="generic-table--footer-background" ng-if="sumsLoaded()"></div>
  </div>
</div>