@everymatrix/helper-filters 1.65.0 → 1.65.2

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["helper-filters_2.cjs",[[1,"helper-filters",{"showFilterId":[516,"show-filter-id"],"activateTicketSearch":[516,"activate-ticket-search"],"gameId":[513,"game-id"],"playerId":[513,"player-id"],"session":[513],"postMessage":[516,"post-message"],"language":[513],"quickFiltersActive":[516,"quick-filters-active"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32],"limitStylingAppends":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[513,"title-modal"],"visible":[1540],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-filters_2.cjs",[[1,"helper-filters",{"activateTicketSearch":[516,"activate-ticket-search"],"gameId":[513,"game-id"],"playerId":[513,"player-id"],"session":[513],"postMessage":[516,"post-message"],"language":[513],"quickFiltersActive":[516,"quick-filters-active"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32],"limitStylingAppends":[32],"ticketTypeList":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[513,"title-modal"],"visible":[1540],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/helper-filters/helper-filters.css

@@ -53,6 +53,13 @@
   align-items: center;
   margin: 20px 0;
 }
+.FilterModalHeader .filterKey,
+.FilterModalBody .filterKey,
+.FilterModalFooter .filterKey {
+  color: var(--emw--color-typography, #009993);
+  text-align: left;
+  font-size: 16px;
+}
 .FilterModalHeader .FilterModalTitle,
 .FilterModalBody .FilterModalTitle,
 .FilterModalFooter .FilterModalTitle {
@@ -116,4 +123,8 @@
 .FilterModalBody p,
 .FilterModalFooter p {
   margin: 5px 0;
+}
+
+.ticketFilterItem {
+  margin: 12px 0;
 }

package/dist/collection/components/helper-filters/helper-filters.js

@@ -1,22 +1,23 @@
 import { h } from "@stencil/core";
 import { translate, getTranslations } from "../../utils/locale.utils";
-import "@vaadin/date-picker";
 import "../../../../../helper-modal/dist/types/index";
+import "../../../../../../../libs/vaadin-facade/index";
+import { format } from "date-fns";
 export class HelperFilters {
     constructor() {
-        this.handleTicketDrawId = (event) => {
-            const inputElement = event.target;
-            this.filterData.ticketDrawId = inputElement.value;
-        };
         this.handleFilterFrom = (event) => {
             const inputElement = event.target;
             let dateArray = inputElement.value.split('-');
-            this.filterData.filterFromCalendar = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0).toISOString();
+            if (dateArray.length === 3) {
+                this.filterData = Object.assign(Object.assign({}, this.filterData), { filterFromCalendar: `${dateArray[2]}/${dateArray[1]}/${dateArray[0]}` });
+            }
         };
         this.handleFilterTo = (event) => {
             const inputElement = event.target;
             let dateArray = inputElement.value.split('-');
-            this.filterData.filterToCalendar = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 23, 59, 59).toISOString();
+            if (dateArray.length === 3) {
+                this.filterData = Object.assign(Object.assign({}, this.filterData), { filterToCalendar: `${dateArray[2]}/${dateArray[1]}/${dateArray[0]}` });
+            }
         };
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -30,7 +31,16 @@ export class HelperFilters {
                 this.stylingContainer.prepend(cssFile);
             }, 1);
         };
-        this.showFilterId = true;
+        this.handleTicketId = (event) => {
+            if (event.target.value) {
+                this.filterData.ticketId = event.target.value;
+            }
+        };
+        this.handleTicketType = (event) => {
+            if (event.target.selectedItems && event.target.selectedItems.length) {
+                this.filterData.ticketType = event.target.selectedItems.map((item) => item.value);
+            }
+        };
         this.activateTicketSearch = false;
         this.gameId = '';
         this.playerId = '';
@@ -44,8 +54,13 @@ export class HelperFilters {
         this.showFilterModal = false;
         this.showClearButton = false;
         this.filterData = {};
-        this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+        this.filterDataReset = { filterFromCalendar: '', filterToCalendar: '' };
         this.limitStylingAppends = false;
+        this.ticketTypeList = [
+            { label: 'Normal', value: 'NORMAL' },
+            { label: 'Syndicate', value: 'SYNDICATE' },
+            { label: 'Subscription', value: 'SUBSCRIPTION' }
+        ];
     }
     componentWillLoad() {
         if (this.translationUrl) {
@@ -70,7 +85,10 @@ export class HelperFilters {
     filterSelectionHandler(event) {
         if (this.postMessage)
             window.postMessage({ type: 'filterSelection', event }, window.location.href);
-        if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+        if (this.filterData.filterFromCalendar ||
+            this.filterData.filterToCalendar ||
+            this.filterData.ticketId ||
+            this.filterData.ticketType.length)
             this.filterSelection.emit(event);
     }
     filterSelectionResetHandler(event) {
@@ -89,18 +107,50 @@ export class HelperFilters {
     filterSearch() {
         this.modalCloseEvent();
         this.showClearButton = true;
+        if (this.filterData.filterFromCalendar && this.filterData.filterToCalendar) {
+            let dateArray = this.filterData.filterFromCalendar.split('/');
+            let dateArrayTo = this.filterData.filterToCalendar.split('/');
+            const transferData = {
+                filterFromCalendar: new Date(Date.UTC(Number(dateArray[2]), Number(dateArray[1]) - 1, Number(dateArray[0]), 0, 0, 0)).toISOString(),
+                filterToCalendar: new Date(Date.UTC(Number(dateArrayTo[2]), Number(dateArrayTo[1]) - 1, Number(dateArrayTo[0]), 23, 59, 59)).toISOString()
+            };
+            this.filterData = Object.assign(Object.assign({}, this.filterData), transferData);
+        }
         this.filterSelectionHandler(this.filterData);
     }
+    clearSelection() {
+        this.comboBox.clear();
+    }
     resetSearch() {
         this.showClearButton = false;
         this.filterSelectionResetHandler(this.filterDataReset);
+        this.clearSelection();
         this.filterData = {};
     }
+    formateDate(dateParts) {
+        const { year, month, day } = dateParts;
+        const date = new Date(year, month, day);
+        return format(date, 'dd/MM/yyyy');
+    }
+    parseDate(inputValue) {
+        const [day, month, year] = inputValue.split('/');
+        return { year, month: parseInt(month) - 1, day };
+    }
+    changeFormate(str) {
+        const [day, month, year] = str.split('/');
+        return `${year}-${month}-${day}`;
+    }
+    setDateFormate(dom) {
+        dom.i18n = Object.assign(Object.assign({}, dom.i18n), { formatDate: this.formateDate, parseDate: this.parseDate });
+    }
     render() {
-        return (h("div", { key: '92b6e88d833f8fdc12d833636e80aff214a8eb9d', class: "HelperFilters", ref: el => this.stylingContainer = el }, h("div", { key: 'fed2cf119553fc6d2b9ecaaf83e3c68ef040fd46', class: "FilterButtonsWrapper" }, h("button", { key: '2ef40face6ef68541041994f263094d155aca23e', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), (this.showClearButton || this.quickFiltersActive) ?
-            h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language))
-            :
-                null), h("helper-modal", { key: '7b6a634f3f1f4497d6d39aebcb8249d153e5c277', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { key: '37c5aaabc27e32d24de1e3a50c8140c3674e07d5', class: "FilterModalHeader" }, h("h3", { key: '50b10b90dffdff3edd5933278d3ab000ecc2a93a', class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))), h("div", { key: 'bf843f5003fe32555a949474b1fa7b966000cb83', class: "FilterModalBody" }, this.showFilterId && h("div", { key: 'bd763dc296c986f1d3a2c04e30f2c4c8f02c9b7e' }, h("input", { key: 'd393e06b61d5f14e3a28330c15c3fb01257c8472', id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: this.handleTicketDrawId, class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate('filterTicketPlaceholder', this.language) : translate('filterDrawPlaceholder', this.language) }), h("p", { key: 'f8a8afe9594f8f0cad7bf0654f23348341f08a3d' }, translate('filterOrDate', this.language))), h("div", { key: 'a6b8fc4a3c424a1d56236c168e0298de3511cba5', class: "FilterCalendarWrapper" }, h("vaadin-date-picker", { key: '06c32fbf0073a7097ec6a8c24b200868a0c525cb', value: this.filterData.filterFromCalendar, onChange: this.handleFilterFrom, placeholder: translate('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h("vaadin-date-picker", { key: 'a4d4212b6107ce9cf572f40a4713d9d038c8b395', value: this.filterData.filterToCalendar, onChange: this.handleFilterTo, placeholder: translate('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h("div", { key: '7dec7662f1b093b6c443d0c194eb614aa608a342', class: "FilterModalFooter" }, h("button", { key: '336d6f0a0fb88bff6c44f593a754afbc43cd1e03', class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
+        return (h("div", { key: 'a9a89658d3591e8e4aa680920f4f2e9f1cf1fc93', class: "HelperFilters", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '6d8f5a5e6467726a7f95057a792da773784e1b48', class: "FilterButtonsWrapper" }, h("button", { key: '5f8c4842e3497754631acc2eeef6b9d0f725a0c4', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), this.showClearButton || this.quickFiltersActive ? (h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language))) : null), h("helper-modal", { key: '24a5ae73bed69d1ddb4e2c847f09eddfec3d35bc', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { key: '3194d625f6a0b1c113b96ef88620fc73fabe550f', class: "FilterModalHeader" }, h("h3", { key: '4578b3940a0e5a1ed65f234d6b45b397c8b5dec7', class: "FilterModalTitle" }, this.activateTicketSearch
+            ? translate('filterModalTicketTitle', this.language)
+            : translate('filterModalDrawTitle', this.language))), h("div", { key: 'd8f95fd76ad9a92492dddb575a7e0a21053cd15b', class: "FilterModalBody" }, this.activateTicketSearch && (h("div", { key: '1beab701dd04c85d676f453243fe90ad5ff570f6', class: "ticketFilterContainer" }, h("div", { key: '0761d5adb0d30de551bb599925a350a93302e927', class: "ticketFilterItem" }, h("div", { key: '33d1a16ac3ff42254542a77a3dfd805f45ffabf3', class: "filterKey" }, translate('filterTicketIdPlaceholder', this.language)), h("vaadin-text-field", { key: '48de372200553e9e2cb3f1944348cef3086035e0', placeholder: translate('filterTicketIdPlaceholder', this.language), value: this.filterData.ticketId, onInput: (event) => this.handleTicketId(event) })), h("div", { key: '996fd815df0045df76b6c642f3b17e85ccd99926', class: "ticketFilterItem" }, h("div", { key: '4df8aa3b0012ff82d7ee93a366cb14f83d5d2533', class: "filterKey" }, translate('searchByTicketType', this.language)), h("vaadin-multi-select-combo-box", { key: '27a9d591abefa8ab97304939d37fa7964fbe0ab6', ref: (el) => (this.comboBox = el), placeholder: translate('filterTiketTypePlaceholder', this.language), items: this.ticketTypeList, onChange: this.handleTicketType, itemValuePath: "value", itemLabelPath: "label" })))), h("div", { key: 'a0c1fde50e6c0963894a0d45c8523c7153244205', class: "filterItem" }, h("div", { key: '4d4dba8c36bb91efa5f51801b539e50f13db8b6e', class: "filterKey" }, translate('searchByDate', this.language)), h("div", { key: 'ba6c1d9ac1676c71e40a40054855e1638b0b3229', class: "FilterCalendarWrapper" }, h("vaadin-date-picker", { key: 'fda0df00197b49fba4d63683e34e278a3d0238c8', value: this.filterData.filterFromCalendar, max: this.filterData.filterToCalendar === undefined
+                ? undefined
+                : this.changeFormate(this.filterData.filterToCalendar), onChange: this.handleFilterFrom, placeholder: translate('filterFromCalendar', this.language), ref: (el) => this.setDateFormate(el), class: "VaadinDatePicker" }), h("vaadin-date-picker", { key: '6ebea129e53651be09307be97a48b06d9dfb830d', value: this.filterData.filterToCalendar, min: this.filterData.filterFromCalendar === undefined
+                ? undefined
+                : this.changeFormate(this.filterData.filterFromCalendar), onChange: this.handleFilterTo, placeholder: translate('filterToCalendar', this.language), ref: (el) => this.setDateFormate(el), class: "VaadinDatePicker" })))), h("div", { key: '4f2a5df9654db0b64741808baf6225d5cbcfeb95', class: "FilterModalFooter" }, h("button", { key: 'a9d7b1b0a4094c30447ab4e3d40b7c185b9eab71', class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
     }
     static get is() { return "helper-filters"; }
     static get encapsulation() { return "shadow"; }
@@ -116,24 +166,6 @@ export class HelperFilters {
     }
     static get properties() {
         return {
-            "showFilterId": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Check if show the filter option by id"
-                },
-                "attribute": "show-filter-id",
-                "reflect": true,
-                "defaultValue": "true"
-            },
             "activateTicketSearch": {
                 "type": "boolean",
                 "mutable": false,
@@ -321,7 +353,8 @@ export class HelperFilters {
             "showClearButton": {},
             "filterData": {},
             "filterDataReset": {},
-            "limitStylingAppends": {}
+            "limitStylingAppends": {},
+            "ticketTypeList": {}
         };
     }
     static get events() {

package/dist/collection/utils/locale.utils.js

@@ -8,10 +8,13 @@ const TRANSLATIONS = {
         filterModalDrawTitle: 'Draws Results History',
         filterTicketPlaceholder: 'Search for a ticket ID',
         filterDrawPlaceholder: 'Search for a draw ID',
+        filterTicketIdPlaceholder: 'Search by Ticket ID',
+        filterTiketTypePlaceholder: 'Ticket Type',
         filterModalButton: 'Search',
         filterFromCalendar: 'From',
         filterToCalendar: 'To',
-        filterOrDate: 'or search by date'
+        searchByDate: 'Search by Date',
+        searchByTicketType: 'Search by Ticket Type'
     },
     ro: {
         filterOpen: 'Filtrare',
@@ -20,8 +23,11 @@ const TRANSLATIONS = {
         filterModalDrawTitle: 'Rezultatele draw-urilor',
         filterTicketPlaceholder: 'Cauta ID bilet',
         filterDrawPlaceholder: 'Cauta ID draw',
+        filterTicketIdPlaceholder: 'Search by Ticket ID',
+        filterTiketTypePlaceholder: 'Ticket Type',
         filterModalButton: 'Cauta',
-        filterOrDate: 'sau cauta dupa data'
+        searchByDate: 'Search by Date',
+        searchByTicketType: 'Search by Ticket Type'
     },
     fr: {
         filterOpen: 'Filter',
@@ -30,10 +36,12 @@ const TRANSLATIONS = {
         filterModalDrawTitle: 'Draws Results History',
         filterTicketPlaceholder: 'Search for a ticket ID',
         filterDrawPlaceholder: 'Search for a draw ID',
+        filterTicketIdPlaceholder: 'Search by Ticket ID',
+        filterTiketTypePlaceholder: 'Ticket Type',
         filterModalButton: 'Search',
         filterFromCalendar: 'From',
         filterToCalendar: 'To',
-        filterOrDate: 'or search by date'
+        searchByDate: 'Search by Date'
     },
     ar: {
         filterOpen: 'Filter',
@@ -42,10 +50,13 @@ const TRANSLATIONS = {
         filterModalDrawTitle: 'Draws Results History',
         filterTicketPlaceholder: 'Search for a ticket ID',
         filterDrawPlaceholder: 'Search for a draw ID',
+        filterTicketIdPlaceholder: 'Search by Ticket ID',
+        filterTiketTypePlaceholder: 'Ticket Type',
         filterModalButton: 'Search',
         filterFromCalendar: 'From',
         filterToCalendar: 'To',
-        filterOrDate: 'or search by date'
+        searchByDate: 'Search by Date',
+        searchByTicketType: 'Search by Ticket Type'
     },
     hr: {
         filterOpen: 'Filter',
@@ -54,10 +65,13 @@ const TRANSLATIONS = {
         filterModalDrawTitle: 'Povijest rezultata Izvlačenja',
         filterTicketPlaceholder: 'Pretraga ID listića',
         filterDrawPlaceholder: 'Pretraga ID izvlačenja',
+        filterTicketIdPlaceholder: 'Search by Ticket ID',
+        filterTiketTypePlaceholder: 'Ticket Type',
         filterModalButton: 'Traži',
         filterFromCalendar: 'Od',
         filterToCalendar: 'Do',
-        filterOrDate: 'ili tražite po datumu'
+        searchByDate: 'Search by Date',
+        searchByTicketType: 'Search by Ticket Type'
     }
 };
 export const translate = (key, customLang) => {

package/dist/esm/helper-filters.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["helper-filters_2",[[1,"helper-filters",{"showFilterId":[516,"show-filter-id"],"activateTicketSearch":[516,"activate-ticket-search"],"gameId":[513,"game-id"],"playerId":[513,"player-id"],"session":[513],"postMessage":[516,"post-message"],"language":[513],"quickFiltersActive":[516,"quick-filters-active"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32],"limitStylingAppends":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[513,"title-modal"],"visible":[1540],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["helper-filters_2",[[1,"helper-filters",{"activateTicketSearch":[516,"activate-ticket-search"],"gameId":[513,"game-id"],"playerId":[513,"player-id"],"session":[513],"postMessage":[516,"post-message"],"language":[513],"quickFiltersActive":[516,"quick-filters-active"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32],"limitStylingAppends":[32],"ticketTypeList":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[513,"title-modal"],"visible":[1540],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 });