ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

display input in list when editing

Browse Source
This commit is contained in:
Alina Beck 2019-07-10 12:52:03 +02:00
parent 0275971381
commit d200b822db
3 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/locales/de.json
View File

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

2
webapp/locales/en.json
View File

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

116
webapp/pages/settings/my-social-media.vue
View File

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