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