@dile/crud 0.0.33 → 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/crud/src/DileCrud.js

@@ -17,8 +17,9 @@ import { formStyles } from '../../../styles/form-styles.js';
 import { DileCrudMixin } from '../../../lib/DileCrudMixin.js';
 import { crudStyles } from '../../../styles/crud-styles.js';
 import { addIcon } from '@dile/icons';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrud extends DileCrudMixin(LitElement) {
+export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
     static styles = [
         formStyles,
         crudStyles,
@@ -149,7 +150,9 @@ export class DileCrud extends DileCrudMixin(LitElement) {
     get insertButtomTemplate() {
         return html`
             <div class="insertButtonContainer">
-                <dile-button-icon @click="${this.openInsert}" .icon="${addIcon}">${this.config.labels.insertAction}</dile-button-icon>
+                <dile-button-icon @click="${this.openInsert}" .icon="${addIcon}">
+                    ${this.insertLabelComputed(this.config.labels.insertAction, this.translations)}
+                </dile-button-icon>
             </div>
         `
     }
@@ -162,11 +165,11 @@ export class DileCrud extends DileCrudMixin(LitElement) {
                 blocking
             >
                 <dile-crud-insert
-                    title=${this.config.labels.insertWindowTitle}
+                    title=${this.insertLabelComputed(this.config.labels.insertWindowTitle, this.translations)}
                     endpoint="${this.config.endpoint}"
                     .responseAdapter=${this.config.responseAdapter}
                     .formTemplate=${this.config.templates.insertForm}
-                    actionLabel=${this.config.labels.insertAction}
+                    actionLabel=${this.insertLabelComputed(this.config.labels.insertAction, this.translations)}
                     formIdentifier="${this.config.formIds.insertForm}"
                     @crud-insert-success="${this.modalInsertSuccess}"
                     belongsTo=${this.belongsTo}
@@ -186,14 +189,15 @@ export class DileCrud extends DileCrudMixin(LitElement) {
                 .actionIds=${this.actionIds}
                 belongsTo=${this.belongsTo}
                 relationId=${this.relationId}
+                language="${this.language}"
             ></dile-crud-list>
         `
     }
     get helpTemplate() {
         return html`
             <dile-modal-help 
-                title="${this.config.labels.helpTitle}"
-                label="${this.config.labels.helpButtonLabel}"
+                title="${this.helpLabelComputed(this.config.labels.helpTitle, this.translations)}"
+                label="${this.helpLabelComputed(this.config.labels.helpButtonLabel, this.translations)}"
             >${this.config.templates.help()}</dile-modal-help>`
     }
 
@@ -217,6 +221,7 @@ export class DileCrud extends DileCrudMixin(LitElement) {
                                     id="elfilters"
                                     @filters-changed=${this.filtersChanged}
                                     .filters=${this.config.availableFilters || []}
+                                    language="${this.language}"
                                 ></dile-crud-filters>
                             `
                         }
@@ -228,6 +233,7 @@ export class DileCrud extends DileCrudMixin(LitElement) {
                                     @page-size-changed=${this.pageSizeChanged}
                                     .pageSizes=${this.config.pageSize.available || [10, 25, 50]}
                                     pageSize="${this.config.pageSize.initial}"
+                                    language="${this.language}"
                                 ></dile-crud-page-size>
                             `
                         } 
@@ -240,6 +246,7 @@ export class DileCrud extends DileCrudMixin(LitElement) {
                                     sortField="${this.config.sort.initialSortField}"
                                     sortDirection="${this.config.sort.initialSortDirection || 'desc'}"
                                     @sort-changed=${this.sortFormChanged}
+                                    language="${this.language}"
                                 ></dile-crud-sort-form>  
                             `
                         }

package/components/list/src/DileCrudList.js

@@ -139,7 +139,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                         ? html`
                             ${this.numItems} ${this.translations.items_total}. ${this.config.customization?.disablePagination ? '' : this.translations.showing_page_size(this.pageSize) }
                           `
-                        : 'Loading...' 
+                        : this.translations.loading 
                     }
                 </span>
             </div>

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/components/ui/src/DileCrudFilters.js

@@ -2,8 +2,9 @@ import { LitElement, html, css } from 'lit';
 import { filterIcon } from '@dile/icons';
 import '../crud-filters-form.js';
 import '../crud-list-options.js'
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudFilters extends LitElement {
+export class DileCrudFilters extends DileI18nMixin(LitElement) {
     static get properties() {
       return {
         filters: { type: Array }
@@ -17,7 +18,7 @@ export class DileCrudFilters extends LitElement {
 
     render() {
         return html`
-            <dile-crud-list-options .icon="${filterIcon}" label="Filtros" >
+            <dile-crud-list-options .icon="${filterIcon}" label="${this.translations.filters_label}" >
                 <dile-crud-filters-form 
                     id="elform"
                     .filters=${this.filters} 

package/components/ui/src/DileCrudPageSize.js

@@ -2,8 +2,9 @@ import { LitElement, html, css } from 'lit';
 import '../crud-list-options';
 import '../crud-page-size-select';
 import { descriptionIcon } from '@dile/icons';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudPageSize extends LitElement {
+export class DileCrudPageSize extends DileI18nMixin(LitElement) {
 
     static get properties() {
         return {
@@ -19,7 +20,7 @@ export class DileCrudPageSize extends LitElement {
 
     render() {
         return html`
-            <dile-crud-list-options .icon="${descriptionIcon}" label="Page">
+            <dile-crud-list-options .icon="${descriptionIcon}" label="${this.translations.page_label}">
                 <dile-crud-page-size-select pageSize="${this.pageSize}" .pageSizes=${this.pageSizes}></dile-crud-page-size-select>
             </dile-crud-list-options>
         `;

package/components/ui/src/DileCrudSortForm.js

@@ -4,8 +4,9 @@ import '@dile/ui/components/radio-group/radio-group';
 import '@dile/ui/components/radio-group/radio';
 import { sortIcon } from '@dile/icons';
 import '../crud-list-options';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudSortForm extends LitElement {
+export class DileCrudSortForm extends DileI18nMixin(LitElement) {
   static styles = [
     css`
         :host {
@@ -49,7 +50,7 @@ export class DileCrudSortForm extends LitElement {
 
   render() {
     return html`
-        <dile-crud-list-options class="action-controller" .icon="${sortIcon}" label="Order">
+        <dile-crud-list-options class="action-controller" .icon="${sortIcon}" label="${this.translations.sort_label}">
             <dile-radio-group 
                 name="selector" 
                 @dile-radio-group-changed=${this.radioGroupChanged}

package/lib/DileCrudMixin.js

@@ -9,26 +9,6 @@ export const DileCrudMixin = (superclass) => class extends superclass {
         return this.shadowRoot.getElementById('modalUpdate');
     }
 
-    // get listElement() {
-    //     return this.shadowRoot.querySelector('dile-crud-list');
-    // }
-    // get insertElement() {
-    //     return this.shadowRoot.getElementById('elinsert');
-    // }
-    // get deleteElement() {
-    //     return this.shadowRoot.getElementById('eldelete');
-    // }
-    // get actionsElement() {
-    //     return this.shadowRoot.getElementById('elactions');
-    // }
-    // get filtersElement() {
-    //     return this.shadowRoot.getElementById('elfilters');
-    // }
-    
-    // itemDeleteRequest(e) {
-    //     this.deleteElement.delete(e.detail.itemId);
-    // }
-
     get actionsTemplate() {
         return html`
             <dile-crud-actions
@@ -39,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>
         `
     }
@@ -52,11 +33,11 @@ export const DileCrudMixin = (superclass) => class extends superclass {
             >
                 <dile-crud-update
                     id="updateElement"
-                    title=${this.config.labels.updateWindowTitle}
+                    title="${this.updateLabelComputed(this.config.labels.updateWindowTitle, this.translations)}"
                     endpoint="${this.config.endpoint}"
                     .responseAdapter=${this.config.responseAdapter}
                     .formTemplate=${this.config.templates.updateForm}
-                    actionLabel=${this.config.labels.updateAction}
+                    actionLabel="${this.updateLabelComputed(this.config.labels.updateAction, this.translations)}"
                     formIdentifier="${this.config.formIds.updateForm}"
                     @crud-update-success="${this.modalUpdateSuccess}"
                 ></dile-crud-update>
@@ -69,4 +50,15 @@ export const DileCrudMixin = (superclass) => class extends superclass {
         this.modalUpdate.close();
         this.refresh();
     }
+
+    insertLabelComputed(label, translations) {
+        return label ? label : translations?.insert_label ? translations.insert_label : 'Insert';
+    }
+    updateLabelComputed(label, translations) {
+        return label ? label : translations?.update_label ? translations.update_label : 'Save';
+    }
+    helpLabelComputed(label, translations) {
+        return label ? label : translations?.help_label ? translations.help_label : 'Help';
+    }
+    
 }

package/lib/defaultConfig.js

@@ -47,7 +47,8 @@ export const defaultConfig = {
     list: [
       {
         label: 'Delete',
-        name: 'DeleteAction'
+        name: 'DeleteAction',
+        destructive: true,
       }
     ],
     single: [],
@@ -60,19 +61,19 @@ 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: () => '',
     formSingleActions: () => '',
   },
   labels: {
-    insertAction: 'Create',
-    updateAction: 'Save',
-    insertWindowTitle: 'Insert an item',
-    updateWindowTitle: 'Update an item',
-    helpTitle: 'Help',
-    helpButtonLabel: 'Help',
+    // insertAction: 'Create',
+    // updateAction: 'Save',
+    // insertWindowTitle: 'Create an item',
+    // updateWindowTitle: 'Update an item',
+    // helpTitle: 'Help',
+    // helpButtonLabel: 'Help',
   },
   formIds: {
     insertForm: 'insertform',

package/lib/i18n/en.js

@@ -11,11 +11,22 @@ 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`,
-  insert_label: "Insert",
+  insert_label: "Create",
   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",
@@ -25,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,7 +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",
@@ -25,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.33",
+  "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": "15a59318f4be16facc3e442c13709fc0c543b57b"
+  "gitHead": "51111b38c0b87c4e0e0db9e180c7ddb7d3f90c7a"
 }