ldc-gen-game-web/resources/js/components/FaqQuestions.vue

<template>
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-3">
                    FAQ - Gestion des questions
                </div>
                <div class="col-md-6 text-center">
                    <transition name="fade">
                        <span v-show="processing">
                            {{ response }}
                        </span>
                    </transition>
                </div>
                <div class="col-md-3 text-right">
                    <button class="btn btn-primary btn-sm text-white float-right" @click="saveData()" :disabled="processing">
                        Sauvegarder
                        <div class="spinner-border spinner-border-sm text-light" role="status" v-show="processing">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="col-md-10 offset-md-1">
                <div v-for="(item, index) in datas" :key="item.id">
                    <div class="form-inline">
                        <label class="col-form-label col-md-3">Question :</label>
                        <input type="text" v-model="item.question" class="form-control form-control-sm col-md-7" placeholder="Entrer votre question ici" required>
                        <a class="text-decoration-none col-md-2 col-form-label w-100 text-right" href="#_" @click="item.toggle = !item.toggle">
                            Détails
                            <i class="fas" :class="{ 'fa-chevron-down': !item.toggle, 'fa-chevron-up': item.toggle}"></i>
                        </a>
                    </div>
                    <transition name="slide-fade">
                        <div class="form-inline bg-light rounded" v-show="item.toggle">
                            <label class="col-form-label col-md-3">Réponse :</label>
                            <input type="text" v-model="item.answer" class="form-control form-control-sm col-md-7" placeholder="Entrer votre réponse ici" required><br/>
                            <div class="col-md-2 text-right">
                                <button class="btn btn-danger btn-sm" @click="removeItem(index)">Supprimer</button>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="col-form-label">Votes positifs</label>
                                <input type="text" v-model="item.positive_vote" class="form-control form-control-sm" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="col-form-label">Votes négatifs</label>
                                <input type="text" v-model="item.negative_vote" class="form-control form-control-sm" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="col-form-label">Thème</label>
                                <select v-model="item.theme_id" class="custom-select custom-select-sm">
                                    <option v-for="theme in themes" :key="theme.id" :value="theme.id" :selected="theme.id == item.theme_id">{{theme.name}}</option>
                                </select>
                            </div>
                        </div>
                    </transition>
                    <hr/>
                </div>
                <div class="form-group text-right">
                    <button class="btn btn-primary btn-sm text-white" @click="newItem">Ajouter une question</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('FaqQuestions Component mounted.');
            this.datas = JSON.parse(this.dbdatas);
            this.themes = JSON.parse(this.dbthemes);
        },
        props: [
            'dbdatas',
            'dbthemes',
        ],
        data() {
          return {
              datas: [],
              themes: [],
              response: null,
              processing: false
          }
        },
        watch: {

        },
        methods: {
            newItem() {
                this.datas.push({id: null, question: '', answer: '', positive_vote: 0, negative_vote: 0, theme_id: null, toggle: false});
            },
            removeItem(index) {
                if (confirm("Êtes-vous sûr(e) ?")) {
                    if (this.datas[index]['id'] !== null) {
                        this.processing = true;
                        this.response = "Suppression en cours...";
                        axios.post('/bo/ajax/delete-faq-question', {
                            id: this.datas[index]['id'],
                        }).then(
                            (response) => {
                                this.response = "Suppression terminée !";
                                this.processing = false;
                            }
                        )
                        .catch(function (error) {
                            console.log(error);
                            this.response = "Erreur lors de la suppression.";
                            this.processing = false;
                        });
                        this.datas.splice(index, 1);
                    } else {
                        this.datas.splice(index, 1);
                    }
                }
            },
            saveData() {
                this.processing = true;
                this.response = "En cours de sauvegarde..."
                axios.post('/bo/ajax/save-faq-question', {
                    questions: this.datas,
                }).then(
                    (response) => {
                        this.datas = response.data;
                        this.response = "Sauvegarde terminée !";
                        this.processing = false;
                    }
                )
                .catch(function (error) {
                    console.log(error);
                    this.response = "Erreur lors de la sauvegarde.";
                    this.processing = false;
                });
            }
        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(10px);
        opacity: 0;
    }
</style>