gamutable/js/gamutable.es6.js

jQuery(function() {
	gamutable();
	//onAjaxLoad(gamutable);
	function gamutable() {
		$('#app').on('click', '.url_action', function(e) {
			e.preventDefault();
			e.stopPropagation();
			let url = $(this).attr('href');
			$.ajax({
				url: url,
				async: true
			}).done(function() {
				app.rechargerJson();
			});
		});
	}
});
function recupJson(d) {
	try {
		return JSON.parse(d);
	} catch (e) {
		return [];
	}
}
const orderBy = (arr, props, orders) =>
	arr.sort((a, b) =>
		props.reduce((acc, prop, i) => {
			if (acc === 0) {
				const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
				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');
});

let monTableau = {
	props: {
		tparpage: {
			type: Array,
			default: function() {
				return [10, 20, 50, 'Tous'];
			}
		},
		apiuri: {
			type: String,
			required: true
		},
		objet: {
			type: String
		}
	},
	data: function() {
		return {
			message: `Hello Vue ! `,
			table: [],
			header: [],
			crayons: [],
			search: '',
			page: 1,
			parPage: this.tparpage[0],
			parPageSelect: this.tparpage[0],
			pages: [],
			triOrders: [],
			triProps: []
		};
	},
	mounted() {
		this.chargerJson();
	},
	computed: {
		tableau: function() {
			console.log('computed tableau');
			return this.pagination(
				this.table.filter(ligne => {
					if (this.search) {
						if (!Object.values(ligne).every(el => el.indexOf(this.search))) {
							return ligne;
						}
					} else {
						return ligne;
					}
				})
			);
		}
	},
	watch: {
		tableau() {
			this.setPages();
		},
		parPageSelect(e) {
			if (!parseInt(e)) {
				this.parPage = this.table.length;
			} else {
				this.parPage = e;
			}
		}
	},
	methods: {
		chargerJson() {
			fetch(this.apiuri)
				.then(response => response.json())
				.then(data => {
					let config = data.shift();
					this.header = config.header;
					this.crayons = config.crayons;
					this.table = data;
					Vue.nextTick(function() {
						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) {
			const i = this.triProps.indexOf(col);
			if (i !== -1) {
				this.triOrders[i] = sens;
			} else {
				this.triProps.push(col);
				this.triOrders.push(sens);
			}
			this.table = orderBy(this.table, this.triProps, this.triOrders);
		},
		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.triOrders = [];
			this.triProps = [];
		}
	},
	template: `
	<div>
		<h3> {{ message }}</h3>
		<div class="table">
			<div class="gamutable--surTable">
				<select id="parPage" v-model="parPageSelect">
					<option v-for="v in tparpage" :key="v">{{v}}</option>
				</select>
				<input type="text" v-model="search" placeholder="Rechercher">
				<button class="btn" type="button" @click.stop="resetTri()">Réinitialiser les tris des colonnes</button>
			</div>
			<table class="table table--zebra">
				<thead>
					<tr>
						<th v-for="(head,i) in header" :key="'head_'+i" :class="head">
							{{head}}
							<span class="iconeTri">
								<i class="fa fa-sort-asc" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
								<i class="fa fa-sort-desc":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
							</span>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="l in tableau" :key="l.id">
						<td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td">
							{{td}}
						</td>
					</tr>
				</tbody>
			</table>
			<div class="gamutable--pagination">
				<div>{{table.length}} éléments</div>
				<div class="page-item">
					<button type="button" class="page-link" v-if="page != 1" @click="page=1"> Start </button>
					<button type="button" class="page-link" v-if="page != 1" @click="page--"> Previous </button>
				</div>
				<div class="page-item">
					<button type="button" class="page-link" v-for="pageNumber in pages.slice(page-1, page+5)" @click="page = pageNumber"> {{pageNumber}} </button>
				</div>
				<div class="page-item">
					<button type="button" @click="page++" v-if="page < pages.length" class="page-link"> Next </button>
					<button type="button" @click="page=pages.length" v-if="page < pages.length" class="page-link"> Last </button>
				</div>
			</div>
		</div>
	</div>`
};

let app = new Vue({
	el: '#app',
	components: { monTableau },
	methods: {
		rechargerJson() {
			this.$refs.montableau.chargerJson();
		}
	}
});