OpenSlides/openslides/agenda/static/templates/agenda/item-list.html

<div class="header">
  <div class="title">
    <div class="submenu">
      <!-- new -->
      <a ng-click="newDialog()" os-perms="agenda.can_manage"
          class="btn btn-primary btn-sm">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
      <!-- import -->
      <span os-perms="agenda.can_manage">
        <a ui-sref="topics.topic.import"
          os-perms="agenda.can_see_hidden_items"
          class="btn btn-default btn-sm">
          <i class="fa fa-download fa-lg"></i>
          <translate>Import</translate>
        </a>
      </span>
      <!-- current list of speakers -->
      <a ui-sref="agenda.current-list-of-speakers" os-perms="users.can_see_name"
          class="btn btn-default btn-sm">
        <i class="fa fa-microphone"></i>
        <translate>Current list of speakers</translate>
      </a>
      <!-- project agenda button -->
      <div class="btn-group button" uib-dropdown
        uib-tooltip="{{ 'Projector' | translate }} {{ isAgendaProjected(mainListTree)[0] || '' }}"
        tooltip-enable="isAgendaProjected(mainListTree).length"
        os-perms="core.can_manage_projector">
        <button type="button" class="btn btn-default btn-sm"
            title="{{ 'Project agenda' | translate }}"
            ng-click="projectAgenda(defaultProjectorId_all_items, mainListTree)"
            ng-class="{ 'btn-primary': isAgendaProjected(mainListTree).length && inArray(isAgendaProjected(mainListTree), defaultProjectorId_all_items)}">
          <i class="fa fa-video-camera"></i>
          <translate>Agenda</translate>
        </button>
        <button type="button" class="btn btn-default btn-sm" uib-dropdown-toggle
            ng-class="{ 'btn-primary': isAgendaProjected(mainListTree).length && !inArray(isAgendaProjected(mainListTree), defaultProjectorId_all_items)}"
            ng-if="agendaHasSubitems || projectors.length > 1">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="split-button" ng-if="agendaHasSubitems || projectors.length > 1">
          <li role="menuitem" ng-show="agendaHasSubitems">
            <a href="" ng-click="changeMainListTree(); $event.stopPropagation();">
              <i class="fa" ng-class="mainListTree ? 'fa-square-o' : 'fa-check-square-o'"></i>
              <translate>Only main agenda items</translate>
            </a>
          </li>
          <li class="divider" ng-show="agendaHasSubitems && projectors.length > 1"></li>
          <li role="menuitem" ng-repeat="projector in projectors | orderBy:'id'" ng-show="projectors.length > 1">
            <a href="" ng-click="projectAgenda(projectorId=projector.id, tree=mainListTree)"
              ng-class="{ 'projected': inArray(isAgendaProjected(mainListTree), projector.id) }">
              <i class="fa fa-video-camera" ng-show="inArray(isAgendaProjected(mainListTree), projector.id) "></i>
              {{ projector.name | translate }}
              <span ng-if="projector.id == defaultProjectorId_all_items">(<translate>Default</translate>)</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <h1 translate>Agenda</h1>
  </div>
</div>

<div class="details">
  <div class="row">
    <div class="col-sm-12">
      <!-- select mode -->
      <button os-perms="agenda.can_manage" class="btn btn-sm"
          ng-class="$parent.isSelectMode ? 'btn-primary' : 'btn-default'"
          ng-click="$parent.isSelectMode = !$parent.isSelectMode; uncheckAll()">
        <i class="fa fa-check-square-o"></i>
        <translate>Select ...</translate>
      </button>
      <!-- sort button -->
      <a ui-sref="agenda.item.sort" os-perms="agenda.can_manage" class="btn btn-default btn-sm">
        <i class="fa fa-sitemap fa-lg"></i>
        <translate>Sort ...</translate>
      </a>
      <!-- auto numbering button -->
      <button os-perms="agenda.can_manage" class="btn btn-default btn-sm"
        ng-click="autoNumbering()">
        <i class="fa fa-sort-numeric-asc"></i>
        <translate>Numbering</translate>
      </button>
      <!-- pdf -->
      <div class="pull-right" uib-dropdown>
        <button type="button" class="btn btn-default btn-sm" id="dropdownExport" uib-dropdown-toggle>
          <i class="fa fa-upload"></i>
          <span ng-if="itemsFiltered.length == items.length" translate>
            Export all
          </span>
          <span ng-if="itemsFiltered.length != items.length" translate>
            Export filtered
          </span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownExport">
          <!-- PDF export -->
          <li>
            <a href="" ng-click="pdfExport()">
              <i class="fa fa-file-pdf-o"></i>
              PDF
            </a>
          </li>
          <!-- CSV export -->
          <li os-perms="agenda.can_manage">
            <a href="" id="downloadLinkCSV"
              ng-click="csvExport()">
              <i class="fa fa-file-text-o"></i>
              CSV
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div uib-collapse="!isSelectMode" class="row spacer">
    <div class="col-sm-12 text-left">
      <!-- delete button -->
      <a ng-show="isSelectMode" os-perms="agenda.can_manage"
        ng-bootbox-confirm="{{ 'Are you sure you want to delete all selected agenda items?' | translate }}"
        ng-bootbox-confirm-action="deleteMultiple()"
        class="btn btn-default btn-sm btn-danger">
        <i class="fa fa-trash fa-lg"></i>
        <translate>Delete selected items</translate>
      </a>
    </div>
  </div>

  <div class="spacer-top-lg italic row">
    <div class="col-md-6">
      <span os-perms="agenda.can_see_hidden_items">{{ itemsFiltered.length }} /</span>
      {{ items.length }} {{ "items" | translate }}<span ng-if="(items|filter:{selected:true}).length > 0">,
      {{(items|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
      <span os-perms="agenda.can_see_hidden_items" class="optional">
        <span ng-if="sumDurations() > 0">&middot;
          <translate>Duration</translate>:
          {{ sumDurations() | osMinutesToTime }}h
          <span ng-if="config('agenda_start_event_date_time')">
            (<translate>Estimated end:</translate> {{ calculateEndTime() }})
          </span>
        </span>
      </span>
    </div>
    <div class="col-md-6" ng-show="itemsFiltered.length > itemsPerPage">
      <span class="pull-right">
        <translate>Page</translate> {{ currentPage }} / {{ Math.ceil(itemsFiltered.length/itemsPerPage) }}
      </span>
    </div>
  </div>

  <div id="agenda-table" class="os-table container-fluid">
    <div class="row header-row">
      <div class="col-xs-1 centered" ng-show="isSelectMode">
        <i class="fa text-danger pointer" ng-class="selectedAll ? 'fa-check-square-o' : 'fa-square-o'"
          ng-click="checkAll()"></i>
      </div>
      <div class="col-xs-11 main-header">
        <span class="form-inline text-right pull-right">
          <!-- clear all filters -->
          <span class="sort-spacer pointer" ng-click="filter.reset(isSelectMode)"
            ng-if="filter.areFiltersSet()" ng-disabled="isSelectMode"
            ng-class="{'disabled': isSelectMode}">
            <i class="fa fa-times-circle"></i>
            <translate>Filter</translate>
          </span>
          <!-- boolean Filters -->
          <span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
            ng-if="!booleanFilter.permission || operator.hasPerms(booleanFilter.permission)" uib-dropdown>
            <span class="pointer" id="dropdown{{ name }}" uib-dropdown-toggle
              ng-class="{'bold': booleanFilter.value !== undefined, 'disabled': isSelectMode}"
              ng-disabled="isSelectMode">
              {{ booleanFilter.displayName | translate }}
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown{{ name }}">
              <li>
                <a href ng-click="booleanFilter.value = (booleanFilter.value ? undefined : true); filter.save();">
                  <i class="fa" ng-class="{'fa-check': booleanFilter.value === true}"></i>
                  {{ booleanFilter.choiceYes | translate }}
                </a>
              </li>
              <li>
                <a href ng-click="booleanFilter.value = (booleanFilter.value === false) ? undefined : false; filter.save();">
                  <i class="fa" ng-class="{'fa-check': booleanFilter.value === false}"></i>
                  {{ booleanFilter.choiceNo | translate }}
                </a>
              </li>
            </ul>
          </span>
          <!-- search field -->
          <span class="form-group">
            <span class="input-group">
              <span class="input-group-addon"><i class="fa fa-search"></i></span>
              <input type="text" ng-model="filter.filterString" class="form-control"
                 placeholder="{{ 'Search' | translate}}" ng-disabled="isSelectMode"
                 ng-change="filter.save()">
            </span>
          </span>
        </span>
        <!-- show all selected multiselectoptions -->
        <span>
          <!-- for all boolean Filters -->
          <span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
            ng-hide="booleanFilter.value === undefined"
            class="pointer spacer-left-lg"
            ng-click="booleanFilter.value = undefined; filter.save();"
            ng-class="{'disabled': isSelectMode}">
            <span class="nobr">
              <i class="fa fa-times-circle"></i>
              {{ booleanFilter.value ? booleanFilter.choiceYes : booleanFilter.choiceNo | translate }}
            </span>
          </span>
        </span>
      </div>
    </div>

    <!-- main table -->
    <div class="row data-row" ng-mouseover="item.hover=true"
      ng-mouseleave="item.hover=false"
      ng-class="{'projected': item.isProjected().length,
      'related-projected': item.isRelatedProjected().length}"
      ng-repeat="item in itemsFiltered = (items
        | osFilter: filter.filterString : filter.getObjectQueryString
        | filter: {closed: filter.booleanFilters.closed.value}
        | filter: {is_hidden: filter.booleanFilters.is_hidden.value})
        | limitTo : itemsPerPage : limitBegin">

      <!-- select column -->
      <div ng-show="isSelectMode" os-perms="agenda.can_manage" class="col-xs-1 centered">
        <i class="fa text-danger pointer" ng-click="item.selected=!item.selected"
        ng-class="item.selected ? 'fa-check-square-o' : 'fa-square-o'"></i>
      </div>
      <!-- projector column -->
      <div class="col-xs-1 centered projector" os-perms="core.can_manage_projector">
        <div class="btn-group" style="min-width:{{ (item.hasSubitems(items) || projectors.length > 1) ? '54' : '34' }}px;" uib-dropdown
          uib-tooltip="{{ 'Projector' | translate }} {{ item.isProjected(item.tree)[0] || '' }}"
          tooltip-enable="item.isProjected(item.tree).length">
          <button class="btn btn-default btn-sm"
              title="{{ 'Project item' | translate }}"
              ng-click="item.project(getProjectionDefault(item), item.tree)"
              ng-class="{ 'btn-primary': item.isProjected(item.tree).length && inArray(item.isProjected(item.tree), getProjectionDefault(item))}">
            <i class="fa fa-video-camera"></i>
          </button>
          <button type="button" class="btn btn-default btn-sm slimDropDown"
              ng-class="{ 'btn-primary': item.isProjected(item.tree).length && !inArray(item.isProjected(item.tree), getProjectionDefault(item))}"
              ng-if="item.hasSubitems(items) || projectors.length > 1"
              uib-dropdown-toggle>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="split-button"
            ng-if="item.hasSubitems(items) || projectors.length > 1">
            <li role="menuitem" ng-show="item.hasSubitems(items)">
              <a href="" ng-click="changeItemTree(item); $event.stopPropagation();">
                <i class="fa" ng-class="item.tree ? 'fa-check-square-o' : 'fa-square-o'"></i>
                <translate>Include all sub items</translate>
              </a>
            </li>
            <li class="divider" ng-show="item.hasSubitems(items)"></li>
            <li role="menuitem" ng-repeat="projector in projectors | orderBy:'id'">
              <a href="" ng-click="item.project(projector.id, item.tree)"
                ng-class="{ 'projected': inArray(item.isProjected(item.tree), projector.id) }">
                <i class="fa fa-video-camera" ng-show="inArray(item.isProjected(item.tree), projector.id)"></i>
                {{ projector.name | translate }}
                <span ng-if="projector.id == getProjectionDefault(item)">(<translate>Default</translate>)</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="no-projector-spacer" os-perms="!core.can_manage_projector"></div>

      <!-- main content column -->
      <div class="col-xs-6 content" style="padding-left: calc({{ item.parentCount }}*15px)">
        <div class="icon-column">
          <i class="fa fa-ban" ng-style="{'visibility': item.is_hidden ? 'visible' : 'hidden'}"
            title="{{ 'Internal item' | translate }}"></i>
        </div>
        <div class="title-column">
          <!-- ID and title -->
          <div>
            <a class="title" ui-sref="{{ item.getContentObjectDetailState() }}" ng-show="isAllowedToSeeOpenLink(item)">
              {{ item.getListViewTitle() }}
            </a>
            <span class="title" ng-hide="isAllowedToSeeOpenLink(item)">
              {{ item.getListViewTitle() }}
            </span>
          </div>
          <!-- hover menu -->
          <div os-perms="agenda.can_see" ng-class="{'hiddenDiv': !item.hover}">
            <small>
              <a ui-sref="agenda.item.detail({id: item.id})" translate>List of speakers</a>
              <span os-perms="agenda.can_manage"> &middot;
                <a href="" ng-click="edit(item)" translate>Edit</a> &middot;
                <a href="" class="text-danger"
                  ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
                    <b>{{ item.getTitle() }}</b>"
                  ng-bootbox-confirm-action="deleteRelatedItem(item)" translate>Delete</a>
              </span>
            </small>
          </div>

        </div>
      </div>
      <!-- additional content column -->
      <div class="col-xs-4 content" ng-style="{'width': isSelectMode ? 'calc(50% - 120px)' : 'calc(50% - 70px)'}">
        <div style="width: 60%;" class="optional">
          <small>
            <div ng-style="{'visibility': (item.duration || item.hover) ? 'visible' : 'hidden'}">
              <div class="popover-wrapper" os-perms="agenda.can_manage">
                <i class="fa fa-clock-o"></i>
                <span editable-text="item.durationText" e-placeholder="hh:mm"
                  onshow="generateDurationText(item)" onaftersave="setDurationText(item)">
                  <span ng-if="!item.duration" translate>Set duration ...</span>
                  <span ng-if="item.duration">
                    {{ (item.duration | osMinutesToTime)}}
                    <translate translate-comment="'h' means time in hours">h</translate>
                  </span>
                </span>
              </div>
              <div os-perms="!agenda.can_manage">
                <span ng-if="item.duration">
                  <i class="fa fa-clock-o"></i> {{ item.duration | osMinutesToTime }}
                </span>
              </div>
            </div>
            <div ng-style="{'visibility': (item.comment || item.hover) ? 'visible' : 'hidden'}">
              <div class="popover-wrapper" os-perms="agenda.can_manage">
                <i class="fa fa-info-circle"></i>
                <span editable-text="item.comment" onaftersave="save(item)">
                  <span ng-if="!item.comment" translate>Set comment ...</span>
                  <span ng-if="item.comment">{{ item.comment }}</span>
                </span>
              </div>
            </div>
            <div ng-style="{'visibility': ((item.type == 1) && item.hover) ? 'visible' : 'hidden'}" os-perms="agenda.can_manage">
              <div class="popover-wrapper" os-perms="agenda.can_manage">
                <i class="fa fa-info-circle"></i>
                <span editable-text="item.item_number" onaftersave="save(item)">
                  <span ng-if="!item.item_number" translate>Set item number ...</span>
                  <span ng-if="item.item_number"><em translate>Change item number ...</em></span>
                </span>
              </div>
            </div>
            <template-hook hook-name="agendaListAdditionalContentColumn"></template-hook>
          </small>
        </div>
        <div style="width: 40%;" class="pull-right">
          <div os-perms="agenda.can_manage">
            <div class="pointer nobr" ng-click="item.type = (item.type == 1) ? 2 : 1; save(item);" ng-show="item.hover || item.is_hidden">
              <i class="fa" ng-class="item.is_hidden ? 'fa-check-square-o' : 'fa-square-o'"></i>
              <span class="spacer-left" translate>Internal item</span>
            </div>
            <div class="pointer nobr" ng-click="item.closed = !item.closed; save(item);" ng-show="item.hover || item.closed">
              <i class="fa" ng-class="item.closed ? 'fa-check-square-o' : 'fa-square-o'"></i>
              <span class="spacer-left" translate>Done</span>
            </div>
          </div>
          <div os-perms="!agenda.can_manage" ng-if="item.closed">
            <i class="fa fa-check-square-o"></i>
            <span class="spacer-left" translate>Done</span>
          </div>
        </div>
      </div>
    </div> <!-- data row -->

  </div> <!-- container -->

  <ul uib-pagination
      ng-show="itemsFiltered.length > itemsPerPage"
      total-items="itemsFiltered.length"
      items-per-page="itemsPerPage"
      ng-model="currentPage"
      ng-change="pageChanged()"
      class="pagination-sm"
      direction-links="false"
      boundary-links="true"
      first-text="&laquo;"
      last-text="&raquo;">
  </ul>
</div> <!-- details -->