@dile/crud 0.0.32 → 0.0.34

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/detail/src/DileCrudDetail.js

@@ -153,6 +153,7 @@ export class DileCrudDetail extends DileLoading(LitElement) {
   }
 
   doErrorGet(e) {
+    this.loading = false;
     this.dispatchEvent(new CustomEvent('crud-item-detail-load-error', {
       bubbles: true,
       composed: true,

package/components/item-delete/src/DileCrudItemDelete.js

@@ -83,7 +83,15 @@ export class DileCrudItemDelete extends DileI18nMixin(LitElement) {
   }
 
   doSuccessDelete(e) {
-    this.dispatchEvent(new CustomEvent('delete-success', { bubbles: true, composed: true }));
+    let msg = this.computeResponseMessage(e.detail);
+    this.dispatchEvent(new CustomEvent('delete-success', { 
+      bubbles: true, 
+      composed: true,
+      detail: {
+        msg,
+        previousDetail: e.detail,
+      } 
+    }));
   }
   
   doErrorDelete(e) {

package/components/list/src/DileCrudList.js

@@ -1,5 +1,4 @@
 import { LitElement, html, css } from 'lit';
-import { deepMerge } from '../../../lib/deepMerge.js';
 import { DileLoading, loadingStyles } from '../../../lib/DileLoading.js';
 import '@dile/ui/components/button/button.js';
 import '../../ajax/ajax.js'
@@ -8,8 +7,9 @@ import '../../list/crud-list-pagination-links.js';
 import '../crud-list-item.js';
 import '../crud-select-all';
 import '../crud-list-service.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudList extends DileLoading(LitElement) {
+export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     static styles = [
         loadingStyles,
         css`
@@ -130,15 +130,16 @@ export class DileCrudList extends DileLoading(LitElement) {
                         pageSize=${this.pageSize}
                         numItems=${this.numItems}
                         ?disablePagination=${this.config.customization?.disablePagination}
+                        language="${this.language}"
                     ></dile-crud-select-all>
                   `
                 }
                 <span>
                     ${this.numItems != undefined 
                         ? html`
-                            ${this.numItems} items in total. ${this.config.customization?.disablePagination ? '' : html`Showing ${this.pageSize} items per page.` }
+                            ${this.numItems} ${this.translations.items_total}. ${this.config.customization?.disablePagination ? '' : this.translations.showing_page_size(this.pageSize) }
                           `
-                        : 'Loading...' 
+                        : this.translations.loading 
                     }
                 </span>
             </div>
@@ -157,6 +158,7 @@ export class DileCrudList extends DileLoading(LitElement) {
                 belongsTo=${this.belongsTo}
                 relationId=${this.relationId}
                 @crud-list-get-success=${this.getSuccess}
+                language="${this.language}"
             ></dile-crud-list-service>
             <dile-ajax
                 id="ajaxgetallids"
@@ -164,18 +166,24 @@ export class DileCrudList extends DileLoading(LitElement) {
                 url="${this.allIdsUrl}"
                 @ajax-success="${this.doSuccessGetIds}"
                 @ajax-error="${this.doErrorGet}"
+                language="${this.language}"
             ></dile-ajax>
         `;
     }
     get emptyTemplate() {
         return html`
             <div class="empty">
-                <p>There are no items yet</p>
+                <p>${this.translations.empty_list}</p>
                 ${this.config.customization.disableInsert || this.config.customization?.hideEmptyInsertButton
                     ? ''
-            : html`<p><dile-button @click=${this.dispatchInsertRequest}>${this.config.labels.insertAction}</dile-button></p>`
+                    : html`
+                        <p>
+                            <dile-button @click=${this.dispatchInsertRequest}>
+                                ${this.config.labels.insertAction}
+                            </dile-button>
+                        </p>
+                      `
                 }
-                
             </div>
         `;
     }
@@ -220,6 +228,7 @@ export class DileCrudList extends DileLoading(LitElement) {
                   pageSize="${this.pageSize}"
                   @crud-pagination-prev=${this.goPrev}
                   @crud-pagination-next=${this.goNext}
+                  language="${this.language}"
             ></dile-crud-list-pagination-links>
           `
         }

package/components/list/src/DileCrudListPaginationLinks.js

@@ -1,7 +1,8 @@
 import { LitElement, html, css } from 'lit';
 import '../../ui/crud-pagination-nav-button';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudListPaginationLinks extends LitElement {
+export class DileCrudListPaginationLinks extends DileI18nMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -52,7 +53,7 @@ export class DileCrudListPaginationLinks extends LitElement {
                   ></dile-crud-pagination-nav-button>
               </span>
               <span class="pagination-summary">
-                  Página ${this.paginationData.currentPage} de ${this.numPages(this.numItems, this.pageSize)}
+                  ${this.translations.current_page(this.paginationData.currentPage, this.numPages(this.numItems, this.pageSize))}
               </span>
               <span class="pagination-next">
                   <dile-crud-pagination-nav-button 
@@ -66,7 +67,7 @@ export class DileCrudListPaginationLinks extends LitElement {
     } else {
       return html`
           <div class="pagination-summary-one-page">
-                  Page 1 of 1
+                  ${this.translations.one_page}
           </div>
       `;
     }

package/components/list/src/DileCrudListService.js

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudListService extends LitElement {
+export class DileCrudListService extends DileI18nMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -44,6 +45,7 @@ export class DileCrudListService extends LitElement {
         url="${this.cleanUrl}"
         @ajax-success="${this.doSuccessGet}"
         @ajax-error="${this.doErrorGet}"
+        language="${this.language}"
       ></dile-ajax>
     `;
   }

package/components/list/src/DileCrudSelectAll.js

@@ -3,8 +3,9 @@ import '@dile/ui/components/button/button-icon.js';
 import { checkboxBlankIcon, arrowDropDownIcon, checkboxCheckedIcon } from '@dile/icons';
 import '@dile/ui/components/icon/icon.js';
 import '@dile/ui/components/menu-overlay/menu-overlay.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileCrudSelectAll  extends LitElement {
+export class DileCrudSelectAll  extends DileI18nMixin(LitElement) {
 
   static get styles() {
     return css`
@@ -19,6 +20,13 @@ export class DileCrudSelectAll  extends LitElement {
         display: flex;
         align-items: center;
       }
+
+      dile-button-icon div {
+        max-width: 130px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
       dile-button-icon div {
         margin-right: 0.5rem;
         display: inline-block;
@@ -75,8 +83,8 @@ export class DileCrudSelectAll  extends LitElement {
   render() {
     return html`
       <dile-menu-overlay>
-        <dile-button-icon small .icon="${this.selectIcon(this.mainChecked)}" slot="trigger">
-          <div>Select <span class="desk">all</span></div>
+        <dile-button-icon no-wrap small .icon="${this.selectIcon(this.mainChecked)}" slot="trigger">
+          <div>${this.translations.select} <span class="desk">${this.translations.all}</span></div>
           <dile-icon .icon=${arrowDropDownIcon} class="drop"></dile-icon>
         </dile-button-icon>
         <div slot="content" class="content">
@@ -86,7 +94,7 @@ export class DileCrudSelectAll  extends LitElement {
               <p class="option" @click=${this.checkPageItems}>
                 <dile-icon .icon=${this.selectIcon(this.pageChecked)} class="drop"></dile-icon>
                 <span>
-                  Todos de esta página 
+                  ${this.translations.all_in_page} 
                   (${this.pageSize > this.numItems ? this.numItems : this.pageSize})
                 </span>
               </p>
@@ -95,7 +103,7 @@ export class DileCrudSelectAll  extends LitElement {
           <p class="option" @click=${this.checkAllItems}>
             <dile-icon .icon=${this.selectIcon(this.allChecked)} class="drop"></dile-icon>
             <span>
-              Seleccionar todos 
+              ${this.translations.select_matching}
               (${this.numItems})
             </span>
           </p>

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
@@ -52,11 +32,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 +49,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/DileI18nMixin.js

@@ -11,6 +11,12 @@ export const DileI18nMixin = (superclass) => class extends superclass {
   constructor() {
     super();
     this.language = 'en';
+    this.translations = {
+      success_operation: () => '',
+      error_operation: () => '',
+      showing_page_size: () => '',
+      current_page: () => '',
+    };
   }
 
   async connectedCallback() {

package/lib/defaultConfig.js

@@ -67,12 +67,12 @@ export const defaultConfig = {
     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,9 +11,23 @@ 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",
+  help_label: "Help",
+  filters_label: "Filters",
+  sort_label: "Sort",
+  page_label: "Page",
+  loading: "Loading...",
   delete_confirm_message: "Are you sure you want to delete this item?",
+  items_total: "items in total",
+  showing_page_size: (pageSize) => `Showing ${pageSize} items per page.`,
+  empty_list: "There are no items yet",
+  one_page: "Page 1 of 1",
+  current_page: (page, numPages) => `Page ${page} of ${numPages}`,
+  select: "Select",
+  all: "all",
+  all_in_page: "All in this page",
+  select_matching: "Select all matching",
 };

package/lib/i18n/es.js

@@ -15,5 +15,20 @@ export const translations = {
   update_label: "Actualizar",
   delete_label: "Borrar",
   cancel_label: "Cancelar",
+  help_label: "Ayuda",
+  filters_label: "Filtros",
+  sort_label: "Orden",
+  page_label: "Página",
+  loading: "Cargando...",
   delete_confirm_message: "¿Estás seguro que quieres borrar este ítem?",
+  items_total: "Elementos en total",
+  showing_page_size: (pageSize) => `Mostrando ${pageSize} elementos por página.`,
+  empty_list: "No tenemos elementos todavía",
+  one_page: "Página 1 de 1",
+  current_page: (page, numPages) => `Página ${page} de ${numPages}`,
+  select: "Seleccionar",
+  all: "todos",
+  all_in_page: "Todos de esta página",
+  select_matching: "Seleccionar coincidentes",
+  
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "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.16",
+    "@dile/ui": "^2.1.17",
     "axios": "^1.7.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "817f5102c42848615896580e968fc42d8ee21d66"
+  "gitHead": "ee5c428631b5ccafdaa331966726ec5e0a699409"
 }