aico-image-editor/src/components/catalogueSearch/catalogueSearch.js

Combine multiple image into and create single combined image

const loadCatalogueSearchHTML = () => import(/* webpackMode: "eager" */'./catalogueSearch.html');

import initHTML from '../../initHTML';



initHTML('catalogue-search',  loadCatalogueSearchHTML)



export default () => ({
    productSearchText: '',
    productCurrentPage: 1,
    productLastPage: 1,
    productPageSize: 10,
    init() {
        if(module.hot) {
            module.hot.accept('./catalogueSearch.html', function() {
                console.log('change detected')
                hotReloadAlpineComponent(this.$el.getRootNode().host ,loadCatalogueSearchHTML)
            }.bind(this));
        }
    },
    getLocaleForApi($canvasStore) {
        let locale = $canvasStore.currentLocale;
        if (locale === 'de') {
            locale = 'de_CH'
        } else if (locale === 'en') {
            if(!($canvasStore.apiConfig.apiUrl.includes('127.0.0.1'))) {
                locale = 'en_US'
            }
        }
        return locale;
    },
    intersectionObserverHandler(productId) {
        //check if it is last product and if it is then check if currentpage is less than last page
        if(this.checkIfLastProduct(productId) && (this.productCurrentPage < this.productLastPage)) { 
            // before loading shapes, we need to increament page number
            this.productCurrentPage++;

            //pass searchTermChanged false as we don't need reset when loading from last element
            this.loadProducts(false);
        }
    },
    checkIfLastProduct(productId) {
        return this.products[this.products.length - 1]?.id === productId;
    },
    resetAllWithNewSearch() {
        this.productCurrentPage = this.productLastPage = 1;
        this.products = [];

    },
    isSearchBlockVisible: true,
    showSearchBlock(event) {
        this.isSearchBlockVisible = true;
    },
    hideSearchBlock(event, el) {
        if(!(el.contains(event.target))) {
            this.isSearchBlockVisible = false;
        }
       
    },
    isProductLoading: false,
    loadProducts(searchTermChanged) {

         // searchTermChanged - indicates whether new request or not, resetAllWithNewSearch is called if function
            // is called due to change in search term, in which case we need to reset page numbers and then products array both
            if(searchTermChanged) {
                this.resetAllWithNewSearch();
            }

            if(this.productSearchText.trim() === '') {
                return;
            }

            const $canvasStore = this.$store.canvas;
            const locale = this.getLocaleForApi($canvasStore);
           
            
            this.isProductLoading = true;
            fetch(`${$canvasStore.apiConfig.apiUrl}/api/v1/products/images?page[number]=${this.productCurrentPage}
                &page[size]=${this.productPageSize}&page[locale]=${locale}&page[search]=${this.productSearchText}`, {
                method: "GET",
                headers: {
                    "Authorization": `Bearer ${$canvasStore.apiConfig.apiToken}`,
                },
                redirect: 'follow'
            })
            .then(response => {
                if (response.ok) {
                    return response.json()
                } else {
                    throw new Error('Network response was not OK');
                }
            })
            .then(data => {
                data?.data?.forEach(product => {
                    if(!(this.products.find(prod => prod.id === product.id))) {
                        this.products.push(product);
                    }
                })
                this.productLastPage = data?.meta?.lastPage;
                this.isProductLoading = false;
                
            })
            .catch(error => {
                console.error('Error:', error);
                this.isProductLoading = false;
            });
    },
    selectedProduct: null,
    products: [],
    selectProduct(id, url) {
        this.selectedProduct = id;
        this.$store.canvas.addShapeToCanvas(url, 'motive');
    }

})