@dile/crud 2.3.4 → 2.4.0

package/components/action/crud-single-action-dispatcher.js

@@ -0,0 +1,4 @@
+import { DileCrudSingleActionDispatcher } from "./src/DileCrudSingleActionDispatcher.js";
+if (!customElements.get('dile-crud-single-action-dispatcher')) {
+  customElements.define('dile-crud-single-action-dispatcher', DileCrudSingleActionDispatcher);
+}

package/components/action/src/DileCrudSingleActionDispatcher.js

@@ -0,0 +1,52 @@
+import { html, css } from 'lit';
+import '@dile/ui/components/button/button.js';
+import { DileCrudActions } from './DileCrudActions.js';
+
+export class DileCrudSingleActionDispatcher extends DileCrudActions {
+  static styles = [
+    super.styles,
+    css`
+      dile-button {
+        --dile-button-background-color: var(--dile-crud-single-action-background-color, var(--dile-primary-color, #7BB93D));
+        --dile-button-text-color: var(--dile-crud-single-action-text-color, var(--dile-on-primary-color, #fff));
+        --dile-button-border-color: var(--dile-crud-single-action-border-color, var(--dile-primary-dark-color, #12354d));
+        --dile-button-hover-background-color: var(--dile-crud-single-action-hover-background-color, var(--dile-primary-light-color, #f3f3ae));
+        --dile-button-hover-text-color: var(--dile-crud-single-action-hover-text-color, var(--dile-on-primary-light-color, #303030));
+        --dile-button-hover-border-color: var(--dile-crud-single-action-hover-border-color, var(--dile-primary-color, #666666));
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      actionName: { type: String },
+    };
+  }
+
+  get selection() {
+    return this.actionName;
+  }
+  set selection(_value) {
+    // this dispatcher always runs the configured actionName
+  }
+
+  get currentAction() {
+    return this.actions.find(action => action.name === this.actionName);
+  }
+
+  get actionListTemplate() {
+    return html`
+      <dile-button
+        class="${this.actionIds.length > 0 ? 'visible' : 'hide'}"
+        @click=${this.showAction}
+      >${this.currentAction ? this.currentAction.label : ''}</dile-button>
+    `;
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('actionName') || changedProperties.has('actions')) {
+      this.computeDestructive();
+    }
+  }
+}

package/components/crud/src/DileCrud.js

@@ -10,10 +10,12 @@ import '../../list/crud-list.js';
 import '../../ui/crud-sort-form.js';
 import '../../ui/crud-page-size.js';
 import '../../ui/crud-filters.js';
+import '../../ui/crud-filters-inline.js';
 import '../../insert/crud-insert.js';
 import '../../update/crud-update.js';
 import '../../action/crud-actions.js';
 import '../../action/crud-delete-action.js';
+import '../../action/crud-single-action-dispatcher.js';
 import { formStyles } from '../../../styles/form-styles.js';
 import { DileCrudMixin } from '../../../lib/DileCrudMixin.js';
 import { crudStyles } from '../../../styles/crud-styles.js';
@@ -95,12 +97,15 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         keyword: { type: String },
         belongsTo: { type: String },
         relationId: { type: String },
+        filtersAlwaysVisible: { type: Boolean },
+        singleActionDispatcher: { type: String },
       };
     }
 
     constructor() {
         super();
         this.actionIds = [];
+        this.filtersAlwaysVisible = false;
     }
 
     // GETTERS ELEMENTOS
@@ -135,6 +140,7 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
 
             <main>
                 ${this.navActionsTemplate}
+                ${this.filtersAlwaysVisible && !this.config.customization.disableFilter ? this.filtersAlwaysVisibleTemplate : ''}
                 <div
                     @item-checkbox-changed=${this.itemCheckboxChanged}
                     @dile-chip-icon-click=${this.removeFilter}
@@ -232,11 +238,11 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
                     }
                     <div class="actions" slot="actions">
                         ${this.actionsTemplate}
-                        ${this.config.customization.disableFilter
+                        ${this.config.customization.disableFilter || this.filtersAlwaysVisible
                             ? ''
                             : html`
                                 <dile-crud-filters
-                                    class="action-controller" 
+                                    class="action-controller"
                                     id="elfilters"
                                     @filters-changed=${this.filtersChanged}
                                     .filters=${this.config.availableFilters || []}
@@ -276,10 +282,21 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         `
     }
 
+    get filtersAlwaysVisibleTemplate() {
+        return html`
+            <dile-crud-filters-inline
+                id="elfilters"
+                @filters-changed=${this.filtersChanged}
+                .filters=${this.config.availableFilters || []}
+                language="${this.language}"
+            ></dile-crud-filters-inline>
+        `
+    }
+
     get disableAllActionFunctionalities() {
         const customization = this.config.customization;
-        return customization.disableHelp 
-            && customization.disableFilter 
+        return customization.disableHelp
+            && (customization.disableFilter || this.filtersAlwaysVisible)
             && customization.disablePagination
             && customization.disableSort
             && customization.hideCheckboxSelection;

package/components/ui/crud-filters-inline.js

@@ -0,0 +1,4 @@
+import { DileCrudFiltersInline } from "./src/DileCrudFiltersInline.js";
+if (!customElements.get('dile-crud-filters-inline')) {
+  customElements.define('dile-crud-filters-inline', DileCrudFiltersInline);
+}

package/components/ui/src/DileCrudFilters.js

@@ -19,15 +19,21 @@ export class DileCrudFilters extends DileI18nMixin(LitElement) {
     render() {
         return html`
             <dile-crud-list-options .icon="${filterIcon}" label="${this.translations.filters_label}" >
-                <dile-crud-filters-form 
-                    id="elform"
-                    .filters=${this.filters} 
-                    @dile-form-changed=${this.filtersChanged}
-                ></dile-crud-filters-form>
+                ${this.formTemplate}
             </dile-crud-list-options>
         `;
     }
 
+    get formTemplate() {
+        return html`
+            <dile-crud-filters-form 
+                id="elform"
+                .filters=${this.filters} 
+                @dile-form-changed=${this.filtersChanged}
+            ></dile-crud-filters-form>
+        `;
+    }
+
     removeFilter(filterName) {
         this.shadowRoot.getElementById('elform').resetField(filterName);
     }

package/components/ui/src/DileCrudFiltersForm.js

@@ -15,7 +15,7 @@ export class DileCrudFiltersForm extends DileFormChangeDetect(DileForm(LitElemen
       --dile-input-label-margin-bottom: var(--dile-crud-filters-label-margin-bottom, var(--dile-input-label-margin-bottom, 4px));
     }
     p {
-      margin: 0.4rem 0;
+      margin: var(--dile-crud-filters-field-margin, 0.4rem 0);
     }
   `;
 

package/components/ui/src/DileCrudFiltersInline.js

@@ -0,0 +1,42 @@
+import { DileCrudFilters } from './DileCrudFilters.js';
+import { html, css } from 'lit';
+import '@dile/ui/components/card/card.js';
+
+export class DileCrudFiltersInline extends DileCrudFilters {
+  static get styles() {
+    return css`
+      :host {
+          display: block;
+      }
+      dile-card {
+          margin: var(--dile-crud-filters-inline-margin, 0.5rem 0) !important;
+          --dile-card-background-color: var(--dile-crud-filters-inline-background-color, var(--dile-gray-very-light-color, #f5f5f5));
+          --dile-card-text-color
+          --dile-card-border: var(--dile-crud-filters-inline-border, none);
+      }
+      dile-crud-filters-form {
+          display: grid;
+          align-items: center;
+      }
+      @media (min-width: 500px) {
+          dile-crud-filters-form {
+              gap: var(--dile-crud-filters-inline-gap, 1rem);
+              grid-template-columns: var(--dile-crud-filters-inline-columns-medium, 1fr 1fr);
+          }
+      }
+      @media (min-width: 1200px) {
+          dile-crud-filters-form {
+              grid-template-columns: var(--dile-crud-filters-inline-columns-large, 1fr 1fr 1fr);
+          }
+      }
+    `;
+  }
+
+  render() {
+      return html`
+        <dile-card>
+          ${this.formTemplate}
+        </dile-card>
+    `
+    }
+}

package/lib/DileCrudMixin.js

@@ -10,6 +10,12 @@ export const DileCrudMixin = (superclass) => class extends superclass {
     }
 
     get actionsTemplate() {
+        return this.singleActionDispatcher
+            ? this.singleActionDispatcherTemplate
+            : this.standardActionsTemplate;
+    }
+
+    get standardActionsTemplate() {
         return html`
             <dile-crud-actions
                 @crud-action-success=${this.actionSuccess}
@@ -25,6 +31,23 @@ export const DileCrudMixin = (superclass) => class extends superclass {
         `
     }
 
+    get singleActionDispatcherTemplate() {
+        return html`
+            <dile-crud-single-action-dispatcher
+                @crud-action-success=${this.actionSuccess}
+                class="action-controller"
+                id="elactions"
+                .actionIds=${this.actionIds}
+                endpoint=${this.config.endpoint}
+                .actions=${this.config.actions.single}
+                actionName="${this.singleActionDispatcher}"
+                .formActionsTemplate=${this.config.templates.formActions}
+                language="${this.language}"
+                .responseAdapter=${this.config.responseAdapter}
+            ></dile-crud-single-action-dispatcher>
+        `
+    }
+
     get updateTemplate() {
         return html`
             <dile-modal 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -32,5 +32,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "645c317c496f3bac9df718ca6e024b9a696edb88"
+  "gitHead": "2ada69998b5f563e593acb5007afc1995b04b194"
 }

package/styles/form-styles.js

@@ -8,6 +8,8 @@ export const formStyles = css`
   --dile-modal-height: auto;
   --dile-modal-close-icon-top: 1rem;
   --dile-modal-close-icon-color: #f66;
+  --dile-modal-content-background-color: var(--dile-background-color, #fff);
+  --dile-modal-content-text-color: var(--dile-on-background-color, #303030);
 }
 @media(min-width: 380px) {
   :host {