feat(career-page): show total postings (#172)

app/components/Ui/Tag.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="bg-blue-100 px-2 py-1 border border-blue-300 rounded-lg text-blue-700 text-sm">
+    <slot />
+  </span>
+</template>

app/composables/state.ts

@@ -13,6 +13,10 @@ export function useOnboardingStatusState() {
   return useState<boolean>('onboarding-status', () => false);
 }
 
+export function useTotalActivePostingsState() {
+  return useState<number>('total-active-postings', () => 0);
+}
+
 export function useCareerSiteConfigObjectState() {
   return useObjectState<CareerSiteConfig>('career-site-config');
 }

app/pages/admin/applications.vue

@@ -58,9 +58,7 @@ watchEffect(() => {
           <span class="font-noto font-bold mr-2">
             {{ postingsById[posting] || '' }}
           </span>
-          <span class="bg-blue-100 px-2 py-1 border border-blue-300 rounded-lg text-blue-700 text-sm">
-            {{ applications[posting]?.length }} Applicants
-          </span>
+          <UiTag> {{ applications[posting]?.length }} Applicants </UiTag>
         </div>
         <div class="text-sm">
           <AdminApplicationRow

app/pages/index.vue

@@ -2,7 +2,7 @@
 const { data: postings } = await usePublicPostingsRepository();
 const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
 const { data: seoConfig } = useSeoConfigObjectState();
-
+const totalActivePostings = useTotalActivePostingsState();
 const publicConfig = useRuntimeConfig().public;
 
 let title: string = 'Careers'; // TODO: need better defaults (this will hardly be the case);
@@ -41,7 +41,10 @@ useSeoMeta({
 <template>
   <main class="grow w-full lg:w-2/3 mx-auto mt-20 p-2">
     <SiteHeader />
-    <h3 class="text-lg leading-snug text-zinc-600 font-bold mt-8 mb-2">Open Positions</h3>
+    <h3 class="text-lg leading-snug text-zinc-600 font-bold mt-8 mb-2">
+      Open Positions
+      <UiTag>{{ totalActivePostings }}</UiTag>
+    </h3>
     <div class="space-y-2" v-if="postings">
       <PostingCard v-for="posting in postings" :key="posting.id" :posting="posting" />
     </div>

app/plugins/setup-state.ts

@@ -3,18 +3,20 @@ export default defineNuxtPlugin(async () => {
   const onboardingStatus = useOnboardingStatusState();
   const careerSiteConfigObjectState = useCareerSiteConfigObjectState();
   const seoConfigObjectState = useSeoConfigObjectState();
+  const totalActivePostings = useTotalActivePostingsState();
 
   try {
     const publicConfigRequest = await useFetch('/api/public/config');
     if (!publicConfigRequest.data.value) {
       throw new Error('config not received in response ' + publicConfigRequest.data.value);
     }
-    const pubicConfig = publicConfigRequest.data.value;
+    const publicConfig = publicConfigRequest.data.value;
 
-    remoteAssetBase.value = pubicConfig.remoteAssetBase;
-    onboardingStatus.value = pubicConfig.onboardingStatus;
-    careerSiteConfigObjectState.setData(pubicConfig.settings.careerSite);
-    seoConfigObjectState.setData(pubicConfig.settings.seo);
+    remoteAssetBase.value = publicConfig.remoteAssetBase;
+    onboardingStatus.value = publicConfig.onboardingStatus;
+    totalActivePostings.value = publicConfig.totalActivePostings;
+    careerSiteConfigObjectState.setData(publicConfig.settings.careerSite);
+    seoConfigObjectState.setData(publicConfig.settings.seo);
   } catch (error) {
     console.error('error fetching remote-asset-config', error);
   }

server/api/public/config.get.ts

@@ -4,6 +4,7 @@ import type { CareerSiteConfig, SEOConfig } from '~~/shared/schemas/setting';
 export default defineEventHandler(async () => {
   const remoteAssetBase = (await general_memoryStorage.getItem('remoteAssetBase')) as string;
   const onboardingStatus = !((await general_memoryStorage.getItem('firstSetupAccessKey')) as string);
+  const totalActivePostings = (await general_memoryStorage.getItem('totalActivePostings')) as number;
 
   const settings = {
     careerSite: {},
@@ -13,5 +14,5 @@ export default defineEventHandler(async () => {
   settings.seo = (await settings_memoryStorage.getItem('seoConfig')) as SEOConfig;
   settings.careerSite = (await settings_memoryStorage.getItem('careerSiteConfig')) as CareerSiteConfig;
 
-  return { remoteAssetBase, onboardingStatus, settings };
+  return { remoteAssetBase, onboardingStatus, totalActivePostings, settings };
 });

server/utils/tasks/seed-cache.ts

@@ -1,4 +1,4 @@
-import { desc, inArray } from 'drizzle-orm';
+import { desc, inArray, eq, count } from 'drizzle-orm';
 import { jobPostingsTable, reviewTagsTable, metaDataTable } from '~~/server/db/schema';
 import type { CareerSiteConfig, SEOConfig } from '~~/shared/schemas/setting';
 
@@ -20,6 +20,14 @@ export async function seedCache() {
     totalApplicants: -1,
   }));
 
+  const totalActivePostings =
+    (
+      await db
+        .select({ count: count(jobPostingsTable.id) })
+        .from(jobPostingsTable)
+        .where(eq(jobPostingsTable.isPublished, true))
+    )[0]?.count || 0;
+
   const settings = {
     careerSite: {},
     seo: {},
@@ -44,6 +52,7 @@ export async function seedCache() {
     general_memoryStorage.setItem('remoteAssetBase', remoteAssetBase),
     general_memoryStorage.setItem('postings', jobPostings),
     general_memoryStorage.setItem('reviewTags', reviewTags),
+    general_memoryStorage.setItem('totalActivePostings', totalActivePostings),
   ]);
 
   return { result: true };