mirror of
https://github.com/status-im/consul.git
synced 2025-03-02 14:20:39 +00:00
3f131dcf34
- Moves where they appear up to the <App /> component.
- Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers.
- Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
124 lines
2.9 KiB
Handlebars
124 lines
2.9 KiB
Handlebars
<StateChart @src={{chart}} as |State Guard Action dispatch state|>
|
|
|
|
<Ref @target={{this}} @name="dispatch" @value={{dispatch}} />
|
|
|
|
{{#let (hash
|
|
data=data
|
|
error=error
|
|
persist=(action "persist")
|
|
delete=(queue (action (mut data)) (action dispatch "REMOVE"))
|
|
inflight=(state-matches state (array "persisting" "removing"))
|
|
disabled=(state-matches state (array "persisting" "removing"))
|
|
) as |api|}}
|
|
|
|
{{yield api}}
|
|
|
|
<State @matches="removing">
|
|
<DataSink
|
|
@sink={{sink}}
|
|
@item={{data}}
|
|
@data={{null}}
|
|
@onchange={{action dispatch "SUCCESS"}}
|
|
@onerror={{queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR")}}
|
|
/>
|
|
</State>
|
|
|
|
<State @matches="persisting">
|
|
<DataSink
|
|
@sink={{sink}}
|
|
@item={{data}}
|
|
@onchange={{action dispatch "SUCCESS"}}
|
|
@onerror={{queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR")}}
|
|
/>
|
|
</State>
|
|
|
|
<State @matches="removed">
|
|
{{#let
|
|
(queue (action dispatch "RESET") (action ondelete))
|
|
as |after|}}
|
|
{{#yield-slot name="removed" params=(block-params after)}}
|
|
{{yield api}}
|
|
{{else}}
|
|
<Notice
|
|
{{notification
|
|
after=(action after)
|
|
}}
|
|
class="notification-delete"
|
|
@type="success"
|
|
as |notice|>
|
|
<notice.Header>
|
|
<strong>Success!</strong>
|
|
</notice.Header>
|
|
<notice.Body>
|
|
<p>
|
|
Your {{or label type}} has been deleted.
|
|
</p>
|
|
</notice.Body>
|
|
</Notice>
|
|
{{/yield-slot}}
|
|
{{/let}}
|
|
</State>
|
|
|
|
<State @matches="persisted">
|
|
{{#let
|
|
(action onchange)
|
|
as |after|}}
|
|
{{#yield-slot name="persisted" params=(block-params after)}}
|
|
{{yield api}}
|
|
{{else}}
|
|
<Notice
|
|
{{notification
|
|
after=(action after)
|
|
}}
|
|
class="notification-update"
|
|
@type="success"
|
|
as |notice|>
|
|
<notice.Header>
|
|
<strong>Success!</strong>
|
|
</notice.Header>
|
|
<notice.Body>
|
|
<p>
|
|
Your {{or label type}} has been saved.
|
|
</p>
|
|
</notice.Body>
|
|
</Notice>
|
|
{{/yield-slot}}
|
|
{{/let}}
|
|
</State>
|
|
|
|
<State @matches="error">
|
|
{{#let
|
|
(action dispatch "RESET")
|
|
as |after|}}
|
|
{{#yield-slot name="error" params=(block-params after)}}
|
|
{{yield api}}
|
|
{{else}}
|
|
<Notice
|
|
{{notification
|
|
after=(action after)
|
|
}}
|
|
class="notification-update"
|
|
@type="error"
|
|
as |notice|>
|
|
<notice.Header>
|
|
<strong>Error!</strong>
|
|
</notice.Header>
|
|
<notice.Body>
|
|
<p>
|
|
There was an error saving your {{or label type}}.
|
|
{{#if (and api.error.status api.error.detail)}}
|
|
<br />{{api.error.status}}: {{api.error.detail}}
|
|
{{/if}}
|
|
</p>
|
|
</notice.Body>
|
|
</Notice>
|
|
{{/yield-slot}}
|
|
{{/let}}
|
|
</State>
|
|
|
|
<YieldSlot @name="content">
|
|
{{yield api}}
|
|
</YieldSlot>
|
|
|
|
{{/let}}
|
|
</StateChart> |