@dile/crud 1.7.7 → 1.8.1

package/components/ajax-form/confirmed-ajax-form.js

@@ -0,0 +1,2 @@
+import { DileConfirmedAjaxForm } from './src/DileConfirmedAjaxForm.js';
+customElements.define('dile-confirmed-ajax-form', DileConfirmedAjaxForm);

package/components/ajax-form/index.js

@@ -1 +1,2 @@
-export { DileAjaxForm } from './src/DileAjaxForm.js';
+export { DileAjaxForm } from './src/DileAjaxForm.js';
+export { DileConfirmedAjaxForm } from './src/DileConfirmedAjaxForm.js';

package/components/ajax-form/src/DileConfirmedAjaxForm.js

@@ -0,0 +1,89 @@
+/**
+ *
+ * # DileConfirmedAjaxForm
+ *
+ * Ajax form component that requires confirmation before submission
+ *
+ */
+
+import { LitElement, html } from 'lit';
+import '@dile/ui/components/confirm/confirm.js';
+import { DileAjaxForm } from './DileAjaxForm.js';
+
+export class DileConfirmedAjaxForm extends DileAjaxForm {
+
+  static get properties() {
+    return {
+      ...super.properties,
+      confirmText: { type: String },
+      acceptLabel: { type: String },
+      cancelLabel: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.confirmText = null;
+    this.acceptLabel = null;
+    this.cancelLabel = null;
+  }
+
+  render() {
+    return html`
+      ${super.render()}
+      <dile-confirm
+        id="confirmDialog"
+        @dile-confirm-accepted="${this.onConfirmAccepted}"
+        @dile-confirm-cancelled="${this.onConfirmCancelled}"
+        .acceptLabel="${this.computeAcceptLabel()}"
+        .cancelLabel="${this.computeCancelLabel()}"
+        blocking
+      >
+        <p>${this.computeConfirmText()}</p>
+      </dile-confirm>
+    `;
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.confirmDialog = this.shadowRoot.getElementById('confirmDialog');
+  }
+
+  doAction() {
+    this.feedback.clear();
+    this.confirmDialog.open();
+  }
+
+  onConfirmAccepted() {
+    // Call the parent's doAction method directly, bypassing our override
+    const formData = this.form.getData();
+    this.ajaxsave.data = formData;
+    this.ajaxsave.generateRequest();
+  }
+
+  onConfirmCancelled() {
+    // Silently cancel, just close the dialog
+    // No action needed
+  }
+
+  computeConfirmText() {
+    if (this.confirmText) {
+      return this.confirmText;
+    }
+    return this.translations?.confirm_submit_text || 'Are you sure you want to submit this form?';
+  }
+
+  computeAcceptLabel() {
+    if (this.acceptLabel) {
+      return this.acceptLabel;
+    }
+    return this.translations?.accept_label || 'Accept';
+  }
+
+  computeCancelLabel() {
+    if (this.cancelLabel) {
+      return this.cancelLabel;
+    }
+    return this.translations?.cancel_label || 'Cancel';
+  }
+}

package/components/list/src/DileCrudList.js

@@ -205,8 +205,8 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                 <dile-crud-list-item 
                     itemId="${this.computeItemId(element)}"
                     .actionIds="${this.actionIds}"
-                    ?disableEdit=${this.config?.customization?.disableEdit}
-                    ?disableDelete=${this.config?.customization?.disableDelete}
+                    ?disableEdit=${!this.isItemEditable(element)}
+                    ?disableDelete=${!this.isItemDeletable(element)}
                     ?disableRestore=${this.config?.customization?.disableRestore}
                     ?hideCheckboxSelection="${this.config?.customization?.hideCheckboxSelection}"
                     @item-checkbox-changed=${this.onItemsCheckboxChanged}
@@ -229,6 +229,18 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         return this.config.computeItemId(element);
     }
 
+    isItemEditable(element) {
+        const isGloballyDisabled = this.config?.customization?.disableEdit;
+        const isItemEditable = this.config?.isItemEditable(element) ?? true;
+        return !isGloballyDisabled && isItemEditable;
+    }
+
+    isItemDeletable(element) {
+        const isGloballyDisabled = this.config?.customization?.disableDelete;
+        const isItemDeletable = this.config?.isItemDeletable(element) ?? true;
+        return !isGloballyDisabled && isItemDeletable;
+    }
+
     get allIdsUrl() {
         return `${this.config.endpoint}/allids`;
     }

package/lib/defaultConfig.js

@@ -39,12 +39,15 @@ export const defaultConfig = {
   updateOperation: {
     type: 'modal'
   },
-  insertOperation: {
-    type: 'modal'
-  },
   computeItemId(element) {
     return element.id;
   },
+  isItemEditable(element) {
+    return true;
+  },
+  isItemDeletable(element) {
+    return true;
+  },
   actions: {
     list: [
       {

package/lib/i18n/en.js

@@ -52,4 +52,6 @@ export const translations = {
   select_file: "Select file",
   selected_file: "Selected file",
   extension_allowed: "Only this file extensions are allowed: ",
+  confirm_submit_title: "Confirm submission",
+  confirm_submit_text: "Are you sure you want to submit this form?",
 };

package/lib/i18n/es.js

@@ -52,4 +52,6 @@ export const translations = {
   select_file: "Seleccionar archivo",
   selected_file: "Archivo seleccionado",
   extension_allowed: "Solo se permiten estas extensiones: ",
+  confirm_submit_title: "Confirmar envío",
+  confirm_submit_text: "¿Estás seguro de que deseas enviar este formulario?",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "1.7.7",
+  "version": "1.8.1",
   "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": "f310fdea494e5d964961f5918c1906dfb0f6b66d"
+  "gitHead": "5c09eb3ba4a0f9fcc4235d670c00ab91bf68860c"
 }