gamutable/js/gamutable.js

"use strict";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

jQuery(function () {
  // pour les #URL_ACTION_AUTEUR
  // il faut ajouter une class : url_action
  $('#app').on('click', '.url_action', function (e) {
    e.preventDefault();
    e.stopPropagation();
    var confirmation = $(this).data('confirm');

    if (confirmation !== undefined) {
      if (!confirm(confirmation)) {
        return;
      }
    }

    var url = $(this).attr('href');
    var id = $(this).data('id');
    var nomBlocAjaxReload = $(this).data('ajaxreload');
    console.time('Chargement de VueJs APRES Ajax');
    $.ajax({
      url: url,
      async: true
    }).done(function () {
      if (parseInt(id) > 0) {
        app.rechargerJson(id);
      } else {
        app.rechargerJson();
      }

      if (nomBlocAjaxReload !== undefined) {
        ajaxReload(nomBlocAjaxReload, {
          args: {
            id: id
          },
          callback: function callback() {}
        });
      }
    });
  }); // lancement d'une modalbox

  $('#app').on('click', '.modalbox', function (e) {
    e.stopPropagation();
    e.preventDefault();
    var confirmation = $(this).data('confirm');

    if (confirmation !== undefined) {
      if (!confirm(confirmation)) {
        return;
      }
    }

    var url = $(this).attr('href');
    url += '&var_zajax=content';
    var data = {};
    var minHeight = $(this).data('minheight');

    if (minHeight !== undefined) {
      data.minHeight = minHeight;
    }

    var minWidth = $(this).data('minwidth');

    if (minWidth !== undefined) {
      data.minWidth = minWidth;
    }

    var width = $(this).data('width');

    if (width !== undefined) {
      data.width = width;
    }

    $.modalbox(url, data);
  }); // lancement d'une médiabox

  $('#app').on('click', '.mediabox', function (e) {
    e.preventDefault();
    var confirmation = $(this).data('confirm');

    if (confirmation !== undefined) {
      if (!confirm(confirmation)) {
        return;
      }
    }

    var href = $(this).attr('href');
    $.fn.mediabox({
      href: href
    });
  });
});

function recupJson(d) {
  try {
    return JSON.parse(d);
  } catch (e) {
    return false;
  }
}

var orderBy = function orderBy(arr, props, orders, champ) {
  return arr.sort(function (a, b) {
    return props.reduce(function (acc, prop, i) {
      if (acc === 0) {
        var _ref = orders && orders[i] === 'desc' ? [b[champ][prop], a[champ][prop]] : [a[champ][prop], b[champ][prop]],
            _ref2 = _slicedToArray(_ref, 2),
            p1 = _ref2[0],
            p2 = _ref2[1]; // passe en lowercase les String


        p1 = typeof p1 === 'string' ? p1.toLowerCase() : p1;
        p2 = typeof p2 === 'string' ? p2.toLowerCase() : p2; // Gestion du format de date
        // transforme 03/11/2000 en 20001103

        var re = /^(\d{2})\/(\d{2})\/(\d{2,4})$/;

        if (typeof p1 !== 'number') {
          var r1 = p1.match(re);

          if (Array.isArray(r1)) {
            p1 = r1[3] + r1[2] + r1[1];
          }

          var r2 = p2.match(re);

          if (Array.isArray(r2)) {
            p2 = r2[3] + r2[2] + r2[1];
          }
        }

        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
      }

      return acc;
    }, 0);
  });
};

console.time('Chargement de VueJS AVANT Ajax');
console.time('Chargement de VueJs APRES Ajax');
Vue.nextTick(function () {
  console.timeEnd('Chargement de VueJS AVANT Ajax');
});

function exporterCSV(json, delimitercsv, name) {
  var csv = '';

  if (delimitercsv) {
    csv = Papa.unparse(json, {
      delimiter: delimitercsv
    });
  } else {
    csv = Papa.unparse(json);
  } //Download the file as CSV


  var link = document.createElement('a');
  link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
  link.setAttribute('download', name);
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function trouver_index(table, id) {
  var i = -1;
  table.forEach(function (ligne, index) {
    if (ligne.html.id === parseInt(id)) {
      i = index;
    }
  });
  return i;
}

var monTableau = {
  props: {
    tparpage: {
      type: Array,
      default: function _default() {
        return [10, 20, 50, 'Tous'];
      }
    },
    apiuri: {
      type: String,
      required: true
    },
    champcsv: {
      type: String
    },
    delimitercsv: {
      type: String
    },
    namecsv: {
      type: String
    },
    url_sort_asc: {
      type: String
    },
    url_sort_desc: {
      type: String
    },
    urlvuebloc: {
      type: String
    },
    vueblocdefaut: {
      type: String,
      default: 'tableau'
    },
    filtrecolmulti: {
      type: String
    }
  },
  data: function data() {
    return {
      table: [],
      header: [],
      crayons: [],
      classes: [],
      filtreCol: [],
      filtreColExist: false,
      filtreColType: [],
      filtreColSelected: {},
      filtreColModif: 0,
      filtreColVal: {},
      search: '',
      page: 1,
      parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
      parPageSelect: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
      pages: [],
      triOrders: [],
      triProps: [],
      selectTr: [],
      champ_search: 'html',
      chargement: true,
      nameLocalStorage: this.calculer_nameLocalStorage(),
      quelleVue: this.vueblocdefaut,
      vuebloc: '',
      model: [],
      options: ['Jest', 'Mocha', 'Selenium', 'Puppeteer', 'Jasmine', 'Karma']
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.chargerJson();

    if (this.urlvuebloc) {
      fetch(this.urlvuebloc).then(function (response) {
        return response.text();
      }).then(function (data) {
        _this.vuebloc = data;
      });
    }
  },
  computed: {
    tableau: function tableau() {
      var _this2 = this;

      this.setPages();

      if (!this.search && !this.filtreColModif) {
        return this.pagination(this.table);
      }

      return this.pagination(this.table.filter(function (ligne) {
        var rsearch = Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;

        if (!rsearch) {
          return false;
        }

        Object.keys(_this2.filtreColSelected).forEach(function (colName) {
          if (rsearch) {
            var colValue = _this2.filtreColSelected[colName];

            if (colValue !== null) {
              if (!Array.isArray(colValue)) {
                colValue = [colValue];
              }

              var TcolValue = [];
              colValue.forEach(function (s) {
                if (Number.isInteger(s)) {
                  TcolValue.push(s);
                }

                if (s.length > 0) {
                  TcolValue.push(s.toLowerCase());
                }
              });

              if (TcolValue.length) {
                if (_this2.filtreColType[colName] === 'select') {
                  if (TcolValue.toString().indexOf(ligne[_this2.champ_search][colName].toString().toLowerCase()) === -1) {
                    rsearch = false;
                  }
                } else {
                  if (ligne[_this2.champ_search][colName].toString().toLowerCase().indexOf(TcolValue.toString()) === -1) {
                    rsearch = false;
                  }
                }
              }
            }
          }
        });
        return rsearch;
      }));
    }
  },
  watch: {
    parPageSelect: function parPageSelect(e) {
      if (!parseInt(e)) {
        this.parPage = this.table.length;
      } else {
        this.parPage = e;
      }

      sessionStorage.setItem('nbItems', this.parPage);
    },
    table: function table() {
      var $table = [];
      $table = [{
        header: this.header,
        crayons: this.crayons,
        classes: this.classes,
        filtreCol: this.filtreColType
      }].concat(_toConsumableArray(this.table));
      localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
    },
    tableau: function tableau() {
      var _this3 = this;

      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      // Si on veut filtrer la liste des options dynamique en fonction
      // du tri du tableau
      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      if (this.filtrecolmulti === 'non') {
        this.filtreCol.forEach(function (col) {
          var Tval = [''];

          _this3.tableau.forEach(function (t) {
            var valCol = t.html[col];

            if (Tval.indexOf(valCol) === -1) {
              Tval.push(valCol);
              _this3.filtreColValOk = true;
            }
          });

          _this3.filtreColVal[col] = Tval;
        });
      }
    }
  },
  methods: {
    selectValCol: function selectValCol() {
      this.filtreColModif++;
    },
    calculer_nameLocalStorage: function calculer_nameLocalStorage() {
      if (this.apiuri) {
        return this.apiuri.match(/.*page=(.*)/)[1];
      }

      return '';
    },
    chargerJson: function chargerJson(id) {
      var _this4 = this;

      var url = this.apiuri;

      if (parseInt(id) > 0) {
        url += '&id=' + id;
      } else {
        var data = localStorage.getItem(this.nameLocalStorage);
        data = recupJson(data);

        if (!data) {
          localStorage.removeItem(this.nameLocalStorage);
          data = [];
        }

        if (data && data.length) {
          var config = data.shift();
          this.header = config.header;

          if (config.crayons !== undefined) {
            this.crayons = config.crayons;
          }

          if (config.classes !== undefined) {
            this.classes = config.classes;
          }

          this.table = data;

          if (config.filtreCol !== undefined) {
            this.filtreColType = config.filtreCol;
            Object.keys(this.filtreColType).forEach(function (col) {
              var Tval = [''];

              _this4.table.forEach(function (t) {
                var valCol = t.html[col];

                if (Tval.indexOf(valCol) === -1) {
                  Tval.push(valCol);
                }
              });

              _this4.filtreCol.push(col);

              _this4.filtreColVal[col] = Tval;
              _this4.filtreColSelected[col] = [];
            });
          }

          if (data.length && data[0].search) {
            this.champ_search = 'search';
          }

          console.log('fin chargement localStorage');
        }
      }

      fetch(url).then(function (response) {
        return response.json();
      }).then(function (data) {
        var config = data.shift();
        _this4.header = config.header;

        if (config.crayons !== undefined) {
          _this4.crayons = config.crayons;
        }

        if (config.classes !== undefined) {
          _this4.classes = config.classes;
        }

        if (parseInt(id) > 0) {
          if (data.length > 0) {
            var i = trouver_index(_this4.table, id);
            _this4.table[i] = data[0];
          } else {
            var _i2 = trouver_index(_this4.table, id);

            _this4.table.splice(_i2, 1);
          }
        } else {
          _this4.table = data;

          if (data[0] && data[0].search) {
            _this4.champ_search = 'search';
          }
        }

        if (config.filtreCol !== undefined) {
          _this4.filtreColType = config.filtreCol;
          Object.keys(_this4.filtreColType).forEach(function (col) {
            var Tval = [''];

            _this4.table.forEach(function (t) {
              var valCol = t.html[col];

              if (Tval.indexOf(valCol) === -1) {
                Tval.push(valCol);
              }
            });

            _this4.filtreCol.push(col);

            _this4.filtreColVal[col] = Tval;
            _this4.filtreColSelected[col] = [];
          });
        }

        Vue.nextTick(function () {
          _this4.chargement = false;

          if ($_id > 0) {
            _this4.selectLigne($_id, 'id');

            var _url = new URL(window.location);

            _url = _url.href.replace('&_id=' + $_id, '');
            history.pushState({}, null, _url);
          }

          console.timeEnd('Chargement de VueJs APRES Ajax');
        });
      }).catch(function (error) {
        return console.log(error);
      });
    },
    setPages: function setPages() {
      var nombreDePages = Math.ceil(this.table.length / this.parPage);
      this.pages = [];

      for (var index = 1; index <= nombreDePages; index++) {
        this.pages.push(index);
      }
    },
    pagination: function pagination(tableau) {
      var page = this.page;
      var parPage = this.parPage;
      var from = page * parPage - parPage;
      var to = page * parPage;
      return tableau.slice(from, to);
    },
    afficher_crayons: function afficher_crayons(name, id) {
      if (Object.keys(this.crayons).indexOf(name) !== -1) {
        return "crayon ".concat(this.crayons[name], "-").concat(name, "-").concat(id);
      }
    },
    tri: function tri(col) {
      var sens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
      var i = this.triProps.indexOf(col);

      if (i !== -1) {
        if (!sens) {
          sens = 'asc';

          if (this.triOrders[i] === 'asc') {
            sens = 'desc';
          }
        }

        this.triOrders[i] = sens;
      } else {
        if (!sens) {
          sens = 'asc';
        }

        this.triProps.push(col);
        this.triOrders.push(sens);
      }

      this.table = orderBy(this.table, this.triProps, this.triOrders, this.champ_search);
    },
    ordreActif: function ordreActif(col, sens) {
      var i = this.triProps.indexOf(col);

      if (i !== -1) {
        if (this.triOrders[i] === sens) {
          return 'active';
        }
      }
    },
    resetTri: function resetTri() {
      this.table = orderBy(this.table, ['id'], '', this.champ_search);
      this.triOrders = [];
      this.triProps = [];
    },
    selectLigne: function selectLigne(id, col) {
      if (col === 'id' && parseInt(id)) {
        var i = this.selectTr.indexOf(id);

        if (i !== -1) {
          this.selectTr.splice(i, 1);
        } else {
          this.selectTr.push(id);
        }
      }
    },
    exportCSV: function exportCSV() {
      var _this5 = this;

      var $csv = [];
      var $header = [];
      var $tableau = [];
      Object.keys(this.header).forEach(function (k) {
        return $header.push(k);
      });
      $tableau = this.tableau.reduce(function (acc, ligne) {
        var $uneLigne = [];
        Object.values(ligne[_this5.champcsv]).forEach(function (l) {
          return $uneLigne.push(l);
        });
        return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
      }, []);
      $csv = [[].concat($header)].concat(_toConsumableArray($tableau));
      exporterCSV($csv, this.delimitercsv, this.namecsv);
    },
    replaceBloc: function replaceBloc(ligne) {
      var html = this.vuebloc;
      Object.keys(ligne).forEach(function (key) {
        html = html.replace("@@".concat(key, "@@"), ligne[key]);
      });
      return html;
    },
    changerVue: function changerVue(vue) {
      this.quelleVue = vue;
    }
  },
  template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\"\n\t\t\t\ttitle=\"R\xE9initialiser les tris des colonnes\">\n\t\t\t\t<i class=\"fa fa-repeat fas fa-redo\"></i>\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueTable\" title=\"Switcher en Vue tableau\"\n\t\t\t\t@click.stop=\"changerVue('tableau')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'bloc'\">\n\t\t\t\t<i class=\"fas fa fa-table\"></i>\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueBloc\" title=\"Switcher en Vue Bloc\"\n\t\t\t\t@click.stop=\"changerVue('bloc')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'tableau'\">\n\t\t\t\t<i class=\"fas fa fa-th-large\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\t<span class=\"texteMajBDD\">\n\t\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"btn verte\" style=\"cursor:auto;\"\n\t\t\t\ttitle=\"Base de donn\xE9e synchronis\xE9e !\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fas fa-database\"></i>\n\t\t\t</span>\n\t\t</div>\n\t\t<div class=\"vueBlocs\" v-if=\"quelleVue === 'bloc'\">\n\t\t\t<div class=\"vueBlocs-unbloc\"\n\t\t\tv-for=\"(ligne) in tableau\"\n\t\t\t:key=ligne.id\n\t\t\tv-html=replaceBloc(ligne.html)\n\t\t\t>\n\t\t\t</div>\n\t\t</div>\n\t\t<table class=\"table table--zebra\" v-if=\"quelleVue === 'tableau'\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t\t<tr v-if=\"filtreCol.length\" class=\"filtreColonne\">\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'filtreCol_'+i\">\n\t\t\t\t\t\t<div v-if=\"filtreCol.indexOf(head) !== -1\" :id=\"'filtreCol_'+head\">\n\t\t\t\t\t\t\t<vue-select\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'select'\"\n\t\t\t\t\t\t\t\tv-model=\"filtreColSelected[head]\"\n\t\t\t\t\t\t\t\t:options=\"filtreColVal[head]\"\n\t\t\t\t\t\t\t\thide-selected\n\t\t\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t\t\ttaggable\n\t\t\t\t\t\t\t\tclose-on-select\n\t\t\t\t\t\t\t\t@selected=\"selectValCol\"\n\t\t\t\t\t\t\t></vue-select>\n\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'input'\"\n\t\t\t\t\t\t\t\tclass=\"gamutable--rechercher\"\n\t\t\t\t\t\t\t\tv-model=\"filtreColSelected[head]\"\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tplaceholder=\"Rechercher\"\n\t\t\t\t\t\t\t\t@keyup=\"selectValCol\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name]]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Premier </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Pr\xE9c\xE9dent </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Suivant </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Dernier </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
};
var gamuTable = {
  components: {
    monTableau: monTableau
  },
  methods: {
    rechargerJson: function rechargerJson(id) {
      this.$refs.montableau.chargerJson(id);
    }
  }
};
var app = Vue.createApp(gamuTable).component('vue-select', window.VueNextSelect).mount('#app');