# Entity

Loads the entity based on the injected $entity or creates one when create is provided as a prop

# Props

Prop name	Type	Required
share	bool()	false
create	bool()	false
disallowed-fields	array()	false
additional-form-data	object()	false
show-close-button	bool()	false
hide-buttons	bool()	false
hide-remove	bool()	false
hide-save	bool()	false

# Events

Event name	Properties	Description
entity-created
entity-saved	The `string` - current id of the entity	Emits the `fields` from an entity after the entity is saved
entity-loaded	The `string` - current id of the entity	Emits the `activeId` after the entity is loaded
entity-removed

# Slots

Name	Description	Bindings
default	The fields can be in here	fields `object` - The fields of this entity errors `object` - The errors of this entity, received after `update` or `save`
share	The space for a share button
additional-buttons-left	The space to the left of the default buttons	permissions `object` - All the permissions from the `metaData`-object fields `object` - The fields of this entity
buttons	Slot to override the default buttons (Close, Remove and Save)	permissions `object` - All the permissions from the `metaData`-object fields `object` - The fields of this entity
additional-buttons-right	The space to the right of the default buttons	permissions `object` - All the permissions from the `metaData`-object fields `object` - The fields of this entity

edit on github

# Entity

The Entity component is in the nested route, and is placed under the data table. This component will handle all CRUD-actions for you. Again, there is a pre-defined structure for this.

# Create

When you pass in the create-prop this component will fetch the permissions for this entity via the /new API-method.

<template>
  <Entity create @entity-created="handleEntityCreated">
    <template #default="{ fields, errors, permissions, isFormDisabled }"> {{ fields }} {{ errors }} {{ permissions }} {{ isFormDisabled }} </template>
  </Entity>
</template>

For example /api/customers/new GET

After all the fields are filled, and the Save-button is pressed by the user, the FormData is sent to the API which will check all the validations.

For example /api/customers POST

422 Unprocessable Entity (Example)

In this case a 422 Unprocessable Entity is returned with messages. The first message is shown automatically (by the axiosPlugin). All errors are handled by Fieldset and given to Field based on the key of the field.

{
  "messages": [
    {
      "type": "error",
      "title": "There was a problem",
      "message": "There was a problem processing this entity. Please check your data and try again"
    }
  ],
  "errors": {
    "name": {
      "validations": {
        "maxLength": {},
        "minLength": {},
        "required": false
      }
    },
    "defaultCurrency": {
      "validations": {
        "required": false
      }
    }
  }
}

200 OK (Example)

In this case a 200 OK is returned with messages. The first message is shown automatically (by the axiosPlugin) to the user. The entity that is created is return in fields.

{
  "messages": [
    {
      "type": "success",
      "title": "Entity created",
      "message": "Item has been created successfully"
    }
  ],
  "fields": {
    "id": {
      "readonly": true,
      "value": "{{$randomUUID}}"
    }
    // The `id` field is required, all fields are returned
  }
}

# Read

The entityId will automatically be determined based on Page it is used in, and will be fetched for you

For example /api/customers/:customerId GET

<template>
  <Entity>
    <template #default="{ fields, errors, permissions, isFormDisabled }"> {{ fields }} {{ errors }} {{ permissions }} {{ isFormDisabled }} </template>
  </Entity>
</template>

Data structure (Example)

{
  "metadata": {
    "permissions": {
      "action": {
        "save": true,
        "remove": true
        // Possibly other actions that the user has rights to
      },
      "relation": {
        // The relations that the user has rights to
      }
    }
  },
  "fields": {
    "id": {
      "label": "customer.id.label",
      "value": "{{$randomUUID}}"
    }
    // The `id` is a required field. There will be other fields.
  }
}

It is recommended to use the Fieldset and Field components, because they also provide data and handle permissions for you. For example a Field will not be shown when the API did not provide that field in the API-response.

# Update

For example /api/customers/:customerId PUT

# Delete

For example /api/customers/:customerId DEL

# Examples

Basic usage (Example)

<template>
  <Entity>
    <!-- Several $scoped-slots are available -->
    <Fields>
      <!-- All the `Field` components go here and will be visible when provided in `fields` -->
    </Fields>
  </Entity>
</template>

Advanced usage (Example)

<template>
  <Entity>
    <template #default>
      <EntityFields />
    </template>
    <template #buttons="{ permissions }">
      <!-- All default buttons are removed, implement your own based on the `permissions` -->
    </template>
    <template #additional-buttons-left="{ permissions }">
      <!-- Implement additional buttons here based on the `permissions` -->
    </template>
  </Entity>
</template>

# Listens

Events that are emitted on the root-instance. Can be used to trigger the component from outside the instance.

event	description	param
`clear-field-errors`	Clears the errors for a specific field	{string} The name of the field
`set-field-value`	Set a specific value for a field	{object} With `key` and `value`
`save-entity`	Triggers the entity to save itself	-
`entity-errors-changed`	Trigger the component to set new `errors`	{object} The new `errors`

← DraggableListView EntityStatusField →