feat: open to opportunities

frontend/src/components/Modals/EditProfile.vue

@@ -13,13 +13,8 @@
 		}"
 	>
 		<template #body-content>
-			<div class="grid grid-cols-2 gap-5">
-				<div class="space-y-4">
-					<!-- <Uploader
-						v-model="profile.image.file_url"
-						label="Profile Image"
-						description="Your profile image to help others recognize you."
-					/> -->
+			<div>
+				<div class="grid grid-cols-2 gap-10">
 					<div>
 						<div class="text-xs text-ink-gray-5 mb-1">
 							{{ __('Profile Image') }}
@@ -66,26 +61,58 @@
 							</div>
 						</div>
 					</div>
-					<FormControl v-model="profile.first_name" :label="__('First Name')" />
-					<FormControl v-model="profile.last_name" :label="__('Last Name')" />
-					<FormControl v-model="profile.headline" :label="__('Headline')" />
-					<Link
-						:label="__('Language')"
-						v-model="profile.language"
-						doctype="Language"
+					<Switch
+						v-model="profile.looking_for_job"
+						:label="__('Open to Opportunities')"
+						:description="
+							__('Show recruiters and others that you are open to work.')
+						"
+						class="!px-0"
 					/>
 				</div>
-				<div>
-					<div class="mb-4">
-						<div class="mb-1.5 text-sm text-ink-gray-5">
-							{{ __('Bio') }}
+
+				<div class="grid grid-cols-2 gap-10">
+					<div class="space-y-4">
+						<div class="space-y-4">
+							<FormControl
+								v-model="profile.first_name"
+								:label="__('First Name')"
+							/>
+							<FormControl
+								v-model="profile.last_name"
+								:label="__('Last Name')"
+							/>
+							<FormControl v-model="profile.headline" :label="__('Headline')" />
+
+							<FormControl
+								v-model="profile.linkedin"
+								:label="__('LinkedIn ID')"
+							/>
+							<FormControl v-model="profile.github" :label="__('GitHub ID')" />
+							<FormControl
+								v-model="profile.twitter"
+								:label="__('Twitter ID')"
+							/>
 						</div>
-						<TextEditor
-							:fixedMenu="true"
-							@change="(val) => (profile.bio = val)"
-							:content="profile.bio"
-							editorClass="prose-sm py-2 px-2 min-h-[200px] border-outline-gray-2 hover:border-outline-gray-3 rounded-b-md bg-surface-gray-3"
+					</div>
+					<div class="space-y-4">
+						<Link
+							:label="__('Language')"
+							v-model="profile.language"
+							doctype="Language"
 						/>
+						<div>
+							<div class="mb-1.5 text-sm text-ink-gray-5">
+								{{ __('Bio') }}
+							</div>
+							<TextEditor
+								:fixedMenu="true"
+								@change="(val) => (profile.bio = val)"
+								:content="profile.bio"
+								:rows="15"
+								editorClass="prose-sm py-2 px-2 min-h-[200px] border-outline-gray-2 hover:border-outline-gray-3 rounded-b-md bg-surface-gray-3"
+							/>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -94,11 +121,12 @@
 </template>
 <script setup>
 import {
+	Button,
+	createResource,
 	Dialog,
 	FormControl,
 	FileUploader,
-	Button,
-	createResource,
+	Switch,
 	TextEditor,
 	toast,
 } from 'frappe-ui'
@@ -123,6 +151,10 @@ const profile = reactive({
 	headline: '',
 	bio: '',
 	image: '',
+	looking_for_job: false,
+	linkedin: '',
+	github: '',
+	twitter: '',
 })
 
 const imageResource = createResource({
@@ -199,6 +231,10 @@ watch(
 			profile.headline = newVal.headline
 			profile.language = newVal.language
 			profile.bio = newVal.bio
+			profile.looking_for_job = newVal.looking_for_job
+			profile.linkedin = newVal.linkedin
+			profile.github = newVal.github
+			profile.twitter = newVal.twitter
 			if (newVal.user_image) imageResource.submit({ image: newVal.user_image })
 		}
 	}

frontend/src/components/UserAvatar.vue

@@ -1,17 +1,26 @@
 <template>
-	<Tooltip :text="user.full_name">
-		<Avatar
-			class="avatar border border-outline-gray-2 cursor-auto"
-			v-if="user"
-			:label="user.full_name"
-			:image="user.user_image"
-			:size="size"
-			v-bind="$attrs"
-		/>
-	</Tooltip>
+	<Avatar
+		class="avatar border border-outline-gray-2 cursor-auto"
+		v-if="user"
+		:label="user.full_name"
+		:image="user.user_image"
+		:size="size"
+		v-bind="$attrs"
+	>
+		<template v-if="user.looking_for_job" #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>
+	</Avatar>
 </template>
 <script setup>
 import { Avatar, Tooltip } from 'frappe-ui'
+import { BadgeCheckIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+
 const props = defineProps({
 	user: {
 		type: Object,
@@ -21,4 +30,15 @@ const props = defineProps({
 		type: String,
 	},
 })
+
+const checkSize = computed(() => {
+	let sizeMap = {
+		sm: 'size-1',
+		md: 'size-2',
+		lg: 'size-3',
+		xl: 'size-3',
+		'2xl': 'size-3',
+	}
+	return sizeMap[props.size] || 'size-3'
+})
 </script>