gamutable

Stockage

On utilise maintenant la lib localforage : https://localforage.github.io/localForage/ Dans cette nouvelle version, on découpe le stockage en 2:

• le header en localstorage avec la cle prefixe par header_ afin d'éviter les pb avec les anciens stockages
• le table est stocké via localforage : en indexedb et async

Configuration

Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev

Utilisation

• 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=";",
	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{...}"
	stockage="indexeddb" // par defaut : localstorage
	includespip="#ENV{includespip}" // pour ajouter un code html dans la ligne au dessus du tableau
	nomBlocAjaxReload="nom bloc a recharger à la fin du chargement des donnees"
	env
	filtreselect='[(#ENV{filtrerselect})]'
}>

[(#SET{filtrerselect,#ARRAY{
	0,#ARRAY{champ,secteur,valeurs,#LISTE{Le chat}},
	1,#ARRAY{champ,voie,valeurs,#LISTE{Turlut, man}}
	}|json_encode|rawurlencode})]
<a class="btn" href="[(#URL_PAGE{gestionnaire_voies}|parametre_url{filtrerselect,#GET{filtrerselect}})]"> aaaa </a>

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

Personnalisation du contenu : 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"
}

• On peut ajouter des filtres par colonne soit avec un select soit avec un input

"filtreCol" : {
	"statut" : "select",
	"nom": "select",
	"prenom": "input"
}

• On peut ajouter des ordre de tri par colonne : asc ou desc

"ordreCol" : {
	"nom" : "desc"
}

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 (ou un data-ajaxreload), alors, un ajaxReload de ce bloc sera joué dans la fonctione de callback de l'action

Utiliser les crayons :

Caches

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

Autorisations

Il faut surcharger cette autorisation : autoriser_crayonner_dist() inc/crayons

@Deprecated

=> integre par default dans la 3.4.2 pour tous les objets

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

Utiliser une mediabox ou modalbox :

• pour 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)
  3. Dans le traiter du formulaire => supprimer la redirection et on ajoute :

  if ($retour === 'gamutable') {
  	$res['redirect'] = "";
  	// pour recharger que la ligne $id_patate du tableau
  	$res['message_ok'] = gamutable_fermer_modalbox($id_patate);
  	// ou si on veut recharger tout le tableau
  	$res['message_ok'] = gamutable_fermer_modalbox();
  }
  

• Ajouter data-confirm="Confirmez vous ..." si on veut ajouter une popin de confirmation

Utiliser deux Gamutables dans la même page :

• créer les 2 apiuri dans l'#ENV : apiuri et apiuri_deux
• tous les paramètres envoyés a inclure/gamutable peuvent êtres "dédoublés" avec le suffixe _deux
• pour personnaliser le contenu entre les 2 gamutables on peut surcharger inclure/separateur_gamutables
• Exemple :

<div class="tableau_resas">
	#SET{s,#VAL{spip.php?page=json_resas.json}}
	[(#ENV{statut}|oui)
		[(#SET{s,#GET{s}|concat{&statut=}|concat{#ENV{statut}}})]
	]
	#SET{t,#VAL{spip.php?page=json_totaux.json}}
	[(#SET{t,#GET{t}|concat{&saison=}|concat{#ENV{saison,#DATE|affdate{Y}}}})]
	<INCLURE{fond=inclure/gamutable,
		titregamutable="Le premier gamutable",
		titregamutable_deux="Le deuxieme gamutable",
		apiuri=#GET{s},
		apiuri_deux=#GET{t},
		tparpage=[15,25,50,'Tous'],
		tparpage_deux=[20,50,'Tous'],
		champcsv="search",
		champcsv_deux="search",
		delimitercsv=";",
		delimitercsv_deux=";",
		namecsv="premier.csv",
		namecsv_deux="deuxieme.csv",
		id_gamutable="id_premier",
		id_gamutable_deux="id_deuxieme",
		env
	}>
</div>

Liens

https://unpkg.com/browse/vue-next-select@2.10.4/