ldc-legaulois/resources/js/components/bo/ReductionComponent.vue

<template>
    <div class="div-config">
        <div class="text-left div-checkbox">
            <div class="input-group ml-1 mt-1" style="width: 99%">
                <div class="input-group-prepend">
                    <div class="input-group-text"><i class="fas fa-search"></i></div>
                </div>
                <input type="text" class="form-control form-control-sm" placeholder="Entrer votre recherche ici" v-model="searchText" @keyup="search">
            </div>

            <div v-for="range in ranges" :key="range.name" style="margin-left: 20px;">
                <label class="range-check-list">
                    <input type="checkbox" v-model="selectedRanges" :value="range.id" @change="checkRange(range.id)">
                    <small class="align-text-top"><b>{{ range.name }}</b></small>
                </label>
                <div v-for="product in range.products" :key="product.name" style="margin-left: 20px;">
                    <label class="product-check-list">
                        <input type="checkbox" v-model="selectedProducts" :value="product.id" @change="checkProduct(product.id, range.id)">
                        <small class="align-text-top">{{ product.name }}</small>
                    </label>
                </div>
            </div>
        </div>
        <div class="text-left mx-3 border-top">
            <label class="align-text-top mt-1">
                <input type="checkbox" v-model="notification">
                Activer les notifications
            </label>
            <button class="btn btn-sm btn-primary float-right mt-1" @click="saveDatas">
                Enregistrer
                <div v-show="processing" class="spinner-border spinner-border-sm" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('ReductionComponent Component mounted.');
            this.ranges = JSON.parse(this.dbranges);
            this.baseRanges = JSON.parse(JSON.stringify(this.ranges));
            this.selectedProducts = JSON.parse(this.dbproductsselected);
            this.selectedRanges = JSON.parse(this.dbrangesselected);
            this.selectedRanges.forEach(rangeId => this.baseRanges.find(elem => elem.id == rangeId).products.forEach(item => this.selectedProducts.push(item.id)));
            this.notification = this.dbnotification == 1 ? true : false;
        },
        props: [
            'dbranges',
            'dbproductsselected',
            'dbrangesselected',
            'reductionid',
            'dbnotification'
        ],
        data() {
            return {
                ranges: [],
                baseRanges: [],
                selectedRanges: [],
                selectedProducts: [],
                searchText: '',
                notification: false,
                processing: false,
            }
        },
        watch: {

        },
        methods: {
            // Recherche dans le tableau les gammes ou produits corespondant à la recherche
            search() {
                let tmpProduct = JSON.parse(JSON.stringify(this.baseRanges));
                // Filtre sur les produits des gammes pour ne garder que ceux correspondants à la recherche
                tmpProduct.forEach(elem => elem.products = elem.products.filter(item => item.name.toLowerCase().includes(this.searchText.toLowerCase())));
                // Enlève les gammes qui n'ont plus de produits de la recherche (a laisser ?)
                tmpProduct = tmpProduct.filter(elem => elem.products.length > 0);
                // Filtre sur les gammes pour ajouter celles qui correspondent au texte entré et qui ne sont pas dans déjà dans tmpProduct
                let tmpRange = this.baseRanges.filter(function(item) {
                    if (item.name.toLowerCase().includes(this.searchText.toLowerCase()) && tmpProduct.filter(elem => elem.name.toLowerCase().includes(item.name.toLowerCase())).length === 0) {
                        return true;
                    }
                    return false;
                }.bind(this));
                this.ranges = Object.assign(tmpRange, tmpProduct);
            },
            saveDatas() {
                this.processing = true;
                axios.post('/bo/ajax/reductions/save', {
                    reductionId: this.reductionid,
                    products: this.selectedProducts,
                    ranges: this.selectedRanges,
                    notification: this.notification ? 1 : 0,
                }).then(
                    (response) => {
                        this.processing = false;
                    }
                )
                .catch(function (error) {
                    console.log(error);
                    this.processing = false;
                });
            },
            checkRange(rangeId) {
                let range = this.baseRanges.find(element => element.id == rangeId);
                if (this.selectedRanges.includes(rangeId))
                    range.products.forEach(elem => this.selectedProducts.includes(elem.id) ? null : this.selectedProducts.push(elem.id));
                else
                    range.products.forEach(elem => this.selectedProducts.splice(this.selectedProducts.indexOf(elem.id), 1));
            },
            checkProduct(productId, rangeId) {
                if (!this.selectedProducts.includes(productId))
                    if (this.selectedRanges.includes(rangeId))
                        this.selectedRanges.splice(this.selectedRanges.indexOf(rangeId), 1);
            }
        }
    }
</script>

<style>
    .range-check-list {
        margin-bottom: 0px;
        margin-top: 0px;
        padding-bottom:0px;
        padding-top: 0px;
        height: 10px;
    }

    .product-check-list {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        margin-top: 0px;
        height: 10px;
    }

    .div-config {
        background-color: ghostwhite;
        border: 1px;
        border-radius: 3px;
    }

    .div-checkbox {
        max-height: 200px;
        overflow-y: scroll;
    }
</style>