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": {
"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!"

2
webapp/locales/en.json
View File

@ -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!"

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

@ -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>