status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/ui/packages/consul-ui/app/components/text-input/index.hbs

49 lines
1.2 KiB
Handlebars
Raw Normal View History

ui: Adds initial CRUD for partitions (#11188) * Add `is` and `test` helpers in a similar vein to `can` Adds 2 new helpers in a similar vein to ember-cans can: - `is` allows you to use vocab/phrases such as (is "something model") which calls isSomething() on the models ability. - `test` allows you to use vocab/phrases such as (test "is something model") or (test "can something model")which calls isSomething() / canSomething() on the models ability. Mostly using the is helper and the can helper. It's basically the is/can helper combined. * Adds TextInput component + related modifiers/helpers/machines/services (#11189) Adds a few new components/modifiers/helpers to aid building forms. - state-chart helper, used in lieu of a more generic approach for requiring our statecharts. - A few modifications to our existing disabled modifier. - A new 'validation' modifier, a super small form validation approach built to make use of state charts (optionally). Eventually we should be able to replace our current validation approach (ember-changeset-validations + extra deps) with this. - A new TextInput component, which is the first of our new components specifically to make it easy to build forms with validations. This is still a WIP, I left some comments in pointing out where this one would be progressed, but as we don't need the planned functionality yet, I left it where it was. All of this will be fleshed out more at a later date. Documentation is included for all of ^ * ui: Adds initial CRUD for partitions (#11190) Adds basic CRUD support for partitions. Engineering-wise probably the biggest takeaway here is that we needed to write very little javascript code to add this entire feature, and the little javascript we did need to write was very straightforwards. Everything is pretty much just HTML. Another note to make is that both ember-changeset and ember-data (model layer things) are now completely abstracted away from the view layer of the application. New components: - Consul::Partition::Form - Consul::Partition::List - Consul::Partition::Notifications - Consul::Partition::SearchBar - Consul::Partition::Selector See additional documentation here for more details New Route templates: - index.hbs partition listing/searching/filtering - edit.hbs partition editing and creation Additionally: There is some additional debug work here for better observability and to prevent any errors regarding our href-to usage when a dc is not available in our documentation site. Our softDelete functionality has been DRYed out a little to be used across two repos. isLinkable was removed from our ListCollection component for lists like upstream and service listing, and instead use our new is helper from within the ListCollection, meaning we've added a few more lighterweight templateOnly components. * ui: Exclude all debug-like files from the build (#11211) This PR adds **/*-debug.* to our test/prod excluded files (realised I needed to add test-support.js also so added that here as its more or less the same thing). Conditionally juggling ES6 static imports (specifically debug ones) for this was also getting a little hairy, so I moved it all to use the same approach as our conditional routes. All in all it brings the vendor build back down to ~430kb gzipped.
2021-10-08 15:29:30 +00:00
<label
class={{concat 'text-input' ' type-text' (if (get @chart.state.context.errors @name) ' has-error')}}
...attributes
>
<span>
{{!- add an optional slot here called <:label>-}}
{{or @label @name}}
</span>
{{!- add an optional slot here called <:input>?-}}
{{#if @expanded}}
<textarea
{{validate @item
validations=@validations
chart=@chart
}}
{{on 'input' (optional @oninput)}}
name={{@name}}
>{{or @value (get @item @name)}}</textarea>
{{else}}
<input
{{validate @item
validations=@validations
chart=@chart
}}
{{on 'input' (optional @oninput)}}
type="text"
value={{or @value (get @item @name)}}
name={{@name}}
placeholder={{or @placeholder}}
/>
{{/if}}
{{#let
(or @validations.help @help)
as |help|}}
{{#if help}}
{{!- add an optional slot here called <:help>?-}}
<em>
{{help}}
</em>
{{/if}}
{{/let}}
<State @state={{@chart.state}} @matches="error">
{{!- add an optional slot here called <:alert/error/success>?-}}
<strong
role="alert"
>{{get (get @chart.state.context.errors @name) 'message'}}</strong>
</State>
</label>