PSR
This commit is contained in:
parent
2ab2b9caa6
commit
e7b9dcbf24
1 changed files with 78 additions and 255 deletions
|
|
@ -4,253 +4,118 @@
|
|||
<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"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<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 rouge"
|
||||
type="button"
|
||||
@click.stop="chargerJson()"
|
||||
title="Rechargement complet du tableau"
|
||||
>
|
||||
<button class="btn var_gamutable rouge" type="button" @click.stop="chargerJson()"
|
||||
title="Rechargement complet du tableau">
|
||||
<i class="fa fa-refresh fas fa-sync-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
class="btn var_gamutable"
|
||||
type="button"
|
||||
@click.stop="chargerJson('maj')"
|
||||
:title="
|
||||
'Mise à jour du tableau - dernière version de la base de donnée le : ' +
|
||||
<button class="btn var_gamutable" type="button" @click.stop="chargerJson('maj')" :title="'Mise à jour du tableau - dernière version de la base de donnée le : ' +
|
||||
dateMaj
|
||||
"
|
||||
>
|
||||
">
|
||||
<i class="fa fa-refresh fas fa-redo-alt"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn gamutable--vueTable"
|
||||
title="Switcher en Vue tableau"
|
||||
@click.stop="changerVue('tableau')"
|
||||
v-if="vuebloc"
|
||||
v-show="quelleVue === 'bloc'"
|
||||
>
|
||||
<button class="btn gamutable--vueTable" title="Switcher en Vue tableau" @click.stop="changerVue('tableau')"
|
||||
v-if="vuebloc" v-show="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="vuebloc"
|
||||
v-show="quelleVue === 'tableau'"
|
||||
>
|
||||
<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc" @click.stop="changerVue('bloc')"
|
||||
v-if="vuebloc" v-show="quelleVue === 'tableau'">
|
||||
<i class="fas fa fa-th-large"></i>
|
||||
</button>
|
||||
<button
|
||||
class="btn gamutable--exportCSV export--affiche"
|
||||
type="button"
|
||||
@click.stop="exportCSV()"
|
||||
v-show="namecsv"
|
||||
title="Exporter le tableau affiché en csv"
|
||||
>
|
||||
<i
|
||||
class="fa fa-file-excel-o fas fa-file-csv"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<button class="btn gamutable--exportCSV export--affiche" type="button" @click.stop="exportCSV()"
|
||||
v-show="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 export--affiche"
|
||||
type="button"
|
||||
@click.stop="genererPDF()"
|
||||
v-show="fichierpdf"
|
||||
title="Générer le PDF du tableau affiché"
|
||||
>
|
||||
<i
|
||||
class="fas fa-file-pdf rouge"
|
||||
aria-hidden="true"
|
||||
alt="pdf"
|
||||
></i>
|
||||
<button class="btn export--affiche" type="button" @click.stop="genererPDF()" v-show="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 export--complet"
|
||||
type="button"
|
||||
@click.stop="exportCSV('table')"
|
||||
v-show="namecsv"
|
||||
title="Exporter le tableau complet en csv"
|
||||
>
|
||||
<i
|
||||
class="fas fas fa-file-excel"
|
||||
aria-hidden="true"
|
||||
alt="csv"
|
||||
></i>
|
||||
<button class="btn gamutable--exportCSV export--complet" type="button" @click.stop="exportCSV('table')"
|
||||
v-show="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 export--complet"
|
||||
type="button"
|
||||
@click.stop="genererPDF('table')"
|
||||
v-show="fichierpdf"
|
||||
title="Générer le PDF du tableau complet"
|
||||
>
|
||||
<i
|
||||
class="far fa-file-pdf rouge"
|
||||
aria-hidden="true"
|
||||
alt="pdf"
|
||||
></i>
|
||||
<button class="btn export--complet" type="button" @click.stop="genererPDF('table')" v-show="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="
|
||||
<i class="
|
||||
fa fa-refresh fa-spin fa-fw
|
||||
rouge
|
||||
fas
|
||||
fa-sync fa-spin
|
||||
"
|
||||
></i>
|
||||
"></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 !"
|
||||
>
|
||||
<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="gamutable-nbrMax" :data-nbrmax="table.length">{{ tableau.length }} / {{ table.length }}
|
||||
éléments</span>
|
||||
<span class="includespip" v-html="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 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]]"
|
||||
>
|
||||
<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>
|
||||
<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 || Object.keys(checkbox).length"
|
||||
class="filtreColonne"
|
||||
>
|
||||
<th
|
||||
v-for="(label, head, i) in header"
|
||||
:key="'filtreCol_' + i"
|
||||
:class="head"
|
||||
>
|
||||
<div
|
||||
v-if="checkbox[head] !== undefined"
|
||||
:id="'filtreCol_' + head"
|
||||
:class="classes[head]"
|
||||
class="flex justify-between"
|
||||
>
|
||||
<input
|
||||
class="ml-2"
|
||||
type="checkbox"
|
||||
@click.stop="validerCheckboxCol(head)"
|
||||
/>
|
||||
<button
|
||||
@click.stop="
|
||||
<tr v-if="filtreCol.length || Object.keys(checkbox).length" class="filtreColonne">
|
||||
<th v-for="(label, head, i) in header" :key="'filtreCol_' + i" :class="head">
|
||||
<div v-if="checkbox[head] !== undefined" :id="'filtreCol_' + head" :class="classes[head]"
|
||||
class="flex justify-between">
|
||||
<input class="ml-2" type="checkbox" @click.stop="validerCheckboxCol(head)" />
|
||||
<button @click.stop="
|
||||
checkboxValider(head, checkbox[head])
|
||||
"
|
||||
>
|
||||
">
|
||||
<i class="fas fa-share-square"></i>
|
||||
</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=""
|
||||
>
|
||||
<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="">
|
||||
<template #tag="{ option, remove }">
|
||||
<div class="tag--un">
|
||||
{{ option }}
|
||||
<span
|
||||
class="tag--remove pointer"
|
||||
title="Cliquer pour supprimer "
|
||||
@click.stop="remove"
|
||||
>x</span
|
||||
>
|
||||
<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=""
|
||||
/>
|
||||
<button
|
||||
v-if="
|
||||
<input v-if="filtreColType[head] === 'input'" class="gamutable__input--filtrer"
|
||||
v-model="filtreColSelected[head]" type="text" placeholder="Rechercher" @keydown="" />
|
||||
<button v-if="
|
||||
filtreColType[head] === 'input' &&
|
||||
filtreColSelected[head].length !== 0
|
||||
"
|
||||
@click.stop="deleteInputSearch(head)"
|
||||
title="Vider ce champ"
|
||||
class="gamutable__input--filtrer"
|
||||
>
|
||||
" @click.stop="deleteInputSearch(head)" title="Vider ce champ" class="gamutable__input--filtrer">
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -258,33 +123,17 @@
|
|||
</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="[
|
||||
<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)"
|
||||
>
|
||||
]" @click="selectLigne(l.html.id, name)">
|
||||
<div v-if="checkbox[name] !== undefined">
|
||||
<div
|
||||
v-if="td.split('-')[0] === 'dataid'"
|
||||
class="text-center"
|
||||
>
|
||||
<div v-if="td.split('-')[0] === 'dataid'" class="text-center">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="Tcheckbox[name]"
|
||||
:value="td.split('-')[1]"
|
||||
/>
|
||||
<input type="checkbox" v-model="Tcheckbox[name]" :value="td.split('-')[1]" />
|
||||
</label>
|
||||
</div>
|
||||
<div v-else v-html="td"></div>
|
||||
|
|
@ -300,52 +149,26 @@
|
|||
</div>
|
||||
<div class="gamutable--pagination">
|
||||
<div class="page-item">
|
||||
<button
|
||||
type="button"
|
||||
class="page-link"
|
||||
v-if="page != 1"
|
||||
@click="page = 1"
|
||||
>
|
||||
<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--"
|
||||
>
|
||||
<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(
|
||||
<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"
|
||||
>
|
||||
)" @click="page = pageNumber">
|
||||
{{ pageNumber }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-item">
|
||||
<button
|
||||
type="button"
|
||||
@click="page++"
|
||||
v-if="page < pages.length"
|
||||
class="page-link"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<button type="button" @click="page = pages.length" v-if="page < pages.length" class="page-link">
|
||||
Dernier
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue