accountant-ui/accountant-ui/views/operations.html

<!--
    This file is part of Accountant.

    Accountant is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Accountant is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
-->
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<div>
  <!-- Chart row -->
  <div class="row">
    <!-- Sold evolution chart placeholder -->
    <div class="col-md-8" ng-controller="SoldChartController">
      <highchart id="sold-chart" config="config"></highchart>
    </div>

    <!-- Category piechart -->
    <div class="col-md-4" ng-controller="CategoryChartController">
      <highchart id="categories-chart" config="config"></highchart>
    </div>
  </div>

  <div class="row">
    <table class="table table-striped table-condensed table-hover">
      <thead>
        <tr>
          <th class="col-md-1">Date d'op.</th>
          <th>Libell&eacute; de l'op&eacute;ration</th>
          <th class="col-md-1">Montant</th>
          <th class="col-md-1">Solde</th>
          <th class="col-md-2">Cat&eacute;gorie</th>
          <th class="col-md-2">Actions</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td colspan="6">
            <button class="btn btn-success" ng-click="add()">
              Ajouter
            </button>
          </td>
        </tr>

        <tr id="{{ operation.id }}" class="form-inline"
          ng-class="{stroke: operation.canceled, italic: !operation.confirmed, warning: operation.sold < 0, danger: operation.sold < account.authorized_overdraft}"
          ng-repeat="operation in operations | orderBy:['-operation_date', '-value', 'label']">
          <td>
            <span editable-text="operation.operation_date"
              e-data-date-format="yyyy-MM-dd" e-bs-datepicker
              e-timezone="UTC"
              e-class="input-sm" e-style="width: 100%"
              e-name="operation_date" e-form="rowform" e-required>
              {{ operation.operation_date | date:"yyyy-MM-dd" }}
            </span>
          </td>

          <td>
            <span editable-text="operation.label"
              e-placeholder="Libellé de l'opération"
              e-class="input-sm" e-style="width: 100%"
              e-name="label" e-form="rowform" e-required>
              {{ operation.label }}
            </span>
          </td>

          <td>
            <span editable-number="operation.value"
              e-class="input-sm" e-style="width: 100%"
              e-name="value" e-form="rowform" e-required>
              {{ operation.value | currency:"€" }}
            </span>
          </td>

          <td ng-class="{'text-warning': operation.sold < 0, 'text-danger': operation.sold < account.authorized_overdraft}">
            {{ operation.sold | currency:"€" }}
          </td>

          <td>
            <span editable-text="operation.category"
              e-placeholder="Catégorie"
              e-class="input-sm" e-style="width: 100%"
              e-name="category" e-form="rowform" e-required>
              {{ operation.category }}
            </span>
          </td>

          <td>
            <form editable-form name="rowform"
              onbeforesave="save($data, $index)"
              shown="!operation.id">
              <div class="btn-group btn-group-xs">
                <!-- Save current operation, for editing and non-confirmed non-canceled operation. -->
                <button type="submit" class="btn btn-success"
                  ng-if="!operation.canceled && (!operation.confirmed || rowform.$visible)"
                  title="Save">
                  <span class="fa fa-floppy-o"></span>
                </button>

                <!-- Edit operation, for non-canceled and non-editing operation -->
                <button type="button" class="btn btn-default"
                  ng-if="!operation.canceled && !rowform.$visible"
                  ng-click="rowform.$show()" title="edit">
                  <span class="fa fa-pencil-square-o"></span>
                </button>

                <!-- Cancel edition, for editing operation. -->
                <button type="button" class="btn btn-default"
                  ng-if="rowform.$visible"
                  ng-click="cancelEdit(operation, rowform)">
                  <span class="fa fa-times"></span>
                </button>

                <!-- Toggle pointed operation, for non-canceled operations. -->
                <button type="button" class="btn btn-default"
                  ng-if="!operation.canceled"
                  ng-click="togglePointed(operation, rowform)"
                  ng-class="{active: operation.pointed}" title="point">
                  <span ng-class="{'fa fa-check-square-o': operation.pointed, 'fa fa-square-o': !operation.pointed}"></span>
                </button>

                <!-- Toggle canceled operation, for non-editing operations. -->
                <button type="button" class="btn btn-default"
                  ng-click="toggleCanceled(operation)"
                  ng-if="operation.scheduled_operation_id && !rowform.$visible"
                  ng-class="{active: operation.canceled}" title="cancel">
                  <span class="fa fa-remove"></span>
                </button>

                <!-- Delete operation, with confirm. -->
                <button type="button" class="btn btn-default"
                  ng-if="operation.id && !operation.scheduled_operation_id"
                  ng-click="delete(operation, $index)">
                  <span class="fa fa-trash-o"></span>
                </button>
              </div>
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>