@dile/crud 2.5.4 → 2.5.6

package/components/action/src/DileCrudActions.js

@@ -219,6 +219,9 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
 
   doErrorAction(e) {
     this.loading = false;
+    if (this.confirmElement) {
+      this.confirmElement.resetProcessing();
+    }
     this.responseAdapter.setResponse(e.detail);
     this.selectedActionForm.showErrors(e.detail.errors);  
     this.dispatchEvent(new CustomEvent('crud-action-error', {
@@ -238,6 +241,9 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
 
   cancelAction() {
     this.loading = false;
+    if (this.confirmElement) {
+      this.confirmElement.resetProcessing();
+    }
     this.selectedActionForm.clearErrors();
     this.selectedActionForm.resetData();
   }

package/components/crud/crud.spec.js

@@ -0,0 +1,93 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
+import './crud.js';
+
+describe('dile-crud initial filters', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('syncs active filters from config into the list and form on first render', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/countries', {
+      customization: {
+        disableInsert: true,
+        disableHelp: true,
+        disableKeywordSearch: true,
+        disableSort: true,
+        disableFilter: false,
+        disablePagination: true,
+        hideCheckboxSelection: true,
+      },
+      availableFilters: [
+        {
+          name: 'continent',
+          label: 'Continent',
+          active: true,
+          value: 'Europe',
+          type: 'select',
+          options: [
+            { value: 'Europe', label: 'Europe' },
+            { value: 'Asia', label: 'Asia' },
+          ],
+        },
+      ],
+    }).getConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await Promise.resolve();
+
+    expect(el.config.availableFilters[0].active).toBe(true);
+    expect(el.config.availableFilters[0].value).toBe('Europe');
+    expect(el.listElement.filters).toHaveLength(1);
+    expect(el.listElement.filters[0].name).toBe('continent');
+    expect(el.listElement.filters[0].value).toBe('Europe');
+
+    const form = el.shadowRoot.querySelector('dile-crud-filters');
+    expect(form.filters[0].active).toBe(true);
+    expect(form.filters[0].value).toBe('Europe');
+  });
+
+  it('removes an active initial filter when the chip close icon is clicked', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/countries', {
+      customization: {
+        disableInsert: true,
+        disableHelp: true,
+        disableKeywordSearch: true,
+        disableSort: true,
+        disableFilter: false,
+        disablePagination: true,
+        hideCheckboxSelection: true,
+      },
+      availableFilters: [
+        {
+          name: 'continent',
+          label: 'Continent',
+          active: true,
+          value: 'Europe',
+          type: 'select',
+          options: [
+            { value: 'Europe', label: 'Europe' },
+            { value: 'Asia', label: 'Asia' },
+          ],
+        },
+      ],
+    }).getConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await Promise.resolve();
+
+    const filterEl = el.shadowRoot.querySelector('dile-crud-filters');
+    filterEl.removeFilter('continent');
+
+    expect(filterEl.filters[0].active).toBe(false);
+    expect(filterEl.filters[0].value).toBe('');
+    expect(el.listElement.filters[0].active).toBe(false);
+    expect(el.listElement.filters[0].value).toBe('');
+  });
+});

package/components/list/src/DileCrudList.js

@@ -41,6 +41,20 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                 padding: var(--dile-crud-list-empty-padding, 3rem 1rem);
                 text-align: var(--dile-crud-list-empty-text-align, center);
             }
+
+            .error {
+                padding: var(--dile-crud-list-error-padding, 3rem 1rem);
+                text-align: var(--dile-crud-list-error-text-align, center);
+                background-color: var(--dile-crud-list-error-background-color, #fff3cd);
+                border: var(--dile-crud-list-error-border, 1px solid #ffc107);
+                border-radius: var(--dile-crud-list-error-border-radius, 4px);
+                color: var(--dile-crud-list-error-color, #333);
+            }
+
+            .error p {
+                margin: 0 0 1rem 0;
+                font-size: var(--dile-crud-list-error-font-size, 1rem);
+            }
             
             @media(min-width: 500px) {
                 .prev-summary {
@@ -74,6 +88,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         belongsTo: { type: String },
         relationId: { type: String },
         disableLoadOnStart: { type: Boolean },
+        listError: { type: Object },
       };
     }
 
@@ -90,12 +105,19 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         this.isSelectAllActive = false;
         this.loading = true;
         this.disableLoadOnStart = false;
+        this.listError = null;
     }
 
     firstUpdated() {
         this.pageSize = this.config.pageSize?.initial ?? this.pageSize;
         this.elservice = this.shadowRoot.getElementById('elservice');
         this.ajaxgetallids = this.shadowRoot.getElementById('ajaxgetallids');
+
+        const activeFilters = (this.config?.availableFilters || []).filter(filter => filter.active);
+        if (activeFilters.length > 0) {
+            this.filters = activeFilters;
+        }
+
         if(!this.disableLoadOnStart) {
             this.updateComplete.then( () => this.refresh()); 
         }
@@ -109,14 +131,16 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
 
             ${this.filterListTemplate}
 
-            ${this.loading 
-                ? this.loadingTemplate 
-                : this.elements.length == 0
-                    ? this.emptyTemplate
-                    : html`
-                        ${this.elementsTemplate}
-                        ${this.config.customization?.hidePageReport ? '' : this.paginationTemplate}
-                    `
+            ${this.listError
+                ? this.errorTemplate
+                : this.loading 
+                    ? this.loadingTemplate 
+                    : this.elements.length == 0
+                        ? this.emptyTemplate
+                        : html`
+                            ${this.elementsTemplate}
+                            ${this.config.customization?.hidePageReport ? '' : this.paginationTemplate}
+                        `
             }
         `;
     }
@@ -170,6 +194,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                 belongsTo=${this.belongsTo}
                 relationId=${this.relationId}
                 @crud-list-get-success=${this.getSuccess}
+                @crud-list-data-error=${this.onListError}
                 language="${this.language}"
             ></dile-crud-list-service>
             <dile-ajax
@@ -200,6 +225,19 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         `;
     }
 
+    get errorTemplate() {
+        return html`
+            <div class="error">
+                <p>${this.translations.list_load_error}</p>
+                <p>
+                    <dile-button @click=${this.retryLoadList}>
+                        ${this.translations.retry_label}
+                    </dile-button>
+                </p>
+            </div>
+        `;
+    }
+
     insertLabelComputed(label, translations) {
         return label ? label : translations?.insert_label ? translations.insert_label : 'Insert';
     }
@@ -372,4 +410,14 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         }
         
     }
+
+    onListError(e) {
+        this.loading = false;
+        this.listError = e.detail;
+    }
+
+    retryLoadList() {
+        this.listError = null;
+        this.refresh();
+    }
 }

package/components/ui/src/DileCrudFilters.js

@@ -35,30 +35,46 @@ export class DileCrudFilters extends DileI18nMixin(LitElement) {
     }
 
     removeFilter(filterName) {
-        this.shadowRoot.getElementById('elform').resetField(filterName);
+        const form = this.shadowRoot.getElementById('elform');
+        if (form) {
+            form.clearField(filterName);
+        }
+
+        this.filters = this.filters.map(filter => {
+            if (filter.name === filterName) {
+                const isSelectType = filter.type === 'select' || filter.type === 'select_ajax';
+                this.setFilterValue(filter, isSelectType ? '' : false);
+            }
+            return filter;
+        });
+        this.dispatchFiltersChanged();
     }
 
     filtersChanged(e) {
-        let data = e.detail.data;
+        const data = e.detail.data;
         this.filters = this.filters.map(filter => {
             if (filter.name in data) {
-                switch(filter.type) {
-                    case 'select':
-                    case 'select_ajax':
-                        if(data[filter.name] === '') {
-                            filter.active = false;
-                        } else {
-                            filter.active = true;
-                            filter.value = data[filter.name];
-                        }
-                        break;
-                    default:
-                        filter.active = data[filter.name];
-                        filter.value = data[filter.name];
-                }
+                this.setFilterValue(filter, data[filter.name]);
             }
             return filter;
         });
+        this.dispatchFiltersChanged();
+    }
+
+    setFilterValue(filter, value) {
+        switch (filter.type) {
+            case 'select':
+            case 'select_ajax':
+                filter.active = value !== '';
+                filter.value = value;
+                break;
+            default:
+                filter.active = value;
+                filter.value = value;
+        }
+    }
+
+    dispatchFiltersChanged() {
         this.dispatchEvent(new CustomEvent('filters-changed', {
             bubbles: true,
             composed: true,

package/components/ui/src/DileCrudFiltersForm.js

@@ -43,11 +43,11 @@ export class DileCrudFiltersForm extends DileFormChangeDetect(DileForm(LitElemen
     switch (filter.type) {
       case 'select':
         return html`
-            <dile-select label="${filter.label}" name="${filter.name}" value="">
+            <dile-select label="${filter.label}" name="${filter.name}" value="${filter.value ?? ''}">
                 <select slot="select">
                     <option value="">-</option>
                     ${filter.options.map(option => html`
-                        <option value="${option.value}">${option.label}</option>
+                        <option value="${option.value}" ?selected=${filter.value === option.value}>${option.label}</option>
                     `)}
                 </select>
             </dile-select>

package/lib/i18n/en.js

@@ -70,4 +70,6 @@ export const translations = {
   confirm_submit_text: "Are you sure you want to submit this form?",
   add_relation_label: "Add",
   select_relation_placeholder: "Select...",
+  list_load_error: "Error loading the list. Please try again.",
+  retry_label: "Retry",
 };

package/lib/i18n/es.js

@@ -70,4 +70,6 @@ export const translations = {
   confirm_submit_text: "¿Estás seguro de que deseas enviar este formulario?",
   add_relation_label: "Añadir",
   select_relation_placeholder: "Selecciona...",
+  list_load_error: "Error al cargar la lista. Por favor, intenta de nuevo.",
+  retry_label: "Reintentar",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -25,12 +25,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^3.6.5",
+    "@dile/ui": "^3.6.7",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ee029c01956874746ff8c78f02f4868ef4ce4875"
+  "gitHead": "d62c55983a8fcdf7b1a4cb2b6da64d4d1e30b9c6"
 }