accountant/accountant/frontend/static/templates/entries.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 -->
    <highchart id="sold-chart" config="soldChartConfig" class="col-md-8"></highchart>

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

  <div class="row">
    <div class="col-md-3 col-md-offset-1">
      <button class="btn btn-success" ng-click="addEntry()">Ajouter</button>
    </div>
  </div>

  <!-- Row with entry table -->
  <div class="row">
    <table class="table table-striped table-condensed table-hover">
      <!-- Head of the table containing column headers and size -->
      <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-1">Actions</th>
        </tr>
      </thead>

      <!-- Body of the table containing the entries -->
      <tbody>
        <!-- Row for an editing entry. -->
        <tr id="{{ entry.id }}" class="form-inline"
          ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
          ng-repeat="entry in entries">
          <td>
            <span editable-text="entry.operation_date"
              e-data-date-format="yyyy-MM-dd" e-bs-datepicker
              e-class="input-sm" e-style="width: 100%"
              e-name="operation_date" e-form="rowform" e-required>
              <small>{{ entry.operation_date | date:"yyyy-MM-dd" }}</small>
            </span>
          </td>

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

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

          <td ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}">
            <small>{{ entry.sold }}</small>
          </td>

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

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

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

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

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

                <!-- Toggle canceled entry, for non-editing entries. -->
                <button type="button" class="btn btn-xs btn-default"
                  ng-click="toggleCanceledEntry(entry)"
                  ng-if="!rowform.$visible"
                  ng-class="{active: entry.canceled}" title="cancel">
                  <span class="fa fa-remove"></span>
                </button>
              </div>
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>