OpenSlides/openslides/motions/static/templates/motions/motion-list.html

<div class="header">
  <div class="title">
    <div class="submenu">
      <a ng-click="openDialog()" os-perms="motions.can_create" class="btn btn-primary btn-sm">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
      <a ui-sref="motions.category.list" os-perms="motions.can_manage" class="btn btn-default btn-sm">
        <i class="fa fa-sitemap fa-lg"></i>
        <translate>Categories</translate>
      </a>
      <a ui-sref="core.tag.list" os-perms="core.can_manage_tags" class="btn btn-default btn-sm">
        <i class="fa fa-tags fa-lg"></i>
        <translate>Tags</translate>
      </a>
      <a ui-sref="motions.motion.import" os-perms="motions.can_manage" class="btn btn-default btn-sm">
        <i class="fa fa-download fa-lg"></i>
        <translate>Import</translate>
      </a>
    </div>
    <h1 translate>Motions</h1>
  </div>
</div>

<div class="details">
  <div class="row">
    <div class="col-sm-12">
      <!-- delete mode -->
      <button os-perms="motions.can_manage" class="btn"
          ng-class="$parent.isDeleteMode ? 'btn-primary' : 'btn-default'"
          ng-click="$parent.isDeleteMode = !$parent.isDeleteMode; uncheckAll()">
        <i class="fa fa-check-square-o"></i>
        <translate>Select ...</translate>
      </button>
      <!-- Export dropdown -->
      <div class="dropdown pull-right" uib-dropdown>
        <button type=button" class="btn btn-default" id="dropdownExport" uib-dropdown-toggle>
          <i class="fa fa-upload"></i>
          <span ng-if="motionsFiltered.length == motions.length" translate>
            Export all
          </span>
          <span ng-if="motionsFiltered.length != motions.length" translate>
            Export filtered
          </span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownExport">
          <li>
            <a ui-sref="motions_pdf" target="_blank">
              <i class="fa fa-file-pdf-o fa-lg"></i>
              <translate>PDF</translate>
            </a>
          </li>
          <!--CSV export -->
          <li>
            <a href="" id="downloadLink"
              os-perms="motions.can_manage"
              ng-click="csv_export()">
              <i class="fa fa-file-text-o fa-lg"></i>
              <translate>CSV</translate>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div uib-collapse="!isDeleteMode" class="row spacer">
    <div class="col-sm-12 text-left">
      <!-- delete button -->
      <a ng-show="isDeleteMode" os-perms="motions.can_manage"
        ng-bootbox-confirm="{{ 'Are you sure you want to delete these motions?' | translate }}"
        ng-bootbox-confirm-action="deleteMultiple()"
        class="btn btn-primary">
        <i class="fa fa-trash fa-lg"></i>
        <translate>Delete selected motions</translate>
      </a>
    </div>
  </div>

  <div class="spacer-top-lg italic">
    {{ motionsFiltered.length }} /
    {{ motions.length }} {{ "motions" | translate }}<span ng-if="(motions|filter:{selected:true}).length > 0">,
    {{(motions|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
  </div>

  <div id="motion-table" class="container-fluid">
    <div class="row header-row">
      <div class="col-xs-1 centered" ng-show="isDeleteMode">
        <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">
          <span class="sort-spacer pointer" ng-click="reset_filters()"
            ng-if="are_filters_set()" ng-disabled="isDeleteMode"
            ng-class="{'disabled': isDeleteMode}">
            <i class="fa fa-times-circle"></i>
            <translate>Filter</translate>
          </span>
          <!-- Statefilter -->
          <span class="dropdown" uib-dropdown>
            <span class="pointer" id="dropdownState" uib-dropdown-toggle
              ng-class="{'bold': multiselectFilter.state.length > 0, 'disabled': isDeleteMode}"
              ng-disabled="isDeleteMode">
              <translate>State</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownState">
              <li ng-repeat="state in states" ng-class="state.workflowHeader ? 'dropdown-header' : ''">
                <div class="dropdown-entry pointer" ng-if="state.workflowHeader">
                  {{ state.name | translate }}
                </div>
                <div class="dropdown-entry pointer" ng-if="!state.workflowHeader"
                  ng-click="operateMultiselectFilter('state', state.id)">
                  <i class="fa fa-check" ng-if="multiselectFilter.state.indexOf(state.id) > -1"></i>
                  {{ state.name | translate }}
                </div>
              </li>
            </ul>
          </span>
          <!-- Categoryfilter -->
          <span class="dropdown" uib-dropdown ng-if="categories.length > 0">
            <span class="pointer" id="dropdownCategory" uib-dropdown-toggle
              ng-class="{'bold': multiselectFilter.category.length > 0, 'disabled': isDeleteMode}"
              ng-disabled="isDeleteMode">
              <translate>Category</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right"
              aria-labelledby="dropdownCategory">
              <li ng-repeat="category in categories">
                <div class="dropdown-entry pointer"
                  ng-click="operateMultiselectFilter('category', category.id)">
                  <i class="fa fa-check" ng-if="multiselectFilter.category.indexOf(category.id) > -1"></i>
                  {{ category.name }}
                </div>
              </li>
            </ul>
          </span>
          <!-- Tagfilter -->
          <span class="dropdown" uib-dropdown ng-if="tags.length > 0">
            <span class="pointer" id="dropdownTag" uib-dropdown-toggle
              ng-class="{'bold': multiselectFilter.tag.length > 0, 'disabled': isDeleteMode}"
              ng-disabled="isDeleteMode">
              <translate>Tag</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right"
              aria-labelledby="dropdownTag">
              <li ng-repeat="tag in tags">
                <div class="dropdown-entry pointer"
                  ng-click="operateMultiselectFilter('tag', tag.id)">
                  <i class="fa fa-check" ng-if="multiselectFilter.tag.indexOf(tag.id) > -1"></i>
                  {{ tag.name }}
                </div>
              </li>
            </ul>
          </span>
          <!-- dropdown sort -->
          <span class="dropdown" uib-dropdown>
            <span class="pointer" id="dropdownSort" uib-dropdown-toggle
              ng-class="{'disabled': isDeleteMode}"
              ng-disabled="isDeleteMode">
              <translate>Sort</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownSort">
              <li>
                <!-- item -->
                <div class="pointer dropdown-entry" ng-click="toggleSort('agenda_item.getItemNumberWithAncestors()')">
                  <translate translate-comment="short form of agenda item">Item</translate>
                  <span class="spacer-right pull-right"></span>
                  <i class="pull-right fa"
                    ng-style="{'visibility': sortColumn === 'agenda_item.getItemNumberWithAncestors()' && header.sortable != false ? 'visible' : 'hidden'}" 
                    ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
                  </i>
                </div>
              </li>
              <li>
                <!-- indentifier -->
                <div class="pointer dropdown-entry" ng-click="toggleSort('identifier')">
                  <translate>Identifier</translate>
                <span class="spacer-right pull-right"></span>
                  <i class="pull-right fa"
                    ng-style="{'visibility': sortColumn === 'identifier' && header.sortable != false ? 'visible' : 'hidden'}" 
                    ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
                  </i>
                </div>
              </li>
              <li>
                <!-- title -->
                <div class="pointer dropdown-entry" ng-click="toggleSort('getTitle()')">
                  <translate>Title</translate>
                  <span class="spacer-right pull-right"></span>
                  <i class="pull-right fa"
                    ng-style="{'visibility': sortColumn === 'getTitle()' && header.sortable != false ? 'visible' : 'hidden'}" 
                    ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
                  </i>
                </div>
              </li>
              <li>
                <!-- submitters -->
                <div class="pointer dropdown-entry" ng-click="toggleSort('submitters')">
                  <translate>Submitters</translate>
                  <span class="spacer-right pull-right"></span>
                  <i class="pull-right fa"
                    ng-style="{'visibility': sortColumn === 'submitters' && header.sortable != false ? 'visible' : 'hidden'}" 
                    ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
                  </i>
                </div>
              </li>
              <li>
                <!-- category -->
                <div class="pointer dropdown-entry" ng-click="toggleSort('category')">
                  <translate>Category</translate>
                  <span class="spacer-right pull-right"></span>
                  <i class="pull-right fa"
                    ng-style="{'visibility': sortColumn === 'category' && header.sortable != false ? 'visible' : 'hidden'}" 
                    ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
                  </i>
                </div>
              </li>
              <li>
                <!-- state -->
                <div class="pointer dropdown-entry" ng-click="toggleSort('state.name')">
                  <translate>State</translate>
                  <span class="spacer-right pull-right"></span>
                  <i class="pull-right fa"
                    ng-style="{'visibility': sortColumn === 'state.name' && header.sortable != false ? 'visible' : 'hidden'}" 
                    ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
                  </i>
                </div>
              </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.search" class="form-control"
                 placeholder="{{ 'Search' | translate}}" ng-disabled="isDeleteMode">
            </span>
          </span>
        </span>
        <!-- show all selected multiselectoptions -->
        <span>
          <span ng-repeat="state in states" class="pointer spacer-left-lg"
            ng-if="!state.workflowHeader && multiselectFilter.state.indexOf(state.id) > -1"
            ng-click="operateMultiselectFilter('state', state.id)"
            ng-class="{'disabled': isDeleteMode}">
            <span class="nobr">
              <i class="fa fa-times-circle"></i>
              {{ state.name | translate }}
            </span>
          </span>
          <span ng-repeat="category in categories" class="pointer spacer-left-lg"
            ng-if="multiselectFilter.category.indexOf(category.id) > -1"
            ng-click="operateMultiselectFilter('category', category.id)"
            ng-class="{'disabled': isDeleteMode}">
            <span class="nobr">
              <i class="fa fa-times-circle"></i>
              {{ category.name }}
            </span>
          </span>
          <span ng-repeat="tag in tags" class="pointer spacer-left-lg"
            ng-if="multiselectFilter.tag.indexOf(tag.id) > -1"
            ng-click="operateMultiselectFilter('tag', tag.id)"
            ng-class="{'disabled': isDeleteMode}">
            <span class="nobr">
              <i class="fa fa-times-circle"></i>
              {{ tag.name }}
            </span>
          </span>
        </span>
      </div>
    </div>

    <!-- main table -->
    <!-- data row -->
    <div class="row data-row" ng-mouseover="motion.hover=true"
      ng-mouseleave="motion.hover=false"
      ng-class="{'projected': motion.isProjected()}"
      ng-repeat="motion in motionsFiltered = (motions
        | osFilter: filter.search : getFilterString
        | SelectMultipleFilter: multiselectFilter.state : getItemId.state
        | SelectMultipleFilter: multiselectFilter.category : getItemId.category
        | SelectMultipleFilter: multiselectFilter.tag : getItemId.tag
        | orderBy: sortColumn : reverse)">
        
      <!-- select column -->
      <div ng-show="isDeleteMode" os-perms="motions.can_manage"
        class="col-xs-1 centered" ng-class="{'deleteColumn' : motion.selected}">
        <i class="fa text-danger pointer" ng-click="motion.selected=!motion.selected"
        ng-class="motion.selected ? 'fa-check-square-o' : 'fa-square-o'"></i>
      </div>
      <!-- projector column -->
      <div class="col-xs-1 centered" os-perms="core.can_manage_projector">
        <a class="btn btn-default btn-sm"
          ng-class="{ 'btn-primary': motion.isProjected() }"
          ng-click="motion.project()"
          title="{{ 'Project motion' | translate }}">
          <i class="fa fa-video-camera"></i>
        </a>
      </div>
      <!-- main content column -->
      <div class="col-xs-6 content">
        <div class="identifier-col">
          <div class="nobr" ng-show="motion.identifier">
            {{ motion.identifier }}:
          </div>
          <!-- hover menu -->
          <div ng-if="motion.isAllowed('update')" ng-class="{'hiddenDiv': !motion.hover}">
            <span ng-if="motion.isAllowed('update')">
              <a href="" ng-click="openDialog(motion)">
                <i class="fa fa-pencil"></i></a>
            </span>
            <span ng-if="motion.isAllowed('delete')">
              &nbsp;<a href="" ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
                <b>{{ motion.getTitle() }}</b>"
                ng-bootbox-confirm-action="delete(motion)">
                <i class="fa fa-trash text-danger"></i></a>
            </span>
          </div>
        </div>
        <div class="title-col">
          <!-- ID and title -->
          <div>
            <strong>
              <a class="title" ui-sref="motions.motion.detail({id: motion.id})">{{ motion.getTitle() }}</a>
            </strong>
            <i class="fa fa-paperclip" ng-if="motion.attachments_id.length > 0"></i>
            <span style="padding: 5px;" ng-mouseover="motion.stateHover=true" ng-mouseleave="motion.stateHover=false">
              <span class="label" ng-class="'label-'+motion.state.css_class">
                {{ motion.state.name | translate }}
              </span>
              <span ng-class="{'hiddenDiv': !motion.stateHover}" uib-dropdown>
                <i class="fa fa-cog pointer" uib-dropdown-toggle id="state-dropdown{{ motion.id }}"></i>
                <ul uib-dropdown-menu aria-labelledby="state-dropdown{{ motion.id }}">
                  <li ng-repeat="state in motion.state.getNextStates()">
                    <a href ng-click="updateState(motion, state.id)">{{ state.action_word | translate }}</a>
                  </li>
                  <li class="divider" ng-if="motion.state.getNextStates().length"></li>
                  <li>
                    <a href ng-if="motion.isAllowed('reset_state')" ng-click="reset_state(motion)">
                      <i class="fa fa-exclamation-triangle"></i>
                      <translate>Reset state</translate>
                    </a>
                  </li>
                </ul>
              </span>
            </span>
          </div>
          <!-- Submitters -->
          <div>
            <span>
              <span class="optional" translate>by</span> 
              <span class="optional" ng-repeat="submitter in motion.submitters | limitTo:3">
                {{ submitter.get_full_name() }}<span ng-if="!$last">,</span></span><span ng-if="motion.submitters.length > 3">, ...</span>
              <!-- sorry for merging them together, but otherwise there would be a whitespace because of the new line -->

            </span>
          </div>

        </div>
      </div>
      <!-- additional content column -->
      <style>
        #motion-table .row .col-xs-4 {
          width: calc(50% - {{ isDeleteMode ? '100' : '50' }}px);
        }
      </style>
      <div class="col-xs-4 content">
        <div style="width: 60%;" class="optional">
          <small>
            <div ng-mouseover="motion.categoryHover=true"
              ng-mouseleave="motion.categoryHover=false"
              ng-show="categories.length > 0">
              <!-- Category dropdown -->
              <span uib-dropdown>
                <span id="dropdown-category{{ motion.id }}" class="pointer"
                  uib-dropdown-toggle uib-tooltip="{{ 'Set a category' | translate }}"
                  tooltip-class="nobr">
                  <span ng-if="motion.category == null" ng-show="motion.hover">
                    <i class="fa fa-sitemap"></i>
                    <i class="fa fa-plus"></i>
                  </span>
                  <span ng-if="motion.category != null">
                    <i class="fa fa-sitemap spacer-right"></i>
                    {{ motion.category.name }}
                    <i class="fa fa-cog fa-lg spacer-left" ng-show="motion.categoryHover"></i>
                  </span>
                </span>
                <ul class="dropdown-menu" aria-labelledby="dropdown-category{{ motion.id }}">
                  <li ng-repeat="category in categories">
                    <div class="dropdown-entry pointer"
                      ng-click="toggle_category(motion, category)">
                      <i class="fa fa-check" ng-if="category.id == motion.category.id"></i>
                      {{ category.name }}
                    </div>
                  </li>
                </ul>
              </span>
            </div>
            <div ng-mouseover="motion.tagHover=true"
              ng-mouseleave="motion.tagHover=false"
              ng-show="tags.length > 0">
              <span uib-dropdown>
                <span id="dropdown-tags{{ motion.id }}" class="pointer"
                  uib-dropdown-toggle uib-tooltip="{{ 'Add a tag' | translate }}"
                  tooltip-class="nobr">
                  <span ng-if="motion.tags.length == 0" ng-show="motion.hover">
                    <i class="fa fa-tags"></i>
                    <i class="fa fa-plus"></i>
                  </span>
                  <span ng-if="motion.tags.length > 0">
                    <i class="fa fa-tags spacer-right"></i>
                    <span ng-repeat="tag in motion.tags">
                      {{ tag.name }}<span ng-if="!$last">,</span>
                    </span>
                    <i class="fa fa-cog fa-lg spacer-left" ng-show="motion.tagHover"></i>
                  </span>
                </span>
                <ul class="dropdown-menu" aria-labelledby="dropdown-tags{{ motion.id }}">
                  <li ng-repeat="tag in tags">
                    <div class="dropdown-entry pointer" ng-click="toggle_tag(motion, tag)">
                      <i class="fa fa-check" ng-if="has_tag(motion, tag)"></i>
                      {{ tag.name }}
                    </div>
                  </li>
                </ul>
              </span>
            </div>
            <div ng-if="motion.origin">
              <i class="fa fa-share spacer-right" uib-tooltip="{{ 'Origin' | translate }}"></i>
                {{ motion.origin | limitTo:25 }}{{ motion.origin.length > 25 ? '...' : '' }}
            </div>
          </small>
        </div>
        <div style="width: 10%;" class="pull-right optional">
          <div class="pull-right" ng-if="config('motions_min_supporters') != 0"
            uib-tooltip="{{ motion.supporters.length }} {{ 'Supporters' | translate }}
            {{ (config('motions_min_supporters') - motion.supporters.length) > 0 ? '(' +  (config('motions_min_supporters') - motion.supporters.length) + ' ' + ('needed' | translate) + ')': '' }}"
            tooltip-class="nobr">
            <span class="badge"
              ng-class="{'badge-info': motion.supporters.length < config('motions_min_supporters')}">
              {{ motion.supporters.length }}
            </span>
          </div>
        </div>
        <div style="width: 30%;" class="pull-right">
          <div class="centered">{{ motion.agenda_item.getItemNumberWithAncestors() }}</div>
        </div>
      </div>
    </div> <!-- data row -->

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