{"version":3,"file":"MobileProductFilter-1a5229f2.js","sources":["../../../ClientApp/src/components/MobileProductFilter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nimport {computed, onMounted, reactive} from \"vue\";\r\nimport {useFetch} from \"@vueuse/core\";\r\nimport axios from \"axios\";\r\nimport eventBus from \"../scripts/utils/event-bus\";\r\nimport Multilang from \"../scripts/utils/multilang\";\r\nimport {FilterGroup} from \"../scripts/models/product-filter\";\r\n\r\nconst props = defineProps<{\r\n    getAction: string;\r\n    countAction: string;\r\n    filterAction: string;\r\n}>();\r\n\r\nconst model = reactive({\r\n    isVisibleFilter: false,\r\n    isVisibleFilterGroups: true,\r\n    isActiveFilterGroup: false,\r\n    isLoading: false,\r\n    filterGroupList: [] as FilterGroup[],\r\n    selectedFilterGroupList: [] as FilterGroup[],\r\n    selectedFilterIdList: \"\",\r\n    initFilterPropertyId: 0,\r\n    headerText: Multilang.getTranslation(\"productoverview.filter.title\", \"Filter\")\r\n});\r\n\r\n// ACTIONS\r\n\r\nconst productCountUrl = computed(() => {\r\n  const separator = props.countAction.indexOf(\"?\") === -1 ? \"?\" : \"&\";\r\n  return `${props.countAction}${separator}filters=${model.selectedFilterIdList}`;\r\n});\r\n\r\nconst {data: productCount, isFetching: isFetchingProductCount, execute: fetchProductCount} = useFetch(productCountUrl, { refetch: true }).get().json();\r\n\r\n// COMPUTED\r\n\r\nconst isActiveFilter = computed(() => {\r\n    return model.selectedFilterIdList.length > 0;\r\n});\r\n\r\nconst selectedFilterItems = computed(() => {\r\n    return model.filterGroupList.map((filterGroup: any) => {\r\n        return filterGroup.filterItemList\r\n            .filter(filterItem => filterItem.isSelected)\r\n            .map(filterItem => filterItem.name)\r\n            .join(\", \");\r\n    });\r\n});\r\n\r\nconst filterLinkUrl = computed(() => {\r\n    const separator = props.filterAction.indexOf(\"?\") === -1 ? \"?\" : \"&\";\r\n    let requestUrl = `${props.filterAction}${separator}filters=${model.selectedFilterIdList}`;\r\n    \r\n    if (model.initFilterPropertyId > 0) {\r\n        requestUrl += `&initFilterPropertyId=${model.initFilterPropertyId}`\r\n    }\r\n    \r\n    return requestUrl;    \r\n});\r\n\r\nconst filterLinkText = computed(() => {\r\n    const filterText = Multilang.getTranslation(\"productoverview.filter.action.search\", \"Search _count_ products\");\r\n    return filterText.replace(\"_count_\", productCount.value);\r\n});\r\n\r\n// METHODS\r\n\r\nconst toggleFilter = async (show: boolean) => {\r\n    const headerElement = document.querySelector(\"header\") as HTMLElement;\r\n    const footerElement = document.querySelector(\"footer\") as HTMLElement;\r\n    const productFiltersElement = document.querySelector(\"#product-filters\") as HTMLElement;\r\n    const feedbackElement = document.querySelector(\"#_hj_feedback_container\") as HTMLElement;\r\n    const newsletterWrapperElement = document.querySelector(\"#newsletter\") as HTMLElement;\r\n    const productOverviewCardElements = document.querySelectorAll(\"#product-overview .card\");\r\n\r\n    // hide elements to prevent body scrolling\r\n    toggleHtmlElement(headerElement, show);\r\n    toggleHtmlElement(footerElement, show);\r\n    toggleHtmlElement(productFiltersElement, show);\r\n    toggleHtmlElement(feedbackElement, show);\r\n    toggleHtmlElement(newsletterWrapperElement, show);\r\n\r\n    // @ts-ignore\r\n    const productOverviewCardElementList = [...productOverviewCardElements];\r\n    for (let productOverviewCardElement of productOverviewCardElementList) {\r\n        toggleHtmlElement(productOverviewCardElement, show);\r\n    }\r\n\r\n    // toggle mobile filter\r\n    model.isVisibleFilter = show;\r\n\r\n    // set filters\r\n    if (show && model.filterGroupList.length === 0) {\r\n        model.isLoading = true;\r\n        \r\n        const getResponse = await axios.get(props.getAction);\r\n        model.filterGroupList = getResponse.data.filterGroupList;\r\n        model.selectedFilterIdList = getResponse.data.selectedFilterIdList;\r\n        model.isLoading = false;\r\n        \r\n        await fetchProductCount();\r\n    }\r\n};\r\n\r\nconst toggleHtmlElement = (el: HTMLElement | null, show: boolean) => {\r\n    const displayStyle = show ? \"none\" : \"block\";\r\n\r\n    if (el === null) {\r\n        return;\r\n    }\r\n\r\n    el.style.display = displayStyle;\r\n};\r\n\r\nconst toggleGroupItems = (show: boolean, filterGroup: any) => {\r\n    // get active filter group if missing\r\n    if (filterGroup === null) {\r\n        filterGroup = model.filterGroupList.find((filterGroup: any) => filterGroup.isVisibleFilterItems);\r\n    }\r\n\r\n    // toggle groups + items\r\n    filterGroup.isVisibleFilterItems = show;\r\n    model.isVisibleFilterGroups = !show;\r\n\r\n    // update header text\r\n    model.headerText = show ? filterGroup.name : model.headerText;\r\n\r\n    // check active filter group\r\n    setActiveFilterGroup(filterGroup);\r\n};\r\n\r\nconst changeSelectedFilters = (filterGroupId: number, trySelected: boolean) => {\r\n    // get selected filter groups\r\n    model.selectedFilterGroupList = model.filterGroupList\r\n        .filter((filterGroup: any) =>\r\n            filterGroup.filterItemList\r\n                .some(filterItem => filterItem.isSelected));\r\n  \r\n    // get selected filter identifiers\r\n    model.selectedFilterIdList = model.filterGroupList\r\n        .map((filterGroup: any) =>\r\n            filterGroup.filterItemList\r\n                .filter(filterItem => filterItem.isSelected)\r\n                .map(filterItem => filterItem.id)\r\n                .join(\",\")\r\n        )\r\n        .filter(filterItemIdList => filterItemIdList.length > 0)\r\n        .join(\",\");\r\n    \r\n    // get init filter group TODO: get all selected property IDs\r\n    if (trySelected) {\r\n        if (filterGroupId === 0) {\r\n            model.initFilterPropertyId = model.selectedFilterGroupList.at(0)?.id ?? 0;\r\n        }\r\n        else {\r\n            model.initFilterPropertyId = filterGroupId;\r\n        }\r\n    }\r\n    else {\r\n        model.initFilterPropertyId = model.selectedFilterGroupList.at(0)?.id ?? 0;\r\n    }\r\n\r\n    // check active filter group\r\n    const filterGroup = getVisibleFilterGroup();\r\n    setActiveFilterGroup(filterGroup);\r\n};\r\n\r\nconst clearFilter = () => {\r\n    for (let filterGroup of model.filterGroupList) {\r\n        for (let filterItem of filterGroup.filterItemList) {\r\n            filterItem.isSelected = false;\r\n        }\r\n    }\r\n\r\n    changeSelectedFilters(0, false);\r\n};\r\n\r\nconst clearFilterGroup = () => {\r\n    const filterGroup = getVisibleFilterGroup();\r\n    for (let filterItem of filterGroup!.filterItemList) {\r\n        filterItem.isSelected = false;\r\n    }\r\n\r\n    changeSelectedFilters(0, true);\r\n};\r\n\r\nconst getVisibleFilterGroup = () => {\r\n    return model.filterGroupList.find(filterGroup => filterGroup.isVisibleFilterItems);\r\n};\r\n\r\nconst setActiveFilterGroup = (filterGroup: any) => {\r\n    if (typeof (filterGroup) === \"undefined\") {\r\n        return;\r\n    }\r\n\r\n    if (filterGroup === null) {\r\n        model.isActiveFilterGroup = false;\r\n    }\r\n\r\n    if (filterGroup.isVisibleFilterItems) {\r\n        model.isActiveFilterGroup = filterGroup.filterItemList.filter(filterItem => filterItem.isSelected).length > 0;\r\n    } else {\r\n        model.isActiveFilterGroup = false;\r\n    }\r\n};\r\n\r\n// HOOKS\r\n\r\nonMounted(async () => {\r\n    eventBus.on(\"mobile-product-filter-activate\", async () => {\r\n        console.log(\"handling mobile-product-filter-activate\");\r\n        await toggleFilter(true);\r\n    });\r\n});\r\n</script>\r\n\r\n<template>\r\n    <div v-show=\"model.isVisibleFilter\" class=\"mobile-product-filter\">\r\n        <div class=\"mobile-product-filter-container\">\r\n            <div class=\"mobile-product-filter-header\">\r\n                <div class=\"mobile-product-filter-header-item header-item--outer text-start\">\r\n                    <i v-show=\"model.isVisibleFilterGroups\" class=\"fa fa-remove\" @click=\"toggleFilter(false)\"></i>\r\n                    <i v-show=\"!model.isVisibleFilterGroups\" class=\"fa fa-chevron-left\"\r\n                       @click=\"toggleGroupItems(false, null)\"></i>\r\n                </div>\r\n                <div class=\"mobile-product-filter-header-item mobile-product-filter-header-item--middle text-center\">\r\n                    {{ model.headerText }}\r\n                </div>\r\n                <div\r\n                    class=\"mobile-product-filter-header-item mobile-product-filter-header-item--outer mobile-product-filter-header-item--text-small text-end\">\r\n                    <i v-show=\"isActiveFilter && model.isVisibleFilterGroups\" class=\"fa fa-filter-circle-xmark\" @click=\"clearFilter()\"></i>\r\n                    <i v-show=\"model.isActiveFilterGroup && !model.isVisibleFilterGroups\" class=\"fa fa-filter-circle-xmark\" @click=\"clearFilterGroup()\"></i>\r\n                </div>\r\n            </div>\r\n            <div class=\"mobile-product-filter-content\">\r\n                <ul v-show=\"model.isVisibleFilterGroups\">\r\n                    <li v-for=\"(filterGroup, index) in model.filterGroupList\" :key=\"filterGroup.id\"\r\n                        @click=\"toggleGroupItems(true, filterGroup)\">\r\n                        <div class=\"mobile-product-filter-group\">\r\n                            <div>\r\n                                <b>{{ filterGroup.name }}</b><br/>\r\n                                <small>{{ selectedFilterItems.at(index) }}</small>\r\n                            </div>\r\n\r\n                            <div>\r\n                                <i class=\"fa fa-chevron-right\"></i>\r\n                            </div>\r\n                        </div>\r\n                    </li>\r\n                </ul>\r\n                <ul v-for=\"filterGroup in model.filterGroupList\" v-show=\"filterGroup.isVisibleFilterItems\"\r\n                    :key=\"filterGroup.id\">\r\n                    <li v-for=\"filterItem in filterGroup.filterItemList\" :key=\"filterItem.id\">\r\n                        <div class=\"form-check\">\r\n                            <input v-model=\"filterItem.isSelected\" class=\"form-check-input\" type=\"checkbox\"\r\n                                   @change=\"changeSelectedFilters(filterGroup.id, filterItem.isSelected)\">\r\n                            <label class=\"form-check-label\">{{ filterItem.name }}</label>\r\n                        </div>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div class=\"mobile-product-filter-footer text-center\">\r\n                <a :href=\"filterLinkUrl\" @click=\"model.isLoading = true\" class=\"btn btn-primary\" :class=\"{ disabled: model.isLoading || isFetchingProductCount }\">\r\n                    <span v-show=\"!(model.isLoading || isFetchingProductCount)\">{{ filterLinkText }}</span>\r\n                    <i v-show=\"(model.isLoading || isFetchingProductCount)\" aria-hidden=\"true\" class=\"fa fa-spinner fa-spin\"></i>\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mobile-product-filter-frame {\r\n    color: #fff;\r\n    display: flex;\r\n    align-items: center;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    position: fixed;\r\n    width: 100%;\r\n    height: var(--frame-height);\r\n}\r\n\r\n.mobile-product-filter {\r\n    --frame-height: 7dvh;\r\n    --content-height: 86dvh;\r\n  \r\n    background-color: #fff;\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 9999;\r\n\r\n    a {\r\n        color: #fff;\r\n        display: block;\r\n        padding: 5px;\r\n        width: 100%;\r\n\r\n        &:hover {\r\n            text-decoration: none;\r\n        }\r\n    }\r\n\r\n    .mobile-product-filter-container {\r\n        position: relative;\r\n        padding: 0;\r\n\r\n        .fa {\r\n            cursor: pointer;\r\n        }\r\n\r\n        .mobile-product-filter-header {\r\n            @extend .mobile-product-filter-frame;\r\n            background-color: var(--bs-primary);\r\n            border-bottom: 1px solid var(--bs-primary);\r\n            justify-content: space-between;\r\n            top: 0;\r\n\r\n            .mobile-product-filter-header-item {\r\n                padding: 15px;\r\n                text-transform: capitalize;\r\n\r\n                &--outer {\r\n                    flex-basis: 15%;\r\n                }\r\n\r\n                &--middle {\r\n                    flex-basis: 70%;\r\n                }\r\n\r\n                &--text-small {\r\n                    font-size: 14px;\r\n                    font-weight: 400;\r\n                }\r\n            }\r\n        }\r\n\r\n        .mobile-product-filter-footer {\r\n            @extend .mobile-product-filter-frame;\r\n            background-color: var(--bs-white);\r\n            justify-content: center;\r\n            bottom: 0;\r\n            padding: 0 10px;\r\n        }\r\n\r\n        .mobile-product-filter-content {\r\n            overflow-y: auto;\r\n            position: relative;\r\n            top: var(--frame-height);\r\n            height: var(--content-height);\r\n\r\n            ul {\r\n                margin: 0;\r\n                padding: 0;\r\n\r\n                li {\r\n                    border-bottom: 1px solid #eee;\r\n                    cursor: pointer;\r\n                    display: block;\r\n                    font-size: 14px;\r\n                    padding: 15px;\r\n                    text-transform: capitalize;\r\n\r\n                    small {\r\n                        color: var(--bs-primary);\r\n                        font-size: 12px;\r\n                    }\r\n\r\n                    .fa {\r\n                        color: var(--bs-primary);\r\n                        font-size: 12px;\r\n                    }\r\n\r\n                    .mobile-product-filter-group {\r\n                        display: flex;\r\n                        justify-content: space-between;\r\n                        align-items: center;\r\n                    }\r\n\r\n                    .form-check {\r\n                        margin-bottom: 0;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n</style>"],"names":["model","reactive","Multilang","productCountUrl","computed","separator","props","productCount","isFetchingProductCount","fetchProductCount","useFetch","isActiveFilter","selectedFilterItems","filterGroup","filterItem","filterLinkUrl","requestUrl","filterLinkText","toggleFilter","show","headerElement","footerElement","productFiltersElement","feedbackElement","newsletterWrapperElement","productOverviewCardElements","toggleHtmlElement","productOverviewCardElementList","productOverviewCardElement","getResponse","axios","el","displayStyle","toggleGroupItems","setActiveFilterGroup","changeSelectedFilters","filterGroupId","trySelected","filterItemIdList","_a","_b","getVisibleFilterGroup","clearFilter","clearFilterGroup","onMounted","eventBus"],"mappings":"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"}