IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

use computed property to enable/disable delete button

Browse Source
This commit is contained in:
Alina Beck 2019-12-19 01:02:15 +05:30
parent 7c7a800bc2
commit c4959bb851
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/components/DeleteData/DeleteData.spec.js
View File

@ -81,7 +81,7 @@ describe('DeleteData.vue', () => {
}) })
it('does not call the delete user mutation if deleteEnabled is false', () => { it('does not call the delete user mutation if deleteEnabled is false', () => {
deleteAccountBtn = wrapper.find('.ds-button-danger') deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
deleteAccountBtn.trigger('click') deleteAccountBtn.trigger('click')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
}) })
@ -90,7 +90,7 @@ describe('DeleteData.vue', () => {
beforeEach(() => { beforeEach(() => {
enableDeletionInput = wrapper.find('.enable-deletion-input input') enableDeletionInput = wrapper.find('.enable-deletion-input input')
enableDeletionInput.setValue(deleteAccountName) enableDeletionInput.setValue(deleteAccountName)
deleteAccountBtn = wrapper.find('.ds-button-danger') deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
}) })
it('if deleteEnabled is true and only deletes user by default', () => { it('if deleteEnabled is true and only deletes user by default', () => {
@ -168,7 +168,7 @@ describe('DeleteData.vue', () => {
it('shows an error toaster when the mutation rejects', async () => { it('shows an error toaster when the mutation rejects', async () => {
enableDeletionInput = wrapper.find('.enable-deletion-input input') enableDeletionInput = wrapper.find('.enable-deletion-input input')
enableDeletionInput.setValue(deleteAccountName) enableDeletionInput.setValue(deleteAccountName)
deleteAccountBtn = wrapper.find('.ds-button-danger') deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
await deleteAccountBtn.trigger('click') await deleteAccountBtn.trigger('click')
// second submission causes mutation to reject // second submission causes mutation to reject
await deleteAccountBtn.trigger('click') await deleteAccountBtn.trigger('click')

20
webapp/components/DeleteData/DeleteData.vue
View File

@ -57,14 +57,19 @@
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }"> <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
<ds-input <ds-input
v-model="enableDeletionValue" v-model="enableDeletionValue"
@input="enableDeletion"
class="enable-deletion-input" class="enable-deletion-input"
/> />
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1 }"> <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1 }">
<ds-button icon="trash" danger :disabled="!deleteEnabled" @click="handleSubmit"> <base-button
icon="trash"
danger
:disabled="!deleteEnabled"
data-test="delete-button"
@click="handleSubmit"
>
{{ $t('settings.deleteUserAccount.name') }} {{ $t('settings.deleteUserAccount.name') }}
</ds-button> </base-button>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</ds-container> </ds-container>
@ -82,7 +87,6 @@ export default {
return { return {
deleteContributions: false, deleteContributions: false,
deleteComments: false, deleteComments: false,
deleteEnabled: false,
enableDeletionValue: null, enableDeletionValue: null,
} }
}, },
@ -90,16 +94,14 @@ export default {
...mapGetters({ ...mapGetters({
currentUser: 'auth/user', currentUser: 'auth/user',
}), }),
deleteEnabled() {
return this.enableDeletionValue === this.currentUser.name
},
}, },
methods: { methods: {
...mapActions({ ...mapActions({
logout: 'auth/logout', logout: 'auth/logout',
}), }),
enableDeletion() {
if (this.enableDeletionValue === this.currentUser.name) {
this.deleteEnabled = true
}
},
handleSubmit() { handleSubmit() {
const resourceArgs = [] const resourceArgs = []
if (this.deleteContributions) { if (this.deleteContributions) {