overview-components 1.1.162 → 1.1.165

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

@@ -0,0 +1,701 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+import '../shared/lit-select.js';
+import '../shared/lit-input.js';
+import '../shared/lit-responsive-button.js';
+import '../shared/lit-button.js';
+import '../shared/lit-icon-button.js';
+import '../shared/lit-date-picker.js';
+import { getOperatorsByColumnType, getDefaultOperator, isAllowedType, } from '../utils/getOperatorByType.js';
+import { tooltip } from '../shared/simple-tooltip.js';
+export class LitFilterBuilder extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = {
+            filterGroups: [
+                {
+                    id: 'group-1',
+                    logicOperator: 'AND',
+                    conditions: [],
+                },
+            ],
+            groupLogicOperator: 'AND',
+        };
+        this.fields = [];
+        this.variables = [];
+        this.disabled = false;
+        this.locale = 'cs';
+    }
+    _generateConditionId() {
+        return 'condition-' + Date.now() + '-' + Math.random().toString(36).substring(2, 11);
+    }
+    _generateGroupId() {
+        return 'group-' + Date.now() + '-' + Math.random().toString(36).substring(2, 11);
+    }
+    _getDefaultValueForType(type) {
+        switch (type) {
+            case 'string':
+                return '';
+            case 'number':
+                return '';
+            case 'date':
+                return '';
+            case 'select':
+                return '';
+            case 'multiselect':
+                return ''; // Will be converted to array when rendering
+            default:
+                return '';
+        }
+    }
+    _getFieldOptions() {
+        return this.fields.map((field) => ({
+            value: field.value,
+            label: field.label,
+        }));
+    }
+    _getOperatorOptions(fieldType) {
+        if (!fieldType || !isAllowedType(fieldType)) {
+            return [];
+        }
+        // Use utility function to get operators for the field type
+        return getOperatorsByColumnType(fieldType);
+    }
+    _getConjunctionOptions() {
+        return [
+            { value: 'AND', label: 'AND' },
+            { value: 'OR', label: 'OR' },
+        ];
+    }
+    _getSelectedField(fieldValue) {
+        return this.fields.find((field) => field.value === fieldValue);
+    }
+    _addGroup() {
+        const newGroup = {
+            id: this._generateGroupId(),
+            logicOperator: 'AND',
+            conditions: [],
+        };
+        this.data = {
+            ...this.data,
+            filterGroups: [...this.data.filterGroups, newGroup],
+        };
+        this._dispatchChangeEvent();
+        this.requestUpdate();
+    }
+    _removeGroup(groupId) {
+        if (this.data.filterGroups.length <= 1) {
+            return; // Don't allow removing the last group
+        }
+        this.data = {
+            ...this.data,
+            filterGroups: this.data.filterGroups.filter((group) => group.id !== groupId),
+        };
+        this._dispatchChangeEvent();
+    }
+    _addCondition(groupId, copyFromCondition) {
+        const newCondition = copyFromCondition
+            ? {
+                id: this._generateConditionId(),
+                field: copyFromCondition.field,
+                operator: copyFromCondition.operator,
+                value: copyFromCondition.value,
+            }
+            : {
+                id: this._generateConditionId(),
+                field: '',
+                operator: '',
+                value: '',
+            };
+        this.data = {
+            ...this.data,
+            filterGroups: this.data.filterGroups.map((group) => group.id === groupId
+                ? {
+                    ...group,
+                    conditions: [...group.conditions, newCondition],
+                }
+                : group),
+        };
+        this._dispatchChangeEvent();
+    }
+    _removeCondition(groupId, conditionId) {
+        this.data = {
+            ...this.data,
+            filterGroups: this.data.filterGroups.map((group) => group.id === groupId
+                ? {
+                    ...group,
+                    conditions: group.conditions.filter((c) => c.id !== conditionId),
+                }
+                : group),
+        };
+        this._dispatchChangeEvent();
+    }
+    _updateCondition(groupId, conditionId, updates) {
+        this.data = {
+            ...this.data,
+            filterGroups: this.data.filterGroups.map((group) => group.id === groupId
+                ? {
+                    ...group,
+                    conditions: group.conditions.map((condition) => condition.id === conditionId
+                        ? { ...condition, ...updates }
+                        : condition),
+                }
+                : group),
+        };
+        this._dispatchChangeEvent();
+    }
+    _updateGroupLogicOperator(groupId, logicOperator) {
+        this.data = {
+            ...this.data,
+            filterGroups: this.data.filterGroups.map((group) => group.id === groupId ? { ...group, logicOperator } : group),
+        };
+        this._dispatchChangeEvent();
+    }
+    _updateGlobalLogicOperator(globalLogicOperator) {
+        this.data = {
+            ...this.data,
+            groupLogicOperator: globalLogicOperator,
+        };
+        this._dispatchChangeEvent();
+    }
+    _toggleVariableMode(groupId, conditionId) {
+        this.data = {
+            ...this.data,
+            filterGroups: this.data.filterGroups.map((group) => group.id === groupId
+                ? {
+                    ...group,
+                    conditions: group.conditions.map((condition) => condition.id === conditionId
+                        ? {
+                            ...condition,
+                            isVariableMode: !condition.isVariableMode,
+                            value: condition.isVariableMode ? '' : condition.value,
+                        }
+                        : condition),
+                }
+                : group),
+        };
+        this._dispatchChangeEvent();
+    }
+    _handleVariableSelect(groupId, conditionId, variableValue) {
+        const variableName = `{${variableValue}}`;
+        this._updateCondition(groupId, conditionId, {
+            value: variableName,
+            isVariableMode: false,
+        });
+    }
+    _handleValueChangeWithVariableDetection(groupId, conditionId, value, condition) {
+        const newValue = value || '';
+        const wasVariable = typeof condition.value === 'string' &&
+            condition.value.startsWith('{') &&
+            condition.value.endsWith('}');
+        const isStillVariable = newValue.startsWith('{') && newValue.endsWith('}');
+        if (wasVariable && !isStillVariable) {
+            // Variable deleted, revert to normal mode
+            this._updateCondition(groupId, conditionId, {
+                value: newValue,
+                isVariableMode: false,
+            });
+        }
+        else {
+            this._handleValueChange(groupId, conditionId, newValue);
+        }
+    }
+    _handleFieldChange(groupId, conditionId, value) {
+        const fieldValue = Array.isArray(value) ? value[0] : value;
+        const selectedField = this._getSelectedField(fieldValue);
+        if (selectedField && isAllowedType(selectedField.type)) {
+            const defaultOperator = getDefaultOperator(selectedField.type);
+            // Reset operator, value, and variable mode when field changes
+            this._updateCondition(groupId, conditionId, {
+                field: fieldValue,
+                operator: defaultOperator,
+                value: this._getDefaultValueForType(selectedField.type),
+                isVariableMode: false,
+            });
+        }
+        else {
+            // Reset operator, value, and variable mode when field changes
+            this._updateCondition(groupId, conditionId, {
+                field: fieldValue,
+                operator: '',
+                value: '',
+                isVariableMode: false,
+            });
+        }
+    }
+    _handleOperatorChange(groupId, conditionId, value) {
+        const operatorValue = Array.isArray(value) ? value[0] : value;
+        // Reset value for operators that don't need it
+        const updates = { operator: operatorValue };
+        if (operatorValue === 'isEmpty' || operatorValue === 'isNotEmpty') {
+            updates.value = '';
+            updates.isVariableMode = false;
+        }
+        this._updateCondition(groupId, conditionId, updates);
+    }
+    _handleValueChange(groupId, conditionId, value) {
+        this._updateCondition(groupId, conditionId, { value: value || '' });
+    }
+    _handleLogicOperatorChange(groupId, value) {
+        const logicOperatorValue = Array.isArray(value) ? value[0] : value;
+        this._updateGroupLogicOperator(groupId, logicOperatorValue);
+    }
+    _handleGlobalLogicOperatorChange(value) {
+        const logicOperatorValue = Array.isArray(value) ? value[0] : value;
+        this._updateGlobalLogicOperator(logicOperatorValue);
+    }
+    _dispatchChangeEvent() {
+        this.dispatchEvent(new CustomEvent('filter-change', {
+            detail: {
+                filterGroups: this.data.filterGroups,
+                groupLogicOperator: this.data.groupLogicOperator,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _renderValueInput(group, condition) {
+        const selectedField = this._getSelectedField(condition.field);
+        // Check if operator doesn't require a value
+        if (condition.operator === 'isEmpty' || condition.operator === 'isNotEmpty') {
+            return html `<div class="filter-condition__value"></div>`;
+        }
+        // State 1: Variable Selection Mode
+        if (condition.isVariableMode) {
+            return html `
+                <lit-select
+                    class="filter-condition__value"
+                    .options=${this.variables}
+                    .value=${''}
+                    .placeholder=${msg('Vyberte proměnnou')}
+                    ?disabled=${this.disabled}
+                    .onChange=${(value) => {
+                const selectedValue = Array.isArray(value) ? value[0] : value;
+                if (selectedValue) {
+                    this._handleVariableSelect(group.id, condition.id, selectedValue);
+                }
+            }}
+                ></lit-select>
+            `;
+        }
+        // State 2: Variable Value Mode
+        const isVariableValue = typeof condition.value === 'string' &&
+            condition.value.startsWith('{') &&
+            condition.value.endsWith('}');
+        if (isVariableValue) {
+            return html `
+                <lit-input
+                    class="filter-condition__value"
+                    .value=${String(condition.value || '')}
+                    .placeholder=${msg('Zadejte hodnotu nebo proměnnou')}
+                    ?disabled=${this.disabled}
+                    .onInput=${(value) => this._handleValueChangeWithVariableDetection(group.id, condition.id, value, condition)}
+                    .onClear=${() => {
+                // When clear button is clicked, revert to default input type
+                this._updateCondition(group.id, condition.id, {
+                    value: '',
+                    isVariableMode: false,
+                });
+            }}
+                ></lit-input>
+            `;
+        }
+        // State 3: Normal Mode (existing logic)
+        if (!selectedField) {
+            return html `
+                <lit-input
+                    class="filter-condition__value"
+                    .value=${String(condition.value || '')}
+                    .placeholder=${msg('Zadejte hodnotu')}
+                    ?disabled=${this.disabled}
+                    .onInput=${(value) => this._handleValueChange(group.id, condition.id, value)}
+                ></lit-input>
+            `;
+        }
+        switch (selectedField.type) {
+            case 'select':
+                const selectOptions = selectedField.valueOptions || [];
+                return html `
+                    <lit-select
+                        class="filter-condition__value"
+                        .options=${selectOptions}
+                        .value=${String(condition.value)}
+                        ?disabled=${this.disabled}
+                        .onChange=${(value) => this._handleValueChange(group.id, condition.id, Array.isArray(value) ? value[0] : value)}
+                    ></lit-select>
+                `;
+            case 'multiselect':
+                const multiselectOptions = selectedField.valueOptions || [];
+                // Convert string value to array for multiselect
+                const multiselectValue = typeof condition.value === 'string' && condition.value
+                    ? condition.value.split(',').filter((v) => v.trim())
+                    : Array.isArray(condition.value)
+                        ? condition.value
+                        : [];
+                return html `
+                    <lit-select
+                        class="filter-condition__value"
+                        .options=${multiselectOptions}
+                        .value=${multiselectValue}
+                        .multiple=${true}
+                        ?disabled=${this.disabled}
+                        .onChange=${(value) => this._handleValueChange(group.id, condition.id, Array.isArray(value) ? value.join(',') : value)}
+                    ></lit-select>
+                `;
+            case 'number':
+                return html `
+                    <lit-input
+                        class="filter-condition__value"
+                        type="number"
+                        .value=${String(condition.value || '')}
+                        .placeholder=${msg('Zadejte číslo')}
+                        ?disabled=${this.disabled}
+                        .onInput=${(value) => this._handleValueChange(group.id, condition.id, value)}
+                    ></lit-input>
+                `;
+            case 'date':
+                return html `
+                    <lit-date-picker
+                        class="filter-condition__value"
+                        .value=${String(condition.value || '')}
+                        .placeholder=${msg('Vyberte datum')}
+                        ?disabled=${this.disabled}
+                        .onChange=${(value) => this._handleValueChange(group.id, condition.id, value)}
+                    ></lit-date-picker>
+                `;
+            case 'string':
+                return html `
+                    <lit-input
+                        class="filter-condition__value"
+                        .value=${String(condition.value || '')}
+                        .placeholder=${msg('Zadejte hodnotu')}
+                        ?disabled=${this.disabled}
+                        .onInput=${(value) => this._handleValueChange(group.id, condition.id, value)}
+                    ></lit-input>
+                `;
+            default:
+                return html `
+                    <lit-input
+                        class="filter-condition__value"
+                        .value=${String(condition.value || '')}
+                        .placeholder=${msg('Zadejte hodnotu')}
+                        ?disabled=${this.disabled}
+                        .onInput=${(value) => this._handleValueChange(group.id, condition.id, value)}
+                    ></lit-input>
+                `;
+        }
+    }
+    _renderCondition(group, condition, index) {
+        const selectedField = this._getSelectedField(condition.field);
+        const operatorOptions = this._getOperatorOptions(selectedField?.type);
+        const conditionClasses = {
+            'filter-condition': true,
+            'filter-condition--empty': !condition.field,
+        };
+        return html `
+            <div class=${classMap(conditionClasses)}>
+                <!-- Field Selector -->
+                <lit-select
+                    class="filter-condition__field"
+                    .options=${this._getFieldOptions()}
+                    .value=${condition.field}
+                    ?disabled=${this.disabled}
+                    .onChange=${(value) => this._handleFieldChange(group.id, condition.id, value)}
+                ></lit-select>
+
+                <!-- Operator Selector -->
+                <lit-select
+                    class="filter-condition__operator"
+                    .options=${operatorOptions}
+                    .disableClearButton=${true}
+                    .value=${condition.operator}
+                    ?disabled=${this.disabled || !condition.field}
+                    .onChange=${(value) => this._handleOperatorChange(group.id, condition.id, value)}
+                ></lit-select>
+
+                <!-- Value Input -->
+                ${this._renderValueInput(group, condition)}
+
+                <!-- Actions -->
+                <div class="filter-condition__actions">
+                    ${this.variables && this.variables.length > 0
+            ? html `
+                              <lit-icon-button
+                                  .icon=${'variable'}
+                                  .size=${'small'}
+                                  .variant=${'text'}
+                                  .color=${'secondary'}
+                                  .active=${condition.isVariableMode}
+                                  ?disabled=${this.disabled}
+                                  @click=${() => this._toggleVariableMode(group.id, condition.id)}
+                                  ${tooltip(msg('Variables'), 'bottom')}
+                              ></lit-icon-button>
+                          `
+            : ''}
+
+                    <lit-icon-button
+                        .icon=${'trash'}
+                        .size=${'small'}
+                        .variant=${'text'}
+                        .color=${'error'}
+                        ?disabled=${this.disabled}
+                        @click=${() => this._removeCondition(group.id, condition.id)}
+                    ></lit-icon-button>
+
+                    <lit-icon-button
+                        .icon=${'add'}
+                        .size=${'small'}
+                        .variant=${'text'}
+                        .color=${'secondary'}
+                        ?disabled=${this.disabled}
+                        @click=${() => this._addCondition(group.id, condition)}
+                    ></lit-icon-button>
+                </div>
+            </div>
+
+            <!-- Conjunction Selector (not after last condition) -->
+            ${index < group.conditions.length - 1
+            ? html `
+                      <div class="filter-conjunction">
+                          <lit-select
+                              class="filter-conjunction__selector"
+                              color="info"
+                              variant="contained"
+                              .options=${this._getConjunctionOptions()}
+                              .value=${group.logicOperator}
+                              ?disabled=${this.disabled}
+                              .disableClearButton=${true}
+                              .onChange=${(value) => this._handleLogicOperatorChange(group.id, value)}
+                          ></lit-select>
+                      </div>
+                  `
+            : ''}
+        `;
+    }
+    _renderGroup(group, groupIndex) {
+        return html `
+            <div class="filter-group">
+                ${this.data.filterGroups.length > 1
+            ? html `
+                          <div class="filter-group__header">
+                              <span class="filter-group__title">${msg('Skupina')} ${groupIndex + 1}</span>
+                              <div class="filter-group__actions">
+                                  <lit-icon-button
+                                      .icon=${'trash'}
+                                      .size=${'small'}
+                                      .variant=${'text'}
+                                      .color=${'error'}
+                                      ?disabled=${this.disabled}
+                                      @click=${() => this._removeGroup(group.id)}
+                                  ></lit-icon-button>
+                              </div>
+                          </div>
+                      `
+            : ''}
+
+                ${group.conditions.length === 0
+            ? html `
+                          <div class="filter-condition filter-condition--empty">
+                              <span>${msg('Žádné podmínky nejsou definovány')}</span>
+                          </div>
+                      `
+            : group.conditions.map((condition, index) => this._renderCondition(group, condition, index))}
+
+                <div class="add-condition-button">
+                    <lit-responsive-button
+                        .variant=${'text'}
+                        .size=${'medium'}
+                        .color=${'secondary'}
+                        .label=${msg('Přidat podmínku')}
+                        .icon=${'add'}
+                        ?disabled=${this.disabled}
+                        .onClick=${() => this._addCondition(group.id)}
+                    ></lit-responsive-button>
+                </div>
+            </div>
+        `;
+    }
+    render() {
+        return html `
+            <div class="filter-builder">
+                <div class="filter-groups-container">
+                    ${this.data.filterGroups.map((group, groupIndex) => html `
+                            ${this._renderGroup(group, groupIndex)}
+                            ${groupIndex < this.data.filterGroups.length - 1
+            ? html `
+                                      <div class="global-logic-operator">
+                                          <lit-select
+                                              class="global-logic-operator__selector"
+                                              color="info"
+                                              variant="contained"
+                                              .options=${this._getConjunctionOptions()}
+                                              .value=${this.data.groupLogicOperator}
+                                              ?disabled=${this.disabled}
+                                              .disableClearButton=${true}
+                                              .onChange=${(value) => this._handleGlobalLogicOperatorChange(value)}
+                                          ></lit-select>
+                                      </div>
+                                  `
+            : ''}
+                        `)}
+                </div>
+
+                <lit-button
+                    .icon=${'add'}
+                    .variant=${'text'}
+                    .size=${'medium'}
+                    .color=${'secondary'}
+                    ?disabled=${this.disabled}
+                    @click=${() => {
+            this._addGroup();
+        }}
+                    label=${msg('Přidat skupinu')}
+                >
+                </lit-button>
+            </div>
+        `;
+    }
+}
+LitFilterBuilder.styles = css `
+        :host {
+            display: block;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: #ffffff;
+            border-radius: 8px;
+            border: 1px dashed var(--color-divider, #d1d5db);
+            padding: 0.5rem;
+        }
+
+        .filter-builder {
+            display: flex;
+            flex-direction: column;
+            gap: 0.625rem;
+        }
+
+        .filter-condition {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.5rem;
+            background-color: var(--background-paper, #f3f4f6);
+            border: 1px dashed var(--color-divider, #d1d5db);
+            border-radius: 0.5rem;
+            transition: all 0.2s;
+        }
+
+        .filter-condition:hover {
+            border-color: #d1d5db;
+        }
+
+        .filter-condition__field {
+            min-width: 200px;
+            flex: 2;
+        }
+
+        .filter-condition__operator {
+            min-width: 150px;
+            flex: 1;
+        }
+
+        .filter-condition__value {
+            min-width: 200px;
+            flex: 2;
+        }
+
+        .filter-condition__actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .filter-conjunction {
+            display: flex;
+            align-items: center;
+            justify-content: start;
+        }
+
+        .filter-conjunction__selector {
+            min-width: 80px;
+        }
+
+        .filter-condition--empty {
+            border-style: dashed;
+            border-color: var(--color-divider, #d1d5db);
+            background-color: var(--background-paper, #f3f4f6);
+        }
+
+        .icon {
+            width: 1rem;
+            height: 1rem;
+        }
+
+        .filter-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.625rem;
+            padding: 0.5rem 0.5rem 0.5rem 1rem;
+            background-color: var(--background-paper, #ffffff);
+            border: 1px dashed var(--color-divider, #d1d5db);
+            border-radius: 0.75rem;
+            position: relative;
+        }
+
+        .filter-group__header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .filter-group__title {
+            font-weight: 600;
+            color: var(--color-text-primary, #1f2937);
+            font-size: 0.875rem;
+        }
+
+        .filter-group__actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .filter-groups-container {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .global-logic-operator {
+            display: flex;
+            justify-content: start;
+            align-items: center;
+        }
+
+        .global-logic-operator__selector {
+            min-width: 100px;
+        }
+    `;
+__decorate([
+    property({ type: Object })
+], LitFilterBuilder.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], LitFilterBuilder.prototype, "fields", void 0);
+__decorate([
+    property({ type: Array })
+], LitFilterBuilder.prototype, "variables", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitFilterBuilder.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], LitFilterBuilder.prototype, "locale", void 0);
+if (!window.customElements.get('lit-filter-builder')) {
+    window.customElements.define('lit-filter-builder', LitFilterBuilder);
+}
+//# sourceMappingURL=lit-filter-builder.js.map