logo dile-components dile-components

dile-crud-insert

The dile-crud-insert component is essentially a wrapper around dile-ajax-form, configured to perform the operation of inserting records into a REST API more conveniently and with less verbosity.

Additionally, instead of using slots to inject the insertion form for the resource, the component uses a template function assigned via an attribute. This approach offers greater versatility in declaring the insertion form.

Installation

npm i @dile/crud

Usage

Import the dile-crud-insert component.

import '@dile/crud/components/insert/crud-insert.js';

Use the component.

<dile-crud-insert
  title="Insert a country"
  endpoint="api/countries"
  .formTemplate=${ () => html`<demo-country-form id="insertform"></demo-country-form>` }
></dile-crud-insert>

Properties

Methods

Events

Since this component is based on dile-ajax-form, the events dispatched by it can also be listened to in dile-crud-insert.

CSS custom properties

See the dile-ajax-form documentation to find the available custom CSS properties.

Configuration

For this component to function properly, it is necessary to apply the configurations mentioned on the CRUD system documentation page and on the dile-ajax-form component page.

BelongsTo and relationId configuration

The configuration of the belongsTo and relationId properties is used to customize certain form fields when creating records, so that these records are related to another entity.

For example, a country may belong to a continent, and when you create a country, you may want the continent to already be set, such as Europe. Similarly, an invoice belongs to a customer, and when you create an invoice, you want a specific customer to be pre-selected in the form.

To achieve this, the dile-insert-form component should be configured with the belongsTo and relationId attributes. However, the dile-insert-form component does not apply this customization to the form directly; it simply passes these configurations to the form template component, which applies them to the required fields.

Receiving belongsTo data in the Form Component

If you need to work with belongsTo and relationId, there are two steps to receive these values in the form component.

Step 1: The function provided as the form template must accept belongsTo and relationId as parameters and pass them to the form component.

(belongsTo, relationId) => html`<demo-board-game-form id="insertform" belongsTo="${belongsTo}" relationId="${relationId}"></demo-board-game-form>`

Step 2: The form component should declare both properties and use them to set the necessary form fields.

Typically, this would be done in the firstUpdated() method when initializing the form.

static get properties() {
  return {
    belongsTo: { type: String },
    relationId: { type: String },
  };
}

firstUpdated() {
  if(this.belongsTo == "country" && this.relationId) {
    this.shadowRoot.getElementById('countryselect').value = this.relationId;
  }
}

You will find a complete demo in the examples section.

Examples

From component

To implement the insertion component, you will need a component that acts as a form. This component should be developed as outlined in the dile-ajax-form documentation.

<script type="module">
import { LitElement, html, css } from 'lit';
import '@dile/ui/components/input/input.js';
import '@dile/ui/components/select/select.js';
import { DileForm } from '@dile/ui/mixins/form'

export class DemoCountryForm extends DileForm(LitElement) {
  static styles = [
    css`
      :host {
        display: block;
      }
    `
  ];

  render() {
    return html`
      <dile-input label="Country name" name="name" id="name" hideErrorOnInput></dile-input>
      <dile-input label="Slug" name="slug" id="slug" hideErrorOnInput></dile-input>
      <dile-select name="continent" id="continent" label="Continent" hideErrorOnInput>
        <select slot="select">
          <option value="">Select...</option>
          <option value="Europe">Europa</option>
          <option value="South America">América del Sur</option>
          <option value="North America">Norte América</option>
          <option value="Asia">Asia</option>
          <option value="Africa">Africa</option>
          <option value="Oceania">Oceania</option>
        </select>
      </dile-select>
    `;
  }
}
customElements.define('demo-country-form', DemoCountryForm);
</script>
<demo-country-form></demo-country-form>

Insert example

<script type="module">
  import '@dile/crud/components/insert/crud-insert.js'
  import { LitElement, html, css } from 'lit';

  class CrudInsertDemo extends LitElement {
    static styles = [
      css`
        :host {
          display: block;
        }
      `
    ];
  
    render() {
      return html`
        <dile-crud-insert
          title="Insert a country"
          endpoint="https://timer.escuelait.com/api/countries"
          .formTemplate=${() => html`<demo-country-form id="insertform"></demo-country-form>`}
        ></dile-crud-insert>
      `;
    }
  }
  customElements.define('crud-insert-demo', CrudInsertDemo);
</script>
<crud-insert-demo></crud-insert-demo>

BelongsTo Example

Here you can see an example of the functionality that can be incorporated using the belongsTo and relationId properties of dile-crud-insert.

From component

Just like in the previous example, you need a component to function as the form. Additionally, this component must also declare the belongsTo and relationId properties in order to work with them and set the related field accordingly.

<script type="module">
import { LitElement, html, css } from 'lit';
import '@dile/ui/components/input/input.js';
import '@dile/ui/components/input/input-integer.js';
import '@dile/ui/components/checkbox/checkbox.js';
import '@dile/crud/components/ajax-select-crud/ajax-select-crud';

import { DileForm } from '@dile/ui/mixins/form'

export class DemoBoardGamesForm extends DileForm(LitElement) {
  static styles = [
    css`
      :host {
        display: block;
      }
    `
  ];

  static get properties() {
    return {
      belongsTo: { type: String },
      relationId: { type: String },
    };
  }

  firstUpdated() {
    if(this.belongsTo == "country" && this.relationId) {
      this.shadowRoot.getElementById('countryselect').value = this.relationId;
    }
  }

  render() {
    return html`
      <dile-input label="Nombre" name="name" id="name" hideErrorOnInput></dile-input>
      <dile-input label="Slug" name="slug" id="slug" hideErrorOnInput></dile-input>
      <dile-input-integer name="year" label="Year" hideErrorOnInput id="year"></dile-input-integer>
      <dile-ajax-select-crud
          id="countryselect"
          idProperty="id"
          name="country_id"
          label="País"
          endpoint="https://timer.escuelait.com/api/countries" 
          queryStringVariable="keyword"
          placeholder="Buscar país"
          resultDataProperty="data"
          displayProperty="name"
          selectDefaultPlaceholder="Seleccionar país..."
      ></dile-ajax-select-crud>
      <p><dile-checkbox name="essential">Essential</dile-checkbox></p>
    `;
  }
}
customElements.define('demo-board-game-form', DemoBoardGamesForm);
</script>
<demo-board-game-form></demo-board-game-form>

Insert example

As you can see in the following example, when using the dile-crud-insert component, we are sending certain values in the belongsTo and relatedId properties. These properties are then received in the template function and passed on to the component that serves as the form.

<script type="module">
  import '@dile/crud/components/insert/crud-insert.js'
  import { LitElement, html, css } from 'lit';

  class CrudInsertBoardGameDemo extends LitElement {
    static styles = [
      css`
        :host {
          display: block;
        }
      `
    ];
  
    render() {
      return html`
        <dile-crud-insert
          title="Insert a board game"
          endpoint="https://timer.escuelait.com/api/board-games"
          belongsTo="country"
          relationId="1"
          .formTemplate=${(belongsTo, relationId) => html`<demo-board-game-form belongsTo="${belongsTo}" relationId="${relationId}" id="insertform"></demo-board-game-form>`}
        ></dile-crud-insert>
      `;
    }
  }
  customElements.define('crud-insert-board-game-demo', CrudInsertBoardGameDemo);
</script>
<crud-insert-board-game-demo></crud-insert-board-game-demo>