@dile/crud 2.9.5 → 2.10.1

package/components/steps-form/index.js

@@ -0,0 +1,3 @@
+export { DileStepsForm } from './src/DileStepsForm.js';
+export { DileStepForm } from './src/DileStepForm.js';
+export { DileStepNextPrev } from './src/DileStepNextPrev.js';

package/components/steps-form/src/DileStepForm.js

@@ -0,0 +1,202 @@
+import { LitElement, html, css } from "lit";
+import "../../ajax/ajax.js";
+import { ResponseApiAdapter } from "../../../lib/ResponseApiAdapter.js";
+import "../step-next-prev.js";
+
+export class DileStepForm extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      :host(:not([active])) {
+        display: none;
+      }
+    `,
+  ];
+
+  static get properties() {
+    return {
+      /** Label of the step, shown in the steps indicator */
+      label: { type: String },
+      /** The step is the visible one. Managed by dile-steps-form */
+      active: { type: Boolean, reflect: true },
+      /** Endpoint where the step data is saved */
+      endpoint: { type: String },
+      /** HTTP method used to save the step */
+      method: { type: String },
+      /** Zero-based index of the step, set by dile-steps-form */
+      step: { type: Number },
+      /** Labels of all the steps, set by dile-steps-form */
+      steps: { type: Array },
+      /** Shows the alternative exit link in this step */
+      alternativeExit: { type: Boolean },
+      alternativeExitLabel: { type: String },
+      /** Name of the field added to the payload when the alternative exit is used. Empty to not send it */
+      alternativeExitField: { type: String },
+      prevLabel: { type: String },
+      nextLabel: { type: String },
+      endLabel: { type: String },
+      /** Default labels, set by dile-steps-form: { prev, next, end } */
+      defaultLabels: { type: Object },
+      /** The form of this step receives the data returned when another step is saved */
+      refreshOnSave: { type: Boolean },
+      sendDataAsFormData: { type: Boolean },
+      responseAdapter: { type: Object },
+      language: { type: String },
+      loading: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.active = false;
+    this.method = "patch";
+    this.steps = [];
+    this.alternativeExit = false;
+    this.alternativeExitField = "alternativeExit";
+    this.defaultLabels = {};
+    this.refreshOnSave = false;
+    this.sendDataAsFormData = false;
+    this.language = "en";
+    this.loading = false;
+    this.alternativeExitRequested = false;
+    this.defaultResponseAdapter = new ResponseApiAdapter();
+  }
+
+  get elajax() {
+    return this.shadowRoot.getElementById("ajaxsave");
+  }
+
+  get form() {
+    return this.querySelector('[slot="form"]');
+  }
+
+  get adapter() {
+    return this.responseAdapter ?? this.defaultResponseAdapter;
+  }
+
+  updated(changedProperties) {
+    if (
+      changedProperties.has("label") &&
+      changedProperties.get("label") !== undefined
+    ) {
+      this.dispatchEvent(
+        new CustomEvent("dile-step-form-label-change", {
+          bubbles: true,
+          detail: { label: this.label },
+        }),
+      );
+    }
+  }
+
+  render() {
+    return html`
+      <dile-ajax
+        id="ajaxsave"
+        method="${this.method}"
+        url="${this.endpoint}"
+        language="${this.language}"
+        ?sendDataAsFormData=${this.sendDataAsFormData}
+        @ajax-success="${this.doSuccessSave}"
+        @ajax-error="${this.doErrorSave}"
+      ></dile-ajax>
+      <slot name="form"></slot>
+      <dile-step-next-prev
+        .current=${this.step}
+        .steps=${this.steps}
+        ?alternativeExit=${this.alternativeExit}
+        .alternativeExitLabel=${this.alternativeExitLabel}
+        .prevLabel=${this.prevLabel || this.defaultLabels?.prev}
+        .nextLabel=${this.nextLabel || this.defaultLabels?.next}
+        .endLabel=${this.endLabel || this.defaultLabels?.end}
+        language="${this.language}"
+        ?loading=${this.loading}
+        @dile-step-next-click=${this.next}
+        @dile-step-alternative-exit=${this.alternativeNext}
+        @dile-step-prev-click=${this.navigatePrev}
+      ></dile-step-next-prev>
+    `;
+  }
+
+  next() {
+    this.submit(false);
+  }
+
+  alternativeNext() {
+    this.submit(true);
+  }
+
+  submit(alternativeExit) {
+    const form = this.form;
+    if (!form) {
+      throw new Error(
+        `[dile-step-form] No element with slot="form" was found in step ${this.step + 1}. The form element must have the slot="form" attribute.`,
+      );
+    }
+    const data = form.getData();
+    if (alternativeExit && this.alternativeExitField) {
+      data[this.alternativeExitField] = true;
+    }
+    this.alternativeExitRequested = alternativeExit;
+    this.setLoading(true);
+    this.elajax.data = data;
+    this.elajax.generateRequest();
+  }
+
+  setLoading(loading) {
+    this.loading = loading;
+    this.dispatchEvent(
+      new CustomEvent("dile-step-form-loading", {
+        bubbles: true,
+        composed: true,
+        detail: { loading },
+      }),
+    );
+  }
+
+  doSuccessSave(e) {
+    const alternativeExit = this.alternativeExitRequested;
+    this.alternativeExitRequested = false;
+    this.setLoading(false);
+    this.adapter.setResponse(e.detail);
+    const data = this.adapter.getData();
+    this.dispatchEvent(
+      new CustomEvent("dile-step-form-success", {
+        bubbles: true,
+        composed: true,
+        detail: { message: this.adapter.getMessage(), data },
+      }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("dile-step-next", {
+        bubbles: true,
+        detail: { data, alternativeExit },
+      }),
+    );
+  }
+
+  doErrorSave(e) {
+    this.alternativeExitRequested = false;
+    this.setLoading(false);
+    this.adapter.setResponse(e.detail);
+    const errors = this.adapter.getValidationErrors();
+    this.dispatchEvent(
+      new CustomEvent("dile-step-form-error", {
+        bubbles: true,
+        composed: true,
+        detail: { message: e.detail.message, errors, status: e.detail.status },
+      }),
+    );
+    this.form?.showErrors(errors);
+  }
+
+  navigatePrev() {
+    this.dispatchEvent(
+      new CustomEvent("dile-step-prev", {
+        bubbles: true,
+        detail: { index: this.step - 1 },
+      }),
+    );
+  }
+}

package/components/steps-form/src/DileStepNextPrev.js

@@ -0,0 +1,134 @@
+import { LitElement, html, css } from "lit";
+import "@dile/ui/components/button/button.js";
+import { DileI18nMixin } from "../../../lib/DileI18nMixin.js";
+
+export class DileStepNextPrev extends DileI18nMixin(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        container-type: inline-size;
+        margin-top: var(--dile-step-next-prev-margin-top, 1.5rem);
+      }
+      section {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 0.25rem;
+        align-items: center;
+      }
+      @container (min-width: 420px) {
+        section {
+          flex-direction: row;
+          gap: 1rem;
+        }
+      }
+      .alternative-exit {
+        flex-grow: 1;
+        display: flex;
+        justify-content: flex-end;
+      }
+      .alternative-exit button {
+        color: var(--dile-step-alternative-exit-color, var(--dile-link-color));
+        background: none;
+        border: none;
+        padding: 0;
+        font: inherit;
+        cursor: pointer;
+        text-decoration: none;
+      }
+      .alternative-exit button:disabled {
+        cursor: default;
+        opacity: 0.5;
+      }
+    `,
+  ];
+
+  static get properties() {
+    return {
+      current: { type: Number },
+      steps: { type: Array },
+      prevLabel: { type: String },
+      nextLabel: { type: String },
+      endLabel: { type: String },
+      alternativeExit: { type: Boolean },
+      alternativeExitLabel: { type: String },
+      loading: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.current = 0;
+    this.steps = [];
+    this.alternativeExit = false;
+    this.loading = false;
+  }
+
+  get isLast() {
+    return this.current >= this.steps.length - 1;
+  }
+
+  get computedPrevLabel() {
+    return this.prevLabel || this.translations?.step_prev_label || "Previous";
+  }
+
+  get computedNextLabel() {
+    return this.nextLabel || this.translations?.step_next_label || "Next";
+  }
+
+  get computedEndLabel() {
+    return this.endLabel || this.translations?.step_end_label || "Finish";
+  }
+
+  render() {
+    return html`
+      <section>
+        <div class="prev">
+          ${this.current > 0
+            ? html`<dile-button ?disabled=${this.loading} @click=${this.prev}
+                >${this.computedPrevLabel}</dile-button
+              >`
+            : ""}
+        </div>
+        ${this.alternativeExit && this.alternativeExitLabel
+          ? html`<div class="alternative-exit">
+              <button
+                type="button"
+                ?disabled=${this.loading}
+                @click=${this.alternativeExitClick}
+              >
+                ${this.alternativeExitLabel}
+              </button>
+            </div>`
+          : ""}
+        <div class="next">
+          <dile-button ?loading=${this.loading} @click=${this.next}>
+            ${this.isLast ? this.computedEndLabel : this.computedNextLabel}
+          </dile-button>
+        </div>
+      </section>
+    `;
+  }
+
+  dispatchNavigationEvent(eventName) {
+    this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail: {
+          current: this.current,
+        },
+      }),
+    );
+  }
+
+  next() {
+    this.dispatchNavigationEvent("dile-step-next-click");
+  }
+  prev() {
+    this.dispatchNavigationEvent("dile-step-prev-click");
+  }
+
+  alternativeExitClick() {
+    this.dispatchNavigationEvent("dile-step-alternative-exit");
+  }
+}

package/components/steps-form/src/DileStepsForm.js

@@ -0,0 +1,347 @@
+import { LitElement, html, css } from "lit";
+import "@dile/ui/components/steps/steps.js";
+import "../../ajax/ajax.js";
+import "@dile/ui/components/inline-feedback/inline-feedback.js";
+import { ResponseApiAdapter } from "../../../lib/ResponseApiAdapter.js";
+import { DileI18nMixin } from "../../../lib/DileI18nMixin.js";
+
+export class DileStepsForm extends DileI18nMixin(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      dile-steps {
+        margin-bottom: 1rem;
+      }
+      .header {
+        margin-bottom: 1.5rem;
+        font-size: var(--dile-steps-form-header-font-size, 1rem);
+        color: var(--dile-steps-form-header-color, var(--dile-on-background-color, #303030));
+      }
+      .title {
+        font-weight: var(--dile-steps-form-title-font-weight, 600);
+        color: var(--dile-on-background-color, #303030);
+      }
+      .separator {
+        margin: 0 0.4rem;
+        opacity: 0.5;
+      }
+      .step-label {
+        opacity: 0.75;
+        color: var(--dile-on-background-color, #303030);
+      }
+      .header:focus-visible {
+        outline: 2px solid var(--dile-step-active-border-color, var(--dile-primary-dark-color, #0039cb));
+        outline-offset: 2px;
+      }
+      dile-inline-feedback {
+        margin-top: var(--dile-steps-form-feedback-margin-top, 1rem);
+      }
+      :host([hidefeedback]) dile-inline-feedback {
+        display: none;
+      }
+    `,
+  ];
+
+  static get properties() {
+    return {
+      /** Labels of the steps. If empty, the label attribute of each dile-step-form is used */
+      steps: { type: Array },
+      title: { type: String },
+      /** Endpoint to load the data of every step form */
+      endpoint: { type: String },
+      current: { type: Number },
+      reached: { type: Number },
+      freeNavigation: { type: Boolean },
+      vertical: { type: Boolean },
+      /** Default labels for the navigation buttons of every step */
+      prevLabel: { type: String },
+      nextLabel: { type: String },
+      endLabel: { type: String },
+      /** Response adapter for the initial load and, if set, for every step */
+      responseAdapter: { type: Object },
+      /** Hides the inline feedback messages */
+      hideFeedback: { type: Boolean, reflect: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this.steps = [];
+    this.current = 0;
+    this.reached = 0;
+    this.freeNavigation = false;
+    this.vertical = false;
+    this.hideFeedback = false;
+    this.defaultResponseAdapter = new ResponseApiAdapter();
+  }
+
+  get adapter() {
+    return this.responseAdapter ?? this.defaultResponseAdapter;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("dile-step-next", this.onStepNext);
+    this.addEventListener("dile-step-prev", this.onStepPrev);
+    this.addEventListener("dile-step-form-loading", this.onStepLoading);
+    this.addEventListener("dile-step-form-success", this.onStepSuccess);
+    this.addEventListener("dile-step-form-error", this.onStepError);
+    this.addEventListener("dile-step-form-label-change", this.syncStepForms);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("dile-step-next", this.onStepNext);
+    this.removeEventListener("dile-step-prev", this.onStepPrev);
+    this.removeEventListener("dile-step-form-loading", this.onStepLoading);
+    this.removeEventListener("dile-step-form-success", this.onStepSuccess);
+    this.removeEventListener("dile-step-form-error", this.onStepError);
+    this.removeEventListener("dile-step-form-label-change", this.syncStepForms);
+  }
+
+  updated(changedProperties) {
+    if (
+      ["steps", "current", "prevLabel", "nextLabel", "endLabel", "responseAdapter", "language"].some(
+        (property) => changedProperties.has(property),
+      )
+    ) {
+      this.syncStepForms();
+    }
+    if (changedProperties.has("endpoint") && this.endpoint) {
+      this.fetchData();
+    }
+    if (
+      changedProperties.has("current") &&
+      changedProperties.get("current") !== undefined
+    ) {
+      this.focusHeader();
+    }
+  }
+
+  render() {
+    return html`
+      ${this.endpoint
+        ? html`
+            <dile-ajax
+              id="ajaxget"
+              method="get"
+              url="${this.endpoint}"
+              language="${this.language}"
+              @ajax-success="${this.onFetchSuccess}"
+              @ajax-error="${this.onFetchError}"
+            ></dile-ajax>
+          `
+        : ""}
+      ${this.headerTemplate}
+      <dile-steps
+        .steps=${this.stepLabels}
+        current="${this.current}"
+        reached="${this.reached}"
+        ?freeNavigation=${this.freeNavigation}
+        ?vertical=${this.vertical}
+        @dile-steps-select=${this.onStepSelect}
+      ></dile-steps>
+      <slot @slotchange=${this.syncStepForms}></slot>
+      <dile-inline-feedback id="feedback"></dile-inline-feedback>
+    `;
+  }
+
+  get feedback() {
+    return this.shadowRoot.getElementById("feedback");
+  }
+
+  get stepForms() {
+    return [...this.querySelectorAll(":scope > dile-step-form")];
+  }
+
+  get stepLabels() {
+    if (this.steps.length) {
+      return this.steps;
+    }
+    return this.stepForms.map((stepForm) => stepForm.label ?? "");
+  }
+
+  get formElements() {
+    return this.stepForms
+      .map((stepForm) => stepForm.form)
+      .filter((form) => form);
+  }
+
+  get currentStepLabel() {
+    return this.stepLabels[this.current] ?? "";
+  }
+
+  get headerTemplate() {
+    if (!this.title && !this.currentStepLabel) return "";
+    return html`
+      <div class="header" tabindex="-1" role="status">
+        ${this.title
+          ? html`<span class="title">${this.title}</span
+              ><span class="separator">›</span
+              ><span class="step-label">${this.currentStepLabel}</span>`
+          : html`<span class="step-label">${this.currentStepLabel}</span>`}
+      </div>
+    `;
+  }
+
+  focusHeader() {
+    this.shadowRoot.querySelector(".header")?.focus();
+  }
+
+  syncStepForms() {
+    const forms = this.stepForms;
+    const labels = this.stepLabels;
+    forms.forEach((form, index) => {
+      form.step = index;
+      form.steps = labels;
+      form.active = index === this.current;
+      form.language = this.language;
+      form.defaultLabels = {
+        prev: this.prevLabel,
+        next: this.nextLabel,
+        end: this.endLabel,
+      };
+      if (this.responseAdapter) {
+        form.responseAdapter = this.responseAdapter;
+      }
+    });
+    if (this.steps.length && forms.length && forms.length !== this.steps.length) {
+      console.warn(
+        `[dile-steps-form] The number of <dile-step-form> elements (${forms.length}) does not match steps.length (${this.steps.length}).`,
+      );
+    }
+    this.requestUpdate();
+  }
+
+  dispatchLoading(loading) {
+    this.dispatchEvent(
+      new CustomEvent("dile-steps-form-loading", {
+        bubbles: true,
+        composed: true,
+        detail: { loading },
+      }),
+    );
+  }
+
+  fetchData() {
+    this.dispatchLoading(true);
+    this.shadowRoot.getElementById("ajaxget")?.generateRequest();
+  }
+
+  async onFetchSuccess(e) {
+    this.adapter.setResponse(e.detail);
+    const data = this.adapter.getData();
+    await Promise.all(this.formElements.map((form) => form.updateComplete));
+    this.setData(data);
+    this.dispatchLoading(false);
+    this.dispatchEvent(
+      new CustomEvent("dile-steps-form-loaded", {
+        bubbles: true,
+        composed: true,
+        detail: { data },
+      }),
+    );
+  }
+
+  onFetchError(e) {
+    this.dispatchLoading(false);
+    this.dispatchEvent(
+      new CustomEvent("dile-steps-form-error", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          message: e.detail.message,
+          data: e.detail.data,
+          errors: e.detail.errors,
+          status: e.detail.status,
+        },
+      }),
+    );
+  }
+
+  /** Loads again the data of every step form from the endpoint */
+  reload() {
+    if (this.endpoint) {
+      this.fetchData();
+    }
+  }
+
+  /** Sets the same data in the form of every step */
+  setData(data) {
+    this.formElements.forEach((form) => form.setData(data));
+  }
+
+  onStepLoading(e) {
+    if (e.detail.loading) {
+      this.feedback?.clear();
+    }
+  }
+
+  onStepSuccess(e) {
+    this.stepForms
+      .filter((stepForm) => stepForm.refreshOnSave && !e.composedPath().includes(stepForm))
+      .forEach((stepForm) => stepForm.form?.setData(e.detail.data));
+    this.feedback?.positiveFeedbackWithDelay(
+      e.detail.message || this.translations?.step_success || "Data saved",
+      5000,
+    );
+  }
+
+  onStepError(e) {
+    this.feedback?.negativeFeedbackWithDelay(
+      e.detail.message || this.translations?.step_error || "Data could not be saved",
+      5000,
+    );
+  }
+
+  onStepNext(e) {
+    e.stopPropagation();
+    const next = this.current + 1;
+    if (next < this.stepForms.length && !e.detail.alternativeExit) {
+      this.navigateTo(next);
+    } else {
+      this.dispatchEvent(
+        new CustomEvent("dile-steps-form-complete", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            data: e.detail.data,
+            alternativeExit: Boolean(e.detail.alternativeExit),
+          },
+        }),
+      );
+    }
+  }
+
+  onStepPrev(e) {
+    e.stopPropagation();
+    this.feedback?.clear();
+    this.navigateTo(this.current - 1);
+  }
+
+  onStepSelect(e) {
+    e.stopPropagation();
+    this.feedback?.clear();
+    this.navigateTo(e.detail.index);
+  }
+
+  /** Shows the step at the given zero-based index */
+  navigateTo(index) {
+    if (index < 0 || index >= this.stepForms.length) return;
+    this.current = index;
+    if (index > this.reached) this.reached = index;
+    this.stepForms.forEach((stepForm, i) => {
+      stepForm.active = i === index;
+    });
+  }
+
+  next() {
+    this.navigateTo(this.current + 1);
+  }
+
+  prev() {
+    this.navigateTo(this.current - 1);
+  }
+}

package/components/steps-form/step-form.js

@@ -0,0 +1,5 @@
+import { DileStepForm } from './src/DileStepForm.js';
+
+if (!customElements.get('dile-step-form')) {
+  customElements.define('dile-step-form', DileStepForm);
+}

package/components/steps-form/step-next-prev.js

@@ -0,0 +1,5 @@
+import { DileStepNextPrev } from './src/DileStepNextPrev.js';
+
+if (!customElements.get('dile-step-next-prev')) {
+  customElements.define('dile-step-next-prev', DileStepNextPrev);
+}

package/components/steps-form/steps-form.js

@@ -0,0 +1,5 @@
+import { DileStepsForm } from './src/DileStepsForm.js';
+
+if (!customElements.get('dile-steps-form')) {
+  customElements.define('dile-steps-form', DileStepsForm);
+}