# 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

### 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)
```html
<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=";",
	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",
	filtrerselect=[(#ENV{filtrerselect})],
	env
}>

[(#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
```json
"classes":{
	"nom": "toto",
	"email":"toto"
}
```
- On peut ajouter des filtres par colonne soit avec un select soit avec un input
```json
"filtreCol" : {
	"statut" : "select",
	"nom": "select",
	"prenom": "input"
}
```
- On peut ajouter des ordre de tri par colonne : `asc` ou `desc`
```json
"ordreCol" : {
	"nom" : "desc"
}
```

## 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
* 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 :
```json
[{
"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)
- `tarif_prive` est **obligatoirement** l'intitulé du champs dans cette table (si besoin il faut modifier la clé du champ...)


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

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


## 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)
	```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)
	3. Dans le traiter du formulaire => supprimer la redirection et on ajoute :
	```php
	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 :
```html
<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 :
```html
 http://guides.spip/?page=grille_tarifs&activite=Alpinisme
 ```
 ou
 ```html
<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 :
```php
	$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/