OpenSlides/openslides/motions/static/templates/motions/workflow-detail.html

<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="motions.workflow.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
      <a os-perms="motions.can_manage" class="btn btn-primary btn-sm"
        ng-click="openStateDialog()" title="add new state">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
      <button type="button" class="btn btn-sm"
        ng-class="expandContent ? 'btn-primary' : 'btn-default'"
        ng-click="toggleExpandContent(); saveExpandState(expandContent)">
        <i class="fa fa-arrows-h fa-lg"></i>
        <span ng-if="!expandContent" translate>Expand</span>
        <span ng-if="expandContent" translate>Reduce</span>
      </button>
    </div>
    <h1>
      {{ workflow.name | translate }}
      <i class="fa fa-pencil pointer" ng-click="openWorkflowDialog()"></i>
    </h1>
  </div>
  <div class="title">
    <h3>
      <translate>First state</translate>:
      {{ workflow.getFirstState().name | translate }}
    </h3>
  </div>
</div>

<div class="details">
  <div uib-alert ng-show="alert.show" class="alert-danger" ng-click="alert={}" close="alert={}">
    {{ alert.msg }}
  </div>
  <table id="multi-table" class="table table-bordered">
    <thead>
      <tr>
        <th class="info-head small">
          <h4 translate>Permissions</h4>
        <th ng-repeat="state in states" ng-mouseover="thHover=true" ng-mouseleave="thHover=false">
          <span class="optional">
            {{ state.name | translate }}
          </span>
          <span class="optional-show" uib-tooltip="{{ state.name | translate }}">
            {{ state.name | translate | limitTo: 1 }}...
          </span>
          <div os-perms="motions.can_manage" class="hoverActions text-center"
            ng-class="{'hiddenDiv': !thHover}">
            <!--edit name-->
            <a href="" ng-click="openStateDialog(state)">
              <i class="fa fa-pencil fa-lg"></i></a>
                &nbsp;
            <!--delete-->
            <a href="" class="text-danger" ng-if="state.id !== workflow.first_state_id"
              ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
              <b>{{ state.name | translate }}</b>"
              ng-bootbox-confirm-action="delete(state)">
                <i class="fa fa-trash fa-lg"></i>
            </a>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <b translate>Action word</b>
        </td>
        <td ng-repeat="state in states" ng-mouseover="tdHover=true" ng-mouseleave="tdHover=false">
          <div class="popover-wrapper">
            <span editable-text="state.newActionWord"
              onaftersave="setMember(state, 'action_word', state.newActionWord)">
              <div class="no-overflow" ng-if="state.action_word">
                {{ state.action_word | translate }}
              </div>
              <span class="text-muted" ng-if="!state.action_word">
                &mdash;
              </span>
              <i class="fa fa-pencil" ng-if="tdHover"></i>
            </span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <b translate>Recommendation label</b>
        </td>
        <td ng-repeat="state in states" ng-mouseover="tdHover=true" ng-mouseleave="tdHover=false">
          <div class="popover-wrapper">
            <span editable-text="state.newRecommendationLabel"
              onaftersave="setMember(state, 'recommendation_label', state.newRecommendationLabel)">
              <div class="no-overflow" ng-if="state.recommendation_label">
                {{ state.recommendation_label | translate }}
              </div>
              <span class="text-muted" ng-if="!state.recommendation_label">
                &mdash;
              </span>
              <i class="fa fa-pencil" ng-if="tdHover"></i>
            </span>
          </div>
        </td>
      </tr>
      <tr ng-repeat="member in booleanMembers">
        <td>
          <b>{{ member.displayName | translate }}</b>
        </td>
        <td ng-repeat="state in states" class="pointer"
          ng-click="changeBooleanMember(state, member.name)">
          <!-- Simulating a checkbox with FontAwesome icons. -->
          <i class="fa"
            ng-class="xor(state[member.name], member.inverse) ? 'fa-check-square-o' : 'fa-square-o'"></i>
        </td>
      </tr>
      <tr>
        <td>
          <b translate>Label color</b>
        </td>
        <td ng-repeat="state in states" ng-mouseover="tdHover=true" ng-mouseleave="tdHover=false">
          <span uib-dropdown>
            <span id="dropdownCssClass{{ state.id }}" class="pointer" uib-dropdown-toggle>
              <span class="label" ng-class="'label-' + state.css_class">
                {{ cssClasses[state.css_class] | translate }}
              </span>
              <i class="fa fa-cog" ng-if="tdHover"></i>
            </span>
            <ul class="dropdown-menu" aria-labelledby="dropdownCssClass{{ state.id }}">
              <li ng-repeat="(class, name) in cssClasses">
                <a href ng-click="setMember(state, 'css_class', class)">
                  <i class="fa fa-check" ng-if="state.css_class === class"></i>
                  {{ name | translate }}
                </a>
              </li>
            </ul>
          </span>
        </td>
      </tr>
      <tr>
        <td>
          <b translate>Required permission to see</b>
        </td>
        <td ng-repeat="state in states" ng-mouseover="tdHover=true" ng-mouseleave="tdHover=false">
          <span uib-dropdown>
            <span id="dropdownPermission{{ state.id }}" class="pointer" uib-dropdown-toggle>
              <div class="no-overflow">
                <span ng-if="state.required_permission_to_see">
                  {{ getPermissionDisplayName(state.required_permission_to_see) | translate }}
                </span>
                <span class="text-muted" ng-if="!state.required_permission_to_see">
                  &mdash;
                </span>
                <i class="fa fa-cog" ng-if="tdHover"></i>
              </div>
            </span>
            <ul class="dropdown-menu" aria-labelledby="dropdownPermission{{ state.id }}">
              <li ng-repeat="permission in permissions">
                <a href ng-click="clickPermission(state, permission)">
                  <i class="fa fa-check" ng-if="state.required_permission_to_see === permission.value"></i>
                  {{ permission.display_name | translate }}
                </a>
              </li>
            </ul>
          </span>
        </td>
      </tr>
      <tr>
        <td>
          <b translate>Next states</b>
        </td>
        <td ng-repeat="state in states" ng-mouseover="tdHover=true" ng-mouseleave="tdHover=false">
          <span ng-if="state.getNextStates().length === 0" class="text-muted">
            &mdash;
          </span>
          <div class="no-overflow">
            <span ng-repeat="nextState in state.getNextStates()">
              {{ nextState.name | translate }}<span ng-if="!$last">,</br></span>
            </span>
          </div>
          <span uib-dropdown>
            <span id="dropdownNextStates{{ state.id }}" class="pointer"
              uib-dropdown-toggle>
              <i class="fa fa-cog" ng-if="tdHover"></i>
            </span>
            <ul class="dropdown-menu" aria-labelledby="dropdownNextStates{{ state.id }}">
              <li ng-repeat="s in states">
                <a href ng-click="clickNextStateEntry(state, s.id)">
                  <i class="fa fa-check" ng-if="state.next_states_id.indexOf(s.id) > -1"></i>
                  {{ s.name | translate }}
                </a>
              </li>
            </ul>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>