SPIP/gamutable
SPIP/gamutable
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

PSR

Browse source
This commit is contained in:
Christophe 2024-05-20 15:23:00 +02:00
parent b7e2f3ef79
commit 09d6d5a108
1 changed files with 34 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
src/components/gamuTable.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div class="gamutable"> <div class="gamutable">
<div class="gamutable--surTable"> <div class="gamutable--surTable">
<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>
@ -49,14 +50,8 @@
</button> </button>
<span v-show="chargement" class="rouge"> <span v-show="chargement" class="rouge">
<i class=" <i class="gt-spin animate-spin rouge"></i>
gt-spin <span class="texteMajBDD"> Mise à jour de la base de donnée </span>
animate-spin
rouge
"></i>
<span class="texteMajBDD">
Mise à jour de la base de donnée
</span>
</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="gt-database"></i> <i class="gt-database"></i>
@ -90,17 +85,14 @@
<div v-if="checkbox[head] !== undefined" :id="'filtreCol_' + head" :class="classes[head]" <div v-if="checkbox[head] !== undefined" :id="'filtreCol_' + head" :class="classes[head]"
class="flex justify-between"> class="flex justify-between">
<input class="ml-2" type="checkbox" @click.stop="validerCheckboxCol(head)" /> <input class="ml-2" type="checkbox" @click.stop="validerCheckboxCol(head)" />
<button @click.stop=" <button @click.stop="checkboxValider(head, checkbox[head])">
checkboxValider(head, checkbox[head])
">
<i class="gt-check"></i> <i class="gt-check"></i>
</button> </button>
</div> </div>
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_' + head" :class="classes[head]"> <div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_' + head" :class="classes[head]">
<vue-select v-if="filtreColType[head] === 'select'" v-model="filtreColSelected[head]" <vue-select v-if="filtreColType[head] === 'select'" v-model="filtreColSelected[head]"
:options="filtreColVal[head].sort(ordonnerSelect) :options="filtreColVal[head].sort(ordonnerSelect)" hide-selected multiple taggable
" hide-selected multiple taggable close-on-select clear-on-close searchable @selected="selectValCol" close-on-select clear-on-close searchable @selected="selectValCol" @search:focus="">
@search:focus="">
<template #tag="{ option, remove }"> <template #tag="{ option, remove }">
<div class="tag--un"> <div class="tag--un">
{{ option }} {{ option }}
@ -158,7 +150,7 @@
<div class="page-item"> <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 - 4 < 0 ? 0 : page - 4,
page + 3 page + 3,
)" @click="page = pageNumber"> )" @click="page = pageNumber">
{{ pageNumber }} {{ pageNumber }}
</button> </button>
@ -277,18 +269,18 @@ let page = ref(1);
let parPage = ref( let parPage = ref(
sessionStorage.getItem("nbItems") sessionStorage.getItem("nbItems")
? sessionStorage.getItem("nbItems") ? sessionStorage.getItem("nbItems")
: props.tparpage[0] : props.tparpage[0],
); );
let parPageSelect = ref( let parPageSelect = ref(
sessionStorage.getItem("nbItemsChaine") sessionStorage.getItem("nbItemsChaine")
? sessionStorage.getItem("nbItemsChaine") ? sessionStorage.getItem("nbItemsChaine")
: props.tparpage[0] : props.tparpage[0],
); );
let pages = ref([]); let pages = ref([]);
let triOrders = ref([]); let triOrders = ref([]);
let triProps = ref([]); let triProps = ref([]);
let selectTr = ref([]); let selectTr = ref([]);
let champ_search = ref(props.champcsv ?? 'html'); let champ_search = ref(props.champcsv ?? "html");
let chargement = ref(true); let chargement = ref(true);
let quelleVue = ref(props.vueblocdefaut); let quelleVue = ref(props.vueblocdefaut);
let vuebloc = ref(false); let vuebloc = ref(false);
@ -302,8 +294,6 @@ let nameLocalStorage = calculer_nameLocalStorage();
let filtreColValeurs = []; let filtreColValeurs = [];
onMounted(() => { onMounted(() => {
localforage.setDriver(localforage[props.stockage.toUpperCase()]); localforage.setDriver(localforage[props.stockage.toUpperCase()]);
chargerJson("maj"); chargerJson("maj");
@ -367,9 +357,7 @@ const tableau = computed(() => {
let Trsearch = TcolValue.some((uneValeur) => { let Trsearch = TcolValue.some((uneValeur) => {
if (Number.isInteger(uneValeur)) { if (Number.isInteger(uneValeur)) {
if ( if (
parseInt( parseInt(ligne[champ_search.value][colName]) === uneValeur
ligne[champ_search.value][colName]
) === uneValeur
) { ) {
return true; return true;
} }
@ -377,21 +365,14 @@ const tableau = computed(() => {
// on test si on vient d'un filtrage avec recup des valeurs en header // on test si on vient d'un filtrage avec recup des valeurs en header
if (filtreColValeurs[colName]) { if (filtreColValeurs[colName]) {
if ( if (
ligne[champ_search.value][ ligne[champ_search.value][colName] !== undefined &&
colName
] !== undefined &&
!( !(
ligne[champ_search.value][ ligne[champ_search.value][colName]
colName
]
.toString() .toString()
.toLowerCase() .toLowerCase()
.toString() .toString()
.indexOf(uneValeur) === .indexOf(uneValeur) === -1 ||
-1 || !ligne[champ_search.value][colName]
!ligne[champ_search.value][
colName
]
.toString() .toString()
.toLowerCase() .toLowerCase()
) )
@ -400,21 +381,15 @@ const tableau = computed(() => {
} }
} else { } else {
if ( if (
ligne[champ_search.value][ ligne[champ_search.value][colName] !== undefined &&
colName
] !== undefined &&
!( !(
uneValeur.indexOf( uneValeur.indexOf(
ligne[champ_search.value][ ligne[champ_search.value][colName]
colName
]
.toString() .toString()
.toLowerCase() .toLowerCase()
.toString() .toString(),
) === -1 || ) === -1 ||
!ligne[champ_search.value][ !ligne[champ_search.value][colName]
colName
]
.toString() .toString()
.toLowerCase() .toLowerCase()
) )
@ -492,23 +467,21 @@ watch(
() => { () => {
let ObfiltreSelect = []; let ObfiltreSelect = [];
if (filtreColSelected.value) { if (filtreColSelected.value) {
Object.entries(filtreColSelected.value).forEach( Object.entries(filtreColSelected.value).forEach(([champ, valeurs]) => {
([champ, valeurs]) => { if (!Array.isArray(valeurs)) {
if (!Array.isArray(valeurs)) { valeurs = [valeurs];
valeurs = [valeurs];
}
ObfiltreSelect.push({ champ, valeurs });
} }
); ObfiltreSelect.push({ champ, valeurs });
});
} }
if (!ajaxCrayons) { if (!ajaxCrayons) {
localStorage.setItem( localStorage.setItem(
"filtreselect_" + nameLocalStorage, "filtreselect_" + nameLocalStorage,
JSON.stringify(ObfiltreSelect) JSON.stringify(ObfiltreSelect),
); );
} }
}, },
{ deep: true } { deep: true },
); );
//~~~~~~~~~~~~~~~~~~~~~~~~~ //~~~~~~~~~~~~~~~~~~~~~~~~~
@ -674,19 +647,15 @@ function chargerJson(id) {
nextTick(() => { nextTick(() => {
chargement.value = false; chargement.value = false;
const filtreselectLS = localStorage.getItem( const filtreselectLS = localStorage.getItem(
"filtreselect_" + nameLocalStorage "filtreselect_" + nameLocalStorage,
);
const triColLS = localStorage.getItem(
"triCol_" + nameLocalStorage
); );
const triColLS = localStorage.getItem("triCol_" + nameLocalStorage);
let Tfiltres = []; let Tfiltres = [];
if (props.filtreselect) { if (props.filtreselect) {
props.filtreselect.split(",").forEach((unFiltre) => { props.filtreselect.split(",").forEach((unFiltre) => {
const [champ, ...valeurs] = unFiltre.split("|"); const [champ, ...valeurs] = unFiltre.split("|");
const index = Tfiltres.findIndex( const index = Tfiltres.findIndex((col) => col.champ === champ);
(col) => col.champ === champ
);
if (index === -1) { if (index === -1) {
Tfiltres.push({ champ, valeurs }); Tfiltres.push({ champ, valeurs });
} else { } else {
@ -695,7 +664,7 @@ function chargerJson(id) {
}); });
localStorage.setItem( localStorage.setItem(
"filtreselect_" + nameLocalStorage, "filtreselect_" + nameLocalStorage,
JSON.stringify(Tfiltres) JSON.stringify(Tfiltres),
); );
} else if (filtreselectLS) { } else if (filtreselectLS) {
Tfiltres = JSON.parse(filtreselectLS); Tfiltres = JSON.parse(filtreselectLS);
@ -723,10 +692,7 @@ function chargerJson(id) {
tri(col, sens); tri(col, sens);
} }
}); });
localStorage.setItem( localStorage.setItem("triCol_" + nameLocalStorage, trierVal);
"triCol_" + nameLocalStorage,
trierVal
);
} else if (triColLS) { } else if (triColLS) {
triColLS.split(",").forEach((unTri) => { triColLS.split(",").forEach((unTri) => {
const [col, sens] = unTri.split("|"); const [col, sens] = unTri.split("|");
@ -791,9 +757,7 @@ function selectValCol() {
// } // }
function calculer_nameLocalStorage() { function calculer_nameLocalStorage() {
if (props.apiuri) { if (props.apiuri) {
return ( return props.apiuri.match(/.*page=(.*)/)[1] + "&gamuId=" + props.id_auteur;
props.apiuri.match(/.*page=(.*)/)[1] + "&gamuId=" + props.id_auteur
);
} }
return ""; return "";
} }
@ -827,7 +791,7 @@ function tri(col, sens = false) {
table.value, table.value,
triProps.value, triProps.value,
triOrders.value, triOrders.value,
champ_search.value champ_search.value,
); );
ordreCol.value[col] = sens; ordreCol.value[col] = sens;
saveHeader(); saveHeader();
@ -946,9 +910,7 @@ function checkboxValider(head, url) {
chargerJson("maj"); chargerJson("maj");
}); });
} else { } else {
const Tcheck = encodeURIComponent( const Tcheck = encodeURIComponent(JSON.stringify(Tcheckbox.value[head]));
JSON.stringify(Tcheckbox.value[head])
);
url += "&data=" + Tcheck; url += "&data=" + Tcheck;
url += "&var_zajax=content"; url += "&var_zajax=content";
const data = {}; const data = {};