Use case DataManager vuetable-2

<template>
    <div class="ui container">
        <div class="row">
            <div class="col-4">
                <filter-bar></filter-bar>
            </div>
            <div class="col-8">
                <div class="pull-right">
                    <button v-if="level" class="ui btn btn-primary" @click.prevent="addStudent()">Ajouter un Etudiant
                    </button>
                    <button class="btn btn-primary " @click.prevent="print()">Imprimer La Liste</button>
                    <download-excel
                        class="btn btn-primary"
                        :data="students"
                        :fields="json_fields"
                        worksheet="My Worksheet"
                        :name="getExcelFileName">
                        Download Excel
                    </download-excel>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <v-select v-model="currentDivision" label="name" :reduce="div => div.id" :placeholder="'Division'"
                          :options="allDivisions"/>
            </div>
            <div class="col-3">
                <v-select v-model="currentFiliere" :get-option-label="getFiliereLabel" :placeholder="'Filiere'"
                          :filterable="true" :options="allFilieres"
                          v-if="allFilieres" :reduce="f => f.id" label="Filiere"/>
            </div>
            <div class="col-3">
                <v-select v-model="currentSex" :placeholder="'Sexe'" :options="['M','F']"/>
            </div>
            <div class="col-3  mb-1">
                <button v-if="currentFiliere && level" class="ui btn btn-primary" @click.prevent="manageNotes()">Gerer Les
                    Notes
                </button>
            </div>
            <div class="col-3 mb-1">
                <button  class="ui btn btn-primary" @click.prevent="printStudentsCard()">Imprimer
                    Les Cartes
                </button>
            </div>
        </div>
        <vuetable id="print" ref="vuetable"
                  :api-mode="false"
                  :fields="fields"
                  :per-page="perPage"
                  :append-params="moreParams"
                  :data-manager="dataManager"
                  pagination-path="pagination"
                  @vuetable:pagination-data="onPaginationData"
        >
            <div slot="actions" slot-scope="props">
                <button
                    title="Imprimer le relever de Notes"
                    class="ui small button"
                    @click="onActionClicked('print-student-report', props.rowData)"
                >
                    <i class="id card icon"></i>
                </button>
                <button
                    class="ui small button"
                    @click="onActionClicked('edit-item', props.rowData)"
                >
                    <i class="edit icon"></i>
                </button>
                <button
                    class="ui small button"
                    @click="onActionClicked('delete-item', props.rowData)"
                >
                    <i class="user times icon"></i>
                </button>
            </div>
        </vuetable>
        <div style="padding-top:10px">
            <vuetable-pagination-info ref="paginationInfo"
            ></vuetable-pagination-info>
            <vuetable-pagination ref="pagination"
                                 @vuetable-pagination:change-page="onChangePage"
            ></vuetable-pagination>
        </div>
    </div>
</template>

<script>
    import Vuetable from "vuetable-2";
    import VuetablePagination from "vuetable-2/src/components/VuetablePagination";
    import VuetablePaginationInfo from "vuetable-2/src/components/VuetablePaginationInfo.vue";
    import FieldsDef from "./studentFields.js";
    import _ from "lodash";
    import HelperMixin from '../helpers';
    import NoteReportComponent from "./NoteReportComponent";
    import StudentCard from "./StudentCardComponent";

    export default {
        components: {
            Vuetable,
            VuetablePagination,
            VuetablePaginationInfo
        },
        mixins: [HelperMixin],
        data() {
            return {
                json_fields: {
                    'MATRICULE': 'matricule',
                    // regular field (exported data 'as is')
                    'NOM': 'name',
                    'PRENOM': 'surname',
                    'NIVEAU': {
                        field: 'levels',
                        callback: (value) => {
                            return value[0].name;
                        },
                    },
                    'OPTION': 'option.name',
                    'FILIERE': 'filiere.name',
                    'DIVISION': 'division.name',
                    'SEXE': 'sex'
                },
                fields: FieldsDef,
                perPage: 10,
                students: [],
                level: null,
                currentFiliere: null,
                currentSex: null,
                currentDivision: null,
                allDivisions: [],
                allOptions: [],
                allFilieres: [],
                allLevel: [],
                moreParams: {}
            };
        },
        computed: {
            getExcelFileName: function () {
                return this.getPageName() + '.xls';
            }
        },

        watch: {
            students(newVal, oldVal) {
                this.$refs.vuetable.refresh();
            },
            // whenever question changes, this function will run
            currentFiliere: function (newClass, oldClass) {
                this.onCustomFilter();
            },
            currentSex: function (newClass, oldClass) {
                this.onCustomFilter();
            },
            currentDivision: function (newClass, oldClass) {
                console.log(newClass);
                this.onCustomFilter();
            },
            '$route.params.level_id': {
                handler(level_id) {
                    this.level = level_id;
                    this.moreParams.niveau = this.level;
                    this.getData();
                },
                immediate: true,
            }
        },

        mounted() {
            this.level = this.$route.params.level_id;
            if (this.level) {
                console.log(this.level);
                this.moreParams.niveau = this.level;
            }
            this.getData();
            this.$root.$emit('set-title', 'Gestion des Etudiants');
            this.$root.$on('filter-set', eventData => this.onFilterSet(eventData));
            this.$root.$on('filter-reset', e => this.onFilterReset());
            this.getAddData();
        },

        methods: {
            manageNotes() {
                console.log(this.currentFiliere);
                const fil = this.allFilieres.find((f)=>f.id===this.currentFiliere);
                this.$router.push('/edit-notes/' + this.level + '/filiere/' + fil.id + '/' + fil.name + '-' + 'niveau' + this.level);
            },
            printStudentsCard() {
                console.log(this.students);
                let stylesHtml = '';
                for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
                    stylesHtml += node.outerHTML;
                }

                let prtHtml = '<div class="">';
                for (let s of this.students) {
                    console.log(s);
                    var studentCard = new Vue({
                        ...StudentCard,
                        parent: this,
                        propsData: {
                            name: s.name,
                            surname: s.surname,
                            matricule: s.matricule,
                            sex: s.sex,
                            photo: '/uploads/' + s.photo,
                            filiere: s.filiere.name,
                            level: s.levels[0].name
                        }
                    }).$mount();
                    console.log(studentCard.$el);
                    prtHtml += studentCard.$el.outerHTML;
                }
                // Get HTML to print from element
                // const prtHtml = document.getElementById('.row').innerHTML;

                // Get all stylesheets HTML
                prtHtml += '</div>';
                // Open the print window
                const WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');

                WinPrint.document.write(`<!DOCTYPE html>
                                    <html>
                                      <head>
                                        ${stylesHtml}
                                      </head>
                                      <body>
                                        ${prtHtml}
                                      </body>
                                    </html>`);

                WinPrint.document.close();
                WinPrint.focus();
                WinPrint.open();
            },
            getFiliereLabel(option) {
                return option.name.toUpperCase();
            },
            onPaginationData(paginationData) {
                this.$refs.pagination.setPaginationData(paginationData);
            },
            onChangePage(page) {
                this.$refs.vuetable.changePage(page);
            },
            dataManager(sortOrder, pagination) {
                if (this.students.length < 1) {
                    pagination = this.$refs.vuetable.makePagination(
                        this.students.length,
                        this.perPage
                    );
                    this.$refs.paginationInfo.setPaginationData(pagination);
                    return {
                        pagination: pagination,
                        data: [],

                    };
                }

                let local = this.students;

                // sortOrder can be empty, so we have to check for that as well
                if (sortOrder.length > 0) {
                    console.log("orderBy:", sortOrder[0].sortField, sortOrder[0].direction);
                    local = _.orderBy(
                        local,
                        sortOrder[0].sortField,
                        sortOrder[0].direction
                    );
                }

                pagination = this.$refs.vuetable.makePagination(
                    local.length,
                    this.perPage
                );
                this.$refs.paginationInfo.setPaginationData(pagination);
                let from = pagination.from - 1;
                let to = from + this.perPage;

                return {
                    pagination: pagination,
                    data: _.slice(local, from, to),

                };
            },
            onActionClicked(action, data) {
                console.log(data);
                switch (action) {
                    case 'edit-item' :
                        this.updateStudent(data);
                        break;
                    case 'print-student-report':
                        this.printStudentReport(data);
                        break;
                    case 'delete-item':
                        this.gShowConfirm('Voulez Vous Vraiment supprimer "' + data.name + '" ?', this.deleteStudent, data.id);
                        break;
                }
            },
            print() {
                this.$easyPrint('print', this.getPageName(), null, false);
            },
            printStudentReport(data) {
                axios.get('/api/examinations/getStudentReportData/' + data.id)
                    .then((resp) => {
                        const propsData = {
                            data: resp.data.data,
                            nom: data.name + ' ' + data.surname,
                            matricule: data.matricule,
                            cycle:data.option.name+' OPTION '+ data.filiere.name,
                            niveau: parseInt(data.levels[0].name),
                            annee_scolaire: resp.data.data.schoolYear.name
                        };
                        this.$easyPrintComponent(NoteReportComponent, propsData, null, 'portrait', true);
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            onFilterSet(filterText) {
                this.moreParams = {
                    ...this.moreParams,
                    'filter': filterText
                };
                this.getData();
            },
            onFilterReset() {
                this.moreParams.filter = null;
                this.getData();
            },
            onCustomFilter() {
                this.moreParams = {
                    ...this.moreParams,
                    filiere_id: this.currentFiliere,
                    sex: this.currentSex,
                    division_id: this.currentDivision
                };
                this.getData();
            },
            getAddData() {
                axios
                    .get("/api/students/create")
                    .then((response) => {
                        console.log(response.data.data);
                        this.allOptions = response.data.data.options;
                        this.allDivisions = response.data.data.divisions;
                        this.allFilieres = response.data.data.filieres;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            addStudent() {
                let m = this.$modals.add({
                    title: "Ajouter un Etudiant ",
                    theme: "osx", // or 'osx'
                    rtl: false, // default false
                    items: [
                        {
                            label: "Nom",
                            name: "name",
                            type: "text",
                            attr: {
                                required: true
                            }
                        },
                        {
                            label: "Prenom",
                            name: "surname",
                            type: "text",
                            attr: {
                                required: true
                            }
                        },
                        {
                            label: "Sexe",
                            name: "sex",
                            type: "radio",
                            attr: {
                                required: true
                            },
                            options: [
                                {text: 'M', value: 'M'},
                                {text: 'F', value: 'F'}
                            ]

                        },
                        {
                            label: "Matricule",
                            name: "matricule",
                            type: "text",
                            attr: {
                                required: true
                            }
                        },
                        {
                            label: "Division",
                            name: "division_id",
                            type: "select",
                            value: "1",
                            options: this.allDivisions.map((division) => {
                                return {text: division.name.toUpperCase(), value: division.id};
                            })
                        },
                        {
                            label: "Option",
                            name: "option_id",
                            type: "select",
                            value: "1",
                            options: this.allOptions.map((opt) => {
                                return {text: opt.name.toUpperCase(), value: opt.id};
                            })
                        },
                        {
                            label: "Filiere",
                            name: "filiere_id",
                            type: "select",
                            value: "1",
                            options: this.allFilieres.map((filiere) => {
                                return {text: filiere.name.toUpperCase(), value: filiere.id};
                            })
                        },
                        {
                            label: "Carte Photo",
                            name: "photo",
                            type: "file",
                            attr: {
                                required: true,
                                placeholder: 'Choisir une photo 4x4'
                            },
                        },
                        {
                            label: "Telephone",
                            name: "tel",
                            type: "tel",
                            attr: {
                                required: true
                            }
                        },

                        {
                            label: "Nom Parent",
                            name: "parent_name",
                            type: "text",
                            attr: {
                                required: true
                            }
                        },
                        {
                            name: "level_id",
                            type: "hidden",
                            value: this.level
                        },
                        {
                            label: "Telephone Parent",
                            name: "parent_tel",
                            type: "tel",
                            attr: {
                                required: true
                            }
                        }
                    ],
                    use: {
                        // footer,
                    }
                });
                m.open(); // open modal and add onopen event
                //m.onreload(getData);
                m.onsave(async m => {
                    m.loading();
                    axios
                        .post("/api/students", m.formData())
                        .then((response) => {
                            console.log(response);
                            m.loaded();
                            this.$notify({
                                group: 'validation',
                                title: 'Important message',
                                text: response.data.message,
                                type: 'success'
                            });
                            this.getData();
                            m.close();
                        })
                        .catch((error) => {
                            m.loaded();
                            this.$notify({
                                group: 'validation',
                                title: 'Important message',
                                text: 'Une erreur sest produite',
                                type: 'error'
                            });
                            console.log(error);
                        });
                });
            },
            getData() {
                Vue.nextTick(() => {
                    axios.get("/api/students", {params: this.moreParams}).then(response => {
                        this.students = response.data.data.students;
                    });
                });
            },
            getPageName() {
                let name = "Liste_Etudiants";
                let division;
                let sex;
                let cfiliere;
                if (this.moreParams.sex) {
                    sex = (this.moreParams.sex === "M") ? 'Masculin' : 'Feminin';
                    name += '_' + sex;
                }
                if (this.moreParams.filiere_id) {
                    cfiliere = this.allFilieres.find((c) => {
                        return c.id === this.moreParams.filiere_id
                    });
                    console.log(this.allFilieres, cfiliere);
                    name += '_' + cfiliere.name;
                }
                if (this.moreParams.division_id) {
                    division = this.allDivisions.find((c) => {
                        return c.id === this.moreParams.division_id
                    });
                    name += '_' + division.name;
                }

                if (this.moreParams.niveau) {
                    name += '_level_' + this.moreParams.niveau;
                }
                return name;

            },
            updateStudent(data) {
                let m = this.$modals.add({
                    title: "Modifier un Etudiant ",
                    theme: "osx", // or 'osx'
                    rtl: false, // default false
                    items: [
                        {
                            label: "Nom",
                            name: "name",
                            type: "text",
                            value: data.name,
                            attr: {
                                required: true
                            }
                        },
                        {
                            label: "Prenom",
                            name: "surname",
                            type: "text",
                            value: data.surname,
                            attr: {
                                required: true
                            }
                        },
                        {
                            label: "Sexe",
                            name: "sex",
                            type: "radio",
                            attr: {
                                required: true
                            },
                            value: data.sex,
                            options: [
                                {text: 'M', value: 'M'},
                                {text: 'F', value: 'F'}
                            ]

                        },
                        {
                            label: "Matricule",
                            name: "matricule",
                            type: "text",
                            value: data.matricule,
                            attr: {
                                required: true
                            }
                        },
                        {
                            label: "Division",
                            name: "division_id",
                            type: "select",
                            value: data.division.id,
                            options: this.allDivisions.map((division) => {
                                return {text: division.name.toUpperCase(), value: division.id};
                            })
                        },
                        {
                            label: "Option",
                            name: "option_id",
                            type: "select",
                            value: data.option.id,
                            options: this.allOptions.map((opt) => {
                                return {text: opt.name.toUpperCase(), value: opt.id};
                            })
                        },
                        {
                            label: "Filiere",
                            name: "filiere_id",
                            type: "select",
                            value: data.filiere.id,
                            options: this.allFilieres.map((filiere) => {
                                return {text: filiere.name.toUpperCase(), value: filiere.id};
                            })
                        },
                        {
                            label: "Carte Photo",
                            name: "photo",
                            type: "file",
                            attr: {
                                placeholder: 'Choisir une photo 4x4'
                            },
                        },
                        {
                            label: "Telephone",
                            name: "tel",
                            type: "tel",
                            value: data.tel,
                            attr: {
                                required: true
                            }
                        },

                        {
                            label: "Nom Parent",
                            name: "parent_name",
                            type: "text",
                            value: data.parent_name,
                            attr: {
                                required: true
                            }
                        },
                        {
                            label: "Telephone Parent",
                            name: "parent_tel",
                            type: "tel",
                            value: data.parent_tel,
                            attr: {
                                required: true
                            }
                        },
                        {
                            type: "hidden",
                            name: '_method',
                            value: 'PUT',

                        },
                        {
                            name: "level_id",
                            type: "hidden",
                            value: this.level
                        },

                    ],
                    use: {}
                });
                m.open(); // open modal and add onopen event
                m.onsave(async m => {
                    m.loading();
                    m.formData().append('_method', 'PUT');
                    axios
                        .post("/api/students/" + data.id, m.formData())
                        .then((response) => {
                            console.log(response);
                            m.loaded();
                            this.$notify({
                                group: 'validation',
                                title: 'Message',
                                text: response.data.message,
                                type: 'success'
                            });
                            this.getData();
                            m.close();
                        })
                        .catch(function (error) {
                            m.loaded();
                            this.$notify({
                                group: 'validation',
                                title: 'Message',
                                text: error.message,
                                type: 'error'
                            });
                            console.log(error);
                        });
                });
            },
            deleteStudent(studentId) {
                let formData = new FormData();
                formData.append('_method', 'DELETE');
                axios
                    .post('/api/students/' + studentId, formData)
                    .then(resp => {
                        this.getData();
                        this.$notify({
                            group: 'validation',
                            title: 'Message',
                            text: resp.data.message,
                            type: 'success'
                        });

                    })
                    .catch(err => {
                        this.$notify({
                            group: 'validation',
                            title: 'Message',
                            text: 'Une Erreur s\'est produite',
                            type: 'error'
                        });
                        console.log(err)
                    })

            },
            showConfirm(message, callback, data) {
                const options = {title: 'Confirmation', cancelLabel: 'No'};
                this.$dialogs.confirm(message, options)
                    .then(res => {
                        if (res.ok) {
                            callback(data);
                        }
                        console.log(res) // {ok: true|false|undefined}
                    })
            }
        }
    };
</script>

<style>
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin-top: 20px;
    }

    button.ui.button {
        padding: 8px 3px 8px 10px;
        margin-top: 1px;
        margin-bottom: 1px;
    }
</style>