@dile/crud 2.4.4 → 2.5.0

package/components/action/src/DileCrudSingleActions.js

@@ -39,17 +39,23 @@ export class DileCrudSingleActions extends DileCrudActions {
     return {
       actions: { type: Array },
       element: { type: Object },
+      directSingleActions: { type: Array },
     };
   }
 
   constructor() {
     super();
     this.actions = [];
+    this.directSingleActions = [];
   }
 
   get actionListTemplate() {
+    const visibleActions = this.actions.filter(action =>
+      (!action.shouldAppear || action.shouldAppear(this.element)) &&
+      !this.directSingleActions.includes(action.name)
+    );
     return html`
-      ${this.actions.length > 0
+      ${visibleActions.length > 0
         ? html`
           <dile-card title="${this.translations.element_actions}">
             <dile-box-selector 
@@ -57,9 +63,7 @@ export class DileCrudSingleActions extends DileCrudActions {
                 attrForSelected="name"
                 @dile-selected-changed="${this.onActionSelected}"
             >
-                ${this.actions
-                  .filter(action => !action.shouldAppear || action.shouldAppear(this.element))
-                  .map(action => html`
+                ${visibleActions.map(action => html`
                     <dile-box-selector-item 
                         label="${action.label}"
                         name="${action.name}"
@@ -89,4 +93,15 @@ export class DileCrudSingleActions extends DileCrudActions {
       this.showAction();
     }
   }
+
+  triggerAction(actionName) {
+    this.selection = actionName;
+    this.computeDestructive();
+    const action = this.actions.find(a => a.name === actionName);
+    if (action && action.onClick) {
+      action.onClick(this.element);
+    } else {
+      this.showAction();
+    }
+  }
 }

package/components/single/src/DileCrudSingle.js

@@ -76,20 +76,29 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
     `
   }
 
+  get showActionsBar() {
+    const c = this.config;
+    const hasEdit = !c?.customization?.disableEdit;
+    const hasDirectActions = c?.actions?.directSingleActions?.length > 0;
+    const hasListActions = !c?.customization?.disableListActionsOnSingleComponent && c?.actions?.list?.length > 0;
+    return hasEdit || hasDirectActions || hasListActions;
+  }
+
   get contentTemplate() {
     return html`
       <main class="elcontainer">
         ${this.detailTemplate}
-        ${this.config?.customization?.disableEdit && (!this.config?.actions?.list || this.config.actions.list.length === 0) ? '' : html`
+        ${this.showActionsBar ? html`
           <div class="actions" @action-success=${this.actionSuccess}>
               ${!this.config?.customization?.disableEdit ? html`
                 <dile-button .icon="${editIcon}" @click=${this.edit}>
                   ${this.startUpdateLabelComputed(this.config.labels.startUpdateAction, this.translations)}
                 </dile-button>
               ` : ''}
-              ${this.actionsTemplate}
+              ${this.directActionsTemplate}
+              ${this.config?.customization?.disableListActionsOnSingleComponent ? '' : this.actionsTemplate}
           </div>
-        `}
+        ` : ''}
       </main>
 
       ${this.updateTemplate}
@@ -115,6 +124,7 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
     return html`
       <dile-crud-single-actions
         .actions=${this.config.actions.single}
+        .directSingleActions=${this.config.actions.directSingleActions || []}
         .formActionsTemplate=${this.config.templates.formSingleActions}
         .actionIds=${this.actionIds}
         endpoint=${this.config.endpoint}
@@ -126,14 +136,36 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
     `
   }
 
+  get directActionsTemplate() {
+    const directSingleActions = this.config.actions.directSingleActions || [];
+    return directSingleActions.map(actionName => {
+      const action = (this.config.actions.single || []).find(a => a.name === actionName);
+      if (!action) return '';
+      if (action.shouldAppear && !action.shouldAppear(this.element)) return '';
+      return html`
+        <dile-button class="action-controller" @click=${() => this.triggerDirectAction(actionName)}>
+          ${action.label}
+        </dile-button>
+      `;
+    });
+  }
+
   get detailElement() {
     return this.shadowRoot.getElementById('eldetail');
   }
 
+  get singleActionsElement() {
+    return this.shadowRoot.querySelector('dile-crud-single-actions');
+  }
+
   refresh() {
     this.detailElement.refresh();
   }
 
+  triggerDirectAction(actionName) {
+    this.singleActionsElement.triggerAction(actionName);
+  }
+
   elementLoaded(e) {
     this.element = e.detail.element;
   }

package/lib/defaultConfig.js

@@ -30,6 +30,7 @@ export const defaultConfig = {
     disableSort: true,
     disableFilter: true,
     disableHelp: true,
+    disableListActionsOnSingleComponent: false,
   },
   responseAdapter: new ResponseApiAdapter(),
   requestAdapter: new RequestApiAdapter(),
@@ -57,6 +58,7 @@ export const defaultConfig = {
       }
     ],
     single: [],
+    directSingleActions: [],
   },
   templates: {
     item: () => templatePlaceholder('item'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.4.4",
+  "version": "2.5.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": "d9fcd6a43318a4407751cdd25f9361502e9d2619"
+  "gitHead": "c94427356ce29d9ad6e492cc8ac7be41b0cdd665"
 }