https://www.benq.com/apps/b2c/clientlibs/clientlib-site/components…vue.min.772c5dae6bc46b7433fbfa341870f2b7.js

1Vue.config.devtools = true;
2
3new Vue({
4    el: '#download-search-component',
5    data: {
6        sortList: sortList,
7        sortType: typeof defaultSortType != 'undefined' ? defaultSortType : 'Newest',
8        displaySortType: (function() {
9            const initialSortType = typeof defaultSortType != 'undefined' ? defaultSortType : 'Newest';
10            const initialSortOption = sortList.find(function (item) {
11                return item.sortType == initialSortType;
12            });
13            return initialSortOption ? initialSortOption.displaySortType : initialSortType;
14        })(),
15        displaySortListBackground: false,
16        displaySortList: false,
17        sortArrowUp: false,
18        searchResults: [],
19        productValue: '',
20        modelValue: '',
21        noResultKeyword: '',
22        resultCount: 0,
23        searchUrl: '/api/azure/searchIndex?count=true',
24        dropdownFilter: "&top=1000&filter=category eq 'Service' and project eq 'b2c' and site eq '" + downloadSearchSite + "'",
25        searchFilter: "&filter=category eq 'Download' and project eq 'b2c' and site eq '" + downloadSearchSite + "' and subCategory eq 'User Manual'",
26        hide: {
27            result: true,
28            noResult: true,
29            loading: true,
30        },
31        param: new URLSearchParams(window.location.search).get('q'),
32        dropdownList: [],
33        modelList: [],
34    },
35    methods: {
36        getProduct(prodLine) {
37            let vm = this;
38            vm.dropdownList.forEach(item => {
39                if(item.category == prodLine) {
40                    vm.modelList = item.model;
41                }
42            });
43        },
44        getResults(keyword) {
45            // get search result
46            let vm = this;
47            vm.hide.loading = false;
48            vm.hide.result = true;
49            vm.hide.noResult = true;
50            $.ajax({
51                type : "GET",
52                url : vm.searchUrl + vm.searchFilter + '&search="' + encodeURIComponent(keyword) + '"',
53                dataType : 'json',
54                cache : false,
55                success : function(data) {
56                    vm.searchResults = data.value;
57                    vm.hide.loading = true;
58                    if(data.value) {
59                        if(data.value.length > 0) {
60                            vm.hide.result = false;

61                            vm.resultCount = data.value.length;
62                        } else {
63                            vm.hide.noResult = false;
64                            vm.noResultKeyword = vm.modelValue || keyword;
65                        }
66                    }
67                },
68                error : function(jqXHR, textStatus, errorThrown) {
69                    console.log("API productFetch got error from middle layer:" + jqXHR);
70                },
71            });
72        },
73        openSortList() {
74            let vm = this;
75            vm.displaySortList = !vm.displaySortList;
76            vm.sortArrowUp = !vm.sortArrowUp;
77            vm.displaySortListBackground = !vm.displaySortListBackground;
78        },
79        sort(item) {
80            let vm = this;
81            vm.sortType = item.sortType;
82            vm.displaySortType = item.displaySortType;
83            vm.displaySortList = false;
84            vm.sortArrowUp = false;
85            vm.displaySortListBackground = false;
86        },
87        sortDropdownList(data) {
88            let vm = this;
89            let productLine = [];
90            let dropList = [];
91            if(data.value) {
92                data.value.forEach((item, index) => {
93                    dropList.push({"category": item.productLine, "model": item.title});
94                    productLine.push(item.productLine);
95                });    
96                productLine = productLine.filter((e, i, self) => {
97                    return self.indexOf(e) === i;
98                }).sort();
99                productLine.forEach(line => {
100                    let models = [];
101                    dropList.forEach(i => {
102                        if(i.category == line) {
103                            models.push(i.model);
104                        }
105                    });
106                    models = models.sort();
107                    vm.dropdownList.push({"category": line, "model": models});
108                });
109                vm.dropdownList = vm.dropdownList.reduce((obj, item) => {  
110                    let find = obj.find(i => i.category === item.category);  
111                    let originalItem = {  
112                      ...item
113                    }
114                    if(find){
115                        let originalModels = find.model;
116                        let tempModels = [];
117                        tempModels = item.model;
118                        find.model = originalModels.concat(tempModels);
119                    }else{
120                        obj.push(originalItem)
121                    }
122                    return obj;
123                  }, [])
124            }
125        }
126    },
127    watch: {
128        param: {
129            handler() {
130                let vm = this;
131                if(vm.param != '' && vm.param) {
132                    vm.param = decodeURIComponent(vm.param.trim());
133                    vm.getResults(vm.param);
134                }
135            },
136            deep: true,
137            immediate: true,
138        },
139    },
140    computed: {
141        sortedResults() {
142            let vm = this;
143            if(vm.searchResults && vm.sortType) {
144                if (vm.sortType == "Newest") {
145                    vm.searchResults.sort(function(a, b) {
146                        var aLastReplicated = a.lastReplicated ? a.lastReplicated : 0;
147                        var bLastReplicated = b.lastReplicated ? b.lastReplicated : 0;
148                        return bLastReplicated - aLastReplicated;
149                    });
150                } else if (vm.sortType == "A-Z") {
151                    vm.searchResults.sort(function(a, b) {
152                        var aTitle = a.productTitle ? a.productTitle : "";
153                        var bTitle = b.productTitle ? b.productTitle : "";
154                        return aTitle.toLowerCase().localeCompare(bTitle.toLowerCase());
155                    });
156                } else if (vm.sortType == "Z-A") {
157                    vm.searchResults.sort(function(a, b) {
158                        var aTitle = a.productTitle ? a.productTitle : "";
159                        var bTitle = b.productTitle ? b.productTitle : "";
160                        return bTitle.toLowerCase().localeCompare(aTitle.toLowerCase());
161                    });
162                }
163            }
164            return vm.searchResults;
165        },
166    },
167    mounted() {
168        // get dropdown list data
169        let vm = this;
170        $.ajax({
171            type : "GET",
172            url : vm.searchUrl + vm.dropdownFilter,
173            dataType : 'json',
174            cache : false,
175            success : function(data) {
176                let skipCount = Math.floor(data.count/1000);
177                if(skipCount < 1) { // if the result count is less than 1000
178                    vm.sortDropdownList(data);
179                } else { // if the result count is more than 1000
180                    for(let i=0; i<=skipCount; i++) {
181                        $.ajax({
182                            type : "GET",
183                            url : vm.searchUrl + '&skip=' + i*1000 + vm.dropdownFilter,
184                            dataType : 'json',
185                            cache : false,
186                            success: function(data) {
187                                vm.sortDropdownList(data);
188                            },
189                            error : function(jqXHR, textStatus, errorThrown) {
190                                console.log("API productFetch got error from middle layer:" + jqXHR);
191                            },
192                        });
193                    }
194                }
195            },
196            error : function(jqXHR, textStatus, errorThrown) {
197                console.log("API productFetch got error from middle layer:" + jqXHR);
198            },
199        });
200    },
201    updated() {
202        let vm = this;
203        $(vm.$refs.select1).selectpicker('refresh');
204        $(vm.$refs.select2).selectpicker('refresh');
205    },
206});