{"version":3,"file":"SearchPage.vue.bundle.js","sources":["../../../Frontend/src/vue/views/SearchPage/components/SearchBar.vue","../../../Frontend/src/vue/repositories/search.repository.ts","../../../Frontend/src/vue/services/search.service.ts","../../../Frontend/src/vue/views/SearchPage/SearchOverview.vue","../../../Frontend/src/vue/views/SearchPage/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\r\n    import { reactive, watch, onMounted } from \"vue\";\r\n\r\n    export interface Props {\r\n        query: string\r\n        placeholder?: string\r\n        buttonText?: string\r\n    }\r\n\r\n    const props = withDefaults(defineProps<Props>(), {\r\n        query: \"\",\r\n        placeholder: \"Vul een zoekwoord in...\",\r\n        buttonText: \"Zoek\",\r\n    })\r\n\r\n    const emit = defineEmits<{\r\n        (e: \"execute-search\", value: string): void\r\n        (e: \"clear-query\"): void\r\n    }>()\r\n\r\n    const state = reactive({\r\n        query: \"\",\r\n    })\r\n\r\n    watch(\r\n        () => props.query,\r\n        (value) => {\r\n            state.query = value\r\n        }\r\n    )\r\n\r\n    onMounted(() => {\r\n        state.query = props.query\r\n    })\r\n</script>\r\n\r\n<template>\r\n    <div class=\"d-flex\">\r\n        <input v-model=\"state.query\"\r\n               type=\"text\"\r\n               class=\"form-control mr-1\"\r\n               :placeholder=\"placeholder\"\r\n               autocomplete=\"off\" />\r\n        <button class=\"btn btn-secondary\"\r\n                :title=\"props.buttonText\"\r\n                :aria-label=\"props.buttonText\"\r\n                @click=\"$emit('execute-search', state.query)\">\r\n            <span>{{ buttonText }}</span>\r\n        </button>\r\n    </div>\r\n</template>","import { umbracoApi } from \"~/utils/axios.util\"\r\n\r\nexport interface ISearchResponse {\r\n    Total: number\r\n    Items: ISearchItem[]\r\n}\r\n\r\ninterface ILink {\r\n    Url: string\r\n    Target: string\r\n    Name: string\r\n    Rel: string | null\r\n}\r\n\r\nexport interface ISearchItem {\r\n    Id: number\r\n    Title: string\r\n    Intro: string\r\n    Link: ILink\r\n    Tags: string[] | null\r\n    Date: Date | null\r\n    Url: string\r\n}\r\n\r\nexport interface ISearchParams {\r\n    query: string\r\n    skip: number\r\n    take: number\r\n    pageId: string\r\n    culture: string\r\n}\r\n\r\nexport const SearchRepository = {\r\n    Get: (params: ISearchParams, url: string = \"/search/get\") =>\r\n        umbracoApi.get<ISearchResponse>(url, {\r\n            params,\r\n        }),\r\n}\r\n","import { SearchRepository, ISearchParams } from \"@/repositories/search.repository\"\r\n\r\nexport const SearchService = {\r\n    Get: (params: ISearchParams, url: string = \"/search/get\") => SearchRepository.Get(params, url),\r\n}","<script setup lang=\"ts\">\r\nimport { ISearchItem, ISearchResponse } from \"@/repositories/search.repository\"\r\nimport { ISearchCmsData } from \"@/view-models/search.model\"\r\nimport { computed, reactive, onMounted } from \"vue\";\r\nimport { useUrlSearchParams } from \"@vueuse/core\"\r\nimport CmsDataProvider, { CMS_DATA_ID } from \"@/providers/cms.provider\";\r\nimport SearchBar from \"./components/SearchBar.vue\"\r\nimport SearchItem from \"./components/SearchItem.vue\"\r\nimport LoadMoreButton from \"./components/LoadMoreButton.vue\"\r\nimport { SearchService } from \"@/services/search.service\"\r\n\r\nconst state = reactive({\r\n    results: [] as ISearchItem[],\r\n    total: 0,\r\n    query: \"\",\r\n    currentPage: 1,\r\n    perPage: 8,\r\n    searched: false,\r\n    loading: false,\r\n})\r\n\r\nconst params = useUrlSearchParams()\r\nconst cmsData = CmsDataProvider.get<ISearchCmsData>(CMS_DATA_ID.SEARCH)\r\n\r\nconst noResultsTitleReplaced = computed(() => {\r\n    return cmsData.noResultsTitle.replaceAll(\"{{query}}\", state.query)\r\n})\r\n\r\nconst resultCountTextReplaced = computed(() => {\r\n    return cmsData.resultCountText.replaceAll(\"{{count}}\", state.total.toString()).replaceAll(\"{{query}}\", state.query)\r\n})\r\n\r\nconst clearQuery = () => {\r\n    state.results = []\r\n    state.total = 0\r\n    state.query = \"\"\r\n    state.currentPage = 1\r\n    state.searched = false\r\n\r\n    params.page = null\r\n    params.query = null\r\n}\r\n\r\nconst generateUrl = () => {\r\n    if (state.query) {\r\n        params.query = state.query\r\n    }\r\n}\r\n\r\nconst getSearchResults = async (value: string): Promise<ISearchResponse> => {\r\n\r\n    const response = await SearchService.Get({\r\n        query: value,\r\n        skip: state.perPage * (state.currentPage - 1),\r\n        take: state.perPage,\r\n        pageId: cmsData.context,\r\n        culture: cmsData.culture,\r\n    })\r\n\r\n    return response.data\r\n}\r\n\r\nconst search = async (value: string) => {\r\n    state.query = value\r\n    generateUrl()\r\n\r\n    state.currentPage = 1\r\n    state.searched = false\r\n\r\n    const response = await getSearchResults(value)\r\n    state.results = response.Items\r\n    state.total = response.Total\r\n    state.searched = true;\r\n\r\n}\r\n\r\nconst searchMore = async (value: string) => {\r\n    state.currentPage++;\r\n    state.query = value\r\n\r\n    generateUrl()\r\n\r\n    const response = await getSearchResults(value)\r\n    state.results.push(...response.Items)\r\n    state.total = response.Total\r\n    state.searched = true;\r\n}\r\n\r\nonMounted(() => {\r\n\r\n    if (params.query) {\r\n        state.query = String(params.query)\r\n\r\n        search(state.query)\r\n    }\r\n})\r\n</script>\r\n\r\n<template>\r\n    <form v-on:submit.prevent>\r\n        <header class=\"sport-in-header pt-4 pb-10\">\r\n            <div class=\"container\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-12 col-md-8 offset-md-2\">\r\n                        <h1 class=\"h2 header-title mb-4 text-center ml-0\">{{ cmsData.pageTitle }}</h1>\r\n                        <div v-if=\"cmsData.content\" class=\"mb-4 header-intro\" v-html=\"cmsData.content\"></div>\r\n                        <search-bar :button-text=\"cmsData.searchButtonText\" :query=\"state.query\"\r\n                            :placeholder=\"cmsData.searchbarPlaceholder\" @execute-search=\"search($event)\"\r\n                            @clear-query=\"clearQuery\" />\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </header>\r\n    </form>\r\n\r\n    <div v-if=\"state.searched\" class=\"container-lg mt-n4 bg-white p-4 artikelen-tab\">\r\n        <div class=\"row\">\r\n            <div>\r\n                <div v-if=\"state.query.length > 0 && state.total === 0\">\r\n                    <h5 v-text=\"noResultsTitleReplaced\" />\r\n                    <p v-text=\"cmsData.noResultsText\" />\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12\" v-if=\"state.results.length\">\r\n                <div>\r\n                    <p v-if=\"state.query.length > 0\" class=\"text-center\" v-text=\"resultCountTextReplaced\" />\r\n                </div>\r\n                <search-item v-for=\"item in state.results\" :key=\"item.Id\" :cms-data=\"cmsData\" :item=\"item\" />\r\n                <div class=\"d-flex justify-content-center\">\r\n                    <load-more-button :button-text=\"cmsData.showMoreText\" :aria-label=\"cmsData.showMoreText\"\r\n                        v-if=\"state.total > (state.currentPage * state.perPage)\" @load-more=\"searchMore(state.query)\" />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>","import { createApp } from \"vue\"\r\nimport Search from \"./SearchOverview.vue\"\r\n\r\nconst app = createApp(Search)\r\napp.mount(\"#search\")"],"names":["props","__props","state","reactive","watch","value","onMounted","SearchRepository","params","url","umbracoApi","SearchService","useUrlSearchParams","cmsData","CmsDataProvider","CMS_DATA_ID","noResultsTitleReplaced","computed","resultCountTextReplaced","clearQuery","generateUrl","getSearchResults","search","response","searchMore","app","createApp","Search"],"mappings":"gkBASI,MAAMA,EAAQC,EAWRC,EAAQC,EAAS,CACnB,MAAO,EAAA,CACV,EAED,OAAAC,EACI,IAAMJ,EAAM,MACXK,GAAU,CACPH,EAAM,MAAQG,CAClB,CAAA,EAGJC,EAAU,IAAM,CACZJ,EAAM,MAAQF,EAAM,KAAA,CACvB,46CCDQO,EAAmB,CAC5B,IAAK,CAACC,EAAuBC,EAAc,gBACvCC,EAAW,IAAqBD,EAAK,CACjC,OAAAD,CAAA,CACH,CACT,ECnCaG,EAAgB,CACzB,IAAK,CAACH,EAAuBC,EAAc,gBAAkBF,EAAiB,IAAIC,EAAQC,CAAG,CACjG,icCOA,MAAMP,EAAQC,EAAS,CACnB,QAAS,CAAC,EACV,MAAO,EACP,MAAO,GACP,YAAa,EACb,QAAS,EACT,SAAU,GACV,QAAS,EAAA,CACZ,EAEKK,EAASI,IACTC,EAAUC,EAAgB,IAAoBC,EAAY,MAAM,EAEhEC,EAAyBC,EAAS,IAC7BJ,EAAQ,eAAe,WAAW,YAAaX,EAAM,KAAK,CACpE,EAEKgB,EAA0BD,EAAS,IAC9BJ,EAAQ,gBAAgB,WAAW,YAAaX,EAAM,MAAM,SAAS,CAAC,EAAE,WAAW,YAAaA,EAAM,KAAK,CACrH,EAEKiB,EAAa,IAAM,CACrBjB,EAAM,QAAU,GAChBA,EAAM,MAAQ,EACdA,EAAM,MAAQ,GACdA,EAAM,YAAc,EACpBA,EAAM,SAAW,GAEjBM,EAAO,KAAO,KACdA,EAAO,MAAQ,IAAA,EAGbY,EAAc,IAAM,CAClBlB,EAAM,QACNM,EAAO,MAAQN,EAAM,MACzB,EAGEmB,EAAmB,MAAOhB,IAEX,MAAMM,EAAc,IAAI,CACrC,MAAON,EACP,KAAMH,EAAM,SAAWA,EAAM,YAAc,GAC3C,KAAMA,EAAM,QACZ,OAAQW,EAAQ,QAChB,QAASA,EAAQ,OAAA,CACpB,GAEe,KAGdS,EAAS,MAAOjB,GAAkB,CACpCH,EAAM,MAAQG,EACFe,IAEZlB,EAAM,YAAc,EACpBA,EAAM,SAAW,GAEX,MAAAqB,EAAW,MAAMF,EAAiBhB,CAAK,EAC7CH,EAAM,QAAUqB,EAAS,MACzBrB,EAAM,MAAQqB,EAAS,MACvBrB,EAAM,SAAW,EAAA,EAIfsB,EAAa,MAAOnB,GAAkB,CAClCH,EAAA,cACNA,EAAM,MAAQG,EAEFe,IAEN,MAAAG,EAAW,MAAMF,EAAiBhB,CAAK,EAC7CH,EAAM,QAAQ,KAAK,GAAGqB,EAAS,KAAK,EACpCrB,EAAM,MAAQqB,EAAS,MACvBrB,EAAM,SAAW,EAAA,EAGrB,OAAAI,EAAU,IAAM,CAERE,EAAO,QACDN,EAAA,MAAQ,OAAOM,EAAO,KAAK,EAEjCc,EAAOpB,EAAM,KAAK,EACtB,CACH,oqCC5FKuB,GAAMC,EAAUC,EAAM,EAC5BF,GAAI,MAAM,SAAS"}