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">
|
<select id="parPage" v-model="parPageSelect">
|
||||||
<option v-for="v in tparpage" :key="v">{{ v }}</option>
|
<option v-for="v in tparpage" :key="v">{{ v }}</option>
|
||||||
</select>
|
</select>
|
||||||
<input
|
<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher" />
|
||||||
class="gamutable--rechercher"
|
|
||||||
type="text"
|
|
||||||
v-model="search"
|
|
||||||
placeholder="Rechercher"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<button
|
<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
|
||||||
class="btn gamutable--resetOrderBy"
|
title="Réinitialiser les tris des colonnes">
|
||||||
type="button"
|
|
||||||
@click.stop="resetTri()"
|
|
||||||
title="Réinitialiser les tris des colonnes"
|
|
||||||
>
|
|
||||||
<i class="fa fas fa-eraser rouge"></i>
|
<i class="fa fas fa-eraser rouge"></i>
|
||||||
<i class="fa fa-filter fas"></i>
|
<i class="fa fa-filter fas"></i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="btn var_gamutable rouge" type="button" @click.stop="chargerJson()"
|
||||||
class="btn var_gamutable rouge"
|
title="Rechargement complet du tableau">
|
||||||
type="button"
|
|
||||||
@click.stop="chargerJson()"
|
|
||||||
title="Rechargement complet du tableau"
|
|
||||||
>
|
|
||||||
<i class="fa fa-refresh fas fa-sync-alt"></i>
|
<i class="fa fa-refresh fas fa-sync-alt"></i>
|
||||||
</button>
|
</button>
|
||||||
<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 : ' +
|
||||||
class="btn var_gamutable"
|
dateMaj
|
||||||
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>
|
<i class="fa fa-refresh fas fa-redo-alt"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button class="btn gamutable--vueTable" title="Switcher en Vue tableau" @click.stop="changerVue('tableau')"
|
||||||
class="btn gamutable--vueTable"
|
v-if="vuebloc" v-show="quelleVue === 'bloc'">
|
||||||
title="Switcher en Vue tableau"
|
|
||||||
@click.stop="changerVue('tableau')"
|
|
||||||
v-if="vuebloc"
|
|
||||||
v-show="quelleVue === 'bloc'"
|
|
||||||
>
|
|
||||||
<i class="fas fa fa-table"></i>
|
<i class="fas fa fa-table"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc" @click.stop="changerVue('bloc')"
|
||||||
class="btn gamutable--vueBloc"
|
v-if="vuebloc" v-show="quelleVue === 'tableau'">
|
||||||
title="Switcher en Vue Bloc"
|
|
||||||
@click.stop="changerVue('bloc')"
|
|
||||||
v-if="vuebloc"
|
|
||||||
v-show="quelleVue === 'tableau'"
|
|
||||||
>
|
|
||||||
<i class="fas fa fa-th-large"></i>
|
<i class="fas fa fa-th-large"></i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="btn gamutable--exportCSV export--affiche" type="button" @click.stop="exportCSV()"
|
||||||
class="btn gamutable--exportCSV export--affiche"
|
v-show="namecsv" title="Exporter le tableau affiché en csv">
|
||||||
type="button"
|
<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
|
||||||
@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>
|
||||||
<button
|
<button class="btn export--affiche" type="button" @click.stop="genererPDF()" v-show="fichierpdf"
|
||||||
class="btn export--affiche"
|
title="Générer le PDF du tableau affiché">
|
||||||
type="button"
|
<i class="fas fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
|
||||||
@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>
|
||||||
<button
|
<button class="btn gamutable--exportCSV export--complet" type="button" @click.stop="exportCSV('table')"
|
||||||
class="btn gamutable--exportCSV export--complet"
|
v-show="namecsv" title="Exporter le tableau complet en csv">
|
||||||
type="button"
|
<i class="fas fas fa-file-excel" aria-hidden="true" alt="csv"></i>
|
||||||
@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>
|
||||||
|
|
||||||
<button
|
<button class="btn export--complet" type="button" @click.stop="genererPDF('table')" v-show="fichierpdf"
|
||||||
class="btn export--complet"
|
title="Générer le PDF du tableau complet">
|
||||||
type="button"
|
<i class="far fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
|
||||||
@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>
|
</button>
|
||||||
|
|
||||||
<span v-show="chargement" class="rouge">
|
<span v-show="chargement" class="rouge">
|
||||||
<i
|
<i class="
|
||||||
class="
|
|
||||||
fa fa-refresh fa-spin fa-fw
|
fa fa-refresh fa-spin fa-fw
|
||||||
rouge
|
rouge
|
||||||
fas
|
fas
|
||||||
fa-sync fa-spin
|
fa-sync fa-spin
|
||||||
"
|
"></i>
|
||||||
></i>
|
|
||||||
<span class="texteMajBDD">
|
<span class="texteMajBDD">
|
||||||
Mise à jour de la base de donnée
|
Mise à jour de la base de donnée
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span v-show="!chargement" class="btn verte" style="cursor: auto" title="Base de donnée synchronisée !">
|
||||||
v-show="!chargement"
|
|
||||||
class="btn verte"
|
|
||||||
style="cursor: auto"
|
|
||||||
title="Base de donnée synchronisée !"
|
|
||||||
>
|
|
||||||
<i class="fa fas fa-database"></i>
|
<i class="fa fas fa-database"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="gamutable-nbrMax" :data-nbrmax="table.length"
|
<span class="gamutable-nbrMax" :data-nbrmax="table.length">{{ tableau.length }} / {{ table.length }}
|
||||||
>{{ tableau.length }} / {{ table.length }} éléments</span
|
éléments</span>
|
||||||
>
|
|
||||||
<span class="includespip" v-html="includespip"> </span>
|
<span class="includespip" v-html="includespip"> </span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vueBlocs" v-if="quelleVue === 'bloc'">
|
<div class="vueBlocs" v-if="quelleVue === 'bloc'">
|
||||||
<div
|
<div class="vueBlocs-unbloc" v-for="ligne in tableau" :key="ligne.id" v-html="replaceBloc(ligne.html)">
|
||||||
class="vueBlocs-unbloc"
|
</div>
|
||||||
v-for="ligne in tableau"
|
|
||||||
:key="ligne.id"
|
|
||||||
v-html="replaceBloc(ligne.html)"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
<table class="table table--zebra" v-if="quelleVue === 'tableau'">
|
<table class="table table--zebra" v-if="quelleVue === 'tableau'">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th
|
<th v-for="(label, head, i) in header" :key="'head_' + i" :class="[head, classes[head]]">
|
||||||
v-for="(label, head, i) in header"
|
|
||||||
:key="'head_' + i"
|
|
||||||
:class="[head, classes[head]]"
|
|
||||||
>
|
|
||||||
<span class="gt_labels">
|
<span class="gt_labels">
|
||||||
<span v-html="label"></span>
|
<span v-html="label"></span>
|
||||||
<span class="iconeTri">
|
<span class="iconeTri">
|
||||||
<i
|
<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true"
|
||||||
class="fa fa-sort-asc fa-sort-up"
|
@click.stop="tri(head, 'asc')"></i>
|
||||||
:class="ordreActif(head, 'asc')"
|
<i class="fa fa-sort-desc fa-sort-down" :class="ordreActif(head, 'desc')"
|
||||||
aria-hidden="true"
|
aria-hidden="true" @click.stop="tri(head, 'desc')"></i>
|
||||||
@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>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr v-if="filtreCol.length || Object.keys(checkbox).length" class="filtreColonne">
|
||||||
v-if="filtreCol.length || Object.keys(checkbox).length"
|
<th v-for="(label, head, i) in header" :key="'filtreCol_' + i" :class="head">
|
||||||
class="filtreColonne"
|
<div v-if="checkbox[head] !== undefined" :id="'filtreCol_' + head" :class="classes[head]"
|
||||||
>
|
class="flex justify-between">
|
||||||
<th
|
<input class="ml-2" type="checkbox" @click.stop="validerCheckboxCol(head)" />
|
||||||
v-for="(label, head, i) in header"
|
<button @click.stop="
|
||||||
:key="'filtreCol_' + i"
|
checkboxValider(head, checkbox[head])
|
||||||
: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>
|
<i class="fas fa-share-square"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_' + head" :class="classes[head]">
|
||||||
v-if="filtreCol.indexOf(head) !== -1"
|
<vue-select v-if="filtreColType[head] === 'select'" v-model="filtreColSelected[head]"
|
||||||
:id="'filtreCol_' + head"
|
:options="filtreColVal[head].sort(ordonnerSelect)
|
||||||
:class="classes[head]"
|
" hide-selected multiple taggable close-on-select clear-on-close searchable @selected="selectValCol"
|
||||||
>
|
@search:focus="">
|
||||||
<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 }">
|
<template #tag="{ option, remove }">
|
||||||
<div class="tag--un">
|
<div class="tag--un">
|
||||||
{{ option }}
|
{{ option }}
|
||||||
<span
|
<span class="tag--remove pointer" title="Cliquer pour supprimer "
|
||||||
class="tag--remove pointer"
|
@click.stop="remove">x</span>
|
||||||
title="Cliquer pour supprimer "
|
|
||||||
@click.stop="remove"
|
|
||||||
>x</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</vue-select>
|
</vue-select>
|
||||||
<input
|
<input v-if="filtreColType[head] === 'input'" class="gamutable__input--filtrer"
|
||||||
v-if="filtreColType[head] === 'input'"
|
v-model="filtreColSelected[head]" type="text" placeholder="Rechercher" @keydown="" />
|
||||||
class="gamutable__input--filtrer"
|
<button v-if="
|
||||||
v-model="filtreColSelected[head]"
|
filtreColType[head] === 'input' &&
|
||||||
type="text"
|
filtreColSelected[head].length !== 0
|
||||||
placeholder="Rechercher"
|
" @click.stop="deleteInputSearch(head)" title="Vider ce champ" class="gamutable__input--filtrer">
|
||||||
@keydown=""
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
v-if="
|
|
||||||
filtreColType[head] === 'input' &&
|
|
||||||
filtreColSelected[head].length !== 0
|
|
||||||
"
|
|
||||||
@click.stop="deleteInputSearch(head)"
|
|
||||||
title="Vider ce champ"
|
|
||||||
class="gamutable__input--filtrer"
|
|
||||||
>
|
|
||||||
X
|
X
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -258,33 +123,17 @@
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr
|
<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''">
|
||||||
v-for="l in tableau"
|
<td v-for="(td, name, i) in l.html" :key="'td_' + i" :class="[
|
||||||
:key="l.html.id"
|
afficher_crayons(name, l),
|
||||||
:class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''"
|
name,
|
||||||
>
|
classes[name],
|
||||||
<td
|
l.classes !== undefined ? l.classes[name] : '',
|
||||||
v-for="(td, name, i) in l.html"
|
]" @click="selectLigne(l.html.id, name)">
|
||||||
: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">
|
<div v-if="checkbox[name] !== undefined">
|
||||||
<div
|
<div v-if="td.split('-')[0] === 'dataid'" class="text-center">
|
||||||
v-if="td.split('-')[0] === 'dataid'"
|
|
||||||
class="text-center"
|
|
||||||
>
|
|
||||||
<label>
|
<label>
|
||||||
<input
|
<input type="checkbox" v-model="Tcheckbox[name]" :value="td.split('-')[1]" />
|
||||||
type="checkbox"
|
|
||||||
v-model="Tcheckbox[name]"
|
|
||||||
:value="td.split('-')[1]"
|
|
||||||
/>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div v-else v-html="td"></div>
|
<div v-else v-html="td"></div>
|
||||||
|
|
@ -300,52 +149,26 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="gamutable--pagination">
|
<div class="gamutable--pagination">
|
||||||
<div class="page-item">
|
<div class="page-item">
|
||||||
<button
|
<button type="button" class="page-link" v-if="page != 1" @click="page = 1">
|
||||||
type="button"
|
|
||||||
class="page-link"
|
|
||||||
v-if="page != 1"
|
|
||||||
@click="page = 1"
|
|
||||||
>
|
|
||||||
Premier
|
Premier
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button type="button" class="page-link" v-if="page != 1" @click="page--">
|
||||||
type="button"
|
|
||||||
class="page-link"
|
|
||||||
v-if="page != 1"
|
|
||||||
@click="page--"
|
|
||||||
>
|
|
||||||
Précédent
|
Précédent
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-item">
|
<div class="page-item">
|
||||||
<button
|
<button type="button" class="page-link" :class="{ on: pageNumber === page }" v-for="pageNumber in pages.slice(
|
||||||
type="button"
|
page - 4 < 0 ? 0 : page - 4,
|
||||||
class="page-link"
|
page + 3
|
||||||
:class="{ on: pageNumber === page }"
|
)" @click="page = pageNumber">
|
||||||
v-for="pageNumber in pages.slice(
|
|
||||||
page - 4 < 0 ? 0 : page - 4,
|
|
||||||
page + 3
|
|
||||||
)"
|
|
||||||
@click="page = pageNumber"
|
|
||||||
>
|
|
||||||
{{ pageNumber }}
|
{{ pageNumber }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-item">
|
<div class="page-item">
|
||||||
<button
|
<button type="button" @click="page++" v-if="page < pages.length" class="page-link">
|
||||||
type="button"
|
|
||||||
@click="page++"
|
|
||||||
v-if="page < pages.length"
|
|
||||||
class="page-link"
|
|
||||||
>
|
|
||||||
Suivant
|
Suivant
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button type="button" @click="page = pages.length" v-if="page < pages.length" class="page-link">
|
||||||
type="button"
|
|
||||||
@click="page = pages.length"
|
|
||||||
v-if="page < pages.length"
|
|
||||||
class="page-link"
|
|
||||||
>
|
|
||||||
Dernier
|
Dernier
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -560,7 +383,7 @@ const tableau = computed(() => {
|
||||||
if (filtreColValeurs[colName]) {
|
if (filtreColValeurs[colName]) {
|
||||||
if (
|
if (
|
||||||
ligne[champ_search.value][
|
ligne[champ_search.value][
|
||||||
colName
|
colName
|
||||||
] !== undefined &&
|
] !== undefined &&
|
||||||
!(
|
!(
|
||||||
ligne[champ_search.value][
|
ligne[champ_search.value][
|
||||||
|
|
@ -570,7 +393,7 @@ const tableau = computed(() => {
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.toString()
|
.toString()
|
||||||
.indexOf(uneValeur) ===
|
.indexOf(uneValeur) ===
|
||||||
-1 ||
|
-1 ||
|
||||||
!ligne[champ_search.value][
|
!ligne[champ_search.value][
|
||||||
colName
|
colName
|
||||||
]
|
]
|
||||||
|
|
@ -583,7 +406,7 @@ const tableau = computed(() => {
|
||||||
} else {
|
} else {
|
||||||
if (
|
if (
|
||||||
ligne[champ_search.value][
|
ligne[champ_search.value][
|
||||||
colName
|
colName
|
||||||
] !== undefined &&
|
] !== undefined &&
|
||||||
!(
|
!(
|
||||||
uneValeur.indexOf(
|
uneValeur.indexOf(
|
||||||
|
|
@ -627,7 +450,7 @@ const tableau = computed(() => {
|
||||||
});
|
});
|
||||||
return pagination(ttt);
|
return pagination(ttt);
|
||||||
});
|
});
|
||||||
function saveTriCol() {}
|
function saveTriCol() { }
|
||||||
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
// les watchers
|
// les watchers
|
||||||
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue