From d200b822db0568bff8bf6f335fc41f5b3fe17174 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 10 Jul 2019 12:52:03 +0200
Subject: [PATCH] display input in list when editing

---
 webapp/locales/de.json                    |   2 +-
 webapp/locales/en.json                    |   2 +-
 webapp/pages/settings/my-social-media.vue | 116 ++++++++++++----------
 3 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 9ca1e2651..17942ad91 100644
--- a/webapp/locales/de.json
+++ b/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!"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 9e1a522d7..c881bf270 100644
--- a/webapp/locales/en.json
+++ b/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!"
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index acfdaa26b..1ce84a2d9 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -1,57 +1,63 @@
 <template>
-  <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">
-          <a :href="link.url" target="_blank">
-            <img :src="link.favicon | proxyApiUrl" alt="Social Media link" width="16" height="16" />
-            {{ link.url }}
-          </a>
-          <span class="layout-leave-active divider">|</span>
-          <ds-icon
-            :aria-label="$t('actions.edit')"
-            class="layout-leave-active icon-button"
-            name="edit"
-            :title="$t('actions.edit')"
-          />
-          <a name="delete" @click="handleDeleteSocialMedia(link)">
-            <ds-icon
-              :aria-label="$t('actions.delete')"
-              class="icon-button"
-              name="trash"
-              :title="$t('actions.delete')"
+  <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')"
             />
-          </a>
-        </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"
-            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') }}
-              </ds-button>
-            </div>
-          </ds-space>
-        </template>
-      </ds-form>
-    </ds-space>
-  </ds-card>
+
+            <template v-else>
+              <a :href="link.url" target="_blank">
+                <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')"
+                  class="icon-button"
+                  name="trash"
+                  :title="$t('actions.delete')"
+                />
+              </a>
+            </template>
+          </ds-list-item>
+        </ds-list>
+      </ds-space>
+
+      <ds-space margin-top="base">
+        <ds-input
+          v-if="editingLink === ''"
+          model="socialMediaLink"
+          type="text"
+          :placeholder="$t('settings.social-media.placeholder')"
+        />
+        <ds-space margin-top="base">
+          <ds-button primary :disabled="disabled">
+            {{ editingLink === '' ? $t('settings.social-media.submit') : $t('actions.save') }}
+          </ds-button>
+        </ds-space>
+      </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>