@dile/crud 0.0.51 → 0.0.53

package/components/action/src/DileCrudActions.js

@@ -131,12 +131,16 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
                 @dile-confirm-accepted=${this.doAction}
             >
                 <div class="modalcontainer">
-                    ${this.formActionsTemplate(this.selection)}
+                    ${this.actionsTemplateRunner}
                 </div>
             </dile-confirm>
         `;
   }
 
+  get actionsTemplateRunner() {
+    return this.formActionsTemplate(this.selection, this.actionIds);
+  }
+
   setActionIds(items) {
     this.actionIds = items;
   }

package/components/action/src/DileCrudSingleActions.js

@@ -37,6 +37,7 @@ export class DileCrudSingleActions extends DileCrudActions {
   static get properties() {
     return {
       actions: { type: Array },
+      element: { type: Object },
     };
   }
 
@@ -69,7 +70,9 @@ export class DileCrudSingleActions extends DileCrudActions {
         `;
   }
 
-
+  get actionsTemplateRunner() {
+    return html`${this.formActionsTemplate(this.selection, this.element)}`;
+  }
 
   onActionSelected(e) {
     this.selection = e.detail.selected;

package/components/ajax/src/DileAjax.js

@@ -98,6 +98,9 @@ export class DileAjax extends DileAxios(DileI18nMixin(LitElement)) {
         case 405:
             this.dispatchError(this.translations.http_405);
             break;
+        case 413:
+          this.dispatchError(this.translations.http_413);
+          break;
         case 419:
           this.dispatchError(this.translations.http_419);
           break;

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

@@ -20,6 +20,17 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
             .actions {
                 margin-top: var(--dile-ajax-form-actions-margin-top, 1rem);
                 padding-left: 3px;
+                display: flex; 
+                gap: var(--dile-form-actions-gap, 1.2rem);
+                justify-content: var(--dile-form-actions-justify-content, flex-start);
+            }
+            .cancel_button {
+                --dile-primary-color: var(--dile-ajax-form-cancel-button-background-color, transparent);
+                --dile-on-primary-color: var(--dile-ajax-form-cancel-button-text-color, #303030);
+                --dile-primary-dark-color: var(--dile-ajax-form-cancel-button-border-color, transparent);
+                --dile-button-hover-background-color: var(--dile-ajax-form-cancel-button-hover-background-color, transparent);
+                --dile-button-hover-text-color: var(--dile-ajax-form-cancel-button-hover-text-color, #303030);
+                --dile-button-hover-border-color: var(--dile-ajax-form-cancel-button-hover-border-color, #303030);
             }
         `
     ];
@@ -29,6 +40,7 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         operation: { type: String },
         endpoint: { type: String },
         actionLabel: { type: String },
+        cancelLabel: { type: String },
         data: { type: Object },
         relatedId: { type: String },
         loadOnInit: { type: Boolean },
@@ -37,6 +49,7 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         setDataOnInit: { type: Boolean },
         responseAdapter: { type: Object },
         sendDataAsFormData: { type: Boolean },
+        showCancelButton: { type: Boolean },
       };
     }
 
@@ -71,13 +84,24 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         return this.querySelector('#' + this.formIdentifier);
     }
 
+    actionLabelComputed(label, translations, operation) {
+        if(operation == 'insert') {
+            return label ? label : translations?.insert_label ? translations.insert_label : 'Insert';
+        }
+        if(operation == 'update') {
+            return label ? label : translations?.update_label ? translations.update_label : 'Update';
+        }
+        return translations.send_label;
+    }
+
     render() {
         return html`
             ${this.ajaxComponents}
             <slot></slot>
             <dile-inline-feedback id="feedback"></dile-inline-feedback>
             <div class="actions">
-                <dile-button @click=${this.doAction}>${this.actionLabel}</dile-button>
+                <dile-button @click=${this.doAction}>${this.actionLabelComputed(this.actionLabel, this.translations, this.operation)}</dile-button>
+                ${this.showCancelButton ? html`<dile-button class="cancel_button" @click=${this.doCancel}>${this.translations.cancel_label}</dile-button>` : ''}
             </div> 
         `;
     }
@@ -229,5 +253,15 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         } 
         return this.translations.error_operation(this.operation);
     }
+
+    doCancel() {
+        this.dispatchEvent(new CustomEvent('form-canceled', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                data: this.form.getData()
+            }
+        }));
+    }
 }
 

package/components/detail/src/DileCrudDetail.js

@@ -14,7 +14,7 @@ export class DileCrudDetail extends DileLoading(LitElement) {
             margin-bottom: 0;
         }
         .detail-data {
-            background-color: #f5f5f5;
+            background-color: var(--dile-crud-detail-data-background-color, #f5f5f5);
             padding: 1rem;
             border-top-left-radius: 0.6rem;
             border-top-right-radius: 0.6rem;

package/components/insert/src/DileCrudInsert.js

@@ -24,6 +24,7 @@ export class DileCrudInsert extends DileI18nMixin(LitElement) {
             responseAdapter: { type: Object},
             formIdentifier: { type: String },
             sendDataAsFormData: { type: Boolean },
+            showCancelButton: { type: Boolean },
         };
     }
 
@@ -54,6 +55,7 @@ export class DileCrudInsert extends DileI18nMixin(LitElement) {
                 formIdentifier="${this.formIdentifier}"
                 language="${this.language}"
                 ?sendDataAsFormData=${this.sendDataAsFormData}
+                ?showCancelButton=${this.showCancelButton}
             >
                 ${this.formTemplate(this.belongsTo, this.relationId)}
             </dile-ajax-form> 

package/components/single/src/DileCrudSingle.js

@@ -90,7 +90,7 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
       ${this.updateTemplate}
       ${this.singleActionsTemplate}
       
-      ${this.config.templates.relations(this.element)}
+      ${this.element ? this.config.templates.relations(this.element) : ''}
     `;
   }
 
@@ -115,6 +115,7 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
         endpoint=${this.config.endpoint}
         @crud-action-success=${this.actionSuccess}
         language="${this.language}"
+        .element=${this.element}
       ></dile-crud-single-actions>
     `
   }

package/components/update/src/DileCrudUpdate.js

@@ -24,6 +24,7 @@ export class DileCrudUpdate extends DileI18nMixin(LitElement) {
             responseAdapter: { type: Object },
             formIdentifier: { type: String },
             sendDataAsFormData: { type: Boolean },
+            showCancelButton: { type: Boolean },
         };
     }
 
@@ -57,6 +58,7 @@ export class DileCrudUpdate extends DileI18nMixin(LitElement) {
                 formIdentifier="${this.formIdentifier}"
                 language="${this.language}"
                 ?sendDataAsFormData=${this.sendDataAsFormData}
+                ?showCancelButton=${this.showCancelButton}
             >
                 ${this.formTemplate()}
             </dile-ajax-form>

package/lib/i18n/en.js

@@ -3,6 +3,7 @@ export const translations = {
   http_404: "Not found error",
   http_401: "Unauthorized",
   http_405: "Method Not Allowed",
+  http_413: "Content Too Large",
   http_419: "Your session has expired. Please refresh the page",
   http_502: "Connection error, invalid gateway",
   http_504: "Connection timeout with the gateway",
@@ -11,6 +12,7 @@ export const translations = {
   ajax_form_not_supported: "Operation not supported in dile-ajax-form use 'insert' or 'update'",
   success_operation: (operation) => operation == 'insert' ? 'The new item has been created' : 'Item updated successfully',
   error_operation: (operation) => `${operation == 'insert' ? 'Insertion' : 'Update'} error`,
+  send_label: "Send",
   insert_label: "Create",
   update_label: "Update",
   start_update_label: "Edit",

package/lib/i18n/es.js

@@ -3,6 +3,7 @@ export const translations = {
   http_404: "Recurso inexistente",
   http_401: "No autorizado",
   http_405: "Método HTTP no permitido",
+  http_413: "Contenido enviado al servidor demasiado largo",
   http_419: "La sesión ha expirado. Refresca la página.",
   http_502: "Error de conexión, gateway no válido",
   http_504: "Error de timeout con el gateway",
@@ -11,6 +12,7 @@ export const translations = {
   ajax_form_not_supported: "Operación no soportada por dile-ajax-form. Elige entre 'insert' o 'update'",
   success_operation: (operation) => `${operation == 'insert' ? 'Inserción' : 'Actualización'} completada con éxito`,
   error_operation: (operation) => `Se ha producido un error en la ${operation == 'insert' ? 'inserción' : 'actualización'}`,
+  send_label: "Enviar",
   insert_label: "Insertar",
   update_label: "Actualizar",
   start_update_label: "Editar",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "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.27",
+    "@dile/ui": "^2.1.29",
     "axios": "^1.7.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "252763ee699b898671883ea5c67f4207488ea472"
+  "gitHead": "ae6bb276e5139b7924bb81e4235d0745a59057b8"
 }