open-consul/ui-v2/app/templates/dc/intentions/-form.hbs
John Cowen 577dbef70a
UI: CSS Additions (mainly %frames) (#4623)
* Move almost everything to use %frames
* Fix pill styles of ACL types
* Remove horizontal scrollbars from dom recycling scroller component
* Make text areas look ok in Firefox
* Remove ember-bulma-css
* New form elements, break out %toggle
* %button design tweaks
* %form-element design tweaks
* Better hashicorp logo
* Small screen CSS improvements (#4624)
  1. Reduce header size when there are no breadcrumbs
  2. Make the filters toggleable, closed by default
  3. Reduce the size of the footer on small screens
  4. Hide all non-primary columns for forms
  5. Slightly change the layout of various items, mainly buttons within
forms
  6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small
screens
2018-09-21 10:18:32 +01:00

81 lines
3.7 KiB
Handlebars

<form>
<fieldset>
<label data-test-source-element class="type-text{{if item.error.SourceName ' has-error'}}">
<span>Source Service</span>
{{#power-select-with-create
options=items
searchField='Name'
selected=SourceName
searchPlaceholder='Type service name'
buildSuggestion=(action 'createNewLabel')
showCreateWhen=(action "isUnique")
oncreate=(action 'change' 'SourceName')
onchange=(action 'change' 'SourceName') as |service search|
}}
{{#if (eq service.Name '*') }}
* (All Services)
{{else}}
{{service.Name}}
{{/if}}
{{/power-select-with-create}}
<em>Choose a Consul Service, write in a future Consul Service, or write any Service URL</em>
</label>
<label data-test-destination-element class="type-text{{if item.error.DestinationName ' has-error'}}">
<span>Destination Service</span>
{{#power-select-with-create
options=items
searchField='Name'
selected=DestinationName
searchPlaceholder='Type service name'
buildSuggestion=(action 'createNewLabel')
showCreateWhen=(action "isUnique")
oncreate=(action 'change' 'DestinationName')
onchange=(action 'change' 'DestinationName') as |service|
}}
{{#if (eq service.Name '*') }}
* (All Services)
{{else}}
{{service.Name}}
{{/if}}
{{/power-select-with-create}}
<em>Choose a Consul Service, write in a future Consul Service, or write any Service URL</em>
</label>
<div role="radiogroup" class={{if item.error.Action ' has-error'}}>
{{#each intents as |intent|}}
<label>
<span>{{ capitalize intent }}</span>
<input type="radio" name="Action" value="{{intent}}" checked={{if (eq item.Action intent) 'checked'}} onchange={{ action 'change' }}/>
</label>
{{/each}}
</div>
<label class="type-text{{if item.error.Description ' has-error'}}">
<span>Description</span>
<input type="text" name="Description" value="{{item.Description}}" placeholder="Description" onchange={{action 'change'}} />
<em>Choose a Consul Service, write in a future Consul Service, or write any Service URL</em>
</label>
</fieldset>
<div>
{{#if create }}
<button type="submit" {{ action "create" item}} disabled={{if (or item.isPristine item.isInvalid) 'disabled'}}>Save</button>
{{ else }}
<button type="submit" {{ action "update" item}} disabled={{if item.isInvalid 'disabled'}}>Save</button>
{{/if}}
<button type="reset" {{ action "cancel" item}}>Cancel</button>
{{# if (and item.ID (not-eq item.ID 'anonymous')) }}
{{#confirmation-dialog message='Are you sure you want to delete this Intention?'}}
{{#block-slot 'action' as |confirm|}}
<button data-test-delete type="button" class="type-delete" {{action confirm 'delete' item parent}}>Delete</button>
{{/block-slot}}
{{#block-slot 'dialog' as |execute cancel message|}}
<p>
{{message}}
</p>
<button type="button" class="type-delete" {{action execute}}>Confirm Delete</button>
<button type="button" class="type-cancel" {{action cancel}}>Cancel</button>
{{/block-slot}}
{{/confirmation-dialog}}
{{/if}}
</div>
</form>