fab-manager/app/assets/templates/admin/invoices/index.html.erb

<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l">
      <section class="heading-title">
        <h1 translate>{{ 'invoices' }}</h1>
      </section>
    </div>

  </div>
</section>

<section class="m-lg">
  <div class="row">
    <div class="col-md-12">
      <uib-tabset justified="true">
        <uib-tab heading="{{ 'invoices_list' | translate }}">
          <h3 class="m-t-xs"><i class="fa fa-filter"></i> {{ 'filter_invoices' | translate }}</h3>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon" translate>{{ 'invoice_#_' }}</span>
                  <input type="text" ng-model="searchInvoice.reference" class="form-control" placeholder="" ng-change="handleFilterChange()">
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon" translate>{{ 'customer_' }}</span>
                  <input type="text" ng-model="searchInvoice.name" class="form-control" placeholder="" ng-change="handleFilterChange()">
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon">{{ "date_" | translate }}</span>
                  <input type="date" ng-model="searchInvoice.date" class="form-control" ng-change="handleFilterChange()">
                </div>
              </div>
            </div>

          </div>

          <div class="row">
    		    <div class="col-md-12">

    		      <table class="table" ng-if="invoices.length > 0">
    		        <thead>
    		        <tr>
    		          <th style="width:15%"><a href="" ng-click="setOrderInvoice('reference')">{{ 'invoice_#' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-numeric-asc': orderInvoice=='reference', 'fa fa-sort-numeric-desc': orderInvoice=='-reference', 'fa fa-arrows-v': orderInvoice }"></i></a></th>

    		          <th style="width:20%"><a href="" ng-click="setOrderInvoice('date')">{{ 'date' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-numeric-asc': orderInvoice=='date', 'fa fa-sort-numeric-desc': orderInvoice=='-date', 'fa fa-arrows-v': orderInvoice }"></i></a></th>

    		          <th style="width:10%"><a href="" ng-click="setOrderInvoice('total')"> {{ 'price' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-numeric-asc': orderInvoice=='total', 'fa fa-sort-numeric-desc': orderInvoice=='-total', 'fa fa-arrows-v': orderInvoice }"></i></a></th>

    		          <th style="width:20%"><a href="" ng-click="setOrderInvoice('name')">{{ 'customer' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-alpha-asc': orderInvoice=='name', 'fa fa-sort-alpha-desc': orderInvoice=='-name', 'fa fa-arrows-v': orderInvoice }"></i></a></th>

    		          <th style="width:30%"></th>
    		        </tr>
    		        </thead>
    		        <tbody>
    		        <tr ng-repeat="invoice in invoices">
    		          <td>{{ invoice.reference }}</td>
    		          <td ng-if="!invoice.is_avoir">{{ invoice.date | amDateFormat:'L LTS' }}</td>
    		          <td ng-if="invoice.is_avoir">{{ invoice.date | amDateFormat:'L' }}</td>
    		          <td>{{ invoice.total | currency}}</td>
    		          <td><a href="" ui-sref="app.admin.members_edit({id: invoice.user_id})">{{ invoice.name }} </a>
    		          <td>
    		            <div class="buttons">
    		              <a class="btn btn-default" ng-href="api/invoices/{{invoice.id}}/download" target="_blank" ng-if="!invoice.is_avoir">
    		                <i class="fa fa-file-pdf-o"></i> {{ 'download_the_invoice' | translate }}
    		              </a>
    		              <a class="btn btn-default" ng-href="api/invoices/{{invoice.id}}/download" target="_blank" ng-if="invoice.is_avoir">
    		                <i class="fa fa-file-pdf-o"></i> {{ 'download_the_credit_note' | translate }}
    		              </a>
    		              <a class="btn btn-default" ng-click="generateAvoirForInvoice(invoice)" ng-if="(!invoice.has_avoir || invoice.has_avoir == 'partial') && !invoice.is_avoir && !invoice.prevent_refund">
    		                <i class="fa fa-reply"></i> {{ 'credit_note' | translate }}
    		              </a>
    		            </div>
    		          </td>
    		        </tr>
    		        </tbody>
    		      </table>
              <div class="text-center">
                <button class="btn btn-warning" ng-click="showNextInvoices()" ng-hide="noMoreResults"><i class="fa fa-search-plus" aria-hidden="true"></i> {{ 'display_more_invoices' | translate }}</button>
              </div>
    		      <p ng-if="invoices.length == 0" translate>{{ 'no_invoices_for_now' }}</p>

    		    </div>
          </div>
	    </uib-tab>




	    <uib-tab heading="{{ 'invoicing_settings' | translate }}">
			<form class="invoice-placeholder">
				<div class="invoice-logo" style="background-image: url({{invoice.logo}});">
				    <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon" bs-holder ng-if="!invoice.logo" class="img-responsive">
            <img base-sixty-four-image="invoice.logo" ng-if="invoice.logo && invoice.logo.base64">
				    <div class="tools-box">
				        <div class="btn-group">
				            <div class="btn btn-default btn-file">
				                <i class="fa fa-edit"></i> {{ 'change_logo' | translate }}
				                <input type="file" accept="image/png,image/jpeg,image/x-png,image/pjpeg" name="invoice[logo][attachment]" ng-model="invoice.logo" base-sixty-four-input>
				            </div>
				        </div>
				    </div>
				</div>
        <div class="invoice-buyer-infos">
            <strong translate>{{ 'john_smith' }}</strong>
            <div translate>{{ 'john_smith@example_com' }}</div>
        </div>
				<div class="invoice-reference invoice-editable" ng-click="openEditReference()">{{ 'invoice_reference_' | translate }} {{mkReference()}}</div>
			  <div class="invoice-code invoice-editable" ng-show="invoice.code.active" ng-click="openEditCode()">{{ 'code_' | translate }} {{invoice.code.model}}</div>
        <div class="invoice-code invoice-activable" ng-show="!invoice.code.active" ng-click="openEditCode()" translate>{{ 'code_disabled' }}</div>
				<div class="invoice-order invoice-editable" ng-click="openEditInvoiceNb()"> {{ 'order_#' | translate }} {{mkNumber()}}</div>
				<div class="invoice-date">{{ 'invoice_issued_on_DATE_at_TIME' | translate:{DATE:(today | amDateFormat:'L'), TIME:(today | amDateFormat:'LT')} }}</div>
				<div class="invoice-object">
					{{ 'object_reservation_of_john_smith_on_DATE_at_TIME' | translate:{DATE:(inOneWeek | amDateFormat:'L'), TIME:(inOneWeek | amDateFormat:'LT')} }}
				</div>
				<div class="invoice-data">
					{{ 'order_summary' | translate }}
					<table>
						<thead>
							<tr>
								<th translate>{{ 'details' }}</th>
								<th class="right" translate>{{ 'amount' }}</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>{{ 'machine_booking-3D_printer' | translate }} {{inOneWeek | amDateFormat:'LLL'}} - {{inOneWeekAndOneHour | amDateFormat:'LT'}}</td>
								<td class="right">{{30.0 | currency}}</td>
							</tr>

              <tr class="invoice-total" ng-class="{'bold vat-line':invoice.VAT.active}">
								<td ng-show="!invoice.VAT.active" translate>{{ 'total_amount' }}</td>
                <td ng-show="invoice.VAT.active" translate>{{ 'total_including_all_taxes' }}</td>
								<td class="right">{{30.0 | currency}}</td>
							</tr>

              <tr class="invoice-vat invoice-activable" ng-click="openEditVAT()" ng-show="!invoice.VAT.active">
                  <td translate>{{ 'VAT_disabled' }}</td>
                  <td></td>
              </tr>

              <tr class="invoice-vat invoice-editable vat-line italic" ng-click="openEditVAT()" ng-show="invoice.VAT.active">
                  <td>{{ 'including_VAT' | translate }} {{invoice.VAT.rate}} %</td>
                  <td>{{30-(30/(invoice.VAT.rate/100+1)) | currency}}</td>
              </tr>
              <tr class="invoice-ht vat-line italic" ng-show="invoice.VAT.active">
                  <td translate>{{ 'including_total_excluding_taxes' }}</td>
                  <td>{{30/(invoice.VAT.rate/100+1) | currency}}</td>
              </tr>
              <tr class="invoice-payed vat-line bold" ng-show="invoice.VAT.active">
                  <td translate>{{ 'including_amount_payed_on_ordering' }}</td>
                  <td>{{30.0 | currency}}</td>
              </tr>

						</tbody>
					</table>
					<p class="invoice-payment" translate translate-values="{DATE:(today | amDateFormat:'L'), TIME:(today | amDateFormat:'LT'), AMOUNT:(30.0 | currency)}">
						{{ 'settlement_by_debit_card_on_DATE_at_TIME_for_an_amount_of_AMOUNT' }}
					</p>
				</div>
				<div medium-editor class="invoice-text invoice-editable" ng-model="invoice.text.content"
             options='{
                  "placeholder": "{{ "important_notes" | translate }}",
                  "buttons": ["underline"]
             }'
             ng-blur="textEditEnd($event)">
				</div>
				<div medium-editor class="invoice-legals invoice-editable" ng-model="invoice.legals.content"
             options='{
                  "placeholder": "{{ "address_and_legal_information" | translate }}",
                  "buttons": ["bold", "underline"]
             }'
             ng-blur="legalsEditEnd($event)">
				</div>
			</form>
	    </uib-tab>
	  </uib-tabset>
	</div>
  </div>
</section>


<script type="text/ng-template" id="editReference.html">
    <div class="custom-invoice">
      <div class="modal-header">
          <h3 class="modal-title" translate>{{ 'invoice_reference' }}</h3>
      </div>
      <div class="modal-body row">
          <div class="elements col-md-4">
              <h4>Éléments</h4>
              <ul>
                  <li ng-click="invoice.reference.help = 'addYear.html'">{{ 'year' | translate }}</li>
                  <li ng-click="invoice.reference.help = 'addMonth.html'">{{ 'month' | translate }}</li>
                  <li ng-click="invoice.reference.help = 'addDay.html'">{{ 'day' | translate }}</li>
                  <li ng-click="invoice.reference.help = 'addInvoiceNumber.html'">{{ '#_of_invoice' | translate }}</li>
                  <li ng-click="invoice.reference.help = 'addOnlineInfo.html'">{{ 'online_sales' | translate }}</li>
                  <%# <li ng-click="invoice.reference.help = 'addWalletInfo.html'">{{ 'wallet' | translate }}</li> %>
                  <li ng-click="invoice.reference.help = 'addRefundInfo.html'">{{ 'refund' | translate }}</li>
              </ul>
          </div>
          <div class="col-md-8">
            <div class="model">
                <h4 translate>{{ 'model' }}</h4>
                <input type="text" class="form-control" ng-model="model">
            </div>
            <div class="help">
                <h4 translate>{{ 'documentation' }}</h4>
                <ng-include src="invoice.reference.help" autoscroll="true">
                </ng-include>
            </div>
          </div>
      </div>
      <div class="modal-footer">
          <button class="btn btn-warning" ng-click="ok()" translate>{{ 'confirm' }}</button>
          <button class="btn btn-default" ng-click="cancel()" translate>{{ 'cancel' }}</button>
      </div>
    </div>
</script>

<script type="text/ng-template" id="addYear.html">
    <table class="invoice-element-legend">
        <tr><td><strong>YY</strong></td><td translate>{{ '2_digits_year_(eg_70)' }}</td></tr>
        <tr><td><strong>YYYY</strong></td><td translate>{{ '4_digits_year_(eg_1970)' }}</td></tr>
    </table>
</script>

<script type="text/ng-template" id="addMonth.html">
    <table class="invoice-element-legend">
        <tr><td><strong>M</strong></td><td translate>{{ 'month_number_(eg_1)' }}</td></tr>
        <tr><td><strong>MM</strong></td><td translate>{{ '2_digits_month_number_(eg_01)' }}</td></tr>
        <tr><td><strong>MMM</strong></td><td translate>{{ '3_characters_month_name_(eg_JAN)' }}</td></tr>
    </table>
</script>

<script type="text/ng-template" id="addDay.html">
    <table class="invoice-element-legend">
        <tr><td><strong>D</strong></td><td translate>{{ 'day_in_the_month_(eg_1)' }}</td></tr>
        <tr><td><strong>DD</strong></td><td translate>{{ '2_digits_day_in_the_month_(eg_01)' }}</td></tr>
    </table>
</script>

<script type="text/ng-template" id="addInvoiceNumber.html">
    <table class="invoice-element-legend">
        <tr><td><strong>dd...dd</strong></td><td translate>{{ '(n)_digits_daily_count_of_invoices_(eg_ddd_002_2nd_invoice_of_the_day)' }}</td></tr>
        <tr><td><strong>mm...mm</strong></td><td translate>{{ '(n)_digits_monthly_count_of_invoices_(eg_mmmm_0012_12th_invoice_of_this_month)' }}</td></tr>
        <tr><td><strong>yy...yy</strong></td><td translate>{{ '(n)_digits_annual_amount_of_invoices_(eg_yyyyyy_000008_8th_invoice_of_this_year)' }}</td></tr>
    </table>
    <span class="bottom-notes" translate>{{ 'beware_if_the_number_exceed_the_specified_length_it_will_be_truncated_by_the_left' }}</span>
</script>

<script type="text/ng-template" id="addOrderNumber.html">
    <table class="invoice-element-legend">
        <tr><td><strong>nn...nn</strong></td><td translate>{{ '(n)_digits_count_of_orders_(eg_nnnn_0327_327th_order)' }}</td></tr>
        <tr><td><strong>dd...dd</strong></td><td translate>{{ '(n)_digits_daily_count_of_orders_(eg_ddd_002_2nd_order_of_the_day)' }}</td></tr>
        <tr><td><strong>mm...mm</strong></td><td translate>{{ '(n)_digits_monthly_count_of_orders_(eg_mmmm_0012_12th_order_of_this_month)' }}</td></tr>
        <tr><td><strong>yy...yy</strong></td><td translate>{{ '(n)_digits_annual_amount_of_orders_(eg_yyyyyy_000008_8th_order_of_this_year)' }}</td></tr>
    </table>
    <span class="bottom-notes" translate>{{ 'beware_if_the_number_exceed_the_specified_length_it_will_be_truncated_by_the_left' }}</span>
</script>

<script type="text/ng-template" id="addOnlineInfo.html">
    <table class="invoice-element-legend">
        <tr><td><strong>X[texte]</strong></td><td>{{ 'add_a_notice_regarding_the_online_sales_only_if_the_invoice_is_concerned' | translate }} <mark translate>{{ 'this_will_never_be_added_when_a_refund_notice_is_present' }}</mark> {{ '(eg_X[/VL]_will_add_/VL_to_the_invoices_settled_with_stripe)' | translate }}</td></tr>
    </table>
</script>

<script type="text/ng-template" id="addWalletInfo.html">
    <table class="invoice-element-legend">
        <tr><td><strong>W[texte]</strong></td><td>{{ 'add_a_notice_regarding_the_wallet_only_if_the_invoice_is_concerned' | translate }} <mark translate>{{ 'this_will_never_be_added_when_a_refund_notice_is_present' }}</mark> {{ '(eg_W[/PM]_will_add_/PM_to_the_invoices_settled_with_wallet)' | translate }}</td></tr>
    </table>
</script>

<script type="text/ng-template" id="addRefundInfo.html">
    <table class="invoice-element-legend">
        <tr><td><strong>R[texte]</strong></td><td>{{ 'add_a_notice_regarding_refunds_only_if_the_invoice_is_concerned' | translate }}<mark translate>{{ 'this_will_never_be_added_when_an_online_sales_notice_is_present' }}</mark> {{ '(eg_R[/A]_will_add_/A_to_the_refund_invoices)' | translate }}</td></tr>
    </table>
</script>

<script type="text/ng-template" id="editCode.html">
    <div class="custom-invoice">
      <div class="modal-header">
          <h3 class="modal-title" translate>{{ 'code' }}</h3>
      </div>
      <div class="modal-body">
            <div class="form-group">
                  <label for="enableCode" class="control-label" translate>{{ 'enable_the_code' }}</label>
                  <input bs-switch
                         ng-model="isSelected"
                         id="enableCode"
                         type="checkbox"
                         class="form-control m-l-sm"
                         switch-on-text="{{ 'enabled' | translate }}"
                         switch-off-text="{{ 'disabled' | translate }}"
                         switch-animate="true"/>
            </div>

            <div class="form-group" ng-show="isSelected">
                <label for="codeModel" class="control-label" translate>{{ 'code' }}</label>
                <input id="codeModel" type="text" ng-model="codeModel" class="form-control"/>
            </div>
      </div>
      <div class="modal-footer">
          <button class="btn btn-warning" ng-click="ok()" translate>{{ 'confirm' }}</button>
          <button class="btn btn-default" ng-click="cancel()" translate>{{ 'cancel' }}</button>
      </div>
    </div>
</script>



<script type="text/ng-template" id="editNumber.html">
    <div class="custom-invoice">
        <div class="modal-header">
            <h3 class="modal-title" translate>{{ 'order_number' }}</h3>
        </div>
        <div class="modal-body row">
            <div class="elements col-md-4">
                <h4 translate>{{ 'elements' }}</h4>
                <ul>
                    <li ng-click="invoice.number.help = 'addYear.html'">{{ 'year' | translate }}</li>
                    <li ng-click="invoice.number.help = 'addMonth.html'">{{ 'month' | translate }}</li>
                    <li ng-click="invoice.number.help = 'addDay.html'">{{ 'day' | translate }}</li>
                    <li ng-click="invoice.number.help = 'addOrderNumber.html'">{{ 'order_#' | translate }}</li>
                </ul>
            </div>
            <div class="col-md-8">
                <div class="model">
                    <h4 translate>{{ 'model' }}</h4>
                    <input type="text" class="form-control" ng-model="model">
                </div>
                <div class="help">
                    <h4 translate>{{ 'documentation' }}</h4>
                    <ng-include src="invoice.number.help" autoscroll="true">
                    </ng-include>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="ok()" translate>{{ 'confirm' }}</button>
            <button class="btn btn-default" ng-click="cancel()" translate>{{ 'cancel' }}</button>
        </div>
    </div>
</script>


<script type="text/ng-template" id="editVAT.html">
    <div class="custom-invoice">
        <div class="modal-header">
            <h3 class="modal-title" translate>{{ 'VAT' }}</h3>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="enableVAT" class="control-label" translate>{{ 'enable_VAT' }}</label>
                <input bs-switch
                       ng-model="isSelected"
                       id="enableVAT"
                       type="checkbox"
                       class="form-control m-l-sm"
                       switch-on-text="{{ 'enabled' | translate }}"
                       switch-off-text="{{ 'disabled' | translate }}"
                       switch-animate="true"/>
            </div>

            <div class="form-group" ng-show="isSelected">
                <label for="vatRate" class="control-label" translate>{{ 'VAT_rate' }}</label>
                <div class="input-group">
                    <span class="input-group-addon">% </span>
                    <input id="vatRate" type="number" ng-model="rate" class="form-control" min="0" max="100"/>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="ok()" translate>{{ 'confirm' }}</button>
            <button class="btn btn-default" ng-click="cancel()" translate>{{ 'cancel' }}</button>
        </div>
    </div>
</script>