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

grosse amélioration de perf, on rechargement apres crayons / action / cvt, on peut appeler la fonction app.rechargerJson(id) avec un id, pour limiter le recalcule de tout le json

Browse source
This commit is contained in:
Christophe 2020-03-12 20:27:43 +01:00
parent 8a4cf1991e
commit b695e361c6
4 changed files with 80 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
README.md
View file

@ -17,20 +17,21 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
3. Pour utliser **les actions** : 3. Pour utliser **les actions** :
1. dans `json_gamutable.json.html` 1. dans `json_gamutable.json.html`
```html ```html
"statut" : [(#INCLURE{fond=inclure/statut,id_de_mon_objet}|json_encode)], [(#SET{statut,
```
2. dans `inclure/statut.html`, bien ajouter au lien : `class="url_action"`
```html
<BOUCLE_a(SOUSCRIPTIONS){id_souscription}{tout}>
#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}} #SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
<a <a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
class="url_action" [(#STATUT|!={publie}|oui)
href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]"> <i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
#STATUT ]
[(#STATUT|=={publie}|oui)
<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
]
</a> </a>
</BOUCLE_a> })]
"statut" : [(#GET{statut}|json_encode)],
``` ```
> il faut ajouter data-id="" si on veut recharger que cette ligne
4. Pour utiliser **les crayons**, il faut utiliser le pipeline `crayons_vue_affichage_final` 4. Pour utiliser **les crayons**, il faut utiliser le pipeline `crayons_vue_affichage_final`
```php ```php
/** /**

26
js/gamutable.es6.js
View file

@ -6,12 +6,17 @@ jQuery(function() {
$('td').css('cursor', 'wait'); $('td').css('cursor', 'wait');
$('a').css('cursor', 'wait'); $('a').css('cursor', 'wait');
let url = $(this).attr('href'); let url = $(this).attr('href');
let id = $(this).data('id');
console.time('Chargement de VueJs APRES Ajax'); console.time('Chargement de VueJs APRES Ajax');
$.ajax({ $.ajax({
url: url, url: url,
async: true async: true
}).done(function() { }).done(function() {
app.rechargerJson(); if (parseInt(id) > 0) {
app.rechargerJson(id);
} else {
app.rechargerJson();
}
}); });
}); });
@ -132,14 +137,23 @@ let monTableau = {
} }
}, },
methods: { methods: {
chargerJson() { chargerJson(id) {
fetch(this.apiuri) let url = this.apiuri;
if (parseInt(id) > 0) {
url += '&id=' + id;
}
fetch(url)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
let config = data.shift(); let config = data.shift();
this.header = config.header; this.header = config.header;
this.crayons = config.crayons; this.crayons = config.crayons;
this.table = data; if (parseInt(id) > 0) {
let i = this.table.findIndex(ligne => ligne.id === parseInt(id));
Vue.set(this.table, i, data[0]);
} else {
this.table = data;
}
Vue.nextTick(function() { Vue.nextTick(function() {
$('html').css('cursor', 'auto'); $('html').css('cursor', 'auto');
$('td').css('cursor', 'auto'); $('td').css('cursor', 'auto');
@ -243,8 +257,8 @@ let app = new Vue({
el: '#app', el: '#app',
components: { monTableau }, components: { monTableau },
methods: { methods: {
rechargerJson() { rechargerJson(id) {
this.$refs.montableau.chargerJson(); this.$refs.montableau.chargerJson(id);
} }
} }
}); });

33
js/gamutable.js
View file

@ -16,12 +16,17 @@ jQuery(function () {
$('td').css('cursor', 'wait'); $('td').css('cursor', 'wait');
$('a').css('cursor', 'wait'); $('a').css('cursor', 'wait');
var url = $(this).attr('href'); var url = $(this).attr('href');
var id = $(this).data('id');
console.time('Chargement de VueJs APRES Ajax'); console.time('Chargement de VueJs APRES Ajax');
$.ajax({ $.ajax({
url: url, url: url,
async: true async: true
}).done(function () { }).done(function () {
app.rechargerJson(); if (parseInt(id) > 0) {
app.rechargerJson(id);
} else {
app.rechargerJson();
}
}); });
}); });
$('#app').on('click', '.modalbox', function (e) { $('#app').on('click', '.modalbox', function (e) {
@ -153,16 +158,32 @@ var monTableau = {
} }
}, },
methods: { methods: {
chargerJson: function chargerJson() { chargerJson: function chargerJson(id) {
var _this2 = this; var _this2 = this;
fetch(this.apiuri).then(function (response) { var url = this.apiuri;
if (parseInt(id) > 0) {
url += '&id=' + id;
}
fetch(url).then(function (response) {
return response.json(); return response.json();
}).then(function (data) { }).then(function (data) {
var config = data.shift(); var config = data.shift();
_this2.header = config.header; _this2.header = config.header;
_this2.crayons = config.crayons; _this2.crayons = config.crayons;
_this2.table = data;
if (parseInt(id) > 0) {
var i = _this2.table.findIndex(function (ligne) {
return ligne.id === parseInt(id);
});
Vue.set(_this2.table, i, data[0]);
} else {
_this2.table = data;
}
Vue.nextTick(function () { Vue.nextTick(function () {
$('html').css('cursor', 'auto'); $('html').css('cursor', 'auto');
$('td').css('cursor', 'auto'); $('td').css('cursor', 'auto');
@ -228,8 +249,8 @@ var app = new Vue({
monTableau: monTableau monTableau: monTableau
}, },
methods: { methods: {
rechargerJson: function rechargerJson() { rechargerJson: function rechargerJson(id) {
this.$refs.montableau.chargerJson(); this.$refs.montableau.chargerJson(id);
} }
} }
}); });

28
json_gamutable.json.html
View file

@ -1,4 +1,5 @@
#HTTP_HEADER{Content-Type: application/json; charset=#CHARSET} #HTTP_HEADER{Content-Type: application/json; charset=#CHARSET}
[(#ENV{id}|setenv{id_souscription})]
[{ [{
"header":{ "header":{
"id": "_", "id": "_",
@ -21,22 +22,35 @@
"prenom" : "souscription" "prenom" : "souscription"
} }
}, },
<BOUCLE_souscriptions(SOUSCRIPTIONS){','}{0,12}> <BOUCLE_souscriptions(SOUSCRIPTIONS){id_souscription?}{!par id_souscription}{tout}{','}>
[(#SET{statut,
#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
<a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
[(#STATUT|!={publie}|oui)
<i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
]
[(#STATUT|=={publie}|oui)
<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
]
</a>
})]
{ {
"id": #ID_SOUSCRIPTION, "id": #ID_SOUSCRIPTION,
"titre" : [(#TITRE|json_encode)], "modif" : [(#VAL{<a class="modalbox" href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"><i class="fa fa-pencil"></i></a>}|json_encode)],
"date" : [(#DATE|affdate{d/m/Y}|json_encode)], "date" : [(#DATE|affdate{d/m/Y}|json_encode)],
"statut" : [(#INCLURE{fond=js/statut,statut,id_souscription}|json_encode)], "statut" : [(#GET{statut}|json_encode)],
"genre" : [(#GENRE|json_encode)], "genre" : [(#GENRE|json_encode)],
"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)], "nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
"prenom" : [(#PRENOM|json_encode)], "prenom" : [(#PRENOM|json_encode)],
"date_naissance" : [(#DATE_NAISSANCE|affdate{d/m/Y}|json_encode)], "qui": [(#VAL{<a class="mediabox" title="Détail du souscripteur" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,qui})]"><i class="fa fa-address-book"></i></a>}|json_encode)],
"lieu_naissance" : [(#LIEU_NAISSANCE|json_encode)], "nbr" : [(#NOMBRE)],
"representant_legal" : [(#REPRESENTANT_LEGAL|json_encode)], "montant_part" : [(#MONTANT_PART)],
"montant" : [(#MONTANT)],
"prix": [(#VAL{<a class="mediabox" title="Détail de la souscription" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,prix})]"><i class="fa fa-shopping-cart"></i></a>}|json_encode)],
"type" : [(#TYPE|json_encode)], "type" : [(#TYPE|json_encode)],
"email" : [(#VAL{<a href="mailto:#EMAIL" target="_blank">#EMAIL</a>}|json_encode)], "email" : [(#VAL{<a href="mailto:#EMAIL" target="_blank">#EMAIL</a>}|json_encode)],
"telephone" : [(#TELEPHONE|json_encode)], "telephone" : [(#TELEPHONE|json_encode)],
"adresse" : [(#ADRESSE|json_encode)] "ou": [(#VAL{<a class="mediabox" title="Détail des coordonnées" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,adresse})]"><i class="fa fa-address-card"></i></a>}|json_encode)]
} }
</BOUCLE_souscriptions> </BOUCLE_souscriptions>
] ]