Constrained color select in form component

[matthewlarkin]

Hi SQLPagers,

It seems SQLPage allows a color type in the form input rows, which displays a native color picker. This is nice, but I’d like to offer a constrained palette, where the user can select from a list of color options, like Tabler does here.

So I’m trying to make a custom component (based on the existing form component) with the color selection input. For brevity, I’m illustrating my attempt to add just one color option:

<fieldset class="form-fieldset">
  {{#if title}}
    <h2 class="text-center mb-3">{{title}}</h2>
  {{/if}}
  <div class="row">
    {{#each_row}}
    
      {{!-- Adding new color element here --}}
      {{#if (eq type "color")}}
      <div class="mb-3">
        <label class="form-label">{{default label "Color"}}</label>
        <div class="form-selectgroup d-flex gap-2">
          <label class="form-colorinput">
            <input name="{{default name 'color'}}" type="radio" value="light" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-light rounded-circle"></span>
          </label>
        </div>
      </div>
      {{else}}
      {{!-- End new color element --}}

      {{#if (or (eq type "radio") (eq type "checkbox"))}}
      <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1 col-md-{{default width 12}}">
        <label class="form-selectgroup-item flex-fill">
          {{!-- ... etc ... --}}

So I select that custom component:

select 'form-color' as component,
  'POST' as method;

  select
    'name' as name,
    'Name' as label;

  select
    'description' as name,
    'Description' as label,
    'textarea' as type;

  select
    ‘color’ as type;

and then I get a handlebars syntax error:

The component 'form-color' was not found.

Template error: invalid handlebars syntax.
    --> Template error in "Unnamed":149:8
     |
 146 | 		{{/if}}
 147 | 	</fieldset>
 148 | </form>
     |-------
     |
     = reason: invalid handlebars syntax.

I know the component name is spelled correctly, and when I take away the added color input lines, the component works like a normal form component.

---

Anyone see any issues? I’m sort of new to handlebars, so I think I’m doing something wrong here.

[lovasoa]

Can you post your full component here? We should be able to help you find the syntax error in it. Maybe your if and /if do not match ?

[lovasoa]

The error is at the very end of your template, right? Are you sure you don't have an {{#if}} that is opened and never closed?

[lovasoa]

I opened a pull request upstream to improve syntax error messages: sunng87/handlebars-rust#638

[matthewlarkin]

That was it! Thank you @lovasoa

Corrected code below, but I'm still having trouble looping over an array of given colors. Instead, SQLPage is rendering one long native color input (like it does when you supply 'color' as type in the native form component:

Corrected handlebars:

<!-- adding color input -->
{{#if (eq type "color")}}
  <div class="mb-3">
    <label class="form-label">Color</label>
    <div class="form-selectgroup d-flex gap-2">
      {{#each colors as |color|}}
        <label class="form-colorinput">
          <input name="{{default name 'color'}}" type="radio" value="{{color}}" class="form-colorinput-input" />
          <span class="form-colorinput-color bg-{{color}} rounded-circle"></span>
        </label>
      {{/each}}
    </div>
  </div>
{{/if}} <!-- added this -->
<!-- end adding color input -->

Ideal usage:

select 'form-color' as component;

  select
    'color' as type,
    json_array('dark', 'light', 'green', 'blue', 'yellow', 'red') as colors;

---

Sqlite json_array() should be fine. Maybe I'm handling the handlebars array improperly...

[lovasoa]

json functions (including json_array) in SQLite return strings, not native json objects... To create an array, you can select multiple columns with the same name:

  select
    'color' as type,
    'red' as colors,
    'green' as colors,
    'blue' as colors;

if you want to use json_array, you can parse the json from your template using the to_array helper. Here is an example from the shell component:

    {{#each (to_array javascript)}}
        {{#if this}}
            <script src="{{this}}" defer></script>
        {{/if}}
    {{/each}}

https://github.com/lovasoa/SQLpage/blob/main/sqlpage/templates/shell.handlebars#L22-L26

[matthewlarkin]

Bingo! 🙂 I was indeed missing to_array in the handlebars template. Thank you Ophir!

Here is the updated form-color.handlebars, for anyone interested:

form-color.sql:

select 'form-color' as component;

  select
    'color' as type,
    'Fancy color select' as label,
    json_array( 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'azure', 'blue', 'indigo', 'purple', 'pink', 'light', 'gray-500', 'dark' ) as colors;

form-color.handlebars:

<form 
	{{#if id}}id="{{id}}"{{/if}}
	class="my-3 {{class}}"
	method="{{default method "post"}}"
	{{#if action}}action="{{action}}"
	{{else}}
	{{#if id}}action="#{{id}}"{{/if}}
	{{/if}}
>
	<fieldset class="form-fieldset">
		{{#if title}}
			<h2 class="text-center mb-3">{{title}}</h2>
		{{/if}}
		<div class="row">
			{{#each_row}}
			{{#if (or (eq type "radio") (eq type "checkbox"))}}
				<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1 col-md-{{default width 12}}">
					<label class="form-selectgroup-item flex-fill">
						<input type="{{type}}" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
						<div class="form-selectgroup-label d-flex align-items-center p-3">
							<div class="me-3">
								<span class="form-selectgroup-check"></span>
							</div>
							<div>
								{{default label value}}
								{{~#if required}}
									<span class="text-danger ms-1" aria-label="required" title="required">*</span>
								{{/if}}
								{{#if description}}
									<small class="form-hint mt-0">{{description}}</small>
								{{/if}}
							</div>
						</div>
					</label>
				</div>
			{{else}}
			{{~#if (eq type "hidden")}}
				<input type="hidden" name="{{name}}" {{#if id}}id="{{id}}" {{/if}}value="{{value}}">
			{{else}}
				<label class="form-label mb-2 col-md-{{default width 12}}">
					{{default label name}}
					{{~#if required}}
						<span class="text-danger ms-1" aria-label="required" title="required">*</span>
						{{/if}}
					{{#if (eq type 'textarea')}}
						<textarea
							name="{{name}}"
							class="form-control"
							placeholder="{{placeholder}}"
							rows="{{default rows 3}}"
							{{#if id}}id="{{id}}" {{/if~}}
							{{~#if value}}value="{{value}}" {{/if~}}
							{{~#if minlength}}minlength="{{minlength}}" {{/if~}}
							{{~#if maxlength}}maxlength="{{maxlength}}" {{/if~}}
							{{~#if required}}required="required" {{/if~}}
							{{~#if autofocus}}autofocus {{/if~}}
						>
						{{~#if value}}{{value}}{{/if~}}
						</textarea>
					{{else}}{{#if (eq type 'select')}}
						<select name="{{name}}" class="form-select"
						{{~#if id}} id="{{id}}" {{/if~}}
						{{~#if required}} required="required" {{/if~}}
						{{~#if autofocus}} autofocus {{/if~}}
						{{~#if multiple}} multiple {{/if~}}
						>
						{{#each (parse_json options)}}
							<option value="{{value}}" {{#if (or (eq ../value value) selected)}}selected{{/if}}>{{label}}</option>
						{{/each}}
						</select>
					{{else}}{{#if (eq type 'color')}}
						<div class="mb-3">
							<label class="form-label">Color</label>
							<div class="form-selectgroup d-flex gap-2">
								{{#each (to_array colors)}}
									<label class="form-colorinput">
										<input name="{{default name 'color'}}" type="radio" value="{{this}}" class="form-colorinput-input" />
										<span class="form-colorinput-color bg-{{this}} rounded-circle"></span>
									</label>
								{{/each}}
							</div>
						</div>
					{{else}}
						<div class="input-group">
							{{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}
							{{#if prefix}}<span class="input-group-text">{{prefix}}</span>{{/if}}
							<input name="{{name}}" class="form-control {{class}}" 
								{{~#if id}} id="{{id}}" {{/if~}}
								{{~#if type}} type="{{type}}" {{/if~}}
								{{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
								{{~#if value}} value="{{value}}" {{/if~}}
								{{~#if (or max (eq max 0))}} max="{{max}}" {{/if~}}
								{{~#if (or min (eq min 0))}} min="{{min}}" {{/if~}}
								{{~#if step}} step="{{step}}" {{/if~}}
								{{~#if minlength}} minlength="{{minlength}}" {{/if~}}
								{{~#if maxlength}} maxlength="{{maxlength}}" {{/if~}}
								{{~#if pattern}} pattern="{{pattern}}" {{/if~}}
								{{~#if required}} required="required" {{/if~}}
								{{~#if (or (eq autocomplete false) (eq autocomplete 0))}}autocomplete="off" {{/if~}}
								{{~#if (or (eq autocomplete true) (eq autocomplete 1))}}autocomplete="on" {{/if~}}
								{{~#if (gt (len autocomplete) 1)}}autocomplete="{{autocomplete}}" {{/if~}}
								{{~#if formaction}}formaction="{{formaction}}" {{/if~}}
								{{~#if formenctype}}formenctype="{{formenctype}}" {{/if~}}
								{{~#if formmethod}}formmethod="{{formmethod}}" {{/if~}}
								{{~#if formnovalidate}}formnovalidate="{{formnovalidate}}" {{/if~}}
								{{~#if formtarget}}formtarget="{{formtarget}}" {{/if~}}
								{{~#if list}}list="{{list}}" {{/if~}}
								{{~#if multiple}}multiple="{{multiple}}" {{/if~}}
								{{~#if accept}}accept="{{accept}}" {{/if~}}
								{{~#if autofocus}}autofocus {{/if~}}  
							/>
							{{#if suffix}}<span class="input-group-text">{{suffix}}</span>{{/if}}
						</div>
					{{/if}}
					{{/if}}
					{{/if}}
					{{#if description}}
						<small class="form-hint mt-0">{{description}}</small>
					{{/if}}
				</label>
			{{/if}}
			{{/if}}
			{{#if (eq type "file")}}
				<!-- Change the form encoding type if this is a file input-->
				{{#delay}}formenctype="multipart/form-data"{{/delay}}
			{{/if}}
		{{/each_row}}
		</div>
		{{#if (ne validate '')}} 
			<input class="btn
			btn-{{default validate_color "primary"}}
			{{#if validate_shape}} btn-{{validate_shape}} {{/if}}
			{{#if validate_outline}} btn-outline-{{validate_outline}} {{/if}}
			{{#if validate_size}} btn-{{validate_size}} {{/if}}"
			{{flush_delayed}}
			type="submit"
			{{#if validate}}value="{{validate}}"{{/if}}>
		{{/if}}
		{{#if reset}}
			<input class="btn 
			{{#if reset_color}} btn-{{reset_color}} {{/if}}
			{{#if reset_shape}} btn-{{reset_shape}} {{/if}}
			{{#if reset_outline}} btn-outline-{{reset_outline}} {{/if}}
			{{#if reset_size}} btn-{{reset_size}} {{/if}}"
			type="reset" 
			value="{{reset}}">
		{{/if}}
	</fieldset>
</form>