<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SIB invoicing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Style -->
<link rel="stylesheet" href="css/main.css">
<!-- Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.7/webcomponents-loader.js"></script>
<!-- Web components-->
<script type="module" src="https://unpkg.com/@startinblox/core@0.5.35"></script>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
</head>
<body>
<main>
<!-- templates ==================================== -->
<sib-widget name="widget-money">
<template>
<div>${value} €</div>
</template>
</sib-widget>
<sib-widget name="widget-tva-rate">
<template>
<div>TVA ${value} %</div>
</template>
</sib-widget>
<sib-widget name="widget-invoice-title">
<template>
<div>Facture N°${value}</div>
</template>
</sib-widget>
<sib-widget name="widget-date">
<template>
<div>Date : ${value}</div>
</template>
</sib-widget>
<sib-widget name="widget-batches">
<template>
<div class="invoice-action-menu">
<sib-link data-src="${value['@id']}" next="edit-invoice">Editer</sib-link>
<sib-link data-src="${value['@id']}" next="show-invoice">Aperçu client</sib-link>
<sib-link data-src="${value['@id']}" next="download-invoice">Télécharger</sib-link>
<sib-link data-src="${value['@id']}" next="duplicate-invoice">Dupliquer</sib-link>
</div>
<sib-display
class="batches-list"
data-src="${value['@id']}"
data-fields="batch-section-header, batch-section-body, batch-section-footer"
template-tasks="task-list-template"
value-amount="Montants"
value-ht-total="Total HT"
set-batch-section-header="title, amount"
set-batch-section-body="tasks"
set-batch-section-footer="ht-total, htAmount"
></sib-display>
</template>
</sib-widget>
<sib-widget name="widget-form-batches">
<template>
<sib-form
data-holder
naked
data-fields="title, tasks"
widget-tasks="widget-form-tasks"
multiple-tasks>
</sib-form>
</template>
</sib-widget>
<sib-widget name="widget-form-tasks">
<template>
<sib-form
data-holder
naked
data-fields="title, htAmount"
widget-htAmount="sib-form-number">
</sib-form>
</template>
</sib-widget>
<sib-widget name="widget-task-list">
<template>
<sib-display
class="tasks-list"
data-src="${value['@id']}"
data-fields="title, htAmount"
></sib-display>
</template>
</sib-widget>
<!-- templates end ==================================== -->
<section id="clients-invoices" class="invoices_list invoices_list--clients">
<header>
<h2>Factures pour le client</h2>
<sib-router default-route="invoice-list" use-hash>
<sib-route name="invoice-list"></sib-route>
<sib-route name="add-invoice">Créer une nouvelle facture</sib-route>
<sib-route name="show-invoice" id-prefix="http://127.0.0.1:8000/customer-invoices/"></sib-route>
<sib-route name="edit-invoice" id-prefix="http://127.0.0.1:8000/customer-invoices/"></sib-route>
</sib-router>
</header>
<sib-form id="add-invoice"
data-src="http://127.0.0.1:8000/customer-invoices/"
data-fields="title, identifier, tvaRate, batches"
widget-batches="widget-form-batches"
widget-tvaRate="sib-form-number"
multiple-batches
next="invoice-list"
></sib-form>
<sib-form
id="edit-invoice"
data-fields="title, identifier, tvaRate"
widget-tvaRate="sib-form-number"
next="invoice-list"
bind-resources
></sib-form>
<sib-display
id="invoice-list"
data-src="http://127.0.0.1:8000/customer-invoices/"
data-fields="invoice-section, batches, invoice-totals"
set-invoice-section="invoice-main, invoice-aside"
set-invoice-main="invoice-header, invoice-footer"
set-invoice-aside="state"
set-invoice-header="title, identifier"
set-invoice-footer="invoicingDate, htAmount"
set-invoice-totals="totals-header, ht-total, tva-total, ttc-total"
value-totals-header="TOTAL DE LA FACTURE"
set-ht-total="ht-label, htAmount"
value-ht-label="Total HT"
set-tva-total="tvaRate, tvaAmount"
set-ttc-total="ttc-label, ttcAmount"
value-ttc-label="Total TTC"
widget-batches="widget-batches"
widget-htAmount="widget-money"
widget-tvaAmount="widget-money"
widget-ttcAmount="widget-money"
widget-tvaRate="widget-tva-rate"
></sib-display>
<sib-display
id="show-invoice"
data-fields="invoice-header, batches, invoice-totals, invoice-footer"
set-invoice-header="invoice-header-left, invoice-header-right"
set-invoice-header-left="title, invoicingDate"
set-invoice-header-right="customer-info"
value-customer-info="Coordonnées Client TODO"
set-invoice-totals="ht-total, tva-total, ttc-total"
set-ht-total="ht-label, htAmount"
value-ht-label="Total HT"
set-tva-total="tvaRate, tvaAmount"
set-ttc-total="ttc-label, ttcAmount"
value-ttc-label="Total TTC"
set-invoice-footer="hd-address, hd-legal"
value-hd-address="Happy Dev adresse / TODO"
value-hd-legal="SIRET + TVA HD / TODO"
widget-title="widget-invoice-title"
widget-invoicingDate="widget-date"
widget-batches="widget-batches"
widget-htAmount="widget-money"
widget-tvaAmount="widget-money"
widget-ttcAmount="widget-money"
widget-tvaRate="widget-tva-rate"
bind-resources
></sib-display>
</section>
<section id="freelances-invoices" class="invoices_list invoices_list--freelances">
<header>
<h2>Factures des indépendants</h2>
<sib-router default-route="freelance-invoice-list" use-hash>
<sib-route name="freelance-invoice-list"></sib-route>
<sib-route name="add-freelance-invoice">Importer une facture</sib-route>
</sib-router>
</header>
<sib-form
id="add-freelance-invoice"
data-src="http://127.0.0.1:8000/freelance-invoices/"
data-fields="freelanceFullname, identifier, invoicingDate, htAmount, tvaRate, uploadUrl"
widget-invoicingDate="sib-form-date"
widget-htAmount="sib-form-number"
widget-tvaRate="sib-form-number"
next="freelance-invoice-list"
></sib-form>
<sib-display
id="freelance-invoice-list"
data-src="http://127.0.0.1:8000/freelance-invoices/"
data-fields="freelance-invoice-body, freelance-invoice-aside"
set-freelance-invoice-body="freelance-invoice-header, freelance-invoice-footer"
set-freelance-invoice-aside="state"
set-freelance-invoice-header="freelanceFullname, identifier"
set-freelance-invoice-footer="invoicingDate, htAmount"
widget-htAmount="widget-money"
></sib-display>
</section>
</main>
</body>
</html>