mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Split social media page and list component
- Rename variables. - Implement callbacks. - Fix tests.
This commit is contained in:
Wolfgang Huß
parent
280f0f5a78
commit
b7400339ab
@ -1,20 +1,26 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import flushPromises from 'flush-promises'
|
||||
// Wolle import flushPromises from 'flush-promises'
|
||||
import MySomethingList from './MySomethingList.vue'
|
||||
import Vuex from 'vuex'
|
||||
// Wolle import Vuex from 'vuex'
|
||||
import Vue from 'vue'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
describe('MySomethingList.vue', () => {
|
||||
let wrapper
|
||||
let propsData
|
||||
let data
|
||||
let mocks
|
||||
let getters
|
||||
const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
|
||||
// let getters
|
||||
// Wolle const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
|
||||
// const newSocialMediaUrl = 'https://twitter.com/mattwr18'
|
||||
|
||||
beforeEach(() => {
|
||||
propsData = {
|
||||
useItems: [{ id: 'id', dummy: 'dummy' }],
|
||||
namePropertyKey: 'dummy',
|
||||
callbacks: { edit: jest.fn(), submit: jest.fn(), delete: jest.fn() },
|
||||
}
|
||||
data = () => {
|
||||
return {}
|
||||
}
|
||||
@ -28,22 +34,32 @@ describe('MySomethingList.vue', () => {
|
||||
success: jest.fn(),
|
||||
},
|
||||
}
|
||||
getters = {
|
||||
'auth/user': () => {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
// getters = {
|
||||
// 'auth/user': () => {
|
||||
// return {}
|
||||
// },
|
||||
// }
|
||||
})
|
||||
|
||||
describe('mount', () => {
|
||||
// Wolle let form, input, slots, submitButton
|
||||
let slots
|
||||
let form, slots
|
||||
const Wrapper = () => {
|
||||
const store = new Vuex.Store({
|
||||
getters,
|
||||
// const store = new Vuex.Store({
|
||||
// getters,
|
||||
// })
|
||||
slots = {
|
||||
'list-item': '<div class="list-item"></div>',
|
||||
'edit-item': '<div class="edit-item"></div>',
|
||||
}
|
||||
return mount(MySomethingList, {
|
||||
propsData,
|
||||
data,
|
||||
// store,
|
||||
mocks,
|
||||
localVue,
|
||||
slots,
|
||||
})
|
||||
slots = { 'list-item': '<div class="list-item"></div>' }
|
||||
return mount(MySomethingList, { data, store, mocks, localVue, slots })
|
||||
}
|
||||
|
||||
// describe('adding social media link', () => {
|
||||
@ -108,11 +124,11 @@ describe('MySomethingList.vue', () => {
|
||||
|
||||
describe('given existing social media links', () => {
|
||||
beforeEach(() => {
|
||||
getters = {
|
||||
'auth/user': () => ({
|
||||
socialMedia: [{ id: 's1', url: socialMediaUrl }],
|
||||
}),
|
||||
}
|
||||
// getters = {
|
||||
// 'auth/user': () => ({
|
||||
// socialMedia: [{ id: 's1', url: socialMediaUrl }],
|
||||
// }),
|
||||
// }
|
||||
// Wolle propsData = { editingLink: { id: 's1', url: socialMediaUrl } }
|
||||
// data = () => {
|
||||
// return {
|
||||
@ -137,67 +153,56 @@ describe('MySomethingList.vue', () => {
|
||||
})
|
||||
})
|
||||
|
||||
// Wolle it('does not accept a duplicate url', async () => {
|
||||
// // wrapper.find('input#addSocialMedia').setValue(socialMediaUrl)
|
||||
// wrapper.find('input#editSocialMedia').setValue(socialMediaUrl)
|
||||
// form.trigger('submit')
|
||||
// await Vue.nextTick()
|
||||
// expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
|
||||
// })
|
||||
|
||||
// describe('editing social media link', () => {
|
||||
// beforeEach(async () => {
|
||||
// const editButton = wrapper.find('.base-button[data-test="edit-button"]')
|
||||
// editButton.trigger('click')
|
||||
// await Vue.nextTick()
|
||||
// input = wrapper.find('input#editSocialMedia')
|
||||
// })
|
||||
|
||||
// it('disables adding new links while editing', () => {
|
||||
// const addInput = wrapper.find('input#addSocialMedia')
|
||||
// wrapper.find('.base-button[data-test="add-save-button"]').text().
|
||||
// expect(addInput.exists()).toBe(false)
|
||||
// const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
|
||||
// expect(submitButton.text()).not.toContain('settings.social-media.submit')
|
||||
// })
|
||||
|
||||
// Wolle remove? or test here abstract? it('sends the new url to the backend', async () => {
|
||||
// const expected = expect.objectContaining({
|
||||
// variables: { id: 's1', url: newSocialMediaUrl },
|
||||
// })
|
||||
// input.setValue(newSocialMediaUrl)
|
||||
// form.trigger('submit')
|
||||
// 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', () => {
|
||||
describe('editing item', () => {
|
||||
beforeEach(async () => {
|
||||
const editButton = wrapper.find('.base-button[data-test="edit-button"]')
|
||||
editButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
// Wolle input = wrapper.find('input#editSocialMedia')
|
||||
})
|
||||
|
||||
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()).toBeTruthy()
|
||||
const cancelButton = wrapper.find('button#cancel')
|
||||
cancelButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
expect(wrapper.find('.edit-item').exists()).not.toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
||||
describe('calls callback functions', () => {
|
||||
it('call 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('call edit', 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.edit).toHaveBeenCalledTimes(1)
|
||||
expect(propsData.callbacks.edit).toHaveBeenCalledWith(expect.any(Object), expectedItem)
|
||||
})
|
||||
|
||||
it('call delete', async () => {
|
||||
const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
|
||||
deleteButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
})
|
||||
|
||||
it('sends the link id to the backend', () => {
|
||||
const expected = expect.objectContaining({
|
||||
variables: { id: 's1' },
|
||||
})
|
||||
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
})
|
||||
|
||||
it('displays a success message', async () => {
|
||||
await flushPromises()
|
||||
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
|
||||
const expectedItem = expect.objectContaining({ id: 'id', dummy: 'dummy' })
|
||||
expect(propsData.callbacks.delete).toHaveBeenCalledTimes(1)
|
||||
expect(propsData.callbacks.delete).toHaveBeenCalledWith(expect.any(Object), expectedItem)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,99 +1,96 @@
|
||||
<template>
|
||||
<base-card>
|
||||
<ds-heading tag="h2" class="title">{{ $t('settings.social-media.name') }}</ds-heading>
|
||||
<ds-form
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@input="handleInput"
|
||||
@input-valid="handleInputValid"
|
||||
@submit="handleSubmitSocialMedia"
|
||||
>
|
||||
<div v-if="isEditing">
|
||||
<!-- Wolle translation -->
|
||||
<ds-space margin="base">
|
||||
<ds-heading tag="h3" class="undertitle">
|
||||
{{
|
||||
/* $t('settings.social-media.name') */ editingLink.id === ''
|
||||
? 'Add new one'
|
||||
: 'Edit "' + editingLink.url + '"'
|
||||
}}
|
||||
</ds-heading>
|
||||
</ds-space>
|
||||
<ds-space v-if="socialMediaLinks" margin-top="base" margin="base">
|
||||
<!-- Wolle <ds-input
|
||||
id="editSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/> -->
|
||||
<slot name="edit-item" />
|
||||
</ds-space>
|
||||
</div>
|
||||
<div v-else>
|
||||
<ds-space v-if="socialMediaLinks" margin-top="base" margin="small">
|
||||
<ds-list>
|
||||
<ds-list-item v-for="link in socialMediaLinks" :key="link.id" class="list-item--high">
|
||||
<!-- Wolle remove template tag? -->
|
||||
<template>
|
||||
<!-- Wolle <a :href="link.url" target="_blank">
|
||||
<img :src="link.favicon" alt="Link:" height="16" width="16" />
|
||||
{{ link.url }}
|
||||
</a> -->
|
||||
<!-- Wolle <slot name="list-item" :link="link" data-test="item-slot" /> -->
|
||||
<slot name="list-item" :link="link" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<ds-space margin-top="base">
|
||||
<ds-form
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@input="handleInput"
|
||||
@input-valid="handleInputValid"
|
||||
@submit="handleSubmitSocialMedia"
|
||||
>
|
||||
<div v-if="isEditing">
|
||||
<!-- Wolle translation -->
|
||||
<ds-space margin="base">
|
||||
<ds-heading tag="h3" class="undertitle">
|
||||
{{
|
||||
/* $t('settings.social-media.name') */ isCreation
|
||||
? 'Add new'
|
||||
: 'Edit "' + editingItem[namePropertyKey] + '"'
|
||||
}}
|
||||
</ds-heading>
|
||||
</ds-space>
|
||||
<ds-space v-if="items" margin-top="base" margin="base">
|
||||
<!-- Wolle <ds-input
|
||||
v-if="!isEditing"
|
||||
id="addSocialMedia"
|
||||
id="editSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/> -->
|
||||
<ds-space margin-top="base">
|
||||
<base-button
|
||||
filled
|
||||
:disabled="!(!isEditing || (isEditing && !disabled))"
|
||||
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>
|
||||
<slot name="edit-item" />
|
||||
</ds-space>
|
||||
</ds-form>
|
||||
</base-card>
|
||||
</div>
|
||||
<div v-else>
|
||||
<ds-space v-if="items" margin-top="base" margin="small">
|
||||
<ds-list>
|
||||
<ds-list-item v-for="item in items" :key="item.id" class="list-item--high">
|
||||
<!-- Wolle remove template tag? -->
|
||||
<template>
|
||||
<!-- Wolle <a :href="link.url" target="_blank">
|
||||
<img :src="link.favicon" alt="Link:" height="16" width="16" />
|
||||
{{ link.url }}
|
||||
</a> -->
|
||||
<!-- Wolle <slot name="list-item" :link="link" data-test="item-slot" /> -->
|
||||
<slot name="list-item" :item="item" />
|
||||
<span class="divider">|</span>
|
||||
<base-button
|
||||
icon="edit"
|
||||
circle
|
||||
ghost
|
||||
@click="handleEditSocialMedia(item)"
|
||||
:title="$t('actions.edit')"
|
||||
data-test="edit-button"
|
||||
/>
|
||||
<base-button
|
||||
icon="trash"
|
||||
circle
|
||||
ghost
|
||||
@click="handleDeleteSocialMedia(item)"
|
||||
:title="$t('actions.delete')"
|
||||
data-test="delete-button"
|
||||
/>
|
||||
</template>
|
||||
</ds-list-item>
|
||||
</ds-list>
|
||||
</ds-space>
|
||||
</div>
|
||||
|
||||
<ds-space margin-top="base">
|
||||
<!-- Wolle <ds-input
|
||||
v-if="!isEditing"
|
||||
id="addSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/> -->
|
||||
<ds-space margin-top="base">
|
||||
<base-button
|
||||
filled
|
||||
:disabled="!(!isEditing || (isEditing && !disabled))"
|
||||
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>
|
||||
import unionBy from 'lodash/unionBy'
|
||||
import gql from 'graphql-tag'
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
// Wolle import unionBy from 'lodash/unionBy'
|
||||
// import gql from 'graphql-tag'
|
||||
// Wolle import { mapGetters, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MySomethingList',
|
||||
@ -106,12 +103,25 @@ export default {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
callbackEdit: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
useItems: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
defaultItem: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
namePropertyKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
callbacks: {
|
||||
type: Object,
|
||||
default: () => ({ edit: () => {}, submit: () => {}, delete: () => {} }),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
// Wolle console.log(this.useItems)
|
||||
return {
|
||||
// Wolle formData: {
|
||||
// socialMediaUrl: '',
|
||||
@ -124,44 +134,56 @@ export default {
|
||||
// },
|
||||
formData: this.useFormData,
|
||||
formSchema: this.useFormSchema,
|
||||
items: this.useItems,
|
||||
disabled: true,
|
||||
editingLink: null,
|
||||
editingItem: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
// Wolle ...mapGetters({
|
||||
// currentUser: 'auth/user',
|
||||
// }),
|
||||
isEditing() {
|
||||
return this.editingLink !== null
|
||||
return this.editingItem !== null
|
||||
},
|
||||
isCreation() {
|
||||
return this.editingLink !== null && this.editingLink.id === ''
|
||||
return this.editingItem !== null && this.editingItem.id === ''
|
||||
},
|
||||
socialMediaLinks() {
|
||||
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 }
|
||||
})
|
||||
// Wolle socialMediaLinks() {
|
||||
// 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 }
|
||||
// })
|
||||
// },
|
||||
},
|
||||
watch: {
|
||||
// useFormData(newFormData) {
|
||||
// this.formData = newFormData
|
||||
// },
|
||||
// useFormSchema(newFormSchema) {
|
||||
// this.formSchema = newFormSchema
|
||||
// },
|
||||
useItems(newItems) {
|
||||
this.items = newItems
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setCurrentUser: 'auth/SET_USER',
|
||||
}),
|
||||
// Wolle ...mapMutations({
|
||||
// setCurrentUser: 'auth/SET_USER',
|
||||
// }),
|
||||
handleCancel() {
|
||||
this.editingLink = null
|
||||
this.formData.socialMediaUrl = ''
|
||||
this.editingItem = null
|
||||
// Wolle ??? this.formData.socialMediaUrl = ''
|
||||
this.disabled = true
|
||||
},
|
||||
handleEditSocialMedia(link) {
|
||||
this.editingLink = link
|
||||
handleEditSocialMedia(item) {
|
||||
this.editingItem = item
|
||||
// Wolle this.formData.socialMediaUrl = link.url
|
||||
// Wolle this.$refs.socialMediaUrl.$el.focus()
|
||||
this.callbackEdit(this, link)
|
||||
this.callbacks.edit(this, item)
|
||||
},
|
||||
handleInput(data) {
|
||||
this.disabled = true
|
||||
@ -173,99 +195,105 @@ export default {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
async handleDeleteSocialMedia(link) {
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: gql`
|
||||
mutation($id: ID!) {
|
||||
DeleteSocialMedia(id: $id) {
|
||||
id
|
||||
url
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
id: link.id,
|
||||
},
|
||||
update: (store, { data }) => {
|
||||
const socialMedia = this.currentUser.socialMedia.filter(
|
||||
(element) => element.id !== link.id,
|
||||
)
|
||||
this.setCurrentUser({
|
||||
...this.currentUser,
|
||||
socialMedia,
|
||||
})
|
||||
},
|
||||
})
|
||||
async handleDeleteSocialMedia(item) {
|
||||
// Wolle try {
|
||||
// await this.$apollo.mutate({
|
||||
// mutation: gql`
|
||||
// mutation($id: ID!) {
|
||||
// DeleteSocialMedia(id: $id) {
|
||||
// id
|
||||
// url
|
||||
// }
|
||||
// }
|
||||
// `,
|
||||
// variables: {
|
||||
// id: item.id,
|
||||
// },
|
||||
// update: (store, { data }) => {
|
||||
// const socialMedia = this.currentUser.socialMedia.filter(
|
||||
// (element) => element.id !== item.id,
|
||||
// )
|
||||
// this.setCurrentUser({
|
||||
// ...this.currentUser,
|
||||
// socialMedia,
|
||||
// })
|
||||
// },
|
||||
// })
|
||||
|
||||
this.$toast.success(this.$t('settings.social-media.successDelete'))
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
// this.$toast.success(this.$t('settings.social-media.successDelete'))
|
||||
// } catch (err) {
|
||||
// this.$toast.error(err.message)
|
||||
// }
|
||||
await this.callbacks.delete(this, item)
|
||||
},
|
||||
async handleSubmitSocialMedia() {
|
||||
// Wolle const isEditing = (this.editingLink !== null)
|
||||
if (!this.isEditing) {
|
||||
// Wolle this.editingLink = { id: '', url: '' }
|
||||
this.handleEditSocialMedia({ id: '', url: '' })
|
||||
// this.handleEditSocialMedia({ id: '', url: '' })
|
||||
this.handleEditSocialMedia({ ...this.defaultItem, id: '' })
|
||||
} else {
|
||||
// Wolle const url = this.formData.socialMediaUrl
|
||||
this.editingLink.url = this.formData.socialMediaUrl
|
||||
// // Wolle const url = this.formData.socialMediaUrl
|
||||
// this.editingLink.url = this.formData.socialMediaUrl
|
||||
|
||||
const duplicateUrl = this.socialMediaLinks.find((link) => link.url === this.editingLink.url)
|
||||
// Wolle console.log('duplicateUrl: ', duplicateUrl)
|
||||
// console.log('this.isEditing: ', this.isEditing)
|
||||
// console.log('this.editingLink: ', this.editingLink)
|
||||
if (duplicateUrl && this.isEditing && duplicateUrl.id !== this.editingLink.id) {
|
||||
return this.$toast.error(this.$t('settings.social-media.requireUnique'))
|
||||
}
|
||||
// const duplicateUrl = this.items.find((item) => item.url === this.editingLink.url)
|
||||
// // Wolle console.log('duplicateUrl: ', duplicateUrl)
|
||||
// // console.log('this.isEditing: ', this.isEditing)
|
||||
// // console.log('this.editingLink: ', this.editingLink)
|
||||
// if (duplicateUrl && this.isEditing && duplicateUrl.id !== this.editingLink.id) {
|
||||
// return this.$toast.error(this.$t('settings.social-media.requireUnique'))
|
||||
// }
|
||||
|
||||
let mutation, variables, successMessage
|
||||
if (this.isCreation) {
|
||||
mutation = gql`
|
||||
mutation($url: String!) {
|
||||
CreateSocialMedia(url: $url) {
|
||||
id
|
||||
url
|
||||
}
|
||||
}
|
||||
`
|
||||
variables = { url: this.editingLink.url }
|
||||
successMessage = this.$t('settings.social-media.successAdd')
|
||||
} else {
|
||||
mutation = gql`
|
||||
mutation($id: ID!, $url: String!) {
|
||||
UpdateSocialMedia(id: $id, url: $url) {
|
||||
id
|
||||
url
|
||||
}
|
||||
}
|
||||
`
|
||||
variables = { id: this.editingLink.id, url: this.editingLink.url }
|
||||
successMessage = this.$t('settings.data.success')
|
||||
}
|
||||
// let mutation, variables, successMessage
|
||||
// if (this.isCreation) {
|
||||
// mutation = gql`
|
||||
// mutation($url: String!) {
|
||||
// CreateSocialMedia(url: $url) {
|
||||
// id
|
||||
// url
|
||||
// }
|
||||
// }
|
||||
// `
|
||||
// variables = { url: this.editingLink.url }
|
||||
// successMessage = this.$t('settings.social-media.successAdd')
|
||||
// } else {
|
||||
// mutation = gql`
|
||||
// mutation($id: ID!, $url: String!) {
|
||||
// UpdateSocialMedia(id: $id, url: $url) {
|
||||
// id
|
||||
// url
|
||||
// }
|
||||
// }
|
||||
// `
|
||||
// variables = { id: this.editingLink.id, url: this.editingLink.url }
|
||||
// successMessage = this.$t('settings.data.success')
|
||||
// }
|
||||
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation,
|
||||
variables,
|
||||
update: (_store, { data }) => {
|
||||
const newSocialMedia = !this.isCreation
|
||||
? data.UpdateSocialMedia
|
||||
: data.CreateSocialMedia
|
||||
this.setCurrentUser({
|
||||
...this.currentUser,
|
||||
socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
|
||||
})
|
||||
},
|
||||
})
|
||||
// try {
|
||||
// await this.$apollo.mutate({
|
||||
// mutation,
|
||||
// variables,
|
||||
// update: (_store, { data }) => {
|
||||
// const newSocialMedia = !this.isCreation
|
||||
// ? data.UpdateSocialMedia
|
||||
// : data.CreateSocialMedia
|
||||
// this.setCurrentUser({
|
||||
// ...this.currentUser,
|
||||
// socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
|
||||
// })
|
||||
// },
|
||||
// })
|
||||
|
||||
this.$toast.success(successMessage)
|
||||
this.formData.socialMediaUrl = ''
|
||||
// this.$toast.success(successMessage)
|
||||
// this.formData.socialMediaUrl = ''
|
||||
// this.disabled = true
|
||||
// this.editingLink = null
|
||||
// } catch (err) {
|
||||
// this.$toast.error(err.message)
|
||||
// }
|
||||
if (await this.callbacks.submit(this, this.isCreation, this.editingItem, this.formData)) {
|
||||
this.disabled = true
|
||||
this.editingLink = null
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
this.editingItem = null
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a :href="link.url" target="_blank">
|
||||
<img :src="link.favicon" alt="Link:" height="16" width="16" />
|
||||
{{ link.url }}
|
||||
<a :href="item.url" target="_blank">
|
||||
<img :src="item.favicon" alt="Link:" height="16" width="16" />
|
||||
{{ item.url }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
export default {
|
||||
name: 'SocialMediaListItem',
|
||||
props: {
|
||||
link: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
@ -112,7 +112,6 @@ describe('my-social-media.vue', () => {
|
||||
socialMedia: [{ id: 's1', url: socialMediaUrl }],
|
||||
}),
|
||||
}
|
||||
|
||||
wrapper = Wrapper()
|
||||
form = wrapper.find('form')
|
||||
})
|
||||
@ -152,13 +151,6 @@ describe('my-social-media.vue', () => {
|
||||
input = wrapper.find('input#editSocialMedia')
|
||||
})
|
||||
|
||||
it('disables adding new links while editing', () => {
|
||||
// Wolle const addInput = wrapper.find('input#addSocialMedia')
|
||||
// expect(addInput.exists()).toBe(false)
|
||||
const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
|
||||
expect(submitButton.text()).not.toContain('settings.social-media.submit')
|
||||
})
|
||||
|
||||
it('sends the new url to the backend', async () => {
|
||||
const expected = expect.objectContaining({
|
||||
variables: { id: 's1', url: newSocialMediaUrl },
|
||||
@ -168,36 +160,28 @@ 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', () => {
|
||||
// beforeEach(async () => {
|
||||
// const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
|
||||
// deleteButton.trigger('click')
|
||||
// await Vue.nextTick()
|
||||
// })
|
||||
describe('deleting social media link', () => {
|
||||
beforeEach(async () => {
|
||||
const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
|
||||
deleteButton.trigger('click')
|
||||
await Vue.nextTick()
|
||||
})
|
||||
|
||||
// it('sends the link id to the backend', () => {
|
||||
// const expected = expect.objectContaining({
|
||||
// variables: { id: 's1' },
|
||||
// })
|
||||
it('sends the link id to the backend', () => {
|
||||
const expected = expect.objectContaining({
|
||||
variables: { id: 's1' },
|
||||
})
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
})
|
||||
|
||||
// expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
|
||||
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
|
||||
// })
|
||||
|
||||
// it('displays a success message', async () => {
|
||||
// await flushPromises()
|
||||
// expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
|
||||
// })
|
||||
// })
|
||||
it('displays a success message', async () => {
|
||||
await flushPromises()
|
||||
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,24 +1,37 @@
|
||||
<template>
|
||||
<my-something-list
|
||||
:useFormData="useFormData"
|
||||
:useFormSchema="useFormSchema"
|
||||
:callbackEdit="callbackEditSocialMedia"
|
||||
>
|
||||
<template #list-item="{ link }">
|
||||
<social-media-list-item :link="link" />
|
||||
</template>
|
||||
<template #edit-item>
|
||||
<ds-input
|
||||
id="editSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/>
|
||||
</template>
|
||||
</my-something-list>
|
||||
<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="{
|
||||
edit: callbackEditSocialMedia,
|
||||
submit: handleSubmitSocialMedia,
|
||||
delete: callbackDeleteSocialMedia,
|
||||
}"
|
||||
>
|
||||
<template #list-item="{ item }">
|
||||
<social-media-list-item :item="item" />
|
||||
</template>
|
||||
<template #edit-item>
|
||||
<ds-input
|
||||
id="editSocialMedia"
|
||||
model="socialMediaUrl"
|
||||
type="text"
|
||||
:placeholder="$t('settings.social-media.placeholder')"
|
||||
/>
|
||||
</template>
|
||||
</my-something-list>
|
||||
</base-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import unionBy from 'lodash/unionBy'
|
||||
import gql from 'graphql-tag'
|
||||
import MySomethingList from '~/components/_new/features/MySomethingList/MySomethingList.vue'
|
||||
import SocialMediaListItem from '~/components/_new/features/SocialMedia/SocialMediaListItem.vue'
|
||||
|
||||
@ -40,17 +53,130 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
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
|
||||
return socialMedia.map(({ id, url }) => {
|
||||
const [domain] = url.match(domainRegex) || []
|
||||
const favicon = domain ? `${domain}/favicon.ico` : null
|
||||
return { id, url, favicon }
|
||||
})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
callbackEditSocialMedia(thisMySomethingList, link) {
|
||||
...mapMutations({
|
||||
setCurrentUser: 'auth/SET_USER',
|
||||
}),
|
||||
callbackEditSocialMedia(thisList, link) {
|
||||
// Wolle this.editingLink = link
|
||||
thisMySomethingList.formData.socialMediaUrl = link.url
|
||||
// thisMySomethingList.$refs.socialMediaUrl.$el.focus()
|
||||
thisList.formData.socialMediaUrl = link.url
|
||||
// thisList.$refs.socialMediaUrl.$el.focus()
|
||||
// !!! Check for existenz
|
||||
// this.$scopedSlots.default()[0].context.$refs
|
||||
// thisMySomethingList.$scopedSlots['edit-item']()[0].$el.focus()
|
||||
// console.log(thisMySomethingList.$scopedSlots['edit-item']()[0].context.$refs)
|
||||
// console.log(thisMySomethingList.$scopedSlots['edit-item']()[0].context.$refs)
|
||||
// console.log(thisMySomethingList.$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 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)
|
||||
// Wolle ??? thisList.formData.socialMediaUrl = ''
|
||||
|
||||
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) {
|
||||
id
|
||||
url
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
id: item.id,
|
||||
},
|
||||
update: (store, { data }) => {
|
||||
const socialMedia = thisList.currentUser.socialMedia.filter(
|
||||
(element) => element.id !== item.id,
|
||||
)
|
||||
thisList.setCurrentUser({
|
||||
...thisList.currentUser,
|
||||
socialMedia,
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
thisList.$toast.success(thisList.$t('settings.social-media.successDelete'))
|
||||
} catch (err) {
|
||||
thisList.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user