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

Merge pull request #1620 from gradido/1588-frontend-expendable-paginated-link-list

Browse Source 
1588 frontend expendable paginated link list
This commit is contained in:
Alexander Friedland 2022-03-17 22:51:09 +01:00 committed by GitHub
commit c6cd6f37e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 883 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/src/mixins/toaster.js
View File

@ -15,7 +15,7 @@ export const toasters = {
toast(message, options) { toast(message, options) {
// for unit tests, check that replace is present // for unit tests, check that replace is present
if (message.replace) message = message.replace(/^GraphQL error: /, '') if (message.replace) message = message.replace(/^GraphQL error: /, '')
this.$bvToast.toast(message, { this.$root.$bvToast.toast(message, {
autoHideDelay: 5000, autoHideDelay: 5000,
appendToast: true, appendToast: true,
solid: true, solid: true,

4
frontend/public/index.html
View File

@ -52,10 +52,6 @@
</head> </head>
<body> <body>
<div class="wrapper" id="app">
</div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

126
frontend/src/components/DecayInformations/CollapseLinksList.spec.js Normal file
View File

@ -0,0 +1,126 @@
import { mount } from '@vue/test-utils'
import CollapseLinksList from './CollapseLinksList'
const localVue = global.localVue
const mocks = {
$i18n: {
locale: 'en',
},
$tc: jest.fn((tc) => tc),
$t: jest.fn((t) => t),
}
const propsData = {
transactionLinks: [
{
amount: '5',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 87,
memo: 'Eene meene Siegerpreis, vor mir steht ein Schokoeis. Hex-hex!',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '6',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 86,
memo: 'Eene meene buntes Laub, auf dem Schrank da liegt kein Staub.',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
],
transactionLinkCount: 3,
value: 1,
pending: false,
pageSize: 5,
}
describe('CollapseLinksList', () => {
let wrapper
const Wrapper = () => {
return mount(CollapseLinksList, { localVue, mocks, propsData })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the component div.collapse-links-list', () => {
expect(wrapper.find('div.collapse-links-list').exists()).toBeTruthy()
})
describe('load more links', () => {
beforeEach(async () => {
await wrapper.find('button.test-button-load-more').trigger('click')
})
it('emits input', () => {
expect(wrapper.emitted('input')).toEqual([[2]])
})
})
describe('reset transaction link list', () => {
beforeEach(async () => {
await wrapper
.findComponent({ name: 'TransactionLink' })
.vm.$emit('reset-transaction-link-list')
})
it('emits input ', () => {
expect(wrapper.emitted('input')).toEqual([[0]])
})
})
describe('button text', () => {
describe('one more link to load', () => {
beforeEach(async () => {
await wrapper.setProps({
value: 1,
pending: false,
pageSize: 5,
})
})
it('renders text in singular', () => {
expect(mocks.$tc).toBeCalledWith('link-load', 0)
})
})
describe('less than pageSize links to load', () => {
beforeEach(async () => {
await wrapper.setProps({
value: 1,
pending: false,
pageSize: 5,
transactionLinkCount: 6,
})
})
it('renders text in plural and shows the correct count of links', () => {
expect(mocks.$tc).toBeCalledWith('link-load', 1, { n: 4 })
})
})
describe('more than pageSize links to load', () => {
beforeEach(async () => {
await wrapper.setProps({
value: 1,
pending: false,
pageSize: 5,
transactionLinkCount: 16,
})
})
it('renders text in plural with page size links to load', () => {
expect(mocks.$tc).toBeCalledWith('link-load', 2, { n: 5 })
})
})
})
})
})

56
frontend/src/components/DecayInformations/CollapseLinksList.vue
View File

@ -1,14 +1,66 @@
<template> <template>
<div class="collapse-links-list"> <div class="collapse-links-list">
<div class="d-flex"> <div class="d-flex">
<div class="text-center pb-3 gradido-max-width"> <div class="gradido-max-width">
<b>{{ $t('links-list.header') }}</b> <hr />
<div>
<transaction-link
v-for="item in transactionLinks"
:key="item.id"
v-bind="item"
@reset-transaction-link-list="resetTransactionLinkList"
/>
<div class="mb-3">
<b-button
class="test-button-load-more"
v-if="!pending && transactionLinks.length < transactionLinkCount"
block
variant="outline-primary"
@click="loadMoreLinks"
>
{{ buttonText }}
</b-button>
<div class="text-center">
<b-icon v-if="pending" icon="three-dots" animation="cylon" font-scale="4"></b-icon>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import TransactionLink from '@/components/TransactionLinks/TransactionLink.vue'
export default { export default {
name: 'CollapseLinksList', name: 'CollapseLinksList',
components: {
TransactionLink,
},
props: {
transactionLinks: { type: Array, required: true },
transactionLinkCount: {
type: Number,
required: true,
},
value: { type: Number, required: true },
pageSize: { type: Number, default: 5 },
pending: { type: Boolean, default: false },
},
methods: {
resetTransactionLinkList() {
this.$emit('input', 0)
},
loadMoreLinks() {
this.$emit('input', this.value + 1)
},
},
computed: {
buttonText() {
const i = this.transactionLinkCount - this.transactionLinks.length
if (i === 1) return this.$tc('link-load', 0)
if (i <= this.pageSize) return this.$tc('link-load', 1, { n: i })
return this.$tc('link-load', 2, { n: this.pageSize })
},
},
} }
</script> </script>

8
frontend/src/components/DecayInformations/DecayInformation-Decay.vue
View File

@ -13,8 +13,8 @@
</b-col> </b-col>
<b-col cols="6"> <b-col cols="6">
<div> <div>
{{ (Number(balance) - Number(decay.decay)) | GDD }} {{ (Number(balance) - Number(decay)) | GDD }}
{{ decay.decay | GDD }} {{ $t('math.equal') }} {{ decay | GDD }} {{ $t('math.equal') }}
<b>{{ balance | GDD }}</b> <b>{{ balance | GDD }}</b>
</div> </div>
</b-col> </b-col>
@ -27,9 +27,11 @@ export default {
props: { props: {
balance: { balance: {
type: String, type: String,
required: true,
}, },
decay: { decay: {
type: Object, type: String,
required: true,
}, },
}, },
} }

5
frontend/src/components/DecayInformations/DecayInformation-Short.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="decayinformation-short"> <div class="decayinformation-short">
<span v-if="decay.decay">{{ decay.decay | GDD }}</span> <span v-if="decay">{{ decay | GDD }}</span>
</div> </div>
</template> </template>
<script> <script>
@ -8,7 +8,8 @@ export default {
name: 'DecayInformation-Short', name: 'DecayInformation-Short',
props: { props: {
decay: { decay: {
type: Object, type: String,
required: true,
}, },
}, },
} }

71
frontend/src/components/GddTransactionList.spec.js
View File

@ -112,7 +112,8 @@ describe('GddTransactionList', () => {
amount: '1', amount: '1',
balance: '31.76099091058520945292', balance: '31.76099091058520945292',
balanceDate: '2022-02-28T13:55:47', balanceDate: '2022-02-28T13:55:47',
memo: 'adasd adada', memo:
'Um den Kessel schlingt den Reihn, Werft die Eingeweid‘ hinein. Kröte du, die Nacht und Tag Unterm kalten Steine lag,',
linkedUser: { linkedUser: {
firstName: 'Bibi', firstName: 'Bibi',
lastName: 'Bloxberg', lastName: 'Bloxberg',
@ -124,31 +125,14 @@ describe('GddTransactionList', () => {
duration: 282381, duration: 282381,
}, },
}, },
{
id: 8,
typeId: 'CREATION',
amount: '1000',
balance: '32.96482231613347376132',
balanceDate: '2022-02-25T07:29:26',
memo: 'asd adada dad',
linkedUser: {
firstName: 'Gradido',
lastName: 'Akademie',
},
decay: {
decay: '-0.03517768386652623868',
start: '2022-02-23T10:55:30',
end: '2022-02-25T07:29:26',
duration: 160436,
},
},
{ {
id: 6, id: 6,
typeId: 'RECEIVE', typeId: 'RECEIVE',
amount: '10', amount: '10',
balance: '10', balance: '10',
balanceDate: '2022-02-23T10:55:30', balanceDate: '2022-02-23T10:55:30',
memo: 'asd adaaad adad addad ', memo:
'Monatlanges Gift sog ein, In den Topf zuerst hinein… (William Shakespeare, Die Hexen aus Macbeth)',
linkedUser: { linkedUser: {
firstName: 'Bibi', firstName: 'Bibi',
lastName: 'Bloxberg', lastName: 'Bloxberg',
@ -160,6 +144,24 @@ describe('GddTransactionList', () => {
duration: null, duration: null,
}, },
}, },
{
id: 8,
typeId: 'CREATION',
amount: '1000',
balance: '32.96482231613347376132',
balanceDate: '2022-02-25T07:29:26',
memo: 'Jammern hilft nichts, sondern ich kann selber meinen Teil dazu beitragen.',
linkedUser: {
firstName: 'Gradido',
lastName: 'Akademie',
},
decay: {
decay: '-0.03517768386652623868',
start: '2022-02-23T10:55:30',
end: '2022-02-25T07:29:26',
duration: 160436,
},
},
], ],
count: 12, count: 12,
decayStartBlock, decayStartBlock,
@ -250,7 +252,7 @@ describe('GddTransactionList', () => {
it('shows the message of the transaction', () => { it('shows the message of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain( expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
'adasd adada', 'Um den Kessel schlingt den Reihn, Werft die Eingeweid‘ hinein. Kröte du, die Nacht und Tag Unterm kalten Steine lag,',
) )
}) })
@ -285,7 +287,7 @@ describe('GddTransactionList', () => {
it('has a bi-gift icon', () => { it('has a bi-gift icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([ expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-gift', 'bi-arrow-right-circle',
'm-mb-1', 'm-mb-1',
'font2em', 'font2em',
'b-icon', 'b-icon',
@ -296,7 +298,7 @@ describe('GddTransactionList', () => {
it('has gradido-global-color-accent color', () => { it('has gradido-global-color-accent color', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([ expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-gift', 'bi-arrow-right-circle',
'm-mb-1', 'm-mb-1',
'font2em', 'font2em',
'b-icon', 'b-icon',
@ -314,19 +316,19 @@ describe('GddTransactionList', () => {
it('shows the amount of transaction', () => { it('shows the amount of transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain( expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
'1000', '+ 10 GDD',
) )
}) })
it('shows the name of the receiver', () => { it('shows the name of the receiver', () => {
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain( expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
'Gradido Akademie', 'Bibi Bloxberg',
) )
}) })
it('shows the date of the transaction', () => { it('shows the date of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain( expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
'Fri Feb 25 2022 07:29:26 GMT+0000', 'Wed Feb 23 2022 10:55:30 GMT+0000',
) )
}) })
}) })
@ -347,12 +349,19 @@ describe('GddTransactionList', () => {
}) })
it('has a bi-arrow-right-circle icon', () => { it('has a bi-arrow-right-circle icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toContain('bi-arrow-right-circle') expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-gift',
'm-mb-1',
'font2em',
'b-icon',
'bi',
'gradido-global-color-accent',
])
}) })
it('has gradido-global-color-accent color', () => { it('has gradido-global-color-accent color', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([ expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-arrow-right-circle', 'bi-gift',
'm-mb-1', 'm-mb-1',
'font2em', 'font2em',
'b-icon', 'b-icon',
@ -376,19 +385,19 @@ describe('GddTransactionList', () => {
it('shows the name of the recipient', () => { it('shows the name of the recipient', () => {
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain( expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
'Bibi Bloxberg', 'Gradido Akademie',
) )
}) })
it('shows the message of the transaction', () => { it('shows the message of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain( expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
'asd adaaad adad addad', 'Jammern hilft nichts, sondern ich kann selber meinen Teil dazu beitragen.',
) )
}) })
it('shows the date of the transaction', () => { it('shows the date of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain( expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
'Wed Feb 23 2022 10:55:30 GMT+0000', 'Fri Feb 25 2022 07:29:26 GMT+0000',
) )
}) })

7
frontend/src/components/GddTransactionList.vue
View File

@ -43,10 +43,11 @@
</template> </template>
<template #TRANSACTION_LINK> <template #TRANSACTION_LINK>
<transaction-link <transaction-links-summary
class="list-group-item" class="list-group-item"
v-bind="transactions[index]" v-bind="transactions[index]"
:transactionLinkCount="transactionLinkCount" :transactionLinkCount="transactionLinkCount"
@update-transactions="updateTransactions"
/> />
</template> </template>
</transaction-list-item> </transaction-list-item>
@ -71,7 +72,7 @@ import TransactionDecay from '@/components/Transactions/TransactionDecay'
import TransactionSend from '@/components/Transactions/TransactionSend' import TransactionSend from '@/components/Transactions/TransactionSend'
import TransactionReceive from '@/components/Transactions/TransactionReceive' import TransactionReceive from '@/components/Transactions/TransactionReceive'
import TransactionCreation from '@/components/Transactions/TransactionCreation' import TransactionCreation from '@/components/Transactions/TransactionCreation'
import TransactionLink from '@/components/Transactions/TransactionLink' import TransactionLinksSummary from '@/components/Transactions/TransactionLinksSummary'
export default { export default {
name: 'gdd-transaction-list', name: 'gdd-transaction-list',
@ -82,7 +83,7 @@ export default {
TransactionSend, TransactionSend,
TransactionReceive, TransactionReceive,
TransactionCreation, TransactionCreation,
TransactionLink, TransactionLinksSummary,
}, },
data() { data() {
return { return {

145
frontend/src/components/TransactionLinks/TransactionLink.spec.js Normal file
View File

@ -0,0 +1,145 @@
import { mount } from '@vue/test-utils'
import TransactionLink from './TransactionLink'
import { deleteTransactionLink } from '@/graphql/mutations'
import { toastErrorSpy, toastSuccessSpy } from '@test/testSetup'
const localVue = global.localVue
const mockAPIcall = jest.fn()
const navigatorClipboardMock = jest.fn()
const mocks = {
$i18n: {
locale: 'en',
},
$t: jest.fn((t) => t),
$tc: jest.fn((tc) => tc),
$apollo: {
mutate: mockAPIcall,
},
}
const propsData = {
amount: '75',
code: 'c00000000c000000c0000',
holdAvailableAmount: '5.13109484759482747111',
id: 12,
memo: 'Wie schön hier etwas Quatsch zu lesen!',
validUntil: '2022-03-30T14:22:40.000Z',
}
describe('TransactionLink', () => {
let wrapper
const Wrapper = () => {
return mount(TransactionLink, { localVue, mocks, propsData })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the component div.transaction-link', () => {
expect(wrapper.find('div.transaction-link').exists()).toBeTruthy()
})
describe('Copy link to Clipboard', () => {
const navigatorClipboard = navigator.clipboard
beforeAll(() => {
delete navigator.clipboard
navigator.clipboard = { writeText: navigatorClipboardMock }
})
afterAll(() => {
navigator.clipboard = navigatorClipboard
})
describe('copy with success', () => {
beforeEach(async () => {
navigatorClipboardMock.mockResolvedValue()
await wrapper.findAll('button').at(0).trigger('click')
})
it('toasts success message', () => {
expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.link-copied')
})
})
describe('copy with error', () => {
beforeEach(async () => {
navigatorClipboardMock.mockRejectedValue()
await wrapper.findAll('button').at(0).trigger('click')
})
it('toasts error message', () => {
expect(toastErrorSpy).toBeCalledWith('gdd_per_link.not-copied')
})
})
})
describe('delete link', () => {
let spy
beforeEach(() => {
jest.clearAllMocks()
})
describe('with success', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve('some value'))
mockAPIcall.mockResolvedValue()
await wrapper.findAll('button').at(1).trigger('click')
})
it('test Modal if confirm true', () => {
expect(spy).toBeCalled()
})
it('calls the API', () => {
expect(mockAPIcall).toBeCalledWith(
expect.objectContaining({
mutation: deleteTransactionLink,
variables: {
id: 12,
},
}),
)
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.deleted')
})
it('emits reset transaction link list', () => {
expect(wrapper.emitted('reset-transaction-link-list')).toBeTruthy()
})
})
describe('with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve('some value'))
mockAPIcall.mockRejectedValue({ message: 'Something went wrong :(' })
await wrapper.findAll('button').at(1).trigger('click')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Something went wrong :(')
})
})
describe('cancel delete', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(false))
mockAPIcall.mockResolvedValue()
await wrapper.findAll('button').at(1).trigger('click')
})
it('does not call the API', () => {
expect(mockAPIcall).not.toBeCalled()
})
})
})
})
})

101
frontend/src/components/TransactionLinks/TransactionLink.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<div class="transaction-link gradido-custom-background">
<b-row class="mb-2 pt-2 pb-2">
<b-col cols="2">
<type-icon color="text-danger" icon="link45deg" class="pt-4 pl-2" />
</b-col>
<b-col cols="9">
<amount-and-name-row :amount="amount" :text="$t('form.amount')" />
<memo-row :memo="memo" />
<date-row :date="validUntil" :diffNow="true" />
<decay-row :decay="decay" />
</b-col>
<b-col cols="1" class="text-right">
<b-button
class="p-2"
size="sm"
variant="outline-primary"
@click="copy"
:title="$t('gdd_per_link.copy')"
>
<b-icon icon="clipboard"></b-icon>
</b-button>
<br />
<b-button
class="p-2 mt-3"
size="sm"
variant="outline-danger"
@click="deleteLink()"
:title="$t('delete')"
>
<b-icon icon="trash"></b-icon>
</b-button>
</b-col>
</b-row>
</div>
</template>
<script>
import { deleteTransactionLink } from '@/graphql/mutations'
import TypeIcon from '../TransactionRows/TypeIcon'
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
import MemoRow from '../TransactionRows/MemoRow'
import DateRow from '../TransactionRows/DateRow'
import DecayRow from '../TransactionRows/DecayRow'
export default {
name: 'TransactionLink',
components: {
TypeIcon,
AmountAndNameRow,
MemoRow,
DateRow,
DecayRow,
},
props: {
amount: { type: String, required: true },
code: { type: String, required: true },
holdAvailableAmount: { type: String, required: true },
id: { type: Number, required: true },
memo: { type: String, required: true },
validUntil: { type: String, required: true },
},
methods: {
copy() {
const link = `${window.location.origin}/redeem/${this.code}`
navigator.clipboard
.writeText(link)
.then(() => {
this.toastSuccess(this.$t('gdd_per_link.link-copied'))
})
.catch(() => {
this.toastError(this.$t('gdd_per_link.not-copied'))
})
},
deleteLink() {
this.$bvModal.msgBoxConfirm(this.$t('gdd_per_link.delete-the-link')).then(async (value) => {
if (value)
await this.$apollo
.mutate({
mutation: deleteTransactionLink,
variables: {
id: this.id,
},
})
.then(() => {
this.toastSuccess(this.$t('gdd_per_link.deleted'))
this.$emit('reset-transaction-link-list')
})
.catch((err) => {
this.toastError(err.message)
})
})
},
},
computed: {
decay() {
return `${this.amount - this.holdAvailableAmount}`
},
},
}
</script>

18
frontend/src/components/TransactionRows/DateRow.vue
View File

@ -2,11 +2,11 @@
<div class="date-row"> <div class="date-row">
<b-row> <b-row>
<b-col cols="5"> <b-col cols="5">
<div class="text-right">{{ $t('form.date') }}</div> <div class="text-right">{{ diffNow ? $t('gdd_per_link.expired') : $t('form.date') }}</div>
</b-col> </b-col>
<b-col cols="7"> <b-col cols="7">
<div class="gdd-transaction-list-item-date"> <div class="gdd-transaction-list-item-date">
{{ $d(new Date(balanceDate), 'long') }} {{ dateString }}
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
@ -16,10 +16,22 @@
export default { export default {
name: 'DateRow', name: 'DateRow',
props: { props: {
balanceDate: { date: {
type: String, type: String,
required: true, required: true,
}, },
diffNow: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
dateString() {
return this.diffNow
? this.$moment(this.date).locale(this.$i18n.locale).fromNow()
: this.$d(new Date(this.date), 'long')
},
}, },
} }
</script> </script>

2
frontend/src/components/TransactionRows/DecayRow.vue
View File

@ -23,7 +23,7 @@ export default {
}, },
props: { props: {
decay: { decay: {
type: Object, type: String,
required: false, required: false,
}, },
}, },

2
frontend/src/components/TransactionRows/MemoRow.vue
View File

@ -16,7 +16,7 @@ export default {
props: { props: {
memo: { memo: {
type: String, type: String,
required: false, required: true,
}, },
}, },
} }

4
frontend/src/components/Transactions/TransactionCreation.vue
View File

@ -18,10 +18,10 @@
<memo-row :memo="memo" /> <memo-row :memo="memo" />
<!-- Datum --> <!-- Datum -->
<date-row :balanceDate="balanceDate" /> <date-row :date="balanceDate" />
<!-- Decay --> <!-- Decay -->
<decay-row :decay="decay" /> <decay-row :decay="decay.decay" />
</b-col> </b-col>
</b-row> </b-row>
</div> </div>

4
frontend/src/components/Transactions/TransactionDecay.vue
View File

@ -20,8 +20,8 @@
</b-row> </b-row>
</div> </div>
<b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible"> <b-collapse class="pb-4 pt-5" v-model="visible">
<decay-information-decay :balance="balance" :decay="decay" /> <decay-information-decay :balance="balance" :decay="decay.decay" />
</b-collapse> </b-collapse>
</div> </div>
</div> </div>

70
frontend/src/components/Transactions/TransactionLink.vue
View File

@ -1,70 +0,0 @@
<template>
<div class="transaction-slot-link">
<div @click="visible = !visible">
<!-- Collaps Icon -->
<collapse-icon class="text-right" :visible="visible" />
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<type-icon color="text-danger" icon="link45deg" />
</b-col>
<b-col cols="11">
<!-- Amount / Name || Text -->
<amount-and-name-row :amount="amount" :text="$t('gdd_per_link.links_sum')" />
<!-- Count Links -->
<link-count-row :count="transactionLinkCount" />
<!-- Decay -->
<decay-row :decay="decay" />
</b-col>
</b-row>
</div>
<b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
<collapse-links-list />
</b-collapse>
</div>
</div>
</template>
<script>
import CollapseIcon from '../TransactionRows/CollapseIcon'
import TypeIcon from '../TransactionRows/TypeIcon'
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
import LinkCountRow from '../TransactionRows/LinkCountRow'
import DecayRow from '../TransactionRows/DecayRow'
import CollapseLinksList from '../DecayInformations/CollapseLinksList'
export default {
name: 'TransactionSlotLink',
components: {
CollapseIcon,
TypeIcon,
AmountAndNameRow,
LinkCountRow,
DecayRow,
CollapseLinksList,
},
props: {
amount: {
type: String,
required: true,
},
decay: {
type: Object,
required: true,
},
transactionLinkCount: {
type: Number,
required: true,
},
},
data() {
return {
visible: false,
}
},
}
</script>

230
frontend/src/components/Transactions/TransactionLinksSummary.spec.js Normal file
View File

@ -0,0 +1,230 @@
import { mount } from '@vue/test-utils'
import TransactionLinksSummary from './TransactionLinksSummary'
import { listTransactionLinks } from '@/graphql/queries'
import { toastErrorSpy } from '@test/testSetup'
const localVue = global.localVue
const apolloQueryMock = jest.fn()
const mocks = {
$i18n: {
locale: 'en',
},
$t: jest.fn((t) => t),
$tc: jest.fn((tc) => tc),
$apollo: {
query: apolloQueryMock,
},
}
const propsData = {
amount: '123',
decay: {
decay: '-0.2038314055482643084',
start: '2022-02-25T07:29:26.000Z',
end: '2022-02-28T13:55:47.000Z',
duration: 282381,
},
transactionLinkCount: 4,
}
describe('TransactionLinksSummary', () => {
let wrapper
const Wrapper = () => {
return mount(TransactionLinksSummary, { localVue, mocks, propsData })
}
describe('mount', () => {
beforeEach(() => {
apolloQueryMock.mockResolvedValue({
data: {
listTransactionLinks: [
{
amount: '75',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 86,
memo:
'Hokuspokus Haselnuss, Vogelbein und Fliegenfuß, damit der Trick gelingen muss!',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '85',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 107,
memo: 'Mäusespeck und Katzenbuckel, Tricks und Tracks und Zauberkugel!',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '95',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 92,
memo:
'Abrakadabra 1,2,3, die Sonne kommt herbei. Schweinepups und Spuckebrei, der Regen ist vorbei.',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '150',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 16,
memo:
'Abrakadabra 1,2,3 was verschwunden ist komme herbei.Wieseldreck und Schweinemist, zaubern das ist keine List.',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
],
},
})
wrapper = Wrapper()
})
it('renders the component transaction-slot-link', () => {
expect(wrapper.find('div.transaction-slot-link').exists()).toBe(true)
})
it('has a component CollapseLinksList', () => {
expect(wrapper.findComponent({ name: 'CollapseLinksList' }).exists()).toBe(true)
})
it('calls the API to get the list transaction links', () => {
expect(apolloQueryMock).toBeCalledWith({
query: listTransactionLinks,
variables: {
currentPage: 1,
},
fetchPolicy: 'network-only',
})
})
it('has four transactionLinks', () => {
expect(wrapper.vm.transactionLinks).toHaveLength(4)
})
describe('reset transaction links', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setData({
currentPage: 0,
pending: false,
pageSize: 5,
})
})
it('reloads transaction links', () => {
expect(apolloQueryMock).toBeCalledWith({
query: listTransactionLinks,
variables: {
currentPage: 1,
},
fetchPolicy: 'network-only',
})
})
it('emits update transactions', () => {
expect(wrapper.emitted('update-transactions')).toBeTruthy()
})
it('has four transaction links in list', () => {
expect(wrapper.vm.transactionLinks).toHaveLength(4)
})
})
describe('load more transaction links', () => {
beforeEach(async () => {
jest.clearAllMocks()
apolloQueryMock.mockResolvedValue({
data: {
listTransactionLinks: [
{
amount: '76',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 87,
memo:
'Hat jemand die Nummer von der Hexe aus Schneewittchen? Ich bräuchte mal ein paar Äpfel.',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '86',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 108,
memo:
'Die Windfahn´ krächzt am Dach, Der Uhu im Geklüfte; Was wispert wie ein Ach Verhallend in die Lüfte?',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '96',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 93,
memo:
'Verschlafen kräht der Hahn, Ein Blitz noch, und ein trüber, Umwölbter Tag bricht an – Walpurgisnacht vorüber!',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '150',
code: 'ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 17,
memo: 'Eene meene Flaschenschrank, fertig ist der Hexentrank!',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
],
},
})
await wrapper.setData({
currentPage: 2,
pending: false,
pageSize: 5,
})
})
it('has eight transactionLinks', () => {
expect(wrapper.vm.transactionLinks).toHaveLength(8)
})
it('loads more transaction links', () => {
expect(apolloQueryMock).toBeCalledWith({
query: listTransactionLinks,
variables: {
currentPage: 2,
},
fetchPolicy: 'network-only',
})
})
})
describe('loads transaction links with error', () => {
beforeEach(() => {
apolloQueryMock.mockRejectedValue({ message: 'OUCH!' })
wrapper = Wrapper()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('OUCH!')
})
})
})
})

117
frontend/src/components/Transactions/TransactionLinksSummary.vue Normal file
View File

@ -0,0 +1,117 @@
<template>
<div class="transaction-slot-link">
<div>
<div @click="visible = !visible">
<!-- Collaps Icon -->
<collapse-icon class="text-right" :visible="visible" />
<div>
<b-row>
<b-col cols="1">
<type-icon color="text-danger" icon="link45deg" />
</b-col>
<b-col cols="11">
<!-- Amount / Name || Text -->
<amount-and-name-row :amount="amount" :text="$t('gdd_per_link.links_sum')" />
<!-- Count Links -->
<link-count-row :count="transactionLinkCount" />
<!-- Decay -->
<decay-row :decay="decay.decay" />
</b-col>
</b-row>
</div>
</div>
<b-collapse v-model="visible">
<collapse-links-list
v-model="currentPage"
:pending="pending"
:pageSize="pageSize"
:transactionLinkCount="transactionLinkCount"
:transactionLinks="transactionLinks"
/>
</b-collapse>
</div>
</div>
</template>
<script>
import CollapseIcon from '../TransactionRows/CollapseIcon'
import TypeIcon from '../TransactionRows/TypeIcon'
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
import LinkCountRow from '../TransactionRows/LinkCountRow'
import DecayRow from '../TransactionRows/DecayRow'
import CollapseLinksList from '../DecayInformations/CollapseLinksList'
import { listTransactionLinks } from '@/graphql/queries'
export default {
name: 'TransactionSlotLink',
components: {
CollapseIcon,
TypeIcon,
AmountAndNameRow,
LinkCountRow,
DecayRow,
CollapseLinksList,
},
props: {
amount: {
type: String,
required: true,
},
decay: {
type: Object,
required: true,
},
transactionLinkCount: {
type: Number,
required: true,
},
},
data() {
return {
visible: false,
transactionLinks: [],
currentPage: 1,
pageSize: 5,
pending: false,
}
},
methods: {
async updateListTransactionLinks() {
if (this.currentPage === 0) {
this.transactionLinks = []
this.currentPage = 1
} else {
this.pending = true
this.$apollo
.query({
query: listTransactionLinks,
variables: {
currentPage: this.currentPage,
},
fetchPolicy: 'network-only',
})
.then((result) => {
this.transactionLinks = [...this.transactionLinks, ...result.data.listTransactionLinks]
this.$emit('update-transactions')
this.pending = false
})
.catch((err) => {
this.toastError(err.message)
this.pending = false
})
}
},
},
watch: {
currentPage() {
this.updateListTransactionLinks()
},
},
created() {
this.updateListTransactionLinks()
},
}
</script>

4
frontend/src/components/Transactions/TransactionReceive.vue
View File

@ -19,10 +19,10 @@
<memo-row :memo="memo" /> <memo-row :memo="memo" />
<!-- Datum --> <!-- Datum -->
<date-row :balanceDate="balanceDate" /> <date-row :date="balanceDate" />
<!-- Decay --> <!-- Decay -->
<decay-row :decay="decay" /> <decay-row :decay="decay.decay" />
</b-col> </b-col>
</b-row> </b-row>
</div> </div>

4
frontend/src/components/Transactions/TransactionSend.vue
View File

@ -19,10 +19,10 @@
<memo-row :memo="memo" /> <memo-row :memo="memo" />
<!-- Datum --> <!-- Datum -->
<date-row :balanceDate="balanceDate" /> <date-row :date="balanceDate" />
<!-- Decay --> <!-- Decay -->
<decay-row :decay="decay" /> <decay-row :decay="decay.decay" />
</b-col> </b-col>
</b-row> </b-row>
</div> </div>

6
frontend/src/graphql/mutations.js
View File

@ -69,3 +69,9 @@ export const createTransactionLink = gql`
} }
} }
` `
export const deleteTransactionLink = gql`
mutation($id: Float!) {
deleteTransactionLink(id: $id)
}
`

15
frontend/src/graphql/queries.js
View File

@ -143,3 +143,18 @@ export const queryTransactionLink = gql`
} }
} }
` `
export const listTransactionLinks = gql`
query($currentPage: Int = 1, $pageSize: Int = 5) {
listTransactionLinks(currentPage: $currentPage, pageSize: $pageSize) {
id
amount
holdAvailableAmount
memo
code
createdAt
validUntil
redeemedAt
}
}
`

8
frontend/src/locales/de.json
View File

@ -27,6 +27,7 @@
"send": "Gesendet" "send": "Gesendet"
} }
}, },
"delete": "Löschen",
"em-dash": "—", "em-dash": "—",
"error": { "error": {
"empty-transactionlist": "Es gab einen Fehler mit der Übermittlung der Anzahl deiner Transaktionen.", "empty-transactionlist": "Es gab einen Fehler mit der Übermittlung der Anzahl deiner Transaktionen.",
@ -96,6 +97,9 @@
"copy": "kopieren", "copy": "kopieren",
"created": "Der Link wurde erstellt!", "created": "Der Link wurde erstellt!",
"decay-14-day": "Vergänglichkeit für 14 Tage", "decay-14-day": "Vergänglichkeit für 14 Tage",
"delete-the-link": "Den Link löschen?",
"deleted": "Der Link wurde gelöscht!",
"expired": "Abgelaufen",
"header": "Gradidos versenden per Link", "header": "Gradidos versenden per Link",
"link-copied": "Link wurde in die Zwischenablage kopiert", "link-copied": "Link wurde in die Zwischenablage kopiert",
"links_count": "Aktive Links", "links_count": "Aktive Links",
@ -120,9 +124,7 @@
"recruited-member": "Eingeladenes Mitglied" "recruited-member": "Eingeladenes Mitglied"
}, },
"language": "Sprache", "language": "Sprache",
"links-list": { "link-load": "den letzten Link nachladen | die letzten {n} Links nachladen | weitere {n} Links nachladen",
"header": "Liste deiner aktiven Links"
},
"login": "Anmeldung", "login": "Anmeldung",
"math": { "math": {
"aprox": "~", "aprox": "~",

8
frontend/src/locales/en.json
View File

@ -27,6 +27,7 @@
"send": "Sent" "send": "Sent"
} }
}, },
"delete": "Delete",
"em-dash": "—", "em-dash": "—",
"error": { "error": {
"empty-transactionlist": "There was an error with the transmission of the number of your transactions.", "empty-transactionlist": "There was an error with the transmission of the number of your transactions.",
@ -96,6 +97,9 @@
"copy": "copy", "copy": "copy",
"created": "Link was created!", "created": "Link was created!",
"decay-14-day": "Decay for 14 days", "decay-14-day": "Decay for 14 days",
"delete-the-link": "Delete the link?",
"deleted": "The link was deleted!",
"expired": "Expired",
"header": "Send Gradidos via link", "header": "Send Gradidos via link",
"link-copied": "Link copied to clipboard", "link-copied": "Link copied to clipboard",
"links_count": "Active links", "links_count": "Active links",
@ -120,9 +124,7 @@
"recruited-member": "Invited member" "recruited-member": "Invited member"
}, },
"language": "Language", "language": "Language",
"links-list": { "link-load": "Load the last link | Load the last {n} links | Load more {n} links",
"header": "List of your active links"
},
"login": "Login", "login": "Login",
"math": { "math": {
"aprox": "~", "aprox": "~",

2
frontend/src/mixins/toaster.js
View File

@ -14,7 +14,7 @@ export const toasters = {
}, },
toast(message, options) { toast(message, options) {
if (message.replace) message = message.replace(/^GraphQL error: /, '') if (message.replace) message = message.replace(/^GraphQL error: /, '')
this.$bvToast.toast(message, { this.$root.$bvToast.toast(message, {
autoHideDelay: 5000, autoHideDelay: 5000,
appendToast: true, appendToast: true,
solid: true, solid: true,