@dile/crud 2.5.3 → 2.5.5

package/components/action/src/DileCrudActions.js

@@ -2,7 +2,8 @@ import { LitElement, html, css } from 'lit';
 import { moreVertIcon } from '@dile/icons';
 import '@dile/ui/components/confirm/confirm.js';
 import '@dile/ui/components/select/select.js';
-import '../../ajax/ajax.js'
+import '@dile/ui/components/spinner/spinner-modal.js';
+import '../../ajax/ajax.js';
 import '../../ui/crud-list-options.js';
 import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 import { ResponseApiAdapter } from '../../../lib/ResponseApiAdapter.js';
@@ -62,8 +63,9 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
       endpoint: { type: String },
       actions: { type: Array },
       formActionsTemplate: { type: Object },
-      destructive: { type: Boolean, reflect: true, },
+      destructive: { type: Boolean, reflect: true },
       responseAdapter: { type: Object },
+      loading: { type: Boolean },
     };
   }
 
@@ -73,6 +75,7 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
     this.actions = [];
     this.selection = 'DeleteAction';
     this.responseAdapter = new ResponseApiAdapter();
+    this.loading = false;
   }
 
   firstUpdated() {
@@ -85,7 +88,8 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
         ${this.ajaxTemplate}
         ${this.actionListTemplate}
         ${this.confirmActionTemplate}
-        `;
+        <dile-spinner-modal ?active=${this.loading}></dile-spinner-modal>
+    `;
   }
 
   get ajaxTemplate() {
@@ -119,7 +123,7 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
               ${this.actions.map(action => html`<option value="${action.name}">${action.label}</option>`)}
           </select>
       </dile-select>
-    `
+    `;
   }
 
   get confirmActionTemplate() {
@@ -169,15 +173,24 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
     this.confirmElement.open();
     let listOptions = this.shadowRoot.querySelector('dile-crud-list-options');
     if (listOptions) {
-      listOptions.close()
+      listOptions.close();
     }
   }
 
   get selectedActionForm() {
-    return this.shadowRoot.querySelector(`[action="${this.selection}"]`)
+    return this.shadowRoot.querySelector(`[action="${this.selection}"]`);
   }
 
   doAction() {
+    this.loading = true;
+    this.dispatchEvent(new CustomEvent('crud-action-start', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        action: this.selection,
+        actionIds: this.actionIds,
+      }
+    }));
     let actionData = this.selectedActionForm.getData();
     this.ajaxAction.data = {
       type: this.selection,
@@ -188,6 +201,7 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
   }
 
   doSuccessAction(e) {
+    this.loading = false;
     this.selectedActionForm.resetData();
     this.selectedActionForm.clearErrors();
     this.confirmElement.close();
@@ -204,6 +218,10 @@ 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', {
@@ -217,11 +235,15 @@ export class DileCrudActions extends DileI18nMixin(LitElement) {
   }
 
   getActionForm() {
-    let actionForm = this.shadowRoot.querySelector(`[action="${this.selection}"]`)
+    let actionForm = this.shadowRoot.querySelector(`[action="${this.selection}"]`);
     return actionForm;
   }
 
   cancelAction() {
+    this.loading = false;
+    if (this.confirmElement) {
+      this.confirmElement.resetProcessing();
+    }
     this.selectedActionForm.clearErrors();
     this.selectedActionForm.resetData();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.5.3",
+  "version": "2.5.5",
   "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.4",
+    "@dile/ui": "^3.6.6",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f7eb4bd1d478971068e9fe17a39658b4d7cb424f"
+  "gitHead": "3bc0a2459a5ced3e7105ce061f93f07a9c798759"
 }