merge à la mano car ne fonctionne pas sur vue3 avec filtre col
This commit is contained in:
parent
b56cbcaa2f
commit
f2e71de02f
11 changed files with 13902 additions and 10942 deletions
|
|
@ -15,6 +15,8 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
|
|||
tparpage=[15,25,50,'Tous'],
|
||||
champcsv="search",
|
||||
delimitercsv=";",
|
||||
urlvuebloc=spip.php?page=mon_bloc_type_html,
|
||||
vueblocdefaut='bloc ou tableau', // par defaut tableau
|
||||
namecsv="souscripteurs.csv",
|
||||
url_sort_asc="#CHEMIN{...}"
|
||||
url_sort_desc="#CHEMIN{...}"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
.gamutable--surTable select,
|
||||
.gamutable--surTable input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gamutable--sousTable {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -10,6 +15,14 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.gamutable table {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.gamutable table thead {
|
||||
border: 1px solid #777777;
|
||||
}
|
||||
|
||||
.gamutable table th > div {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -47,8 +60,12 @@ th.icone {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
td.icone {
|
||||
/*padding: 0;*/
|
||||
tr.filtreColonne th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tr.filtreColonne th select {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
td.icone > * {
|
||||
|
|
@ -58,8 +75,34 @@ td.icone > * {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
div.gamutable .url_action {
|
||||
padding: 0.2rem;
|
||||
display: inline-block;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #cecece;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
div.gamutable .url_action:hover {
|
||||
background-color: #cecece;
|
||||
}
|
||||
|
||||
td.icone i {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.vueBlocs {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vueBlocs-unbloc {
|
||||
width: 23%;
|
||||
border: 1px solid #cecece;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=gamutable.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EAGE,oBAAa;EAAb,aAAa;ACAf;;ADHA;EAME,oBAAY;MAAZ,YAAY;ACCd;;ADPA;EASE,YAAY;EACZ,WAAW;ACEb;;ADZA;EAcE,eAAe;EACf,aAAa;ACEf;;ADjBA;EAkBE,UAAU;ACGZ;;ADAA;EACC,0CAA0C;ACG3C;;ADAA;EACC,eAAe;ACGhB;;ADAA;EACC,WAAW;EACX,kBAAkB;ACGnB;;ADDA;EACC,cAAA;ACID;;ADDA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACInB;;ADFA;EACC,iBAAiB;ACKlB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\t//font-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n",".gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntd.icone {\n /*padding: 0;*/\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n"]}
|
||||
{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;;EAGE,gBAAgB;ACAlB;;ADGA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACA/B;;ADEA;EACC,oBAAa;EAAb,aAAa;ACCd;;ADEA;EACC,eAAe;ACChB;;ADFA;EAGE,yBAAoC;ACGtC;;ADNA;EAME,oBAAa;EAAb,aAAa;ACIf;;ADVA;EASE,oBAAY;MAAZ,YAAY;ACKd;;ADdA;EAYE,YAAY;EACZ,WAAW;ACMb;;ADnBA;EAiBE,eAAe;EACf,aAAa;ACMf;;ADxBA;EAqBE,UAAU;ACOZ;;ADJA;EACC,0CAA0C;ACO3C;;ADJA;EACC,eAAe;ACOhB;;ADJA;EACC,WAAW;EACX,kBAAkB;ACOnB;;ADJA;EACC,UAAU;ACOX;;ADRA;EAGE,SAAS;ACSX;;ADLA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACQnB;;ADNA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACSnB;;ADdA;EAOE,yBAAyB;ACW3B;;ADPA;EACC,iBAAiB;ACUlB;;ADPA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACUhB;;ADRA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACWnB","file":"gamutable.css","sourcesContent":[".gamutable--surTable {\n\tselect,\n\tinput {\n\t\tmargin-bottom: 0;\n\t}\n}\n.gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tthead {\n\t\tborder: 1px solid rgb(119, 119, 119);\n\t}\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\n\ntr.filtreColonne th {\n\tpadding: 0;\n\tselect {\n\t\tmargin: 0;\n\t}\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ndiv.gamutable .url_action {\n\tpadding: 0.2rem;\n\tdisplay: inline-block;\n\tbackground-color: #f5f5f5;\n\tborder: 1px solid #cecece;\n\tborder-radius: 5px;\n\t&:hover {\n\t\tbackground-color: #cecece;\n\t}\n}\n\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n\n.vueBlocs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n.vueBlocs-unbloc {\n\twidth: 23%;\n\tborder: 1px solid #cecece;\n\tmargin-bottom: 1rem;\n\tmargin-right: 1rem;\n}\n",".gamutable--surTable select,\n.gamutable--surTable input {\n margin-bottom: 0;\n}\n\n.gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table {\n font-size: 1rem;\n}\n\n.gamutable table thead {\n border: 1px solid #777777;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntr.filtreColonne th {\n padding: 0;\n}\n\ntr.filtreColonne th select {\n margin: 0;\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ndiv.gamutable .url_action {\n padding: 0.2rem;\n display: inline-block;\n background-color: #f5f5f5;\n border: 1px solid #cecece;\n border-radius: 5px;\n}\n\ndiv.gamutable .url_action:hover {\n background-color: #cecece;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n\n.vueBlocs {\n display: flex;\n flex-wrap: wrap;\n}\n\n.vueBlocs-unbloc {\n width: 23%;\n border: 1px solid #cecece;\n margin-bottom: 1rem;\n margin-right: 1rem;\n}\n"]}
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
.gamutable--surTable {
|
||||
select,
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.gamutable--sousTable {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -7,7 +13,10 @@
|
|||
}
|
||||
|
||||
.gamutable table {
|
||||
//font-size: 1rem;
|
||||
font-size: 1rem;
|
||||
thead {
|
||||
border: 1px solid rgb(119, 119, 119);
|
||||
}
|
||||
th > div {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -39,8 +48,12 @@ th.icone {
|
|||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
td.icone {
|
||||
/*padding: 0;*/
|
||||
|
||||
tr.filtreColonne th {
|
||||
padding: 0;
|
||||
select {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td.icone > * {
|
||||
|
|
@ -49,6 +62,28 @@ td.icone > * {
|
|||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
div.gamutable .url_action {
|
||||
padding: 0.2rem;
|
||||
display: inline-block;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #cecece;
|
||||
border-radius: 5px;
|
||||
&:hover {
|
||||
background-color: #cecece;
|
||||
}
|
||||
}
|
||||
|
||||
td.icone i {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.vueBlocs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.vueBlocs-unbloc {
|
||||
width: 23%;
|
||||
border: 1px solid #cecece;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,3 +24,7 @@ function autoriser_gamutable_purger_dist($faire, $type, $id, $qui, $opt) {
|
|||
return autoriser('webmestre');
|
||||
}
|
||||
|
||||
function autoriser_gamutable_modifier_dist($faire, $type, $id, $qui, $opt) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,43 @@
|
|||
<link rel="stylesheet" href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||
[(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})]
|
||||
[(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
|
||||
<span class="crayon xxxx-yyyy-nn"></span>
|
||||
<span class="crayon gamutable-yyyy-nn"></span>
|
||||
<div id="app">
|
||||
<div class="gamutableUn">
|
||||
[<span class="titre titreGamutableUn">(#ENV{titreGamutableUn})</span>]
|
||||
<mon-tableau
|
||||
apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
|
||||
:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
|
||||
champcsv="#ENV{champcsv,html}"
|
||||
delimitercsv="#ENV{delimitercsv,','}"
|
||||
namecsv="#ENV{namecsv,export.csv}"
|
||||
namecsv="#ENV{namecsv}"
|
||||
urlvuebloc="[(#ENV{urlvuebloc})]"
|
||||
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
|
||||
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
|
||||
filtrecolmulti="#ENV{filtrecolmulti,non}"
|
||||
ref="montableau"
|
||||
></mon-tableau>
|
||||
</div>
|
||||
|
||||
<BOUCLE_deux(CONDITION){si #ENV{apiuri_deux}|oui}>
|
||||
<span class="gamutableSep"></span>
|
||||
|
||||
<div class="gamutableDeux">
|
||||
[<span class="titre titreGamutableDeux">(#ENV{titreGamutableDeux})</span>]
|
||||
<mon-tableau
|
||||
apiuri="[(#ENV{apiuri_deux})]"
|
||||
:tparpage="#ENV{tparpage_deux, [10, 20, 50, 'Tous']}"
|
||||
champcsv="[(#ENV{champcsv,html})]"
|
||||
delimitercsv="[(#ENV{delimitercsv,','})]"
|
||||
namecsv="[(#ENV{namecsv_deux})]"
|
||||
urlvuebloc="[(#ENV{urlvuebloc_deux})]"
|
||||
url_sort_asc="[(#ENV{sort_asc,#GET{sort_asc}})]"
|
||||
url_sort_desc="[(#ENV{sort_desc,#GET{sort_desc}})]"
|
||||
filtrecolmulti="[(#ENV{filtrecolmulti,non})]"
|
||||
ref="montableau"
|
||||
></mon-tableau>
|
||||
</div>
|
||||
</BOUCLE_deux>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ jQuery(function () {
|
|||
}
|
||||
let url = $(this).attr('href');
|
||||
let id = $(this).data('id');
|
||||
let nomBlocAjaxReload = $(this).data('ajaxreload');
|
||||
console.time('Chargement de VueJs APRES Ajax');
|
||||
$.ajax({
|
||||
url: url,
|
||||
|
|
@ -25,9 +26,7 @@ jQuery(function () {
|
|||
if (nomBlocAjaxReload !== undefined) {
|
||||
ajaxReload(nomBlocAjaxReload, {
|
||||
args: { id },
|
||||
callback: function () {
|
||||
console.log('couco reload');
|
||||
},
|
||||
callback: function () {},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -137,6 +136,15 @@ function exporterCSV(json, delimitercsv, name) {
|
|||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
function trouver_index(table, id) {
|
||||
let i = -1;
|
||||
table.forEach((ligne, index) => {
|
||||
if (ligne.html.id === parseInt(id)) {
|
||||
i = index;
|
||||
}
|
||||
});
|
||||
return i;
|
||||
}
|
||||
let monTableau = {
|
||||
props: {
|
||||
tparpage: {
|
||||
|
|
@ -164,6 +172,16 @@ let monTableau = {
|
|||
url_sort_desc: {
|
||||
type: String,
|
||||
},
|
||||
urlvuebloc: {
|
||||
type: String,
|
||||
},
|
||||
vueblocdefaut: {
|
||||
type: String,
|
||||
default: 'tableau',
|
||||
},
|
||||
filtrecolmulti: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
|
@ -171,6 +189,10 @@ let monTableau = {
|
|||
header: [],
|
||||
crayons: [],
|
||||
classes: [],
|
||||
filtreCol: [],
|
||||
filtreColSelected: [],
|
||||
filtreColModif: 0,
|
||||
filtreColVal: {},
|
||||
search: '',
|
||||
page: 1,
|
||||
parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
|
||||
|
|
@ -182,26 +204,63 @@ let monTableau = {
|
|||
champ_search: 'html',
|
||||
chargement: true,
|
||||
nameLocalStorage: this.calculer_nameLocalStorage(),
|
||||
quelleVue: this.vueblocdefaut,
|
||||
vuebloc: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.chargerJson();
|
||||
if (this.urlvuebloc) {
|
||||
fetch(this.urlvuebloc)
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
this.vuebloc = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableau: function () {
|
||||
this.setPages();
|
||||
if (!this.search) {
|
||||
if (!this.search && !this.filtreColModif) {
|
||||
return this.pagination(this.table);
|
||||
}
|
||||
return this.pagination(
|
||||
this.table.filter((ligne) =>
|
||||
this.table.filter((ligne) => {
|
||||
let rsearch =
|
||||
Object.values(ligne[this.champ_search])
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.indexOf(this.search.toLowerCase()) < 0
|
||||
? false
|
||||
: true
|
||||
)
|
||||
: true;
|
||||
if (!rsearch) {
|
||||
return false;
|
||||
}
|
||||
Object.keys(this.filtreColSelected).forEach((colName) => {
|
||||
if (rsearch) {
|
||||
let colValue = this.filtreColSelected[colName];
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
if (TcolValue.length) {
|
||||
if (TcolValue.indexOf(ligne.html[colName]) === -1) {
|
||||
rsearch = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return rsearch;
|
||||
})
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
@ -222,16 +281,43 @@ let monTableau = {
|
|||
header: this.header,
|
||||
crayons: this.crayons,
|
||||
classes: this.classes,
|
||||
filtreCol: this.filtreCol,
|
||||
},
|
||||
],
|
||||
...this.table,
|
||||
];
|
||||
localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
|
||||
},
|
||||
tableau() {
|
||||
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
// Si on veut filtrer la liste des options dynamique en fonction
|
||||
// du tri du tableau
|
||||
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
if (this.filtrecolmulti === 'non') {
|
||||
this.filtreCol.forEach((col) => {
|
||||
let Tval = [''];
|
||||
this.tableau.forEach((t) => {
|
||||
let valCol = t.html[col];
|
||||
if (Tval.indexOf(valCol) === -1) {
|
||||
Tval.push(valCol);
|
||||
this.filtreColValOk = true;
|
||||
}
|
||||
});
|
||||
this.filtreColVal[col] = Tval;
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectValCol() {
|
||||
//console.log(this.filtreColSelected);
|
||||
this.filtreColModif++;
|
||||
},
|
||||
calculer_nameLocalStorage() {
|
||||
if (this.apiuri) {
|
||||
return this.apiuri.match(/.*page=(.*)/)[1];
|
||||
}
|
||||
return '';
|
||||
},
|
||||
chargerJson(id) {
|
||||
let url = this.apiuri;
|
||||
|
|
@ -269,11 +355,11 @@ let monTableau = {
|
|||
}
|
||||
if (parseInt(id) > 0) {
|
||||
if (data.length > 0) {
|
||||
let i = this.table.findIndex((ligne) => ligne.html.id === parseInt(id));
|
||||
Vue.set(this.table, i, data[0]);
|
||||
let i = trouver_index(this.table, id);
|
||||
this.table[i] = data[0];
|
||||
} else {
|
||||
let i = this.table.findIndex((ligne) => ligne.html.id === parseInt(id));
|
||||
Vue.delete(this.table, i);
|
||||
let i = trouver_index(this.table, id);
|
||||
this.table.splice(i, 1);
|
||||
}
|
||||
} else {
|
||||
this.table = data;
|
||||
|
|
@ -281,6 +367,19 @@ let monTableau = {
|
|||
this.champ_search = 'search';
|
||||
}
|
||||
}
|
||||
if (config.filtreCol !== undefined) {
|
||||
this.filtreCol = config.filtreCol;
|
||||
this.filtreCol.forEach((col) => {
|
||||
let Tval = [''];
|
||||
this.table.forEach((t) => {
|
||||
let valCol = t.html[col];
|
||||
if (Tval.indexOf(valCol) === -1) {
|
||||
Tval.push(valCol);
|
||||
}
|
||||
});
|
||||
this.filtreColVal[col] = Tval;
|
||||
});
|
||||
}
|
||||
Vue.nextTick(() => {
|
||||
this.chargement = false;
|
||||
if ($_id > 0) {
|
||||
|
|
@ -369,6 +468,16 @@ let monTableau = {
|
|||
$csv = [[...$header], ...$tableau];
|
||||
exporterCSV($csv, this.delimitercsv, this.namecsv);
|
||||
},
|
||||
replaceBloc(ligne) {
|
||||
let html = this.vuebloc;
|
||||
Object.keys(ligne).forEach((key) => {
|
||||
html = html.replace(`@@${key}@@`, ligne[key]);
|
||||
});
|
||||
return html;
|
||||
},
|
||||
changerVue(vue) {
|
||||
this.quelleVue = vue;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div class="gamutable">
|
||||
|
|
@ -377,45 +486,90 @@ let monTableau = {
|
|||
<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()">Réinitialiser les tris des colonnes</button>
|
||||
|
||||
<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
|
||||
title="Réinitialiser les tris des colonnes">
|
||||
<i class="fa fa-repeat fas fa-redo">
|
||||
</button>
|
||||
|
||||
<button class="btn gamutable--vueTable" title="Switcher en Vue tableau"
|
||||
@click.stop="changerVue('tableau')"
|
||||
v-if="this.vuebloc"
|
||||
v-show="this.quelleVue === 'bloc'">
|
||||
<i class="fas fa fa-table">
|
||||
</button>
|
||||
|
||||
<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc"
|
||||
@click.stop="changerVue('bloc')"
|
||||
v-if="this.vuebloc"
|
||||
v-show="this.quelleVue === 'tableau'">
|
||||
<i class="fas fa fa-th-large">
|
||||
</button>
|
||||
<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV()"
|
||||
v-show="this.namecsv"
|
||||
title="Exporter le tableau affiché en csv"
|
||||
>
|
||||
<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
|
||||
</button>
|
||||
<span v-show="chargement" class="rouge">
|
||||
<i class="fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin"></i>
|
||||
<span class="texteMajBDD">
|
||||
Mise à jour de la base de donnée
|
||||
</span>
|
||||
<span v-show="!chargement" class="verte">
|
||||
<i class="fa fa-check"></i>
|
||||
Base de données synchronisée
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
<table class="table table--zebra">
|
||||
<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>
|
||||
<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
|
||||
<div>
|
||||
<div class="label_tete_colonne" v-html="label" @click.stop="tri(head)"></div>
|
||||
<div class="iconeTri">
|
||||
<svg class="tri_col" :class="ordreActif(head, 'asc')" width="1rem" height="1rem" @click.stop="tri(head,'asc')">
|
||||
<title></title>
|
||||
<use :xlink:href="url_sort_asc" />
|
||||
</svg>
|
||||
|
||||
<svg class="tri_col" :class="ordreActif(head, 'desc')" width="1rem" height="1rem" @click.stop="tri(head,'desc')">
|
||||
<title></title>
|
||||
<use :xlink:href="url_sort_desc" />
|
||||
</svg>
|
||||
</div>
|
||||
<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>
|
||||
</span>
|
||||
<span v-html="label"></span>
|
||||
</th>
|
||||
</tr>
|
||||
<tr v-if="filtreCol.length" class="filtreColonne">
|
||||
<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
|
||||
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head">
|
||||
<select class="filtrerCol" v-model="filtreColSelected[head]" v-if="filtrecolmulti !== 'non'" multiple>
|
||||
<option
|
||||
v-for="(option,j) in filtreColVal[head]"
|
||||
:value="option"
|
||||
@click="selectValCol"
|
||||
>
|
||||
{{j === 0 ? "Tous" : option}}
|
||||
</option>
|
||||
</select>
|
||||
<select class="filtrerCol" v-model="filtreColSelected[head]" v-else>
|
||||
<option
|
||||
v-for="(option,j) in filtreColVal[head]"
|
||||
:value="option"
|
||||
@click="selectValCol"
|
||||
>
|
||||
{{j === 0 ? "Tous" : option}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="l in tableau" :key="l.html.id" :id="'id_'+l.html.id" :data-id="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.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']" v-html="td" @click="selectLigne(l.html.id,name)">
|
||||
<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.html.id), name, classes[name]]" v-html="td" @click="selectLigne(l.html.id,name)">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -424,27 +578,28 @@ let monTableau = {
|
|||
<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"> Start </button>
|
||||
<button type="button" class="page-link" v-if="page != 1" @click="page--"> Previous </button>
|
||||
<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" 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>
|
||||
<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>`,
|
||||
};
|
||||
|
||||
let app = new Vue({
|
||||
el: '#app',
|
||||
const gamuTable = {
|
||||
components: { monTableau },
|
||||
methods: {
|
||||
rechargerJson(id) {
|
||||
this.$refs.montableau.chargerJson(id);
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
let app = Vue.createApp(gamuTable).mount('#app');
|
||||
|
|
|
|||
203
js/gamutable.js
203
js/gamutable.js
File diff suppressed because one or more lines are too long
7
js/vue.min.js
vendored
7
js/vue.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
|||
<paquet
|
||||
prefix="gamutable"
|
||||
categorie="outil"
|
||||
version="2.0.3"
|
||||
version="2.0.4"
|
||||
etat="dev"
|
||||
compatibilite="[3.2.0-dev;3.3.*]"
|
||||
logo="prive/themes/spip/images/gamutable-xx.svg"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue