open-vault/ui/app/templates/components/search-select.hbs
Madalyn 43f4c5532d use ember-power-select-with-create instead of ember-power-select (#6728)
* use ember-power-select-with-create instead of ember-power-select

* add custom Add message to clarify whether you need a name or ID

* add search-select to storybook

* add wormhole div for ember-basic-dropdown

* add search-select to storybook

* make sure knobs are working

* remove unused code
2019-06-03 15:25:59 -05:00

56 lines
1.6 KiB
Handlebars

{{#if shouldUseFallback}}
{{component
fallbackComponent
label=label
onChange=(action "onChange")
inputValue=inputValue
helpText=helpText
}}
{{else}}
<label class="title is-4" data-test-field-label>
{{label}}
{{#if helpText}}
{{#info-tooltip}}{{helpText}}{{/info-tooltip}}
{{/if}}
</label>
{{#power-select-with-create
options=options
onchange=(action "selectOption")
oncreate=(action "createOption")
placeholderComponent=(component "search-select-placeholder")
renderInPlace=true
searchField="searchText"
verticalPosition="below"
showCreateWhen=(action "hideCreateOptionOnSameID")
buildSuggestion=(action "constructSuggestion") as |option|
}}
{{#if shouldRenderName}}
{{option.name}}
<small class="search-select-list-key" data-test-smaller-id="true">
{{option.id}}
</small>
{{else}}
{{option.id}}
{{/if}}
{{/power-select-with-create}}
<ul class="search-select-list">
{{#each selectedOptions as |selected|}}
<li class="search-select-list-item" data-test-selected-option="true">
{{#if shouldRenderName}}
{{selected.name}}
<small class="search-select-list-key" data-test-smaller-id="true">
{{selected.id}}
</small>
{{else}}
{{selected.id}}
{{/if}}
<div class="control">
<button type="button" class="button is-ghost" data-test-selected-list-button="delete"
{{action "discardSelection" selected}}>
<Icon @glyph="trash" />
</button>
</div>
</li>
{{/each}}
</ul>
{{/if}}