overview-components 1.1.42 → 1.1.43

package/dist/components/components-settings/section-tab-settings.js

@@ -5,13 +5,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, property, state } from 'lit/decorators.js';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { IconArray } from '../../shared/lit-icon.js';
 import { msg } from '@lit/localize';
 //components
 import '../../shared/lit-icon.js';
 import '../../shared/lit-input.js';
+import '../../shared/lit-select.js';
+import '../../shared/lit-toggle.js';
+import '../../shared/lit-select-field.js';
+import '../../shared/lit-text-field.js';
+import '../lit-filter-builder.js';
 import '../../shared/simple-popper.js';
+import '../lit-tabs-overview.js';
 import '../../assets/illustration/not-found.js';
 import '../../assets/illustration/settings-illustration.js';
 import '../../shared/lit-menu.js';
@@ -26,19 +32,80 @@ import '../../shared/lit-modal-header.js';
 import '../../shared/lit-modal-footer.js';
 import '../../shared/lit-modal-body.js';
 import '../../shared/lit-label.js';
+function generateShortId() {
+    return Math.random().toString(36).substring(2, 8);
+}
 let SectionTabSettings = class SectionTabSettings extends LitElement {
     constructor() {
         super(...arguments);
         this.onSettingsChangedModal = (settingsValue) => { };
         this.showAutomaticHeightOptionInSettings = true;
         this.allowedLang = ['cs'];
+        this.variables = [];
+        this.userLang = 'cs';
         this.isOpen = false;
+        this.showHideCondition = false;
         this.filterText = '';
         this.isOpenModal = false;
+        this.filterData = {
+            id: generateShortId(),
+            logicOperator: 'AND',
+            conditions: [{ id: generateShortId(), field: '', operator: '=', value: '' }],
+        };
+        this.activeTab = 'general';
+        this._onFilterChange = (event) => {
+            const { filterGroup } = event.detail;
+            // Convert LitFilterBuilderData back to GridFilterDataType format for compatibility
+            const gridFilterData = {
+                id: this.filterData.id || generateShortId(),
+                logicOperator: filterGroup.logicOperator,
+                conditions: filterGroup.conditions.map((condition) => ({
+                    id: condition.id || generateShortId(),
+                    field: condition.field,
+                    operator: condition.operator,
+                    value: condition.value,
+                })),
+            };
+            this.filterData = gridFilterData;
+            // Store the full GridFilterDataType structure for advanced filtering support
+            if (gridFilterData.conditions.length && gridFilterData.conditions[0].field) {
+                this.updateLocalSettings({ hideTabWhen: gridFilterData });
+            }
+            else {
+                this.updateLocalSettings({ hideTabWhen: undefined });
+            }
+        };
     }
     updated(changedProperties) {
         if (changedProperties.has('settingsValue')) {
             this.localSettingsValue = this.settingsValue ? { ...this.settingsValue } : {};
+            // Initialize filter data from existing condition
+            const hideTabWhen = this.localSettingsValue?.hideTabWhen;
+            if (hideTabWhen && typeof hideTabWhen === 'object') {
+                // Check if it's already in GridFilterDataType format
+                if ('logicOperator' in hideTabWhen && 'conditions' in hideTabWhen) {
+                    this.filterData = hideTabWhen;
+                    this.showHideCondition = true;
+                }
+                else if ('logicOperator' in hideTabWhen && 'items' in hideTabWhen) {
+                    // Handle legacy format if it exists
+                    this.filterData = hideTabWhen;
+                    this.showHideCondition = true;
+                }
+            }
+            else if (typeof hideTabWhen === 'boolean' && hideTabWhen) {
+                this.showHideCondition = true;
+                // Initialize with default filter data when boolean is true
+                const defaultField = this.variables.length > 0 ? this.variables[0].tvar_name : '';
+                this.filterData = {
+                    id: generateShortId(),
+                    logicOperator: 'AND',
+                    conditions: [{ id: generateShortId(), field: defaultField, operator: '=', value: '' }],
+                };
+            }
+            else {
+                this.showHideCondition = false;
+            }
             this.requestUpdate();
         }
     }
@@ -48,6 +115,35 @@ let SectionTabSettings = class SectionTabSettings extends LitElement {
             this.onClose();
         }
     }
+    _getFilterFieldsFromVariables() {
+        return this.variables.map((variable) => ({
+            value: variable.tvar_name,
+            label: `${variable[`tvar_name_${this.userLang}`] || variable.tvar_name} (${variable.tvar_name})`,
+            type: variable.ivar_type === 'T'
+                ? 'string'
+                : variable.ivar_type === 'N'
+                    ? 'number'
+                    : 'string',
+        }));
+    }
+    _getTabDefinitions() {
+        return [
+            {
+                id: 'general',
+                label: {
+                    default: 'General Settings',
+                },
+                icon: 'administration',
+            },
+            {
+                id: 'hideWhen',
+                label: {
+                    default: 'Hide When',
+                },
+                icon: 'filter',
+            },
+        ];
+    }
     updateLocalSettings(updates) {
         this.localSettingsValue = {
             ...this.localSettingsValue,
@@ -62,153 +158,290 @@ let SectionTabSettings = class SectionTabSettings extends LitElement {
     }
     discardChanges() {
         this.localSettingsValue = this.settingsValue ? { ...this.settingsValue } : {};
+        // Reset the condition builder state to match the original settingsValue
+        this._resetConditionBuilderState();
         if (this.onClose) {
             this.onClose();
         }
     }
-    render() {
+    _resetConditionBuilderState() {
+        const hideTabWhen = this.settingsValue?.hideTabWhen;
+        if (hideTabWhen && typeof hideTabWhen === 'object') {
+            // Check if it's already in GridFilterDataType format
+            if ('logicOperator' in hideTabWhen && 'conditions' in hideTabWhen) {
+                this.filterData = hideTabWhen;
+                this.showHideCondition = true;
+            }
+            else if ('logicOperator' in hideTabWhen && 'items' in hideTabWhen) {
+                // Handle legacy format if it exists
+                this.filterData = hideTabWhen;
+                this.showHideCondition = true;
+            }
+            else {
+                // Initialize with default filter data from first variable if available
+                const defaultField = this.variables.length > 0 ? this.variables[0].tvar_name : '';
+                this.filterData = {
+                    id: generateShortId(),
+                    logicOperator: 'AND',
+                    conditions: [{ id: generateShortId(), field: defaultField, operator: '=', value: '' }],
+                };
+                this.showHideCondition = true;
+            }
+        }
+        else if (typeof hideTabWhen === 'boolean' && hideTabWhen) {
+            this.showHideCondition = true;
+            // Reset to default filter data for boolean conditions
+            const defaultField = this.variables.length > 0 ? this.variables[0].tvar_name : '';
+            this.filterData = {
+                id: generateShortId(),
+                logicOperator: 'AND',
+                conditions: [{ id: generateShortId(), field: defaultField, operator: '=', value: '' }],
+            };
+        }
+        else {
+            this.showHideCondition = false;
+            // Reset to default filter data
+            const defaultField = this.variables.length > 0 ? this.variables[0].tvar_name : '';
+            this.filterData = {
+                id: generateShortId(),
+                logicOperator: 'AND',
+                conditions: [{ id: generateShortId(), field: defaultField, operator: '=', value: '' }],
+            };
+        }
+    }
+    _renderHideWhenControl() {
+        const hideTabWhen = this.localSettingsValue?.hideTabWhen;
+        const hasCondition = hideTabWhen &&
+            typeof hideTabWhen === 'object' &&
+            (('variable' in hideTabWhen && hideTabWhen.variable) ||
+                ('conditions' in hideTabWhen && hideTabWhen.conditions && hideTabWhen.conditions.length > 0));
+        return html `
+            <div class="hide-when-control">
+                <div class="hide-when-header">
+                    <lit-toggle
+                        .label="${msg('Skrýt sekci při splnění podmínky')}"
+                        .checked="${hasCondition || this.showHideCondition}"
+                        @change="${(e) => this._toggleCondition(e.detail)}"
+                    ></lit-toggle>
+                </div>
+
+                ${this.showHideCondition
+            ? html `
+                          <lit-filter-builder
+                              .data="${this._convertToFilterBuilderData()}"
+                              .disabled="${false}"
+                              .locale="${this.userLang}"
+                              @filter-change="${this._onFilterChange}"
+                          ></lit-filter-builder>
+                      `
+            : ''}
+            </div>
+        `;
+    }
+    _toggleCondition(enabled) {
+        if (enabled) {
+            this.showHideCondition = true;
+            // Only initialize new filter data if no existing data is present
+            if (!this.filterData.conditions?.length || !this.filterData.conditions[0]?.field) {
+                // Initialize filter data with first variable if available
+                if (this.variables.length > 0) {
+                    const defaultItem = {
+                        id: generateShortId(),
+                        field: this.variables[0].tvar_name,
+                        operator: '=',
+                        value: '',
+                    };
+                    this.filterData = {
+                        id: this.filterData.id || generateShortId(),
+                        logicOperator: 'AND',
+                        conditions: [defaultItem],
+                    };
+                }
+            }
+            // Save the existing or newly created filter data
+            this.updateLocalSettings({ hideTabWhen: this.filterData });
+        }
+        else {
+            this.showHideCondition = false;
+            this._clearCondition();
+        }
+    }
+    _clearCondition() {
+        this.updateLocalSettings({ hideTabWhen: undefined });
+    }
+    _convertToFilterBuilderData() {
+        const fields = this._getFilterFieldsFromVariables();
+        // Convert GridFilterDataType to LitFilterBuilderData format
+        const filterGroup = {
+            id: 'section-filter-group',
+            logicOperator: (this.filterData.logicOperator || 'AND'),
+            conditions: this.filterData.conditions?.map((item, index) => ({
+                id: item.id || `condition-${index}`,
+                field: item.field || '',
+                operator: (item.operator || ''),
+                value: item.value || '',
+            })) || [],
+        };
+        return {
+            fields,
+            operators: [], // Will be populated by utility functions
+            filterGroup,
+        };
+    }
+    _renderGeneralSettings() {
         const filteredKeys = (IconArray || []).filter((key) => key.toLowerCase().includes(this.filterText));
         return html `
-            <lit-modal
-                .open=${this.isOpenModal}
-                .onClose=${() => {
-            this.onClose?.();
-        }}
-                .closeOnOutsideClick=${false}
-                .fullScreen=${window.innerWidth <=
-            (parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm')) || 600)}
-            >
-                <lit-modal-header
-                    style="display: flex; align-items: center; justify-content: flex-end;"
-                >
-                    <lit-icon-button
-                        .icon="${'close'}"
-                        variant="${'text'}"
-                        size="${'small'}"
-                        @click=${() => this.onClose?.()}
-                    ></lit-icon-button>
-                </lit-modal-header>
-                <lit-modal-body>
-                    <div style="display: flex; flex-direction: column; gap: 0.5rem">
-                        <div
-                            style="display: flex; flex-direction: column; align-items: center; font-size: 1rem; font-weight: 500;"
-                        >
-                            <div style="max-height: 5rem; max-width: 5rem">
-                                <settings-illustration></settings-illustration>
-                            </div>
-                            <span
-                                style="font-size: 0.875rem; font-weight: 500 ; color: var(--text-secondary, #777);"
-                            >
-                                ${msg('Konfigurace') + '- SectionTab'}
-                            </span>
-                        </div>
-                        ${this.showAutomaticHeightOptionInSettings
+            <div class="tab-content">
+                ${this.showAutomaticHeightOptionInSettings
             ? html `
-                                      <lit-checkbox
-                                          .label="${msg('Automatická výška sekce')}"
-                                          .checked=${this.localSettingsValue?.[`autoHeight`] ??
-                false}
-                                          @change=${(e) => {
+                          <lit-checkbox
+                              .label="${msg('Automatická výška sekce')}"
+                              .checked=${this.localSettingsValue?.[`autoHeight`] ?? false}
+                              @change=${(e) => {
                 this.updateLocalSettings({ autoHeight: e.detail });
             }}
-                                      ></lit-checkbox>
-                                  `
+                          ></lit-checkbox>
+                      `
             : ''}
-                        <div style="display: flex; align-items: center; gap: 1rem;">
-                            <lit-label label=${msg('Icona Sekce')}></lit-label>
-                            <lit-icon-button
-                                variant="dashed"
-                                size="medium"
-                                .icon="${this.localSettingsValue?.titleIcon || 'documents'}"
-                                @click="${this.toggleCustomPopover}"
-                            ></lit-icon-button>
-                        </div>
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <lit-label label=${msg('Icona Sekce')}></lit-label>
+                    <lit-icon-button
+                        color="secondary"
+                        variant="dashed"
+                        size="medium"
+                        .icon="${this.localSettingsValue?.titleIcon || 'documents'}"
+                        @click="${this.toggleCustomPopover}"
+                    ></lit-icon-button>
+                </div>
 
-                        <simple-popper
-                            .showing=${this.isOpen}
-                            .placement=${'bottom-start'}
-                            .onClose=${this.closePopover.bind(this)}
-                            .manualOpening=${true}
-                        >
-                            <style>
-                                .icon-menu {
-                                    display: flex;
-                                    flex-wrap: wrap;
-                                    gap: 0.5rem;
-                                    padding: 0.5rem;
-                                }
-                                .icon-select-item {
-                                    cursor: pointer;
-                                    width: 2.5rem;
-                                    height: 2.5rem;
-                                    display: flex;
-                                    align-items: center;
-                                    justify-content: center;
-                                    border-radius: var(--border-radius-small, 4px);
-                                    transition: background 0.15s;
-                                }
-                                .icon-select-item:hover {
-                                    background-color: var(--color-primary-light, #e0e7ff);
-                                }
-                            </style>
-                            <div
-                                style="max-height: 12.5rem; height: 12.5rem; overflow-y: auto; width: 500px; max-width: 100%;"
-                            >
-                                <div class="popper-input">
-                                    <lit-input
-                                        .value=${this.filterText}
-                                        .onInput=${(value) => {
+                <simple-popper
+                    .showing=${this.isOpen}
+                    .placement=${'bottom-start'}
+                    .onClose=${this.closePopover.bind(this)}
+                    .manualOpening=${true}
+                >
+                    <style>
+                        .icon-menu {
+                            display: flex;
+                            flex-wrap: wrap;
+                            gap: 0.5rem;
+                            padding: 0.5rem;
+                        }
+                        .icon-select-item {
+                            cursor: pointer;
+                            width: 2.5rem;
+                            height: 2.5rem;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            border-radius: var(--border-radius-small, 4px);
+                            transition: background 0.15s;
+                        }
+                        .icon-select-item:hover {
+                            background-color: var(--color-primary-light, #e0e7ff);
+                        }
+                    </style>
+                    <div
+                        style="max-height: 12.5rem; height: 12.5rem; overflow-y: auto; width: 500px; max-width: 100%;"
+                    >
+                        <div class="popper-input">
+                            <lit-input
+                                .value=${this.filterText}
+                                .onInput=${(value) => {
             this.filterText = value?.toLowerCase?.() || '';
         }}
-                                        .onClear=${() => {
+                                .onClear=${() => {
             this.filterText = '';
         }}
-                                        placeholder="${msg('Zadejte název ikony')}"
-                                    ></lit-input>
-                                </div>
+                                placeholder="${msg('Zadejte název ikony')}"
+                            ></lit-input>
+                        </div>
 
-                                <div class="icon-menu">
-                                    ${filteredKeys.map((key) => html `
-                                            <div
-                                                class="icon-select-item"
-                                                @click=${() => {
+                        <div class="icon-menu">
+                            ${filteredKeys.map((key) => html `
+                                    <div
+                                        class="icon-select-item"
+                                        @click=${() => {
             this.updateLocalSettings({
                 titleIcon: key,
             });
             this.closePopover();
         }}
-                                                .isActive=${this.localSettingsValue?.titleIcon ===
-            key}
-                                            >
-                                                <lit-icon size="1rem" icon="${key}"></lit-icon>
-                                            </div>
-                                        `)}
-                                </div>
-                            </div>
-                        </simple-popper>
-                        <div>
-                            <lit-text-field
-                                .label="${msg('Název sekce')}"
-                                .value=${this.localSettingsValue?.titleLabel || ''}
-                                .placeholder="${msg('Zadejte název sekce')}"
-                                @onChange="${(e) => {
+                                        .isActive=${this.localSettingsValue?.titleIcon === key}
+                                    >
+                                        <lit-icon size="1rem" icon="${key}"></lit-icon>
+                                    </div>
+                                `)}
+                        </div>
+                    </div>
+                </simple-popper>
+                <div style="margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem;">
+                    <lit-text-field
+                        aiIcon=${true}
+                        .label="${msg('Název sekce')}"
+                        .value=${this.localSettingsValue?.titleLabel || ''}
+                        .placeholder="${msg('Zadejte název sekce')}"
+                        @onChange="${(e) => {
             this.updateLocalSettings({ titleLabel: e.detail });
         }}"
-                            ></lit-text-field>
+                        @onClickAiIcon="${() => {
+            // Handle AI icon click for the main title
+        }}"
+                    ></lit-text-field>
 
-                            ${(this.allowedLang || []).map((lang) => html `
-                                    <lit-text-field
-                                        .label=${`${msg('Název sekce')} ${lang.toUpperCase()}`}
-                                        .placeholder=${`${msg('Zadejte název')} ${lang.toUpperCase()}`}
-                                        .value=${this.localSettingsValue?.[`titleLabel_${lang}`] ||
-            ''}
-                                        @onChange=${(e) => {
+                    ${(this.allowedLang || []).map((lang) => html `
+                            <lit-text-field
+                                .label=${`${msg('Název sekce')} ${lang.toUpperCase()}`}
+                                .placeholder=${`${msg('Zadejte název')} ${lang.toUpperCase()}`}
+                                .value=${this.localSettingsValue?.[`titleLabel_${lang}`] || ''}
+                                @onChange=${(e) => {
             this.updateLocalSettings({
                 [`titleLabel_${lang}`]: e.detail,
             });
         }}
-                                    ></lit-text-field>
-                                `)}
+                            ></lit-text-field>
+                        `)}
+                </div>
+            </div>
+        `;
+    }
+    render() {
+        console.log(this.variables);
+        return html `
+            <lit-modal
+                .open=${this.isOpenModal}
+                .onClose=${() => {
+            this.discardChanges();
+        }}
+                .closeOnOutsideClick=${false}
+                .fullScreen=${window.innerWidth <=
+            (parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm')) || 600)}
+                style="min-width: 60vw;"
+            >
+                <lit-modal-header
+                    style="display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary, #777);"
+                >
+                    ${msg('Konfigurace') + ' - SectionTab'}
+                    <lit-icon-button
+                        .icon="${'close'}"
+                        variant="text"
+                        color="secondary"
+                        size="${'small'}"
+                        @click=${() => this.discardChanges()}
+                    ></lit-icon-button>
+                </lit-modal-header>
+                <lit-modal-body>
+                    <div style="display: flex; flex-direction: column; gap: 0.5rem">
+                        <div class="settings-tabs">
+                            <lit-tabs-overview
+                                .tabs="${this._getTabDefinitions()}"
+                                .initialSelectedTabId="${this.activeTab}"
+                                .userLang="${'cs'}"
+                                .allowedLang="${this.allowedLang}"
+                            >
+                                <div slot="general">${this._renderGeneralSettings()}</div>
+                                <div slot="hideWhen">${this._renderHideWhenControl()}</div>
+                            </lit-tabs-overview>
                         </div>
                     </div>
                 </lit-modal-body>
@@ -220,15 +453,16 @@ let SectionTabSettings = class SectionTabSettings extends LitElement {
                 >
                     <lit-button
                         .label="${msg('Uložit')}"
-                        .icon="${'check'}"
-                        .size="${'medium'}"
+                        .icon="check"
+                        .size="medium"
                         @click=${() => this.trySendSettingsUpdate()}
                     ></lit-button>
                     <lit-button
+                        color="secondary"
                         .label="${msg('Zrušit')}"
-                        variant="${'text'}"
-                        .icon="${'close'}"
-                        .size="${'medium'}"
+                        variant="text"
+                        .icon="close"
+                        .size="medium"
                         @click=${() => this.discardChanges()}
                     ></lit-button>
                 </lit-modal-footer>
@@ -236,6 +470,71 @@ let SectionTabSettings = class SectionTabSettings extends LitElement {
         `;
     }
 };
+SectionTabSettings.styles = [
+    css `
+            .hide-when-control {
+                padding: 12px;
+                border: 1px solid var(--color-divider, #d0d3db);
+                border-radius: 4px;
+                background: var(--background-paper, #fff);
+                margin-top: 8px;
+            }
+
+            .hide-when-header {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                margin-bottom: 8px;
+            }
+
+            .condition-builder {
+                display: flex !important;
+                flex-direction: row !important;
+                gap: 8px;
+                align-items: flex-end !important;
+                margin-top: 8px;
+                width: 100%;
+            }
+
+            .condition-builder.hidden {
+                display: none;
+            }
+
+            .condition-preview {
+                width: 100%;
+                font-size: 12px;
+                color: var(--text-secondary, #777);
+                padding: 4px 8px;
+                background: var(--color-primary-light, #f0f0f0);
+                border-radius: 4px;
+                margin-top: 8px;
+            }
+
+            .clear-condition-button {
+                color: var(--color-warning, #ff9500);
+            }
+
+            .popper-input {
+                margin-bottom: 0.5rem;
+                position: sticky;
+                top: 0;
+                background-color: var(--background-paper, #fff);
+                z-index: 1;
+            }
+
+            /* Tab content styles */
+            .tab-content {
+                padding: 1rem;
+                height: calc(100% - 3rem);
+                overflow-y: auto;
+                background-color: var(--background-paper, #fff);
+            }
+
+            .settings-tabs {
+                height: 400px;
+            }
+        `,
+];
 __decorate([
     property({ type: Object })
 ], SectionTabSettings.prototype, "settingsValue", void 0);
@@ -248,12 +547,21 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], SectionTabSettings.prototype, "allowedLang", void 0);
+__decorate([
+    property({ type: Array })
+], SectionTabSettings.prototype, "variables", void 0);
 __decorate([
     property({ type: Function })
 ], SectionTabSettings.prototype, "onClose", void 0);
+__decorate([
+    property({ type: String })
+], SectionTabSettings.prototype, "userLang", void 0);
 __decorate([
     state()
 ], SectionTabSettings.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "showHideCondition", void 0);
 __decorate([
     state()
 ], SectionTabSettings.prototype, "filterText", void 0);
@@ -263,6 +571,12 @@ __decorate([
 __decorate([
     state()
 ], SectionTabSettings.prototype, "isOpenModal", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "filterData", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "activeTab", void 0);
 SectionTabSettings = __decorate([
     customElement('section-tab-settings')
 ], SectionTabSettings);