Add actions to entity card

[dhoeben]

Good day all,

As this discussion goes on for a while now, I looked into the frontend files from the home-assistant repository. It seems like a very quick fix to add action to the entity card.

I suggest to add the following files:
File: src/panels/lovelace/cards/hui-entity-card.ts

Add the following lines on top:

import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
import { actionHandler } from "../common/directives/action-handler-directive";
import { findEntities } from "../common/find-entities";
import { handleAction } from "../common/handle-action";
import { hasAction } from "../common/has-action";

Add to the function setConfig:

    this._config = {
      tap_action: { action: "more-info" },
      ...config,
    };
  }

Change the return html function:

    return html`
      <ha-card @click=${this._handleClick} tabindex="0">
    `;

To this:

    return html`
      <ha-card 
        @action=${this._handleAction}
        .actionHandler=${actionHandler({
          hasHold: hasAction(this._config!.hold_action),
          hasDoubleClick: hasAction(this._config!.double_tap_action),
        })}
        role=${ifDefined(this.hasCardAction ? "button" : undefined)}
        tabindex=${ifDefined(this.hasCardAction ? "0" : undefined)}
      >

Remove this:

  private _handleClick(): void {
    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
  }

Replace with this:

  private _handleAction(ev: ActionHandlerEvent) {
    handleAction(this, this.hass!, this._config!, ev.detail.action!);
  }

Also add this:

get hasCardAction() {
   return (
     !this._config?.tap_action ||
     hasAction(this._config?.tap_action) ||
     hasAction(this._config?.hold_action) ||
     hasAction(this._config?.double_tap_action)
   );
 }

I just here to help, so I mean no harm in any way. If there is anything I can do to help, please let me know.

Cheers.
Douwe

[karwosts]

As this discussion goes on for a while now

Which discussion, did you intend this to be a reply to a different thread?

Typically if you want to suggest a code change you would setup a development env and create a pull request with the change.

[dhoeben]

If you search the forum and feature request, a lot will pop up.

I don't understand GitHub (yet), but do understand JavaScript. I'd love to submit it for review, just don't know how. That's why I chose this approach.

[karwosts]

If you do decide you want to try, our developer site is here gives a walkthrough for getting setup, and there's always #devs channels on HA Discord for additional assistance.

https://developers.home-assistant.io/docs/frontend/development/

But this is fine too to leave up in case someone else wants to implement it.