Form component

[xylle]

Hello,
I want to modify select on the form component, but I don't want to redo the entire form component. It's possible ?

[lovasoa]

Hello! Can you tell us a little bit more about what you want to modify in your form's select field?

[xylle]

I want to add an empty option, or first option is selected when validate form. I can make it with SQL, but with MariaDB is not simple (all JSON operation with MariaDB are more complex):

select
    'select' as type,
    -- TRUE             as searchable,
    -- true as multiple,
    'contact_id'               as name,
    'Personne a contacter'       as label,
    JSON_MERGE(
        JSON_OBJECT('label', ''),
        JSON_ARRAYAGG(
            json_object(
                'label', contact.nom,
                'value', contact.id,
                'selected', dossier.contact_id is not null
            )
        )
    ) as options
    from contact
    left join dossier
        on  contact.id = dossier.contact_id
        and dossier.id = $dossier_id;

After, I want to make more select :

• The first is to make select, with no JSON, just result of query with 3 column (label, value, selected)
• After 2 select, one with select option, other with option not selected with some JS to make it work.

Example :

I try to make custom component, but handlebars template, is different.
I think there's a bit of a lack of documentation on how to make handlebars, you have to guess quite a lot to get the examples on the official site to work. In official website, for key use {{@key}}, in your code {{~@key~}}, why ?
I found this on handlebars website :

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

I can't get it to work. I want to work with variable from query.

You've created a few helpers, but I haven't seen any documentation about them.

When you work with MariaDB, less JSON is better. Or I suck at SQL-JSON

I try to make a component to debug data, I can't seem to split my code according to variable type.
Example to view POST or GET data, don't work with MariaDB.

PS : my English is bad, there's no criticism, just frustration.

[lovasoa]

I added a new example to the repo based on your example, which illustrates the creation a custom component with advanced multi-select form handling: https://github.com/sqlpage/SQLPage/tree/main/examples/custom%20form%20component

This older example might also be of interest: https://github.com/sqlpage/SQLPage/tree/main/examples/mysql%20json%20handling

In the official handlebars website mentions {{@key}}, and your code uses {{~@key~}}, why ?

This part of the handlebars syntax is documented here: https://handlebarsjs.com/guide/expressions.html#whitespace-control

The ~ serves to avoid including whitespace surrounding a handlebar expression in the output. It makes it easy to format your code nicely for yourself without sending large amounts of blank characters to the browser.

[lovasoa]

Je vous propose de passer en français, ce sera probablement plus facile pour nous deux 😁.

J'ai toujours un peu de mal à comprendre exactement ce que vous essayez de construire.

De ce que je comprends, vous avez une liste de contacts et une liste de dossiers, et vous essayez de construire un formulaire pour modifier les contacts associés à un dossier.

J'ai l'impression que vous avez un formulaire qui fonctionne pour associer un seul contact par dossier, et vous essayez de construire un composant personnalisé qui permettrait d'associer plusieurs contacts à un seul dossier. Est-ce bien cela?

Si c'est le cas, vous ne devriez pas avoir besoin de créer de composant personnalisé. L'option true as multiple permet déjà de créer un select avec plusieurs options sélectionnables. L'exemple multiselect generated from a database table sur https://sql.datapage.app/component.sql?component=form montre comment faire.

Si ce n'est pas ça, alors peut-être que vous pourriez décrire plus en détails ce que vous essayez de faire?

Peut-être que cette discussion plus ancienne pourrait vous être utile aussi: #649

[xylle]

Oui, clairement, le français sera plus pratique.
Déjà, il y a une différence entre ce que je fais et ce que je veux faire. Je réalise une première application pour m'entrainer. Le code que tu vois est un support qui ne nécessite pas les modifications pour fonctionner.
Je veux réaliser plusieurs choses.

1. Apprendre à créer des composants personnalisés.
2. Ajouter une option vide au select sans faire une requête fortement dépendante du moteur de base de données et sans refaire tout le composant form
3. À termes, j'aimerais créer un select personnalisé. Clairement le multiselect pourrait convenir, mais j'aimerais pouvoir faire autre chose.

Presque tous les exemples fournit ne fonctionne qu'avec SQLite, dès que l'on veut travailler avec MariaDB, c'est vraiment compliqué. Les requêtes deviennent trop complexes pour ce type d'outils.

Je vois une possibilité de modifier le composant pour qu'il travaille comme le composant table avec trois colonnes (une pour le label, une pour la valeur et une de type booléen pour afficher la sélection). Pour le réaliser, j'ai cherché de la documentation pour Handlerbars. Je n'arrive pas à faire fonctionner les exemples fournit. En regardant les composants déjà faits, je vois des différences :

• each_row n'existe pas
• la manière d'écrire key ou index est différentes
• J'ai vu dans le code Rust que tu avais créé des helpers, il n'y a pas de documentation pour les présenter.
  En documentant la création de composants, tu pourrais créer une base de composants maintenue par la communauté, voire une bourse d'échange, de là à imaginer des composants payant ;o)

En tout cas, ton logiciel est réellement bien.

[lovasoa]

J'ai créé un exemple simple qui devrait t'aider à créer tes propres composants personnalisés: https://github.com/sqlpage/SQLPage/tree/main/examples/custom%20form%20component

Pour ajouter une option vide, je suis désolé, mais la seule solution solution est celle que tu utilises déjà, avec json. Je suis d'accord que la syntaxe est un peu rude au début, mais honnêtement, on s'y habitue vite...

Pour la documentation, est-ce que tu as consulté https://sql.datapage.app/custom_components.sql ? Normalement, tous les helpers sont documenté, mais n'hésite pas à ouvrir une "issue" github si il en manque ou que certaines parties de la documentation ne sont pas claires. Voire à contribuer toi-même à la documentation si tu as des idées d'améliorations.

Pour les composants payants, il y en a déjà un: le composant spreadsheet :) https://github.com/sqlpage/sqlpage-spreadsheet

[xylle]

Pour les helpers, j'avais vu la page, mais je n'avais pas bien compris que tu en ajoutais de nouveau. En fait quand j'ai vu que c'était du handlebars avec le lien, je suis allé voir directement sur le site officiel.
Peut-être ajouter une note dans la partie "Component template syntax" :

Components are written in [handlebars](https://handlebarsjs.com/guide/) with some addition, see further, which is a simple templating language that allows you to insert data in your HTML.

Pour l'option vide, je vais l'ajouter en 1ʳᵉ position dans la partie HTML :
sinon pour le composant que tu indiques, c'est exactement ce que je veux faire, je ne l'avais pas trouvé. Je trouve celui que tu as fait plus joli que le mien. Je vais l'essayer.

En tout cas merci de l'aide.

Une petite remarque pour la forme de la documentation : pour certains pages la documentation me semble atypique. Utiliser des cartes pour expliquer les options des composants est joli, mais pénible à lire. On a plus l'habitude de les voir sous forme de table, comme sur le site de w3schools.