tofulm
34671bcf40
des array sont reactives. Par contre, la methode findIndex semble ne pas fonctionner dans tous les cas, pour palier j'ai creer une methode trouver_index. a tester
473 lines
No EOL
16 KiB
JavaScript
473 lines
No EOL
16 KiB
JavaScript
"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');
|
|
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() {
|
|
console.log('couco reload');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}); // 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 [];
|
|
}
|
|
}
|
|
|
|
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
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
table: [],
|
|
header: [],
|
|
crayons: [],
|
|
classes: [],
|
|
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()
|
|
};
|
|
},
|
|
mounted: function mounted() {
|
|
this.chargerJson();
|
|
},
|
|
computed: {
|
|
tableau: function tableau() {
|
|
var _this = this;
|
|
|
|
this.setPages();
|
|
|
|
if (!this.search) {
|
|
return this.pagination(this.table);
|
|
}
|
|
|
|
return this.pagination(this.table.filter(function (ligne) {
|
|
return Object.values(ligne[_this.champ_search]).toString().toLowerCase().indexOf(_this.search.toLowerCase()) < 0 ? false : true;
|
|
}));
|
|
}
|
|
},
|
|
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
|
|
}].concat(_toConsumableArray(this.table));
|
|
localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
|
|
}
|
|
},
|
|
methods: {
|
|
calculer_nameLocalStorage: function calculer_nameLocalStorage() {
|
|
return this.apiuri.match(/.*page=(.*)/)[1];
|
|
},
|
|
chargerJson: function chargerJson(id) {
|
|
var _this2 = this;
|
|
|
|
var url = this.apiuri;
|
|
|
|
if (parseInt(id) > 0) {
|
|
url += '&id=' + id;
|
|
} else {
|
|
var data = localStorage.getItem(this.nameLocalStorage);
|
|
data = recupJson(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 (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();
|
|
_this2.header = config.header;
|
|
|
|
if (config.crayons !== undefined) {
|
|
_this2.crayons = config.crayons;
|
|
}
|
|
|
|
if (config.classes !== undefined) {
|
|
_this2.classes = config.classes;
|
|
}
|
|
|
|
if (parseInt(id) > 0) {
|
|
if (data.length > 0) {
|
|
var i = trouver_index(_this2.table, id);
|
|
_this2.table[i] = data[0];
|
|
} else {
|
|
var _i2 = trouver_index(_this2.table, id);
|
|
|
|
console.log('index ', _i2);
|
|
|
|
_this2.table.splice(_i2, 1);
|
|
}
|
|
} else {
|
|
_this2.table = data;
|
|
|
|
if (data[0] && data[0].search) {
|
|
_this2.champ_search = 'search';
|
|
}
|
|
}
|
|
|
|
Vue.nextTick(function () {
|
|
_this2.chargement = false;
|
|
|
|
if ($_id > 0) {
|
|
_this2.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 _this3 = 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[_this3.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);
|
|
}
|
|
},
|
|
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\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\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\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\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<div>\n\t\t\t\t\t\t\t<div class=\"label_tete_colonne\" v-html=\"label\" @click.stop=\"tri(head)\"></div>\n\t\t\t\t\t\t\t<div class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'asc')\" width=\"1rem\" height=\"1rem\" @click.stop=\"tri(head,'asc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_asc\" />\n\t\t\t\t\t\t\t\t</svg>\n\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'desc')\" width=\"1rem\" height=\"1rem\" @click.stop=\"tri(head,'desc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_desc\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\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\" :id=\"'id_'+l.html.id\" :data-id=\"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], l.classes !== undefined ? l.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\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </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\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </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).mount('#app'); |