display input in list when editing

webapp/locales/de.json

@@ -120,7 +120,7 @@
     },
     "social-media": {
       "name": "Soziale Medien",
-      "placeholder": "Füge eine Social-Media URL hinzu",
+      "placeholder": "Deine Social-Media URL",
       "submit": "Link hinzufügen",
       "successAdd": "Social-Media hinzugefügt. Profil aktualisiert!",
       "successDelete": "Social-Media gelöscht. Profil aktualisiert!"

webapp/locales/en.json

@@ -120,7 +120,7 @@
     },
     "social-media": {
       "name": "Social media",
-      "placeholder": "Add social media url",
+      "placeholder": "Your social media url",
       "submit": "Add link",
       "successAdd": "Added social media. Updated user profile!",
       "successDelete": "Deleted social media. Updated user profile!"

webapp/pages/settings/my-social-media.vue

@@ -1,19 +1,35 @@
 <template>
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+    @submit="handleAddSocialMedia"
+  >
     <ds-card :header="$t('settings.social-media.name')">
       <ds-space v-if="socialMediaLinks" margin-top="base" margin="x-small">
         <ds-list>
           <ds-list-item v-for="link in socialMediaLinks" :key="link.id">
+            <ds-input v-if="editingLink === link.id"
+              model="socialMediaLink"
+              type="text"
+              :placeholder="$t('settings.social-media.placeholder')"
+            />
+
+            <template v-else>
               <a :href="link.url" target="_blank">
-            <img :src="link.favicon | proxyApiUrl" alt="Social Media link" width="16" height="16" />
+                <img :src="link.favicon | proxyApiUrl" alt="Link:" width="16" height="16" />
                 {{ link.url }}
               </a>
               <span class="layout-leave-active divider">|</span>
+              <a name='edit' @click="handleEditSocialMedia(link)">
                 <ds-icon
                   :aria-label="$t('actions.edit')"
                   class="layout-leave-active icon-button"
                   name="edit"
                   :title="$t('actions.edit')"
                 />
+              </a>
               <a name="delete" @click="handleDeleteSocialMedia(link)">
                 <ds-icon
                   :aria-label="$t('actions.delete')"
@@ -22,36 +38,26 @@
                   :title="$t('actions.delete')"
                 />
               </a>
+            </template>
           </ds-list-item>
         </ds-list>
       </ds-space>
+
       <ds-space margin-top="base">
-      <ds-form
-        v-model="formData"
-        :schema="formSchema"
-        @submit="handleAddSocialMedia"
-        @input="handleInput"
-        @input-valid="handleInputValid"
-      >
-        <template>
         <ds-input
-            id="socialMediaLink"
+          v-if="editingLink === ''"
-            name="social-media"
           model="socialMediaLink"
           type="text"
           :placeholder="$t('settings.social-media.placeholder')"
         />
         <ds-space margin-top="base">
-            <div>
           <ds-button primary :disabled="disabled">
-                {{ $t('settings.social-media.submit') }}
+            {{ editingLink === '' ? $t('settings.social-media.submit') : $t('actions.save') }}
           </ds-button>
-            </div>
         </ds-space>
-        </template>
-      </ds-form>
       </ds-space>
     </ds-card>
+  </ds-form>
 </template>
 
 <script>
@@ -71,6 +77,7 @@ export default {
         },
       },
       disabled: true,
+      editingLink: '',
     }
   },
   computed: {
@@ -165,6 +172,11 @@ export default {
           this.$toast.error(error.message)
         })
     },
+    handleEditSocialMedia(link) {
+      this.editingLink = link.id
+      this.formData.socialMediaLink = link.url
+      this.disabled = false
+    },
   },
 }
 </script>