726 lines
No EOL
27 KiB
JavaScript
726 lines
No EOL
27 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');
|
|
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;
|
|
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
|
|
},
|
|
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: [],
|
|
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('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'],
|
|
searchInputHead: '',
|
|
searchInputVal: ''
|
|
};
|
|
},
|
|
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') {
|
|
if (TcolValue.toString().indexOf(ligne[_this2.champ_search][colName].toString().toLowerCase()) === -1 || !ligne[_this2.champ_search][colName].toString().toLowerCase()) {
|
|
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 = [];
|
|
var $header = {
|
|
header: this.header,
|
|
crayons: this.crayons,
|
|
classes: this.classes,
|
|
filtreCol: this.filtreColType
|
|
};
|
|
localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
|
|
$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;
|
|
});
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
hanldeSearchInput: function hanldeSearchInput(event, head) {
|
|
this.searchInputHead = head;
|
|
this.searchInputVal = event.target.value;
|
|
},
|
|
selectValCol: function selectValCol() {
|
|
this.filtreColModif++;
|
|
this.searchInputVal = '';
|
|
this.searchInputHead = '';
|
|
},
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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) {
|
|
// let Tval = [''];
|
|
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;
|
|
|
|
if (_this4.filtreselect) {
|
|
var Tfiltres = recupJson(_this4.filtreselect);
|
|
Tfiltres.forEach(function (col) {
|
|
_this4.filtreColSelected[col.champ] = [].concat(_toConsumableArray(_this4.filtreColSelected[col.champ]), _toConsumableArray(col.valeurs));
|
|
});
|
|
_this4.filtreColModif++;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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 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\"></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\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]\"\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:input=\"hanldeSearchInput($event, head)\"\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--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], 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) {
|
|
this.$refs.montableau.chargerJson(id);
|
|
}
|
|
}
|
|
};
|
|
var app = Vue.createApp(gamuTable).component('vue-select', window.VueNextSelect).mount('#app'); |