1021 lines
28 KiB
JavaScript
1021 lines
28 KiB
JavaScript
jQuery(function () {
|
|
$('#app').on('click', '.url_action', function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
let confirmation = $(this).data('confirm');
|
|
if (confirmation !== undefined) {
|
|
if (!confirm(confirmation)) {
|
|
return;
|
|
}
|
|
}
|
|
let url = $(this).attr('href');
|
|
let 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>');
|
|
}
|
|
let 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 },
|
|
callback: function () {},
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// lancement d'une modalbox
|
|
$('#app').on('click', '.modalbox', function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
let confirmation = $(this).data('confirm');
|
|
if (confirmation !== undefined) {
|
|
if (!confirm(confirmation)) {
|
|
return;
|
|
}
|
|
}
|
|
let url = $(this).attr('href');
|
|
url += '&var_zajax=content';
|
|
let data = {};
|
|
let minHeight = $(this).data('minheight');
|
|
if (minHeight !== undefined) {
|
|
data.minHeight = minHeight;
|
|
}
|
|
let minWidth = $(this).data('minwidth');
|
|
if (minWidth !== undefined) {
|
|
data.minWidth = minWidth;
|
|
}
|
|
let width = $(this).data('width');
|
|
if (width !== undefined) {
|
|
data.width = width;
|
|
let valeur_reduite = ($(window).width() * width) / 100;
|
|
url += '&largeur=' + valeur_reduite + 'px';
|
|
}
|
|
data.onShow = () => {
|
|
if (typeof charger_require !== undefined) {
|
|
charger_require();
|
|
}
|
|
};
|
|
$.modalbox(url, data);
|
|
});
|
|
|
|
// lancement d'une médiabox
|
|
$('#app').on('click', '.mediabox', function (e) {
|
|
e.preventDefault();
|
|
let confirmation = $(this).data('confirm');
|
|
if (confirmation !== undefined) {
|
|
if (!confirm(confirmation)) {
|
|
return;
|
|
}
|
|
}
|
|
let href = $(this).attr('href');
|
|
$.fn.mediabox({ href });
|
|
});
|
|
});
|
|
function recupJson(d) {
|
|
try {
|
|
return JSON.parse(d);
|
|
} catch (e) {
|
|
console.log('erreur recupJson ', e);
|
|
return false;
|
|
}
|
|
}
|
|
const orderBy = (arr, props, orders, champ) =>
|
|
arr.sort((a, b) =>
|
|
props.reduce((acc, prop, i) => {
|
|
if (acc === 0) {
|
|
let [p1, p2] =
|
|
orders && orders[i] === 'desc'
|
|
? [b[champ][prop], a[champ][prop]]
|
|
: [a[champ][prop], b[champ][prop]];
|
|
// 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
|
|
let re = /^(\d{2})\/(\d{2})\/(\d{2,4})$/;
|
|
|
|
if (typeof p1 !== 'number') {
|
|
let r1 = p1.match(re);
|
|
if (Array.isArray(r1)) {
|
|
p1 = r1[3] + r1[2] + r1[1];
|
|
}
|
|
|
|
let 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) {
|
|
let csv = '';
|
|
if (delimitercsv) {
|
|
csv = Papa.unparse(json, { delimiter: delimitercsv });
|
|
} else {
|
|
csv = Papa.unparse(json);
|
|
}
|
|
//Download the file as CSV
|
|
let 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) {
|
|
let i = -1;
|
|
table.forEach((ligne, index) => {
|
|
if (ligne.html.id === parseInt(id)) {
|
|
i = index;
|
|
}
|
|
});
|
|
return i;
|
|
}
|
|
|
|
let monTableau = {
|
|
props: {
|
|
tparpage: {
|
|
type: Array,
|
|
default: function () {
|
|
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 () {
|
|
return {
|
|
table: [],
|
|
header: [],
|
|
crayons: [],
|
|
classes: [],
|
|
checkbox: [],
|
|
Tcheckbox: [],
|
|
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() {
|
|
localforage.setDriver(localforage[this.stockage.toUpperCase()]);
|
|
this.chargerJson();
|
|
if (this.urlvuebloc) {
|
|
fetch(this.urlvuebloc)
|
|
.then((response) => response.text())
|
|
.then((data) => {
|
|
this.vuebloc = data;
|
|
});
|
|
}
|
|
},
|
|
computed: {
|
|
//
|
|
// --------------------
|
|
// ce filtre etait utilisé pour :visible-options de vue-next-select
|
|
// A quoi sert il ?
|
|
// il empeche la recherche dans le select
|
|
// --------------------
|
|
//
|
|
// filtreColVal_visible: function () {
|
|
// let head = this.searchInputHead;
|
|
// let val = this.searchInputVal;
|
|
// console.log('head = ', head);
|
|
// console.log('val = ', val);
|
|
// if (!head) {
|
|
// return this.filtreColVal;
|
|
// } else {
|
|
// let filtreColVal_visible = {};
|
|
// filtreColVal_visible[head] = this.filtreColVal[head].filter((v) => {
|
|
// return v.toString().toLowerCase().indexOf(val.toLowerCase()) !== -1;
|
|
// });
|
|
// return filtreColVal_visible;
|
|
// }
|
|
// },
|
|
tableau: function () {
|
|
this.setPages();
|
|
if (!this.search && !this.filtreColModif) {
|
|
return this.pagination(this.table);
|
|
}
|
|
return this.pagination(
|
|
this.table.filter((ligne) => {
|
|
let rsearch =
|
|
Object.values(ligne[this.champ_search])
|
|
.toString()
|
|
.toLowerCase()
|
|
.indexOf(this.search.toLowerCase()) < 0
|
|
? false
|
|
: true;
|
|
if (!rsearch) {
|
|
return false;
|
|
}
|
|
|
|
Object.keys(this.filtreColSelected).forEach((colName) => {
|
|
if (rsearch) {
|
|
let colValue = this.filtreColSelected[colName];
|
|
if (colValue !== null) {
|
|
if (!Array.isArray(colValue)) {
|
|
colValue = [colValue];
|
|
}
|
|
let TcolValue = [];
|
|
colValue.forEach((s) => {
|
|
if (Number.isInteger(s)) {
|
|
TcolValue.push(s);
|
|
}
|
|
if (s.length > 0) {
|
|
TcolValue.push(s.toLowerCase());
|
|
}
|
|
});
|
|
if (TcolValue.length) {
|
|
if (this.filtreColType[colName] === 'select') {
|
|
let Trsearch = TcolValue.some((uneValeur) => {
|
|
if (Number.isInteger(uneValeur)) {
|
|
if (parseInt(ligne[this.champ_search][colName]) === uneValeur) {
|
|
return true;
|
|
}
|
|
} else {
|
|
if (
|
|
ligne[this.champ_search][colName] !== undefined &&
|
|
!(
|
|
uneValeur.indexOf(
|
|
ligne[this.champ_search][colName]
|
|
.toString()
|
|
.toLowerCase()
|
|
.toString()
|
|
) === -1 ||
|
|
!ligne[this.champ_search][colName].toString().toLowerCase()
|
|
)
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
});
|
|
if (!Trsearch) {
|
|
rsearch = false;
|
|
}
|
|
} else {
|
|
if (
|
|
ligne[this.champ_search][colName]
|
|
.toString()
|
|
.toLowerCase()
|
|
.indexOf(TcolValue.toString()) === -1
|
|
) {
|
|
rsearch = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return rsearch;
|
|
})
|
|
);
|
|
},
|
|
},
|
|
watch: {
|
|
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() {
|
|
this.saveHeader();
|
|
let $table = [];
|
|
$table = this.table;
|
|
localforage.setItem(this.nameLocalStorage, JSON.stringify($table));
|
|
},
|
|
tableau() {
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
// Si on veut filtrer la liste des options dynamique en fonction
|
|
// du tri du tableau
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
if (this.filtrecolmulti === 'non') {
|
|
this.filtreCol.forEach((col) => {
|
|
// let Tval = [''];
|
|
let Tval = [];
|
|
this.tableau.forEach((t) => {
|
|
let valCol = t[this.champ_search][col];
|
|
if (Tval.indexOf(valCol) === -1) {
|
|
Tval.push(valCol);
|
|
this.filtreColValOk = true;
|
|
}
|
|
});
|
|
this.filtreColVal[col] = Tval;
|
|
});
|
|
}
|
|
},
|
|
filtreColSelected: {
|
|
handler() {
|
|
if (!this.loadingVueSelect) {
|
|
let ObfiltreSelect = [];
|
|
if (this.filtreColSelected) {
|
|
Object.entries(this.filtreColSelected).forEach(([champ, valeurs]) => {
|
|
if (!Array.isArray(valeurs)) {
|
|
valeurs = [valeurs];
|
|
}
|
|
ObfiltreSelect.push({ champ, valeurs });
|
|
});
|
|
}
|
|
if (!this.ajaxCrayons) {
|
|
localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(ObfiltreSelect));
|
|
}
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
methods: {
|
|
saveHeader() {
|
|
let $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(head) {
|
|
this.loadingVueSelect = false;
|
|
this.filtreColSelected[head] = [];
|
|
},
|
|
hanldeSearchInput(event, head) {
|
|
this.searchInputHead = head;
|
|
this.searchInputVal = event.target.value;
|
|
},
|
|
selectValCol() {
|
|
this.filtreColModif++;
|
|
this.searchInputVal = '';
|
|
this.searchInputHead = '';
|
|
},
|
|
endLoadingVueSelect() {
|
|
this.loadingVueSelect = false;
|
|
},
|
|
calculer_nameLocalStorage() {
|
|
if (this.apiuri) {
|
|
return this.apiuri.match(/.*page=(.*)/)[1];
|
|
}
|
|
return '';
|
|
},
|
|
chargerJson(id) {
|
|
this.chargement = true;
|
|
let url = this.apiuri;
|
|
if (parseInt(id) > 0) {
|
|
url += '&id=' + id;
|
|
} else {
|
|
let 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.checkbox !== undefined) {
|
|
this.checkbox = config.checkbox;
|
|
Object.keys(this.checkbox).forEach((head) => {
|
|
this.Tcheckbox[head] = [];
|
|
});
|
|
}
|
|
if (config.ordreCol !== undefined) {
|
|
this.ordreCol = config.ordreCol;
|
|
}
|
|
let filtreCol = [];
|
|
if (config.filtreCol !== undefined) {
|
|
filtreCol = config.filtreCol;
|
|
}
|
|
let 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((col) => {
|
|
let Tval = [];
|
|
// let Tval = [''];
|
|
that.table.forEach((t) => {
|
|
let valCol = t[that.champ_search][col];
|
|
if (Tval.indexOf(valCol) === -1) {
|
|
Tval.push(valCol);
|
|
}
|
|
});
|
|
// that.filtreCol.push(col);
|
|
that.filtreColVal[col] = Tval.sort();
|
|
that.filtreColSelected[col] = [];
|
|
});
|
|
}
|
|
console.log('fin chargement local forage ');
|
|
}
|
|
if (that.nomblocajaxreload) {
|
|
ajaxReload(that.nomblocajaxreload);
|
|
}
|
|
})
|
|
.catch(function (err) {
|
|
console.log(err);
|
|
});
|
|
}
|
|
}
|
|
fetch(url)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
let config = data.shift();
|
|
this.header = config.header;
|
|
if (config.crayons !== undefined) {
|
|
this.crayons = config.crayons;
|
|
} else {
|
|
this.crayons = [];
|
|
}
|
|
if (config.classes !== undefined) {
|
|
this.classes = config.classes;
|
|
} else {
|
|
this.classes = [];
|
|
}
|
|
if (config.checkbox !== undefined) {
|
|
this.checkbox = config.checkbox;
|
|
Object.keys(this.checkbox).forEach((head) => {
|
|
this.Tcheckbox[head] = [];
|
|
});
|
|
}
|
|
if (config.ordreCol !== undefined) {
|
|
this.ordreCol = config.ordreCol;
|
|
} else {
|
|
this.ordreCol = [];
|
|
}
|
|
if (parseInt(id) > 0) {
|
|
if (data.length > 0) {
|
|
let i = trouver_index(this.table, id);
|
|
this.table[i] = data[0];
|
|
} else {
|
|
let i = trouver_index(this.table, id);
|
|
this.table.splice(i, 1);
|
|
}
|
|
localforage.setItem(this.nameLocalStorage, JSON.stringify(this.table));
|
|
} else {
|
|
this.table = data;
|
|
if (data[0] && data[0].search) {
|
|
this.champ_search = 'search';
|
|
}
|
|
}
|
|
if (config.filtreCol !== undefined) {
|
|
this.filtreColType = config.filtreCol;
|
|
this.filtreCol = [];
|
|
Object.keys(this.filtreColType).forEach((col) => {
|
|
let Tval = [];
|
|
this.table.forEach((t) => {
|
|
let valCol = t[this.champ_search][col];
|
|
if (valCol) {
|
|
if (Tval.indexOf(valCol) === -1) {
|
|
Tval.push(valCol);
|
|
}
|
|
}
|
|
});
|
|
this.filtreCol.push(col);
|
|
this.filtreColVal[col] = Tval.sort();
|
|
this.filtreColSelected[col] = [];
|
|
});
|
|
}
|
|
|
|
Vue.nextTick(() => {
|
|
this.chargement = false;
|
|
let filtreselect = localStorage.getItem('filtreselect_' + this.nameLocalStorage);
|
|
let 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 (this.filtreselect) {
|
|
Tfiltres = recupJson(decodeURIComponent(this.filtreselect));
|
|
localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(Tfiltres));
|
|
} else if (filtreselect) {
|
|
Tfiltres = JSON.parse(filtreselect);
|
|
}
|
|
|
|
Tfiltres.forEach((col) => {
|
|
this.filtreColSelected[col.champ] = [...this.filtreColSelected[col.champ], ...col.valeurs];
|
|
});
|
|
this.filtreColModif++;
|
|
this.ajaxCrayons = false;
|
|
|
|
if (parseInt(this._id) > 0) {
|
|
let _id = parseInt(this._id);
|
|
let parPage = parseInt(this.parPage);
|
|
if (parseInt(parPage)) {
|
|
let ordre = 0;
|
|
Object.values(this.table).forEach((d, i) => {
|
|
if (_id === d.html.id) {
|
|
ordre = i + 1;
|
|
}
|
|
});
|
|
if (ordre > parPage) {
|
|
let numPage = parseInt(ordre / parPage) + 1;
|
|
this.page = numPage;
|
|
}
|
|
}
|
|
this.selectLigne(_id, 'id');
|
|
// let url = new URL(window.location);
|
|
// url = url.href.replace('&_id=' + _id, '');
|
|
// history.pushState({}, null, url);
|
|
}
|
|
|
|
if (this.nomblocajaxreload) {
|
|
ajaxReload(this.nomblocajaxreload);
|
|
}
|
|
if (this.ordreCol) {
|
|
Object.entries(this.ordreCol).forEach(([col, sens]) => {
|
|
this.tri(col, sens);
|
|
});
|
|
}
|
|
$('td.crayon-init').removeClass('crayon-init');
|
|
console.timeEnd('Chargement de VueJs APRES Ajax');
|
|
});
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
setPages() {
|
|
let nombreDePages = Math.ceil(this.table.length / this.parPage);
|
|
this.pages = [];
|
|
for (let index = 1; index <= nombreDePages; index++) {
|
|
this.pages.push(index);
|
|
}
|
|
},
|
|
pagination(tableau) {
|
|
let page = this.page;
|
|
let parPage = this.parPage;
|
|
let from = page * parPage - parPage;
|
|
let to = page * parPage;
|
|
return tableau.slice(from, to);
|
|
},
|
|
afficher_crayons(name, l) {
|
|
let id = l.crayons !== undefined && l.crayons[name] !== undefined ? l.crayons[name] : l.html.id;
|
|
if (Object.keys(this.crayons).indexOf(name) !== -1) {
|
|
return `crayon ${this.crayons[name]}-${name}-${id}`;
|
|
}
|
|
},
|
|
tri(col, sens = false) {
|
|
const 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(col, sens) {
|
|
const i = this.triProps.indexOf(col);
|
|
if (i !== -1) {
|
|
if (this.triOrders[i] === sens) {
|
|
return 'active';
|
|
}
|
|
}
|
|
},
|
|
resetTri() {
|
|
this.loadingVueSelect = false;
|
|
this.table = orderBy(this.table, ['id'], '', this.champ_search);
|
|
this.triOrders = [];
|
|
this.triProps = [];
|
|
this.ordreCol = [];
|
|
Object.keys(this.filtreColType).forEach((col) => {
|
|
this.filtreColSelected[col] = [];
|
|
});
|
|
},
|
|
selectLigne(id, col) {
|
|
if (col === 'id' && parseInt(id)) {
|
|
let i = this.selectTr.indexOf(id);
|
|
if (i !== -1) {
|
|
this.selectTr.splice(i, 1);
|
|
} else {
|
|
this.selectTr.push(id);
|
|
}
|
|
}
|
|
},
|
|
genererPDF(quoi = 'tableau') {
|
|
let $tableau = [];
|
|
Object.values(this[quoi]).forEach((d) => {
|
|
$tableau.push(d.html);
|
|
});
|
|
|
|
const data = {
|
|
fichierpdf: this.fichierpdf,
|
|
namepdf: this.namepdf,
|
|
header: this.header,
|
|
arg: this.argpdf,
|
|
Tdata: $tableau,
|
|
};
|
|
|
|
let req = $.ajax({
|
|
url: this.pdfuri,
|
|
type: 'POST',
|
|
dataType: 'text',
|
|
data: data,
|
|
});
|
|
let that = this;
|
|
req.done(function (urlpdf) {
|
|
if (urlpdf) {
|
|
that.navigate(urlpdf, true);
|
|
}
|
|
});
|
|
},
|
|
navigate(href, newTab) {
|
|
var a = document.createElement('a');
|
|
a.href = href;
|
|
if (newTab) {
|
|
a.setAttribute('target', '_blank');
|
|
}
|
|
a.click();
|
|
},
|
|
exportCSV(quoi = 'tableau') {
|
|
let $csv = [];
|
|
let $header = [];
|
|
let $tableau = [];
|
|
Object.keys(this.header).forEach((k) => $header.push(k));
|
|
$tableau = this[quoi].reduce((acc, ligne) => {
|
|
let $uneLigne = [];
|
|
Object.values(ligne[this.champcsv]).forEach((l) => $uneLigne.push(l));
|
|
return [...acc, [...$uneLigne]];
|
|
}, []);
|
|
$csv = [[...$header], ...$tableau];
|
|
exporterCSV($csv, this.delimitercsv, this.namecsv);
|
|
},
|
|
replaceBloc(ligne) {
|
|
let html = this.vuebloc;
|
|
Object.keys(ligne).forEach((key) => {
|
|
html = html.replace(`@@${key}@@`, ligne[key]);
|
|
});
|
|
return html;
|
|
},
|
|
changerVue(vue) {
|
|
this.quelleVue = vue;
|
|
},
|
|
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 {
|
|
let x = toString(a).toLowerCase();
|
|
let y = toString(b).toLowerCase();
|
|
if (x < y) {
|
|
return -1;
|
|
}
|
|
if (x > y) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
}
|
|
},
|
|
validerCheckboxCol(head) {
|
|
let tableau = this.tableau;
|
|
if (this.Tcheckbox[head] !== undefined && this.Tcheckbox[head].length) {
|
|
this.Tcheckbox[head] = [];
|
|
} else {
|
|
this.Tcheckbox[head] = [];
|
|
tableau.forEach((d) => {
|
|
this.Tcheckbox[head].push(d.html.id);
|
|
});
|
|
}
|
|
},
|
|
checkboxValider(head, url) {
|
|
let that = this;
|
|
$.ajax({
|
|
url: url,
|
|
data: { data: this.Tcheckbox[head] },
|
|
type: 'POST',
|
|
}).done(function () {
|
|
that.chargerJson();
|
|
});
|
|
},
|
|
},
|
|
template: `
|
|
<div class="gamutable">
|
|
<div class="gamutable--surTable">
|
|
<select id="parPage" v-model="parPageSelect">
|
|
<option v-for="v in tparpage" :key="v">{{v}}</option>
|
|
</select>
|
|
<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher">
|
|
|
|
<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
|
|
title="Réinitialiser les tris des colonnes">
|
|
<i class="fa fas fa-eraser rouge"></i>
|
|
<i class="fa fa-filter fas"></i>
|
|
</button>
|
|
<button class="btn var_gamutable" type="button" @click.stop="chargerJson()"
|
|
title="Forcer le rechargement">
|
|
<i class="fa fa-refresh fas fa-sync"></i>
|
|
</button>
|
|
|
|
<button class="btn gamutable--vueTable" title="Switcher en Vue tableau"
|
|
@click.stop="changerVue('tableau')"
|
|
v-if="this.vuebloc"
|
|
v-show="this.quelleVue === 'bloc'">
|
|
<i class="fas fa fa-table"></i>
|
|
</button>
|
|
|
|
<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc"
|
|
@click.stop="changerVue('bloc')"
|
|
v-if="this.vuebloc"
|
|
v-show="this.quelleVue === 'tableau'">
|
|
<i class="fas fa fa-th-large"></i>
|
|
</button>
|
|
<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV()"
|
|
v-show="this.namecsv"
|
|
title="Exporter le tableau affiché en csv"
|
|
>
|
|
<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
|
|
</button>
|
|
<button class="btn" type="button" @click.stop="genererPDF()"
|
|
v-show="this.fichierpdf"
|
|
title="Générer le PDF du tableau affiché"
|
|
>
|
|
<i class="fas fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
|
|
</button>
|
|
<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV('table')"
|
|
v-show="this.namecsv"
|
|
title="Exporter le tableau complet en csv"
|
|
>
|
|
<i class="fas fas fa-file-excel" aria-hidden="true" alt="csv"></i>
|
|
</button>
|
|
|
|
<button class="btn" type="button" @click.stop="genererPDF('table')"
|
|
v-show="this.fichierpdf"
|
|
title="Générer le PDF du tableau complet"
|
|
>
|
|
<i class="far fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
|
|
</button>
|
|
|
|
<span v-show="chargement" class="rouge">
|
|
<i class="fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin"></i>
|
|
<span class="texteMajBDD">
|
|
Mise à jour de la base de donnée
|
|
</span>
|
|
</span>
|
|
<span v-show="!chargement" class="btn verte" style="cursor:auto;"
|
|
title="Base de donnée synchronisée !"
|
|
>
|
|
<i class="fa fas fa-database"></i>
|
|
</span>
|
|
<span class="gamutable-nbrMax" :data-nbrmax="table.length">{{tableau.length}} / {{table.length}} éléments</span>
|
|
<span class="includespip" v-html="this.includespip"> </span>
|
|
</div>
|
|
|
|
<div class="vueBlocs" v-if="quelleVue === 'bloc'">
|
|
<div class="vueBlocs-unbloc"
|
|
v-for="(ligne) in tableau"
|
|
:key=ligne.id
|
|
v-html=replaceBloc(ligne.html)
|
|
>
|
|
</div>
|
|
</div>
|
|
<table class="table table--zebra" v-if="quelleVue === 'tableau'">
|
|
<thead>
|
|
<tr>
|
|
<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
|
|
<span class="gt_labels">
|
|
<span v-html="label"></span>
|
|
<span class="iconeTri">
|
|
<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
|
|
<i class="fa fa-sort-desc fa-sort-down" :class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')"></i>
|
|
</span>
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
<tr v-if="filtreCol.length" class="filtreColonne">
|
|
<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
|
|
<div v-if="checkbox[head] !== undefined" :id="'filtreCol_'+head" :class="classes[head]">
|
|
<input type="checkbox" @click.stop="validerCheckboxCol(head)" >
|
|
<button @click.stop="checkboxValider(head, checkbox[head])">Valider</button>
|
|
</div>
|
|
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head" :class="classes[head]">
|
|
<vue-select
|
|
v-if="filtreColType[head] === 'select'"
|
|
v-model="filtreColSelected[head]"
|
|
:options="filtreColVal[head].sort(ordonnerSelect)"
|
|
hide-selected
|
|
multiple
|
|
taggable
|
|
close-on-select
|
|
clear-on-close
|
|
searchable
|
|
@selected="selectValCol"
|
|
@search:focus="endLoadingVueSelect"
|
|
@removed="endLoadingVueSelect"
|
|
>
|
|
<template #tag="{ option, remove }">
|
|
<div class="tag--un">
|
|
{{ option }}
|
|
<span class="tag--remove pointer" title="Cliquer pour supprimer "@click.stop="remove">x</span>
|
|
</div>
|
|
</template>
|
|
</vue-select>
|
|
|
|
<input
|
|
v-if="filtreColType[head] === 'input'"
|
|
class="gamutable__input--filtrer"
|
|
v-model="filtreColSelected[head]"
|
|
type="text"
|
|
placeholder="Rechercher"
|
|
@keydown="endLoadingVueSelect"
|
|
|
|
>
|
|
<button
|
|
v-if="filtreColType[head] === 'input' && filtreColSelected[head].length !== 0"
|
|
@click.stop="deleteInputSearch(head)"
|
|
title="Vider ce champ"
|
|
class="gamutable__input--filtrer"
|
|
>X</button>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
|
|
<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name, l), name, classes[name], l.classes !== undefined ? l.classes[name] : '']" @click="selectLigne(l.html.id,name)">
|
|
<div v-if="checkbox[name] !== undefined">
|
|
<label v-if="td.split('-')[0] === 'dataid'">
|
|
<input type='checkbox' v-model='Tcheckbox[name]' :value="td.split('-')[1]">
|
|
</label>
|
|
<div v-else v-html="td"></div>
|
|
</div>
|
|
<div v-else v-html="td"></div>
|
|
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="gamutable--sousTable">
|
|
<div class="gamutable-nbrMax">{{tableau.length}} / {{table.length}} éléments</div>
|
|
<div class="gamutable--pagination">
|
|
<div class="page-item">
|
|
<button type="button" class="page-link" v-if="page != 1" @click="page=1"> Premier </button>
|
|
<button type="button" class="page-link" v-if="page != 1" @click="page--"> Précédent </button>
|
|
</div>
|
|
<div class="page-item">
|
|
<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>
|
|
</div>
|
|
<div class="page-item">
|
|
<button type="button" @click="page++" v-if="page < pages.length" class="page-link"> Suivant </button>
|
|
<button type="button" @click="page=pages.length" v-if="page < pages.length" class="page-link"> Dernier </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`,
|
|
};
|
|
|
|
const gamuTable = {
|
|
components: { monTableau },
|
|
methods: {
|
|
rechargerJson(id, ajaxCrayons = true) {
|
|
this.$refs.montableau.ajaxCrayons = ajaxCrayons;
|
|
this.$refs.montableau.chargerJson(id);
|
|
},
|
|
rechargerJson_deux(id, ajaxCrayons = true) {
|
|
if (this.$refs.montableau_deux) {
|
|
this.$refs.montableau_deux.ajaxCrayons = ajaxCrayons;
|
|
this.$refs.montableau_deux.chargerJson(id);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
|
|
let app = Vue.createApp(gamuTable).component('vue-select', window.VueNextSelect).mount('#app');
|