Merge branch 'main' of https://github.com/Sybit-Education/bk2wi-2024

Author: ericnull77

components.d.ts

@@ -21,7 +21,6 @@ declare module 'vue' {
     BNavItem: typeof import('bootstrap-vue-next/components/BNav')['BNavItem']
     BSpinner: typeof import('bootstrap-vue-next/components/BSpinner')['BSpinner']
     FooterBar: typeof import('./src/components/navigation/FooterBar.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
@@ -30,6 +29,7 @@ declare module 'vue' {
     MarkdownRenderer: typeof import('./src/components/common/MarkdownRenderer.vue')['default']
     MotivationalBanner: typeof import('./src/components/common/MotivationalBanner.vue')['default']
     NavigationBar: typeof import('./src/components/navigation/NavigationBar.vue')['default']
+    ProfileImageUpload: typeof import('./src/components/account/ProfileImageUpload.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SportTypeCard: typeof import('./src/components/sport-type/SportTypeCard.vue')['default']

public/default-avatar.png

@@ -1,22 +1,22 @@
 <template>
   <div class="profile-image-upload">
-    <input 
-      type="file" 
+    <input
+      type="file"
       ref="fileInput"
-      @change="handleFileUpload" 
-      class="form-control" 
+      @change="handleFileUpload"
+      class="form-control"
       accept="image/jpeg,image/png,image/gif"
       style="display: none;"
     >
     <div class="image-preview-container">
-      <img 
-        :src="previewImageUrl || defaultImageUrl" 
-        @click="triggerFileInput" 
-        class="img-fluid rounded-circle profile-image-preview" 
+      <img
+        :src="previewImageUrl || defaultImageUrl"
+        @click="triggerFileInput"
+        class="img-fluid rounded-circle profile-image-preview"
         alt="Profile Image"
       >
-      <button 
-        @click="triggerFileInput" 
+      <button
+        @click="triggerFileInput"
         class="btn btn-secondary btn-sm upload-button"
       >
         {{ previewImageUrl ? 'Change Image' : 'Upload Image' }}
@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, defineEmits, computed, watch } from 'vue'
+import { ref, defineEmits, watch } from 'vue'
 
 const props = defineProps({
   profileImages: {
@@ -43,8 +43,8 @@ const defaultImageUrl = '/default-avatar.png'
 
 // Watch for changes in profileImages and set the first image
 watch(() => props.profileImages, (newImages) => {
-  previewImageUrl.value = newImages && newImages.length > 0 
-    ? newImages[0] 
+  previewImageUrl.value = newImages && newImages.length > 0
+    ? newImages[0]
     : defaultImageUrl
 }, { immediate: true })
 
@@ -56,7 +56,7 @@ const handleFileUpload = async (event: Event) => {
   const input = event.target as HTMLInputElement
   if (input.files && input.files[0]) {
     const file = input.files[0]
-    
+
     // Validate file type and size
     const validTypes = ['image/jpeg', 'image/png', 'image/gif']
     const maxSize = 5 * 1024 * 1024 // 5MB

src/components/HelloWorld.vue

@@ -6,5 +6,5 @@ export default interface Account {
   about?: string
   gender?: 'Männlich' | 'Weiblich' | 'Divers' | 'Keine Angabe'
   birthday?: Date | undefined
-  profileImages?: string[] // Optional array of image URLs
+  profileImageUrl?: string | undefined
 }

src/components/account/ProfileImageUpload.vue

@@ -1,7 +1,7 @@
 import type Account from '@/models/Account'
 import airtableBase from './airtable.service'
 import { sha256 } from 'js-sha256'
-import type { RecordData } from 'airtable'
+import type { Records, FieldSet, Attachment } from 'airtable'
 
 const TABLE_NAME = 'Account'
 const ACTIVE_VIEW = 'Grid view'
@@ -30,7 +30,7 @@ class AccountService {
                 about: record.get('About') as string,
                 gender: record.get('Gender') as Account['gender'],
                 birthday: record.get('Birthday') ? new Date(record.get('Birthday') as string) : undefined,
-                profileImageUrl: record.get('Profile Image') as string,
+                profileImages: record.get('Profile Image') as string[],
               })
             })
             fetchNextPage()
@@ -71,7 +71,7 @@ class AccountService {
             }
           }
         ],
-        (err, records) => {
+        (err: unknown, records: Records<FieldSet>) => {
           if (err) {
             console.error(err)
             reject(err)
@@ -88,7 +88,7 @@ class AccountService {
               about: createdRecord.get('About') as string,
               gender: createdRecord.get('Gender') as Account['gender'],
               birthday: createdRecord.get('Birthday') ? new Date(createdRecord.get('Birthday') as string) : undefined,
-              profileImages: createdRecord.get('Bilder') as string[],
+              profileImageUrl: createdRecord.get('Bilder') as string[],
             }
             resolve(createdAccount)
           } else {
@@ -120,11 +120,11 @@ class AccountService {
               'About': account.about || '',
               'Gender': account.gender || '',
               'Birthday': account.birthday ? account.birthday.toISOString().split('T')[0] : '',
-              'Bilder': account.profileImages || '',
+              //'Bilder': account.profileImages || '',
             }
           }
         ],
-        (err, records) => {
+        (err: unknown, records: Records<FieldSet>) => {
           if (err) {
             console.error(err)
             reject(err)
@@ -141,7 +141,7 @@ class AccountService {
               about: updatedRecord.get('About') as string,
               gender: updatedRecord.get('Gender') as Account['gender'],
               birthday: updatedRecord.get('Birthday') ? new Date(updatedRecord.get('Birthday') as string) : undefined,
-              profileImageUrl: updatedRecord.get('Profile Image') as string,
+              profileImageUrl: this.getFirstUrl(updatedRecord),
             }
             resolve(updatedAccount)
           } else {
@@ -152,6 +152,10 @@ class AccountService {
     })
   }
 
+  private getFirstUrl(updatedRecord: Records<FieldSet>): string | undefined {
+    return Array.isArray(updatedRecord.get('Profile Image')) ? (updatedRecord.get('Profile Image') as Attachment[])[0].url : undefined as string | undefined
+  }
+
   /**
    * Upload profile image
    * @param file Image file to upload
@@ -162,10 +166,10 @@ class AccountService {
       const formData = new FormData()
       formData.append('file', file)
 
-      fetch(`https://api.airtable.com/v0/${import.meta.env.VITE_AIRTABLE_BASE_ID}/Account/attachments`, {
+      fetch(`https://api.airtable.com/v0/${import.meta.env.VITE_APP_AIRTABLE_BASE_ID}/Account/attachments`, {
         method: 'POST',
         headers: {
-          'Authorization': `Bearer ${import.meta.env.VITE_AIRTABLE_API_KEY}`,
+          'Authorization': `Bearer ${import.meta.env.VITE_APP_AIRTABLE_API_KEY}`,
           'Content-Type': 'multipart/form-data',
         },
         body: formData

src/models/Account.ts

@@ -11,13 +11,13 @@ const router = useRouter()
 const errorMessage = ref('')
 const isLoading = ref(false)
 
-const handleAccountCreation = async (account: Partial<Account>) => {
+const handleAccountCreation = async (account: Account) => {
   isLoading.value = true
   errorMessage.value = ''
 
   try {
     // Check if email is already registered
-    const isRegistered = await accountStore.isEmailRegistered(account.email)
+    const isRegistered = account.email ? await accountStore.isEmailRegistered(account.email) : false
     if (isRegistered) {
       errorMessage.value = 'Diese E-Mail ist bereits registriert.'
       isLoading.value = false
@@ -26,7 +26,7 @@ const handleAccountCreation = async (account: Partial<Account>) => {
 
     // Attempt to create account
     const success = await accountStore.createAccount(account)
-    
+
     if (success) {
       // Redirect to profile page to complete account setup
       router.push('/account/profile')
@@ -45,18 +45,18 @@ const handleAccountCreation = async (account: Partial<Account>) => {
 <template>
   <div class="account-create container mt-4">
     <h1>Account anlegen</h1>
-    
+
     <div v-if="isLoading" class="text-center">
       <div class="spinner-border" role="status">
         <span class="visually-hidden">Wird geladen...</span>
       </div>
     </div>
-    
+
     <div v-else>
-      <AccountCreateForm 
+      <AccountCreateForm
         @submit-account="handleAccountCreation"
       />
-      
+
       <div v-if="errorMessage" class="alert alert-danger mt-3">
         {{ errorMessage }}
       </div>

src/services/account.service.ts

@@ -1,56 +1,54 @@
 <template>
   <div class="account-profile container mt-4">
     <h1>Mein Profil</h1>
-    
+
     <div v-if="isLoading" class="text-center">
       <div class="spinner-border" role="status">
         <span class="visually-hidden">Wird geladen...</span>
       </div>
     </div>
-    
+
     <div v-else-if="currentAccount" class="row">
       <div class="col-md-4">
-        <img 
-          :src="currentAccount.profileImages && currentAccount.profileImages.length > 0 
-            ? currentAccount.profileImages[0] 
-            : '/default-avatar.png'" 
-          class="img-fluid rounded-circle mb-3" 
+        <img
+          :src="currentAccount.profileImageUrl ? currentAccount.profileImageUrl : '/default-avatar.png'"
+          class="img-fluid rounded-circle mb-3"
           alt="Profilbild"
         >
-        <ProfileImageUpload 
-          :profile-images="currentAccount.profileImages || []"
+        <ProfileImageUpload
+          :profile-image="currentAccount.profileImageUrl"
           @image-uploaded="handleProfileImageUpload"
         />
       </div>
-      
+
       <div class="col-md-8">
         <form @submit.prevent="updateProfile">
           <div class="mb-3">
             <label for="name" class="form-label">Name</label>
-            <input 
-              type="text" 
-              class="form-control" 
-              id="name" 
-              v-model="editableAccount.name" 
+            <input
+              type="text"
+              class="form-control"
+              id="name"
+              v-model="editableAccount.name"
               required
             >
           </div>
-          
+
           <div class="mb-3">
             <label for="about" class="form-label">Über mich</label>
-            <textarea 
-              class="form-control" 
-              id="about" 
-              v-model="editableAccount.about" 
+            <textarea
+              class="form-control"
+              id="about"
+              v-model="editableAccount.about"
               rows="4"
             ></textarea>
           </div>
-          
+
           <div class="mb-3">
             <label for="gender" class="form-label">Geschlecht</label>
-            <select 
-              class="form-select" 
-              id="gender" 
+            <select
+              class="form-select"
+              id="gender"
               v-model="editableAccount.gender"
             >
               <option value="">Nicht angegeben</option>
@@ -60,22 +58,22 @@
               <option value="prefer_not_to_say">Möchte ich nicht angeben</option>
             </select>
           </div>
-          
+
           <div class="mb-3">
             <label for="birthday" class="form-label">Geburtstag</label>
-            <input 
-              type="date" 
-              class="form-control" 
-              id="birthday" 
+            <input
+              type="date"
+              class="form-control"
+              id="birthday"
               v-model="formattedBirthday"
             >
           </div>
-          
+
           <button type="submit" class="btn btn-primary">Profil aktualisieren</button>
         </form>
       </div>
     </div>
-    
+
     <div v-else class="alert alert-warning">
       Bitte melden Sie sich an, um Ihr Profil zu sehen.
     </div>