Dropdown component

[YunusMechery]

I've created a custom component named dropdown and used htmx to do a post to the same page when selection changes. But its not working as expected. It refreshes the page successfully on selection change but the POST parameters not having the values.

This setup was working when using form component's dropdown. Is it mandatory to have a form for custom components?

I was confused where to post this, in htmx forums or sqlpage. I thought will start from here as the POST on change working fine. Only thing values not getting in the POST parameters. I tried to display using both :var and $var.

If htmx causing problems, is there a way to achieve this in SQLPage itself.

dropdown.handlebars

<div>
    <label for="{{name}}">{{title}} </label>

    <select name="{{name}}" 
        {{#if on_change}} hx-post="{{on_change}}" hx-target="body"{{/if}} 
    >
        {{#each_row}}
            <option value="{{value}}" > {{title}} </option>
        {{/each_row}}
    </select>
</div>

dropdown.sql

SET navbar_title = 'Dropdown'; SELECT 'dynamic' AS component, sqlpage.run_sql('navbar.sql') AS properties;

SELECT :selected_staff AS contents;
SELECT $selected_staff AS contents;

SELECT 'dropdown'       AS component
    , 'Select an item'  AS title
    , '?'               AS on_change
    , :selected_staff   AS name;

SELECT 
     staff_id   AS value
    ,staff_name AS title
FROM staffs;

[DSMejantel]

Hi,
I tried to use form component like you to have a dropdown menu.
Now, I use the big_number component to do the same thing more elegant like this :

-- Menus avancés
select 
    'big_number'          as component,
    4 as columns;
select 
    'Ruchers' as title,
    (SELECT count(distinct id) from rucher) as value,
    'blue'    as color,
    json_group_array(json_object(
    'label', nom,
    'link', 'rucher.sql?id='||id))  as dropdown_item
    FROM (select nom, id from rucher union all select '- Tous' as label, '0' as link order by nom);
select 
    'Ruches' as title,
    (SELECT count(distinct numero) from colonie WHERE disparition <>1) as value,
    'green'    as color,
    json_group_array(json_object(
    'label', numero,
    'link', 'ruche.sql?id='||numero) ORDER BY numero)  as dropdown_item
    FROM (select numero, numero from colonie WHERE disparition <>1 union all select '- Toutes' as label, '- Toutes' as link order by numero ASC);
select 
    'La boutique' as title,
    count(distinct id)||' produits' as value,
    'orange'    as color,
    json_array(json_object(
    'label', 'catalogue',
    'link', '/miellerie.sql?tab=2'),
    json_object(
    'label', 'commander',
    'link', '/order_form.sql')
    ,json_object(
    'label', 'factures',
    'link', '/order.sql'))  as dropdown_item
    FROM produits WHERE vente=1;
select 
    'Documents' as title,
    '3 registres' as value,
    'red'    as color,
    json_array(json_object(
    'label', 'registre d''élevage',
    'link', '/elevage.sql?tab=2'),
    json_object(
    'label', 'registre de miellerie',
    'link', '/miellerie.sql')
    ,json_object(
    'label', 'registre de comptes',
    'link', '/compta.sql'))  as dropdown_item;
`

[YunusMechery]

This is a good workaround but i am trying to reduce screen estate just for a selection item. That was the problem with form.

[ionv06]

@YunusMechery If what you are trying to achieve is to bind a selection element from the dropdown, I have a functional version. If you absolutely want to set the selected_staff variable via 'post', ignore what I wrote :)

dropdown.handlebars

<div>
    <label for="{{name}}">{{title}} </label>

    <select name="{{name}}" 
	{{~#if htmxcontent}} {{{htmxcontent}}} {{/if~}}
	>
        {{#each_row}}
            <option value="{{value}}" > {{title}} </option>
        {{/each_row}}
    </select>
</div>

dropdown.sql

select 'shell' as component, 'https://unpkg.com/htmx.org@2.0.2' as javascript;

select 'text' as component,'Selected staff' as title;

select 'text' as component,'selected_staff' as id;

select
    'dropdown' as component,
    'Select an item ' as title,
	'hx-on:change="document.getElementById('||"'selected_staff').text = this.options[this.selectedIndex].text"||'"' as htmxcontent;

SELECT 
     staff_id   AS value
    ,staff_name AS title
FROM staffs;

the element with the id 'selected_staff' is linked to the option selected in the dropdown and changes without refreshing the page

[YunusMechery]

I have sql statements down the line in the same page based on this dropdown selection value. Not just display change of one text.

[YunusMechery]

Tada! problem solved!

I had to remove colon infront of :selected_staff name parameter to simply 'selected_staff' in single quotes.

SELECT 'dropdown'       AS component
    , 'Select an item'  AS title
    , '?'               AS on_change
    , 'selected_staff'   AS name; 

[YunusMechery]

Now we can make all HTML elements as dynamic SQLPage components too!!

[YunusMechery]

Pasting complete example below:

Note that, Added 'selected' attribute of dropdown and class and id attributes.

dropdown.handlebars

<div class="dropdown my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
    <label for="{{name}}">{{title}} </label>

    <select name="{{name}}" 
        {{#if on_change}} hx-post="{{on_change}}" hx-target="body"{{/if}} 
    >
        {{#each_row}}
            <option 
                value="{{value}}" 
                {{#if (eq selected "true")}} selected {{/if}}
            > {{title}} </option>
        {{/each_row}}
    </select>

</div>

dropdown.sql - Remember to set htmx in javascript property of shell component, which is not shown here.

SET navbar_title = 'Staff List'; SELECT 'dynamic' AS component, sqlpage.run_sql('navbar.sql') AS properties;

SELECT 'dropdown' AS component
    , 'Department:'    AS title
    , 'selected_dept'  AS name
    , '?'              AS on_change
;


--Assumption: There is no department with department_id value as 0 and 0 is used for 'All' option.
--Show 'All' option first when nothing is selected, and consider it as selected by default
SELECT 0 as value, 'All' as title, 'true' as selected WHERE :selected_dept IS NULL

    UNION ALL

--Make 'All' option available, in case user want to see all department staffs again,
--but don't make it as selected when other department is selected
SELECT 0 as value, 'All' as title, 'false' AS selected WHERE :selected_dept IS NOT NULL

    UNION ALL

SELECT 
     department_id   AS value
    ,department_name AS title
    ,CASE WHEN department_id = :selected_dept::bigint THEN 'true' ELSE 'false' END AS selected
FROM departments;

SELECT
    'list'          AS component,
    'Staffs'        AS title
;

SELECT
    staff_name              AS title,  
    'update.sql?staff_id='  || staff_id AS edit_link,
    'delete.sql?staff_id='  || staff_id AS delete_link
FROM staffs

--show all staff if no dept is selected, otherwise staff list from the selected dept
WHERE department_id = CASE WHEN (:selected_dept IS NULL OR :selected_dept::bigint = 0) THEN department_id ELSE :selected_dept::bigint END 
ORDER BY staff_name;