solid-invoicing.js

import { SolidTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@beta';

const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
//const base_url = "https://unpkg.com/@startinblox/component-invoicing@1.0";
Helpers.importCSS(`${base_url}/css/main.css`);

export class SolidInvoicing extends SolidTemplateElement {
  constructor() {
    super()
  }

  static get propsDefinition() {
    return {
      dataSrc: 'data-src',
      idSuffix: 'id-suffix',
      routerPrefix: 'router-prefix'
    }
  }

  connectedCallback() {
    this.addEventListener('click', (e) => {
      // display invoice details
      if(e.target && e.target.closest('[name="invoice-title"]')){
        let invoice = e.target.closest('[name="invoice-title"]');
        invoice.closest('solid-display').classList.toggle('invoice-visible')
      }

      // close dialog
      if(e.target && e.target.closest('.close-button')){
        let routeName = e.target.closest('#clients-invoices') ? 'invoice-list' : 'freelance-invoice-list'
        window.dispatchEvent(
          new CustomEvent('requestNavigation', { detail: { route: routeName } }),
        );
      }
    })
  }

  template({dataSrc, idSuffix, routerPrefix}) {
    let sourceUrl = dataSrc + (idSuffix ? idSuffix + '/' : '')
    let prefix = routerPrefix ? `route-prefix="${routerPrefix}"`: ''

    return `
    <div id="solid-invoicing" class="solid-invoicing">
    <!-- widgets ==================================== -->
    <solid-widget name="widget-money">
      <template>
        <div>\${value?value:0} €</div>
      </template>
    </solid-widget>

    <solid-widget name="widget-tva-rate">
      <template>
        <div>TVA \${value} %</div>
      </template>
    </solid-widget>

    <solid-widget name="widget-invoice-number">
      <template>
        <div>N°\${value}</div>
      </template>
    </solid-widget>

    <solid-widget name="widget-batches">
      <template>
        <solid-display
          class="batches-list"
          data-src="\${id}"
          fields="batch-header(title, amount), 
          batch-body(tasks), 
          batch-footer(ht-total(ht-label, htAmount))"
          value-amount="Montants"
          value-ht-label="Total HT"
          widget-tasks="widget-tasks"
          widget-htAmount="widget-money"
        ></solid-display>
      </template>
    </solid-widget>

    <solid-widget name="widget-tasks">
      <template>
        <solid-display
          class="tasks-list"
          data-src="\${id}"
          fields="price-line(title, htAmount)"
          widget-htAmount="widget-money"
        ></solid-display>
      </template>
    </solid-widget>

    <solid-widget name="widget-form-batches">
      <template>
        <solid-form
          data-holder
          naked
          fields="batch-header(title), batch-body(tasks)"
          widget-tasks="widget-form-tasks"
          widget-title="solid-form-placeholder-text"
          label-title="Nom du lot"
          label-tasks=""
          multiple-tasks>
        </solid-form>
      </template>
    </solid-widget>

    <solid-widget name="widget-form-tasks">
      <template>
        <solid-form
          class="tasks-list"
          data-holder
          naked
          fields="price-line(title, htAmount)"
          widget-htAmount="solid-form-placeholder-text"
          widget-title="solid-form-placeholder-text"
          label-title="Tâche"
          label-htAmount="Montant"
        >
        </solid-form>
      </template>
    </solid-widget>


    <solid-widget name="widget-render-title">
      <template>
        <div><strong>Facture N°\${value}</strong></div>
      </template>
    </solid-widget>

    <solid-widget name="widget-render-metadata">
      <template>
        <div>
          <div class="invoice-render__fees">
            <p>Règlement à réception de la facture</p>
            <p>Intérêts de retard : 6% / an</p>
            <p>Une indemnité forfaitaire de 40€ sera exigée en sus de la pénalité de retard dès le premier jour de retard.</p>
          </div>
          <div class="invoice-render__rib">
            <div><strong>Règlement par virement :</strong></div>
            <table>
              <tr>
                <td>BIC</td>
                <td>CMCIFR2A</td>
              </tr>
              <tr>
                <td>IBAN</td>
                <td>FR76 1027 8060 8200 0205 5370 166</td>
              </tr>
            </table>
          </div>
        </div>
      </template>
    </solid-widget>

    <solid-widget name="widget-embed-drive">
      <template>
        <embed src="\${value}" width="560px" height="800px"/>
      </template>
    </solid-widget>

    <solid-widget name="close-button">
      <template>
        <button class="close-button">
          <img src="${base_url}/images/close-icon.svg" width="14" height="14" />
        </button>
      </template>
    </solid-widget>

    <!-- /widgets ==================================== -->


    <!-- customer ==================================== -->
    <section id="clients-invoices" class="invoices-list invoices-list--clients">
      <header>
        <h2>Factures pour le client</h2>
        <solid-router default-route="invoice-list" ${prefix}>
          <solid-route name="invoice-list"></solid-route>
          <solid-route name="add-invoice" class="button">Créer une nouvelle facture</solid-route>
          <solid-route name="show-invoice" use-id></solid-route>
          <solid-route name="edit-invoice" use-id></solid-route>
          <solid-route name="download-invoice" use-id></solid-route>
        </solid-router>
      </header>

      <dialog data-view="add-invoice" class="invoice-form">
        <close-button></close-button>
        <h3>Créer une nouvelle facture</h3>

        <solid-form
          data-src="${sourceUrl}customer-invoices/"
          fields="first-line(title, identifier), 
          second-line(state, invoicingDate), 
          batches, 
          last-line(tvaRate, additionalText)"
          label-title="Nom de la facture"
          label-identifier="Identifiant"
          label-state="Statut"
          label-invoicingDate="Date"
          label-tvaRate="TVA"
          label-additionalText="Mention Libre"
          label-batches=""
          widget-state="solid-form-dropdown-label"
          widget-batches="widget-form-batches"
          widget-invoicingDate="solid-form-date"
          widget-tvaRate="solid-form-number-label"
          enum-state="En attente = pending, Envoyé = sent, Payé = paid"
          class-state="custom-select"
          multiple-batches
          next="invoice-list"
          ></solid-form>
          </dialog>
          
          <dialog data-view="edit-invoice" class="invoice-form">
          <close-button></close-button>
          <h3>Modifier la facture</h3>
          <solid-form
          bind-resources
          fields="first-line(title, identifier), 
          second-line(state, invoicingDate), 
          batches, 
          last-line(tvaRate, additionalText)"
          label-title="Nom de la facture"
          label-identifier="Identifiant"
          label-state="Statut"
          label-invoicingDate="Date"
          label-tvaRate="TVA"
          label-additionalText="Mention Libre"
          label-batches=""
          widget-state="solid-form-dropdown-label"
          widget-batches="widget-form-batches"
          widget-invoicingDate="solid-form-date"
          widget-tvaRate="solid-form-number-label"
          enum-state="En attente = pending, Envoyé = sent, Payé = paid"
          class-state="custom-select"
          multiple-batches
          next="invoice-list"
        ></solid-form>
      </dialog>

      <solid-display data-view="invoice-list"
        class="invoices-list__item"
        data-src="${sourceUrl}customer-invoices/"
        fields="invoice-title(invoice-main(invoice-header(title, identifier), invoice-footer(invoicingDate, htAmount)), invoice-aside(state)), 
        invoice-hidden(actions(duplicate, edit, show, download), batches, invoice-totals(totals-header, ht-total(ht-label, htAmount), tva-total(tvaRate, tvaAmount), ttc-total(ttc-label, ttcAmount)))"

        value-totals-header="TOTAL DE LA FACTURE"
        value-ht-label="Total HT"
        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"
        widget-identifier="widget-invoice-number"

        label-edit="Éditer"
        label-show="Aperçu client"
        label-download="Télécharger"
        label-duplicate="Dupliquer"
        action-edit="edit-invoice"
        action-show="show-invoice"
        action-download="download-invoice"
        action-duplicate="duplicate-invoice"
      ></solid-display>

      <dialog data-view="download-invoice">
        <close-button></close-button>
        <h3>Téléchargement...</h3>
        <p>Disponible bientôt !</p>
        <!-- <solid-pdf-generator source="#print" buttonText="Télécharger la facture"></solid-pdf-generator> -->
      </dialog>

      <!-- render -->
      <dialog class="invoice-dialog" data-view="show-invoice">
        <close-button></close-button>
        <div id="print">
          <div class="invoice-render">
            <img src="${base_url}/images/happy-dev-logo.png" width="200" />
            <solid-display
              class="display-invoice"
              bind-resources
              fields="invoice-head(invoice-header-left(identifier, invoicingDate), invoice-header-right(customer-infos(customer.name, customer.address))), 
              batches, 
              invoice-payment(metadata, invoice-totals(ht-total(ht-label, htAmount), tva-total(tvaRate, tvaAmount), ttc-total(ttc-label, ttcAmount), tva-notice)), 
              invoice-footer"

              value-ht-label="Total HT"
              value-ttc-label="Total TTC"
              value-tva-notice="TVA récupérable à l'encaissement"

              widget-identifier="widget-render-title"
              label-invoicingDate="Date: "
              widget-invoicingDate="solid-display-value-date-label"
              widget-metadata="widget-render-metadata"
              widget-batches="widget-batches"
              widget-htAmount="widget-money"
              widget-tvaAmount="widget-money"
              widget-ttcAmount="widget-money"
              widget-tvaRate="widget-tva-rate"
            ></solid-display>

            <div class="invoice-render__footer">
              <div class="invoice-render__hd-address">
                <p><strong>Happy Dev</strong></p>
                <p>75 rue du Javelot</p>
                <p>75013 Paris</p>
                <p>contact@happy-dev.fr</p>
              </div>
              <div class="invoice-render__hd-legal">
                <p><strong>SIRET : </strong>81314060500011</p>
                <p><strong>N° de TVA intracommunautaire : </strong>FR 61 813140605</p>
                <p>SAS à capital variable enregistrée au RCS de Paris</p>
              </div>
            </div>
          </div>
        </div>
      </dialog>
      <!-- /render -->

    </section>
    <!-- /customer ==================================== -->

    <!-- freelance ==================================== -->
    <section id="freelances-invoices" class="invoices-list invoices-list--freelances">
      <header>
        <h2>Factures des indépendants</h2>
        <solid-router default-route="freelance-invoice-list" ${prefix}>
          <solid-route name="freelance-invoice-list"></solid-route>
          <solid-route name="edit-freelance-invoice"></solid-route>
          <solid-route name="add-freelance-invoice" class="button">Importer une facture</solid-route>
        </solid-router>
      </header>

      <dialog data-view="add-freelance-invoice" class="invoice-form">
        <close-button></close-button>
        <h3>Importer une facture</h3>
        <solid-form
          data-src="${sourceUrl}freelance-invoices/"
          fields="first-line(freelanceFullname, identifier), second-line(invoicingDate, htAmount), uploadUrl"
          label-freelanceFullname="Nom du prestataire"
          label-identifier="Numéro de la prestation"
          label-invoicingDate="Date de facturation"
          label-uploadUrl="Lien de la facture"
          label-htAmount="Montant HT"
          widget-invoicingDate="solid-form-date"
          widget-htAmount="solid-form-number"
          next="freelance-invoice-list"
        ></solid-form>
      </dialog>

      <dialog data-view="edit-freelance-invoice" class="invoice-form">
        <close-button></close-button>
        <h3>Modifier une facture</h3>
        <solid-form
          bind-resources
          fields="first-line(freelanceFullname, identifier), second-line(invoicingDate, htAmount), uploadUrl"
          label-freelanceFullname="Nom du prestataire"
          label-identifier="Numéro de la prestation"
          label-invoicingDate="Date de facturation"
          label-uploadUrl="Lien de la facture"
          label-htAmount="Montant HT"
          widget-invoicingDate="solid-form-date"
          widget-htAmount="solid-form-number"
          next="freelance-invoice-list"
        ></solid-form>
      </dialog>

      <solid-display
      data-view="freelance-invoice-list"
        data-src="${sourceUrl}freelance-invoices/"
        fields="invoice-title(invoice-main(invoice-header(freelanceFullname, identifier), invoice-footer(invoicingDate, htAmount)), invoice-aside(state)), 
        invoice-hidden(actions(edit, duplicate), uploadUrl)"
        label-edit="Éditer"
        label-duplicate="Dupliquer"
        action-edit="edit-freelance-invoice"
        action-duplicate="duplicate-invoice"
        widget-htAmount="widget-money"
        widget-uploadUrl="widget-embed-drive"
      ></solid-display>
    </section>
    <!-- /freelance ==================================== -->
  </div>
 `;
  }
}

customElements.define('solid-invoicing', SolidInvoicing);