@dile/crud 0.0.34 → 0.0.35

package/components/action/src/DileCrudActions.js

@@ -4,8 +4,9 @@ import '@dile/ui/components/confirm/confirm';
 import '@dile/ui/components/select/select';
 import '../../ajax/ajax.js'
 import '../../ui/crud-list-options.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudActions extends LitElement {
+export class DileCrudActions extends DileI18nMixin(LitElement) {
   static styles = css`
         :host {
             display: block;
@@ -20,6 +21,13 @@ export class DileCrudActions extends LitElement {
             --dile-confirm-cancel-button-color: var(--dile-danger-color, #E31E1B);
             --dile-confirm-cancel-text-button-color: var(--dile-on-danger-color, #fff);
         }
+        :host([destructive]) {
+            --dile-confirm-cancel-button-color: var(--dile-primary-color, #378dca);
+            --dile-confirm-cancel-text-button-color: var(--dile-on-primary-color, #fff);
+            --dile-confirm-accept-button-color: var(--dile-danger-color, #E31E1B);
+            --dile-confirm-accept-text-button-color: var(--dile-on-danger-color, #fff);
+
+        }
         p {
           margin: 0 0 0.75rem 0;
         }
@@ -53,6 +61,7 @@ export class DileCrudActions extends LitElement {
       endpoint: { type: String },
       actions: { type: Array },
       formActionsTemplate: { type: Object },
+      destructive: { type: Boolean, reflect: true, }
     };
   }
 
@@ -90,12 +99,12 @@ export class DileCrudActions extends LitElement {
 
   get actionListTemplate() {
     return html`
-            <dile-crud-list-options .icon="${moreVertIcon}" label="Acciones" class="${this.actionIds.length > 0 ? 'visible' : 'hide'}">
-                <p>${this.actionIds.length} ${this.actionIds.length == 1 ? 'elemento' : 'elementos'}</p>
+            <dile-crud-list-options .icon="${moreVertIcon}" label="${this.translations.actions_label}" class="${this.actionIds.length > 0 ? 'visible' : 'hide'}">
+                <p>${this.actionIds.length} ${this.actionIds.length == 1 ? this.translations.element_label : this.translations.element_plural_label}</p>
                 <div @element-changed=${this.selectorChanged}>
                     ${this.selectActionsTemplate}
                 </div>
-                <dile-button @click=${this.showAction}>Realizar acción</dile-button>
+                <dile-button @click=${this.showAction}>${this.translations.run_action_label}</dile-button>
             </dile-crud-list-options>
         `;
   }
@@ -114,8 +123,8 @@ export class DileCrudActions extends LitElement {
     return html`
             <dile-confirm 
                 id="elconfirm"
-                cancelLabel="Cancelar"
-                acceptLabel="Aceptar"
+                cancelLabel="${this.translations.cancel_label}"
+                acceptLabel="${this.translations.accept_label}"
                 @dile-confirm-accepted=${this.doAction}
             >
                 <div class="modalcontainer">
@@ -131,6 +140,16 @@ export class DileCrudActions extends LitElement {
 
   selectorChanged(e) {
     this.selection = e.target.value;
+    if(this.isDestructive()) {
+      this.destructive = true;
+    } else {
+      this.destructive = false;
+    }
+  }
+
+  isDestructive() {
+    const currentAction = this.actions.find(action => action.name == this.selection);
+    return currentAction && currentAction.destructive;
   }
 
   showAction() {

package/components/action/src/DileCrudDeleteAction.js

@@ -1,7 +1,8 @@
 import { LitElement, html, css } from 'lit';
 import { DileForm } from '@dile/ui/mixins/form';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudDeleteAction extends DileForm(LitElement) {
+export class DileCrudDeleteAction extends DileI18nMixin(DileForm(LitElement)) {
     static styles = [
         css`
             :host {
@@ -12,7 +13,7 @@ export class DileCrudDeleteAction extends DileForm(LitElement) {
 
     render() {
         return html`
-            <p>Are you sure you want to delete those items?</p>
+            <p>${this.translations.delete_confirm_message_plural}</p>
         `;
     }
 }

package/components/action/src/DileCrudSingleActions.js

@@ -3,6 +3,7 @@ import { DileCrudActions } from './DileCrudActions.js';
 import '@dile/ui/components/box-selector/box-selector.js';
 import '@dile/ui/components/box-selector/box-selector-item.js';
 import '@dile/ui/components/card/card.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
 export class DileCrudSingleActions extends DileCrudActions {
   static styles = [
@@ -48,7 +49,7 @@ export class DileCrudSingleActions extends DileCrudActions {
     return html`
       ${this.actions.length > 0
         ? html`
-          <dile-card title="Element action">
+          <dile-card title="${this.translations.element_actions}">
             <dile-box-selector 
                 class="action-list" 
                 attrForSelected="name"

package/components/single/src/DileCrudSingle.js

@@ -12,8 +12,9 @@ import '../../update/crud-update.js';
 import '../../action/crud-actions.js';
 import '../../action/crud-single-actions';
 import '../../action/crud-delete-action.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudSingle extends DileCrudMixin(LitElement) {
+export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
   static styles = [
     formStyles,
     css`
@@ -79,7 +80,7 @@ export class DileCrudSingle extends DileCrudMixin(LitElement) {
       <main class="elcontainer">
         ${this.detailTemplate}
         <div class="actions" @action-success=${this.actionSuccess}>
-            <dile-button gray .icon="${editIcon}" @click=${this.edit}>Editar</dile-button>
+            <dile-button gray .icon="${editIcon}" @click=${this.edit}>${this.updateLabelComputed(this.config.labels.updateAction, this.translations)}</dile-button>
             ${this.actionsTemplate}
         </div>
       </main>
@@ -111,6 +112,7 @@ export class DileCrudSingle extends DileCrudMixin(LitElement) {
         .actionIds=${this.actionIds}
         endpoint=${this.config.endpoint}
         @crud-action-success=${this.actionSuccess}
+        language="${this.language}"
       ></dile-crud-single-actions>
     `
   }

package/lib/DileCrudMixin.js

@@ -19,6 +19,7 @@ export const DileCrudMixin = (superclass) => class extends superclass {
                 endpoint=${this.config.endpoint}
                 .actions=${this.config.actions.list}
                 .formActionsTemplate=${this.config.templates.formActions}
+                language="${this.language}"
             ></dile-crud-actions>
         `
     }

package/lib/defaultConfig.js

@@ -47,7 +47,8 @@ export const defaultConfig = {
     list: [
       {
         label: 'Delete',
-        name: 'DeleteAction'
+        name: 'DeleteAction',
+        destructive: true,
       }
     ],
     single: [],
@@ -60,7 +61,7 @@ export const defaultConfig = {
     detail: () => templatePlaceholder('detail'),
     formActions: (actionName) => html`
         <dile-pages attrForSelected="action" selected="${actionName}">
-            <dile-crud-delete-action action="DeleteAction"></dile-crud-delete-action>
+            <dile-crud-delete-action  action="DeleteAction"></dile-crud-delete-action>
         </dile-pages>
     `,
     relations: () => '',

package/lib/i18n/en.js

@@ -15,12 +15,18 @@ export const translations = {
   update_label: "Update",
   delete_label: "Delete",
   cancel_label: "Cancel",
+  accept_label: "Accept",
   help_label: "Help",
   filters_label: "Filters",
   sort_label: "Sort",
   page_label: "Page",
+  actions_label: "Actions",
+  element_label: "Element",
+  element_plural_label: "Elements",
+  run_action_label: "Run action",
   loading: "Loading...",
   delete_confirm_message: "Are you sure you want to delete this item?",
+  delete_confirm_message_plural: "Are you sure you want to delete those items?",
   items_total: "items in total",
   showing_page_size: (pageSize) => `Showing ${pageSize} items per page.`,
   empty_list: "There are no items yet",
@@ -30,4 +36,6 @@ export const translations = {
   all: "all",
   all_in_page: "All in this page",
   select_matching: "Select all matching",
+  element_actions: "Element actions",
+
 };

package/lib/i18n/es.js

@@ -15,12 +15,18 @@ export const translations = {
   update_label: "Actualizar",
   delete_label: "Borrar",
   cancel_label: "Cancelar",
+  accept_label: "Aceptar",
   help_label: "Ayuda",
   filters_label: "Filtros",
   sort_label: "Orden",
   page_label: "Página",
+  actions_label: "Acciones",
+  element_label: "Elemento",
+  element_plural_label: "Elementos",
+  run_action_label: "Realizar acción",
   loading: "Cargando...",
   delete_confirm_message: "¿Estás seguro que quieres borrar este ítem?",
+  delete_confirm_message_plural: "¿Seguro que quieres borrar estos elementos?",
   items_total: "Elementos en total",
   showing_page_size: (pageSize) => `Mostrando ${pageSize} elementos por página.`,
   empty_list: "No tenemos elementos todavía",
@@ -30,5 +36,5 @@ export const translations = {
   all: "todos",
   all_in_page: "Todos de esta página",
   select_matching: "Seleccionar coincidentes",
-  
+  element_actions: "Acciones en este ítem",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "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": "ee5c428631b5ccafdaa331966726ec5e0a699409"
+  "gitHead": "51111b38c0b87c4e0e0db9e180c7ddb7d3f90c7a"
 }