دورة VUE JS للمبتدئين الدرس السابع عشر


فهاد الدرس السابع عشر من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نمسحوا واحد المبلغ من liste ديالنا فاش نضغط على علامة الحذف وأيضا ملي نمسح المبلغ يلا كان مدخول يتنقص من المبلغ الإجمالي ويلا كان مصروف يتزاد.


1- حذف مصروف من liste

باش نمسح واحد المبلغ من liste ديالنا فاش نضغط على علامة الحذف غادي نمشي ل Depenses.vue وفل العلامة ديال الحذف غادي نزيدلها ل click@ لي كتعني فاش نضغط عليها غادي تنفذ واحد ل fonction.

و ل fonction هي  removeDep لي غادي تاخد depense ول index ديالها.

من بعد ف methods غادي نزيد ل fonction لي هي removeDep ولي كيف قلنا غادي تاخد depense ول index ديالها فكناخد ل index وكنستعملو باش كنمسح depense من ل array depenses من بعد كنرسل event ل App.vue لي غادي يكون فيه depense لي مسحت باش نزيد المبلغ ديالها للمبلغ الإجمالي.

الكود ديال Depenses.vue بعد التعديل هو : 

                                //Depenses.vue

<template>
    <div>
        <h3 class="text-info">Dépenses</h3>
        <hr>
        <ul class="list-group">
            <li class="list-group-item" v-for="(dep,index) in depenses" v-bind:key="index">
                {{dep.libelle}} {{dep.price}} 
                <span><i class="fa fa-times" @click="removeDep(dep,index)"></i></span>
            </li>
        </ul>
    </div>
</template>


<script>
    export default{
        props : ['bus','data'],
        name : 'Depenses',
        data(){
            return {
                depenses : [],
            }
        },
        methods:{
            addDepense(){
                this.depenses.push(this.data);
                this.$emit('depenseAdded');
            },
            removeDep(dep,index){
                this.depenses.splice(index, 1);
                this.$emit('removeDep',dep);
            }
        },
        mounted() {
            this.bus.$on('addDepense', this.addDepense);
        }, 
    }
</script>

<style scoped>
   i:hover{
       cursor: pointer;
   }
</style>
                            

2- حذف مدخول من liste

نفس الشي لي درنا ف Depenses.vue غادي نديروه ف  Gains.vue فل العلامة ديال الحذف غادي نزيدلها ل click@ 
و ل fonction لي غادي تنفذ لي هي  removeGain لي غادي تاخد gain ول index ديالها.

من بعد ف methods غادي نزيد ل fonction لي هي removeGain كناخد ل index وكنستعملو باش كنمسح ل gain من ل array gains من بعد كنرسل event ل App.vue لي غادي يكون فيه ل gain  لي مسحت باش ننقص المبلغ ديالها من المبلغ الإجمالي.

الكود ديال Gains.vue بعد التعديل هو : 

                                //Gains.vue

<template>
    <div>
        <h3 class="text-info">Gains</h3>
        <hr>
        <ul class="list-group">
            <li class="list-group-item" v-for="(gain,index) in gains" v-bind:key="index">
                {{gain.libelle}} {{gain.price}} 
                <span><i class="fa fa-times" @click="removeGain(gain,index)"></i></span>
            </li>
        </ul>
    </div>
</template>


<script>
    export default{
        props : ['bus','data'],
        name : 'Gains',
        data(){
            return {
                gains : []
            }
        },
        methods : {
            addGains(){
                this.gains.push(this.data);
                this.$emit('gainAdded');
            },
            removeGain(gain,index){
                this.gains.splice(index, 1);
                this.$emit('removeGain',gain);
            }
        },
        mounted() {
            this.bus.$on('addGains', this.addGains);
        }, 
    }
</script>

<style scoped>
   i:hover{
       cursor: pointer;
   }
</style>
                            

3- استقبال ل events ف App.vue

ف App.vue غادي نستقبل les événements لي رسلت من les autres components من بعد غادي نزيد les fonctions فل methods لي عندهم نفس اسم les événements.

عندي removeDep لي كتجينا مع depense فكنقص المبلغ ديال depense من المبلغ الإجمالي ثم كنتحقق يلا كان المبلغ أقل من الصفر كنرد ل propriété positif ل false باش لون الخلفية يتغير للأحمر. 

عندي removeGain لي كتجينا مع ل gain فكنزيد المبلغ ديال ل gain للمبلغ الإجمالي ثم كنتحقق يلا كان المبلغ أكبر من الصفر كنرد ل propriété positif ل true باش لون الخلفية يتغير للأخضر.

الكود النهائي ديال App.vue هو :

                                //App.vue

<template>
     <div>
        <div class="container">
            <h1 class="text-danger text-center">{{name}}</h1>
            <div class="row">
                <div class="col-md-6 mx-auto">
                    <h3 class="text-center" v-bind:class="classObject">{{montant}} dh</h3>
                    <div class="card mt-3">
                        <div class="card-body bg-light">
                            <div class="form-inline">
                                <div class="form-group">
                                    <input type="text" placeholder="Libellé" v-model="data.libelle" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <input type="text" placeholder="Montant" v-model="data.price" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success btn-sm mr-2" @click="addGains"><i class="fa fa-plus"></i></button>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-danger btn-sm" @click="addDepense"><i class="fas fa-minus-square"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-6">
                    <Gains v-bind:bus="bus"  @gainAdded="gainAdded"  @removeGain="removeGain" v-bind:data="data"></Gains>
                </div>
                <div class="col-md-6">
                    <Depenses v-bind:bus="bus"  @depenseAdded="depenseAdded" @removeDep="removeDep"  v-bind:data="data"></Depenses>
                </div>
            </div>
        </div>
     </div>
</template>


<script>    
    import Gains from './components/Gains';
    import Depenses from './components/Depenses';
    import Vue from 'vue'; 

    export default{
        name : 'App',
        data(){
            return{
                bus : new Vue(),
                data : {libelle:'',price:''},
                montant : 0,
                name : 'Gestion de dépenses',
                positif : true
            }
        },
        components : {
            Gains,
            Depenses
        },
        methods: {
            addDepense(){
                if (this.data.libelle.length && this.data.price.length) {
                    this.bus.$emit('addDepense');
                }
            },
            addGains(){
                if (this.data.libelle.length && this.data.price.length) {
                    this.bus.$emit('addGains');
                }
            },
            depenseAdded(){
                this.montant -= parseInt(this.data.price);
                if(this.montant < 0){
                    this.positif = false;
                }else{
                    this.positif = true;
                }
                this.data = {};
            },
            gainAdded(){
                this.montant += parseInt(this.data.price);
                if(this.montant > 0){
                    this.positif = true;
                }else{
                    this.positif = false;
                }
                this.data = {};
            },
            removeGain(gain){
                this.montant -= parseInt(gain.price);
                if (this.montant < 0) {
                    this.positif = false;
                }else{
                    this.positif = true;
                }   
            },
            removeDep(dep){
                this.montant += parseInt(dep.price);
                if (this.montant < 0) {
                    this.positif = false;
                }else{
                    this.positif = true;
                }    
            }
        },
        computed : {
            classObject(){
                return !this.positif ? 'negative' : 'positif';
            }
        }
    }
</script>



<style scoped>
    .positif{
        background-color: green;
        padding: 2px;
        color: bisque;
        border-radius: 5px;
    }
    .negative{
        background-color: red;
        padding: 2px;
        color: bisque;
        border-radius: 5px;
    }
</style>