1064 lines
28 KiB
Vue
1064 lines
28 KiB
Vue
<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="gt-eraser rouge"></i>
|
|
<i class="gt-filter"></i>
|
|
</button>
|
|
<button class="btn var_gamutable rouge" type="button" @click.stop="chargerJson()"
|
|
title="Rechargement complet du tableau">
|
|
<i class="gt-refresh"></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 : ' +
|
|
dateMaj
|
|
">
|
|
<i class="gt-refresh"></i>
|
|
</button>
|
|
|
|
<button class="btn gamutable--vueTable" title="Switcher en Vue tableau" @click.stop="changerVue('tableau')"
|
|
v-if="vuebloc" v-show="quelleVue === 'bloc'">
|
|
<i class="gt-table"></i>
|
|
</button>
|
|
|
|
<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc" @click.stop="changerVue('bloc')"
|
|
v-if="vuebloc" v-show="quelleVue === 'tableau'">
|
|
<i class="gt-block"></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="gt-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="gt-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="gt-csv-alt" 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="gt-pdf-alt rouge" aria-hidden="true" alt="pdf"></i>
|
|
</button>
|
|
|
|
<span v-show="chargement" class="rouge">
|
|
<i class="gt-spin animate-spin rouge"></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="gt-database"></i>
|
|
</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>
|
|
|
|
<table class="table table--zebra" v-if="quelleVue === 'tableau'">
|
|
<thead>
|
|
<tr v-if="Object.keys(header_top).length" class="header_top">
|
|
<th v-for="(d, nom_colonne, i) in header_top" :key="'header_top_' + i" :colspan="d.colspan" :class="d.class">
|
|
<span v-html="nom_colonne"></span>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th v-for="(label, head, i) in header" :key="'head_' + i" :class="[head, classes[head], header_class_header_top[i] + '--header_top']">
|
|
<span class="gt_labels">
|
|
<span v-html="label"></span>
|
|
<span class="iconeTri">
|
|
<i class="gt-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true"
|
|
@click.stop="tri(head, 'asc')"></i>
|
|
<i class="gt-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="checkboxValider(head, checkbox[head])">
|
|
<i class="gt-check"></i>
|
|
</button>
|
|
</div>
|
|
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_' + 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>
|
|
</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="
|
|
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">
|
|
<div v-if="td.split('-')[0] === 'dataid'" class="text-center">
|
|
<label>
|
|
<input type="checkbox" v-model="Tcheckbox[name]" :value="td.split('-')[1]" />
|
|
</label>
|
|
</div>
|
|
<div v-else v-html="td"></div>
|
|
</div>
|
|
<div v-else v-html="td"></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr v-if="Object.keys(footer_affiche).length">
|
|
<th v-for="(label, head, i) in header" :key="'footerAffiche_' + i" :class="[head, classes[head]]">
|
|
<div v-html="footer_affiche[head] ?? ''"></div>
|
|
</th>
|
|
</tr>
|
|
<tr v-if="Object.keys(footer_total).length">
|
|
<th v-for="(label, head, i) in header" :key="'footerTotal_' + i" :class="[head, classes[head]]">
|
|
<div v-html="footer_total[head] ?? ''"></div>
|
|
</th>
|
|
</tr>
|
|
</tfoot>
|
|
</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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { watch, ref, onMounted, computed, nextTick, inject } from "vue";
|
|
import VueSelect from "vue-next-select";
|
|
import {
|
|
orderBy,
|
|
ordonnerSelect,
|
|
navigate,
|
|
recupJson,
|
|
trouver_index,
|
|
} from "./helpers";
|
|
const $papa = inject("$papa");
|
|
const props = defineProps({
|
|
tparpage: {
|
|
type: Array,
|
|
default: function () {
|
|
return [10, 20, 50, "Tous"];
|
|
},
|
|
},
|
|
afficher: {
|
|
type: Number,
|
|
},
|
|
trier: {
|
|
type: String,
|
|
},
|
|
apiuri: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
pdfuri: {
|
|
type: String,
|
|
},
|
|
namepdf: {
|
|
type: String,
|
|
},
|
|
fichierpdf: {
|
|
type: String,
|
|
},
|
|
langpdf: {
|
|
type: String,
|
|
},
|
|
argpdf: {
|
|
type: String,
|
|
},
|
|
champcsv: {
|
|
type: String,
|
|
},
|
|
delimitercsv: {
|
|
type: String,
|
|
},
|
|
namecsv: {
|
|
type: String,
|
|
},
|
|
vueblocdefaut: {
|
|
type: String,
|
|
default: "tableau",
|
|
},
|
|
filtrecolmulti: {
|
|
type: String,
|
|
},
|
|
nomblocajaxreload: {
|
|
type: String,
|
|
},
|
|
stockage: {
|
|
type: String,
|
|
},
|
|
includespip: {
|
|
type: String,
|
|
},
|
|
filtrer: {
|
|
type: String,
|
|
},
|
|
htmlvuebloc: {
|
|
type: String,
|
|
},
|
|
_id: {
|
|
type: Number,
|
|
},
|
|
id_auteur: {
|
|
type: Number,
|
|
},
|
|
filtreselect: {
|
|
type: String,
|
|
},
|
|
});
|
|
let table = ref([]);
|
|
let header_top = ref({});
|
|
let header_class_header_top = ref([]);
|
|
let header = ref([]);
|
|
let footer = ref([]);
|
|
let footer_affiche = ref({});
|
|
let footer_total = ref({});
|
|
let crayons = ref([]);
|
|
let classes = ref([]);
|
|
let checkbox = ref([]);
|
|
let Tcheckbox = ref([]);
|
|
let ordreCol = ref([]);
|
|
let filtreCol = ref([]);
|
|
let filtreColType = ref([]);
|
|
let filtreColSelected = ref({});
|
|
let filtreColModif = ref(0);
|
|
let filtreColVal = ref({});
|
|
let search = ref(props.filtrer);
|
|
let page = ref(1);
|
|
let parPage = ref(
|
|
sessionStorage.getItem("nbItems")
|
|
? sessionStorage.getItem("nbItems")
|
|
: props.tparpage[0],
|
|
);
|
|
let parPageSelect = ref(
|
|
sessionStorage.getItem("nbItemsChaine")
|
|
? sessionStorage.getItem("nbItemsChaine")
|
|
: props.tparpage[0],
|
|
);
|
|
let pages = ref([]);
|
|
let triOrders = ref([]);
|
|
let triProps = ref([]);
|
|
let selectTr = ref([]);
|
|
let champ_search = ref(props.champcsv ?? "html");
|
|
let chargement = ref(true);
|
|
let quelleVue = ref(props.vueblocdefaut);
|
|
let vuebloc = ref(props.htmlvuebloc);
|
|
// let loadingVueSelect = ref(true);
|
|
let ajaxCrayons = ref(false);
|
|
let maj = ref("");
|
|
let afficherVal = props.afficher;
|
|
let trierVal = props.trier;
|
|
|
|
let nameLocalStorage = calculer_nameLocalStorage();
|
|
|
|
let filtreColValeurs = [];
|
|
|
|
onMounted(() => {
|
|
localforage.setDriver(localforage[props.stockage.toUpperCase()]);
|
|
chargerJson("maj");
|
|
});
|
|
|
|
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
// Computed
|
|
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
const dateMaj = computed(() => {
|
|
if (maj.value) {
|
|
const [laDate, lHeure] = maj.value.split(" ");
|
|
const [annee, mois, jour] = laDate.split("-");
|
|
const [heure, min, sec] = lHeure.split(":");
|
|
return `${jour}/${mois}/${annee} à ${heure}h${min}min${sec}sec`;
|
|
} else {
|
|
return "";
|
|
}
|
|
});
|
|
|
|
const tableau = computed(() => {
|
|
setPages();
|
|
if (!search.value && !filtreColModif.value) {
|
|
return pagination(table.value);
|
|
}
|
|
let ttt = table.value.filter((ligne) => {
|
|
let rsearch =
|
|
Object.values(ligne[champ_search.value])
|
|
.toString()
|
|
.toLowerCase()
|
|
.indexOf(search.value.toLowerCase()) < 0
|
|
? false
|
|
: true;
|
|
if (!rsearch) {
|
|
return false;
|
|
}
|
|
Object.keys(filtreColSelected.value).forEach((colName) => {
|
|
if (rsearch) {
|
|
let colValue = filtreColSelected.value[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 (filtreColType.value[colName] === "select") {
|
|
let Trsearch = TcolValue.some((uneValeur) => {
|
|
if (Number.isInteger(uneValeur)) {
|
|
if (
|
|
parseInt(ligne[champ_search.value][colName]) === uneValeur
|
|
) {
|
|
return true;
|
|
}
|
|
} else {
|
|
// on test si on vient d'un filtrage avec recup des valeurs en header
|
|
if (filtreColValeurs[colName]) {
|
|
if (
|
|
ligne[champ_search.value][colName] !== undefined &&
|
|
!(
|
|
ligne[champ_search.value][colName]
|
|
.toString()
|
|
.toLowerCase()
|
|
.toString()
|
|
.indexOf(uneValeur) === -1 ||
|
|
!ligne[champ_search.value][colName]
|
|
.toString()
|
|
.toLowerCase()
|
|
)
|
|
) {
|
|
return true;
|
|
}
|
|
} else {
|
|
if (
|
|
ligne[champ_search.value][colName] !== undefined &&
|
|
!(
|
|
uneValeur.indexOf(
|
|
ligne[champ_search.value][colName]
|
|
.toString()
|
|
.toLowerCase()
|
|
.toString(),
|
|
) === -1 ||
|
|
!ligne[champ_search.value][colName]
|
|
.toString()
|
|
.toLowerCase()
|
|
)
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
if (!Trsearch) {
|
|
rsearch = false;
|
|
}
|
|
} else {
|
|
if (
|
|
ligne[champ_search.value][colName]
|
|
.toString()
|
|
.toLowerCase()
|
|
.indexOf(TcolValue.toString()) === -1
|
|
) {
|
|
rsearch = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return rsearch;
|
|
});
|
|
return pagination(ttt);
|
|
});
|
|
|
|
function saveTriCol() { }
|
|
|
|
function majFooterTotal() {
|
|
let r = {};
|
|
footer.value.filter((d) => d.source === 'total')[0]?.champs.forEach((d) => {
|
|
let valeur = 0;
|
|
if (d.fonction === "somme") {
|
|
valeur = footerSomme(d.nom, table.value);
|
|
} else if (d.fonction === "somme_monnaie") {
|
|
valeur = footerSommeMonnaie(d.nom, table.value);
|
|
} else if (d.legende !== undefined) {
|
|
valeur = d.legende ?? 'toto';
|
|
}
|
|
r[d.nom] = valeur
|
|
});
|
|
footer_total.value = r;
|
|
|
|
}
|
|
function majFooterAffiche() {
|
|
let r = {};
|
|
footer.value.filter((d) => d.source === 'affiche')[0]?.champs.forEach((d) => {
|
|
let valeur = 0;
|
|
if (d.fonction === "somme") {
|
|
valeur = footerSomme(d.nom, tableau.value);
|
|
} else if (d.fonction === "somme_monnaie") {
|
|
valeur = footerSommeMonnaie(d.nom, tableau.value);
|
|
} else if (d.legende !== undefined) {
|
|
valeur = d.legende ?? 'toto';
|
|
}
|
|
r[d.nom] = valeur
|
|
});
|
|
footer_affiche.value = r;
|
|
}
|
|
function footerSomme(champ, data) {
|
|
let r = 0;
|
|
data.map((d) => d.search).forEach((d) => {
|
|
Object.entries(d).forEach(([c, v]) => {
|
|
if (c === champ && v) {
|
|
r += v;
|
|
}
|
|
})
|
|
})
|
|
return r;
|
|
}
|
|
|
|
function footerSommeMonnaie(champ, data) {
|
|
let r = 0;
|
|
data.map((d) => d.search).forEach((d) => {
|
|
Object.entries(d).forEach(([c, v]) => {
|
|
if (c === champ && v) {
|
|
r += v;
|
|
}
|
|
})
|
|
})
|
|
const euro = new Intl.NumberFormat('fr-FR', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
minimumFractionDigits: 2
|
|
});
|
|
return euro.format(r);
|
|
}
|
|
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
// les watchers
|
|
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
watch(filtreColSelected, () => {
|
|
saveHeader();
|
|
});
|
|
watch(parPageSelect, (e) => {
|
|
if (!parseInt(e)) {
|
|
parPage.value = table.value.length;
|
|
} else {
|
|
parPage.value = e;
|
|
}
|
|
sessionStorage.setItem("nbItems", parPage.value);
|
|
sessionStorage.setItem("nbItemsChaine", parPageSelect.value);
|
|
});
|
|
watch(table, () => {
|
|
saveHeader();
|
|
localforage.setItem(nameLocalStorage, JSON.stringify(table.value));
|
|
majFooterTotal();
|
|
});
|
|
|
|
watch(tableau, () => {
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
// Si on veut filtrer la liste des options dynamique en fonction
|
|
// du tri du tableau
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
if (props.filtrecolmulti === "non") {
|
|
filtreCol.value.forEach((col) => {
|
|
let Tval = [];
|
|
tableau.value.forEach((t) => {
|
|
let valCol = t[champ_search.value][col];
|
|
if (Tval.indexOf(valCol) === -1) {
|
|
Tval.push(valCol);
|
|
filtreColValOk.value = true;
|
|
}
|
|
});
|
|
filtreColVal.value[col] = Tval;
|
|
});
|
|
}
|
|
majFooterAffiche();
|
|
});
|
|
|
|
watch(
|
|
filtreColSelected,
|
|
() => {
|
|
let ObfiltreSelect = [];
|
|
if (filtreColSelected.value) {
|
|
Object.entries(filtreColSelected.value).forEach(([champ, valeurs]) => {
|
|
if (!Array.isArray(valeurs)) {
|
|
valeurs = [valeurs];
|
|
}
|
|
ObfiltreSelect.push({ champ, valeurs });
|
|
});
|
|
}
|
|
if (!ajaxCrayons) {
|
|
localStorage.setItem(
|
|
"filtreselect_" + nameLocalStorage,
|
|
JSON.stringify(ObfiltreSelect),
|
|
);
|
|
}
|
|
},
|
|
{ deep: true },
|
|
);
|
|
|
|
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
// les methodes
|
|
//~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
function gererConfig(config) {
|
|
header.value = config.header;
|
|
if (config.header_top !== undefined) {
|
|
header_top.value = config.header_top;
|
|
let r = [];
|
|
let i = 0;
|
|
Object.values(config.header_top).forEach((d) => {
|
|
for (let j = 1; j <= d.colspan; j++ ) {
|
|
r[i] = d.class;
|
|
i++;
|
|
}
|
|
})
|
|
header_class_header_top.value = r;
|
|
}
|
|
if (config.footer !== undefined) {
|
|
footer.value = config.footer;
|
|
} else {
|
|
footer.value = [];
|
|
}
|
|
if (config.crayons !== undefined) {
|
|
crayons.value = config.crayons;
|
|
}
|
|
|
|
if (config.maj !== undefined) {
|
|
maj.value = config.maj;
|
|
}
|
|
if (config.classes !== undefined) {
|
|
classes.value = config.classes;
|
|
}
|
|
if (config.checkbox !== undefined) {
|
|
checkbox.value = config.checkbox;
|
|
Object.keys(checkbox.value).forEach((head) => {
|
|
Tcheckbox.value[head] = [];
|
|
});
|
|
}
|
|
if (config.ordreCol !== undefined) {
|
|
ordreCol.value = config.ordreCol;
|
|
}
|
|
let filtreCol = [];
|
|
if (config.filtreCol !== undefined) {
|
|
filtreCol = config.filtreCol;
|
|
}
|
|
if (config.filtreColValeurs !== undefined) {
|
|
filtreColValeurs = config.filtreColValeurs;
|
|
// Object.keys(filtreColVal.value).forEach((col) => {
|
|
// if (filtreColValeurs[col]) {
|
|
// filtreColVal.value[col] = filtreColValeurs[col];
|
|
// }
|
|
// });
|
|
}
|
|
saveHeader();
|
|
return filtreCol;
|
|
}
|
|
|
|
function gererData(data, id = null) {
|
|
if (parseInt(id) > 0) {
|
|
if (data.length > 0) {
|
|
let i = trouver_index(table.value, id);
|
|
//table.value[i] = data[0];
|
|
if (i >= 0) {
|
|
table.value[i] = data[0];
|
|
} else {
|
|
table.value.unshift(data[0]);
|
|
// table.value.push(data[index]);
|
|
}
|
|
} else {
|
|
let i = trouver_index(table.value, id);
|
|
table.value.splice(i, 1);
|
|
}
|
|
} else if (id === "maj") {
|
|
if (data.length) {
|
|
if (data[0] && data[0].search) {
|
|
champ_search.value = "search";
|
|
}
|
|
if (data.length > 0) {
|
|
data.forEach((ligne, index) => {
|
|
let i = trouver_index(table.value, ligne.html.id);
|
|
if (i >= 0) {
|
|
table.value[i] = data[index];
|
|
} else {
|
|
table.value.unshift(data[index]);
|
|
// table.value.push(data[index]);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
table.value = data;
|
|
if (data[0] && data[0].search) {
|
|
champ_search.value = "search";
|
|
}
|
|
}
|
|
localforage.setItem(nameLocalStorage, JSON.stringify(table.value));
|
|
}
|
|
|
|
function filtrerCol(filtreColRecup) {
|
|
if (filtreColRecup !== undefined) {
|
|
filtreColType.value = filtreColRecup;
|
|
filtreCol.value = [];
|
|
Object.keys(filtreColType.value).forEach((col) => {
|
|
filtreCol.value.push(col);
|
|
if (filtreColValeurs[col]) {
|
|
filtreColVal.value[col] = filtreColValeurs[col];
|
|
} else {
|
|
let Tval = [];
|
|
table.value.forEach((t) => {
|
|
let valCol = t[champ_search.value][col];
|
|
if (valCol) {
|
|
if (Tval.indexOf(valCol) === -1) {
|
|
Tval.push(valCol);
|
|
}
|
|
}
|
|
});
|
|
filtreColVal.value[col] = Tval.sort();
|
|
}
|
|
filtreColSelected.value[col] = [];
|
|
});
|
|
}
|
|
}
|
|
function supprimer_ligne(config) {
|
|
if (config.a_supprimer) {
|
|
config.a_supprimer.forEach((id) => {
|
|
let i = trouver_index(table.value, id);
|
|
if (i !== -1) {
|
|
table.value.splice(i, 1);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
function chargerJson(id) {
|
|
console.log("chargerJson pour ", id);
|
|
chargement.value = true;
|
|
let url = props.apiuri;
|
|
if (parseInt(id) > 0) {
|
|
url += "&id=" + id;
|
|
} else {
|
|
let config = localStorage.getItem("header_" + nameLocalStorage);
|
|
config = recupJson(config);
|
|
if (config && config.header !== undefined && table.value.length === 0) {
|
|
console.log("charge LS");
|
|
localforage
|
|
.getItem(nameLocalStorage)
|
|
.then(function (data) {
|
|
data = recupJson(data);
|
|
let filtreColRecup = gererConfig(config);
|
|
table.value = data;
|
|
filtrerCol(filtreColRecup);
|
|
if (props.nomblocajaxreload) {
|
|
ajaxReload(props.nomblocajaxreload);
|
|
}
|
|
})
|
|
.catch(function (err) {
|
|
console.log(err);
|
|
});
|
|
}
|
|
if (id === "maj") {
|
|
if (maj.value) {
|
|
url += "&maj=" + maj.value;
|
|
} else if (config && config.maj) {
|
|
url += "&maj=" + config.maj;
|
|
} else {
|
|
id = null;
|
|
}
|
|
}
|
|
}
|
|
fetch(url)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
let config = data.shift();
|
|
supprimer_ligne(config);
|
|
let filtreColRecup = gererConfig(config);
|
|
gererData(data, id);
|
|
filtrerCol(filtreColRecup);
|
|
|
|
nextTick(() => {
|
|
chargement.value = false;
|
|
const filtreselectLS = localStorage.getItem(
|
|
"filtreselect_" + nameLocalStorage,
|
|
);
|
|
const triColLS = localStorage.getItem("triCol_" + nameLocalStorage);
|
|
|
|
let Tfiltres = [];
|
|
if (props.filtreselect) {
|
|
props.filtreselect.split(",").forEach((unFiltre) => {
|
|
const [champ, ...valeurs] = unFiltre.split("|");
|
|
const index = Tfiltres.findIndex((col) => col.champ === champ);
|
|
if (index === -1) {
|
|
Tfiltres.push({ champ, valeurs });
|
|
} else {
|
|
Tfiltres[index].valeurs.push(valeurs[0]);
|
|
}
|
|
});
|
|
localStorage.setItem(
|
|
"filtreselect_" + nameLocalStorage,
|
|
JSON.stringify(Tfiltres),
|
|
);
|
|
} else if (filtreselectLS) {
|
|
Tfiltres = JSON.parse(filtreselectLS);
|
|
}
|
|
|
|
Tfiltres.forEach((col) => {
|
|
if (filtreCol.value.includes(col.champ)) {
|
|
filtreColSelected.value[col.champ] = [
|
|
...filtreColSelected.value[col.champ],
|
|
...col.valeurs,
|
|
];
|
|
}
|
|
});
|
|
filtreColModif.value++;
|
|
ajaxCrayons = false;
|
|
|
|
if (afficherVal && props.tparpage.includes(afficherVal)) {
|
|
parPageSelect.value = afficherVal;
|
|
}
|
|
|
|
if (trierVal) {
|
|
trierVal.split(",").forEach((unTri) => {
|
|
const [col, sens] = unTri.split("|");
|
|
if (filtreCol.value.includes(col)) {
|
|
tri(col, sens);
|
|
}
|
|
});
|
|
localStorage.setItem("triCol_" + nameLocalStorage, trierVal);
|
|
} else if (triColLS) {
|
|
triColLS.split(",").forEach((unTri) => {
|
|
const [col, sens] = unTri.split("|");
|
|
if (filtreCol.value.includes(col)) {
|
|
tri(col, sens);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (parseInt(props._id) > 0) {
|
|
let _id = parseInt(props._id);
|
|
let parPageL = parseInt(parPage.value);
|
|
if (parseInt(parPageL)) {
|
|
let ordre = 0;
|
|
Object.values(table.value).forEach((d, i) => {
|
|
if (_id === d.html.id) {
|
|
ordre = i + 1;
|
|
}
|
|
});
|
|
if (ordre > parPageL) {
|
|
let numPage = parseInt(ordre / parPageL) + 1;
|
|
page.value = numPage;
|
|
}
|
|
}
|
|
selectLigne(_id, "id");
|
|
}
|
|
|
|
if (props.nomblocajaxreload) {
|
|
ajaxReload(props.nomblocajaxreload);
|
|
}
|
|
if (ordreCol.value) {
|
|
Object.entries(ordreCol.value).forEach(([col, sens]) => {
|
|
tri(col, sens);
|
|
});
|
|
}
|
|
$("td.crayon-init").removeClass("crayon-init");
|
|
});
|
|
})
|
|
.catch((error) => console.log(error));
|
|
}
|
|
function saveHeader() {
|
|
let $header = {
|
|
header: header.value,
|
|
header_top: header_top.value,
|
|
footer: footer.value,
|
|
crayons: crayons.value,
|
|
classes: classes.value,
|
|
filtreCol: filtreColType.value,
|
|
ordreCol: ordreCol.value,
|
|
maj: maj.value,
|
|
};
|
|
localStorage.setItem("header_" + nameLocalStorage, JSON.stringify($header));
|
|
}
|
|
function deleteInputSearch(head) {
|
|
// loadingVueSelect.value = false;
|
|
filtreColSelected.value[head] = [];
|
|
saveHeader();
|
|
}
|
|
function selectValCol() {
|
|
filtreColModif.value++;
|
|
}
|
|
// function endLoadingVueSelect() {
|
|
// loadingVueSelect.value = false;
|
|
// }
|
|
function calculer_nameLocalStorage() {
|
|
if (props.apiuri) {
|
|
return props.apiuri.match(/.*page=(.*)/)[1] + "&gamuId=" + props.id_auteur;
|
|
}
|
|
return "";
|
|
}
|
|
function afficher_crayons(name, l) {
|
|
let id =
|
|
l.crayons !== undefined && l.crayons[name] !== undefined
|
|
? l.crayons[name]
|
|
: l.html.id;
|
|
if (Object.keys(crayons.value).indexOf(name) !== -1) {
|
|
return `crayon ${crayons.value[name]}-${name}-${id}`;
|
|
}
|
|
}
|
|
function tri(col, sens = false) {
|
|
const i = triProps.value.indexOf(col);
|
|
if (i !== -1) {
|
|
if (!sens) {
|
|
sens = "asc";
|
|
if (triOrders.value[i] === "asc") {
|
|
sens = "desc";
|
|
}
|
|
}
|
|
triOrders.value[i] = sens;
|
|
} else {
|
|
if (!sens) {
|
|
sens = "asc";
|
|
}
|
|
triProps.value.push(col);
|
|
triOrders.value.push(sens);
|
|
}
|
|
table.value = orderBy(
|
|
table.value,
|
|
triProps.value,
|
|
triOrders.value,
|
|
champ_search.value,
|
|
);
|
|
ordreCol.value[col] = sens;
|
|
saveHeader();
|
|
}
|
|
function ordreActif(col, sens) {
|
|
const i = triProps.value.indexOf(col);
|
|
if (i !== -1) {
|
|
if (triOrders.value[i] === sens) {
|
|
return "active";
|
|
}
|
|
}
|
|
}
|
|
function resetTri() {
|
|
// loadingVueSelect.value = false;
|
|
table.value = orderBy(table.value, ["id"], "", champ_search.value);
|
|
triOrders.value = [];
|
|
triProps.value = [];
|
|
ordreCol.value = [];
|
|
Object.keys(filtreColType.value).forEach((col) => {
|
|
filtreColSelected.value[col] = [];
|
|
});
|
|
localStorage.removeItem("filtreselect_" + nameLocalStorage);
|
|
localStorage.removeItem("filtreCol_" + nameLocalStorage);
|
|
localStorage.removeItem("triCol_" + nameLocalStorage);
|
|
}
|
|
function selectLigne(id, col) {
|
|
if (col === "id" && parseInt(id)) {
|
|
let i = selectTr.value.indexOf(id);
|
|
if (i !== -1) {
|
|
selectTr.value.splice(i, 1);
|
|
} else {
|
|
selectTr.value.push(id);
|
|
}
|
|
}
|
|
}
|
|
function genererPDF(quoi = "tableau") {
|
|
let $tableau = [];
|
|
let surQuoi = tableau.value;
|
|
if (quoi === "table") {
|
|
surQuoi = table.value;
|
|
}
|
|
Object.values(surQuoi).forEach((d) => {
|
|
$tableau.push(d.html);
|
|
});
|
|
|
|
const data = {
|
|
fichierpdf: props.fichierpdf,
|
|
langpdf: props.langpdf,
|
|
namepdf: props.namepdf,
|
|
header: header.value,
|
|
arg: props.argpdf,
|
|
Tdata: $tableau,
|
|
};
|
|
|
|
let req = $.ajax({
|
|
url: props.pdfuri,
|
|
type: "POST",
|
|
dataType: "text",
|
|
data: data,
|
|
});
|
|
req.done(function (urlpdf) {
|
|
if (urlpdf) {
|
|
navigate(urlpdf, true);
|
|
}
|
|
});
|
|
}
|
|
function exportCSV(quoi = "tableau") {
|
|
let $csv = [];
|
|
let $header = [];
|
|
let $tableau = [];
|
|
let surQuoi = tableau.value;
|
|
if (quoi === "table") {
|
|
surQuoi = table.value;
|
|
}
|
|
Object.keys(header.value).forEach((k) => $header.push(k));
|
|
$tableau = surQuoi.reduce((acc, ligne) => {
|
|
let $uneLigne = [];
|
|
Object.values(ligne[props.champcsv]).forEach((l) => $uneLigne.push(l));
|
|
return [...acc, [...$uneLigne]];
|
|
}, []);
|
|
$csv = [[...$header], ...$tableau];
|
|
exporterCSV($csv, props.delimitercsv, props.namecsv);
|
|
}
|
|
|
|
function replaceBloc(ligne) {
|
|
let html = vuebloc.value;
|
|
Object.keys(ligne).forEach((key) => {
|
|
html = html.replace(`@@${key}@@`, ligne[key]);
|
|
});
|
|
return html;
|
|
}
|
|
function changerVue(vue) {
|
|
quelleVue.value = vue;
|
|
}
|
|
function validerCheckboxCol(head) {
|
|
if (Tcheckbox.value[head] !== undefined && Tcheckbox.value[head].length) {
|
|
Tcheckbox.value[head] = [];
|
|
} else {
|
|
Tcheckbox.value[head] = [];
|
|
tableau.value.forEach((d) => {
|
|
Tcheckbox.value[head].push(d.html.id);
|
|
});
|
|
}
|
|
}
|
|
function checkboxValider(head, url) {
|
|
let typeLien = "page";
|
|
if (url.includes("action=")) {
|
|
typeLien = "action";
|
|
}
|
|
if (typeLien === "action") {
|
|
$.ajax({
|
|
url: url,
|
|
data: { data: Tcheckbox.value[head] },
|
|
type: "POST",
|
|
}).done(function () {
|
|
chargerJson("maj");
|
|
});
|
|
} else {
|
|
const Tcheck = encodeURIComponent(JSON.stringify(Tcheckbox.value[head]));
|
|
url += "&data=" + Tcheck;
|
|
url += "&var_zajax=content";
|
|
const data = {};
|
|
data.onClose = () => {
|
|
chargerJson("maj");
|
|
};
|
|
$.modalbox(url, data);
|
|
}
|
|
}
|
|
|
|
function pagination(tableau) {
|
|
let from = page.value * parPage.value - parPage.value;
|
|
let to = page.value * parPage.value;
|
|
return tableau.slice(from, to);
|
|
}
|
|
|
|
function setPages() {
|
|
let nombreDePages = Math.ceil(table.value.length / parPage.value);
|
|
pages.value = [];
|
|
for (let index = 1; index <= nombreDePages; index++) {
|
|
pages.value.push(index);
|
|
}
|
|
}
|
|
|
|
function exporterCSV(json, delimitercsv, name) {
|
|
if (name.includes(".csv")) {
|
|
name = name.split(".")[0];
|
|
}
|
|
let csv = "";
|
|
if (delimitercsv) {
|
|
csv = $papa.unparse(json, { delimiter: delimitercsv });
|
|
} else {
|
|
csv = $papa.unparse(json);
|
|
}
|
|
$papa.download(csv, name);
|
|
}
|
|
|
|
function rechargerJson(id, ajax_Crayons = true) {
|
|
console.log("rechargerJson");
|
|
ajaxCrayons = ajax_Crayons;
|
|
chargerJson(id);
|
|
}
|
|
|
|
function delLigne(id) {
|
|
if (id < 0) {
|
|
id = id * -1;
|
|
}
|
|
console.log("delLigne : ", id);
|
|
let i = trouver_index(table.value, id);
|
|
if (i !== -1) {
|
|
table.value.splice(i, 1);
|
|
}
|
|
}
|
|
defineExpose({ rechargerJson, delLigne });
|
|
</script>
|