@dile/crud 0.0.39 → 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/components/single/src/DileCrudSingle.js

@@ -80,7 +80,9 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
       <main class="elcontainer">
         ${this.detailTemplate}
         <div class="actions" @action-success=${this.actionSuccess}>
-            <dile-button gray .icon="${editIcon}" @click=${this.edit}>${this.updateLabelComputed(this.config.labels.updateAction, this.translations)}</dile-button>
+            <dile-button gray .icon="${editIcon}" @click=${this.edit}>
+              ${this.startUpdateLabelComputed(this.config.labels.startUpdateAction, this.translations)}
+            </dile-button>
             ${this.actionsTemplate}
         </div>
       </main>

package/lib/DileCrudMixin.js

@@ -58,6 +58,9 @@ export const DileCrudMixin = (superclass) => class extends superclass {
     updateLabelComputed(label, translations) {
         return label ? label : translations?.update_label ? translations.update_label : 'Save';
     }
+    startUpdateLabelComputed(label, translations) {
+        return label ? label : translations?.start_update_label ? translations.start_update_label : 'Edit';
+    }
     helpLabelComputed(label, translations) {
         return label ? label : translations?.help_label ? translations.help_label : 'Help';
     }

package/lib/RequestApiAdapter.js

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

package/lib/defaultConfig.js

@@ -70,6 +70,7 @@ export const defaultConfig = {
   labels: {
     // insertAction: 'Create',
     // updateAction: 'Save',
+    // startUpdateAction: 'Edit',
     // insertWindowTitle: 'Create an item',
     // updateWindowTitle: 'Update an item',
     // helpTitle: 'Help',

package/lib/i18n/en.js

@@ -13,6 +13,7 @@ export const translations = {
   error_operation: (operation) => `${operation == 'insert' ? 'Insertion' : 'Update'} error`,
   insert_label: "Create",
   update_label: "Update",
+  start_update_label: "Edit",
   delete_label: "Delete",
   cancel_label: "Cancel",
   accept_label: "Accept",

package/lib/i18n/es.js

@@ -13,6 +13,7 @@ export const translations = {
   error_operation: (operation) => `Se ha producido un error en la ${operation == 'insert' ? 'inserción' : 'actualización'}`,
   insert_label: "Insertar",
   update_label: "Actualizar",
+  start_update_label: "Editar",
   delete_label: "Borrar",
   cancel_label: "Cancelar",
   accept_label: "Aceptar",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.39",
+  "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": "47a3da898c4ef2856603eb98b41c8e3b09bef1df"
+  "gitHead": "6f6fd44a9d3244f6f73e29d50a00a4eb8277286b"
 }