glacier-web-cli 0.5.0

Command-line tool for creating and running Glacier applications.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

{# selected: (id, name) chips, each sent as field[] (or field when not multiple); results: (id, name, facts) for the current query; note: shown under the results (e.g. two people share a name). #}
{% props field: Field, source: String, label: String = "", description: String = "", multiple: bool = true, query: String = "", selected: Vec<(String, String)> = Vec::new(), results: Vec<(String, String, Vec<String>)> = Vec::new(), note: String = "" %}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
{%- let initials = |name: &str| name.split_whitespace().filter_map(|w| w.chars().next()).take(2).collect::<String>().to_uppercase() %}
{%- let input_name = if multiple { format!("{}[]", field.name) } else { field.name.clone() } %}
<div class="ui-field" data-ui="record-picker" data-source="{{ source }}"{% if multiple %} data-multiple{% end %}>
  <label class="ui-label" for="{{ field.id }}">{{ label }}</label>
  {%- if !description.is_empty() %}
  <p class="ui-field-description" id="{{ field.id }}-description">{{ description }}</p>
  {%- end %}
  <div class="ui-combobox-chips">
    {%- for (id, name) in selected.iter() %}
    <span class="ui-chip ui-picker-chip"><span class="ui-avatar"><span class="ui-avatar-fallback">{{ initials(name) }}</span></span>{{ name }}<input type="hidden" name="{{ input_name }}" value="{{ id }}"><button type="button" aria-label="Remove {{ name }}"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></span>
    {%- end %}
    <input id="{{ field.id }}" name="q" type="search" value="{{ query }}" role="combobox" aria-expanded="{{ !results.is_empty() }}" aria-controls="{{ field.id }}-list"{% if !description.is_empty() %} aria-describedby="{{ field.id }}-description"{% end %}{% if field.has_errors() %} aria-invalid="true"{% end %}>
  </div>
  {%- if !results.is_empty() || query.chars().count() >= 2 %}
  <div class="ui-command">
    <div class="ui-command-list" role="listbox" id="{{ field.id }}-list"{% if multiple %} aria-multiselectable="true"{% end %}>
      {%- for (i, (id, name, facts)) in results.iter().enumerate() %}
      {%- let picked = selected.iter().any(|(s, _)| s == id) %}
      <div class="ui-command-item ui-picker-result" role="option" id="{{ field.id }}-{{ i + 1 }}" aria-selected="{{ picked }}" data-value="{{ id }}"><input class="ui-checkbox" type="checkbox" tabindex="-1" aria-hidden="true"{% if picked %} checked{% end %}><span class="ui-avatar"><span class="ui-avatar-fallback">{{ initials(name) }}</span></span><span class="ui-identity-text"><span class="ui-identity-name">{{ name }}</span><span class="ui-identity-meta">{% for fact in facts.iter() %}<span>{{ fact }}</span>{% end %}</span></span></div>
      {%- end %}
      {%- if results.is_empty() %}
      <div class="ui-command-empty">No one matches ‘{{ query }}’. Check the spelling or search by number.</div>
      {%- end %}
    </div>
    {%- if !note.is_empty() %}
    <div class="ui-picker-note"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>{{ note }}</div>
    {%- end %}
  </div>
  {%- end %}
  {%- if field.has_errors() %}
  <p class="ui-field-error" id="{{ field.id }}-error">{%- for message in field.errors.iter() %}{{ label }} {{ message }}. {% end %}</p>
  {%- end %}
</div>