@dile/crud 2.8.5 → 2.8.7

package/components/action/src/DileCrudSingleActions.js

@@ -47,6 +47,7 @@ export class DileCrudSingleActions extends DileCrudActions {
     super();
     this.actions = [];
     this.directSingleActions = [];
+    this._initialData = null;
   }
 
   get actionListTemplate() {
@@ -94,14 +95,41 @@ export class DileCrudSingleActions extends DileCrudActions {
     }
   }
 
-  triggerAction(actionName) {
+  async showAction() {
+    super.showAction();
+    // Wait for the form to be rendered after the confirm opens
+    let form = this.selectedActionForm;
+    let attempts = 0;
+    while (!form && attempts < 50) {
+      await this.updateComplete;
+      await new Promise(r => setTimeout(r, 10));
+      form = this.selectedActionForm;
+      attempts++;
+    }
+    
+    if (form) {
+      if (this._initialData) {
+        await form.setData(this._initialData);
+        this._initialData = null;
+      } else {
+        // Reset form if no initial data
+        await form.resetData();
+      }
+    }
+  }
+
+  async triggerAction(actionName, initialData) {
     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();
+      // Store initial data for showAction to apply
+      if (initialData) {
+        this._initialData = initialData;
+      }
+      await this.showAction();
     }
   }
 }

package/components/action/src/DileCrudSingleActions.spec.js

@@ -0,0 +1,126 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { html, LitElement } from 'lit';
+import { DileForm } from '@dile/ui/mixins/form';
+import '../crud-single-actions.js';
+
+// Create a test form component that extends DileForm
+class TestActionForm extends DileForm(LitElement) {
+  render() {
+    return html`
+      <input name="productUuid" />
+      <input name="units" type="number" value="1" />
+    `;
+  }
+}
+
+if (!customElements.get('test-action-form')) {
+  customElements.define('test-action-form', TestActionForm);
+}
+
+describe('DileCrudSingleActions with triggerAction', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const testActions = [
+    {
+      name: 'CreateInvoiceAction',
+      label: 'Create Invoice',
+      destructive: false,
+    },
+  ];
+
+  function createFormTemplate(selection) {
+    return (selection, element) => html`
+      ${selection === 'CreateInvoiceAction'
+        ? html`<test-action-form action="CreateInvoiceAction"></test-action-form>`
+        : ''
+      }
+    `;
+  }
+
+  async function createSingleActions() {
+    const el = document.createElement('dile-crud-single-actions');
+    el.actions = testActions;
+    el.directSingleActions = [];
+    el.formActionsTemplate = createFormTemplate(testActions[0].name);
+    el.actionIds = [1];
+    el.element = { id: 1, name: 'Test Item' };
+    el.endpoint = 'https://example.test/api';
+    el.language = 'en';
+    document.body.appendChild(el);
+    await el.updateComplete;
+    return el;
+  }
+
+  async function waitForForm(el, maxWait = 2000) {
+    const startTime = Date.now();
+    while (Date.now() - startTime < maxWait) {
+      const form = el.selectedActionForm;
+      if (form) {
+        await form.updateComplete;
+        return form;
+      }
+      await new Promise(r => setTimeout(r, 50));
+    }
+    return null;
+  }
+
+  it('triggerAction with initialData sets form values', async () => {
+    const el = await createSingleActions();
+    
+    const initialData = { productUuid: 'uuid-123', units: '5' };
+    el.triggerAction('CreateInvoiceAction', initialData);
+    
+    const form = await waitForForm(el);
+    expect(form).toBeTruthy();
+    
+    const productInput = form.shadowRoot.querySelector('[name="productUuid"]');
+    const unitsInput = form.shadowRoot.querySelector('[name="units"]');
+    
+    expect(productInput.value).toBe('uuid-123');
+    expect(unitsInput.value).toBe('5');
+  });
+
+  it('triggerAction without initialData resets form to empty', async () => {
+    const el = await createSingleActions();
+    
+    // First open with initial data
+    el.triggerAction('CreateInvoiceAction', { productUuid: 'uuid-old', units: '10' });
+    let form = await waitForForm(el);
+    expect(form.shadowRoot.querySelector('[name="productUuid"]').value).toBe('uuid-old');
+    
+    // Close the dialog
+    const confirm = el.confirmElement;
+    confirm.close();
+    await new Promise(r => setTimeout(r, 100));
+    
+    // Open again without initial data - should reset
+    el.triggerAction('CreateInvoiceAction');
+    form = await waitForForm(el);
+    
+    // Form should be empty after reset
+    expect(form.shadowRoot.querySelector('[name="productUuid"]').value).toBe('');
+  });
+
+  it('triggerAction opens confirm dialog', async () => {
+    const el = await createSingleActions();
+    
+    el.triggerAction('CreateInvoiceAction');
+    await waitForForm(el);
+    
+    const confirm = el.confirmElement;
+    expect(confirm).toBeTruthy();
+  });
+
+  it('initialData is cleared after being applied', async () => {
+    const el = await createSingleActions();
+    
+    el.triggerAction('CreateInvoiceAction', { productUuid: 'uuid-first' });
+    await waitForForm(el);
+    
+    // _initialData should be null after being used
+    expect(el._initialData).toBeNull();
+  });
+});
+

package/components/single/src/DileCrudSingle.js

@@ -174,8 +174,12 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
     this.detailElement.refresh();
   }
 
-  triggerDirectAction(actionName) {
-    this.singleActionsElement.triggerAction(actionName);
+  triggerDirectAction(actionName, initialData) {
+    this.singleActionsElement.triggerAction(actionName, initialData);
+  }
+
+  triggerAction(actionName, initialData) {
+    this.singleActionsElement.triggerAction(actionName, initialData);
   }
 
   elementLoaded(e) {

package/components/single/src/DileCrudSingle.spec.js

@@ -0,0 +1,151 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { html, LitElement } from 'lit';
+import { DileForm } from '@dile/ui/mixins/form';
+import '../crud-single.js';
+
+// Create a test form component
+class TestActionForm extends DileForm(LitElement) {
+  render() {
+    return html`
+      <input name="productUuid" />
+      <input name="units" type="number" value="1" />
+    `;
+  }
+}
+
+if (!customElements.get('test-action-form')) {
+  customElements.define('test-action-form', TestActionForm);
+}
+
+describe('DileCrudSingle.triggerAction and triggerDirectAction', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete window.axiosInstance;
+  });
+
+  function mockAxios({ get = vi.fn(() => Promise.resolve({ status: 200, data: {} })) } = {}) {
+    window.axiosInstance = { get };
+    return window.axiosInstance;
+  }
+
+  const testActions = [
+    {
+      name: 'CreateInvoiceAction',
+      label: 'Create Invoice',
+      destructive: false,
+    },
+  ];
+
+  function createFormTemplate() {
+    return (selection, element) => html`
+      ${selection === 'CreateInvoiceAction'
+        ? html`<test-action-form action="CreateInvoiceAction"></test-action-form>`
+        : ''
+      }
+    `;
+  }
+
+  const testConfig = {
+    endpoint: 'https://example.test/api/items',
+    actions: {
+      single: testActions,
+      directSingleActions: [],
+      list: [],
+    },
+    customization: {
+      disableEdit: true,
+      disableListActionsOnSingleComponent: true,
+    },
+    labels: {
+      startUpdateAction: 'Edit',
+    },
+    templates: {
+      detail: (item) => html`<div class="item-detail">${item?.name || ''}</div>`,
+      formSingleActions: createFormTemplate(),
+      relations: () => html``,
+      updateForm: () => html``,
+    },
+    formIds: {
+      updateForm: 'update-form',
+    },
+    translations: {
+      element_actions: 'Actions',
+    },
+    responseAdapter: {
+      setResponse: () => {},
+      getData: () => ({ id: 1, name: 'Test Item' }),
+      getActionResponseMessage: () => 'Success',
+      getActionResponseActionName: () => 'CreateInvoiceAction',
+      getActionResponseActionData: () => ({}),
+    },
+    destructiveActionNames: [],
+  };
+
+  async function createCrudSingle() {
+    mockAxios({
+      get: vi.fn(() => Promise.resolve({ 
+        status: 200, 
+        data: { data: { id: 1, name: 'Test Item' } }
+      }))
+    });
+    const el = document.createElement('dile-crud-single');
+    el.relatedId = '1';
+    el.config = testConfig;
+    el.element = { id: 1, name: 'Test Item' };
+    document.body.appendChild(el);
+    await el.updateComplete;
+    return el;
+  }
+
+  it('triggerAction delegates to singleActionsElement.triggerAction', async () => {
+    const el = await createCrudSingle();
+    
+    const singleActionsElement = el.singleActionsElement;
+    const triggerActionSpy = vi.spyOn(singleActionsElement, 'triggerAction');
+    
+    const initialData = { productUuid: 'uuid-123', units: 5 };
+    el.triggerAction('CreateInvoiceAction', initialData);
+    
+    expect(triggerActionSpy).toHaveBeenCalledWith('CreateInvoiceAction', initialData);
+    triggerActionSpy.mockRestore();
+  });
+
+  it('triggerDirectAction delegates to singleActionsElement.triggerAction', async () => {
+    const el = await createCrudSingle();
+    
+    const singleActionsElement = el.singleActionsElement;
+    const triggerActionSpy = vi.spyOn(singleActionsElement, 'triggerAction');
+    
+    const initialData = { productUuid: 'uuid-456', units: 2 };
+    el.triggerDirectAction('CreateInvoiceAction', initialData);
+    
+    expect(triggerActionSpy).toHaveBeenCalledWith('CreateInvoiceAction', initialData);
+    triggerActionSpy.mockRestore();
+  });
+
+  it('triggerDirectAction without initialData still works (backward compatibility)', async () => {
+    const el = await createCrudSingle();
+    
+    const singleActionsElement = el.singleActionsElement;
+    const triggerActionSpy = vi.spyOn(singleActionsElement, 'triggerAction');
+    
+    el.triggerDirectAction('CreateInvoiceAction');
+    
+    expect(triggerActionSpy).toHaveBeenCalledWith('CreateInvoiceAction', undefined);
+    triggerActionSpy.mockRestore();
+  });
+
+  it('triggerAction without initialData works', async () => {
+    const el = await createCrudSingle();
+    
+    const singleActionsElement = el.singleActionsElement;
+    const triggerActionSpy = vi.spyOn(singleActionsElement, 'triggerAction');
+    
+    el.triggerAction('CreateInvoiceAction');
+    
+    expect(triggerActionSpy).toHaveBeenCalledWith('CreateInvoiceAction', undefined);
+    triggerActionSpy.mockRestore();
+  });
+});
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.8.5",
+  "version": "2.8.7",
   "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.13.1",
+    "@dile/ui": "^3.14.0",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca740f524209d56344b4b0090d9a82c8f1c0782f"
+  "gitHead": "2dbcfcfc126715e1f21c28806714f5f59b89d93b"
 }