{"version":3,"file":"broadcast-portal-1310472c.js","sources":["../../../Client/src/modules/core/utilities/share.ts","../../../Client/src/modules/core/components/share-icons.vue","../../../Client/src/modules/core/components/share-icons.vue","../../../Client/src/modules/core/components/placeholders/list-placeholder.vue","../../../Client/src/modules/core/components/placeholders/list-placeholder.vue","../../../Client/src/modules/core/components/tabs/injection-keys.ts","../../../Client/src/modules/core/components/tabs/tabs.vue","../../../Client/src/modules/core/components/tabs/tab-pane.vue","../../../Client/src/modules/core/components/finder/finder.vue","../../../Client/src/modules/broadcast-portal/store/services.ts","../../../Client/src/modules/broadcast-portal/store/members.ts","../../../Client/src/modules/broadcast-portal/store/bcf.ts","../../../Client/src/modules/broadcast-portal/store/index.ts","../../../Client/src/modules/broadcast-portal/components/services/services-finder.vue","../../../Client/src/modules/broadcast-portal/components/services/find-services-app.vue","../../../Client/src/modules/broadcast-portal/components/services/service-details-app.vue","../../../Client/src/modules/broadcast-portal/components/members/find-member-list-item.vue","../../../Client/src/modules/broadcast-portal/components/members/find-member-portfolio-card.vue","../../../Client/src/modules/broadcast-portal/components/members/find-member-individual-service-card.vue","../../../Client/src/modules/broadcast-portal/components/members/members-finder.vue","../../../Client/src/modules/broadcast-portal/components/members/find-members-app.vue","../../../Client/src/modules/broadcast-portal/components/members/find-member-show-portfolio-video.vue","../../../Client/src/modules/broadcast-portal/store/advertisements.ts","../../../Client/src/modules/broadcast-portal/components/advertisement/advertisement-finder.vue","../../../Client/src/modules/broadcast-portal/components/advertisement/find-advertisement-app.vue","../../../Client/src/modules/broadcast-portal/components/advertisement/latest-advertisement-carousel.vue","../../../Client/src/modules/broadcast-portal/components/advertisement/advertisement-carousel-app.vue","../../../Client/src/modules/broadcast-portal/components/advertisement/advertisement-badge.vue","../../../Client/src/modules/broadcast-portal/components/advertisement/advertisement-app.vue","../../../Client/src/modules/broadcast-portal/components/members/member-details-app.vue","../../../Client/src/modules/broadcast-portal/components/bcf/bcf-listing.vue","../../../Client/src/modules/broadcast-portal/components/bcf/bcf-listing-app.vue","../../../Client/src/modules/broadcast-portal/components/bcf/bcf-submission-detail-modal.vue","../../../Client/src/modules/broadcast-portal/components/bcf-full-name-categories.ts","../../../Client/src/modules/broadcast-portal/broadcast-portal.ts"],"sourcesContent":["export function getFacebookSharerUrl (url: string) {\r\n    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(url)}`\r\n}\r\n\r\nexport function getTwitterShareUrl (url: string, text?: string) {\r\n    const shareUrl = new URL(`https://twitter.com/intent/tweet`);\r\n    shareUrl.searchParams.set('url', url);\r\n    if (text) {\r\n        shareUrl.searchParams.set('text', text);\r\n    }\r\n    return shareUrl.toString()\r\n}\r\n\r\nexport function getTelegramShareUrl (url: string, text?: string) {\r\n    const shareUrl = new URL('https://telegram.me/share/url');\r\n    shareUrl.searchParams.set('url', url);\r\n    if (text) {\r\n        shareUrl.searchParams.set('text', text);\r\n    }\r\n    return shareUrl.toString()\r\n}\r\n\r\nexport function getWhatsAppShareUrl (text: string) {\r\n    const shareUrl = new URL('https://wa.me');\r\n    shareUrl.searchParams.set('text', text);\r\n    return shareUrl.toString()\r\n}","<template>\r\n    <div class=\"share-icons\" :class=\"{ [theme]: true }\">\r\n        <button @click.prevent=\"handleFacebookShare\" \r\n            class=\"social-media-icon shadow\">\r\n            <Icon symbol=\"facebook\"></Icon>\r\n        </button>\r\n        <button @click.prevent=\"handleTwitterShare\"\r\n            class=\"social-media-icon shadow\">\r\n            <Icon symbol=\"twitter\"></Icon>\r\n        </button>\r\n        <button @click.prevent=\"handleTelegramShare\" class=\"social-media-icon shadow\">\r\n            <Icon symbol=\"telegram\"></Icon>\r\n        </button>\r\n        <a :href=\"whatsAppUrl\" target=\"_blank\" class=\"social-media-icon shadow\">\r\n            <Icon symbol=\"whatsapp\"></Icon>\r\n        </a>\r\n        <a v-if=\"isNativeShareSupported\" \r\n            class=\"social-media-icon shadow\"\r\n            @click.prevent=\"handleNativeShare\">\r\n            <Icon symbol=\"share-2\"></Icon>\r\n        </a>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed } from \"vue\";\r\nimport { Icon } from '@/modules/core/components';\r\nimport { UseShareOptions, useShare } from \"@vueuse/core\";\r\nimport { openCenteredPopup, getFacebookSharerUrl, getTelegramShareUrl, getTwitterShareUrl, getWhatsAppShareUrl } from \"@/modules/core/utilities\";\r\n\r\nexport default defineComponent({\r\n    components: { Icon },\r\n    props: {\r\n        theme: {\r\n            type: String,\r\n            default: 'on-light'\r\n        },\r\n        shareTitle: String,\r\n        shareUrl: String\r\n    },\r\n    setup (props) {\r\n        const title = props.shareTitle ?? document.title;\r\n        const url = props.shareUrl ?? window.location.href;\r\n\r\n        const { isSupported, share } = useShare({ title, url });\r\n\r\n        const handleNativeShare = () => {\r\n            share()\r\n        }\r\n\r\n        const handleFacebookShare = () => {\r\n            openCenteredPopup(getFacebookSharerUrl(url), 'Share this on Facebook', 450, 600);\r\n        }\r\n\r\n        const handleTwitterShare = () => {\r\n            openCenteredPopup(getTwitterShareUrl(url, title), 'Share this on Twitter', 450, 600);\r\n        }\r\n\r\n        const handleTelegramShare = () => {\r\n            openCenteredPopup(getTelegramShareUrl(url, title), 'Share this on Telegram', 450, 600);\r\n        }\r\n\r\n        const whatsAppUrl = computed(() => getWhatsAppShareUrl(url));\r\n\r\n        return {\r\n            isNativeShareSupported: isSupported,\r\n            handleNativeShare,\r\n            handleFacebookShare,\r\n            handleTwitterShare,\r\n            handleTelegramShare,\r\n            whatsAppUrl\r\n        }\r\n    }\r\n})\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n\r\n.share-icons {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: .25rem;\r\n\r\n    .icon {\r\n        color: $gray-700;\r\n        transition: color .15s ease;\r\n    }\r\n\r\n    .social-media-icon {\r\n        border-radius: 100%;\r\n        width: 2rem;\r\n        height: 2rem;\r\n        background-color: rgba(255,255,255,0.2);\r\n        appearance: none;\r\n        border: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-bottom: 0;\r\n        transition: background-color .15s ease;\r\n        \r\n        &:hover, &:focus {\r\n            background-color:white;\r\n            \r\n            .icon {\r\n                color: $secondary;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.on-dark {\r\n        .icon {\r\n            color: white;\r\n        }\r\n    }\r\n}\r\n</style>","<template>\r\n    <div class=\"share-icons\" :class=\"{ [theme]: true }\">\r\n        <button @click.prevent=\"handleFacebookShare\" \r\n            class=\"social-media-icon shadow\">\r\n            <Icon symbol=\"facebook\"></Icon>\r\n        </button>\r\n        <button @click.prevent=\"handleTwitterShare\"\r\n            class=\"social-media-icon shadow\">\r\n            <Icon symbol=\"twitter\"></Icon>\r\n        </button>\r\n        <button @click.prevent=\"handleTelegramShare\" class=\"social-media-icon shadow\">\r\n            <Icon symbol=\"telegram\"></Icon>\r\n        </button>\r\n        <a :href=\"whatsAppUrl\" target=\"_blank\" class=\"social-media-icon shadow\">\r\n            <Icon symbol=\"whatsapp\"></Icon>\r\n        </a>\r\n        <a v-if=\"isNativeShareSupported\" \r\n            class=\"social-media-icon shadow\"\r\n            @click.prevent=\"handleNativeShare\">\r\n            <Icon symbol=\"share-2\"></Icon>\r\n        </a>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed } from \"vue\";\r\nimport { Icon } from '@/modules/core/components';\r\nimport { UseShareOptions, useShare } from \"@vueuse/core\";\r\nimport { openCenteredPopup, getFacebookSharerUrl, getTelegramShareUrl, getTwitterShareUrl, getWhatsAppShareUrl } from \"@/modules/core/utilities\";\r\n\r\nexport default defineComponent({\r\n    components: { Icon },\r\n    props: {\r\n        theme: {\r\n            type: String,\r\n            default: 'on-light'\r\n        },\r\n        shareTitle: String,\r\n        shareUrl: String\r\n    },\r\n    setup (props) {\r\n        const title = props.shareTitle ?? document.title;\r\n        const url = props.shareUrl ?? window.location.href;\r\n\r\n        const { isSupported, share } = useShare({ title, url });\r\n\r\n        const handleNativeShare = () => {\r\n            share()\r\n        }\r\n\r\n        const handleFacebookShare = () => {\r\n            openCenteredPopup(getFacebookSharerUrl(url), 'Share this on Facebook', 450, 600);\r\n        }\r\n\r\n        const handleTwitterShare = () => {\r\n            openCenteredPopup(getTwitterShareUrl(url, title), 'Share this on Twitter', 450, 600);\r\n        }\r\n\r\n        const handleTelegramShare = () => {\r\n            openCenteredPopup(getTelegramShareUrl(url, title), 'Share this on Telegram', 450, 600);\r\n        }\r\n\r\n        const whatsAppUrl = computed(() => getWhatsAppShareUrl(url));\r\n\r\n        return {\r\n            isNativeShareSupported: isSupported,\r\n            handleNativeShare,\r\n            handleFacebookShare,\r\n            handleTwitterShare,\r\n            handleTelegramShare,\r\n            whatsAppUrl\r\n        }\r\n    }\r\n})\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n\r\n.share-icons {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: .25rem;\r\n\r\n    .icon {\r\n        color: $gray-700;\r\n        transition: color .15s ease;\r\n    }\r\n\r\n    .social-media-icon {\r\n        border-radius: 100%;\r\n        width: 2rem;\r\n        height: 2rem;\r\n        background-color: rgba(255,255,255,0.2);\r\n        appearance: none;\r\n        border: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-bottom: 0;\r\n        transition: background-color .15s ease;\r\n        \r\n        &:hover, &:focus {\r\n            background-color:white;\r\n            \r\n            .icon {\r\n                color: $secondary;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.on-dark {\r\n        .icon {\r\n            color: white;\r\n        }\r\n    }\r\n}\r\n</style>","<template>\r\n    <div class=\"list-placeholder\">\r\n        <div v-for=\"(_, index) in items\" :key=\"index\"\r\n            :class=\"{\r\n                ['placeholder-' + animation]: true,\r\n                'mb-3': items.length > 1\r\n            }\">\r\n            <div class=\"placeholder bg-primary rounded w-100\"\r\n                :class=\"{ \r\n                    ['py-' + size]: true,\r\n                }\"></div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from \"vue\";\r\n\r\nexport default defineComponent({\r\n    props: {\r\n        count: {\r\n            type: Number,\r\n            default: 3\r\n        },\r\n        animation: {\r\n            type: String,\r\n            default: 'glow',\r\n            validator (value: string) {\r\n                return ['glow', 'wave'].includes(value)\r\n            }\r\n        },\r\n        size: {\r\n            type: Number,\r\n            default: 5\r\n        }\r\n    },\r\n    computed: {\r\n        items (): Array<number> {\r\n            return new Array(this.count).fill(0)\r\n        }\r\n    }\r\n})\r\n</script>","<template>\r\n    <div class=\"list-placeholder\">\r\n        <div v-for=\"(_, index) in items\" :key=\"index\"\r\n            :class=\"{\r\n                ['placeholder-' + animation]: true,\r\n                'mb-3': items.length > 1\r\n            }\">\r\n            <div class=\"placeholder bg-primary rounded w-100\"\r\n                :class=\"{ \r\n                    ['py-' + size]: true,\r\n                }\"></div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from \"vue\";\r\n\r\nexport default defineComponent({\r\n    props: {\r\n        count: {\r\n            type: Number,\r\n            default: 3\r\n        },\r\n        animation: {\r\n            type: String,\r\n            default: 'glow',\r\n            validator (value: string) {\r\n                return ['glow', 'wave'].includes(value)\r\n            }\r\n        },\r\n        size: {\r\n            type: Number,\r\n            default: 5\r\n        }\r\n    },\r\n    computed: {\r\n        items (): Array<number> {\r\n            return new Array(this.count).fill(0)\r\n        }\r\n    }\r\n})\r\n</script>","import { MaybeRef } from \"@vueuse/core\";\r\nimport { InjectionKey, Ref } from \"vue\";\r\n\r\nexport interface TabPaneProps {\r\n    id: Ref<string>;\r\n    title: Ref<string>;\r\n}\r\n\r\ninterface TabsSharedContext {\r\n    registerTabPane: (id: MaybeRef<string>, title: MaybeRef<string>) => void;\r\n    unregisterTabPane: (id: string) => void;\r\n}\r\n\r\nexport const key = Symbol() as InjectionKey<TabsSharedContext>;","<template>\r\n    <ul v-bind=\"$attrs\"\r\n        ref=\"navTabsRef\"\r\n        class=\"nav nav-tabs\"\r\n        :class=\"navTabsClassList\"\r\n        role=\"tablist\">\r\n        <li v-for=\"item in navTabs\"\r\n            class=\"nav-item\"\r\n            role=\"presentation\">\r\n            <button\r\n                class=\"nav-link\"\r\n                :class=\"navTabsBtnClass\"\r\n                :id=\"item.id + '-tab'\"\r\n                data-bs-toggle=\"tab\"\r\n                :data-bs-target=\"'#' + item.id\"\r\n                type=\"button\"\r\n                role=\"tab\"\r\n                :aria-controls=\"item.id\"\r\n                aria-selected=\"false\">\r\n                {{ item.title }}\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <div class=\"tab-content\" :class=\"{ 'tab-content-full-height': fullHeight }\">\r\n        <slot></slot>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport Tab from 'bootstrap/js/dist/tab';\r\nimport { onBeforeUnmount, ref, provide, nextTick, reactive, computed, MaybeRef, unref } from 'vue';\r\nimport { key, TabPaneProps } from './injection-keys';\r\n\r\nconst props = defineProps({\r\n    navTabsClass: String,\r\n    navTabsBtnClass: String,\r\n    fullHeight: Boolean,\r\n    defaultActiveIndex: {\r\n        type: Number,\r\n        default: 0\r\n    }\r\n})\r\n\r\nconst navTabsClassList = computed(() => {\r\n    const classList: string[] = [];\r\n    if (props.navTabsClass) {\r\n        classList.push(props.navTabsClass)\r\n    }\r\n    if (props.fullHeight) {\r\n        classList.push('flex-shrink-0');\r\n    }\r\n    return classList;\r\n})\r\n\r\nconst navTabs = ref<Array<TabPaneProps>>([]);\r\n\r\nconst navTabsRef = ref<Element>();\r\nlet tabInstances: Array<Tab> = [];\r\n\r\nconst registerTabPane = (id: MaybeRef<string>, title: MaybeRef<string>) => {\r\n    navTabs.value.push(reactive({ id, title }));\r\n\r\n    nextTick(() => {\r\n        const triggerEl = navTabsRef.value!.querySelector(`[data-bs-target=\"#${unref(id)}\"]`);\r\n        if (!triggerEl) return;\r\n    \r\n        const newTabInstance = new Tab(triggerEl);\r\n        tabInstances.push(newTabInstance);\r\n\r\n        const index = tabInstances.indexOf(newTabInstance);\r\n    \r\n        if (index === 0) newTabInstance.show();\r\n    })\r\n}\r\n\r\nconst unregisterTabPane = (id: string) => {\r\n    const navTabIdx = navTabs.value.findIndex(x => x.id === id);\r\n    if (navTabIdx === -1) return;\r\n\r\n    navTabs.value.splice(navTabIdx, 1);\r\n\r\n    const existingTabInstance = tabInstances.splice(navTabIdx, 1);\r\n    existingTabInstance.forEach(x => x.dispose())\r\n}\r\n\r\nonBeforeUnmount(() => {\r\n    tabInstances.forEach(x => x.dispose())\r\n})\r\n\r\nprovide(key, { registerTabPane, unregisterTabPane })\r\n\r\n</script>\r\n","<template>\r\n    <div class=\"tab-pane\"\r\n        :id=\"id\"\r\n        role=\"tabpanel\"\r\n        :aria-labelledby=\"id + '-tab'\">\r\n        <slot></slot>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { inject, onMounted, onUnmounted, toRefs } from 'vue';\r\nimport { key } from './injection-keys';\r\n\r\nconst props = defineProps({\r\n    id: { type: String, required: true },\r\n    title: { type: String, required: true }\r\n})\r\n\r\nconst { id, title } = toRefs(props);\r\n\r\nconst tabsContext = inject(key);\r\n\r\nonMounted(() => {\r\n    if (tabsContext) {\r\n        tabsContext.registerTabPane(id, title)\r\n    }\r\n})\r\n\r\nonUnmounted(() => {\r\n    tabsContext?.unregisterTabPane(id.value);\r\n})\r\n</script>","<template>\r\n    <div class=\"finder\" :class=\"{ 'placeholder-glow': !isBusy }\">\r\n        <div v-if=\"itemLength !== 0\" class=\"container mb-4 d-lg-flex justify-content-between align-items-center\">\r\n            <p class=\"text-muted heading-m m-lg-0\">\r\n                <p class=\"subheading text-muted mb-0\">{{ paginationStatusLabel }}</p>\r\n                <slot name=\"filter-value\"></slot>\r\n            </p>\r\n            \r\n            <slot name=\"sort-filter\"></slot>\r\n        </div>\r\n        <div v-if=\"itemLength !== 0\" class=\"search-results container\">\r\n            <div class=\"search-results-list-wrapper\">\r\n                <ListPlaceholder v-if=\"isBusy\" :count=\"5\"></ListPlaceholder>\r\n                <ul v-if=\"!isBusy\" class=\"search-results-list list-unstyled ps-0 mb-4\">\r\n                    <li v-for=\"item in props.paginatedResults?.items\">\r\n                        <slot name=\"list-item\" :item=\"item\"></slot>\r\n                    </li>\r\n                </ul>\r\n                <div class=\"d-flex justify-content-sm-middle\">\r\n                    <slot name=\"pagination\"></slot>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"finder-viewer border rounded-3 mb-lg-5\">\r\n                <div class=\"finder-viewer-body\">\r\n                    <slot v-if=\"itemLength !== 0\" name=\"details\"></slot>\r\n                </div>\r\n                <div v-if=\"$slots['details-footer']\" class=\"finder-viewer-footer\">\r\n                    <slot name=\"details-footer\"></slot>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div v-if=\"itemLength === 0 && !isBusy\" class=\"container mb-5 general-empty-state\">\r\n        <h4 class=\"display-l text-gray-700 mb-5\">\r\n            The search <span class=\"text-secondary\"> {{ searchTerm }}</span> did not match...\r\n        </h4>\r\n\r\n        <div class=\"general-empty-state-suggestion body-l text-gray-700 border rounded-3 p-4\">\r\n            <p class=\"fw-bold\">You may want to try:</p>\r\n            <ul class=\"body-s\">\r\n                <li>Try more general keyword</li>\r\n                <li>Check your spelling</li>\r\n                <li>Replace abbreviations with the entire word</li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { PaginatedData } from '@/modules/core/types';\r\nimport { PropType, computed } from 'vue';\r\nimport { ListPlaceholder } from '@/modules/core/components';\r\n\r\n// const paginatedResults = useFinderStore();\r\n\r\ninterface Props {\r\n    paginatedResults?: PaginatedData<any>;\r\n    isBusy?: boolean;\r\n    itemLength?: number;\r\n    searchTerm?: string;\r\n}\r\nconst props = defineProps<Props>()\r\n\r\n// count = 54\r\n// page size = 10\r\n\r\n// [10, 10, 10, 10, 10, 4]\r\n// ['1-10', '11-20', ..., '51-54']\r\n\r\n// current pageNumber = 1\r\n\r\nconst paginationStatusLabel = computed(() => {\r\n    if (!props.paginatedResults) return '';\r\n\r\n    const { count, pageSize, currentPageNumber, totalPages } = props.paginatedResults;\r\n\r\n    const min = ((currentPageNumber - 1) * pageSize) + 1;\r\n    const max = Math.min(currentPageNumber * pageSize, count);\r\n\r\n    return `Showing ${min} - ${max} of ${count}`;\r\n})\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.finder {\r\n    .search-results {\r\n        &-list {\r\n            display:flex;\r\n            flex-direction: column;\r\n            gap: 0.75rem;\r\n        }\r\n    }\r\n\r\n    @include media-breakpoint-up (lg) {\r\n        .search-results {\r\n            display: grid;\r\n            grid-template-columns: minmax(0, 4fr) 8fr;\r\n            gap: 1rem;\r\n            align-items: flex-start;\r\n        }\r\n    } \r\n}\r\n\r\n.finder-viewer {\r\n    display: none;\r\n\r\n    &-body {\r\n        padding: $container-padding-x;\r\n    }\r\n\r\n    &-footer {\r\n        position: sticky;\r\n        padding: $container-padding-x;\r\n        bottom: 0;\r\n        border-top: 1px solid $gray-300;\r\n        background-color: white;\r\n    }\r\n\r\n    ul {\r\n        li::marker {\r\n            color: $secondary;\r\n            padding-left: 0;\r\n        }\r\n    }\r\n\r\n    @include media-breakpoint-up (lg) {\r\n        max-height: calc(100vh - 70px);\r\n        position: sticky;\r\n        top: 70px;\r\n        overflow-y: auto;\r\n        display: block;\r\n\r\n        &-body {\r\n            padding: 2rem;\r\n        }\r\n\r\n        &-footer {\r\n            padding: 1rem 2rem;\r\n        }\r\n    }\r\n}\r\n\r\n.general-empty-state {\r\n    &-suggestion {\r\n        width: fit-content;\r\n    }\r\n}\r\n</style>","import { defineStore } from \"pinia\";\r\nimport { ServiceListings } from \"../types\";\r\nimport { APIResponse, PaginatedData } from \"@/modules/core/types\";\r\nimport axios from \"axios\";\r\nimport endpoints from \"../endpoints\";\r\nimport { useErrorHandling } from \"@/modules/core/composables\";\r\n\r\nexport const useBroadcastPortalServiceListingStore = defineStore('broadcast-portal-service-listing', {\r\n    state: () => ({\r\n        paginatedData: null as PaginatedData<ServiceListings>|null,\r\n        filters: {\r\n            searchTerms: '',\r\n            pageNumber: 1,\r\n            pageSize: 9\r\n        },\r\n        isBusy: false\r\n    }),\r\n    actions: {\r\n        async loadServiceListings () {\r\n            this.isBusy = true\r\n\r\n            const request = axios.get<APIResponse<PaginatedData<ServiceListings>>>(\r\n                `${endpoints.SERVICE}/search`,\r\n                { params: this.filters }\r\n            )\r\n\r\n            const response = await useErrorHandling(request)\r\n\r\n            this.paginatedData = response.data.data\r\n            this.isBusy = false\r\n        },\r\n        parseUrl () {\r\n            const currUrl = new URL(window.location.href);\r\n            const searchParams = currUrl.searchParams;\r\n            \r\n            const searchTerms = searchParams.get('searchTerms') ?? '';\r\n            const pageNumber = parseInt(searchParams.get('pageNumber') ?? this.filters.pageNumber.toString());\r\n            const pageSize = parseInt(searchParams.get('pageSize') ?? this.filters.pageSize.toString());\r\n\r\n            this.filters.searchTerms = searchTerms;\r\n            this.filters.pageNumber = pageNumber;\r\n            this.filters.pageSize = pageSize;\r\n        },\r\n        updateUrl (replaceState = false) {\r\n            const currUrl = new URL(window.location.href);\r\n            const searchParams = currUrl.searchParams;\r\n            \r\n            searchParams.set('pageNumber', this.filters.pageNumber.toString());\r\n            searchParams.set('pageSize', this.filters.pageSize.toString());\r\n            searchParams.set('searchTerms', this.filters.searchTerms)\r\n\r\n            if (replaceState) {\r\n                window.history.replaceState(null, '', currUrl.toString());\r\n            } else {\r\n                window.history.pushState(null, '', currUrl.toString());\r\n            }\r\n        },\r\n        listenToHistory () {\r\n            const popstateHandler = () => {\r\n                this.parseUrl();\r\n                this.loadServiceListings();\r\n            }\r\n\r\n            window.addEventListener('popstate', popstateHandler);\r\n\r\n            return () => window.removeEventListener('popstate', popstateHandler)\r\n        }\r\n    }\r\n})","import { APIResponse, PaginatedData } from \"@/modules/core/types\";\r\nimport { defineStore } from \"pinia\";\r\nimport { MemberListing } from \"../types\";\r\nimport axios from \"axios\";\r\nimport endpoints from \"../endpoints\";\r\nimport { useErrorHandling } from \"@/modules/core/composables\";\r\n\r\nexport const useBroadcastPortalMembersListingStore = defineStore('broadcast-portal-members-listing', {\r\n    state: () => ({\r\n        paginatedData: null as PaginatedData<MemberListing>|null,\r\n        filters: {\r\n            searchTerms: '',\r\n            memberType: '',\r\n            pageNumber: 1,\r\n            pageSize: 6\r\n        },\r\n        isBusy: false,\r\n        activeMemberId: '',\r\n    }),\r\n    getters: {\r\n        activeMember: state => state.paginatedData?.items.find(x => x.key === state.activeMemberId),\r\n    },\r\n    actions: {\r\n        async loadMembersListing () {\r\n            this.isBusy = true\r\n\r\n            const request = axios.get<APIResponse<PaginatedData<MemberListing>>>(\r\n                `${endpoints.MEMBERS}/search`,\r\n                { params: this.filters }\r\n            )\r\n\r\n            const response = await useErrorHandling(request)\r\n\r\n            this.paginatedData = response.data.data\r\n            this.isBusy = false\r\n\r\n            this.autoSetActiveMember();\r\n        },\r\n        parseUrl () {\r\n            const currUrl = new URL(window.location.href);\r\n            const searchParams = currUrl.searchParams;\r\n            \r\n            const searchTerms = searchParams.get('searchTerms') ?? '';\r\n            const memberType = searchParams.get('memberType') ?? '';\r\n            const pageNumber = parseInt(searchParams.get('pageNumber') ?? this.filters.pageNumber.toString());\r\n            const pageSize = parseInt(searchParams.get('pageSize') ?? this.filters.pageSize.toString());\r\n            const activeMember = searchParams.get('activeMemberId') ?? '';\r\n\r\n            this.filters.searchTerms = searchTerms;\r\n            this.filters.memberType = memberType;\r\n            this.filters.pageNumber = pageNumber;\r\n            this.filters.pageSize = pageSize;\r\n            this.activeMemberId = activeMember;\r\n        },\r\n        updateUrl (replaceState = false) {\r\n            const currUrl = new URL(window.location.href);\r\n            const searchParams = currUrl.searchParams;\r\n            \r\n            searchParams.set('pageNumber', this.filters.pageNumber.toString());\r\n            searchParams.set('pageSize', this.filters.pageSize.toString());\r\n            searchParams.set('searchTerms', this.filters.searchTerms)\r\n            searchParams.set('memberType', this.filters.memberType)\r\n            searchParams.set('activeMemberId', this.activeMemberId)\r\n\r\n            if (replaceState) {\r\n                window.history.replaceState(null, '', currUrl.toString());\r\n            } else {\r\n                window.history.pushState(null, '', currUrl.toString());\r\n            }\r\n        },\r\n        listenToHistory () {\r\n            const popstateHandler = () => {\r\n                this.parseUrl();\r\n                this.loadMembersListing();\r\n            }\r\n\r\n            window.addEventListener('popstate', popstateHandler);\r\n\r\n            return () => window.removeEventListener('popstate', popstateHandler)\r\n        },\r\n        autoSetActiveMember () {\r\n            const newActiveMember = this.paginatedData?.items[0];\r\n            this.$patch({ activeMemberId: newActiveMember?.key })\r\n        },\r\n        setActiveMember (memberId: string) {\r\n            this.$patch({activeMemberId: memberId});\r\n            this.updateUrl();\r\n        }\r\n    }\r\n})","import { defineStore } from \"pinia\";\r\nimport { APIResponse, PaginatedData } from \"@/modules/core/types\";\r\nimport { BcfListing } from \"../types\";\r\nimport axios from \"axios\";\r\nimport { useErrorHandling } from \"@/modules/core/composables\";\r\n\r\nexport const useBroadcastPortalBcfListingStore = defineStore('broadcast-portal-bcf-listing-store', {\r\n    state: () => ({\r\n        paginatedData: null as PaginatedData<BcfListing>|null,\r\n        filters: {\r\n            keywords: '',\r\n            pageNumber: 1,\r\n            pageSize: 9,\r\n            categoryType: '',\r\n            subCategory: '',\r\n            submissionYear: 2024,\r\n        },\r\n        isBusy: false\r\n    }),\r\n    actions: {\r\n        async loadBcfListing () {\r\n            this.isBusy = true;\r\n\r\n            const request = axios.get<APIResponse<PaginatedData<BcfListing>>>(\r\n                `/api/v1/bcf-submissions`,\r\n                { params: this.filters }\r\n            )\r\n\r\n            const response = await useErrorHandling(request)\r\n            this.paginatedData = response.data.data\r\n            this.isBusy = false\r\n        }\r\n    }\r\n})","import { createPinia } from 'pinia';\r\n// import { portalAuthPlugin } from './auth';\r\n\r\nconst pinia = createPinia()\r\n\r\n// pinia.use(portalAuthPlugin)\r\n\r\nexport default pinia;\r\n\r\nexport * from './services';\r\nexport * from './members';\r\nexport * from './bcf';","<template>\r\n    <div class=\"gray-bg pb-5\">\r\n        <div class=\"container\">\r\n            <div class=\"row gy-3\">\r\n                <div class=\"col-md-10\">\r\n                    <input\r\n                        id=\"txt-searchTerms\"\r\n                        name=\"searchTerms\"\r\n                        placeholder=\"Search through your services...\"\r\n                        v-model.lazy=\"filters.searchTerms\"\r\n                        @change=\"onSearchChange\"\r\n                        type=\"text\">\r\n                </div>\r\n                <div class=\"col-md-2\">\r\n                    <button @click=\"onSearchChange\" class=\"btn btn-secondary btn-lg w-100\" type=\"button\">Search</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"service-finder container pt-5 py-4\">\r\n        <FadeInOut mode=\"out-in\" :duration=\"300\">\r\n            <GridPlaceholder\r\n                v-if=\"isBusy\"\r\n                grid-config=\"1x3\"\r\n                grid-config-lg=\"3x2\"\r\n                grid-item-ratio=\"21x9\"\r\n            ></GridPlaceholder>\r\n            <div v-if=\"paginatedData && paginatedData.count > 0\">\r\n                <p class=\"subheading text-muted\">{{ paginationStatusLabel }}</p>\r\n                <div class=\"row gy-3\">\r\n                    <div v-for=\"item in paginatedData?.items\" class=\"col-md-6 col-lg-4\">\r\n                        <PackageServiceCard\r\n                            v-if=\"item.serviceOffering.ncContentTypeAlias === 'packageServiceOffering'\"\r\n                            :service=\"item.serviceOffering\"\r\n                        >\r\n                            <template #logo-info>\r\n                                <div class=\"hstack gap-2\">\r\n                                    <Avatar\r\n                                        v-if=\"item.logoIcon === null\"\r\n                                        :text=\"item.memberName\"\r\n                                        class=\"avatar-sm\"\r\n                                    ></Avatar>\r\n                                    <img v-if=\"item.logoIcon\" :src=\"item.logoIcon.url\" :alt=\"item.logoIcon.name\" class=\"img-company-logo\">\r\n                                    <p class=\"caption fw-semibold text-muted mb-0\">{{ item.memberName }}</p>\r\n                                </div>\r\n                            </template>\r\n                        </PackageServiceCard>\r\n                        <IndividualServiceCard\r\n                            v-if=\"item.serviceOffering.ncContentTypeAlias === 'individualServiceOffering'\"\r\n                            :service=\"item.serviceOffering\"\r\n                        >\r\n                            <template #logo-info>\r\n                                <div class=\"hstack gap-2\">\r\n                                    <img v-if=\"item.logoIcon !== null\" :src=\"item.logoIcon.url\" :alt=\"item.logoIcon.name\" class=\"img-fluid img-company-logo\">\r\n                                    <p class=\"caption fw-semibold text-muted mb-0\">{{ item.memberName }}</p>\r\n                                </div>\r\n                            </template>\r\n                        </IndividualServiceCard>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div v-else>\r\n                <p class=\"display-l text-muted\">No services can be found...</p>\r\n            </div>\r\n        </FadeInOut>\r\n        <div class=\"d-flex pt-4\">\r\n            <Pagination\r\n                v-if=\"paginatedData?.currentPageNumber\"\r\n                :page-number=\"paginatedData?.currentPageNumber\"\r\n                :total-pages=\"paginatedData?.totalPages\"\r\n                :pages-per-view=\"paginatedData.pageSize\"\r\n                @page-change=\"onPageChange\"\r\n            ></Pagination>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { storeToRefs } from 'pinia';\r\nimport { useBroadcastPortalServiceListingStore } from '../../store';\r\nimport { FadeInOut } from 'vue3-transitions';\r\nimport GridPlaceholder from '@/modules/core/components/placeholders/grid-placeholder.vue';\r\nimport PackageServiceCard from './service-card/package-service-card.vue';\r\nimport IndividualServiceCard from './service-card/individual-service-card.vue';\r\nimport Pagination from '@/modules/core/components/pagination/pagination.vue';\r\nimport { computed, ref } from 'vue';\r\nimport Avatar from '@/modules/core/components/avatar.vue';\r\n\r\nconst broadcastPortalServiceStore = useBroadcastPortalServiceListingStore();\r\nconst { paginatedData, isBusy, filters } = storeToRefs(broadcastPortalServiceStore);\r\n\r\n// const min = ref(0)\r\n// const max = ref(0)\r\n\r\nconst paginationStatusLabel = computed(() => {\r\n    if (!paginatedData) return '';\r\n\r\n    const min = ((paginatedData.value!.currentPageNumber - 1) * paginatedData.value!.pageSize) + 1;\r\n    const max = Math.min(paginatedData.value!.currentPageNumber * paginatedData.value!.pageSize, paginatedData.value!.count);\r\n\r\n    return `Showing ${min} - ${max} of ${paginatedData.value!.count}`;\r\n})\r\n\r\nconst onPageChange = (pageNumber: number) => {\r\n    filters.value.pageNumber = pageNumber;\r\n    broadcastPortalServiceStore.loadServiceListings();\r\n}\r\n\r\nconst onSearchChange = () => {\r\n    broadcastPortalServiceStore.filters.pageNumber = 1;\r\n    broadcastPortalServiceStore.loadServiceListings();\r\n}\r\n\r\nbroadcastPortalServiceStore.parseUrl();\r\nbroadcastPortalServiceStore.loadServiceListings();\r\nbroadcastPortalServiceStore.listenToHistory()\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.service-finder {\r\n    input::placeholder {\r\n        font-style: normal;\r\n        color: red;\r\n    }\r\n    .img-company-logo {\r\n        max-height: 20px;\r\n        max-width: 100px;\r\n    }\r\n\r\n    .avatar.avatar-default {\r\n        max-height: 20px;\r\n        max-width: 20px;\r\n    }\r\n}\r\n</style>","<!-- We dont need a template as the template is in the cshtml file -->\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from 'vue'\r\nimport ServicesFinder from './services-finder.vue'\r\n\r\nexport default defineComponent({\r\n    components: {\r\n        ServicesFinder\r\n    }\r\n})\r\n</script>\r\n","<!-- We dont need a template as the template is in the cshtml file -->\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from 'vue'\r\nimport { GenericCarousel, ShareIcons, Icon, Avatar } from '@/modules/core/components'\r\n\r\nexport default defineComponent({\r\n    components: {\r\n        GenericCarousel,\r\n        ShareIcons,\r\n        Icon,\r\n        Avatar,\r\n    }\r\n})\r\n</script>\r\n","<template>\r\n    <div class=\"card card-find-member-result-list-item border rounded-4\"\r\n        :class=\"{ 'is-active': item.key === activeMemberId }\">\r\n        <div class=\"card-body d-flex flex-column\">\r\n            <div class=\"hstack gap-3\">\r\n                <Avatar\r\n                    :image-url=\"item?.logo?.url\"\r\n                    :text=\"item.name\"\r\n                    class=\"avatar-xl border company-logo\">\r\n                ></Avatar>\r\n                <div class=\"d-flex flex-column justify-content-center gap-1\">\r\n                    <h3 class=\"body-s fw-bold mb-0\">\r\n                        <a :href=\"`/find-members/member-details?memberId=${item?.id}`\" class=\"text-decoration-none stretched-link link-primary text-dark\">{{ item?.name }}</a>\r\n                    </h3>\r\n                    <div class=\"\">\r\n                        <p v-if=\"item.typeAlias === 'productionHouseMember'\" class=\"caption text-secondary fw-semibold mb-0\">Production House</p>\r\n                        <p v-else class=\"caption text-primary fw-semibold mb-0\">Freelancer</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { storeToRefs } from 'pinia';\r\nimport { useBroadcastPortalMembersListingStore } from '../../store';\r\nimport { MemberListing } from '../../types';\r\nimport Avatar from '@/modules/core/components/avatar.vue';\r\n\r\ninterface Props {\r\n    item: MemberListing\r\n}\r\ndefineProps<Props>()\r\n\r\nconst memberListingStore = useBroadcastPortalMembersListingStore();\r\nconst { activeMemberId } = storeToRefs(memberListingStore);\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.card-find-member-result-list-item {\r\n    border-color: $gray-200 !important;\r\n\r\n    .avatar.avatar-alphabet.avatar-default.ratio.company-logo {\r\n        // width: 2.25rem !important;\r\n        border-radius: 1rem !important;\r\n        background-color: $gray-100;\r\n    }\r\n\r\n    .ratio img {\r\n        object-fit: contain !important;\r\n    }\r\n}\r\n</style>","<template>\r\n    <Modal modal-title=\"Portfolio Video\" size=\"modal-lg\" class=\"modal-upload-content\">\r\n        <template #activator=\"{ show }\">\r\n            <div class=\"card border-0 h-100 bg-transparent\">\r\n                <div class=\"card-body p-0 vstack\">\r\n                    <a>\r\n                        <div class=\"position-relative\">\r\n                            <div v-if=\"props.portfolio.portfolioVideoId !== ''\" class=\"badge-video position-absolute\">\r\n                                <div class=\"badge bg-white rounded-pill text-danger hstack px-2\">\r\n                                    <Icon symbol=\"play-fill\" class=\"icon-m\"></Icon>\r\n                                    Video\r\n\r\n                                    <!-- Hide until a fix for video duration is found -->\r\n                                    <!-- <div class=\"px-2\">\r\n                                        <div class=\"rounded pb-1 ps-1 bg-danger\"></div>\r\n                                    </div>\r\n                                    <span>{{ toTimeString(props.portfolio.portfolioVideoDurationInSeconds) }}</span> -->\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"ratio ratio-16x9\">\r\n                                <VLazyImage\r\n                                    :src=\"props.portfolio.image.url\"\r\n                                    :alt=\"props.portfolio.image.name\"\r\n                                    class=\"v-lazy-image-fades-in\"\r\n                                ></VLazyImage>\r\n                            </div>\r\n                        </div>\r\n                    </a>\r\n                    <div class=\" flex-grow-1\">\r\n                        <a class=\"text-decoration-none\">\r\n                            <h3 class=\"heading-l text-gray-700 mt-3 pe-lg-4\">{{ props.portfolio.title }}</h3>\r\n                        </a>\r\n                        <p class=\"body-s text-gray-500 mb-5 line-clamp\" style=\"--line-clamp-lines: 3\">{{ strippedHtml }}</p>\r\n                    </div>\r\n                    <p class=\"subheading text-gray-500 mb-4\">\r\n                        {{ formatDateAsString(props.portfolio.createDateTime, 'DD MMM YYYY') }}\r\n                    </p>\r\n                    <div class=\"d-flex gap-2\">\r\n                        <a\r\n                            v-if=\"uploadedVideoUrl !== null && props.portfolio.portfolioVideoId !== ''\"\r\n                            @click.prevent=\"show\"\r\n                            :href=\"props.portfolio.url\"\r\n                            class=\"text-decoration-none\">\r\n                            <h3 class=\"btn btn-secondary subheading mb-0\">View Video</h3>\r\n                        </a>\r\n                        <a :href=\"portfolio.url\" target=\"_blank\" class=\"btn btn-outline-dark border subheading\">View Portfolio</a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </template>\r\n\r\n        <template #=\"{isActive}\">\r\n            <div v-if=\"isActive\" class=\"p-3\">\r\n                <div class=\"row justify-content-center\">\r\n                    <GridPlaceholder\r\n                        v-if=\"isLoading\"\r\n                        grid-config=\"1x1\"\r\n                        grid-config-lg=\"1x1\"\r\n                        grid-item-ratio=\"16x9\"\r\n                    ></GridPlaceholder>\r\n                    <div v-else class=\"col-lg-8\">\r\n                        <div class=\"ratio ratio-16x9 portfolio-video bg-black\">\r\n                            <div class=\"spinner-container\">\r\n                                <Spinner class=\"video-spinner\"></Spinner>\r\n                            </div>\r\n                            <iframe\r\n                                v-if=\"portfolio.portfolioVideoId\"\r\n                                :src=\"`https://customer-fp0mjytj2t8cinei.cloudflarestream.com/${portfolio.portfolioVideoId}/iframe`\"\r\n                                style=\"border: none;\"\r\n                                allowtransparency=\"true\"\r\n                                height=\"720\"\r\n                                width=\"1280\"\r\n                                allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\r\n                                allowfullscreen=\"true\"\r\n                            ></iframe>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </template>\r\n    </Modal>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { PortfolioShowcase } from '../../types';\r\nimport { formatDateAsString } from '@/modules/core/utilities';\r\nimport VLazyImage from '@/modules/core/components/v-lazy-image.vue';\r\nimport Icon from '@/modules/core/components/icon.vue';\r\nimport Modal from '@/modules/core/components/modal.vue';\r\nimport { computed, onBeforeUnmount, ref } from 'vue';\r\nimport GridPlaceholder from '@/modules/core/components/placeholders/grid-placeholder.vue';\r\nimport { Spinner } from '@/modules/core/components';\r\n\r\ninterface Props {\r\n    portfolio: PortfolioShowcase\r\n}\r\nconst props = defineProps<Props>()\r\n\r\nconst uploadedVideoUrl = ref('')\r\nconst isLoading = ref(false)\r\n\r\nconst strippedHtml = computed(() => {\r\n    if (props.portfolio.description === '') return\r\n    let regex = /(<([^>]+)>)/ig;\r\n\r\n    return props.portfolio.description.replace(regex, '')\r\n})\r\n\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.card-body {\r\n    .badge-video {\r\n        z-index: 3;\r\n        top: 8%;\r\n        left: 4%;\r\n    }\r\n\r\n    .badge-portfolio {\r\n        z-index: 3;\r\n        bottom: 8%;\r\n        right: 4%;\r\n\r\n        .badge-approved {\r\n            background-color: #e8f3ee;\r\n        }\r\n\r\n        .badge-pending {\r\n            background-color: #fff9e6;\r\n        }\r\n\r\n        .badge-rejected {\r\n            background-color: #ffd9dd;\r\n        }\r\n    }\r\n\r\n    img {\r\n        border-radius: 1rem;\r\n    }\r\n}\r\n\r\n.ratio-16x9 {\r\n    .portfolio-video {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n}\r\n\r\n.spinner-container {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.video-spinner {\r\n    width: 48px;\r\n    height: 48px;\r\n}\r\n</style>","<template>\r\n    <div class=\"card border-0 shadow bg-transparent h-100\">\r\n        <div class=\"card-body card-service bg-white p-3 p-lg-4 shadow-sm vstack\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"badge bg-primary rounded-pill p-2 text-white\">Individual</div>\r\n            </div>\r\n            <a\r\n                :href=\"`/find-services/service-details?serviceKey=${service.key}`\"\r\n                class=\"stretched-link text-decoration-none\">\r\n                <h3 class=\"heading-l text-gray-700 my-3 pe-lg-4\">{{ service.service.name }}</h3>\r\n            </a>\r\n            <p v-if=\"props.service.description\" class=\"body-s text-gray-500 mb-4 line-clamp\" style=\"--line-clamp-lines: 3\">\r\n                {{ service.description }}\r\n            </p>\r\n            <div class=\"vstack\">\r\n                <div class=\"vstack mt-3 gap-1 justify-content-end\">\r\n                    <div class=\"hstack gap-2\">\r\n                        <Icon symbol=\"dollar\"></Icon>\r\n                        <p v-if=\"service.showPriceInPortal === true\" class=\"mb-0 fw-bold\">BND {{ service.price }}</p>\r\n                        <p v-else class=\"mb-0 fw-bold\">Price upon request</p>\r\n                    </div>\r\n                    <div class=\"hstack gap-2\">\r\n                        <Icon symbol=\"timewatch\"></Icon>\r\n                        <p v-if=\"service.durationOfWorkMeasurement && !service.durationIsDependentOnProject\" class=\"text-muted mb-0\">{{ service.durationOfWork }} {{ service.durationOfWorkMeasurement.name }}</p>\r\n                        <p v-else class=\"text-muted mb-0\">Duration depends on project</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { Icon } from '@/modules/core/components';\r\nimport { IndividualService } from '../../types';\r\n\r\ninterface Props {\r\n    service: IndividualService\r\n}\r\nconst props = defineProps<Props>()\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>","<template>\r\n    <div class=\"gray-bg py-5\">\r\n        <div class=\"container\">\r\n            <h1 class=\"heading-l fw-bold\">Find Production Houses & Freelancers</h1>\r\n            <div class=\"row gx-3 gy-3 align-items-md-center\">\r\n                <div class=\"col-md-7\">\r\n                    <input\r\n                        id=\"txt-searchTerms\"\r\n                        name=\"searchTerms\"\r\n                        placeholder=\"Search by keywords...\"\r\n                        v-model.lazy=\"filters.searchTerms\"\r\n                        @change=\"onSearchChange\"\r\n                        type=\"text\">\r\n                </div>\r\n                <div class=\"col-md-3 mt-md-0\">\r\n                    <select\r\n                        class=\"form-select border mb-0\"\r\n                        aria-label=\"Select talents\"\r\n                        id=\"sel-memberType\"\r\n                        name=\"memberType\"\r\n                        v-model.lazy=\"filters.memberType\"\r\n                        @change=\"onSearchChange\">\r\n                        <option :value=\"''\">All</option>\r\n                        <option :value=\"'ProductionHouseMember'\">Production House</option>\r\n                        <option :value=\"'FreelanceMember'\">Freelancer</option>\r\n                    ></select>\r\n                </div>\r\n                <div class=\"col-md-2 mt-md-0\">\r\n                    <button @click=\"onSearchChange\" class=\"btn btn-secondary btn-lg w-100\" type=\"button\">Search</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"container pt-5\">\r\n        <Finder\r\n            :item-length=\"paginatedData?.count\"\r\n            :paginated-results=\"paginatedData || undefined\"\r\n            :is-busy=\"isBusy\"\r\n            :search-term=\"memberListingStore.filters.searchTerms\">\r\n            <template #filter-value v-if=\"filters.searchTerms.replace(/\\s+/g, '')\">\r\n                for <span class=\"text-secondary\">{{filters.searchTerms}}</span>\r\n            </template>\r\n        \r\n            <template #list-item=\"{ item }\">\r\n                <FindMemberListItem\r\n                    :item=\"item\"\r\n                    @click=\"setActiveMemberListing($event, item)\"\r\n                ></FindMemberListItem>\r\n            </template>\r\n            <template #details>\r\n                <div class=\"hstack gap-3 gap-lg-4 mb-4 mb-lg-5 placeholder-glow\">\r\n                    <Avatar\r\n                        :text=\"activeMember?.name\"\r\n                        :image-url=\"activeMember?.logo?.url\"\r\n                        class=\"avatar-3xl border\">\r\n                    ></Avatar>\r\n                    <div class=\"flex-grow-1 d-flex flex-column\">\r\n                        <template v-if=\"!isBusy\">\r\n                            <div class=\"d-flex\">\r\n                                <div v-if=\"activeMember?.typeAlias === 'productionHouseMember'\" class=\"badge bg-secondary text-white rounded-pill\"><span>Production House</span></div>\r\n                                <div v-else class=\"badge bg-primary text-white rounded-pill\">Freelancer</div>\r\n                            </div>\r\n                            <h3 class=\"display-m fw-bold my-2\">\r\n                                <a :href=\"`/talents/member-details?memberId=${activeMember?.id}`\"\r\n                                    class=\"text-decoration-none link-primary text-dark\">\r\n                                    {{ activeMember?.name }}\r\n                                </a>\r\n                            </h3>\r\n                            <p v-if=\"activeMember?.showFocalEmailInPortal\" class=\"caption text-gray-500 fw-semibold mb-0\">{{ activeMember?.focalEmailAddress }}</p>\r\n                        </template>\r\n                        <template v-else>\r\n                            <div class=\"placeholder bg-primary w-25 subheading mb-2\"></div>\r\n                            <div class=\"placeholder bg-primary w-75 display-m mb-2\"></div>\r\n                            <div class=\"placeholder bg-primary w-50 subheading\"></div>\r\n                        </template>\r\n                    </div>\r\n                </div>\r\n                <Tabs nav-tabs-class=\"d-flex flex-column flex-md-row ps-0\">\r\n                    <TabPane\r\n                        id=\"txt-about\"\r\n                        title=\"About\"\r\n                    >\r\n                        <div class=\"flex-grow-1 d-flex flex-column\">\r\n                            <template v-if=\"!isBusy\">\r\n                                <div v-if=\"activeMember?.typeAlias === 'productionHouseMember'\">\r\n                                    <h3 class=\"body-s fw-bold\">About the Organisation</h3>\r\n                                    <p v-if=\"activeMember.introduction !== ''\" class=\"text-gray-500\">{{ strippedHtml }}</p>\r\n                                    <p v-else class=\"text-gray-500\">-</p>\r\n                                </div>\r\n                                <div v-else>\r\n                                    <h3 class=\"body-s fw-bold\">About the individual</h3>\r\n                                    <p v-if=\"activeMember!.introduction !== ''\" class=\"text-gray-500\">{{ strippedHtml }}</p>\r\n                                    <p v-else class=\"text-gray-500\">-</p>\r\n                                </div>\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-5\">\r\n                                        <div class=\"hstack gap-2\">\r\n                                            <Icon symbol=\"mail\"></Icon>\r\n                                            <p class=\"caption text-gray-500 fw-semibold mb-0\">Contact Email</p>\r\n                                        </div>\r\n                                        <div class=\"pe-4\">\r\n                                            <div class=\"card border-0 bg-transparent\">\r\n                                                <p v-if=\"activeMember!.showFocalEmailInPortal === true\" class=\"mt-1 fw-bold\">{{activeMember?.focalEmailAddress}}</p>\r\n                                                <p v-else class=\"text-muted mt-1\">-</p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-5\">\r\n                                        <div class=\"hstack gap-2\">\r\n                                            <Icon symbol=\"phone\"></Icon>\r\n                                            <p class=\"caption text-gray-500 fw-semibold mb-0\">Contact Phone Number</p>\r\n                                        </div>\r\n                                        <div class=\"card border-0 bg-transparent\">\r\n                                            <p v-if=\"activeMember!.showFocalContactNumberInPortal === true\" class=\"mt-1 fw-bold\">{{ activeMember?.focalContactNumber }}</p>\r\n                                            <p v-else class=\"text-muted mt-1\">-</p>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </template>\r\n                            <template v-else>\r\n                                <div class=\"placeholder bg-primary w-25 subheading mb-2\"></div>\r\n                                <div class=\"placeholder bg-primary w-75 display-m mb-2\"></div>\r\n                                <div class=\"placeholder bg-primary w-50 subheading\"></div>\r\n                            </template>\r\n                        </div>\r\n                    </TabPane>\r\n                    <TabPane\r\n                        id=\"txt-portfolio\"\r\n                        title=\"Portfolio\"\r\n                    >\r\n                        <GridPlaceholder\r\n                            v-if=\"isBusy\"\r\n                            grid-config=\"1x1\"\r\n                            grid-config-lg=\"2x2\"\r\n                            grid-item-ratio=\"16x9\"\r\n                        ></GridPlaceholder>\r\n                        <div v-else class=\"row gy-4\">\r\n                            <div\r\n                                v-if=\"activeMember?.portfolioShowcases !== null && getPublicPortfolios!.length > 0\"\r\n                                v-for=\"portfolio in getPublicPortfolios\"\r\n                                class=\"col-lg-6\">\r\n                                <FindMemberPortfolioCard\r\n                                    v-if=\"portfolio != null\"\r\n                                    :portfolio=\"portfolio\"\r\n                                ></FindMemberPortfolioCard>\r\n                                <div v-else>\r\n                                    <p class=\"body-l text-muted\">This talent currently has no public portfolios...</p>\r\n                                </div>\r\n                            </div>\r\n                            <div v-else>\r\n                                <p class=\"body-l text-muted\">This talent currently has no public portfolios...</p>\r\n                            </div>\r\n                        </div>\r\n                    </TabPane>\r\n                    <TabPane\r\n                        id=\"txt-services\"\r\n                        title=\"Services\"\r\n                    >\r\n                        <GridPlaceholder\r\n                            v-if=\"isBusy\"\r\n                            grid-config=\"1x1\"\r\n                            grid-config-lg=\"2x2\"\r\n                            grid-item-ratio=\"4x3\"\r\n                        ></GridPlaceholder>\r\n                        <div v-else class=\"row gy-3\">\r\n                            <div\r\n                                v-if=\"activeMember?.serviceOfferings !== null && getPublicServices!.length > 0\"\r\n                                v-for=\"service in getPublicServices\"\r\n                                class=\"col-lg-6\">\r\n                                <FindMemberPackageServiceCard\r\n                                    v-if=\"service.ncContentTypeAlias === 'packageServiceOffering'\"\r\n                                    :service=\"service\"\r\n                                ></FindMemberPackageServiceCard>\r\n                                <FindMemberIndividualServiceCard\r\n                                    v-if=\"service.ncContentTypeAlias === 'individualServiceOffering'\"\r\n                                    :service=\"service\"\r\n                                ></FindMemberIndividualServiceCard>\r\n                            </div>\r\n                            <div v-else>\r\n                                <p class=\"body-l text-muted\">This talent currently has no public services...</p>\r\n                            </div>\r\n                        </div>\r\n                    </TabPane>\r\n                    <TabPane\r\n                        id=\"txt-advertisements\"\r\n                        title=\"Advertisements\"\r\n                    >\r\n                        <GridPlaceholder\r\n                            v-if=\"isBusy\"\r\n                            grid-config=\"1x1\"\r\n                            grid-config-lg=\"2x2\"\r\n                            grid-item-ratio=\"4x3\"\r\n                        ></GridPlaceholder>\r\n                        <div v-else class=\"row gy-3\">\r\n                            <div\r\n                                v-if=\"activeMember?.advertisements !== null && getPublicAdvertisements!.length > 0\"\r\n                                v-for=\"advertisement in getPublicAdvertisements\"\r\n                                class=\"col-lg-6\">\r\n                                <FindMemberAdvertisementCard\r\n                                    :advertisement=\"advertisement\"\r\n                                    :member-name=\"activeMember!.name\"\r\n                                    :member-logo=\"activeMember!.logo.url\"\r\n                                    :member-logo-name=\"activeMember!.logo.name\">\r\n                                </FindMemberAdvertisementCard>\r\n                            </div>\r\n                            <div v-else>\r\n                                <p class=\"body-l text-muted\">This talent currently has no public advertisements...</p>\r\n                            </div>\r\n                        </div>\r\n                    </TabPane>\r\n                </Tabs>\r\n            </template>\r\n        \r\n            <template #pagination>\r\n                <Pagination\r\n                    v-if=\"paginatedData?.currentPageNumber\"\r\n                    :page-number=\"paginatedData?.currentPageNumber\"\r\n                    :total-pages=\"paginatedData?.totalPages\"\r\n                    :pages-per-view=\"paginatedData.pageSize\"\r\n                    @page-change=\"onPageChange\"\r\n                ></Pagination>\r\n            </template>\r\n        </Finder>\r\n    </div>\r\n\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { storeToRefs } from 'pinia';\r\nimport { Icon, Avatar, Pagination, Finder, VLazyImage } from '@/modules/core/components';\r\nimport { useBroadcastPortalMembersListingStore } from '@/modules/broadcast-portal/store';\r\nimport { breakpointsBootstrapV5, useBreakpoints } from '@vueuse/core';\r\nimport FindMemberListItem from './find-member-list-item.vue';\r\nimport { MemberListing } from '../../types';\r\nimport Tabs from '@/modules/core/components/tabs/tabs.vue';\r\nimport TabPane from '@/modules/core/components/tabs/tab-pane.vue';\r\nimport FindMemberPortfolioCard from './find-member-portfolio-card.vue';\r\nimport FindMemberPackageServiceCard from './find-member-package-service-card.vue';\r\nimport FindMemberIndividualServiceCard from './find-member-individual-service-card.vue';\r\nimport GridPlaceholder from '@/modules/core/components/placeholders/grid-placeholder.vue';\r\nimport { computed } from 'vue';\r\nimport FindMemberAdvertisementCard from './find-member-advertisement-card.vue';\r\n\r\nconst breakpoint = useBreakpoints(breakpointsBootstrapV5)\r\nconst mdAndGreater = breakpoint.smaller('lg');\r\n\r\nconst memberListingStore = useBroadcastPortalMembersListingStore();\r\nconst { filters, paginatedData, activeMember, isBusy } = storeToRefs(memberListingStore)\r\n\r\nconst jobSearch = async () => {\r\n    await memberListingStore.loadMembersListing();\r\n    memberListingStore.updateUrl()\r\n}\r\n\r\nconst isExpired = (endDate: string) => {\r\n    if (!endDate) return false \r\n\r\n    const currentDate = new Date();\r\n    const date = new Date(endDate);\r\n    return date < currentDate\r\n}\r\n\r\nconst getPublicPortfolios = computed(() => {\r\n    let publicPortfolio = activeMember.value?.portfolioShowcases.filter(x => x.approvalStatus.name === 'Approved' && x.showInPortal === true)\r\n    return publicPortfolio\r\n})\r\n\r\nconst getPublicServices = computed(() => {\r\n    let publicService = activeMember.value?.serviceOfferings.filter(x => x.approvalStatus.name === 'Approved' && x.showOfferingInPortal === true)\r\n    return publicService\r\n})\r\n\r\nconst getPublicAdvertisements = computed(() => {\r\n    let publicAdvertisements = activeMember.value?.advertisements.filter(x => x.approvalStatus.name === 'Approved' && x.isPublic === true && !isExpired(x.endDate))\r\n    return publicAdvertisements\r\n})\r\n\r\nconst setActiveMemberListing = async (event: Event, item: MemberListing) => {\r\n    if(mdAndGreater.value) return;\r\n    event.preventDefault();\r\n    memberListingStore.setActiveMember(item.key);\r\n}\r\n\r\nconst onPageChange = async (pageNumber: number) => {\r\n    const currentPage = memberListingStore.filters.pageNumber;\r\n    if (currentPage !== pageNumber) {\r\n        memberListingStore.filters.pageNumber = pageNumber;\r\n        await memberListingStore.loadMembersListing();\r\n        memberListingStore.updateUrl();\r\n    }\r\n}\r\n\r\nconst onSearchChange = () => {\r\n    memberListingStore.filters.pageNumber = 1;\r\n    jobSearch()\r\n}\r\n\r\nconst strippedHtml = computed(() => {\r\n    if (activeMember.value?.introduction === '') return\r\n    let regex = /(<([^>]+)>)/ig;\r\n\r\n    return activeMember.value?.introduction.replace(regex, '')\r\n})\r\n\r\njobSearch()\r\n\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.search-results {\r\n    padding-bottom: 3rem;\r\n\r\n    .search-results-list {\r\n        &.list-unstyled {\r\n            list-style: none;\r\n        }\r\n    }\r\n\r\n    .finder-viewer {\r\n\r\n        .avatar.avatar-default {\r\n            // width: 2.25rem !important;\r\n            border-radius: 0.5rem !important;\r\n        }\r\n\r\n        .nav.nav-tabs {\r\n            list-style: none;\r\n\r\n            .nav-link {\r\n                color: $primary;\r\n                padding: 0.45rem 1rem;\r\n                border-radius: 0.5rem;\r\n\r\n                &.active {\r\n                    color: $light;\r\n                    background-color: $primary;\r\n                }\r\n            }\r\n\r\n            .nav-link::after {\r\n                border-color: transparent;\r\n            }\r\n\r\n            .nav-link:hover:after {\r\n                border-color: transparent;\r\n            }\r\n        }\r\n\r\n        .tab-content {\r\n            .tab-pane {\r\n                &.active.show {\r\n                    display: block;\r\n                }\r\n\r\n                display: none;\r\n            }\r\n        }\r\n\r\n        .nav-tabs::after {\r\n            display: none;\r\n        }\r\n    }\r\n}\r\n</style>","<!-- We dont need a template as the template is in the cshtml file -->\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from 'vue';\r\nimport MembersFinder from './members-finder.vue';\r\nimport { Icon } from '@/modules/core/components';\r\n\r\nexport default defineComponent({\r\n    components: {\r\n        MembersFinder,\r\n        Icon\r\n    }\r\n})\r\n</script>\r\n","<template>\r\n    <div class=\"p-3\">\r\n        <div class=\"row justify-content-center\">\r\n            <div class=\"col-lg-8\">\r\n                <div class=\"ratio ratio-16x9 bg-black\">\r\n                    <div class=\"spinner-container\">\r\n                        <Spinner class=\"video-spinner\"></Spinner>\r\n                    </div>\r\n                    <iframe\r\n                        v-if=\"uploadedVideoUrl\"\r\n                        :src=\"`https://customer-fp0mjytj2t8cinei.cloudflarestream.com/${uploadedVideoUrl}/iframe`\"\r\n                        style=\"border: none;\"\r\n                        allowtransparency=\"true\"\r\n                        height=\"720\"\r\n                        width=\"1280\"\r\n                        allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\r\n                        allowfullscreen=\"true\"\r\n                    ></iframe>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { usePortfolioStore } from '@/modules/broadcast-portal-post-login/store'\r\nimport { Spinner } from '@/modules/core/components';\r\nimport { ref } from 'vue';\r\n\r\ninterface Props {\r\n    portfolioVideoId: string\r\n    portfolioTitle: string\r\n}\r\nconst props = defineProps<Props>()\r\n\r\nconst uploadedVideoUrl = ref('')\r\nconst isUploaded = ref(false)\r\n\r\nconst portfolioStore = usePortfolioStore();\r\n\r\nconst getUploadedVideoTrailer = async () => {\r\n    if (props.portfolioVideoId){\r\n        isUploaded.value = true;\r\n        const value = await portfolioStore.getPortfolioVideoTrailer(props.portfolioVideoId)\r\n        uploadedVideoUrl.value = value;\r\n    }\r\n}\r\n\r\ngetUploadedVideoTrailer()\r\n\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ratio-16x9 {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.spinner-container {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.video-spinner {\r\n    width: 48px;\r\n    height: 48px;\r\n}\r\n</style>","import { APIResponse, PaginatedData } from \"@/modules/core/types\";\r\nimport { defineStore } from \"pinia\";\r\nimport { Advertisement } from \"../types\";\r\nimport axios from \"axios\";\r\nimport endpoints from \"../endpoints\";\r\nimport { useErrorHandling } from \"@/modules/core/composables\";\r\n\r\nexport const useBroadcastPortalAdvertisementListingStore = defineStore('broadcast-portal-advertisement-listing', {\r\n    state: () => ({\r\n        paginatedData: null as PaginatedData<Advertisement>|null,\r\n        filters: {\r\n            searchTerms: '',\r\n            pageNumber: 1,\r\n            pageSize: 9\r\n        },\r\n        isBusy: false\r\n    }),\r\n    actions: {\r\n        async loadAdvertisement () {\r\n            this.isBusy = true;\r\n\r\n            const request = axios.get<APIResponse<PaginatedData<Advertisement>>>(\r\n                `/api/v1/advertisements/search`,\r\n                { params: this.filters }\r\n            )\r\n\r\n            const response = await useErrorHandling(request)\r\n\r\n            this.paginatedData = response.data.data\r\n            this.isBusy = false\r\n        }\r\n    }\r\n})","<template>\r\n    <div class=\"gray-bg py-5\">\r\n        <div class=\"container\">\r\n            <div class=\"row gy-3\">\r\n                <h1 class=\"heading-l fw-bold\">Advertisement</h1>\r\n                <div class=\"col-md-10\">\r\n                    <input\r\n                        id=\"txt-searchTerms\"\r\n                        name=\"searchTerms\"\r\n                        placeholder=\"Search through your advertisements...\"\r\n                        v-model.lazy=\"filters.searchTerms\"\r\n                        @change=\"onSearchChange\"\r\n                        type=\"text\">\r\n                </div>\r\n                <div class=\"col-md-2\">\r\n                    <button @click=\"onSearchChange\" class=\"btn btn-secondary btn-lg w-100\" type=\"button\">Search</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"advertisement-finder container pt-5 py-4\">\r\n        <FadeInOut mode=\"out-in\" :duration=\"300\">\r\n            <GridPlaceholder\r\n                v-if=\"isBusy\"\r\n                grid-config=\"1x3\"\r\n                grid-config-lg=\"3x2\"\r\n                grid-item-ratio=\"4x3\"\r\n            ></GridPlaceholder>\r\n            <div v-if=\"paginatedData && paginatedData.count > 0\">\r\n                <p class=\"subheading text-muted\">{{ paginationStatusLabel }}</p>\r\n                <div class=\"row gy-3\">\r\n                    <div v-if=\"paginatedData && paginatedData.items\" v-for=\"(item, index) in paginatedData?.items\" class=\"col-md-6 col-lg-4\">\r\n                        <div class=\"card rounded-3 border-1 h-100 bg-transparent\">\r\n                            <div class=\"card-body p-3 vstack\">\r\n                                <div class=\"position-relative\">\r\n                                    <div v-if=\"index < 3\" class=\"badge-featured position-absolute\">\r\n                                        <div class=\"badge bg-secondary rounded-pill px-2\">\r\n                                            Featured\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"ratio ratio-1x1\">\r\n                                        <VLazyImage\r\n                                            v-if=\"item.advertisement.advertisementImages && item.advertisement.advertisementImages.length > 0\"\r\n                                            :src=\"item.advertisement.advertisementImages[0].url\"\r\n                                            :alt=\"item.advertisement.advertisementImages[0].name\"\r\n                                            class=\"v-lazy-image-fades-in object-fit-contain\"\r\n                                        ></VLazyImage>\r\n                                        <div v-else class=\"bg-gray-200 d-flex align-items-center justify-content-center\">\r\n\t\t\t\t\t\t\t\t\t\t\t<p class=\"mb-0 heading-s text-muted\">No Image</p>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"bg-white vstack h-100 justify-content-between\">\r\n                                    <div>\r\n                                        <AdvertisementDetailModal :advertisement=\"item.advertisement\" :index=\"index\">\r\n                                            <template #member-info>\r\n                                                <img :src=\"item.logoIcon.url\" :alt=\"item.logoIcon.name\" class=\"img-fluid img-company-logo\">\r\n                                                <p class=\"caption fw-semibold text-muted mb-0\">{{ item.memberName }}</p>\r\n                                            </template>\r\n                                        </AdvertisementDetailModal>\r\n                                        <p class=\"body-s text-gray-500 line-clamp\" style=\"white-space:pre-wrap; --line-clamp-lines: 3\">{{ item.advertisement.description }}</p>\r\n                                    </div>\r\n                                    <div class=\"d-flex flex-column justify-content-end\">\r\n                                        <div class=\"hstack gap-2 mb-3\">\r\n                                            <img v-if=\"item.logoIcon\" :src=\"item.logoIcon.url\" :alt=\"item.logoIcon.name\" class=\"img-fluid img-company-logo\">\r\n                                            <p class=\"caption fw-semibold text-muted mb-0\">{{ item.memberName }}</p>\r\n                                        </div>\r\n                                        <div class=\"hstack gap-3 flex-wrap\">\r\n                                            <div class=\"hstack gap-2\">\r\n                                                <Icon symbol=\"pin-map-fill\" class=\"icon-m text-muted\"></Icon>\r\n                                                <p class=\"caption text-gray-500 mb-0\">{{ item.advertisement.venue }}</p>\r\n                                            </div>\r\n                                            <div class=\"hstack gap-2\">\r\n                                                <Icon symbol=\"calendar\" class=\"icon-m\"></Icon>\r\n                                                <p class=\"caption text-gray-500 mb-0\">\r\n                                                    {{ formatDateAsString(item.advertisement.startDate, 'DD MMM YYYY') }} - {{ formatDateAsString(item.advertisement.endDate, 'DD MMM YYYY') }}\r\n                                                </p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div v-else>\r\n                <p class=\"display-l text-muted\">No advertisement can be found...</p>\r\n            </div>\r\n        </FadeInOut>\r\n        <div class=\"d-flex pt-4\">\r\n            <Pagination\r\n                v-if=\"paginatedData?.currentPageNumber\"\r\n                :page-number=\"paginatedData?.currentPageNumber\"\r\n                :total-pages=\"paginatedData?.totalPages\"\r\n                :pages-per-view=\"paginatedData.pageSize\"\r\n                @page-change=\"onPageChange\"\r\n            ></Pagination>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { storeToRefs } from 'pinia';\r\nimport { formatDateAsString } from '@/modules/core/utilities';\r\nimport { FadeInOut } from 'vue3-transitions';\r\nimport { computed } from 'vue';\r\nimport { useBroadcastPortalAdvertisementListingStore } from '../../store/advertisements';\r\nimport { GridPlaceholder, Icon, Modal, Pagination, VLazyImage } from '@/modules/core/components';\r\nimport AdvertisementDetailModal from './advertisement-detail-modal.vue';\r\n\r\n\r\nconst advertisementListingStore = useBroadcastPortalAdvertisementListingStore()\r\nconst { filters, isBusy, paginatedData } = storeToRefs(advertisementListingStore)\r\n    \r\nconst paginationStatusLabel = computed(() => {\r\n    if (!paginatedData) return '';\r\n    const min = ((paginatedData.value!.currentPageNumber - 1) * paginatedData.value!.pageSize) + 1;\r\n    const max = Math.min(paginatedData.value!.currentPageNumber * paginatedData.value!.pageSize, paginatedData.value!.count);\r\n\r\n    return `Showing ${min}-${max} out of ${paginatedData.value!.count}`;\r\n})\r\n\r\nconst onPageChange = (pageNumber: number) => {\r\n    filters.value.pageNumber = pageNumber;\r\n    advertisementListingStore.loadAdvertisement();\r\n}\r\n\r\nconst onSearchChange = () => {\r\n    advertisementListingStore.filters.pageNumber = 1;\r\n    advertisementListingStore.loadAdvertisement();\r\n}\r\n\r\n    advertisementListingStore.loadAdvertisement()\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.advertisement-finder {\r\n    .img-company-logo {\r\n        max-height: 20px;\r\n        max-width: 100px;\r\n    }\r\n\r\n    .badge-featured {\r\n        top: 4%;\r\n        left: 4%;\r\n        z-index: 1;\r\n    }\r\n}\r\n\r\n#modals {\r\n    .modal-content {\r\n        .card-advertisement {\r\n            .badge-featured {\r\n                top: 4%;\r\n                left: 4%;\r\n                z-index: 2;\r\n            }\r\n        }\r\n    }\r\n}\r\n</style>\r\n","<!-- We dont need a template as the template is in the cshtml file -->\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from 'vue'\r\nimport AdvertisementFinder from './advertisement-finder.vue'\r\n\r\nexport default defineComponent({\r\n    components: {\r\n        AdvertisementFinder\r\n    }\r\n})\r\n</script>\r\n","<template>\r\n    <div class=\"gray-bg block\">\r\n        <div class=\"container\">\r\n            <div class=\"block__header\">\r\n                <h2>Latest Advertisement</h2>\r\n            </div>\r\n        </div>\r\n        <FadeInOut mode=\"out-in\" :duration=\"300\">\r\n            <GridPlaceholder\r\n                v-if=\"isBusy\"\r\n                grid-config=\"3x1\"\r\n                grid-config-lg=\"3x1\"\r\n                grid-item-ratio=\"4x3\"\r\n                class=\"container\"\r\n            ></GridPlaceholder>\r\n            <div v-else>\r\n                <div v-if=\"paginatedData?.items.length !== 0\">\r\n                    <div class=\"latest-advertisement block__body mb-5 overflow-hidden\">\r\n                        <div class=\"container\">\r\n                            <GenericCarousel\r\n                                class=\"slides-equal-height\"\r\n                                swiper-class=\"py-4 overflow-visible\"\r\n                                :config=\"{\r\n                                    slidesPerView: 1,\r\n                                    spaceBetween: 24,\r\n                                    autoplay: {\r\n                                        delay: 4200,\r\n                                        disableOnInteraction: false,\r\n                                    },\r\n                                    breakpoints:\r\n                                        {\r\n                                            720:\r\n                                                {\r\n                                                    slidesPerView: 2\r\n                                                },\r\n                                            1200:\r\n                                                {\r\n                                                    slidesPerView: 3,\r\n                                                    initialSlide: 1\r\n                                                },\r\n                    \r\n                                        }\r\n                                }\">\r\n                                <div v-for=\"(item, index) in paginatedData?.items.slice(0, 5)\" class=\"swiper-slide\">\r\n                                    <div class=\"card border-0 shadow h-100 bg-transparent\">\r\n                                        <div class=\"card-body p-0 vstack\">\r\n                                            <div class=\"position-relative\">\r\n                                                <!-- <div class=\"badge-featured position-absolute\">\r\n                                                    <div class=\"badge bg-secondary rounded-pill px-2\">\r\n                                                        Featured\r\n                                                    </div>\r\n                                                </div> -->\r\n                                                <div v-if=\"item.advertisement.advertisementImages && item.advertisement.advertisementImages.length === 1\" class=\"ratio ratio-16x9\">\r\n                                                <VLazyImage\r\n                                                    :src=\"item.advertisement.advertisementImages[0].url\"\r\n                                                    :alt=\"item.advertisement.advertisementImages[0].name\"\r\n                                                    class=\"v-lazy-image-fades-in\"\r\n                                                ></VLazyImage>\r\n                                                </div>\r\n                                                <SwiperVue\r\n                                                    v-else-if=\"item.advertisement.advertisementImages && item.advertisement.advertisementImages.length > 1\"\r\n                                                    :modules=\"[PaginationCarousel, Navigation]\"\r\n                                                    :navigation=\"true\"\r\n                                                    class=\"swiperButton\"\r\n                                                >\r\n                                                    <SwiperSlide v-for=\"image in item.advertisement.advertisementImages\">\r\n                                                        <div class=\"ratio ratio-16x9\">\r\n                                                            <VLazyImage\r\n                                                                :src=\"image.url\"\r\n                                                                :alt=\"image.name\"\r\n                                                                class=\"v-lazy-image-fades-in\"\r\n                                                            ></VLazyImage>\r\n                                                        </div>\r\n                                                    </SwiperSlide>\r\n                                                </SwiperVue>\r\n                                                <div v-else-if=\"!item.advertisement.advertisementImages || (item.advertisement.advertisementImages && item.advertisement.advertisementImages.length === 0)\" class=\"ratio ratio-16x9\">\r\n                                                    <div class=\"bg-gray-200 d-flex align-items-center justify-content-center\">\r\n                                                        <p class=\"mb-0 heading-s text-muted\">No Image</p>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"bg-white p-3 vstack h-100 justify-content-between\">\r\n                                                <AdvertisementDetailModal :advertisement=\"item.advertisement\" :index=\"index\">\r\n                                                    <template #member-info>\r\n                                                        <img :src=\"item.logoIcon.url\" :alt=\"item.logoIcon.name\" class=\"img-fluid img-company-logo\">\r\n                                                        <p class=\"caption fw-semibold text-muted mb-0\">{{ item.memberName }}</p>\r\n                                                    </template>\r\n                                                </AdvertisementDetailModal>\r\n                                                <div class=\"d-flex flex-column justify-content-end\">\r\n                                                    <div class=\"hstack gap-2 mb-3\">\r\n                                                        <img :src=\"item.logoIcon.url\" :alt=\"item.logoIcon.name\" class=\"img-fluid img-company-logo\">\r\n                                                        <p class=\"caption fw-semibold text-muted mb-0\">{{ item.memberName }}</p>\r\n                                                    </div>\r\n                                                    <div class=\"hstack gap-2\">\r\n                                                        <Icon symbol=\"calendar\" class=\"icon-l\"></Icon>\r\n                                                        <p class=\"caption text-gray-500 mb-0\">\r\n                                                            {{ formatDateAsString(item.advertisement.startDate, 'DD MMM YYYY') }} - {{ formatDateAsString(item.advertisement.endDate, 'DD MMM YYYY') }}\r\n                                                        </p>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </GenericCarousel>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"container\">\r\n                        <div class=\"d-flex justify-content-center\">\r\n                            <a href=\"/advertisement\" class=\"button button--default button--theme button--solid\">View All</a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div v-else>\r\n                    <p class=\"body-l text-center my-4\">There are no advertisements to show at this time.</p>\r\n                </div>\r\n            </div>\r\n        </FadeInOut>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { storeToRefs } from 'pinia';\r\nimport { useBroadcastPortalAdvertisementListingStore } from '../../store/advertisements';\r\nimport { GenericCarousel, GridPlaceholder, Icon, VLazyImage } from '@/modules/core/components';\r\nimport { formatDateAsString } from '@/modules/core/utilities';\r\nimport {Swiper, Pagination as PaginationCarousel, Navigation} from \"swiper\";\r\nimport { Swiper as SwiperVue, SwiperSlide } from \"swiper/vue\";\r\n\r\nimport 'swiper/css';\r\nimport 'swiper/css/pagination';\r\nimport 'swiper/css/navigation';\r\nimport AdvertisementDetailModal from './advertisement-detail-modal.vue';\r\nimport { FadeInOut } from 'vue3-transitions';\r\n\r\nconst advertisementListingStore = useBroadcastPortalAdvertisementListingStore()\r\nconst { filters, paginatedData, isBusy } = storeToRefs(advertisementListingStore)\r\n\r\nfilters.value.searchTerms = ''\r\n\r\nadvertisementListingStore.loadAdvertisement()\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.latest-advertisement {\r\n    .swiperButton > :nth-child(2), .swiperButton > :nth-child(3) {\r\n        --swiper-navigation-size: 12px;\r\n        --swiper-navigation-color: #6c757d;\r\n        \r\n        background-color: white;\r\n        padding: 0.45rem 0.6rem;\r\n        border-radius: 999px;\r\n        outline: 1px solid $gray-400;\r\n    }\r\n\r\n    .img-company-logo {\r\n        max-height: 20px;\r\n        max-width: 100px;\r\n    }\r\n}\r\n</style>","<!-- We dont need a template as the template is in the cshtml file -->\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from 'vue'\r\nimport { GenericCarousel, Icon, VLazyImage } from '@/modules/core/components';\r\nimport LatestAdvertisementCarousel from './latest-advertisement-carousel.vue';\r\n\r\nexport default defineComponent({\r\n    components: {\r\n        GenericCarousel,\r\n        Icon,\r\n        VLazyImage,\r\n        LatestAdvertisementCarousel,\r\n    }\r\n})\r\n</script>\r\n","<template>\r\n    <span v-if=\"showNewLabel\" class=\"advertisement-badge\"> New </span>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { storeToRefs } from 'pinia';\r\nimport { useBroadcastPortalAdvertisementListingStore } from '../../store/advertisements';\r\nimport { onMounted, ref } from 'vue';\r\n\r\ninterface Props {\r\n    advertisementNumberOfDaysMs: number;\r\n}\r\n\r\nconst props = defineProps<Props>()\r\n\r\nconst advertisementListingStore = useBroadcastPortalAdvertisementListingStore();\r\nconst { paginatedData } = storeToRefs(advertisementListingStore);\r\n\r\nconst showNewLabel = ref(false);\r\n\r\nonMounted(async () => {\r\n    await advertisementListingStore.loadAdvertisement();\r\n    updateNewLabel();\r\n});\r\n\r\nconst updateNewLabel = () => {\r\n    const advertisementCreateDate = paginatedData.value?.items[0]?.advertisement?.lastUpdateDateTime;\r\n    if (!advertisementCreateDate) {\r\n        showNewLabel.value = false;\r\n        return;\r\n    }\r\n    const currentDate = new Date().getTime();\r\n\r\n    showNewLabel.value = currentDate - new Date(advertisementCreateDate).getTime() <= props.advertisementNumberOfDaysMs;\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.advertisement-badge {\r\n    background-color:#0058ff;\r\n    color: white;\r\n    font-size: 9px;\r\n    font-weight: 300;\r\n    letter-spacing: 1px;\r\n    padding: 0 8px;\r\n    border-radius: 15px;\r\n    position: absolute;\r\n    right: -5px;\r\n    top: 15%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    line-height: 1;\r\n    height: 18px;\r\n}\r\n</style>","<script lang=\"ts\">\r\nimport { defineComponent } from 'vue';\r\nimport AdvertisementBadge from './advertisement-badge.vue';\r\n\r\nexport default defineComponent({\r\n    components: {\r\n        AdvertisementBadge\r\n    }\r\n})\r\n</script>\r\n","<!-- We dont need a template as the template is in the cshtml file -->\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from 'vue';\r\nimport { Tabs, TabPane, Icon, GenericCarousel, Avatar, VLazyImage, Modal } from '@/modules/core/components';\r\nimport FindMemberShowPortfolioVideo from './find-member-show-portfolio-video.vue';\r\nimport { SwiperSlide } from \"swiper/vue\";\r\nimport { AdvertisementImageCarousel } from '@/modules/broadcast-portal/components/advertisement/index'\r\n\r\nexport default defineComponent({\r\n    components: {\r\n        Icon,\r\n        GenericCarousel,\r\n        Avatar,\r\n        Tabs,\r\n        TabPane,\r\n        VLazyImage,\r\n        Modal,\r\n        FindMemberShowPortfolioVideo,\r\n        SwiperSlide,\r\n        AdvertisementImageCarousel,\r\n    }\r\n})\r\n</script>\r\n","<template>\r\n    <div class=\"gray-bg py-5\">\r\n        <div class=\"container\">\r\n            <h1 class=\"heading-l fw-bold\">BCF Submission</h1>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col-md-10 mb-3 mb-md-0\">\r\n                    <div class=\"row gy-3 gx-2\">\r\n                        <div class=\"col-md-4\">\r\n                            <input\r\n                                id=\"txt-searchTerms\"\r\n                                name=\"searchTerms\"\r\n                                placeholder=\"Search through BCF listings...\"\r\n                                v-model.lazy=\"filters.keywords\"\r\n                                @change=\"onSearchChange\"\r\n                                type=\"text\">\r\n                        </div>\r\n                        <div class=\"col-md-2\">\r\n                            <SelectControl\r\n                                name=\"submissionYear\"\r\n                                class=\"select-reset mb-0\"\r\n                                :items=\"submissionYearCategories\"\r\n                                v-model=\"filters.submissionYear\"\r\n                                item-text=\"name\"\r\n                                item-value=\"key\"\r\n                            ></SelectControl>\r\n                        </div>\r\n                        <div class=\"col-md-3\">\r\n                            <SelectControl\r\n                                name=\"category\"\r\n                                class=\"select-reset mb-0\"\r\n                                :items=\"generalGenreCategories\"\r\n                                v-model=\"filters.categoryType\"\r\n                                @change=\"onChangeCategoryType\"\r\n                                item-text=\"name\"\r\n                                item-value=\"key\"\r\n                            ></SelectControl>\r\n                        </div>\r\n                        <div class=\"col-md-3\">\r\n                            <SelectControl\r\n                                name=\"subCategory\"\r\n                                class=\"select-reset mb-0\"\r\n                                :items=\"selectedSubCategories\"\r\n                                v-model=\"filters.subCategory\"\r\n                                item-text=\"name\"\r\n                                item-value=\"key\"\r\n                            ></SelectControl>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-md-2\">\r\n                    <button\r\n                        @click=\"onSearchChange\"\r\n                        class=\"btn btn-secondary btn-lg w-100\"\r\n                        type=\"button\">\r\n                        Search\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bcf-listing container pt-5 py-4\">\r\n        <p v-if=\"paginatedData && paginatedData.count\" class=\"subheading text-muted\">\r\n            Showing\r\n            <div v-if=\"isBusy\" class=\"placeholder bg-primary w-25 subheading\"></div> \r\n            <span v-else>{{ paginationStatusLabel }}</span>\r\n        </p>\r\n        <FadeInOut mode=\"out-in\" :duration=\"300\">\r\n            <GridPlaceholder\r\n                v-if=\"isBusy\"\r\n                grid-config=\"1x3\"\r\n                grid-config-lg=\"3x2\"\r\n                grid-item-ratio=\"4x3\"\r\n            ></GridPlaceholder>\r\n            <div v-else-if=\"paginatedData && paginatedData.count > 0\">\r\n                <div class=\"row gy-3\">\r\n                    <div v-if=\"paginatedData && paginatedData.items\" v-for=\"(item, index) in paginatedData?.items\" class=\"col-md-6 col-lg-4\">\r\n                        <div class=\"card rounded-3 border border-1 h-100 bg-transparent\">\r\n                            <div class=\"position-relative\">\r\n                                <div class=\"ratio ratio-16x9\">\r\n                                    <img :src=\"item.thumbnail\" alt=\"test\">\r\n                                </div>\r\n                                <div class=\"position-absolute top-0 start-0 p-3\">\r\n                                    <div class=\"d-flex\">\r\n                                        <div class=\"badge px-2 rounded-pill text-capitalize text-white text-bg-primary\"\r\n                                            :class=\"{\r\n                                                'text-bg-warning': item.submissionYear === 2023\r\n                                            }\">\r\n                                            <span v-if=\"item.submissionYear === 2023\">2023</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"card-body p-3 vstack\">\r\n                                <div class=\"bg-white vstack h-100 justify-content-between\">\r\n                                    <BcfSubmissionDetailModal :bcf-listing-detail=\"item\"></BcfSubmissionDetailModal>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div v-else>\r\n                <p class=\"display-l text-muted\">Sorry, there are no BCF Submissions matching your criteria...</p>\r\n            </div>\r\n        </FadeInOut>\r\n        <div class=\"d-flex pt-4\">\r\n            <Pagination\r\n                v-if=\"paginatedData?.currentPageNumber\"\r\n                :page-number=\"paginatedData?.currentPageNumber\"\r\n                :total-pages=\"paginatedData?.totalPages\"\r\n                :pages-per-view=\"paginatedData.pageSize\"\r\n                @page-change=\"onPageChange\"\r\n            ></Pagination>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { storeToRefs } from 'pinia';\r\nimport { useBroadcastPortalBcfListingStore } from '../../store';\r\nimport { computed, ref } from 'vue';\r\nimport { GridPlaceholder, Pagination } from '@/modules/core/components';\r\nimport { BcfSubmissionDetailModal } from '.';\r\nimport { FadeInOut } from 'vue3-transitions';\r\nimport SelectControl from '@/modules/core/components/forms/select-control.vue';\r\n\r\nconst bcfListingStore = useBroadcastPortalBcfListingStore()\r\nconst { filters, isBusy, paginatedData } = storeToRefs(bcfListingStore)\r\n\r\n// const categories = ref([\r\n//     { name: 'All', key: '' },\r\n//     { name: 'General', key: 'generalCategory' },\r\n//     { name: 'Institute of Higher Learning', key: 'ihlCategory' },\r\n// ]);\r\n\r\nconst generalGenreCategories = ref([\r\n    { name: 'All', key: ''},\r\n    { name: 'Drama', key: 'drama' },\r\n    { name: 'Comedy', key: 'comedy' },\r\n    { name: 'Horror', key: 'horror' },\r\n    { name: 'Advertisement', key: 'advertisement' },\r\n    { name: 'Documentary', key: 'documentary' },\r\n    { name: 'Public Service Announcement', key: 'psa' },\r\n    { name: 'Music Video', key: 'musicvideo' },\r\n    { name: 'Featured Film', key: 'featured' },\r\n    { name: 'Short Film', key: 'shortfilm' },\r\n    { name: 'Short Film under Institute of Higher Learning (IHL)', key: 'shortfilmihl' },\r\n])\r\n\r\nconst ihlGenreCategories = ref([\r\n    { name: 'All', key: ''},\r\n    { name: 'Fiction', key: 'Fiction' },\r\n    { name: 'Non-Fiction', key: 'Non-Fiction' },\r\n    { name: 'Documentary (IHL)', key: 'IHL-Documentary' },\r\n    { name: 'Animation', key: 'Animation' },\r\n])\r\n\r\nconst submissionYearCategories = ref([\r\n    { name: 'All', key: '', isNull: true},\r\n    { name: '2023', key: 2023},\r\n    { name: '2024', key: 2024},\r\n])\r\n\r\nconst selectedSubCategories = computed(() => {\r\n    if (filters.value.categoryType === 'shortfilmihl') {\r\n        return ihlGenreCategories.value;\r\n    }\r\n    \r\n    return [{ name: 'Select Subcategory', key: '' }];\r\n});\r\n\r\nconst onChangeCategoryType = () => {\r\n    filters.value.subCategory = selectedSubCategories.value[0].key;\r\n}\r\n\r\nconst paginationStatusLabel = computed(() => {\r\n\r\n    const min = ((paginatedData.value!.currentPageNumber - 1) * paginatedData.value!.pageSize) + 1;\r\n    const max = Math.min(paginatedData.value!.currentPageNumber * paginatedData.value!.pageSize, paginatedData.value!.count);\r\n\r\n    return `${min}-${max} out of ${paginatedData.value!.count}`;\r\n})\r\n\r\nconst onPageChange = (pageNumber: number) => {\r\n    filters.value.pageNumber = pageNumber;\r\n    bcfListingStore.loadBcfListing();\r\n}\r\n\r\nconst onSearchChange = () => {\r\n    bcfListingStore.filters.keywords = filters.value.keywords;\r\n    bcfListingStore.filters.subCategory = filters.value.subCategory;\r\n    bcfListingStore.filters.categoryType = filters.value.categoryType;\r\n    bcfListingStore.filters.submissionYear = filters.value.submissionYear;\r\n    bcfListingStore.filters.pageNumber = 1;\r\n    bcfListingStore.loadBcfListing();\r\n}\r\n\r\nbcfListingStore.loadBcfListing()\r\n</script>\r\n\r\n<style>\r\n\r\n.select-reset select {\r\n    margin-bottom: 0;\r\n}\r\n\r\n</style>","<!-- We dont need a template as the template is in the cshtml file -->\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from 'vue';\r\nimport { Icon } from '@/modules/core/components'\r\nimport BcfListing from './bcf-listing.vue'\r\n\r\nexport default defineComponent({\r\n    components: {\r\n        Icon,\r\n        BcfListing\r\n    }\r\n})\r\n</script>\r\n","<template>\r\n    <Modal v-if=\"bcfListingDetail\" @hidden=\"stopVideos\" modal-title=\"Submission Detail\" size=\"modal-lg\" class=\"bcf-submission-detail-modal modal-upload-content\">\r\n        <template #activator=\"{ show }\">\r\n            <div class=\"vstack text-decoration-none text-dark\">\r\n                <h2 class=\"heading-l fw-semibold text-gray-700 pe-lg-4\">{{ bcfListingDetail.contentTitleName }}</h2>\r\n                <div class=\"d-flex gap-3 flex-wrap\">\r\n                    <div v-if=\"bcfListingDetail.submissionYear === 2024\" class=\"hstack gap-2\">\r\n                        <Icon symbol=\"options-lines\" class=\"icon-m text-muted\"></Icon>\r\n                        <p class=\"caption text-gray-500 mb-0\">{{ getCategoryFullName(bcfListingDetail.category) }}</p>\r\n                    </div>\r\n                    <div v-if=\"bcfListingDetail.submissionYear === 2024 && bcfListingDetail.subCategory\" class=\"hstack gap-2\">\r\n                        <Icon symbol=\"grid-fill\" class=\"icon-m text-muted\"></Icon>\r\n                        <p class=\"caption text-gray-500 mb-0\">{{ getCategoryFullName(bcfListingDetail.subCategory) }}</p>\r\n                    </div>\r\n                    <div class=\"hstack gap-2\">\r\n                        <Icon symbol=\"people-fill\" class=\"icon-m text-muted\"></Icon>\r\n                        <p v-if=\"bcfListingDetail.companyName\" class=\"caption text-gray-500 mb-0\">{{ bcfListingDetail.companyName }}</p>\r\n                        <p v-else class=\"caption text-gray-500 mb-0\">{{ bcfListingDetail.firstName }} {{ bcfListingDetail.lastName }}</p>\r\n                    </div>\r\n                    <div class=\"hstack gap-2\">\r\n                        <Icon symbol=\"calendar\" class=\"icon-m\"></Icon>\r\n                        <p class=\"caption text-gray-500 mb-0\">\r\n                            {{ formatDateAsString(bcfListingDetail.submissionDate, 'DD MMM YYYY') }}\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex\">\r\n                    <a \r\n                        v-if=\"bcfListingDetail.isUsingExternalLink\" \r\n                        :href=\"bcfListingDetail.externalLink\" \r\n                        target=\"_blank\"\r\n                        class=\"btn btn-lg btn-outline-secondary rounded-pill mt-3 stretched-link caption fw-bold\">\r\n                        Watch Video\r\n                    </a>\r\n                    <button \r\n                        v-else \r\n                        @click=\"show\" \r\n                        class=\"btn btn-lg btn-outline-secondary rounded-pill mt-3 stretched-link caption fw-bold\" \r\n                        type=\"button\">\r\n                        Watch video\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </template>\r\n        <div class=\"card card-advertisement border-0 h-100 bg-transparent\">\r\n            <div class=\"card-body p-4 vstack justify-content-between\">\r\n                <div class=\"position-relative\">\r\n                    <div class=\"ratio ratio-16x9\">\r\n                        <iframe\r\n                            v-if=\"bcfListingDetail.videoUID\"\r\n                            :src=\"`https://customer-fp0mjytj2t8cinei.cloudflarestream.com/${bcfListingDetail.videoUID}/iframe`\"\r\n                            style=\"border: none; background: #ffffff\"\r\n                            allowtransparency=\"true\"\r\n                            height=\"720\"\r\n                            width=\"1280\"\r\n                            allow=\"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;\"\r\n                            allowfullscreen=\"true\"\r\n                        ></iframe>\r\n                        <div v-else class=\"bg-gray-200 d-flex align-items-center justify-content-center\">\r\n                            <p class=\"mb-0 heading-s text-muted\">No Image</p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"vstack flex-grow-1\">\r\n                    <a class=\"text-decoration-none\">\r\n                        <h3 class=\"heading-l fw-semibold text-gray-700 mt-3 pe-lg-4\">{{ bcfListingDetail.contentTitleName }}</h3>\r\n                    </a>\r\n                    <!-- <p class=\"body-s text-gray-500 mb-3\">{{ bcfListingDetail }}</p> -->\r\n                    <div class=\"d-flex justify-content-between\">\r\n                        <div>\r\n                            <div class=\"hstack gap-3\">\r\n                                <div class=\"hstack gap-2\">\r\n                                    <Icon symbol=\"people-fill\" class=\"icon-m text-muted\"></Icon>\r\n                                    <p v-if=\"bcfListingDetail.companyName\" class=\"caption text-gray-500 mb-0\">{{ bcfListingDetail.companyName }}</p>\r\n                                    <p v-else class=\"caption text-gray-500 mb-0\">{{ bcfListingDetail.firstName }} {{ bcfListingDetail.lastName }}</p>\r\n                                </div>\r\n                                <div class=\"hstack gap-2\">\r\n                                    <Icon symbol=\"calendar\" class=\"icon-m\"></Icon>\r\n                                    <p class=\"caption text-gray-500 mb-0\">\r\n                                        {{ formatDateAsString(bcfListingDetail.submissionDate, 'DD MMM YYYY') }}\r\n                                    </p>\r\n                                </div>\r\n                                <div class=\"d-flex\">\r\n                                    <div class=\"badge px-2 rounded-pill text-capitalize text-white text-bg-primary\"\r\n                                        :class=\"{\r\n                                            'text-bg-primary': bcfListingDetail.category === 'industry',\r\n                                            'text-bg-secondary': bcfListingDetail.category === 'open'\r\n                                        }\">\r\n                                        <span v-if=\"bcfListingDetail.category === 'industry'\">Industry Category</span>\r\n                                        <span v-if=\"bcfListingDetail.category === 'open'\">Open Category</span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </Modal>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { Icon, Modal } from '@/modules/core/components';\r\nimport { formatDateAsString } from '@/modules/core/utilities';\r\nimport { BcfListing } from '../../types';\r\nimport { onBeforeUnmount, ref } from 'vue';\r\nimport { getCategoryFullName } from '@/modules/broadcast-portal/components';\r\n\r\ninterface Props {\r\n    bcfListingDetail: BcfListing;\r\n    index?: number;\r\n}\r\nconst props = defineProps<Props>()\r\n\r\nconst stopVideos = () => {\r\n    document.querySelectorAll('iframe').forEach(item => { item.src = item.src });\r\n    document.querySelectorAll('video').forEach(item => { item.pause() });\r\n};\r\n\r\nonBeforeUnmount(() => {\r\n    stopVideos();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n</style>","export const getCategoryFullName = (abbreviatedCategory: string): string => {\r\n    const categoryMap: Record<string, string> = {\r\n        'drama': 'Drama',\r\n        'comedy': 'Comedy',\r\n        'horror': 'Horror',\r\n        'advertisement': 'Advertisement',\r\n        'documentary': 'Documentary',\r\n        'psa': 'Public Service Announcement',\r\n        'musicvideo': 'Music Video',\r\n        'featured': 'Featured Film',\r\n        'shortfilm': 'Short Film',\r\n        'shortfilmihl': 'Short Film under IHL',\r\n        'IHL-Documentary': 'Documentary (IHL)',\r\n    };\r\n\r\n    return categoryMap[abbreviatedCategory] || abbreviatedCategory;\r\n}","import \"./scss/core.scss\";\r\nimport \"./scss/components/index.scss\";\r\nimport \"./scss/_global.scss\";\r\n// import \"./scss/index.scss\";\r\nimport 'virtual:svg-icons-register';\r\nimport pinia from \"./store\";\r\nimport { createApp } from 'vue';\r\nimport { \r\n    FindServicesApp, \r\n    ServiceDetailsApp, \r\n    FindMembersApp, \r\n    MemberDetailsApp, \r\n    FindAdvertisementApp,\r\n    AdvertisementCarouselApp,\r\n    BcfListingApp,\r\n    AdvertisementApp,\r\n} from './components';\r\n\r\ncreateApp(FindServicesApp).use(pinia).mount('.find-services-app')\r\ncreateApp(ServiceDetailsApp).use(pinia).mount('.service-details-app')\r\ncreateApp(FindMembersApp).use(pinia).mount('.find-members-app')\r\ncreateApp(MemberDetailsApp).use(pinia).mount('.member-details-app')\r\ncreateApp(FindAdvertisementApp).use(pinia).mount('.find-advertisement-app')\r\ncreateApp(AdvertisementCarouselApp).use(pinia).mount('.advertisement-carousel-app')\r\ncreateApp(BcfListingApp).use(pinia).mount('.bcf-listing-app')\r\ncreateApp(AdvertisementApp).use(pinia).mount('.advertisement-app')\r\n\r\n// configureAxios();"],"names":["getFacebookSharerUrl","url","getTwitterShareUrl","text","shareUrl","getTelegramShareUrl","getWhatsAppShareUrl","_sfc_main$t","defineComponent","Icon","props","title","isSupported","share","useShare","handleNativeShare","handleFacebookShare","openCenteredPopup","handleTwitterShare","handleTelegramShare","whatsAppUrl","computed","_resolveComponent","_normalizeClass","_ctx","_createElementVNode","_cache","_withModifiers","args","_createVNode","_component_Icon","_hoisted_1","_createElementBlock","_sfc_main$s","value","$props","$setup","$data","$options","_openBlock","_Fragment","_renderList","_","index","key","__props","navTabsClassList","classList","navTabs","ref","navTabsRef","tabInstances","registerTabPane","id","reactive","nextTick","triggerEl","unref","newTabInstance","Tab","unregisterTabPane","navTabIdx","onBeforeUnmount","x","provide","toRefs","tabsContext","inject","onMounted","onUnmounted","paginationStatusLabel","count","pageSize","currentPageNumber","totalPages","min","max","useBroadcastPortalServiceListingStore","defineStore","request","axios","endpoints","response","useErrorHandling","searchParams","searchTerms","pageNumber","replaceState","currUrl","popstateHandler","useBroadcastPortalMembersListingStore","state","_a","memberType","activeMember","newActiveMember","memberId","useBroadcastPortalBcfListingStore","pinia","createPinia","broadcastPortalServiceStore","paginatedData","isBusy","filters","storeToRefs","onPageChange","onSearchChange","_sfc_main$l","ServicesFinder","_sfc_main$k","GenericCarousel","ShareIcons","Avatar","memberListingStore","activeMemberId","uploadedVideoUrl","isLoading","strippedHtml","regex","mdAndGreater","useBreakpoints","breakpointsBootstrapV5","jobSearch","isExpired","endDate","currentDate","getPublicPortfolios","getPublicServices","getPublicAdvertisements","setActiveMemberListing","event","item","_b","_sfc_main$c","MembersFinder","isUploaded","portfolioStore","usePortfolioStore","useBroadcastPortalAdvertisementListingStore","advertisementListingStore","_sfc_main$9","AdvertisementFinder","_sfc_main$7","VLazyImage","LatestAdvertisementCarousel","showNewLabel","updateNewLabel","advertisementCreateDate","_c","_sfc_main$4","AdvertisementBadge","_sfc_main$3","Tabs","TabPane","Modal","FindMemberShowPortfolioVideo","SwiperSlide","AdvertisementImageCarousel","bcfListingStore","generalGenreCategories","ihlGenreCategories","submissionYearCategories","selectedSubCategories","onChangeCategoryType","_sfc_main$1","BcfListing","stopVideos","getCategoryFullName","abbreviatedCategory","createApp","FindServicesApp","ServiceDetailsApp","FindMembersApp","MemberDetailsApp","FindAdvertisementApp","AdvertisementCarouselApp","BcfListingApp","AdvertisementApp"],"mappings":"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"}