test: certified participants data

frontend/src/components/Modals/EditProfile.vue

@@ -1,79 +1,70 @@
 <template>
 	<Dialog
 		:options="{
-			title: 'Edit your profile',
 			size: '3xl',
 		}"
 	>
+		<template #body-header>
+			<div class="flex items-center mb-5">
+				<div class="text-2xl font-semibold leading-6 text-ink-gray-9">
+					{{ __('Edit Profile') }}
+				</div>
+				<Badge v-if="isDirty" class="ml-4" theme="orange">
+					{{ __('Not Saved') }}
+				</Badge>
+			</div>
+		</template>
 		<template #body-content>
 			<div class="text-base">
-				<div class="grid grid-cols-2 gap-10">
-					<div>
-						<div class="text-xs text-ink-gray-5 mb-1">
-							{{ __('Profile Image') }}
-						</div>
-						<FileUploader
-							v-if="!profile.image"
-							:fileTypes="['image/*']"
-							:validateFile="validateFile"
-							@success="(file) => saveImage(file)"
-						>
-							<template
-								v-slot="{ file, progress, uploading, openFileSelector }"
-							>
-								<div class="mb-4">
-									<Button @click="openFileSelector" :loading="uploading">
-										{{
-											uploading
-												? `Uploading ${progress}%`
-												: 'Upload a profile image'
-										}}
-									</Button>
-								</div>
-							</template>
-						</FileUploader>
-						<div v-else class="mb-4">
-							<div class="flex items-center">
-								<img
-									:src="profile.image?.file_url"
-									class="object-cover h-[50px] w-[50px] rounded-full border-4 border-white object-cover"
-								/>
-
-								<div class="text-base flex flex-col ml-2">
-									<span>
-										{{ profile.image?.file_name }}
-									</span>
-									<span class="text-sm text-ink-gray-4 mt-1">
-										{{ getFileSize(profile.image?.file_size) }}
-									</span>
-								</div>
-								<X
-									@click="removeImage()"
-									class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-								/>
-							</div>
-						</div>
-					</div>
-					<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">
 					<div class="space-y-4">
 						<div class="space-y-4">
+							<div>
+								<div class="text-xs text-ink-gray-5 mb-1">
+									{{ __('Profile Image') }}
+								</div>
+								<FileUploader
+									v-if="!profile.image"
+									:fileTypes="['image/*']"
+									:validateFile="validateFile"
+									@success="(file) => saveImage(file)"
+								>
+									<template
+										v-slot="{ file, progress, uploading, openFileSelector }"
+									>
+										<div class="mb-4">
+											<Button @click="openFileSelector" :loading="uploading">
+												{{
+													uploading
+														? `Uploading ${progress}%`
+														: 'Upload a profile image'
+												}}
+											</Button>
+										</div>
+									</template>
+								</FileUploader>
+								<div v-else class="mb-4">
+									<div class="flex items-center">
+										<img
+											:src="profile.image?.file_url"
+											class="object-cover h-[50px] w-[50px] rounded-full border-4 border-white object-cover"
+										/>
+
+										<div class="text-base flex flex-col ml-2">
+											<span>
+												{{ profile.image?.file_name }}
+											</span>
+											<span class="text-sm text-ink-gray-4 mt-1">
+												{{ getFileSize(profile.image?.file_size) }}
+											</span>
+										</div>
+										<X
+											@click="removeImage()"
+											class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+										/>
+									</div>
+								</div>
+							</div>
 							<FormControl
 								v-model="profile.first_name"
 								:label="__('First Name')"
@@ -96,6 +87,13 @@
 						</div>
 					</div>
 					<div class="space-y-4">
+						<FormControl
+							v-model="profile.open_to"
+							type="select"
+							:options="[' ', 'Opportunities', 'Hiring']"
+							:label="__('Open to')"
+							:placeholder="__('Looking for new work or hiring talent?')"
+						/>
 						<Link
 							:label="__('Language')"
 							v-model="profile.language"
@@ -110,7 +108,7 @@
 								@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"
+								editorClass="prose-sm py-2 px-2 min-h-[280px] border-outline-gray-2 hover:border-outline-gray-3 rounded-b-md bg-surface-gray-3"
 							/>
 						</div>
 					</div>
@@ -128,12 +126,12 @@
 </template>
 <script setup>
 import {
+	Badge,
 	Button,
 	createResource,
 	Dialog,
 	FormControl,
 	FileUploader,
-	Switch,
 	TextEditor,
 	toast,
 } from 'frappe-ui'
@@ -144,6 +142,7 @@ import Link from '@/components/Controls/Link.vue'
 
 const reloadProfile = defineModel('reloadProfile')
 const hasLanguageChanged = ref(false)
+const isDirty = ref(false)
 
 const props = defineProps({
 	profile: {
@@ -229,6 +228,27 @@ const removeImage = () => {
 	profile.image = null
 }
 
+watch(
+	() => profile,
+	(newVal) => {
+		if (!props.profile.data) return
+		let keys = Object.keys(newVal)
+		keys.splice(keys.indexOf('image'), 1)
+		for (let key of keys) {
+			if (newVal[key] !== props.profile.data[key]) {
+				isDirty.value = true
+				return
+			}
+		}
+		if (profile.image?.file_url !== props.profile.data.user_image) {
+			isDirty.value = true
+			return
+		}
+		isDirty.value = false
+	},
+	{ deep: true }
+)
+
 watch(
 	() => props.profile.data,
 	(newVal) => {
@@ -243,6 +263,7 @@ watch(
 			profile.github = newVal.github
 			profile.twitter = newVal.twitter
 			if (newVal.user_image) imageResource.submit({ image: newVal.user_image })
+			isDirty.value = false
 		}
 	}
 )