146 lines
4.9 KiB
Markdown
146 lines
4.9 KiB
Markdown
# gamutable
|
|
|
|
## Configuration
|
|
Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
|
|
|
|
## Utilisation
|
|
1. Charger l'inclure (5 args possibles et facultatifs)
|
|
```html
|
|
<INCLURE{fond=inclure/gamutable,env}>
|
|
|
|
Ou avec tous les arguments facultatifs
|
|
|
|
<INCLURE{fond=inclure/gamutable,
|
|
apiuri="spip.php?page=json_souscripteurs.json",
|
|
tparpage=[15,25,50,'Tous'],
|
|
champcsv="search",
|
|
delimitercsv=";",
|
|
namecsv="souscripteurs.csv",
|
|
env
|
|
}>
|
|
```
|
|
2. Surcharger `json_gamutable.json.html` en suivant son modele
|
|
* pour le header c'est de la forme : "champ":"label"
|
|
* **IMPORTANT** pour le content du json, il que le cle de la KEY de la table soit "id" et non pas "id_souscription"
|
|
* pour les champs date, pour avoir l'ordre de la col, il faut le format : dd/mm/yyyy ou dd/mm/yy
|
|
|
|
3. Pour utiliser **les actions** :
|
|
```html
|
|
[(#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>
|
|
})]
|
|
"statut" : [(#GET{statut}|json_encode)],
|
|
```
|
|
* il faut ajouter data-confirm="Confirmez vous ..." si on veut ajouter un popin de confirmation
|
|
* 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`
|
|
```php
|
|
/**
|
|
* injection du reload de vuejs pour les crayons de l'objet souscription
|
|
*
|
|
*/
|
|
function prefixPlugin_crayons_vue_affichage_final($flux){
|
|
if ($flux['args']['type'] === 'souscription') {
|
|
$id = $flux['args']['id'];
|
|
if ($id = intval($id)) {
|
|
$flux['data'] .= ' <script type="text/javascript"> app.rechargerJson('.$id.'); </script>';
|
|
} else {
|
|
$flux['data'] .= ' <script type="text/javascript"> app.rechargerJson(); </script>';
|
|
}
|
|
}
|
|
return $flux;
|
|
}
|
|
```
|
|
** Attention **
|
|
Pour les crayons, l'invalidation du cache ne se fait que pour les objets publiés
|
|
Les Crayons utilisent l'api modifier_objet de SPIP qui invalide le cache que si objet est publie, il faut donc forcer l'invalidation du cache en passant pour le pipeline post_edition
|
|
```php
|
|
/**
|
|
* invalider le cache pour l'objet souscription
|
|
*
|
|
*/
|
|
function prefixPlugin_post_edition($flux){
|
|
if ($flux['args']['table'] === "spip_souscriptions") {
|
|
include_spip('inc/invalideur');
|
|
suivre_invalideur("id='id_souscription/1'");
|
|
}
|
|
return $flux;
|
|
}
|
|
```
|
|
|
|
5. Pour utiliser une **mediabox** ou **modalbox** et rechargement total/partiel de la page: on peut demander à vuejs de recharger tout le json ou simplement une ligne dans le cas d'une modification
|
|
1. Dans le json : ajouter un lien avec la classe mediabox ou modalbox (cf ex de json)
|
|
```html
|
|
"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)],
|
|
```
|
|
2. on charge en ajax le formulaire en l'englobant d'une div avec la classe ajax (du pur spip) dans ce cas, à la validation du form, si pas de `redirect` spécifié alors, retour dans le formualaire, avec le message `$retour['message_ok']` qui s'affiche.
|
|
Détournement de SPIP: dans le message_ok, on fais passer l'id de la cle primaire qui va declencher le rechargement du json QUE pour cette ligne et ca c'est vuejs qui s'en occupe ici (html du formulaire):
|
|
```html
|
|
[(#ENV**{message_ok}|=={gamutable}|oui)
|
|
<script type="text/javascript">
|
|
app.rechargerJson();
|
|
$.modalboxclose();
|
|
</script>
|
|
]
|
|
```
|
|
3. Dans le traiter du formulaire => supprimer la redirection et ajouter :
|
|
```php
|
|
if ($retour === 'gamutable') {
|
|
$res['redirect'] = "";
|
|
$res['message_ok'] = "gamutable";
|
|
}
|
|
```
|
|
4. Dans le html du formulaire, ajouter :
|
|
```html
|
|
[(#ENV**{message_ok}|=={gamutable}|oui)
|
|
<script type="text/javascript">
|
|
app.rechargerJson();
|
|
$.modalboxclose();
|
|
</script>
|
|
]
|
|
```
|
|
*il faut ajouter data-confirm="Confirmez vous ..." si on veut ajouter une popin de confirmation*
|
|
|
|
5. Un exemple plus concret:
|
|
- le HTML du formulaire:
|
|
```html
|
|
[(#ENV**{message_ok}|oui)
|
|
<script type="text/javascript">
|
|
id = "#ENV**{message_ok}";
|
|
id = parseInt(id);
|
|
if (id > 0 && id < 9999999999) {
|
|
app.rechargerJson(id);
|
|
$.modalboxclose();
|
|
}
|
|
if (id === 9999999999) {
|
|
app.rechargerJson();
|
|
$.modalboxclose();
|
|
}
|
|
delete id;
|
|
</script>
|
|
]
|
|
```
|
|
- le traiter du PHP:
|
|
```php
|
|
if ($redirect === "gamutable") {
|
|
$retour['redirect'] = "";
|
|
$retour['message_ok'] = "$id_auteur";
|
|
} elseif ($redirect === 'all'){
|
|
// on recharge dans gamuTable tout le tableau car il peut y avoir plusieurs lignes avec le meme souscripteur
|
|
$retour['redirect'] = "";
|
|
$retour['message_ok'] = "9999999999";
|
|
}else {
|
|
$retour['redirect'] = $redirect;
|
|
}
|
|
```
|
|
|
|
|