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)

<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",
	url_sort_asc="#CHEMIN{...}"
	url_sort_desc="#CHEMIN{...}"
	env
}>

url_sort_asc et url_sort_desc => surcharge possible des icones de tri de colonnes

1. 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
• on peut ajouter une clé classes pour ajouter des classes spécifiques à certaines colonnes

"classes":{
	"nom": "toto",
	"email":"toto"
}

1. Pour utiliser les actions :

[(#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
• si une variable du nom de nomBlocAjaxReload est définie, alors, un ajaxReload de ce bloc sera joué dans la fonctione de callback de l'action

4. Pour utiliser les crayons, il faut utiliser le pipeline crayons_vue_affichage_final

/**
 * 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

/**
 * 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)

   "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):

   [(#ENV**{message_ok}|=={gamutable}|oui)
   	<script type="text/javascript">
   		app.rechargerJson();
   		$.modalboxclose();
   	</script>
   ]
   

   3. Dans le traiter du formulaire => supprimer la redirection et ajouter :

   if ($retour === 'gamutable') {
   	$res['redirect'] = "";
   	$res['message_ok'] = "gamutable";
   }
   

   4. Dans le html du formulaire, ajouter :

   [(#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:

      [(#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:

      	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;
      	}