@dile/crud 1.13.6 → 1.14.0

package/components/ajax-select-change/ajax-select-change.js

@@ -0,0 +1,2 @@
+import { DileSelectAjaxChange } from "./src/DileSelectAjaxChange.js";
+customElements.define('dile-select-ajax-change', DileSelectAjaxChange);

package/components/ajax-select-change/index.js

@@ -0,0 +1 @@
+export { DileSelectAjaxChange } from "./src/DileSelectAjaxChange.js";

package/components/ajax-select-change/src/DileSelectAjaxChange.js

@@ -0,0 +1,86 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/select/select.js';
+import '../../ajax/ajax.js';
+import { RequestApiAdapter } from '../../../lib/RequestApiAdapter.js';
+
+export class DileSelectAjaxChange extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      value: { type: String },
+      endpoint: { type: String },
+      loading: { type: Boolean },
+      method: { type: String },
+      requestApiAdapter: { type: Object },
+      dataFieldName: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.requestApiAdapter = new RequestApiAdapter();
+    this.method = 'patch';
+    this.dataFieldName = 'value';
+    this.changeHandler = this.onSelectChange.bind(this);
+  }
+
+  render() {
+    return html`
+      <dile-ajax
+        id="elajax"
+        method="${this.method}"
+        url="${this.endpoint}"
+        @ajax-success="${this.doSuccessAjax}"
+        @ajax-error="${this.doErrorAjax}"
+      ></dile-ajax>
+      <slot name="select"></slot>
+    `;
+  }
+
+  get elselect() {
+    return this.querySelector("select");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.elselect) {
+      throw new Error('Use dile-select-ajax-change with a select element in the slot "select"');
+    } else {
+      this.elselect.addEventListener("change", this.changeHandler);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.elselect) {
+      this.elselect.removeEventListener("change", this.changeHandler);
+    }
+  }
+
+  onSelectChange(e) {
+    if (!this.loading) {
+      this.loading = true;
+      this.value = e.target.value;
+      let data = {};
+      data[this.dataFieldName] = this.value;
+      let elajax = this.shadowRoot.getElementById('elajax');
+      elajax.data = data;
+      elajax.generateRequest();
+    }
+  }
+
+  doErrorAjax() {
+    this.loading = false;
+  }
+
+  doSuccessAjax() {
+    this.loading = false;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "1.13.6",
+  "version": "1.14.0",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -31,5 +31,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bee395534b845e42cb7a4f493ba50bbc9a13944d"
+  "gitHead": "5cc12dde784bca3bf51a8e2cfcd537cafb72123f"
 }