refactor: add prefixId

src/components/ProfileUpload.vue

@@ -12,6 +12,7 @@ withDefaults(
     labelStatusToggle?: string;
     hideToggle?: boolean;
     readonly?: boolean;
+    prefixId: string;
   }>(),
   {
     hideToggle: true,
@@ -26,10 +27,7 @@ defineEmits<{
 
 <template>
   <div class="text-center">
-    <div
-      class="upload-img-preview"
-      :style="$q.screen.lt.md ? 'height: 200px' : 'height: 12vw'"
-    >
+    <div :style="$q.screen.lt.md ? 'height: 200px' : 'height: 12vw'">
       <q-img
         v-if="urlProfile"
         :src="urlProfile"
@@ -70,7 +68,7 @@ defineEmits<{
       </div>
       <div class="col-6">
         <q-btn
-          id="btn-profile-save"
+          :id="`${prefixId}-btn-profile-save`"
           dense
           unelevated
           outlined
@@ -82,7 +80,7 @@ defineEmits<{
       </div>
     </div>
     <q-btn
-      id="btn-profile-edit"
+      :id="`${prefixId}-btn-profile-edit`"
       v-else-if="urlProfile && profileSubmit && !readonly"
       dense
       unelevated
@@ -95,7 +93,7 @@ defineEmits<{
     />
 
     <q-btn
-      id="btn-profile-upload"
+      :id="`${prefixId}-btn-profile-upload`"
       v-if="!urlProfile && !readonly"
       dense
       unelevated
@@ -109,7 +107,7 @@ defineEmits<{
     <q-separator class="col-12 q-my-lg" />
     <div class="text-left q-pb-md" v-if="hideToggle">
       <q-toggle
-        id="toggle-status"
+        :id="`${prefixId}-toggle-status`"
         dense
         size="md"
         v-model="statusToggle"