@dile/crud 0.0.33 → 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/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/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/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,10 +11,15 @@ 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.`,

package/lib/i18n/es.js

@@ -15,6 +15,11 @@ 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.`,

package/package.json

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