How to show total cost of a list of items in table


For an examination I need to create pdf from a vue.js front end app.
My issue is with the front-end, I’m using Vue 3 and I need to display the total amount of all the items in the table I’ve made using bootstrap5.

Also I need to understand if i can align correctly the table head,columns and the footer. At the moment the result isnt the best

Here is my code.

           <div class="col-sm-12 col-md-12 col-lg-12">
                <h4 class="text-start">AGGIUNGI ARTICOLI</h4>
                <div class="row">    
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="floatingInput" placeholder="" v-model="codiceArticolo">
                            <label for="floatingInput">Cod. Articolo</label>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-1 col-lg-1">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="" placeholder="" v-model="qta">
                            <label for="floatingPassword">Qtà</label>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4 col-lg-4">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="" placeholder="Descrizione" v-model="descArticolo">
                            <label for="floatingPassword">Descrizione</label>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-1 col-lg-1">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="" placeholder="IVA" v-model="iva">
                            <label for="floatingPassword">% IVA</label>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-md-2 col-lg-2">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="" placeholder="Prezzo" v-model="prezzo">
                            <label for="floatingPassword">Prezzo</label>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-md-1 col-lg-1">
                        <a class="btn btn-success" href="#" @click.prevent="addItem"><i class="fas fa-plus"></i></a>
                    </div>
                </div>

            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                <!-- intestazione fattura -->
                <div class="card text-start">
                    <div class="card-body">
                        <p class="m-0"><small class="pe-2">RAGIONE SOCIALE:</small>{{ nome }} {{ cognome }}</p>
                        <p class="m-0"><small class="pe-2">P.IVA:</small>{{ piva }}</p>
                        <p class="m-0"><small class="pe-2">SDI:</small>{{ sdi }}</p>
                        <hr> 
                        <p class="m-0 d-inline pe-3"><small class="pe-2">FATTURA:</small>{{ numeroFattura }}</p>
                        <p class="m-0 d-inline ps-2"><small class="pe-2">DEL:</small>{{ dataEmissione }}</p>

                    </div>
                </div>
                <table class="table table-responsive">
                    <thead>
                        <tr>
                        <th scope="row">COD. ARTICOLO</th>
                        <th scope="row">QTÀ</th>
                        <th scope="row">DESCRIZIONE</th>
                        <th scope="row">% IVA</th>
                        <th scope="row">PREZZO</th>
                        <th scope="row" v-show="this.elFattura.length > 0" colspan="2">EDIT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in elFattura" :key="index">
                            <th scope="row">{{ item.codiceArticolo }}</th>
                            <td>{{ item.qta }}</td>
                            <td>{{ item.descrizione }}</td>
                            <td>{{ item.iva }}</td>
                            <td>{{ item.prezzo }} €</td>                    
                            <td class="">
                                <a class="btn-link text-decoration-none text-danger" href="#" @click.prevent="removeAmount(index)"><i class="fas fa-times"></i></a>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="text-end">
                            <th scope="row" colspan="12">TOTALE {{ importoTotale }} €</th>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div class="col-sm-12 col-md-12 col-lg-12">

            </div>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'


export default {
  name: 'Home',
  data() {
        return {
            elFattura: [],
            nome: null,
            cognome: null,
            piva: null,
            sdi: null,
            numeroFattura: null,
            dataEmissione: null,
            codiceArticolo: null,
            descArticolo: null,
            qta: null,
            iva: null,
            prezzo: null,
            importiInseriti: [],
            importoParziale: 0
        }
  },
  computed: {
      importoTotale() {
            if( this.importiInseriti.length > 0 ){
                return  this.importiInseriti.reduce( (p, n) => {
                            return Number(p) + Number(n);
                        });
            }else{
                return this.importoParziale;
            }
      }
  },
  mounted() {

  },
  methods: {
      addItem() {
            this.elFattura.push({
                codiceArticolo: this.codiceArticolo,
                descrizione: this.descArticolo,
                qta: this.qta,
                iva: this.iva,
                prezzo: this.prezzo
            });
            this.importoParziale = this.prezzo;
            this.importiInseriti.push(this.prezzo);
      },
      removeAmount(index) {
            this.elFattura = this.elFattura.filter( (item, i) => {
                if( i != index ){
                    this.importiInseriti.splice(index, 1);
                    this.importoParziale = this.importiInseriti.reduce( (a, b) =>  {
                        return Number(a) + Number(b) 
                    });
                    return item;
                }
            });

      }
  }
}
</script>

Since a price can be something like 28,50, is possible to preserve it during the calculation?

Source: Vue – Stack Overflow

November 29, 2021
Category : News
Tags: javascript | twitter-bootstrap | Vue.js | vuex

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.