https://www.skcris.sk/components/komis-components/wj-search-form/main.js

1import { i18n } from "/components/komis-components/i18n.js";
2
3window.addEventListener("load", function () {
4    if ($("#search-menu").length) {
5        new Vue({
6            el: "#search-menu",
7            i18n,
8
9            data: {
10                frequentlySearched: [],
11                indexesList: [],
12                query: "",
13                mobile: false,
14                mobileOpen: false,
15                windowWidth: window.innerWidth,
16                userAuthenticated: false,
17                restBaseUrl: null,
18                userId: null,
19                module: null,
20            },
21
22            beforeCreate() {
23                window.addEventListener("onSearch", (data) => {
24                    console.log("onSearch event", data);
25
26                    if (data.detail) this.query = data.detail;
27                    else this.query = "";
28                });
29            },
30
31            mounted() {
32                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
33                if (vw <= 768) this.mobile = true;
34                else this.mobile = false;
35
36                this.$nextTick(() => {
37                    window.addEventListener("resize", this.onResize);
38                });
39
40                this.observer = new MutationObserver((mutations) => {
41                    for (const m of mutations) {
42                        const newValue = m.target.getAttribute(m.attributeName);
43                        this.$nextTick(() => {
44                            this.onClassChange(newValue, m.oldValue);
45                        });
46                    }
47                });
48                this.observer.observe(this.$refs.searchBox, {
49                    attributes: true,
50                    attributeOldValue: true,
51                    attributeFilter: ["class"],
52                });
53
54                // LOGGED-USER INTERVAL
55                const loggedUserInterval = setInterval(() => {
56                    if (window.sspaStore?.loggedUser) {
57                        console.log("wj-search-menu authenticated:", window.sspaStore.loggedUser);
58                        this.userAuthenticated = window.sspaStore.loggedUser.authenticated === true ? true : false;
59                        clearInterval(loggedUserInterval);
60                        this.userId = window.sspaStore.loggedUser?.userId;
61                    }
62                    this.restBaseUrl = window.sspaStore.envParams["komis.vue.pp.api.rest.url"];
63                    this.module = window.sspaStore.envParams["komis.vue.modul_instance"];
64                }, 100);
65            },
66
67            beforeDestroy() {
68                window.removeEventListener("resize", this.onResize);
69                this.observer.disconnect();
70            },
71
72            watch: {
73                mobileOpen(value) {
74                    if (value === true) setTimeout(() => (document.body.style.overflow = "hidden"), 100);
75                    else document.body.style.overflow = "auto";
76                },
77
78                windowWidth(newValue, oldValue) {
79                    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
80                    if (vw <= 768) this.mobile = true;
81                    else this.mobile = false;
82                },
83            },
84
85            methods: {
86                onResize() {
87                    this.windowWidth = window.innerWidth;
88                },
89
90                onClassChange(classAttrValue) {
91                    if (this.mobile) {
92                        if (classAttrValue.includes("show")) this.mobileOpen = true;
93                        else this.mobileOpen = false;
94                    }
95                },
96
97                searchInputForm(url, event) {
98                    event.preventDefault();
99
100                    const data = this.query || "";
101                    const dataEncoded = btoa(encodeURIComponent(data));
102
103                    const query = "?query=" + dataEncoded;
104                    location.href = url + query;
105                },
106
107                getSearchData() {
108                    axios
109                        .post(`${this.restBaseUrl}/rest/public/v2/search/getLastSearchByQuery`, {
110                            userId: this.userId || null,
111                            query: this.query,
112                            sysCode: this.module
113                        })
114                        .then((response) => {
115                            if (response.data) {
116                                console.log(response.data);
117                                this.frequentlySearched = response.data;
118                            }
119                        })
120                        .catch((error) => {
121                            console.log(error);
122                        });
123                },
124
125                removeSearch(searchItem) {
126                    axios
127                        .delete(`${this.restBaseUrl}/rest/public/v2/search/${searchItem.id}`)
128                        .then((response) => {
129                            this.frequentlySearched.splice(this.frequentlySearched.indexOf(searchItem), 1);
130                        })
131                        .catch((error) => {
132                            console.log(error);
133                        });
134                },
135
136                base64EncodeUri(query, index) {
137                    const data = {
138                        query: query ? query : "",
139                        index: index && index.length ? index : null,
140                    };
141
142                    const encoder = new TextEncoder();
143                    const encodedData = encoder.encode(JSON.stringify(data));
144                    const encodedString = btoa(String.fromCharCode.apply(null, encodedData));
145
146                    return encodeURIComponent(encodedString);
147                },
148            },
149        });
150    }
151});