overview-components 0.7.0 → 0.9.0

package/dist/shared/filter-inputs.js

@@ -5,13 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html, css } from 'lit';
+import { msg } from '@lit/localize';
 import { customElement, property, state, query } from 'lit/decorators.js';
-import './lit-icon';
-import './lit-icon-button.ts';
-import './lit-select.ts';
-import AirDatepicker from 'air-datepicker';
 import 'air-datepicker/air-datepicker.css';
-import localeCs from 'air-datepicker/locale/cs';
+// components
+import './lit-icon.js';
+import './lit-icon-button.js';
+import './lit-select.js';
+import AirDatepicker from 'air-datepicker';
+import { localizedDatePicker } from '../utils/localization.js';
 let FilterInputs = class FilterInputs extends LitElement {
     constructor() {
         super();
@@ -35,12 +37,24 @@ let FilterInputs = class FilterInputs extends LitElement {
                 .sort()
                 .slice(0, 5000);
         }
+        if (!this.dateFormat) {
+            const userSettings = localStorage.getItem('userSettings');
+            const storedFormat = userSettings
+                ? JSON.parse(userSettings)?.state?.dateFormat
+                : undefined;
+            this.dateFormat = storedFormat;
+        }
+    }
+    getLocale() {
+        const lang = this.userLang || localStorage.getItem('userLang') || 'cs';
+        return localizedDatePicker.get(lang);
     }
     firstUpdated() {
         if (this.filterVariant === 'date') {
             this.startDatePicker = new AirDatepicker(this.startDateInputEl, {
-                dateFormat: 'd.M.yyyy',
-                locale: localeCs,
+                isMobile: window.matchMedia('(max-width: 600px)').matches,
+                dateFormat: this.dateFormat || undefined,
+                locale: this.getLocale(),
                 autoClose: true,
                 onSelect: ({ date }) => {
                     if (date instanceof Date) {
@@ -52,16 +66,15 @@ let FilterInputs = class FilterInputs extends LitElement {
                     this.handleFilterDateChange(this.startDate, this.endDate);
                 },
                 onRenderCell: ({ date, cellType }) => {
+                    console.log('cellType', cellType);
                     const isDay = cellType === 'day';
                     const _date = date.getDate();
-                    return {
-                        classes: '-custom-cell-',
-                    };
                 },
             });
             this.endDatePicker = new AirDatepicker(this.endDateInputEl, {
-                dateFormat: 'd.M.yyyy',
-                locale: localeCs,
+                isMobile: window.matchMedia('(max-width: 600px)').matches,
+                dateFormat: this.dateFormat || undefined,
+                locale: this.getLocale(),
                 autoClose: true,
                 onSelect: ({ date }) => {
                     if (date instanceof Date) {
@@ -75,9 +88,6 @@ let FilterInputs = class FilterInputs extends LitElement {
                 onRenderCell: ({ date, cellType }) => {
                     const isDay = cellType === 'day';
                     const _date = date.getDate();
-                    return {
-                        classes: '-custom-cell-',
-                    };
                 },
             });
         }
@@ -107,307 +117,318 @@ let FilterInputs = class FilterInputs extends LitElement {
             this.column.setFilterValue([min, max]);
             this.requestUpdate();
         });
-        return html `
-            <div class="range">
-                <div class="custom-icon-wrapper" style="min-width: 70px">
-                    <input
-                        type="number"
-                        placeholder="Min"
+        return html `
+            <div class="range">
+                <div class="custom-icon-wrapper" style="min-width: 70px">
+                    <input
+                        type="number"
+                        placeholder="Min"
                         @input=${(e) => {
             const min = e.target.value ? Number(e.target.value) : undefined;
             const currentMax = this.column.getFilterValue()?.[1];
             debouncedSetRangeFilter(min, currentMax);
-        }}
-                        .value="${this.column.getFilterValue()?.[0] || ''}"
-                    />
-                    ${this.renderClearButton(0)}
-                </div>
-
-                <div class="custom-icon-wrapper" style="min-width: 70px">
-                    <input
-                        type="number"
-                        placeholder="Max"
+        }}
+                        .value="${this.column.getFilterValue()?.[0] || ''}"
+                    />
+                    ${this.renderClearButton(0)}
+                </div>
+
+                <div class="custom-icon-wrapper" style="min-width: 70px">
+                    <input
+                        type="number"
+                        placeholder="Max"
                         @input=${(e) => {
             const max = e.target.value ? Number(e.target.value) : undefined;
             const currentMin = this.column.getFilterValue()?.[0];
             debouncedSetRangeFilter(currentMin, max);
-        }}
-                        .value="${this.column.getFilterValue()?.[1] || ''}"
-                    />
-                    ${this.renderClearButton(1)}
-                </div>
-            </div>
+        }}
+                        .value="${this.column.getFilterValue()?.[1] || ''}"
+                    />
+                    ${this.renderClearButton(1)}
+                </div>
+            </div>
         `;
     }
     renderSelectInput() {
-        return html `
-            <lit-select
-                .value="${this.column.getFilterValue() || ''}"
+        return html `
+            <lit-select
+                .value="${this.column.getFilterValue() || ''}"
                 .options="${[
             { value: 'All', label: 'All' },
             ...this.sortedUniqueValues.map((value) => ({
                 value,
                 label: value,
             })),
-        ]}"
+        ]}"
                 .onChange="${(selectedValue) => {
             const filterValue = selectedValue === 'All' ? undefined : selectedValue;
             this.column.setFilterValue(filterValue);
             this.requestUpdate(); // Aktualizácia komponentu po zmene
-        }}"
-            ></lit-select>
+        }}"
+            ></lit-select>
         `;
     }
     renderNumberInput() {
-        return html `
-            <div class="custom-icon-wrapper">
-                <input
-                    class="inputs"
-                    type="number"
+        return html `
+            <div class="custom-icon-wrapper">
+                <input
+                    class="inputs"
+                    type="number"
                     @input=${(e) => {
             const value = e.target.value;
             this.debouncedSetNumberFilter(value);
-        }}
-                    .value="${this.column?.getFilterValue() || ''}"
-                />
-                ${this.renderClearButton()}
-            </div>
+        }}
+                    .value="${this.column?.getFilterValue() || ''}"
+                />
+                ${this.renderClearButton()}
+            </div>
         `;
     }
     renderDateInput() {
-        return html `
-            <div class="range">
-                <div class="custom-icon-wrapper" style="min-width: 70px">
-                    <input
-                        id="startDateInput"
-                        class="inputs"
-                        type="text"
-                        placeholder="From"
-                        value="${this.startDate || ''}"
-                    />
-                    <div class="events-icon" @click=${() => this.startDatePicker.show()}>
-                        <lit-icon-button
-                            icon="events"
-                            size="small"
-                            variant="text"
-                        ></lit-icon-button>
-                    </div>
+        return html `
+            <div class="range">
+                <div class="custom-icon-wrapper" style="min-width: 70px">
+                    <input
+                        id="startDateInput"
+                        class="inputs customCell"
+                        type="text"
+                        placeholder="${msg('Od')}"
+                        value="${this.startDate || ''}"
+                        readonly
+                    />
+                    <div class="events-icon" @click=${() => this.startDatePicker.show()}>
+                        <lit-icon-button
+                            icon="events"
+                            size="small"
+                            variant="text"
+                        ></lit-icon-button>
+                    </div>
                     ${this.startDate
-            ? html `
-                              <div
-                                  class="custom-icon-date"
+            ? html `
+                              <div
+                                  class="custom-icon-date"
                                   @click=${() => {
                 this.startDate = '';
                 this.handleFilterDateChange(this.startDate, this.endDate);
                 this.startDatePicker.clear();
-            }}
-                              >
-                                  <lit-icon-button
-                                      icon="close"
-                                      size="small"
-                                      variant="text"
-                                  ></lit-icon-button>
-                              </div>
+            }}
+                              >
+                                  <lit-icon-button
+                                      icon="close"
+                                      size="small"
+                                      variant="text"
+                                  ></lit-icon-button>
+                              </div>
                           `
-            : ''}
-                </div>
-
-                <div class="custom-icon-wrapper" style="min-width: 70px">
-                    <input
-                        id="endDateInput"
-                        class="inputs"
-                        type="text"
-                        placeholder="To"
-                        value="${this.endDate || ''}"
-                    />
-                    <div class="events-icon" @click=${() => this.endDatePicker.show()}>
-                        <lit-icon-button
-                            icon="events"
-                            size="small"
-                            variant="text"
-                        ></lit-icon-button>
-                    </div>
+            : ''}
+                </div>
+
+                <div class="custom-icon-wrapper" style="min-width: 70px">
+                    <input
+                        id="endDateInput"
+                        class="inputs"
+                        type="text"
+                        placeholder="${msg('Do')}"
+                        value="${this.endDate || ''}"
+                        readonly
+                    />
+                    <div class="events-icon" @click=${() => this.endDatePicker.show()}>
+                        <lit-icon-button
+                            icon="events"
+                            size="small"
+                            variant="text"
+                        ></lit-icon-button>
+                    </div>
                     ${this.endDate
-            ? html `
-                              <div
-                                  class="custom-icon-date"
+            ? html `
+                              <div
+                                  class="custom-icon-date"
                                   @click=${() => {
                 this.endDate = '';
                 this.handleFilterDateChange(this.startDate, this.endDate);
                 this.endDatePicker.clear();
-            }}
-                              >
-                                  <lit-icon-button
-                                      icon="close"
-                                      size="small"
-                                      variant="text"
-                                  ></lit-icon-button>
-                              </div>
+            }}
+                              >
+                                  <lit-icon-button
+                                      icon="close"
+                                      size="small"
+                                      variant="text"
+                                  ></lit-icon-button>
+                              </div>
                           `
-            : ''}
-                </div>
-            </div>
+            : ''}
+                </div>
+            </div>
         `;
     }
     renderTextInput() {
-        return html `
-            <div class="custom-icon-wrapper">
-                <input
-                    class="inputs"
-                    type="text"
+        return html `
+            <div class="custom-icon-wrapper">
+                <input
+                    class="inputs"
+                    type="text"
                     @input=${(e) => {
             const value = e.target.value;
             this.debouncedSetTextFilter(value);
-        }}
-                    .value="${this.column?.getFilterValue() || ''}"
-                />
-                ${this.renderClearButton()}
-            </div>
+        }}
+                    .value="${this.column?.getFilterValue() || ''}"
+                />
+                ${this.renderClearButton()}
+            </div>
         `;
     }
     renderClearButton(rangeIndex) {
-        return html `
+        return html `
             ${rangeIndex === undefined
             ? this.column?.getFilterValue()
-                ? html `
-                          <div
-                              class="custom-icon"
+                ? html `
+                          <div
+                              class="custom-icon"
                               @click=${() => {
                     this.column?.setFilterValue(''); // Vymaže textový filter
                     this.requestUpdate();
-                }}
-                              style="cursor: pointer; pointer-events: auto"
-                          >
-                              <lit-icon-button
-                                  icon="close"
-                                  size="small"
-                                  variant="text"
-                              ></lit-icon-button>
-                          </div>
+                }}
+                              style="cursor: pointer; pointer-events: auto"
+                          >
+                              <lit-icon-button
+                                  icon="close"
+                                  size="small"
+                                  variant="text"
+                              ></lit-icon-button>
+                          </div>
                       `
                 : ''
             : this.column?.getFilterValue()?.[rangeIndex] !== undefined
-                ? html `
-                        <div
-                            class="custom-icon"
+                ? html `
+                        <div
+                            class="custom-icon"
                             @click=${() => {
                     const currentValues = this.column.getFilterValue() || [];
                     currentValues[rangeIndex] = undefined; // Vymaž hodnotu pre daný index
                     this.column.setFilterValue(currentValues);
                     this.requestUpdate();
-                }}
-                            style="cursor: pointer; pointer-events: auto"
-                            xmlns="http://www.w3.org/1999/html"
-                        >
-                            <lit-icon-button
-                                icon="close"
-                                size="small"
-                                variant="text"
-                            ></lit-icon-button>
-                        </div>
+                }}
+                            style="cursor: pointer; pointer-events: auto"
+                            xmlns="http://www.w3.org/1999/html"
+                        >
+                            <lit-icon-button
+                                icon="close"
+                                size="small"
+                                variant="text"
+                            ></lit-icon-button>
+                        </div>
                     `
-                : ''}
+                : ''}
         `;
     }
 };
-FilterInputs.styles = css `
-        .range {
-            display: flex;
-            gap: 0.3125rem;
-        }
-
-        input {
-            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
-            border: 0.0625rem solid var(--color-divider, #d0d3db);
-            border-radius: 0.25rem;
-            min-width: 70px;
-            width: -webkit-fill-available;
-        }
-
-        input[type='number']::-webkit-inner-spin-button,
-        input[type='number']::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-
-        input:hover {
-            border: 0.0625rem solid var(--color-secondary-main, #111827);
-        }
-
-        input:focus {
-            outline: none;
-            border: 0.0625rem solid var(--color-secondary-dark, #010204);
-        }
-
-        select {
-            width: -webkit-fill-available;
-            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
-            border: 0.0625rem solid var(--color-divider, #d0d3db);
-            border-radius: 0.25rem;
-            appearance: none;
-            -webkit-appearance: none; /* pre Safari */
-            -moz-appearance: none; /* pre Firefox */
-        }
-
-        .custom-icon-wrapper {
-            position: relative;
-            width: 100%;
-            display: inline-block;
-        }
-
-        .custom-icon-wrapper .custom-icon {
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            pointer-events: auto;
-            background: white;
-        }
-
-        .custom-icon-wrapper .custom-icon-date {
-            position: absolute;
-            right: 30px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            pointer-events: auto;
-            background: white;
-        }
-
-        .custom-icon-wrapper .events-icon {
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 100;
-            cursor: pointer;
-            pointer-events: auto;
-            background: white;
-        }
-
-        .custom-icon-wrapper select:focus {
-            border: 0.0625rem solid var(--color-secondary-dark, #010204) !important;
-            outline: none;
-        }
-
-        select:hover {
-            border: 0.0625rem solid var(--color-secondary-main, #111827);
-        }
-
-        .-custom-cell- {
-            background: var(--color-primary-main, #76b703) !important;
-            border-radius: 100%;
-        }
-
-        .air-datepicker-cell.-selected-.-custom-cell- {
-            background: var(--color-primary-main, #76b703) !important;
-            border-radius: 100% !important;
-        }
+FilterInputs.styles = css `
+        .range {
+            display: flex;
+            gap: 0.3125rem;
+        }
+
+        input {
+            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            min-width: 70px;
+            width: -webkit-fill-available;
+        }
+
+        input[type='number']::-webkit-inner-spin-button,
+        input[type='number']::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        input:hover {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+        }
+
+        input:focus {
+            outline: none;
+            border: 0.0625rem solid var(--color-secondary-dark, #010204);
+        }
+
+        select {
+            width: -webkit-fill-available;
+            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            appearance: none;
+            -webkit-appearance: none; /* pre Safari */
+            -moz-appearance: none; /* pre Firefox */
+        }
+
+        .custom-icon-wrapper {
+            position: relative;
+            width: 100%;
+            display: inline-block;
+        }
+
+        .custom-icon-wrapper .custom-icon {
+            display: none;
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+            background: var(--background-paper);
+        }
+
+        .custom-icon-wrapper:hover .custom-icon {
+            display: block;
+        }
+
+        .custom-icon-wrapper .custom-icon-date {
+            display: none;
+            position: absolute;
+            right: 30px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+            background: var(--background-paper);
+        }
+
+        .custom-icon-wrapper:hover .custom-icon-date {
+            display: inline-block;
+        }
+
+        .custom-icon-wrapper .events-icon {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 100;
+            cursor: pointer;
+            pointer-events: auto;
+            background: var(--background-paper);
+        }
+
+        .custom-icon-wrapper select:focus {
+            border: 0.0625rem solid var(--color-secondary-dark, #010204) !important;
+            outline: none;
+        }
+
+        select:hover {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+        }
+        .customCell {
+            --adp-cell-background-color-selected: red;
+        }
     `;
 __decorate([
     property({ type: Object })
 ], FilterInputs.prototype, "column", void 0);
+__decorate([
+    property({ type: String })
+], FilterInputs.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: String })
+], FilterInputs.prototype, "userLang", void 0);
 __decorate([
     state()
 ], FilterInputs.prototype, "startDate", void 0);
@@ -426,6 +447,9 @@ __decorate([
 __decorate([
     query('#endDateInput')
 ], FilterInputs.prototype, "endDateInputEl", void 0);
+__decorate([
+    query('#air-datepicker-global-container')
+], FilterInputs.prototype, "datepicker", void 0);
 FilterInputs = __decorate([
     customElement('filter-inputs')
 ], FilterInputs);