257 lines
8.7 KiB
Markdown
257 lines
8.7 KiB
Markdown
# 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
|
||
}>
|
||
|
||
```
|
||
- **url_sort_asc** et **url_sort_desc** => surcharge possible des icones de tri de colonnes
|
||
|
||
## les filtrages par url sont :
|
||
- &trier=champ1|asc => OK
|
||
- &filtre=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
|
||
```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"
|
||
}
|
||
```
|
||
- 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 :
|
||
```json
|
||
"maj": [(#CONFIG{derniere_modif_osdve_intervention}|tsEnDate|json_encode)]
|
||
```
|
||
|
||
- On peut ajouter des elements que l'on veut supprimer si on utilise le {maj}
|
||
```json
|
||
"a_supprimer" : [ <BOUCLE_articlesAsup(ARTICLES){si #ENV{maj}}{staut = poubelle}{','}{maj > #ENV{maj}}> #ID_ARTICLE </BOUCLE_articlesAsup> ]
|
||
```
|
||
|
||
|
||
|
||
## 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/
|