{"version":3,"file":"news-overview.page.js","sources":["../../../../KNHS.Website.Frontend/script/vue/apps/news-overview/config/index.ts","../../../../KNHS.Website.Frontend/script/vue/apps/news-overview/components/news-item-small.component.vue","../../../../KNHS.Website.Frontend/script/vue/apps/news-overview/components/news-item-large.component.vue","../../../../KNHS.Website.Frontend/script/vue/apps/news-overview/store/news-overview.store.ts","../../../../KNHS.Website.Frontend/script/vue/apps/news-overview/components/load-more.component.vue","../../../../KNHS.Website.Frontend/script/vue/apps/news-overview/NewsOverview.vue","../../../../KNHS.Website.Frontend/script/vue/apps/news-overview/index.ts","../../../../KNHS.Website.Frontend/script/news-overview.page.ts"],"sourcesContent":["const NAME_SPACE = 'NewsOverviewPage';\n\nexport { NAME_SPACE };\n","<template>\n    <a :href=\"item.url\" class=\"news-item news-item--small\" :title=\"item.title\">\n        <figure class=\"news-item__figure\">\n            <picture>\n                <source\n                    media=\"(min-width: 1440px)\"\n                    :srcset=\"`${item.imageUrl}?height=904&format=webp&quality=80&mq-min=1024`\"\n                    type=\"image/webp\" />\n                <source\n                    media=\"(min-width: 1024px)\"\n                    :srcset=\"`${item.imageUrl}?height=628&format=webp&quality=80&mq-min=1024`\"\n                    type=\"image/webp\" />\n                <source\n                    media=\"(max-width: 390px)\"\n                    :srcset=\"`${item.imageUrl}?height=140&format=webp&quality=80&mq-max=390`\"\n                    type=\"image/webp\" />\n                <img loading=\"lazy\" :src=\"item.imageUrl\" :alt=\"item.title\" />\n            </picture>\n        </figure>\n\n        <div class=\"news-item__body\">\n            <div class=\"sub-header\">{{ formattedDate }}</div>\n            <header class=\"title\">{{ item.title }}</header>\n        </div>\n    </a>\n</template>\n\n<script setup lang=\"ts\">\nimport { INewsArticle } from '../model/news-overview.model';\nimport { useDateFormatter } from '../../../composables/useDateFormatter';\n\nconst props = defineProps<{\n    item: INewsArticle;\n}>();\n\nconst formattedDate = useDateFormatter(props.item.publishDate);\n</script>\n","<template>\n    <a :href=\"item.url\" class=\"news-item news-item--large\" :title=\"item.title\">\n        <figure class=\"news-item__figure\">\n            <picture>\n                <source\n                    media=\"(min-width: 1024px)\"\n                    :srcset=\"`${item.imageUrl}?height=560&format=webp&quality=80`\"\n                    type=\"image/webp\" />\n                <source\n                    media=\"(max-width: 390px)\"\n                    :srcset=\"`${item.imageUrl}?height=253&format=webp&quality=80`\"\n                    type=\"image/webp\" />\n                <img loading=\"lazy\" :src=\"item.imageUrl\" :alt=\"item.title\" />\n            </picture>\n        </figure>\n\n        <div class=\"news-item__body\">\n            <div class=\"sub-header\">{{ formattedDate }}</div>\n            <header class=\"title\">{{ item.title }}</header>\n        </div>\n    </a>\n</template>\n\n<script setup lang=\"ts\">\nimport { INewsArticle } from '../model/news-overview.model';\nimport { useDateFormatter } from '../../../composables/useDateFormatter';\n\nconst props = defineProps<{\n    item: INewsArticle;\n}>();\n\nconst formattedDate = useDateFormatter(props.item.publishDate);\n</script>\n","import { defineStore } from 'pinia';\nimport { useFetch } from '../../../composables/useFetch';\nimport { INewsArticle } from '../model/news-overview.model';\n\ninterface INewsOverviewState {\n    articles: INewsArticle[];\n    page: number;\n    pageSize: number;\n    totalPages: number;\n    totalResults: number;\n    error: string | null | unknown;\n    loading: boolean;\n}\n\nexport const useNewsOverviewStore = defineStore('newsOverviewStore', {\n    state: (): INewsOverviewState => {\n        return {\n            articles: [],\n            error: null,\n            loading: false,\n            page: 0,\n            pageSize: 0,\n            totalPages: 0,\n            totalResults: 0,\n        };\n    },\n    getters: {\n        getArticles(state) {\n            return state.articles;\n        },\n    },\n    actions: {\n        async getData(url: string) {\n            try {\n                const { data, error, isLoading } = await useFetch(url);\n\n                if (data.value) {\n                    this.articles = data.value.items;\n                    this.page = data.value.page;\n                    this.pageSize = data.value.pageSize;\n                    this.totalPages = data.value.totalPages;\n                    this.totalResults = data.value.totalResults;\n                }\n\n                this.error = error.value;\n                this.loading = isLoading.value;\n\n                console.log('Articles 📃', this.articles);\n            } catch (error) {\n                console.log('[ERROR]:', error);\n            }\n        },\n    },\n});\n","<template>\n    <div class=\"load-more\">\n        <button v-if=\"mq\" @click=\"loadMore\" type=\"button\" class=\"btn-default btn-default--1\">\n            Laad meer\n        </button>\n        <button v-else @click=\"loadMore\" type=\"button\" class=\"btn-default btn-default--3\">\n            Laad meer\n        </button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useMediaQuery } from '../../../composables/useMediaQuery';\nimport { useNewsOverviewStore } from '../store/news-overview.store';\nimport { ref } from 'vue';\nimport { useFetch } from '../../../composables/useFetch';\n\nconst mq = useMediaQuery('(min-width: 1024px)');\n\nconst store = useNewsOverviewStore();\n\nlet count = ref(0);\nconst loadMore = async () => {\n    if (count.value < store.totalPages) {\n        count.value++;\n        const { data } = await useFetch(`/umbraco/api/newsapi/loadmore?page=${count.value}`);\n        if (data.value) {\n            store.articles?.push(...data.value);\n        }\n    }\n};\n</script>\n","<template>\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-md-3\"><!-- TODO: filters --></div>\n            <div class=\"col-md-8\">\n                <div class=\"news-overview-list\">\n                    <news-list\n                        v-for=\"(article, index) in store.getArticles\"\n                        :key=\"article.id\"\n                        :item=\"article\"\n                        :index=\"index + 1\"></news-list>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\" v-if=\"store.articles.length < store.totalResults\">\n            <div class=\"col-md-8 offset-md-3\">\n                <load-more></load-more>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport newsList from './components/news-list.component.vue';\nimport loadMore from './components/load-more.component.vue';\nimport { useNewsOverviewStore } from './store/news-overview.store';\nimport { onBeforeMount } from 'vue';\n\nconst store = useNewsOverviewStore();\n\nonBeforeMount(() => {\n    store.getData('/umbraco/api/NewsApi/OnLoad');\n});\n</script>\n","import { NAME_SPACE } from './config';\nimport NewsOverview from './NewsOverview.vue';\n\nexport default {\n    name: NAME_SPACE,\n    components: {\n        'news-overview': NewsOverview,\n    },\n};\n","// import { createApp } from 'vue';\n// import { createPinia } from 'pinia';\n\nimport { createApp, pinia } from './vue';\n\nimport NewsOverview from './vue/apps/news-overview';\n\n//const pinia = createPinia();\n\nconst articleOverviewMountingContainer = document.getElementById('js-news-overview');\n\nif (articleOverviewMountingContainer) {\n    createApp(NewsOverview).use(pinia).mount(articleOverviewMountingContainer);\n}\n"],"names":["NAME_SPACE","formattedDate","useDateFormatter","useNewsOverviewStore","defineStore","state","url","data","error","isLoading","useFetch","mq","useMediaQuery","store","count","ref","loadMore","_a","onBeforeMount","NewsOverview","articleOverviewMountingContainer","createApp","pinia"],"mappings":"oRAAA,MAAMA,EAAa,mQCmCnB,MAAMC,EAAgBC,IAAuB,KAAK,WAAW,y6BCJ7D,MAAMD,EAAgBC,IAAuB,KAAK,WAAW,w1BCjBhDC,EAAuBC,EAAY,oBAAqB,CACjE,MAAO,KACI,CACH,SAAU,CAAC,EACX,MAAO,KACP,QAAS,GACT,KAAM,EACN,SAAU,EACV,WAAY,EACZ,aAAc,CAAA,GAGtB,QAAS,CACL,YAAYC,EAAO,CACf,OAAOA,EAAM,QACjB,CACJ,EACA,QAAS,CACL,MAAM,QAAQC,EAAa,CACnB,GAAA,CACA,KAAM,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,CAAc,EAAA,MAAMC,EAASJ,CAAG,EAEjDC,EAAK,QACA,KAAA,SAAWA,EAAK,MAAM,MACtB,KAAA,KAAOA,EAAK,MAAM,KAClB,KAAA,SAAWA,EAAK,MAAM,SACtB,KAAA,WAAaA,EAAK,MAAM,WACxB,KAAA,aAAeA,EAAK,MAAM,cAGnC,KAAK,MAAQC,EAAM,MACnB,KAAK,QAAUC,EAAU,MAEjB,QAAA,IAAI,qBAAe,KAAK,QAAQ,QACnCD,GACG,QAAA,IAAI,WAAYA,CAAK,CACjC,CACJ,CACJ,CACJ,CAAC,mECpCK,MAAAG,EAAKC,EAAc,qBAAqB,EAExCC,EAAQV,IAEV,IAAAW,EAAQC,EAAI,CAAC,EACjB,MAAMC,EAAW,SAAY,OACrB,GAAAF,EAAM,MAAQD,EAAM,WAAY,CAC1BC,EAAA,QACN,KAAM,CAAE,KAAAP,CAAK,EAAI,MAAMG,EAAS,sCAAsCI,EAAM,OAAO,EAC/EP,EAAK,SACLU,EAAAJ,EAAM,WAAN,MAAAI,EAAgB,KAAK,GAAGV,EAAK,OAErC,CAAA,idCDJ,MAAMM,EAAQV,IAEd,OAAAe,EAAc,IAAM,CAChBL,EAAM,QAAQ,6BAA6B,CAAA,CAC9C,kRC7BcM,GAAA,CACX,KAAMnB,EACN,WAAY,CACR,gBAAiBmB,EACrB,CACJ,ECCMC,EAAmC,SAAS,eAAe,kBAAkB,EAE/EA,GACAC,EAAUF,EAAY,EAAE,IAAIG,CAAK,EAAE,MAAMF,CAAgC"}