feat: open to hiring

frontend/src/components/Modals/EditProfile.vue

@@ -6,7 +6,7 @@
 		}"
 	>
 		<template #body-content>
-			<div>
+			<div class="text-base">
 				<div class="grid grid-cols-2 gap-10">
 					<div>
 						<div class="text-xs text-ink-gray-5 mb-1">
@@ -54,14 +54,21 @@
 							</div>
 						</div>
 					</div>
-					<Switch
-						v-model="profile.looking_for_job"
+					<FormControl
+						v-model="profile.open_to"
+						type="select"
+						:options="[' ', 'Opportunities', 'Hiring']"
+						:label="__('Open to')"
+						:placeholder="__('Looking for new work or hiring talent?')"
+					/>
+					<!-- <Switch
+						v-model="profile.open_to"
 						:label="__('Open to Opportunities')"
 						:description="
 							__('Show recruiters and others that you are open to work.')
 						"
 						class="!px-0"
-					/>
+					/> -->
 				</div>
 
 				<div class="grid grid-cols-2 gap-10">
@@ -151,7 +158,7 @@ const profile = reactive({
 	headline: '',
 	bio: '',
 	image: '',
-	looking_for_job: false,
+	open_to: '',
 	linkedin: '',
 	github: '',
 	twitter: '',
@@ -231,7 +238,7 @@ watch(
 			profile.headline = newVal.headline
 			profile.language = newVal.language
 			profile.bio = newVal.bio
-			profile.looking_for_job = newVal.looking_for_job
+			profile.open_to = newVal.open_to
 			profile.linkedin = newVal.linkedin
 			profile.github = newVal.github
 			profile.twitter = newVal.twitter

frontend/src/components/UserAvatar.vue

@@ -7,13 +7,20 @@
 		:size="size"
 		v-bind="$attrs"
 	>
-		<template v-if="user.looking_for_job" #indicator>
+		<template v-if="user.open_to === 'Opportunities'" #indicator>
 			<Tooltip :text="__('Open to Opportunities')" placement="right">
 				<div class="rounded-full bg-surface-green-3 w-fit">
 					<BadgeCheckIcon :class="'text-ink-white ' + checkSize" />
 				</div>
 			</Tooltip>
 		</template>
+		<template v-else-if="user.open_to === 'Hiring'" #indicator>
+			<Tooltip :text="__('Hiring')" placement="right">
+				<div class="rounded-full bg-purple-500 w-fit">
+					<BadgeCheckIcon :class="'text-ink-white ' + checkSize" />
+				</div>
+			</Tooltip>
+		</template>
 	</Avatar>
 </template>
 <script setup>

frontend/src/pages/CertifiedParticipants.vue

@@ -14,10 +14,10 @@
 	</header>
 	<div class="mx-auto w-full max-w-4xl pt-6 pb-10">
 		<div class="flex flex-col md:flex-row justify-between mb-4 px-3">
-			<div class="text-xl font-semibold text-ink-gray-7 mb-4 md:mb-0">
+			<div class="text-xl font-semibold text-ink-gray-9 mb-4 md:mb-0">
 				{{ memberCount }} {{ __('certified members') }}
 			</div>
-			<div class="grid grid-cols-2 gap-2">
+			<div class="flex items-center space-x-4">
 				<FormControl
 					v-model="nameFilter"
 					:placeholder="__('Search by Name')"
@@ -36,13 +36,25 @@
 						@update:modelValue="updateParticipants()"
 					/>
 				</div>
+				<FormControl
+					v-model="openToOpportunities"
+					:label="__('Open to Opportunities')"
+					type="checkbox"
+					@change="updateParticipants()"
+				/>
+				<FormControl
+					v-model="hiring"
+					:label="__('Hiring')"
+					type="checkbox"
+					@change="updateParticipants()"
+				/>
 			</div>
 		</div>
 		<div v-if="participants.data?.length" class="">
 			<template v-for="(participant, index) in participants.data">
 				<router-link
 					:to="{
-						name: 'ProfileCertificates',
+						name: 'ProfileAbout',
 						params: {
 							username: participant.username,
 						},
@@ -118,9 +130,11 @@ import { sessionStore } from '../stores/session'
 import EmptyState from '@/components/EmptyState.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 
-const currentCategory = ref('')
 const filters = ref({})
+const currentCategory = ref('')
 const nameFilter = ref('')
+const openToOpportunities = ref(false)
+const hiring = ref(false)
 const { brand } = sessionStore()
 const memberCount = ref(0)
 const dayjs = inject('$dayjs')
@@ -152,7 +166,7 @@ const categories = createListResource({
 	cache: ['certification_categories'],
 	auto: true,
 	transform(data) {
-		data.unshift({ label: __(''), value: '' })
+		data.unshift({ label: __(' '), value: ' ' })
 		return data
 	},
 })
@@ -169,16 +183,19 @@ const updateParticipants = () => {
 }
 
 const updateFilters = () => {
-	if (currentCategory.value) {
-		filters.value.category = currentCategory.value
-	} else {
-		delete filters.value.category
-	}
-
-	if (nameFilter.value) {
-		filters.value.member_name = ['like', `%${nameFilter.value}%`]
-	} else {
-		delete filters.value.member_name
+	filters.value = {
+		...(currentCategory.value && {
+			category: currentCategory.value,
+		}),
+		...(nameFilter.value && {
+			member_name: ['like', `%${nameFilter.value}%`],
+		}),
+		...(openToOpportunities.value && {
+			open_to_opportunities: true,
+		}),
+		...(hiring.value && {
+			hiring: true,
+		}),
 	}
 }
 
@@ -190,7 +207,7 @@ const setQueryParams = () => {
 	}
 
 	Object.keys(filterKeys).forEach((key) => {
-		if (filterKeys[key]) {
+		if (filterKeys[key] && filterKeys[key].trim() !== '') {
 			queries.set(key, filterKeys[key])
 		} else {
 			queries.delete(key)
@@ -207,6 +224,8 @@ const setFiltersFromQuery = () => {
 	let queries = new URLSearchParams(location.search)
 	nameFilter.value = queries.get('name') || ''
 	currentCategory.value = queries.get('category') || ''
+	openToOpportunities.value = queries.get('open-to-opportunities') === 'true'
+	hiring.value = queries.get('hiring') === 'true'
 }
 
 const breadcrumbs = computed(() => [

frontend/src/pages/Profile.vue

@@ -56,15 +56,32 @@
 							:src="profile.data.user_image"
 							class="object-cover h-[100px] w-[100px] rounded-full border-4 border-white object-cover"
 						/>
+						<div
+							v-else
+							class="flex items-center justify-center h-[100px] w-[100px] rounded-full border-4 border-white bg-surface-gray-2 text-3xl font-semibold text-ink-gray-7"
+						>
+							{{ profile.data.full_name.charAt(0).toUpperCase() }}
+						</div>
 						<Tooltip
-							v-if="profile.data.looking_for_job"
-							:text="__('Open to Opportunities')"
+							v-if="profile.data.open_to"
+							:text="
+								profile.data.open_to === 'Opportunities'
+									? __('Open to Opportunities')
+									: __('Hiring')
+							"
 							placement="right"
 						>
 							<div
 								class="absolute bottom-3 right-1 p-0.5 bg-surface-white rounded-full"
 							>
-								<div class="rounded-full bg-surface-green-3 w-fit">
+								<div
+									class="rounded-full w-fit"
+									:class="
+										profile.data.open_to === 'Opportunities'
+											? 'bg-surface-green-3'
+											: 'bg-purple-500'
+									"
+								>
 									<BadgeCheckIcon class="text-ink-white size-5" />
 								</div>
 							</div>