mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Merge pull request #4773 from Ocelot-Social-Community/4771-refactor-social-media-list-with-slots
feat: 🍰 Refactor Social Media List With Slots
This commit is contained in:
Wolfgang Huß
GitHub
commit
1969192e89
@ -41,7 +41,6 @@ const publishNotifications = async (context, promises) => {
|
||||
notifications.forEach((notificationAdded, index) => {
|
||||
pubsub.publish(NOTIFICATION_ADDED, { notificationAdded })
|
||||
if (notificationAdded.to.sendNotificationEmails) {
|
||||
// Wolle await
|
||||
sendMail(
|
||||
notificationTemplate({
|
||||
email: notificationsEmailAddresses[index].email,
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import { When } from "cypress-cucumber-preprocessor/steps";
|
||||
|
||||
When('I add a social media link', () => {
|
||||
cy.get('input#addSocialMedia')
|
||||
.type('https://freeradical.zone/peter-pan')
|
||||
.get('button')
|
||||
cy.get('button')
|
||||
.contains('Add link')
|
||||
.click()
|
||||
.get('#editSocialMedia')
|
||||
.type('https://freeradical.zone/peter-pan')
|
||||
.get('button')
|
||||
.contains('Save')
|
||||
.click()
|
||||
})
|
||||
@ -2,9 +2,12 @@ import { Given } from "cypress-cucumber-preprocessor/steps";
|
||||
|
||||
Given('I have added a social media link', () => {
|
||||
cy.visit('/settings/my-social-media')
|
||||
.get('input#addSocialMedia')
|
||||
.type('https://freeradical.zone/peter-pan')
|
||||
.get('button')
|
||||
.contains('Add link')
|
||||
.click()
|
||||
.get('#editSocialMedia')
|
||||
.type('https://freeradical.zone/peter-pan')
|
||||
.get('button')
|
||||
.contains('Save')
|
||||
.click()
|
||||
})
|
||||
@ -0,0 +1,128 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import MySomethingList from './MySomethingList.vue'
|
||||
import Vue from 'vue'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
describe('MySomethingList.vue', () => {
|
||||
let wrapper
|
||||
let propsData
|
||||
let data
|
||||
let mocks
|
||||
|
||||
beforeEach(() => {
|
||||
propsData = {
|
||||
useFormData: { dummy: '' },
|
||||
useItems: [{ id: 'id', dummy: 'dummy' }],
|
||||
namePropertyKey: 'dummy',
|
||||
callbacks: { edit: jest.fn(), submit: jest.fn(), delete: jest.fn() },
|
||||
}
|
||||
data = () => {
|
||||
return {}
|
||||
}
|
||||
mocks = {
|
||||
$t: jest.fn(),
|
||||
$apollo: {
|
||||
mutate: jest.fn(),
|
||||
},
|
||||
$toast: {
|
||||
error: jest.fn(),
|
||||
success: jest.fn(),
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
describe('mount', () => {
|
||||
let form, slots
|
||||
const Wrapper = () => {
|
||||
slots = {
|
||||
'list-item': '<div class="list-item"></div>',
|
||||
'edit-item': '<div class="edit-item"></div>',
|
||||
}
|
||||
return mount(MySomethingList, {
|
||||
propsData,
|
||||
data,
|
||||
mocks,
|
||||
localVue,
|
||||
slots,
|
||||
})
|
||||
}
|
||||
|
||||
describe('given existing item', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
describe('for each item it', () => {
|
||||
it('displays the item as slot "list-item"', () => {
|
||||
expect(wrapper.find('.list-item').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the edit button', () => {
|
||||
expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the delete button', () => {
|
||||
expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('editing item', () => {
|
||||
beforeEach(async () => {
|
||||
const editButton = wrapper.find('.base-button[data-test="edit-button"]')
|
||||
editButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
})
|
||||
|
||||
it('disables adding items while editing', () => {
|
||||
const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
|
||||
expect(submitButton.text()).not.toContain('settings.social-media.submit')
|
||||
})
|
||||
|
||||
it('allows the user to cancel editing', async () => {
|
||||
expect(wrapper.find('.edit-item').exists()).toBe(true)
|
||||
const cancelButton = wrapper.find('button#cancel')
|
||||
cancelButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
expect(wrapper.find('.edit-item').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('calls callback functions', () => {
|
||||
it('calls edit', async () => {
|
||||
const editButton = wrapper.find('.base-button[data-test="edit-button"]')
|
||||
editButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
const expectedItem = expect.objectContaining({ id: 'id', dummy: 'dummy' })
|
||||
expect(propsData.callbacks.edit).toHaveBeenCalledTimes(1)
|
||||
expect(propsData.callbacks.edit).toHaveBeenCalledWith(expect.any(Object), expectedItem)
|
||||
})
|
||||
|
||||
it('calls submit', async () => {
|
||||
form = wrapper.find('form')
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
const expectedItem = expect.objectContaining({ id: '' })
|
||||
expect(propsData.callbacks.submit).toHaveBeenCalledTimes(1)
|
||||
expect(propsData.callbacks.submit).toHaveBeenCalledWith(
|
||||
expect.any(Object),
|
||||
true,
|
||||
expectedItem,
|
||||
{ dummy: '' },
|
||||
)
|
||||
})
|
||||
|
||||
it('calls delete', async () => {
|
||||
const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
|
||||
deleteButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
const expectedItem = expect.objectContaining({ id: 'id', dummy: 'dummy' })
|
||||
expect(propsData.callbacks.delete).toHaveBeenCalledTimes(1)
|
||||
expect(propsData.callbacks.delete).toHaveBeenCalledWith(expect.any(Object), expectedItem)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<ds-form
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@input="handleInput"
|
||||
@input-valid="handleInputValid"
|
||||
@submit="handleSubmitItem"
|
||||
>
|
||||
<div v-if="isEditing">
|
||||
<ds-space margin="base">
|
||||
<ds-heading tag="h5">
|
||||
{{
|
||||
isCreation
|
||||
? $t('settings.social-media.addNewTitle')
|
||||
: $t('settings.social-media.editTitle', { name: editingItem[namePropertyKey] })
|
||||
}}
|
||||
</ds-heading>
|
||||
</ds-space>
|
||||
<ds-space v-if="items" margin-top="base">
|
||||
<slot name="edit-item" />
|
||||
</ds-space>
|
||||
</div>
|
||||
<div v-else>
|
||||
<ds-space v-if="items" margin-top="base">
|
||||
<ds-list>
|
||||
<ds-list-item v-for="item in items" :key="item.id" class="list-item--high">
|
||||
<template>
|
||||
<slot name="list-item" :item="item" />
|
||||
<span class="divider">|</span>
|
||||
<base-button
|
||||
icon="edit"
|
||||
circle
|
||||
ghost
|
||||
@click="handleEditItem(item)"
|
||||
:title="$t('actions.edit')"
|
||||
data-test="edit-button"
|
||||
/>
|
||||
<base-button
|
||||
icon="trash"
|
||||
circle
|
||||
ghost
|
||||
@click="handleDeleteItem(item)"
|
||||
:title="$t('actions.delete')"
|
||||
data-test="delete-button"
|
||||
/>
|
||||
</template>
|
||||
</ds-list-item>
|
||||
</ds-list>
|
||||
</ds-space>
|
||||
</div>
|
||||
|
||||
<ds-space margin-top="base">
|
||||
<ds-space margin-top="base">
|
||||
<base-button
|
||||
filled
|
||||
:disabled="loading || !(!isEditing || (isEditing && !disabled))"
|
||||
:loading="loading"
|
||||
type="submit"
|
||||
data-test="add-save-button"
|
||||
>
|
||||
{{ isEditing ? $t('actions.save') : $t('settings.social-media.submit') }}
|
||||
</base-button>
|
||||
<base-button v-if="isEditing" id="cancel" danger @click="handleCancel()">
|
||||
{{ $t('actions.cancel') }}
|
||||
</base-button>
|
||||
</ds-space>
|
||||
</ds-space>
|
||||
</ds-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MySomethingList',
|
||||
props: {
|
||||
useFormData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
useFormSchema: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
useItems: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
defaultItem: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
namePropertyKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
callbacks: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
handleInput: () => {},
|
||||
handleInputValid: () => {},
|
||||
edit: () => {},
|
||||
submit: () => {},
|
||||
delete: () => {},
|
||||
}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: this.useFormData,
|
||||
formSchema: this.useFormSchema,
|
||||
items: this.useItems,
|
||||
disabled: true,
|
||||
loading: false,
|
||||
editingItem: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEditing() {
|
||||
return this.editingItem !== null
|
||||
},
|
||||
isCreation() {
|
||||
return this.editingItem !== null && this.editingItem.id === ''
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// can change by a parents callback and again given trough by v-bind from there
|
||||
useItems(newItems) {
|
||||
this.items = newItems
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleInput(data) {
|
||||
this.callbacks.handleInput(this, data)
|
||||
this.disabled = true
|
||||
},
|
||||
handleInputValid(data) {
|
||||
this.callbacks.handleInputValid(this, data)
|
||||
},
|
||||
handleEditItem(item) {
|
||||
this.editingItem = item
|
||||
this.callbacks.edit(this, item)
|
||||
},
|
||||
async handleSubmitItem() {
|
||||
if (!this.isEditing) {
|
||||
this.handleEditItem({ ...this.defaultItem, id: '' })
|
||||
} else {
|
||||
this.loading = true
|
||||
if (await this.callbacks.submit(this, this.isCreation, this.editingItem, this.formData)) {
|
||||
this.disabled = true
|
||||
this.editingItem = null
|
||||
}
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleCancel() {
|
||||
this.editingItem = null
|
||||
this.disabled = true
|
||||
},
|
||||
async handleDeleteItem(item) {
|
||||
await this.callbacks.delete(this, item)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.divider {
|
||||
opacity: 0.4;
|
||||
padding: 0 $space-small;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-item--high {
|
||||
.ds-list-item-prefix {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.ds-list-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import SocialMediaListItem from './SocialMediaListItem.vue'
|
||||
|
||||
describe('SocialMediaListItem.vue', () => {
|
||||
let wrapper
|
||||
let propsData
|
||||
const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
|
||||
const faviconUrl = 'https://freeradical.zone/favicon.ico'
|
||||
|
||||
beforeEach(() => {
|
||||
propsData = {}
|
||||
})
|
||||
|
||||
describe('shallowMount', () => {
|
||||
const Wrapper = () => {
|
||||
return shallowMount(SocialMediaListItem, { propsData })
|
||||
}
|
||||
|
||||
describe('given existing social media links', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { item: { id: 's1', url: socialMediaUrl, favicon: faviconUrl } }
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
describe('for each link item it', () => {
|
||||
it('displays the favicon', () => {
|
||||
expect(wrapper.find(`img[src="${faviconUrl}"]`).exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the url', () => {
|
||||
expect(wrapper.find(`a[href="${socialMediaUrl}"]`).exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<a :href="item.url" target="_blank">
|
||||
<img :src="item.favicon" alt="Link:" height="16" width="16" />
|
||||
{{ item.url }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SocialMediaListItem',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -773,6 +773,8 @@
|
||||
"name": "Sicherheit"
|
||||
},
|
||||
"social-media": {
|
||||
"addNewTitle": "Neuen Link hinzufügen",
|
||||
"editTitle": "Link \"{name}\" ändern",
|
||||
"name": "Soziale Netzwerke",
|
||||
"placeholder": "Deine Webadresse des Sozialen Netzwerkes",
|
||||
"requireUnique": "Dieser Link existiert bereits",
|
||||
|
||||
@ -773,6 +773,8 @@
|
||||
"name": "Security"
|
||||
},
|
||||
"social-media": {
|
||||
"addNewTitle": "Add new link",
|
||||
"editTitle": "Edit link \"{name}\"",
|
||||
"name": "Social media",
|
||||
"placeholder": "Your social media url",
|
||||
"requireUnique": "You added this url already",
|
||||
|
||||
@ -33,7 +33,7 @@ describe('my-social-media.vue', () => {
|
||||
})
|
||||
|
||||
describe('mount', () => {
|
||||
let form, input, submitButton
|
||||
let form, input
|
||||
const Wrapper = () => {
|
||||
const store = new Vuex.Store({
|
||||
getters,
|
||||
@ -42,11 +42,12 @@ describe('my-social-media.vue', () => {
|
||||
}
|
||||
|
||||
describe('adding social media link', () => {
|
||||
beforeEach(() => {
|
||||
beforeEach(async () => {
|
||||
wrapper = Wrapper()
|
||||
form = wrapper.find('form')
|
||||
input = wrapper.find('input#addSocialMedia')
|
||||
submitButton = wrapper.find('button')
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
input = wrapper.find('input#editSocialMedia')
|
||||
})
|
||||
|
||||
it('requires the link to be a valid url', async () => {
|
||||
@ -79,7 +80,6 @@ describe('my-social-media.vue', () => {
|
||||
const expected = expect.objectContaining({
|
||||
variables: { url: newSocialMediaUrl },
|
||||
})
|
||||
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
})
|
||||
|
||||
@ -88,10 +88,10 @@ describe('my-social-media.vue', () => {
|
||||
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('clears the form', async () => {
|
||||
it('switches back to list', async () => {
|
||||
await flushPromises()
|
||||
expect(input.value).toBe(undefined)
|
||||
expect(submitButton.vm.$attrs.disabled).toBe(true)
|
||||
const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
|
||||
expect(submitButton.text()).not.toContain('settings.social-media.submit')
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -100,10 +100,9 @@ describe('my-social-media.vue', () => {
|
||||
beforeEach(() => {
|
||||
getters = {
|
||||
'auth/user': () => ({
|
||||
socialMedia: [{ id: 's1', url: socialMediaUrl }],
|
||||
socialMedia: [{ id: 's1', url: socialMediaUrl, favicon: faviconUrl }],
|
||||
}),
|
||||
}
|
||||
|
||||
wrapper = Wrapper()
|
||||
form = wrapper.find('form')
|
||||
})
|
||||
@ -116,18 +115,12 @@ describe('my-social-media.vue', () => {
|
||||
it('displays the url', () => {
|
||||
expect(wrapper.find(`a[href="${socialMediaUrl}"]`).exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the edit button', () => {
|
||||
expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the delete button', () => {
|
||||
expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
it('does not accept a duplicate url', async () => {
|
||||
wrapper.find('input#addSocialMedia').setValue(socialMediaUrl)
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
wrapper.find('input#editSocialMedia').setValue(socialMediaUrl)
|
||||
form.trigger('submit')
|
||||
await Vue.nextTick()
|
||||
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
|
||||
@ -141,12 +134,6 @@ describe('my-social-media.vue', () => {
|
||||
input = wrapper.find('input#editSocialMedia')
|
||||
})
|
||||
|
||||
it('disables adding new links while editing', () => {
|
||||
const addInput = wrapper.find('input#addSocialMedia')
|
||||
|
||||
expect(addInput.exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('sends the new url to the backend', async () => {
|
||||
const expected = expect.objectContaining({
|
||||
variables: { id: 's1', url: newSocialMediaUrl },
|
||||
@ -156,13 +143,6 @@ describe('my-social-media.vue', () => {
|
||||
await Vue.nextTick()
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
})
|
||||
|
||||
it('allows the user to cancel editing', async () => {
|
||||
const cancelButton = wrapper.find('button#cancel')
|
||||
cancelButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
expect(wrapper.find('input#editSocialMedia').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('deleting social media link', () => {
|
||||
@ -176,7 +156,6 @@ describe('my-social-media.vue', () => {
|
||||
const expected = expect.objectContaining({
|
||||
variables: { id: 's1' },
|
||||
})
|
||||
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
})
|
||||
|
||||
@ -1,97 +1,73 @@
|
||||
<template>
|
||||
<ds-form
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@input="handleInput"
|
||||
@input-valid="handleInputValid"
|
||||
@submit="handleSubmitSocialMedia"
|
||||
>
|
||||
<base-card>
|
||||
<h2 class="title">{{ $t('settings.social-media.name') }}</h2>
|
||||
<ds-space v-if="socialMediaLinks" margin-top="base" margin="x-small">
|
||||
<ds-list>
|
||||
<ds-list-item v-for="link in socialMediaLinks" :key="link.id" class="list-item--high">
|
||||
<ds-input
|
||||
v-if="editingLink.id === link.id"
|
||||
id="editSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<a :href="link.url" target="_blank">
|
||||
<img :src="link.favicon" alt="Link:" height="16" width="16" />
|
||||
{{ link.url }}
|
||||
</a>
|
||||
<span class="divider">|</span>
|
||||
<base-button
|
||||
icon="edit"
|
||||
circle
|
||||
ghost
|
||||
@click="handleEditSocialMedia(link)"
|
||||
:title="$t('actions.edit')"
|
||||
data-test="edit-button"
|
||||
/>
|
||||
<base-button
|
||||
icon="trash"
|
||||
circle
|
||||
ghost
|
||||
@click="handleDeleteSocialMedia(link)"
|
||||
:title="$t('actions.delete')"
|
||||
data-test="delete-button"
|
||||
/>
|
||||
</template>
|
||||
</ds-list-item>
|
||||
</ds-list>
|
||||
</ds-space>
|
||||
|
||||
<ds-space margin-top="base">
|
||||
<base-card>
|
||||
<ds-heading tag="h2" class="title">{{ $t('settings.social-media.name') }}</ds-heading>
|
||||
<my-something-list
|
||||
:useFormData="useFormData"
|
||||
:useFormSchema="useFormSchema"
|
||||
:useItems="socialMediaLinks"
|
||||
:defaultItem="{ url: '' }"
|
||||
:namePropertyKey="'url'"
|
||||
:callbacks="{
|
||||
handleInput: () => {},
|
||||
handleInputValid,
|
||||
edit: callbackEditSocialMedia,
|
||||
submit: handleSubmitSocialMedia,
|
||||
delete: callbackDeleteSocialMedia,
|
||||
}"
|
||||
>
|
||||
<template #list-item="{ item }">
|
||||
<social-media-list-item :item="item" />
|
||||
</template>
|
||||
<template #edit-item>
|
||||
<ds-input
|
||||
v-if="!editingLink.id"
|
||||
id="addSocialMedia"
|
||||
id="editSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/>
|
||||
<ds-space margin-top="base">
|
||||
<base-button filled :disabled="disabled" type="submit">
|
||||
{{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }}
|
||||
</base-button>
|
||||
<base-button v-if="editingLink.id" id="cancel" danger @click="handleCancel()">
|
||||
{{ $t('actions.cancel') }}
|
||||
</base-button>
|
||||
</ds-space>
|
||||
</ds-space>
|
||||
</base-card>
|
||||
</ds-form>
|
||||
</template>
|
||||
</my-something-list>
|
||||
</base-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import unionBy from 'lodash/unionBy'
|
||||
import gql from 'graphql-tag'
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import MySomethingList from '~/components/_new/features/MySomethingList/MySomethingList.vue'
|
||||
import SocialMediaListItem from '~/components/_new/features/SocialMedia/SocialMediaListItem.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MySomethingList,
|
||||
SocialMediaListItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
useFormData: {
|
||||
socialMediaUrl: '',
|
||||
},
|
||||
formSchema: {
|
||||
useFormSchema: {
|
||||
socialMediaUrl: {
|
||||
type: 'url',
|
||||
message: this.$t('common.validations.url'),
|
||||
},
|
||||
},
|
||||
disabled: true,
|
||||
editingLink: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
currentSocialMediaLinks() {
|
||||
const domainRegex = /^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:/\n?]+)/g
|
||||
const { socialMedia = [] } = this.currentUser
|
||||
return socialMedia.map(({ id, url }) => {
|
||||
const [domain] = url.match(domainRegex) || []
|
||||
const favicon = domain ? `${domain}/favicon.ico` : null
|
||||
return { id, url, favicon }
|
||||
})
|
||||
},
|
||||
socialMediaLinks() {
|
||||
const domainRegex = /^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:/\n?]+)/g
|
||||
const { socialMedia = [] } = this.currentUser
|
||||
@ -106,28 +82,83 @@ export default {
|
||||
...mapMutations({
|
||||
setCurrentUser: 'auth/SET_USER',
|
||||
}),
|
||||
handleCancel() {
|
||||
this.editingLink = {}
|
||||
this.formData.socialMediaUrl = ''
|
||||
this.disabled = true
|
||||
},
|
||||
handleEditSocialMedia(link) {
|
||||
this.editingLink = link
|
||||
this.formData.socialMediaUrl = link.url
|
||||
},
|
||||
handleInput(data) {
|
||||
this.disabled = true
|
||||
},
|
||||
handleInputValid(data) {
|
||||
handleInputValid(thisList, data) {
|
||||
if (data.socialMediaUrl.length < 1) {
|
||||
this.disabled = true
|
||||
thisList.disabled = true
|
||||
} else {
|
||||
this.disabled = false
|
||||
thisList.disabled = false
|
||||
}
|
||||
},
|
||||
async handleDeleteSocialMedia(link) {
|
||||
callbackEditSocialMedia(thisList, link) {
|
||||
thisList.formData.socialMediaUrl = link.url
|
||||
// try to set focus on link edit field
|
||||
// thisList.$refs.socialMediaUrl.$el.focus()
|
||||
// !!! Check for existenz
|
||||
// this.$scopedSlots.default()[0].context.$refs
|
||||
// thisList.$scopedSlots['edit-item']()[0].$el.focus()
|
||||
// console.log(thisList.$scopedSlots['edit-item']()[0].context.$refs)
|
||||
// console.log(thisList.$scopedSlots['edit-item']()[0].context.$refs)
|
||||
// console.log(thisList.$refs)
|
||||
},
|
||||
async handleSubmitSocialMedia(thisList, isCreation, item, formData) {
|
||||
item.url = formData.socialMediaUrl
|
||||
|
||||
const items = this.socialMediaLinks
|
||||
const duplicateUrl = items.find((eleItem) => eleItem.url === item.url)
|
||||
if (duplicateUrl && duplicateUrl.id !== item.id) {
|
||||
return thisList.$toast.error(thisList.$t('settings.social-media.requireUnique'))
|
||||
}
|
||||
|
||||
let mutation, variables, successMessage
|
||||
if (isCreation) {
|
||||
mutation = gql`
|
||||
mutation($url: String!) {
|
||||
CreateSocialMedia(url: $url) {
|
||||
id
|
||||
url
|
||||
}
|
||||
}
|
||||
`
|
||||
variables = { url: item.url }
|
||||
successMessage = thisList.$t('settings.social-media.successAdd')
|
||||
} else {
|
||||
mutation = gql`
|
||||
mutation($id: ID!, $url: String!) {
|
||||
UpdateSocialMedia(id: $id, url: $url) {
|
||||
id
|
||||
url
|
||||
}
|
||||
}
|
||||
`
|
||||
variables = { id: item.id, url: item.url }
|
||||
successMessage = thisList.$t('settings.data.success')
|
||||
}
|
||||
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
await thisList.$apollo.mutate({
|
||||
mutation,
|
||||
variables,
|
||||
update: (_store, { data }) => {
|
||||
const newSocialMedia = !isCreation ? data.UpdateSocialMedia : data.CreateSocialMedia
|
||||
this.setCurrentUser({
|
||||
...this.currentUser,
|
||||
socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
thisList.$toast.success(successMessage)
|
||||
|
||||
return true
|
||||
} catch (err) {
|
||||
thisList.$toast.error(err.message)
|
||||
|
||||
return false
|
||||
}
|
||||
},
|
||||
async callbackDeleteSocialMedia(thisList, item) {
|
||||
try {
|
||||
await thisList.$apollo.mutate({
|
||||
mutation: gql`
|
||||
mutation($id: ID!) {
|
||||
DeleteSocialMedia(id: $id) {
|
||||
@ -137,11 +168,11 @@ export default {
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
id: link.id,
|
||||
id: item.id,
|
||||
},
|
||||
update: (store, { data }) => {
|
||||
const socialMedia = this.currentUser.socialMedia.filter(
|
||||
(element) => element.id !== link.id,
|
||||
(element) => element.id !== item.id,
|
||||
)
|
||||
this.setCurrentUser({
|
||||
...this.currentUser,
|
||||
@ -150,87 +181,11 @@ export default {
|
||||
},
|
||||
})
|
||||
|
||||
this.$toast.success(this.$t('settings.social-media.successDelete'))
|
||||
thisList.$toast.success(thisList.$t('settings.social-media.successDelete'))
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
async handleSubmitSocialMedia() {
|
||||
const isEditing = !!this.editingLink.id
|
||||
const url = this.formData.socialMediaUrl
|
||||
|
||||
const duplicateUrl = this.socialMediaLinks.find((link) => link.url === url)
|
||||
if (duplicateUrl && duplicateUrl.id !== this.editingLink.id) {
|
||||
return this.$toast.error(this.$t('settings.social-media.requireUnique'))
|
||||
}
|
||||
|
||||
let mutation = gql`
|
||||
mutation($url: String!) {
|
||||
CreateSocialMedia(url: $url) {
|
||||
id
|
||||
url
|
||||
}
|
||||
}
|
||||
`
|
||||
const variables = { url }
|
||||
let successMessage = this.$t('settings.social-media.successAdd')
|
||||
|
||||
if (isEditing) {
|
||||
mutation = gql`
|
||||
mutation($id: ID!, $url: String!) {
|
||||
UpdateSocialMedia(id: $id, url: $url) {
|
||||
id
|
||||
url
|
||||
}
|
||||
}
|
||||
`
|
||||
variables.id = this.editingLink.id
|
||||
successMessage = this.$t('settings.data.success')
|
||||
}
|
||||
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation,
|
||||
variables,
|
||||
update: (store, { data }) => {
|
||||
const newSocialMedia = isEditing ? data.UpdateSocialMedia : data.CreateSocialMedia
|
||||
this.setCurrentUser({
|
||||
...this.currentUser,
|
||||
socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
this.$toast.success(successMessage)
|
||||
this.formData.socialMediaUrl = ''
|
||||
this.disabled = true
|
||||
this.editingLink = {}
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
thisList.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.divider {
|
||||
opacity: 0.4;
|
||||
padding: 0 $space-small;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-item--high {
|
||||
.ds-list-item-prefix {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.ds-list-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user