Ergonomie back-office

[yannbug]

Configuration du plugin

• Nom du plugin (dans le header du fichier PHP, n'apparaîtra que dans la liste des extension): WP&Co CSV to WordPress content importer
• Icône du plugin dans le menu d'admin: icône WP&Co (je demande à Quentin de la créer à partir des créas de Davy dans un ticket séparé)
• Nom du plugin dans le menu d'admin: CSV to WP (en français CSV vers WP)

Page de liste + ajout de modèle

• Titre h2 de la page d'admin: Import depuis fichier CSV
• Titre h2 "Liste sauvegardes" -> "Modèles d'importation"
• Liste des modèles: doit être une table html (actuellement c'est ul/li)
• Header table: en thead / th de cette table, nom des colonnes : Nom | Type de contenu | Action
• Lignes de cette table (en tbody):
  • 1ère colonne: mettre le nom du modèle en strong, c'est aussi un lien vers la même action que Modifier.
  • 1ère colonne suite / Liens d'actions: dans une div qui vient juste en-dessous du nom du modèle (dans la même 1ère cellule du tableau), mettre des liens qui font ces 2 actions dans cet ordre : Modifier | Supprimer
  • 2ème colonne: le nom du CPT dans lequel ce modèle importe
  • 3ème colonne: bouton [Importer...]
• Toute cette partie (titre "Modèles d'importation" et le tableau qui suit) ne doit pas apparaître du tout si aucun modèle d'importation n'a encore été enregistré
• Titre H2: "Nouvelle sauvegarde" -> "Nouveau modèle d'importation"
• Formulaire: ça doit être une table html, avec un champ par ligne. Le nom du champ vient en première colonne qui est un th, le champ lui-même en 2ème colonne qui est un td
• Champ "Nom du modèle" à la place de "Nom de la sauvegarde"
• **Champ "N° de la ligne contenant le nom des colonnes" à la place de "Numéro de ligne des TITRES des colonnes (0 est la premiere)"
• La première colonne doit être numérotée 1 (et pas zéro)
• Mettre 1 par défaut en contenu du champ (et pas zéro)
• Champ "Si un contenu n'est plus présent dans le fichier importé lors d'une mise à jour:" à la place de "Action a entreprendre quand une ligne a été delete du fichier (ignorer ou supprimer le post liée a cette ligne)"
  • Action 1: "Conserver le contenu existant"
  • Action 2: "Supprimer le contenu existant"
• Champ "Séparateur de champ" _à la place de _ "Type de séparateur"
  • Menu déroulant séparateurs pour l'instant ne proposer que ; et ,
• Champ "Contenu à importer" à la place de "Select CPT :"
• Champ "Auteur par défaut" à la place de "Select Author :"
• Bouton [Créer un modèle à partir de ce fichier] à la place de [Créer une sauvegarde à partir du fichier]

Ecran d'édition d'un modèle

• Titre H2 "Modifier le modèle d'importation" à la place de "Editer sauvegarde"
• Nom du modèle d'importation: à réafficher en strong dans une div sous ce H2
• Liste des champs: doit devenur une table (actuellement ul / li)
• Header table: en thead/td de cette table, nom des colonnes: Méta-données | Langue | Colonne du fichier | Valeur par défaut
• Colonne "Langue": n'apparaît que si le plugin Polylang est activé, et si plus d'une langue est activée dans Polylang
• Lignes de cette table: chaque ligne correspondant à une méta-donnée ou champ ACF doit se répéter autant de fois qu'il y a de langues activées dans Polylang (uniquement si le plugin Polylang est activé et si plus d'une langue est activée dans Polylang)
  • 1ère colonne: mettre en strong le nom du champ
  • 1ère colonne suite: mettre toujours dans une div à la ligne le nom du champ ACF, enlever les parenthèses
  • 2ème colonne: code langue Polylang (en 2 lettres) (cette colonne n'apparaît que si le plugin Polylang est activé, et si plus d'une langue est activée dans Polylang)
  • 3ème colonne: menu déroulant des colonnes du fichier CSV. Dans la version française du plugin, "Sélectionner une colonne..." à la place de "Select a field"
  • 4ème colonne: Champ de valeur par défaut, ok.
• Ligne "Colonne identifiante" à la place de "COLONE IDENTIFIANTE"
• Libellé "Si non associé, un identifiant unique sera automatiquement généré" à la place de "Si non associé, l'id sera automatique"
• Bouton [Mettre à jour le modèle] à la place de [Update des fields acf]

La suite

• Quand ces premières modifs seront faites, on verra avec Quentin de quelles balises ou classes il a besoin pour appliquer les styles de l'admin WP par défaut au niveau des deux tables HTML, des champs et des boutons.

[yannbug]

@QuentinSalais d'après @SilverCelyan tu peux avancer là-dessus dès maintenant, merci.

[yannbug]

@SilverCelyan voilà le récap de ce qu'il reste à faire "ergonomiquement".

Repris de la liste ci-dessus:

• Toute la partie "Modèles d'importation" et le tableau qui suit ne doit pas apparaître du tout si aucun modèle d'importation n'a encore été enregistré
• Champ "Séparateur de champ" à transformer en menu déroulant (avec choix entre , et ; uniquement)
• revoir l'écran d'édition d'un modèle comme détaillé ci-dessus (il reste 5 trucs à faire)

Nouvelle demande pour la partie "Nouveau modèle d'importation"

• Masquer la partie "Nouveau modèle d'importation" par défaut (en css/jQuery)
• Mettre un bouton [Nouveau modèle...] qui fait afficher (unhide) cette partie

Précisions pour le tableau des modèles d'importation

• appliquer les classes WP à la table: class="wp-list-table widefat fixed striped posts"
• appliquer les classes WP aux tr/th: class="manage-column column-title column-primary"
• appliquer les autres classes qui manquent aux éléments du tableau pour que ça se présente comme un tableau "standard" de back-office WP (cf screenshot ci-dessous - il suffit de s'inspirer de l'admin des articles)
• appliquer la classe "has-row-actions" au td de la colonne "Nom"
• les actions Modifier et Supprimer doivent être respectivement dans un <span class="edit"> et un <span class="trash">
• les actions Modifier et Supprimer doivent être un lien <a> et pas un bouton <input type="button"> comme actuellement

[QuentinSalais]

Pour le tableau de modification d'un modèle d'importation, est-ce qu'il faut aussi ajouter des classes wordpress pour le styliser ?

[yannbug]

@QuentinSalais si tu vois comment le faire facilement tant que tu y es, oui, vas-y. C'est moins important que pour l'autre tableau, car on le voit moins souvent : une fois que l'importation est configurée, le client ne voit que le premier tableau.

(a noter que c'est tableau contenant un formulaire donc c'est des styles un peu différents d'un tableau de liste. Pas sur qu'on arrive à le faire "coller" à 100% avec un tableau WP par défaut, mais plus on s'en rapprochera mieux c'est. Il faut que ça s'intègre le mieux possible au back-office WP "natif" - sans y passer des heures)

[QuentinSalais]

Ok je vais voir ce que je peux faire

[QuentinSalais]

Voilà tu me dis si j'ai d'autres modifications à faire, niveau responsive c'est bon aussi à priori pour les tableaux.

[yannbug]

ben le panneau "Nouveau modèle d'importation" n'est pas masqué par défaut ?

[yannbug]

Ok, vu avec @SilverCelyan il a encore du taf dessus pour cocher les dernières cases :)

[SilverCelyan]

Après test ça m'as l'air d'etre une version qui vaut le coup d'être testé
Il y a les taxos et polylang

[yannbug]

Encore des modifs ergo:

• Renommer le bouton actuel [Importer] en [Fichier...]
• Renommer le bouton actuel [Process fichier] en [Importer]
• Homogénéiser et espacer correctement ces 2 boutons (taille, marge)
• Le lien "(détails)" devrait devenir "(masquer les détails)" quand les détails sont affichés

...à part ça l'interface m'a l'air suffisamment claire pour l'instant :)

Pour la cliente Bordeauxshopping, il faudra lui créer son modèle d'importation à partir de son fichier d'exemple, et le nommer de façon claire "Importation des boutiques", et pas "Test1" ;) -> à partir de là ça a l'air assez trivial à utiliser !