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(); let confirmation = $(this).data('confirm'); if (confirmation !== undefined) { if (!confirm(confirmation)) { return; } } let url = $(this).attr('href'); let id = $(this).data('id'); let 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 }, 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) { 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, }, champcsv: { type: String, }, delimitercsv: { type: String, }, namecsv: { type: String, }, url_sort_asc: { type: String, }, url_sort_desc: { type: String, }, urlvuebloc: { type: String, }, vueblocdefaut: { type: String, default: 'tableau', }, filtrecolmulti: { type: String, }, }, data: function () { return { table: [], header: [], crayons: [], classes: [], filtreCol: [], filtreColExist: false, filtreColType: [], filtreColSelected: {}, filtreColModif: 0, filtreColVal: {}, search: '', page: 1, parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0], parPageSelect: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0], pages: [], triOrders: [], triProps: [], selectTr: [], champ_search: 'html', chargement: true, nameLocalStorage: this.calculer_nameLocalStorage(), quelleVue: this.vueblocdefaut, vuebloc: '', model: [], options: ['Jest', 'Mocha', 'Selenium', 'Puppeteer', 'Jasmine', 'Karma'], searchInputHead: '', searchInputVal: '', }; }, mounted() { this.chargerJson(); if (this.urlvuebloc) { fetch(this.urlvuebloc) .then((response) => response.text()) .then((data) => { this.vuebloc = data; }); } }, computed: { filtreColVal_visible: function () { let head = this.searchInputHead; let val = this.searchInputVal; if (!head) { return this.filtreColVal; } else { let filtreColVal_visible = {}; filtreColVal_visible[head] = this.filtreColVal[head].filter((v) => { return v.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') { if ( TcolValue.toString().indexOf( ligne[this.champ_search][colName].toString().toLowerCase() ) === -1 ) { 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; } sessionStorage.setItem('nbItems', this.parPage); }, table() { let $table = []; $table = [ ...[ { header: this.header, crayons: this.crayons, classes: this.classes, filtreCol: this.filtreColType, }, ], ...this.table, ]; localStorage.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; }); } }, }, methods: { hanldeSearchInput(event, head) { this.searchInputHead = head; this.searchInputVal = event.target.value; }, selectValCol() { this.filtreColModif++; this.searchInputVal = ''; this.searchInputHead = ''; }, calculer_nameLocalStorage() { if (this.apiuri) { return this.apiuri.match(/.*page=(.*)/)[1]; } return ''; }, chargerJson(id) { let url = this.apiuri; if (parseInt(id) > 0) { url += '&id=' + id; } else { let data = localStorage.getItem(this.nameLocalStorage); data = recupJson(data); if (!data) { localStorage.removeItem(this.nameLocalStorage); data = []; } if (data && data.length) { let config = data.shift(); this.header = config.header; if (config.crayons !== undefined) { this.crayons = config.crayons; } if (config.classes !== undefined) { this.classes = config.classes; } this.table = data; if (config.filtreCol !== undefined) { this.filtreColType = config.filtreCol; Object.keys(this.filtreColType).forEach((col) => { let Tval = []; // let Tval = ['']; this.table.forEach((t) => { let valCol = t[this.champ_search][col]; if (Tval.indexOf(valCol) === -1) { Tval.push(valCol); } }); this.filtreCol.push(col); this.filtreColVal[col] = Tval; this.filtreColSelected[col] = []; }); } if (data.length && data[0].search) { this.champ_search = 'search'; } console.log('fin chargement localStorage'); } } fetch(url) .then((response) => response.json()) .then((data) => { let config = data.shift(); this.header = config.header; if (config.crayons !== undefined) { this.crayons = config.crayons; } if (config.classes !== undefined) { this.classes = config.classes; } 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); } } else { this.table = data; if (data[0] && data[0].search) { this.champ_search = 'search'; } } if (config.filtreCol !== undefined) { this.filtreColType = config.filtreCol; Object.keys(this.filtreColType).forEach((col) => { // let Tval = ['']; 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; this.filtreColSelected[col] = []; }); } Vue.nextTick(() => { this.chargement = false; if ($_id > 0) { this.selectLigne($_id, 'id'); let url = new URL(window.location); url = url.href.replace('&_id=' + $_id, ''); history.pushState({}, null, url); } 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, 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); }, ordreActif(col, sens) { const i = this.triProps.indexOf(col); if (i !== -1) { if (this.triOrders[i] === sens) { return 'active'; } } }, resetTri() { this.table = orderBy(this.table, ['id'], '', this.champ_search); this.triOrders = []; this.triProps = []; }, 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); } } }, exportCSV() { let $csv = []; let $header = []; let $tableau = []; Object.keys(this.header).forEach((k) => $header.push(k)); $tableau = this.tableau.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; }, }, template: `
Mise à jour de la base de donnée {{tableau.length}} / {{table.length}} éléments
{{tableau.length}} / {{table.length}} éléments
`, }; const gamuTable = { components: { monTableau }, methods: { rechargerJson(id) { this.$refs.montableau.chargerJson(id); }, }, }; let app = Vue.createApp(gamuTable).component('vue-select', window.VueNextSelect).mount('#app');