{"version":3,"file":"JobListItem.0dd5c5ff.js","sources":["../../../../src/components/JobListItem.vue"],"sourcesContent":["<script setup>\nimport ShortlistJobBtn from 'components/btn/ShortlistJobBtn.vue';\nimport CompanyAvatar from 'components/CompanyAvatar.vue';\nimport GenericChip from 'components/GenericChip.vue';\nimport JobAvatar from 'components/JobAvatar.vue';\nimport JobHeaderInfo from 'components/JobHeaderInfo.vue';\nimport LocationChip from 'components/LocationChip.vue';\nimport AppRoute from 'src/router/app-route';\nimport { Route } from 'src/router/routes';\nimport { formattedRemuneration } from 'src/utils/job-utils';\nimport { computed, ref } from 'vue';\nimport { useRouter } from 'vue-router';\nimport { getRelativeTime } from 'utils/date-utils';\n\nconst $emit = defineEmits(['click']);\n\nconst $props = defineProps({\n    job: {\n        type: Object,\n        required: true\n    },\n    inPreviewContext: {\n        type: Boolean,\n        default: false\n    },\n    minimal: {\n        type: Boolean,\n        default: false\n    },\n    dense: {\n        type: Boolean,\n        default: false\n    },\n    active: {\n        type: Boolean,\n        default: false\n    },\n    hideShortlistBtn: {\n        type: Boolean,\n        default: false\n    },\n    openSeparateTab: {\n        type: Boolean,\n        default: false\n    }\n});\n\nconst $router = useRouter();\n\n/** @type {import('vue').Ref<HTMLElement|null>} */\nconst jobListItemElement = ref(null);\n\nconst formattedRemunerationRange = computed(() => formattedRemuneration(\n    $props.job.scopes[0].location.currencyCode,\n    $props.job.scopes[0].remuneration.range[0],\n    $props.job.scopes[0].remuneration.range[1],\n    $props.job.scopes[0].remuneration.cycle\n));\n\nconst resultPageRouteName = computed(() => {\n    const parentRoute = getPredefinedParentRoute($router.currentRoute.value);\n    switch (parentRoute?.name) {\n        case Route.SearchResultsPage:\n            return Route.JobResultPage;\n        case Route.ShortlistPage:\n            return Route.ShortlistResultPage;\n        default:\n            return Route.JobPage;\n    }\n});\n\nfunction getPredefinedParentRoute(route) {\n    return [...route.matched]\n        .reverse()\n        .find(r => [Route.SearchResultsPage, Route.ShortlistPage].includes(r.name));\n}\n\nfunction getJobPageUrl() {\n    if ($props.inPreviewContext) {\n        return null;\n    }\n    return AppRoute.build(Route.JobPage, { jobScopeId: $props.job.scopes[0].id }).url;\n}\n\nasync function gotoJobResultPage() {\n    if ($props.inPreviewContext) {\n        return;\n    }\n    const destinationRoute = AppRoute.build(resultPageRouteName.value, { jobScopeId: $props.job.scopes[0].id });\n    if ($props.openSeparateTab) {\n        window.open(destinationRoute.getResolvedUrl($router), '_blank');\n    } else {\n        await $router.push(AppRoute.build(resultPageRouteName.value, { jobScopeId: $props.job.scopes[0].id }));\n    }\n    $emit('click', jobListItemElement.value);\n}\n</script>\n\n<template>\n    <q-card ref=\"jobListItemElement\" :class=\"[ 'job-list-item', { 'clickable cursor-pointer': !inPreviewContext && job.status !== 'Expired', 'active': active, 'dense': dense } ]\" rounded flat>\n        <a\n            v-if=\"job.status !== 'Expired'\"\n            @click.prevent=\"gotoJobResultPage\"\n            :href=\"getJobPageUrl(job)\"\n            :aria-label=\"`View the ${job.title} Job at ${job.company.name}`\"\n            class=\"job-link\"\n        >\n            <span class=\"invisible\">View job</span>\n        </a>\n        <div v-if=\"job.status === 'Expired'\" class=\"expired-overlay\"></div>\n        <q-card-section class=\"q-pa-lg\">\n            <div :class=\"['job-list-item-container flex', dense ? 'column' : 'row-md']\">\n                <div class=\"col\">\n                    <div class=\"row q-col-gutter-x-md flex items-center no-wrap\">\n                        <JobHeaderInfo :job :minimal :dense/>\n                        <div v-if=\"!minimal && !inPreviewContext\" class=\"self-start q-ml-auto q-mr-none\">\n                            <ShortlistJobBtn :job-scope=\"job.scopes[0]\" class=\"z-top\"/>\n                        </div>\n                        <div v-else-if=\"minimal\" class=\"self-start\">\n                            <JobAvatar v-if=\"job.logoUrl\" :job size=\"66px\" class=\"rounded-borders\" hide-fallback/>\n                            <CompanyAvatar v-else :company=\"job.company\" size=\"66px\" class=\"rounded-borders\" hide-fallback/>\n                        </div>\n                    </div>\n                    <div class=\"flex row q-mb-none q-mt-md no-wrap\">\n                        <div class=\"q-gutter-x-xs\">\n                            <LocationChip :location=\"job.scopes[0].location\"/>\n                            <GenericChip :label=\"formattedRemunerationRange\"/>\n                            <GenericChip :label=\"job.employmentType\"/>\n                            <GenericChip :label=\"job.scopes[0].workLocation\"/>\n                        </div>\n                        <div v-if=\"minimal && !inPreviewContext && !hideShortlistBtn\" class=\"self-end q-ml-auto q-mr-none\">\n                            <ShortlistJobBtn :job-scope=\"job.scopes[0]\" class=\"z-top\"/>\n                        </div>\n                    </div>\n                    <template v-if=\"!minimal && job.highlights && job.highlights.length > 0\">\n                        <ul class=\"q-mt-md q-mb-none q-pl-md\">\n                            <li v-for=\"(highlight, i) of job.highlights\" :key=\"i\">{{ highlight }}</li>\n                        </ul>\n                    </template>\n                    <template v-if=\"!minimal && job.summary\">\n                        <p class=\"q-mb-none q-mt-md\">{{ job.summary }}</p>\n                    </template>\n                    <template v-if=\"job.appliedAt\">\n                        <div class=\"flex row items-center q-col-gutter-x-sm q-mt-lg text-grey-8\">\n                            <q-icon name=\"sym_r_assignment_late\" size=\"sm\"/>\n                            <p class=\"text-overline text-uppercase q-mb-none q-mt-none\">Applied {{ getRelativeTime(job.appliedAt) }}.</p>\n                        </div>\n                    </template>\n                    <template v-if=\"job.status === 'Expired'\">\n                        <div class=\"flex row items-center q-col-gutter-x-sm q-mt-lg text-grey-8\">\n                            <q-icon name=\"sym_r_event_busy\" size=\"sm\"/>\n                            <p class=\"text-overline text-uppercase q-mb-none q-mt-none\">No longer available.</p>\n                        </div>\n                    </template>\n                </div>\n            </div>\n        </q-card-section>\n    </q-card>\n</template>\n\n<style scoped lang=\"scss\">\n.job-list-item {\n    position: relative;\n    scroll-margin: 16px !important;\n    transition: all 300ms ease-in-out, background-color 0ms, color 0ms;\n    width: 100%;\n\n    .body--dark & {\n        background: rgba($white, 0.07);\n    }\n\n    .expired-overlay {\n        background: rgba($grey-3, 0.5);\n        backdrop-filter: grayscale(1);\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: 99;\n    }\n\n    .job-list-item-container {\n        flex-wrap: nowrap;\n    }\n\n    .job-link {\n        height: 100%;\n        position: absolute;\n        width: 100%;\n    }\n}\n\n.z-top {\n    z-index: 99 !important;\n}\n</style>\n"],"names":["$emit","__emit","$props","__props","$router","useRouter","jobListItemElement","ref","formattedRemunerationRange","computed","formattedRemuneration","resultPageRouteName","getPredefinedParentRoute","Route","route","getJobPageUrl","AppRoute","gotoJobResultPage","destinationRoute"],"mappings":"k7CAcA,MAAMA,EAAQC,EAERC,EAASC,EA+BTC,EAAUC,EAAS,EAGnBC,EAAqBC,EAAI,IAAI,EAE7BC,EAA6BC,EAAS,IAAMC,EAC9CR,EAAO,IAAI,OAAO,GAAG,SAAS,aAC9BA,EAAO,IAAI,OAAO,GAAG,aAAa,MAAM,GACxCA,EAAO,IAAI,OAAO,GAAG,aAAa,MAAM,GACxCA,EAAO,IAAI,OAAO,GAAG,aAAa,KACtC,CAAC,EAEKS,EAAsBF,EAAS,IAAM,CAEvC,OADoBG,EAAyBR,EAAQ,aAAa,KAAK,GAClD,WACZS,EAAM,kBACP,OAAOA,EAAM,mBACZA,EAAM,cACP,OAAOA,EAAM,4BAEb,OAAOA,EAAM,QAEzB,CAAC,EAED,SAASD,EAAyBE,EAAO,CACrC,MAAO,CAAC,GAAGA,EAAM,OAAO,EACnB,QAAQ,EACR,KAAK,GAAK,CAACD,EAAM,kBAAmBA,EAAM,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,CAClF,CAEA,SAASE,GAAgB,CACrB,OAAIb,EAAO,iBACA,KAEJc,EAAS,MAAMH,EAAM,QAAS,CAAE,WAAYX,EAAO,IAAI,OAAO,GAAG,EAAI,CAAA,EAAE,GAClF,CAEA,eAAee,GAAoB,CAC/B,GAAIf,EAAO,iBACP,OAEJ,MAAMgB,EAAmBF,EAAS,MAAML,EAAoB,MAAO,CAAE,WAAYT,EAAO,IAAI,OAAO,GAAG,EAAI,CAAA,EACtGA,EAAO,gBACP,OAAO,KAAKgB,EAAiB,eAAed,CAAO,EAAG,QAAQ,EAE9D,MAAMA,EAAQ,KAAKY,EAAS,MAAML,EAAoB,MAAO,CAAE,WAAYT,EAAO,IAAI,OAAO,GAAG,EAAI,CAAA,CAAC,EAEzGF,EAAM,QAASM,EAAmB,KAAK,CAC3C"}