|
1 | 1 | <template> |
2 | 2 | <div class="p-4"> |
3 | | - <div class="flex gap-8"> |
4 | | - <h1 class="text-2xl font-bold">{{ t('profile.profile') }}</h1> |
5 | | - </div> |
| 3 | + <!-- <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1> --> |
| 4 | + <section class="mx-auto max-w-3xl space-y-4 p-4"> |
| 5 | + <!-- User Details Section --> |
| 6 | + <Card class="shadow-none"> |
| 7 | + <form @submit.prevent="handleSubmit" class="flex flex-col items-center p-4"> |
| 8 | + <!-- Avatar Section --> |
| 9 | + <div class="mb-6"> |
| 10 | + <div class="group relative mx-auto h-24 w-24 md:h-32 md:w-32"> |
| 11 | + <img |
| 12 | + :src="profilePhotoPreview" |
| 13 | + alt="Profile Photo" |
| 14 | + class="h-24 w-24 cursor-pointer rounded-full border border-gray-200 object-cover transition-opacity group-hover:opacity-80 md:h-32 md:w-32" |
| 15 | + /> |
| 16 | + <div |
| 17 | + class="absolute inset-0 flex items-center justify-center rounded-full bg-black bg-opacity-0 transition-all duration-200 group-hover:bg-opacity-30" |
| 18 | + > |
| 19 | + <svg |
| 20 | + class="h-6 w-6 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100" |
| 21 | + fill="none" |
| 22 | + stroke="currentColor" |
| 23 | + viewBox="0 0 24 24" |
| 24 | + > |
| 25 | + <path |
| 26 | + stroke-linecap="round" |
| 27 | + stroke-linejoin="round" |
| 28 | + stroke-width="2" |
| 29 | + d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" |
| 30 | + ></path> |
| 31 | + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path> |
| 32 | + </svg> |
| 33 | + </div> |
| 34 | + <input |
| 35 | + ref="fileInput" |
| 36 | + type="file" |
| 37 | + accept="image/*" |
| 38 | + class="absolute inset-0 h-full w-full cursor-pointer opacity-0" |
| 39 | + @change="handleFileUpload" |
| 40 | + :disabled="true" |
| 41 | + /> |
| 42 | + </div> |
| 43 | + <div v-if="isUploading" class="mt-2 text-center text-sm text-gray-500"> |
| 44 | + {{ t('profile.uploading') }} |
| 45 | + </div> |
| 46 | + </div> |
| 47 | + |
| 48 | + <!-- User Info Section --> |
| 49 | + <div class="mb-6 text-center"> |
| 50 | + <h2 class="mb-1 text-xl font-bold text-gray-800">{{ name || t('profile.full-name') }}</h2> |
| 51 | + </div> |
| 52 | + |
| 53 | + <!-- Personal Information Section --> |
| 54 | + <div class="w-full"> |
| 55 | + <div class="mb-4 border-t border-gray-200"></div> |
| 56 | + <h3 class="mb-4 text-lg font-bold text-gray-800">Personal Information</h3> |
| 57 | + |
| 58 | + <!-- Form Fields Section --> |
| 59 | + |
| 60 | + <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2"> |
| 61 | + <Input |
| 62 | + :label="t('profile.full-name')" |
| 63 | + v-model="name" |
| 64 | + type="text" |
| 65 | + :placeholder="t('profile.full-name')" |
| 66 | + required |
| 67 | + :disabled="isSubmitting" |
| 68 | + /> |
| 69 | + <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('profile.email')" required disabled /> |
| 70 | + </div> |
| 71 | + <div class="pointer-events-none mb-6"> |
| 72 | + <CheckboxInput |
| 73 | + v-for="option in options" |
| 74 | + :key="option.value" |
| 75 | + v-model="selectedValues[option.value]" |
| 76 | + :text="`${option.label} (${t('coming-soon')})`" |
| 77 | + :value="option.value" |
| 78 | + :disabled="true" |
| 79 | + /> |
| 80 | + </div> |
| 81 | + |
| 82 | + <div class="border-t border-gray-200 pt-4"> |
| 83 | + <div class="flex justify-end"> |
| 84 | + <Button |
| 85 | + :label="t('save-changes')" |
| 86 | + type="submit" |
| 87 | + size="lg" |
| 88 | + :shadow="!(isSubmitting || isUploading || !hasChanges)" |
| 89 | + color="primary" |
| 90 | + :loading="isSubmitting" |
| 91 | + :disabled="isSubmitting || isUploading || !hasChanges" |
| 92 | + /> |
| 93 | + </div> |
| 94 | + </div> |
| 95 | + </div> |
| 96 | + </form> |
| 97 | + </Card> |
| 98 | + </section> |
6 | 99 | </div> |
7 | 100 | </template> |
8 | 101 |
|
9 | 102 | <script lang="ts" setup> |
| 103 | + import { ref, computed, onMounted } from 'vue'; |
| 104 | + import { useProfileStore } from '~/stores/profile'; |
| 105 | + import { Card, Input, Button, CheckboxInput } from '@codebridger/lib-vue-components/elements.ts'; |
| 106 | + import { toastSuccess, toastError } from '@codebridger/lib-vue-components/toast.ts'; |
| 107 | +
|
| 108 | + const profileStore = useProfileStore(); |
10 | 109 | const { t } = useI18n(); |
11 | 110 |
|
12 | 111 | definePageMeta({ |
|
15 | 114 | // @ts-ignore |
16 | 115 | middleware: ['auth'], |
17 | 116 | }); |
| 117 | +
|
| 118 | + const name = ref(profileStore.userDetail?.name || ''); |
| 119 | + const email = ref(profileStore.email); |
| 120 | + const profilePicture = ref(profileStore.profilePicture); |
| 121 | + const selectedFile = ref<File | null>(null); |
| 122 | + const filePreviewUrl = ref<string | null>(null); |
| 123 | + const options = [{ label: t('profile.receive-daily-practice-email-reminders'), value: 'dailyReminders' }]; |
| 124 | + const selectedValues = ref<Record<string, boolean>>({}); |
| 125 | + const isSubmitting = ref(false); |
| 126 | + const isUploading = ref(false); |
| 127 | + const fileInput = ref<HTMLInputElement>(); |
| 128 | +
|
| 129 | + // Track initial values for change detection |
| 130 | + const initialName = ref(''); |
| 131 | + const initialSelectedValues = ref<Record<string, boolean>>({}); |
| 132 | + const hasChanges = computed(() => { |
| 133 | + const nameChanged = name.value !== initialName.value; |
| 134 | + const preferencesChanged = JSON.stringify(selectedValues.value) !== JSON.stringify(initialSelectedValues.value); |
| 135 | + const fileChanged = selectedFile.value !== null; |
| 136 | +
|
| 137 | + return nameChanged || preferencesChanged || fileChanged; |
| 138 | + }); |
| 139 | +
|
| 140 | + const handleFileUpload = (event: Event) => { |
| 141 | + const target = event.target as HTMLInputElement; |
| 142 | + const file = target.files?.[0]; |
| 143 | +
|
| 144 | + if (file) { |
| 145 | + selectedFile.value = file; |
| 146 | +
|
| 147 | + // Create preview URL for immediate UI feedback |
| 148 | + const reader = new FileReader(); |
| 149 | + reader.onload = (e) => { |
| 150 | + filePreviewUrl.value = e.target?.result as string; |
| 151 | + }; |
| 152 | + reader.readAsDataURL(file); |
| 153 | + } |
| 154 | + }; |
| 155 | +
|
| 156 | + const profilePhotoPreview = computed(() => { |
| 157 | + // Show local preview if available |
| 158 | + if (filePreviewUrl.value) { |
| 159 | + return filePreviewUrl.value; |
| 160 | + } |
| 161 | + return profilePicture.value || '/assets/images/user.png'; |
| 162 | + }); |
| 163 | +
|
| 164 | + const handleSubmit = async () => { |
| 165 | + try { |
| 166 | + isSubmitting.value = true; |
| 167 | +
|
| 168 | + const profileData: { |
| 169 | + name?: string; |
| 170 | + profileImage?: File; |
| 171 | + preferences?: Record<string, boolean>; |
| 172 | + } = {}; |
| 173 | +
|
| 174 | + // Include name if it has changed |
| 175 | + if (name.value !== profileStore.userDetail?.name) { |
| 176 | + profileData.name = name.value; |
| 177 | + } |
| 178 | +
|
| 179 | + // Include profile image if a new one was selected |
| 180 | + if (selectedFile.value) { |
| 181 | + profileData.profileImage = selectedFile.value; |
| 182 | + } |
| 183 | +
|
| 184 | + // Include preferences |
| 185 | + profileData.preferences = { ...selectedValues.value }; |
| 186 | +
|
| 187 | + // Call the store function |
| 188 | + await profileStore.updateProfile(profileData); |
| 189 | +
|
| 190 | + toastSuccess(t('profile.profile-updated')); |
| 191 | + } catch (error) { |
| 192 | + console.error('Error updating profile:', error); |
| 193 | + toastError(t('profile.profile-update-failed')); |
| 194 | + } finally { |
| 195 | + isSubmitting.value = false; |
| 196 | + } |
| 197 | + }; |
| 198 | +
|
| 199 | + onMounted(async () => { |
| 200 | + //profile |
| 201 | + await profileStore.getProfileInfo(); |
| 202 | +
|
| 203 | + // Initialize initial values for change detection |
| 204 | + initialName.value = profileStore.userDetail?.name || ''; |
| 205 | + initialSelectedValues.value = { ...selectedValues.value }; |
| 206 | + }); |
18 | 207 | </script> |
| 208 | + |
| 209 | +<style scoped> |
| 210 | + /* Override hover styles for disabled checkboxes */ |
| 211 | + :deep(.checkbox-input:has(input:disabled)) { |
| 212 | + cursor: not-allowed; |
| 213 | + } |
| 214 | +
|
| 215 | + :deep(.checkbox-input:has(input:disabled) .checkbox-label) { |
| 216 | + cursor: not-allowed; |
| 217 | + pointer-events: none; |
| 218 | + } |
| 219 | +
|
| 220 | + :deep(.checkbox-input:has(input:disabled):hover .checkbox-label) { |
| 221 | + color: inherit; |
| 222 | + text-decoration: none; |
| 223 | + } |
| 224 | +</style> |
0 commit comments