overview-components 1.0.92 → 1.0.95

package/dist/components/lit-filter-modal.js

@@ -0,0 +1,312 @@
+import { customElement as h } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as d } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as f } from "../node_modules/lit-element/lit-element.js";
+import { msg as p } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+import { getOperatorsByColumnType as m } from "../utils/getOperatorByType.js";
+import { css as v } from "../node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, F = Object.getOwnPropertyDescriptor, u = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? F(t, a) : t, l = e.length - 1, o; l >= 0; l--)
+    (o = e[l]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && g(t, a, i), i;
+};
+let c = class extends f {
+  constructor() {
+    super(...arguments), this.columns = [], this.filterData = {
+      logicOperator: "and",
+      items: [{ field: "", operator: "", value: "" }]
+    };
+  }
+  firstUpdated() {
+    this.initializeDefaultFilterValues(), this.columns = this.columns.filter((e) => e.enableFilter !== !1);
+  }
+  getOperatorsForField(e) {
+    const t = this.columns.find((a) => a.field === e);
+    return t ? t.filterOperators ? t.filterOperators.map((a) => ({
+      value: a.value,
+      label: a.label
+    })) : m(t.type ?? "") : [];
+  }
+  initializeDefaultFilterValues() {
+    var e, t, a;
+    if (!this.filterData.items.length || this.filterData.items[0].field === "") {
+      const r = ((t = (e = this.columns) == null ? void 0 : e[0]) == null ? void 0 : t.field) || "", i = ((a = this.getOperatorsForField(r)[0]) == null ? void 0 : a.value) || "";
+      this.filterData = {
+        logicOperator: "and",
+        items: [{ field: r, operator: i, value: "" }]
+      }, this.requestUpdate();
+    }
+  }
+  createNewFilterData(e) {
+    return {
+      logicOperator: this.filterData.logicOperator,
+      items: e
+    };
+  }
+  addFilterRow() {
+    var i, l, o;
+    const e = ((l = (i = this.columns) == null ? void 0 : i[0]) == null ? void 0 : l.field) || "", t = ((o = this.getOperatorsForField(e)[0]) == null ? void 0 : o.value) || "", a = [
+      ...this.filterData.items,
+      { field: e, operator: t, value: "" }
+    ], r = this.createNewFilterData(a);
+    this.updateFilterData(r);
+  }
+  removeFilterRow(e) {
+    var r, i, l;
+    let t = [...this.filterData.items];
+    if (t.splice(e, 1), t.length === 0) {
+      const o = ((i = (r = this.columns) == null ? void 0 : r[0]) == null ? void 0 : i.field) || "", s = ((l = this.getOperatorsForField(o)[0]) == null ? void 0 : l.value) || "";
+      t = [{ field: o, operator: s, value: "" }];
+    }
+    const a = this.createNewFilterData(t);
+    this.updateFilterData(a);
+  }
+  removeAll() {
+    var r, i, l;
+    const e = ((i = (r = this.columns) == null ? void 0 : r[0]) == null ? void 0 : i.field) || "", t = ((l = this.getOperatorsForField(e)[0]) == null ? void 0 : l.value) || "", a = {
+      logicOperator: "and",
+      items: [{ field: e, operator: t, value: "" }]
+    };
+    this.updateFilterData(a);
+  }
+  updateFilterData(e) {
+    this.filterData = e, this.onFilterChange && this.onFilterChange(e);
+  }
+  handleLogicOperatorChange(e) {
+    const a = {
+      logicOperator: e === "or" ? "or" : "and",
+      items: [...this.filterData.items]
+    };
+    this.updateFilterData(a);
+  }
+  handleFieldChange(e, t) {
+    var l;
+    const a = ((l = this.getOperatorsForField(e)[0]) == null ? void 0 : l.value) || "=", r = [...this.filterData.items];
+    r[t] = {
+      ...r[t],
+      field: e,
+      operator: a,
+      value: ""
+    };
+    const i = this.createNewFilterData(r);
+    this.updateFilterData(i);
+  }
+  handleOperatorChange(e, t) {
+    var s;
+    const a = (s = this.filterData.items[t]) == null ? void 0 : s.operator, r = e, i = a === "fromTo" || r === "fromTo", l = [...this.filterData.items];
+    l[t] = {
+      ...l[t],
+      operator: r,
+      value: i ? "" : l[t].value
+    };
+    const o = this.createNewFilterData(l);
+    this.updateFilterData(o), i && (this.clearDatePicker(t), this.requestUpdate());
+  }
+  handleValueChange(e, t) {
+    const a = [...this.filterData.items];
+    a[t] = { ...a[t], value: e };
+    const r = this.createNewFilterData(a);
+    this.updateFilterData(r);
+  }
+  clearDatePicker(e) {
+    var a, r;
+    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("lit-date-picker")[e];
+    t && (t.value = "", (r = t.datePicker) == null || r.clear());
+  }
+  renderFilterRows() {
+    return (this.filterData.items.length > 0 ? this.filterData.items : [{ field: "", operator: "", value: "" }]).map((t, a) => this.renderFilterRow(t, a));
+  }
+  renderFilterRow(e, t) {
+    var i, l, o;
+    const a = ((i = this.columns.find((s) => s.field === e.field)) == null ? void 0 : i.type) || "string", r = this.getOperatorsForField(e.field);
+    return n`
+            <div class="filter-row">
+                ${t === 0 ? n`<div class="empty-space"></div>` : n`
+                          <div>
+                              <div class="input-header">
+                                  <span class="input-title">${p("Funkce")}</span>
+                              </div>
+                              <lit-select
+                                  id=${`logicOperator-${t}`}
+                                  .value=${this.filterData.logicOperator}
+                                  .options=${[
+      { value: "and", label: "AND" },
+      { value: "or", label: "OR" }
+    ]}
+                                  .onChange=${(s) => this.handleLogicOperatorChange(s)}
+                                  disableClearButton="true"
+                                  .disabled=${t > 1}
+                              ></lit-select>
+                          </div>
+                      `}
+
+                <div>
+                    <div class="input-header">
+                        <span class="input-title">${p("Sloupec")}</span>
+                    </div>
+                    <lit-select
+                        id=${`field-${t}`}
+                        .value=${(e == null ? void 0 : e.field) || ((l = this.columns[0]) == null ? void 0 : l.field)}
+                        .options=${this.columns.map((s) => ({
+      value: s.field,
+      label: s.headerName
+    }))}
+                        .onChange=${(s) => this.handleFieldChange(s, t)}
+                        disableClearButton="true"
+                    ></lit-select>
+                </div>
+
+                <div>
+                    <div class="input-header">
+                        <span class="input-title">${p("Podmínka")}</span>
+                    </div>
+                    <lit-select
+                        id=${`operator-${t}`}
+                        .value=${(e == null ? void 0 : e.operator) || ((o = r[0]) == null ? void 0 : o.value)}
+                        .options=${r}
+                        .onChange=${(s) => this.handleOperatorChange(s, t)}
+                        disableClearButton="true"
+                    ></lit-select>
+                </div>
+
+                ${e.operator === "isEmpty" || e.operator === "isNotEmpty" ? n`<div class="empty-space"></div>` : n` <div>
+                          <div class="input-header">
+                              <span class="input-title">${p("Hodnota")}</span>
+                          </div>
+                          ${this.renderValueInput(a, e, t)}
+                      </div>`}
+
+                <lit-icon-button
+                    style="margin-top: 1.3125rem"
+                    variant="text"
+                    icon="trash"
+                    @click=${() => this.removeFilterRow(t)}
+                ></lit-icon-button>
+            </div>
+        `;
+  }
+  renderValueInput(e, t, a) {
+    const r = this.columns.find((i) => i.field === t.field);
+    switch (e) {
+      case "number":
+        return n`
+                    <lit-input
+                        type="number"
+                        .value=${t.value ?? ""}
+                        .onInput=${(i) => this.handleValueChange(i, a)}
+                    ></lit-input>
+                `;
+      case "date":
+        return n`
+                    <lit-date-picker
+                        .value=${t.value ?? ""}
+                        .onChange=${(i) => this.handleValueChange(i, a)}
+                        .range=${t.operator === "fromTo"}
+                    ></lit-date-picker>
+                `;
+      case "select":
+        return n`
+                    <lit-select
+                        .value=${t.value ?? ""}
+                        .onChange=${(i) => this.handleValueChange(i, a)}
+                        .options=${r == null ? void 0 : r.valueOptions}
+                    ></lit-select>
+                `;
+      case "multiselect":
+        return n`
+                    <lit-select
+                        multiple="true"
+                        .value=${t.value ?? ""}
+                        .onChange=${(i) => this.handleValueChange(i, a)}
+                        .options=${r == null ? void 0 : r.valueOptions}
+                    ></lit-select>
+                `;
+      case "string":
+      default:
+        return n`
+                    <lit-input
+                        type="text"
+                        .value=${t.value ?? ""}
+                        .onInput=${(i) => this.handleValueChange(i, a)}
+                    ></lit-input>
+                `;
+    }
+  }
+  render() {
+    return n`
+            <div class="filters">${this.renderFilterRows()}</div>
+
+            <div class="action-buttons">
+                <lit-button
+                    variant="text"
+                    icon="add"
+                    label="${p("Nový filtr")}"
+                    @click=${this.addFilterRow}
+                >
+                </lit-button>
+                <lit-button
+                    variant="text"
+                    icon="trash"
+                    label="${p("Smazat vše")}"
+                    @click=${this.removeAll}
+                >
+                </lit-button>
+            </div>
+        `;
+  }
+};
+c.styles = [
+  v`
+            .filter-row {
+                display: grid;
+                grid-template-columns:
+                    minmax(120px, 1fr)
+                    minmax(160px, 1fr)
+                    minmax(160px, 1fr)
+                    minmax(160px, 1fr)
+                    auto;
+                gap: 12px;
+                align-items: center;
+                margin-bottom: 12px;
+            }
+            .empty-space {
+                visibility: hidden;
+            }
+            .input-header {
+                display: flex;
+                gap: 12px;
+                padding: 0 0 1px 16px;
+                align-items: center;
+            }
+            .input-title {
+                font-size: 15px;
+                font-weight: 500;
+                color: var(--text-secondary, #5d6371);
+            }
+            .action-buttons {
+                position: sticky;
+                bottom: 0;
+                left: 0;
+                display: flex;
+                justify-content: space-between;
+                background-color: var(--background-paper, #fff);
+            }
+        `
+];
+u([
+  d({ type: Array })
+], c.prototype, "columns", 2);
+u([
+  d({ type: Object })
+], c.prototype, "filterData", 2);
+u([
+  d({ type: Function })
+], c.prototype, "onFilterChange", 2);
+c = u([
+  h("lit-filter-modal")
+], c);
+export {
+  c as LitFilterModal
+};