gamutable

##fontello API

1. Ouvrir le navigateur

fontello-cli open

1. mettre à jour la police

fontello-cli install --css css --font font

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

PHP dans php.ini

• post_max_size which is directly related to the POST size
• upload_max_filesize which may be unrelated, not sure
• max_input_time, if the POSt takes too long
• max_input_nesting_level if your data is an array with a lot of sublevels
• max_execution_time, but quite sure it’s not that
• memory_limit, as you may reach a size exceding the subprocess allowed memory
• max_input_vars, if your data array has many elements => le plus important

Utilisation

• charger l'inclure (5 args possibles et facultatifs)

<INCLURE{fond=inclure/gamutable,env}>

 Ou avec tous les arguments facultatifs

[(#SET{pdfuri,#URL_PAGE{spipdf}
	|parametre_url{spipdf,mon_fichier_pdf}
	|parametre_url{nom_fichier,mon_nom_de_fichier_pdf}
})]
<INCLURE{fond=inclure/gamutable,
	apiuri="spip.php?page=json_souscripteurs.json",
	namepdf="resultats_epreuve_type-1",
	fichierpdf="resultats_epreuve_type-1", // obligatoire si on veut pouvoir afficher
	argpdf="#ENV{argpdf}"
	tparpage=[15,25,50,'Tous'],
	champcsv="search",
	delimitercsv=";",
	htmlvuebloc=exemple_bloc, // voir fichier d'exemple : exemple_bloc.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",
	filtrerselect=[(#ENV{filtrerselect})],
	env
}>

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

les filtrages par url sont :

• &trier=champ1|asc => OK
• &filtrer=champ1|valeur1 => OK
• &afficher=50 => OK
• &rechercher=toto => OK

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

• recharger qu'une partie du json via le timestamp (maj), il faut ajouter le critere : {maj > #ENV{maj,0}} et la clé dans le header :

"maj": [(#CONFIG{derniere_modif_osdve_intervention}|tsEnDate|json_encode)]

• On peut ajouter des elements que l'on veut supprimer si on utilise le {maj}

"a_supprimer" : [ <BOUCLE_articlesAsup(ARTICLES){si #ENV{maj}}{staut = poubelle}{','}{maj > #ENV{maj}}> #ID_ARTICLE </BOUCLE_articlesAsup> ]

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 data-id="" est négatif, cela supprime 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
• rechargement si 2 gamutables :
  • par défaut gamutableUn si le bouton est dans gamutableUn, gamutableDeux si il est dans gamutableDeux
  • possibilité d'ajouter à la balise <a> qui déclenche l'action un data-treload = 1 | 2 | 12 pour forcer le rechargement de l'un ou l'autre ou les deux gamutables

Utiliser les crayons :

[{
"header":{
"id": "ID",
"activite": "Activité",
"massif": "Massif",
"sommet": "Sommet",
"voie": "Voie",
"participants_max": "Participants max",
"tarif_prive": "Prix"
},
"crayons":{
	"tarif_prive" : "activite"
}

Dans cet exemple :

• activite est le raccourci du nom de la table (spip_activites => pas de préfixe + singulier)
• tarif_prive est obligatoirement l'intitulé du champs dans cette table (si besoin il faut modifier la clé du champ...)

Pour une colonne utiliser les crayons sur une table différente de celle de l'id "principal" (celui utilisé comme id des lignes du JSon) :

• dans le bloc header du JSon on passe le raccourci du nom de la table
• dans le bloc html on passe l'id de l'objet dans cette table

{
	"header":{
		"id": "n°",
		"email": "Email",
		"telephone": "Téléphone",
		"adresse": "Adresse"
	},
	"crayons": {
		"email": "auteur",
		"telephone": "auteur",
		"adresse": "gi"
	}
},
{
	"html": {
		"id": #ID_AUTEUR,
		"email": [(#GET{email}|json_encode)],
		"telephone": [(#GET{telephone}|json_encode)],
		"adresse": [(#GET{adresse}|json_encode)]
	},
	"crayons": {
		"adresse": [(#GET{id_gis}|intval)]
	}
}

Dans cet exemple :

• les crayons sur email et telephone vont éditer les champs email et telephone de la table spip_auteurs pour l'id_auteur passé en id de la ligne
• les crayons sur adresse vont éditer le champ adresse de la table spip_gis pour l'id_gis passé en valeur de crayons/adresse de la ligne

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 être "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>

URLs avec filtrage :

Concatener le filtrage dans l'url d'appel du json :

http://guides.spip/?page=grille_tarifs&activite=Alpinisme

ou

<a class="btn" href="[(#URL_PAGE{commandes}|parametre_url{annee,2021})]"
  >2021</a
>

cellule checkbox

Il est possible d'ajouter pour une colonne des checbox qui declencheront soit une action, soit l'appel d'un formulaire.

1. il faut ajouter dans le header la cle checkbox (cf ex) pour definir l'url du payload de type action ou page= (formulaire) avec comme nom de premier parametre : data qui sera transformer en php via :

	$data = json_decode($data,true);

2. Puis la valeur de la cellule doit etre du type dataid-#ID_PATATE (cf ex)

Refs

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

Développement :

• désormais tout le JS autour du gamutable est dans src/gamutable.js
• installer les dépendances avec npm install ou pnpm install
• pour développer, le mieux est d'utiliser la commande npm run dev => qui va lancer un serveur de test, SPIP sait l'utiliser.
• une fois le dev terminé, il faut builder le code npm run build

une autre alternative, est d'utiliser la commande npm run watch qui permet de builder après chaque changement de code source, mais le temps est BEAUCOUP plus lent qu'avec la commende npm run dev

A utiliser pour une micro modification

Modif pour contourner le problème de NODE_PATH provoqué par npm run dev avec Gitbash sous Windows :

• dans package.json remplacer la ligne

"dev": "APP_ENV=development vite",

par

"dev": "SET APP_ENV=development & vite",

Problème de blocage des requêtes multi-origine provoquée par npm run dev :

• npm run dev utilisant un serveur virtuel local sur le port 5134, on se retrouve avec une erreur CORS dans le navigateur si le dev est fait sur une URL en https. Par exemple :

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://localhost:5134/gamutable.js. Raison : échec de la requête CORS.

TODO : trouver comment supprimer cette limitation... (la config Header set Access-Control-Allow-Origin "*" dans le vhost apache ne suffit pas !)