@dile/crud 0.0.26 → 0.0.28

package/components/ajax/src/DileAjax.js

@@ -1,7 +1,8 @@
 import { LitElement, html } from 'lit';
 import { DileAxios } from '../../../lib/DileAxios.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileAjax extends DileAxios(LitElement) {
+export class DileAjax extends DileAxios(DileI18nMixin(LitElement)) {
   static get properties() {
     return {
       data: {  type: Object },
@@ -55,7 +56,7 @@ export class DileAjax extends DileAxios(LitElement) {
           }));
         }
       } else {
-        this.dispatchError('Unhandled success server response');
+        this.dispatchError(this.translations.http_unhandled_success);
       }
     })
     .catch(err => {
@@ -75,26 +76,29 @@ export class DileAjax extends DileAxios(LitElement) {
           if(err.response.data.message) {
             this.dispatchError(err.response.data.message);
           } else {
-            this.dispatchError("Not found error");
+            this.dispatchError(this.translations.http_404);
           }
           break;
         case 401:
-          this.dispatchError('Unauthorized. Your session may have expired');
+          this.dispatchError(this.translations.http_401);
           break;
+        case 405:
+            this.dispatchError(this.translations.http_405);
+            break;
         case 419:
-          this.dispatchError('Your session has expired. Please refresh the page');
+          this.dispatchError(this.translations.http_419);
           break;
         case 502:
-          this.dispatchError('Connection error, invalid gateway');
+          this.dispatchError(this.translations.http_502);
           break;
         case 504:
-          this.dispatchError('Connection timeout with the gateway');
+          this.dispatchError(this.translations.http_504);
           break;
         default:
-          this.dispatchError('Action not completed due to a server error');
+          this.dispatchError(this.translations.http_other_error);
       }
     } else {
-      this.dispatchError('No response received from the server');
+      this.dispatchError(this.translations.http_no_response);
     }
   }
 

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

@@ -4,8 +4,9 @@ import '@dile/ui/components/button/button.js';
 import '@dile/ui/components/inline-feedback/inline-feedback.js';
 import {capitalizeFirstLetter} from '../../../lib/capitalizeString.js';
 import { ResponseApiAdapter } from '../../../lib/ResponseApiAdapter.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
-export class DileAjaxForm extends LitElement {
+export class DileAjaxForm extends DileI18nMixin(LitElement) {
     static styles = [
         css`
             :host {
@@ -88,6 +89,7 @@ export class DileAjaxForm extends LitElement {
                 url="${this.endpoint}/${this.relatedId}"
                 @ajax-success="${this.doSuccessGet}"
                 @ajax-error="${this.doErrorGet}"
+                language="${this.language}"
             ></dile-ajax>
             <dile-ajax
                 id="ajaxsave"
@@ -95,12 +97,17 @@ export class DileAjaxForm extends LitElement {
                 url="${this.endpoint}${this.operation == 'insert' ? '' : `/${this.relatedId}`}"
                 @ajax-success="${this.doSuccessSave}"
                 @ajax-error="${this.doErrorSave}"
+                language="${this.language}"
             ></dile-ajax>
         `
     }
 
     loadData() {
-        this.ajaxget.generateRequest();
+        if(this.ajaxget) {
+            this.ajaxget.generateRequest();
+        } else {
+            setTimeout(() => this.loadData(), 100);
+        }
     }
 
     doAction() {
@@ -182,7 +189,7 @@ export class DileAjaxForm extends LitElement {
             case 'update':
                 return 'put';
         }
-        throw "Operation not supported in fct-ajax-form use 'insert' or 'update'";
+        throw this.translations.ajax_form_not_supported;
     }
 
     clearErrors() {
@@ -216,9 +223,9 @@ export class DileAjaxForm extends LitElement {
             return message;
         }
         if(success) {
-            return `Success ${this.operation}`;
+            return this.translations.success_operation(this.operation);
         } 
-        return `Error ${this.operation}`;
+        return this.translations.error_operation(this.operation);
     }
 }
 

package/lib/DileI18nMixin.js

@@ -0,0 +1,21 @@
+import { translationService } from './translationService.js';
+
+export const DileI18nMixin = (superclass) => class extends superclass {
+  static get properties() {
+    return {
+      language: { type: String },
+      translations: { type: Object },
+    }
+  }
+
+  constructor() {
+    super();
+    this.language = 'en';
+  }
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.translations = await translationService.loadTranslations(this.language);
+  }
+
+}

package/lib/i18n/en.js

@@ -0,0 +1,14 @@
+export const translations = {
+  http_unhandled_success: "Unhandled success server response",
+  http_404: "Not found error",
+  http_401: "Unauthorized",
+  http_405: "Method Not Allowed",
+  http_419: "Your session has expired. Please refresh the page",
+  http_502: "Connection error, invalid gateway",
+  http_504: "Connection timeout with the gateway",
+  http_other_error: "Action not completed due to a server error",
+  http_no_response: "No response received from the server",
+  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`,
+};

package/lib/i18n/es.js

@@ -0,0 +1,14 @@
+export const translations = {
+  http_unhandled_success: "Respuesta de éxito no procesada",
+  http_404: "Recurso inexistente",
+  http_401: "No autorizado",
+  http_405: "Método HTTP no permitido",
+  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",
+  http_other_error: "Acción no completada por un error del servidor",
+  http_no_response: "No se ha recibido respuesta del servidor",
+  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'}`,
+};

package/lib/translationService.js

@@ -0,0 +1,27 @@
+class TranslationService {
+  constructor() {
+    this.translations = {};
+  }
+
+  async loadTranslations(language) {
+    try {
+      if (!this.translations[language]) {
+        const module = await import(`./i18n/${language}.js`);
+        this.translations[language] = module.translations;
+      }
+    } catch (error) {
+      console.warn(`Could not load translations for language: ${language}, falling back to English`);
+      
+      if (!this.translations['en']) {
+        const defaultModule = await import('./i18n/en.js');
+        this.translations['en'] = defaultModule.translations;
+      }
+      
+      return this.translations['en'];
+    }
+
+    return this.translations[language];
+  }
+}
+
+export const translationService = new TranslationService();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "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": "97061a86abf5bd422da53498cf94b900a78d1b3f"
+  "gitHead": "f656c500a94dd5ca9157ac2af010d0881047ddf6"
 }