@dile/crud 1.4.0 → 1.5.1

package/components/file-uploader/file-uploader-form.js

@@ -0,0 +1,2 @@
+import { DileFileUploaderForm } from './src/DileFileUploaderForm.js';
+customElements.define('dile-file-uploader-form', DileFileUploaderForm);

package/components/file-uploader/file-uploader.js

@@ -0,0 +1,2 @@
+import { DileFileUploader } from './src/DileFileUploader.js';
+customElements.define('dile-file-uploader', DileFileUploader);

package/components/file-uploader/index.js

@@ -0,0 +1,2 @@
+export { DileFileUploaderForm } from './src/DileFileUploaderForm.js';
+export { DileFileUploader } from './src/DileFileUploader.js';

package/components/file-uploader/src/DileFileUploader.js

@@ -0,0 +1,69 @@
+import { LitElement, html, css } from 'lit';
+import '../../ajax-form/ajax-form.js';
+import '../file-uploader-form.js';
+import { ResponseApiAdapter } from '../../../lib/ResponseApiAdapter.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
+
+export class DileFileUploader extends DileI18nMixin(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      endpoint: { type: String },
+      selectFileLabel: { type: String },
+      saveLabel: { type: String },
+      allowedExtensions: { type: Array },
+      responseAdapter: { type: Object },
+    };
+  }
+  
+  constructor() {
+    super();
+    this.responseAdapter = new ResponseApiAdapter();
+    this.allowedExtensions = ['*'];
+  }
+
+  render() {
+    return html`
+      <dile-ajax-form 
+        id="elform"
+        operation="insert"
+        endpoint=${this.endpoint}
+        actionLabel="${this.saveLabelComputed(this.saveLabel, this.translations)}"
+        sendDataAsFormData
+        language="${this.language}"
+        @save-success=${this.fileSaveSuccess}
+        .responseAdapter=${this.responseAdapter}
+      >
+        <dile-file-uploader-form 
+          id="form"
+          label="${this.selectLabelComputed(this.selectFileLabel, this.translations)}"
+          .allowedExtensions=${this.allowedExtensions}
+          .translations=${this.translations}
+        ></dile-file-uploader-form>
+      </dile-ajax-form>
+    `;
+  }
+
+  selectLabelComputed(label, translations) {
+    return label ? label : translations?.select_file_label ? translations.select_file_label : 'Select a file';
+  }
+
+  saveLabelComputed(label, translations) {
+    return label ? label : translations?.save_file_label ? translations.save_file_label : 'Save file';
+  }
+
+  fileSaveSuccess(e) {
+    this.dispatchEvent(new CustomEvent('file-uploaded', {
+      bubbles: true,
+      composed: true,
+      detail: e.detail
+    }));
+  }
+}

package/components/file-uploader/src/DileFileUploaderForm.js

@@ -0,0 +1,39 @@
+import { LitElement, html, css } from 'lit';
+import { DileForm } from '@dile/ui/mixins/form/index.js'
+import '@dile/ui/components/drop-file/drop-file.js';
+
+export class DileFileUploaderForm extends DileForm(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      dile-drop-file {
+        margin-bottom: 0;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      label: { type: String },
+      allowedExtensions: { type: Array },
+      translations: { type: Object },
+    };
+  }
+
+  render() {
+    return html`
+      <dile-drop-file 
+        name="file"
+        label="${this.label}" 
+        id="dropfile" 
+        .allowedExtensions=${this.allowedExtensions}
+        dropLabel="${this.translations.file_drop}"
+        buttonLabel="${this.translations.select_file}"
+        selectedFileLabel="${this.translations.selected_file}"
+        extensionErrorMessage="${this.translations.extension_allowed}"
+      ></dile-drop-file>
+    `;
+  }
+}

package/components/insert/src/DileCrudInsert.js

@@ -60,7 +60,8 @@ export class DileCrudInsert extends DileI18nMixin(LitElement) {
                 operation="insert"
                 endpoint="${this.endpoint}"
                 actionLabel="${this.actionLabelComputed(this.actionLabel, this.translations)}"
-                @save-success="${this.doSuccessSave}"
+                @save-success=${this.doSuccessSave}
+                @save-error=${this.doSuccessError}
                 ?buttonSmall="${this.buttonSmall}"
                 .responseAdapter="${this.responseAdapter}"
                 formIdentifier="${this.formIdentifier}"
@@ -81,6 +82,14 @@ export class DileCrudInsert extends DileI18nMixin(LitElement) {
         }));
     }
 
+    doSuccessError(e) {
+        this.dispatchEvent(new CustomEvent('crud-insert-error', { 
+            bubbles: true,
+            composed: true,
+            detail: e.detail
+        }));
+    }
+
     setData(data) {        
         this.updateComplete.then(() => {
             this.formElement.setData(data);    

package/lib/i18n/en.js

@@ -46,6 +46,8 @@ export const translations = {
   element_actions: "Element actions",
   select_image: "Select an image",
   save_image: "Save image",
+  select_file_label: "Select a file",
+  save_file_label: "Save file",
   file_drop: "Drop here your file",
   select_file: "Select file",
   selected_file: "Selected file",

package/lib/i18n/es.js

@@ -46,6 +46,8 @@ export const translations = {
   element_actions: "Acciones en este ítem",
   select_image: "Selecciona una imagen",
   save_image: "Salvar la imagen",
+  select_file_label: "Selecciona un archivo",
+  save_file_label: "Guardar archivo",
   file_drop: "Suelta aquí el archivo",
   select_file: "Seleccionar archivo",
   selected_file: "Archivo seleccionado",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "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.com/",
   "dependencies": {
-    "@dile/ui": "^2.17.1",
+    "@dile/ui": "^2.18.0",
     "axios": "^1.13.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cc0d45df6cd51bb13578c937ab4bdb3065330f6b"
+  "gitHead": "8fb4049d780b8cbd0b8a74296fd9983d499f9d4d"
 }