{
  "id": "L06",
  "title": "Entry actions",
  "topic": "lists",
  "use": "Actions that act on a single entry stand at the end of its row. Their label is the verb alone — the entry already names the object. From the third action on, they move into a menu. Here three amounts stand one below the other — one action, two, and from the third on the menu.",
  "decisions": [
    "The row carries the verb alone: “Approve”, not “Approve payroll run” — the entry names the object, and in eighty rows it would be one word too many eighty times.",
    "Every row is treated the same: labeled buttons here and bare symbols there is worse than either version on its own.",
    "No more than two buttons stand in a row; the third and every further action go into More, where each keeps its full label with its object, because the entry is no longer beside it. The two that stay are the ones needed every day.",
    "The destructive action stands last in the menu, behind a divider.",
    "An action in an entry is a button, not a text link: a link leads on, a button does something.",
    "The actions stand beside the entry's content, not in it, so each is a tab stop of its own; whatever they do is confirmed with the entry they were pressed in.",
    "A running action shows that it is working and takes no second press meanwhile: two presses on Approve approve once."
  ],
  "try": [
    {
      "do": "Compare the three versions",
      "then": "one action, two, and two with More for the rest"
    },
    {
      "do": "Read the labels in the rows",
      "then": "the verb alone, because the entry names the object"
    },
    {
      "do": "Open More in the third version",
      "then": "the labels there are complete, with their object, and Discard payroll run stands last, behind a divider"
    },
    {
      "do": "Press Approve in the row of Odenwälder Präzisionsguss AG twice in a row",
      "then": "the button shows it is working, and one confirmation names the payroll run and Odenwälder Präzisionsguss AG"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<div id=\"l06-cases\" class=\"ed-stack ed-gap-6\">\n  <!-- Demo only, not part of the pattern. Each version stands on a screen of its own; the heading only names the case here. -->\n  <ed-list label=\"Payroll runs to approve\">\n    <ed-list-item>\n      Bergmann &amp; Söhne Fahrzeugtechnik GmbH &amp; Co. KG\n      <span slot=\"description\">Payroll run July 2026 · 84 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n    </ed-list-item>\n    <ed-list-item>\n      Odenwälder Präzisionsguss AG\n      <span slot=\"description\">Payroll run July 2026 · 31 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n    </ed-list-item>\n    <ed-list-item>\n      Bäckerei Pfeiffer-Zimmermann e. K.\n      <span slot=\"description\">Payroll run July 2026 · 9 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n    </ed-list-item>\n  </ed-list>\n\n  <!-- Demo only, not part of the pattern. Each version stands on a screen of its own; the heading only names the case here. -->\n  <ed-list label=\"Payroll runs to review\">\n    <ed-list-item>\n      Bergmann &amp; Söhne Fahrzeugtechnik GmbH &amp; Co. KG\n      <span slot=\"description\">Payroll run July 2026 · 84 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"review\"><ed-icon slot=\"start\" name=\"search\"></ed-icon>Review</ed-button>\n    </ed-list-item>\n    <ed-list-item>\n      Odenwälder Präzisionsguss AG\n      <span slot=\"description\">Payroll run July 2026 · 31 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"review\"><ed-icon slot=\"start\" name=\"search\"></ed-icon>Review</ed-button>\n    </ed-list-item>\n    <ed-list-item>\n      Bäckerei Pfeiffer-Zimmermann e. K.\n      <span slot=\"description\">Payroll run July 2026 · 9 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"review\"><ed-icon slot=\"start\" name=\"search\"></ed-icon>Review</ed-button>\n    </ed-list-item>\n  </ed-list>\n\n  <!-- Demo only, not part of the pattern. Each version stands on a screen of its own; the heading only names the case here. -->\n  <ed-list label=\"Payroll runs in progress\">\n    <ed-list-item>\n      Bergmann &amp; Söhne Fahrzeugtechnik GmbH &amp; Co. KG\n      <span slot=\"description\">Payroll run July 2026 · 84 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"review\"><ed-icon slot=\"start\" name=\"search\"></ed-icon>Review</ed-button>\n      <ed-dropdown slot=\"actions\">\n        <ed-button slot=\"trigger\" appearance=\"plain\" with-caret>More</ed-button>\n        <ed-dropdown-item value=\"download\">Download payroll journal</ed-dropdown-item>\n        <ed-dropdown-item value=\"hand-over\">Hand payroll run over to office management</ed-dropdown-item>\n        <ed-divider></ed-divider>\n        <ed-dropdown-item value=\"discard\">Discard payroll run</ed-dropdown-item>\n      </ed-dropdown>\n    </ed-list-item>\n    <ed-list-item>\n      Odenwälder Präzisionsguss AG\n      <span slot=\"description\">Payroll run July 2026 · 31 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"review\"><ed-icon slot=\"start\" name=\"search\"></ed-icon>Review</ed-button>\n      <ed-dropdown slot=\"actions\">\n        <ed-button slot=\"trigger\" appearance=\"plain\" with-caret>More</ed-button>\n        <ed-dropdown-item value=\"download\">Download payroll journal</ed-dropdown-item>\n        <ed-dropdown-item value=\"hand-over\">Hand payroll run over to office management</ed-dropdown-item>\n        <ed-divider></ed-divider>\n        <ed-dropdown-item value=\"discard\">Discard payroll run</ed-dropdown-item>\n      </ed-dropdown>\n    </ed-list-item>\n    <ed-list-item>\n      Bäckerei Pfeiffer-Zimmermann e. K.\n      <span slot=\"description\">Payroll run July 2026 · 9 employees</span>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"approve\"><ed-icon slot=\"start\" name=\"check\"></ed-icon>Approve</ed-button>\n      <ed-button slot=\"actions\" appearance=\"plain\" data-action=\"review\"><ed-icon slot=\"start\" name=\"search\"></ed-icon>Review</ed-button>\n      <ed-dropdown slot=\"actions\">\n        <ed-button slot=\"trigger\" appearance=\"plain\" with-caret>More</ed-button>\n        <ed-dropdown-item value=\"download\">Download payroll journal</ed-dropdown-item>\n        <ed-dropdown-item value=\"hand-over\">Hand payroll run over to office management</ed-dropdown-item>\n        <ed-divider></ed-divider>\n        <ed-dropdown-item value=\"discard\">Discard payroll run</ed-dropdown-item>\n      </ed-dropdown>\n    </ed-list-item>\n  </ed-list>\n</div>\n\n<ed-toast-stack id=\"l06-toasts\"></ed-toast-stack>\n\n<!-- Demo only, not part of the pattern. The product supplies runAction(action, client), which carries out approve, review, download, hand-over or discard on the client's current payroll run and resolves with that run's name once it is done. What the screen does when it fails, and the question before Discard, are not part of this pattern. -->\n\n<script type=\"module\">\n  await customElements.whenDefined('ed-toast-stack');\n\n  const toasts = document.getElementById('l06-toasts');\n  const done = {\n    approve: 'approved',\n    review: 'opened for review',\n    download: 'journal downloaded',\n    'hand-over': 'handed over to office management',\n    discard: 'discarded'\n  };\n\n  // The entry an action stands in is the object it acts on; its primary line names the client.\n  const clientOf = element =>\n    [...element.closest('ed-list-item').childNodes]\n      .filter(node => node.nodeType === Node.TEXT_NODE)\n      .map(node => node.textContent)\n      .join('')\n      .trim();\n\n  // An action that is still running takes no second press. A loading button refuses the click\n  // itself; a menu item has no loading state, so the entry and the action are held here.\n  const running = new Set();\n\n  async function act(action, element, button) {\n    const client = clientOf(element);\n    const key = `${client}\\n${action}`;\n    if (running.has(key)) return;\n    running.add(key);\n    if (button) button.loading = true;\n    try {\n      const run = await runAction(action, client);\n      toasts.create({ variant: 'success', title: `${run} ${done[action]}`, description: client });\n    } finally {\n      running.delete(key);\n      if (button) button.loading = false;\n    }\n  }\n\n  const cases = document.getElementById('l06-cases');\n  cases.addEventListener('click', event => {\n    const button = event.target.closest('ed-button[data-action]');\n    if (button) act(button.dataset.action, button, button);\n  });\n  cases.addEventListener('ed-dropdown-select', event => act(event.detail.item.value, event.target));\n</script>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/l06-entry-actions/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/"
}
