AutosaveStatus

component

The status of a form's draft, for the autosave controller of phil/forms-autosave: a polite live region the controller writes what it did in — saved, restored, discarded —, and the notice of a restored draft or of a newer one saved from another device or tab, hidden until then, with its buttons. It is written inside a form whose tag carries the controller, which the option autosave: true of the form gives.

Preview

Light

Code

<twig:AutosaveStatus />

Dark

Code

<twig:AutosaveStatus />

Usage

This example needs the context of a page to render; its code is below.

Code

{{ form_start(form) }}
    <twig:AutosaveStatus />
    {{ form_widget(form) }}
{{ form_end(form) }}

Installation

php bin/console ux:install autosave-status --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

Prop	Type	Default	Description
`discardLabel`	`string`	`'Discard the draft'`	The button that puts the shown values back and forgets the draft.
`dismissLabel`	`string`	`'Keep it'`	The button that hides the notice and keeps the values in the form.
`useServerLabel`	`string`	`'Use the newer draft'`	The button that puts the newer draft of another device or tab in the form.

Examples

Translated buttons

The buttons are props; the controller's messages come from the bundle's labels.

<twig:AutosaveStatus
    :discardLabel="'phil_forms_autosave.discard'|trans({}, 'phil_forms_autosave')"
    :dismissLabel="'phil_forms_autosave.dismiss'|trans({}, 'phil_forms_autosave')"
    :useServerLabel="'phil_forms_autosave.useServer'|trans({}, 'phil_forms_autosave')"
/>

Files to copy

templates/components/AutosaveStatus.html.twig

{#-
 # The status of a form's draft, for the autosave controller of phil/forms-autosave on the form's tag: a polite live
 # region the controller writes what it did in, and the notice of a restored draft or of a newer one, hidden until
 # then, with its buttons. Written inside the form.
 #}
{%- props
    ## string The button that puts the shown values back and forgets the draft.
    discardLabel = 'Discard the draft',
    ## string The button that hides the notice and keeps the values in the form.
    dismissLabel = 'Keep it',
    ## string The button that puts the newer draft of another device or tab in the form.
    useServerLabel = 'Use the newer draft'
-%}
<div{{ attributes.defaults({class: 'isStack'}) }}>
    <p class="isMuted" role="status" aria-live="polite" data-phil--forms-autosave--autosave-target="status"></p>
    <div class="isCluster" role="group" hidden data-phil--forms-autosave--autosave-target="notice">
        <p class="isGrow" data-phil--forms-autosave--autosave-target="message"></p>
        <button type="button" hidden data-phil--forms-autosave--autosave-target="useServer" data-action="phil--forms-autosave--autosave#useServer">{{ useServerLabel }}</button>
        <button type="button" data-phil--forms-autosave--autosave-target="discard" data-action="phil--forms-autosave--autosave#discard">{{ discardLabel }}</button>
        <button type="button" data-phil--forms-autosave--autosave-target="dismiss" data-action="phil--forms-autosave--autosave#dismiss">{{ dismissLabel }}</button>
    </div>
</div>