@dile/crud 0.0.40 → 0.0.41

package/components/ajax-switch/ajax-switch.js

@@ -0,0 +1,2 @@
+import { DileAjaxSwitch } from "./src/DileAjaxSwitch";
+customElements.define('dile-ajax-switch', DileAjaxSwitch);

package/components/ajax-switch/index.js

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

package/components/ajax-switch/src/DileAjaxSwitch.js

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/switch/switch';
+import '../../ajax/ajax';
+import { RequestApiAdapter } from '../../../lib/RequestApiAdapter';
+
+export class DileAjaxSwitch extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      value: { type: Boolean },
+      endpoint: { type: String },
+      checkedLabel: { type: String },
+      uncheckedLabel: { type: String },
+      loading: { type: Boolean },
+      method: { type: String },
+      requestApiAdapter: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.requestApiAdapter = new RequestApiAdapter();
+    this.method = 'patch';
+  }
+
+  render() {
+    return html`
+      <dile-ajax
+        id="elajax"
+        method="${this.method}"
+        url="${this.endpoint}"
+        @ajax-success="${this.doSuccessAjax}"
+        @ajax-error="${this.doErrorAjax}"
+      ></dile-ajax>
+      <dile-switch
+        ?disabled=${this.loading} 
+        ?checked=${this.value}
+        useReactiveLabels
+        checkedLabel="${this.checkedLabel}"
+        uncheckedLabel="${this.uncheckedLabel}"
+        @dile-switch-changed=${this.save}
+      ></dile-switch>
+    `;
+  }
+
+  save(e) {
+    if(!this.loading) {
+      this.loading = true;
+      this.value = e.detail.checked;
+      let data = {
+        value: this.value
+      }
+      let elajax = this.shadowRoot.getElementById('elajax');
+      elajax.data = this.requestApiAdapter.adaptBooleanValue(data);
+      elajax.generateRequest();
+    }
+  }
+
+  doErrorAjax() {
+    this.loading = false;
+    this.value = !this.value;
+  }
+
+  doSuccessAjax() {
+    this.loading = false;
+  }
+}
+

package/lib/RequestApiAdapter.js

@@ -12,4 +12,7 @@ export class RequestApiAdapter {
   adaptIdsRequestData(data) {
     return data;
   }
+  adaptBooleanValue(data) {
+    return data;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -24,12 +24,12 @@
   },
   "homepage": "https://dile-components.polydile.com/",
   "dependencies": {
-    "@dile/ui": "^2.1.18",
+    "@dile/ui": "^2.1.19",
     "axios": "^1.7.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "04e4cb1ee801ba221847efb9e8067102de43192e"
+  "gitHead": "6f6fd44a9d3244f6f73e29d50a00a4eb8277286b"
 }