affiché, attention , il faut gerer la conf de php correctement, cf readme. On change le nom du fichier, plus besoin qu'il soit hashé maintenant, car un job le supprimera
922 lines
No EOL
34 KiB
JavaScript
922 lines
No EOL
34 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" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) 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) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
|
|
|
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
|
|
jQuery(function () {
|
|
$('#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'); // passer en refresh animé une éventuelle icone
|
|
|
|
if ($(this).has('i.icon, i.fa')) {
|
|
$(this).find('i.icon, i.fa').eq(0).replaceWith('<i class="fa fa-refresh fa-spin"></i>');
|
|
}
|
|
|
|
var nomBlocAjaxReload = $(this).data('ajaxreload');
|
|
console.time('Chargement de VueJs APRES Ajax');
|
|
$.ajax({
|
|
url: url,
|
|
dataType: 'json',
|
|
async: true
|
|
}).done(function (retour) {
|
|
if (!$.isEmptyObject(retour) && !$.isEmptyObject(retour.message_erreur)) {
|
|
alert(retour.message_erreur);
|
|
} else {
|
|
if (parseInt(id) > 0) {
|
|
app.rechargerJson(id);
|
|
app.rechargerJson_deux(id);
|
|
} else {
|
|
app.rechargerJson();
|
|
app.rechargerJson_deux();
|
|
}
|
|
|
|
if (nomBlocAjaxReload !== undefined) {
|
|
console.log('depart reload: ' + nomBlocAjaxReload);
|
|
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;
|
|
var valeur_reduite = $(window).width() * width / 100;
|
|
url += '&largeur=' + valeur_reduite + 'px';
|
|
}
|
|
|
|
data.onShow = function () {
|
|
if ((typeof charger_require === "undefined" ? "undefined" : _typeof(charger_require)) !== undefined) {
|
|
charger_require();
|
|
}
|
|
};
|
|
|
|
$.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) {
|
|
console.log('erreur recupJson ', 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
|
|
},
|
|
pdfuri: {
|
|
type: String
|
|
},
|
|
namepdf: {
|
|
type: String
|
|
},
|
|
fichierpdf: {
|
|
type: String
|
|
},
|
|
argpdf: {
|
|
type: String
|
|
},
|
|
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
|
|
},
|
|
nomblocajaxreload: {
|
|
type: String
|
|
},
|
|
stockage: {
|
|
type: String
|
|
},
|
|
includespip: {
|
|
type: String
|
|
},
|
|
filtrer: {
|
|
type: String
|
|
},
|
|
_id: {
|
|
type: String
|
|
},
|
|
filtreselect: {
|
|
type: String
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
table: [],
|
|
header: [],
|
|
crayons: [],
|
|
classes: [],
|
|
ordreCol: [],
|
|
filtreCol: [],
|
|
filtreColExist: false,
|
|
filtreColType: [],
|
|
filtreColSelected: {},
|
|
filtreColModif: 0,
|
|
filtreColVal: {},
|
|
search: this.filtrer,
|
|
page: 1,
|
|
parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
|
|
parPageSelect: sessionStorage.getItem('nbItemsChaine') ? sessionStorage.getItem('nbItemsChaine') : this.tparpage[0],
|
|
pages: [],
|
|
triOrders: [],
|
|
triProps: [],
|
|
selectTr: [],
|
|
champ_search: 'html',
|
|
chargement: true,
|
|
nameLocalStorage: this.calculer_nameLocalStorage(),
|
|
quelleVue: this.vueblocdefaut,
|
|
vuebloc: '',
|
|
model: [],
|
|
options: [],
|
|
searchInputHead: '',
|
|
searchInputVal: '',
|
|
loadingVueSelect: true,
|
|
ajaxCrayons: false
|
|
};
|
|
},
|
|
mounted: function mounted() {
|
|
var _this = this;
|
|
|
|
localforage.setDriver(localforage[this.stockage.toUpperCase()]);
|
|
this.chargerJson();
|
|
|
|
if (this.urlvuebloc) {
|
|
fetch(this.urlvuebloc).then(function (response) {
|
|
return response.text();
|
|
}).then(function (data) {
|
|
_this.vuebloc = data;
|
|
});
|
|
}
|
|
},
|
|
computed: {
|
|
filtreColVal_visible: function filtreColVal_visible() {
|
|
var head = this.searchInputHead;
|
|
var val = this.searchInputVal;
|
|
|
|
if (!head) {
|
|
return this.filtreColVal;
|
|
} else {
|
|
var filtreColVal_visible = {};
|
|
filtreColVal_visible[head] = this.filtreColVal[head].filter(function (v) {
|
|
return v.toString().toLowerCase().indexOf(val.toLowerCase()) !== -1;
|
|
});
|
|
return filtreColVal_visible;
|
|
}
|
|
},
|
|
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') {
|
|
var Trsearch = TcolValue.some(function (uneValeur) {
|
|
if (Number.isInteger(uneValeur)) {
|
|
if (parseInt(ligne[_this2.champ_search][colName]) === uneValeur) {
|
|
return true;
|
|
}
|
|
} else {
|
|
if (!(uneValeur.indexOf(ligne[_this2.champ_search][colName].toString().toLowerCase().toString()) === -1 || !ligne[_this2.champ_search][colName].toString().toLowerCase())) {
|
|
return true;
|
|
}
|
|
}
|
|
});
|
|
|
|
if (!Trsearch) {
|
|
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;
|
|
}
|
|
|
|
console.log(this.parPage);
|
|
sessionStorage.setItem('nbItems', this.parPage);
|
|
sessionStorage.setItem('nbItemsChaine', this.parPageSelect);
|
|
},
|
|
table: function table() {
|
|
this.saveHeader();
|
|
var $table = [];
|
|
$table = this.table;
|
|
localforage.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) {
|
|
// let Tval = [''];
|
|
var Tval = [];
|
|
|
|
_this3.tableau.forEach(function (t) {
|
|
var valCol = t[_this3.champ_search][col];
|
|
|
|
if (Tval.indexOf(valCol) === -1) {
|
|
Tval.push(valCol);
|
|
_this3.filtreColValOk = true;
|
|
}
|
|
});
|
|
|
|
_this3.filtreColVal[col] = Tval;
|
|
});
|
|
}
|
|
},
|
|
filtreColSelected: {
|
|
handler: function handler() {
|
|
if (!this.loadingVueSelect) {
|
|
var ObfiltreSelect = [];
|
|
|
|
if (this.filtreColSelected) {
|
|
Object.entries(this.filtreColSelected).forEach(function (_ref3) {
|
|
var _ref4 = _slicedToArray(_ref3, 2),
|
|
champ = _ref4[0],
|
|
valeurs = _ref4[1];
|
|
|
|
if (!Array.isArray(valeurs)) {
|
|
valeurs = [valeurs];
|
|
}
|
|
|
|
ObfiltreSelect.push({
|
|
champ: champ,
|
|
valeurs: valeurs
|
|
});
|
|
});
|
|
}
|
|
|
|
if (!this.ajaxCrayons) {
|
|
localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(ObfiltreSelect));
|
|
}
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
saveHeader: function saveHeader() {
|
|
var $header = {
|
|
header: this.header,
|
|
crayons: this.crayons,
|
|
classes: this.classes,
|
|
filtreCol: this.filtreColType,
|
|
ordreCol: this.ordreCol
|
|
}; // if (!localStorage.getItem('header_' + this.nameLocalStorage)) {
|
|
// localStorage.setItem('headerJson_' + this.nameLocalStorage, JSON.stringify($header));
|
|
// }
|
|
|
|
localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
|
|
},
|
|
deleteInputSearch: function deleteInputSearch(head) {
|
|
this.loadingVueSelect = false;
|
|
this.filtreColSelected[head] = [];
|
|
},
|
|
hanldeSearchInput: function hanldeSearchInput(event, head) {
|
|
this.searchInputHead = head;
|
|
this.searchInputVal = event.target.value;
|
|
},
|
|
selectValCol: function selectValCol() {
|
|
this.filtreColModif++;
|
|
this.searchInputVal = '';
|
|
this.searchInputHead = '';
|
|
},
|
|
endLoadingVueSelect: function endLoadingVueSelect() {
|
|
this.loadingVueSelect = false;
|
|
},
|
|
calculer_nameLocalStorage: function calculer_nameLocalStorage() {
|
|
if (this.apiuri) {
|
|
return this.apiuri.match(/.*page=(.*)/)[1];
|
|
}
|
|
|
|
return '';
|
|
},
|
|
chargerJson: function chargerJson(id) {
|
|
var _this4 = this;
|
|
|
|
this.chargement = true;
|
|
var url = this.apiuri;
|
|
|
|
if (parseInt(id) > 0) {
|
|
url += '&id=' + id;
|
|
} else {
|
|
var config = localStorage.getItem('header_' + this.nameLocalStorage);
|
|
config = recupJson(config);
|
|
|
|
if (config && config.header !== undefined) {
|
|
this.header = config.header;
|
|
|
|
if (config.crayons !== undefined) {
|
|
this.crayons = config.crayons;
|
|
}
|
|
|
|
if (config.classes !== undefined) {
|
|
this.classes = config.classes;
|
|
}
|
|
|
|
if (config.ordreCol !== undefined) {
|
|
this.ordreCol = config.ordreCol;
|
|
}
|
|
|
|
var filtreCol = [];
|
|
|
|
if (config.filtreCol !== undefined) {
|
|
filtreCol = config.filtreCol;
|
|
}
|
|
|
|
var that = this;
|
|
localforage.getItem(that.nameLocalStorage).then(function (data) {
|
|
data = recupJson(data);
|
|
|
|
if (data && data.length) {
|
|
that.table = data;
|
|
|
|
if (data[0].search) {
|
|
that.champ_search = 'search';
|
|
}
|
|
|
|
if (filtreCol !== undefined) {
|
|
that.filtreColType = filtreCol;
|
|
Object.keys(that.filtreColType).forEach(function (col) {
|
|
var Tval = []; // let Tval = [''];
|
|
|
|
that.table.forEach(function (t) {
|
|
var valCol = t[that.champ_search][col];
|
|
|
|
if (Tval.indexOf(valCol) === -1) {
|
|
Tval.push(valCol);
|
|
}
|
|
}); // that.filtreCol.push(col);
|
|
|
|
that.filtreColVal[col] = Tval;
|
|
that.filtreColSelected[col] = [];
|
|
});
|
|
}
|
|
|
|
console.log('fin chargement local forage ');
|
|
}
|
|
|
|
if (that.nomblocajaxreload) {
|
|
ajaxReload(that.nomblocajaxreload);
|
|
}
|
|
}).catch(function (err) {
|
|
console.log(err);
|
|
});
|
|
}
|
|
}
|
|
|
|
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;
|
|
} else {
|
|
_this4.crayons = [];
|
|
}
|
|
|
|
if (config.classes !== undefined) {
|
|
_this4.classes = config.classes;
|
|
} else {
|
|
_this4.classes = [];
|
|
}
|
|
|
|
if (config.ordreCol !== undefined) {
|
|
_this4.ordreCol = config.ordreCol;
|
|
} else {
|
|
_this4.ordreCol = [];
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
localforage.setItem(_this4.nameLocalStorage, JSON.stringify(_this4.table));
|
|
} else {
|
|
_this4.table = data;
|
|
|
|
if (data[0] && data[0].search) {
|
|
_this4.champ_search = 'search';
|
|
}
|
|
}
|
|
|
|
if (config.filtreCol !== undefined) {
|
|
_this4.filtreColType = config.filtreCol;
|
|
_this4.filtreCol = [];
|
|
Object.keys(_this4.filtreColType).forEach(function (col) {
|
|
var Tval = [];
|
|
|
|
_this4.table.forEach(function (t) {
|
|
var valCol = t[_this4.champ_search][col];
|
|
|
|
if (valCol) {
|
|
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;
|
|
var filtreselect = localStorage.getItem('filtreselect_' + _this4.nameLocalStorage);
|
|
var Tfiltres = []; // if (filtreselect) {
|
|
// Tfiltres = JSON.parse(filtreselect);
|
|
// } else if (this.filtreselect) {
|
|
// Tfiltres = recupJson(decodeURIComponent(this.filtreselect));
|
|
// localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(Tfiltres));
|
|
// }
|
|
|
|
if (_this4.filtreselect) {
|
|
Tfiltres = recupJson(decodeURIComponent(_this4.filtreselect));
|
|
localStorage.setItem('filtreselect_' + _this4.nameLocalStorage, JSON.stringify(Tfiltres));
|
|
} else if (filtreselect) {
|
|
Tfiltres = JSON.parse(filtreselect);
|
|
}
|
|
|
|
Tfiltres.forEach(function (col) {
|
|
_this4.filtreColSelected[col.champ] = [].concat(_toConsumableArray(_this4.filtreColSelected[col.champ]), _toConsumableArray(col.valeurs));
|
|
});
|
|
_this4.filtreColModif++;
|
|
_this4.ajaxCrayons = false;
|
|
|
|
if (parseInt(_this4._id) > 0) {
|
|
var _id = parseInt(_this4._id);
|
|
|
|
var parPage = parseInt(_this4.parPage);
|
|
|
|
if (parseInt(parPage)) {
|
|
var ordre = 0;
|
|
Object.values(_this4.table).forEach(function (d, i) {
|
|
if (_id === d.html.id) {
|
|
ordre = i + 1;
|
|
}
|
|
});
|
|
|
|
if (ordre > parPage) {
|
|
var numPage = parseInt(ordre / parPage) + 1;
|
|
_this4.page = numPage;
|
|
}
|
|
}
|
|
|
|
_this4.selectLigne(_id, 'id'); // let url = new URL(window.location);
|
|
// url = url.href.replace('&_id=' + _id, '');
|
|
// history.pushState({}, null, url);
|
|
|
|
}
|
|
|
|
if (_this4.nomblocajaxreload) {
|
|
ajaxReload(_this4.nomblocajaxreload);
|
|
}
|
|
|
|
if (_this4.ordreCol) {
|
|
Object.entries(_this4.ordreCol).forEach(function (_ref5) {
|
|
var _ref6 = _slicedToArray(_ref5, 2),
|
|
col = _ref6[0],
|
|
sens = _ref6[1];
|
|
|
|
_this4.tri(col, sens);
|
|
});
|
|
}
|
|
|
|
$('td.crayon-init').removeClass('crayon-init');
|
|
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);
|
|
this.ordreCol[col] = sens;
|
|
this.saveHeader();
|
|
},
|
|
ordreActif: function ordreActif(col, sens) {
|
|
var i = this.triProps.indexOf(col);
|
|
|
|
if (i !== -1) {
|
|
if (this.triOrders[i] === sens) {
|
|
return 'active';
|
|
}
|
|
}
|
|
},
|
|
resetTri: function resetTri() {
|
|
var _this5 = this;
|
|
|
|
this.loadingVueSelect = false;
|
|
this.table = orderBy(this.table, ['id'], '', this.champ_search);
|
|
this.triOrders = [];
|
|
this.triProps = [];
|
|
this.ordreCol = [];
|
|
Object.keys(this.filtreColType).forEach(function (col) {
|
|
_this5.filtreColSelected[col] = [];
|
|
});
|
|
},
|
|
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);
|
|
}
|
|
}
|
|
},
|
|
genererPDF: function genererPDF() {
|
|
var quoi = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'tableau';
|
|
var $tableau = [];
|
|
Object.values(this[quoi]).forEach(function (d) {
|
|
$tableau.push(d.html);
|
|
});
|
|
var data = {
|
|
fichierpdf: this.fichierpdf,
|
|
namepdf: this.namepdf,
|
|
header: this.header,
|
|
arg: this.argpdf,
|
|
Tdata: $tableau
|
|
};
|
|
var req = $.ajax({
|
|
url: this.pdfuri,
|
|
type: 'POST',
|
|
dataType: 'text',
|
|
data: data
|
|
});
|
|
var that = this;
|
|
req.done(function (urlpdf) {
|
|
if (urlpdf) {
|
|
that.navigate(urlpdf, true);
|
|
}
|
|
});
|
|
},
|
|
navigate: function navigate(href, newTab) {
|
|
var a = document.createElement('a');
|
|
a.href = href;
|
|
|
|
if (newTab) {
|
|
a.setAttribute('target', '_blank');
|
|
}
|
|
|
|
a.click();
|
|
},
|
|
exportCSV: function exportCSV() {
|
|
var _this6 = this;
|
|
|
|
var quoi = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'tableau';
|
|
var $csv = [];
|
|
var $header = [];
|
|
var $tableau = [];
|
|
Object.keys(this.header).forEach(function (k) {
|
|
return $header.push(k);
|
|
});
|
|
$tableau = this[quoi].reduce(function (acc, ligne) {
|
|
var $uneLigne = [];
|
|
Object.values(ligne[_this6.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;
|
|
},
|
|
ordonnerSelect: function ordonnerSelect(a, b) {
|
|
// attention ! le test d'égalité en == et non pas === est voulu tel quel...
|
|
if ((Number.isInteger(a) || parseInt(a) == a) && (Number.isInteger(b) || parseInt(b) == b)) {
|
|
return parseInt(a) - parseInt(b);
|
|
} else {
|
|
var x = toString(a).toLowerCase();
|
|
var y = toString(b).toLowerCase();
|
|
|
|
if (x < y) {
|
|
return -1;
|
|
}
|
|
|
|
if (x > y) {
|
|
return 1;
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
}
|
|
},
|
|
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 fas fa-eraser rouge\"></i>\n\t\t\t\t<i class=\"fa fa-filter fas\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"btn var_gamutable\" type=\"button\" @click.stop=\"chargerJson()\"\n\t\t\t\ttitle=\"Forcer le rechargement\">\n\t\t\t\t<i class=\"fa fa-refresh fas fa-sync\"></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<button class=\"btn\" type=\"button\" @click.stop=\"genererPDF()\"\n\t\t\t\tv-show=\"this.fichierpdf\"\n\t\t\t\ttitle=\"G\xE9n\xE9rer le PDF du tableau affich\xE9\"\n\t\t\t>\n\t\t\t\t<i class=\"fas fa-file-pdf rouge\" aria-hidden=\"true\" alt=\"pdf\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV('table')\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau complet en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fas fas fa-file-excel\" aria-hidden=\"true\" alt=\"csv\"></i>\n\t\t\t</button>\n\n\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"genererPDF('table')\"\n\t\t\t\tv-show=\"this.fichierpdf\"\n\t\t\t\ttitle=\"G\xE9n\xE9rer le PDF du tableau complet\"\n\t\t\t>\n\t\t\t\t<i class=\"far fa-file-pdf rouge\" aria-hidden=\"true\" alt=\"pdf\"></i>\n\t\t\t</button>\n\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\t<span class=\"gamutable-nbrMax\" :data-nbrmax=\"table.length\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</span>\n\t\t\t<span class=\"includespip\" v-html=\"this.includespip\"> </span>\n\t\t</div>\n\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=\"gt_labels\">\n\t\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\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\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\t</span>\n\t\t\t\t\t\t</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\" :class=\"classes[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].sort(ordonnerSelect)\"\n\t\t\t\t\t\t\t\t:visible-options=\"filtreColVal_visible[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\tclear-on-close\n\t\t\t\t\t\t\t\tsearchable\n\t\t\t\t\t\t\t\t@selected=\"selectValCol\"\n\t\t\t\t\t\t\t\t@search:focus=\"endLoadingVueSelect\"\n\t\t\t\t\t\t\t\t@removed=\"endLoadingVueSelect\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<template #tag=\"{ option, remove }\">\n\t\t\t\t\t\t\t\t\t<div class=\"tag--un\">\n\t\t\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t\t\t\t\t<span class=\"tag--remove pointer\" title=\"Cliquer pour supprimer \"@click.stop=\"remove\">x</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</template>\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__input--filtrer\"\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@keydown=\"endLoadingVueSelect\"\n\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'input' && filtreColSelected[head].length !== 0\"\n\t\t\t\t\t\t\t\t@click.stop=\"deleteInputSearch(head)\"\n\t\t\t\t\t\t\t\ttitle=\"Vider ce champ\"\n\t\t\t\t\t\t\t\tclass=\"gamutable__input--filtrer\"\n\t\t\t\t\t\t\t>X</button>\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], 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\"> 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\" :class=\"{'on':pageNumber===page}\" v-for=\"pageNumber in pages.slice(page-4 < 0 ? 0 : page-4, page+3)\" @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) {
|
|
var ajaxCrayons = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
this.$refs.montableau.ajaxCrayons = ajaxCrayons;
|
|
this.$refs.montableau.chargerJson(id);
|
|
},
|
|
rechargerJson_deux: function rechargerJson_deux(id) {
|
|
var ajaxCrayons = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
|
|
if (this.$refs.montableau_deux) {
|
|
this.$refs.montableau_deux.ajaxCrayons = ajaxCrayons;
|
|
this.$refs.montableau_deux.chargerJson(id);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var app = Vue.createApp(gamuTable).component('vue-select', window.VueNextSelect).mount('#app'); |