Merge branch 'master' into no-float-ids

admin/src/components/CreationTransactionListFormular.spec.js

@@ -6,32 +6,30 @@ const localVue = global.localVue
 
 const apolloQueryMock = jest.fn().mockResolvedValue({
   data: {
-    transactionList: {
+    creationTransactionList: [
-      transactions: [
+      {
-        {
+        id: 1,
-          id: 1,
+        amount: 100,
-          amount: 100,
+        balanceDate: 0,
-          balanceDate: 0,
+        creationDate: new Date(),
-          creationDate: new Date(),
+        memo: 'Testing',
-          memo: 'Testing',
+        linkedUser: {
-          linkedUser: {
+          firstName: 'Gradido',
-            firstName: 'Gradido',
+          lastName: 'Akademie',
-            lastName: 'Akademie',
-          },
         },
-        {
+      },
-          id: 2,
+      {
-          amount: 200,
+        id: 2,
-          balanceDate: 0,
+        amount: 200,
-          creationDate: new Date(),
+        balanceDate: 0,
-          memo: 'Testing 2',
+        creationDate: new Date(),
-          linkedUser: {
+        memo: 'Testing 2',
-            firstName: 'Gradido',
+        linkedUser: {
-            lastName: 'Akademie',
+          firstName: 'Gradido',
-          },
+          lastName: 'Akademie',
         },
-      ],
+      },
-    },
+    ],
   },
 })
 
@@ -67,7 +65,6 @@ describe('CreationTransactionListFormular', () => {
             currentPage: 1,
             pageSize: 25,
             order: 'DESC',
-            onlyCreations: true,
             userId: 1,
           },
         }),

admin/src/components/CreationTransactionListFormular.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-import { transactionList } from '../graphql/transactionList'
+import { creationTransactionList } from '../graphql/creationTransactionList'
 export default {
   name: 'CreationTransactionList',
   props: {
@@ -51,17 +51,16 @@ export default {
     getTransactions() {
       this.$apollo
         .query({
-          query: transactionList,
+          query: creationTransactionList,
           variables: {
             currentPage: 1,
             pageSize: 25,
             order: 'DESC',
-            onlyCreations: true,
             userId: parseInt(this.userId),
           },
         })
         .then((result) => {
-          this.items = result.data.transactionList.transactions
+          this.items = result.data.creationTransactionList
         })
         .catch((error) => {
           this.toastError(error.message)

admin/src/graphql/creationTransactionList.js

@@ -0,0 +1,22 @@
+import gql from 'graphql-tag'
+
+export const creationTransactionList = gql`
+  query ($currentPage: Int = 1, $pageSize: Int = 25, $order: Order = DESC, $userId: Int!) {
+    creationTransactionList(
+      currentPage: $currentPage
+      pageSize: $pageSize
+      order: $order
+      userId: $userId
+    ) {
+      id
+      amount
+      balanceDate
+      creationDate
+      memo
+      linkedUser {
+        firstName
+        lastName
+      }
+    }
+  }
+`

admin/src/graphql/transactionList.js

@@ -1,31 +0,0 @@
-import gql from 'graphql-tag'
-
-export const transactionList = gql`
-  query (
-    $currentPage: Int = 1
-    $pageSize: Int = 25
-    $order: Order = DESC
-    $onlyCreations: Boolean = false
-    $userId: Int = null
-  ) {
-    transactionList(
-      currentPage: $currentPage
-      pageSize: $pageSize
-      order: $order
-      onlyCreations: $onlyCreations
-      userId: $userId
-    ) {
-      transactions {
-        id
-        amount
-        balanceDate
-        creationDate
-        memo
-        linkedUser {
-          firstName
-          lastName
-        }
-      }
-    }
-  }
-`

admin/src/mixins/toaster.js

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

backend/jest.config.js

@@ -3,8 +3,9 @@ module.exports = {
   verbose: true,
   preset: 'ts-jest',
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.ts', '!**/node_modules/**', '!src/seeds/**'],
+  collectCoverageFrom: ['src/**/*.ts', '!**/node_modules/**', '!src/seeds/**', '!build/**'],
   setupFiles: ['<rootDir>/test/testSetup.ts'],
+  modulePathIgnorePatterns: ['<rootDir>/build/'],
   moduleNameMapper: {
     '@/(.*)': '<rootDir>/src/$1',
     '@model/(.*)': '<rootDir>/src/graphql/model/$1',

backend/package.json

@@ -10,11 +10,11 @@
   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean",
-    "start": "node build/src/index.js",
+    "start": "TZ=UTC TS_NODE_BASEURL=./build node -r tsconfig-paths/register build/src/index.js",
-    "dev": "nodemon -w src --ext ts --exec ts-node src/index.ts",
+    "dev": "TZ=UTC nodemon -w src --ext ts --exec ts-node -r tsconfig-paths/register src/index.ts",
     "lint": "eslint --max-warnings=0 --ext .js,.ts .",
     "test": "TZ=UTC NODE_ENV=development jest --runInBand --coverage --forceExit --detectOpenHandles",
-    "seed": "TZ=UTC ts-node src/seeds/index.ts"
+    "seed": "TZ=UTC ts-node -r tsconfig-paths/register src/seeds/index.ts"
   },
   "dependencies": {
     "@types/jest": "^27.0.2",
@@ -32,7 +32,6 @@
     "jest": "^27.2.4",
     "jsonwebtoken": "^8.5.1",
     "lodash.clonedeep": "^4.5.0",
-    "module-alias": "^2.2.2",
     "mysql2": "^2.3.0",
     "nodemailer": "^6.6.5",
     "random-bigint": "^0.0.1",
@@ -60,15 +59,7 @@
     "nodemon": "^2.0.7",
     "prettier": "^2.3.1",
     "ts-node": "^10.0.0",
+    "tsconfig-paths": "^3.14.0",
     "typescript": "^4.3.4"
-  },
-  "_moduleAliases": {
-    "@": "./build/src",
-    "@arg": "./build/src/graphql/arg",
-    "@dbTools": "../database/build/src",
-    "@entity": "../database/build/entity",
-    "@enum": "./build/src/graphql/enum",
-    "@model": "./build/src/graphql/model",
-    "@repository": "./build/src/typeorm/repository"
   }
 }

backend/src/auth/RIGHTS.ts

@@ -33,4 +33,5 @@ export enum RIGHTS {
   SEND_ACTIVATION_EMAIL = 'SEND_ACTIVATION_EMAIL',
   DELETE_USER = 'DELETE_USER',
   UNDELETE_USER = 'UNDELETE_USER',
+  CREATION_TRANSACTION_LIST = 'CREATION_TRANSACTION_LIST',
 }

backend/src/graphql/arg/Paginated.ts

@@ -11,10 +11,4 @@ export default class Paginated {
 
   @Field(() => Order, { nullable: true })
   order?: Order
-
-  @Field(() => Boolean, { nullable: true })
-  onlyCreations?: boolean
-
-  @Field(() => Int, { nullable: true })
-  userId?: number
 }

backend/src/graphql/directive/isAuthorized.ts

@@ -35,6 +35,7 @@ const isAuthorized: AuthChecker<any> = async ({ context }, rights) => {
   const userRepository = await getCustomRepository(UserRepository)
   try {
     const user = await userRepository.findByPubkeyHex(context.pubKey)
+    context.user = user
     const countServerUsers = await ServerUser.count({ email: user.email })
     context.role = countServerUsers > 0 ? ROLE_ADMIN : ROLE_USER
   } catch {

backend/src/graphql/enum/TransactionTypeId.ts

@@ -6,7 +6,7 @@ export enum TransactionTypeId {
   RECEIVE = 3,
   // This is a virtual property, never occurring on the database
   DECAY = 4,
-  TRANSACTION_LINK = 5,
+  LINK_SUMMARY = 5,
 }
 
 registerEnumType(TransactionTypeId, {

backend/src/graphql/resolver/AdminResolver.ts

@@ -19,16 +19,21 @@ import { UserRepository } from '@repository/User'
 import CreatePendingCreationArgs from '@arg/CreatePendingCreationArgs'
 import UpdatePendingCreationArgs from '@arg/UpdatePendingCreationArgs'
 import SearchUsersArgs from '@arg/SearchUsersArgs'
-import { Transaction } from '@entity/Transaction'
+import { Transaction as DbTransaction } from '@entity/Transaction'
+import { Transaction } from '@model/Transaction'
 import { TransactionRepository } from '@repository/Transaction'
 import { calculateDecay } from '@/util/decay'
 import { AdminPendingCreation } from '@entity/AdminPendingCreation'
 import { hasElopageBuys } from '@/util/hasElopageBuys'
 import { LoginEmailOptIn } from '@entity/LoginEmailOptIn'
-import { User } from '@entity/User'
+import { User as dbUser } from '@entity/User'
+import { User } from '@model/User'
 import { TransactionTypeId } from '@enum/TransactionTypeId'
 import Decimal from 'decimal.js-light'
 import { Decay } from '@model/Decay'
+import Paginated from '@arg/Paginated'
+import { Order } from '@enum/Order'
+import { communityUser } from '@/util/communityUser'
 
 // const EMAIL_OPT_IN_REGISTER = 1
 // const EMAIL_OPT_UNKNOWN = 3 // elopage?
@@ -126,27 +131,26 @@ export class AdminResolver {
     @Arg('userId', () => Int) userId: number,
     @Ctx() context: any,
   ): Promise<Date | null> {
-    const user = await User.findOne({ id: userId })
+    const user = await dbUser.findOne({ id: userId })
     // user exists ?
     if (!user) {
       throw new Error(`Could not find user with userId: ${userId}`)
     }
     // moderator user disabled own account?
-    const userRepository = getCustomRepository(UserRepository)
+    const moderatorUser = context.user
-    const moderatorUser = await userRepository.findByPubkeyHex(context.pubKey)
     if (moderatorUser.id === userId) {
       throw new Error('Moderator can not delete his own account!')
     }
     // soft-delete user
     await user.softRemove()
-    const newUser = await User.findOne({ id: userId }, { withDeleted: true })
+    const newUser = await dbUser.findOne({ id: userId }, { withDeleted: true })
     return newUser ? newUser.deletedAt : null
   }
 
   @Authorized([RIGHTS.UNDELETE_USER])
   @Mutation(() => Date, { nullable: true })
   async unDeleteUser(@Arg('userId', () => Int) userId: number): Promise<Date | null> {
-    const user = await User.findOne({ id: userId }, { withDeleted: true })
+    const user = await dbUser.findOne({ id: userId }, { withDeleted: true })
     // user exists ?
     if (!user) {
       throw new Error(`Could not find user with userId: ${userId}`)
@@ -161,7 +165,7 @@ export class AdminResolver {
   async createPendingCreation(
     @Args() { email, amount, memo, creationDate, moderator }: CreatePendingCreationArgs,
   ): Promise<number[]> {
-    const user = await User.findOne({ email }, { withDeleted: true })
+    const user = await dbUser.findOne({ email }, { withDeleted: true })
     if (!user) {
       throw new Error(`Could not find user with email: ${email}`)
     }
@@ -218,7 +222,7 @@ export class AdminResolver {
   async updatePendingCreation(
     @Args() { id, email, amount, memo, creationDate, moderator }: UpdatePendingCreationArgs,
   ): Promise<UpdatePendingCreation> {
-    const user = await User.findOne({ email }, { withDeleted: true })
+    const user = await dbUser.findOne({ email }, { withDeleted: true })
     if (!user) {
       throw new Error(`Could not find user with email: ${email}`)
     }
@@ -268,7 +272,7 @@ export class AdminResolver {
 
     const userIds = pendingCreations.map((p) => p.userId)
     const userCreations = await getUserCreations(userIds)
-    const users = await User.find({ where: { id: In(userIds) }, withDeleted: true })
+    const users = await dbUser.find({ where: { id: In(userIds) }, withDeleted: true })
 
     return pendingCreations.map((pendingCreation) => {
       const user = users.find((u) => u.id === pendingCreation.userId)
@@ -300,12 +304,11 @@ export class AdminResolver {
     @Ctx() context: any,
   ): Promise<boolean> {
     const pendingCreation = await AdminPendingCreation.findOneOrFail(id)
-    const userRepository = getCustomRepository(UserRepository)
+    const moderatorUser = context.user
-    const moderatorUser = await userRepository.findByPubkeyHex(context.pubKey)
     if (moderatorUser.id === pendingCreation.userId)
       throw new Error('Moderator can not confirm own pending creation')
 
-    const user = await User.findOneOrFail({ id: pendingCreation.userId }, { withDeleted: true })
+    const user = await dbUser.findOneOrFail({ id: pendingCreation.userId }, { withDeleted: true })
     if (user.deletedAt) throw new Error('This user was deleted. Cannot confirm a creation.')
 
     const creations = await getUserCreation(pendingCreation.userId, false)
@@ -327,7 +330,7 @@ export class AdminResolver {
     // TODO pending creations decimal
     newBalance = newBalance.add(new Decimal(Number(pendingCreation.amount)).toString())
 
-    const transaction = new Transaction()
+    const transaction = new DbTransaction()
     transaction.typeId = TransactionTypeId.CREATION
     transaction.memo = pendingCreation.memo
     transaction.userId = pendingCreation.userId
@@ -345,6 +348,27 @@ export class AdminResolver {
 
     return true
   }
+
+  @Authorized([RIGHTS.CREATION_TRANSACTION_LIST])
+  @Query(() => [Transaction])
+  async creationTransactionList(
+    @Args()
+    { currentPage = 1, pageSize = 25, order = Order.DESC }: Paginated,
+    @Arg('userId', () => Int) userId: number,
+  ): Promise<Transaction[]> {
+    const offset = (currentPage - 1) * pageSize
+    const transactionRepository = getCustomRepository(TransactionRepository)
+    const [userTransactions] = await transactionRepository.findByUserPaged(
+      userId,
+      pageSize,
+      offset,
+      order,
+      true,
+    )
+
+    const user = await dbUser.findOneOrFail({ id: userId })
+    return userTransactions.map((t) => new Transaction(t, new User(user), communityUser))
+  }
 }
 
 interface CreationMap {

backend/src/graphql/resolver/BalanceResolver.ts

@@ -2,9 +2,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 import { Resolver, Query, Ctx, Authorized } from 'type-graphql'
-import { getCustomRepository } from '@dbTools/typeorm'
 import { Balance } from '@model/Balance'
-import { UserRepository } from '@repository/User'
 import { calculateDecay } from '@/util/decay'
 import { RIGHTS } from '@/auth/RIGHTS'
 import { Transaction } from '@entity/Transaction'
@@ -16,9 +14,7 @@ export class BalanceResolver {
   @Query(() => Balance)
   async balance(@Ctx() context: any): Promise<Balance> {
     // load user and balance
-    const userRepository = getCustomRepository(UserRepository)
+    const { user } = context
-
-    const user = await userRepository.findByPubkeyHex(context.pubKey)
     const now = new Date()
 
     const lastTransaction = await Transaction.findOne(

backend/src/graphql/resolver/GdtResolver.ts

@@ -2,12 +2,10 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 import { Resolver, Query, Args, Ctx, Authorized, Arg } from 'type-graphql'
-import { getCustomRepository } from '@dbTools/typeorm'
 import CONFIG from '@/config'
 import { GdtEntryList } from '@model/GdtEntryList'
 import Paginated from '@arg/Paginated'
 import { apiGet } from '@/apis/HttpRequest'
-import { UserRepository } from '@repository/User'
 import { Order } from '@enum/Order'
 import { RIGHTS } from '@/auth/RIGHTS'
 
@@ -22,8 +20,7 @@ export class GdtResolver {
     @Ctx() context: any,
   ): Promise<GdtEntryList> {
     // load user
-    const userRepository = getCustomRepository(UserRepository)
+    const userEntity = context.user
-    const userEntity = await userRepository.findByPubkeyHex(context.pubKey)
 
     try {
       const resultGDT = await apiGet(

backend/src/graphql/resolver/TransactionLinkResolver.ts

@@ -2,11 +2,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 import { Resolver, Args, Arg, Authorized, Ctx, Mutation, Query } from 'type-graphql'
-import { getCustomRepository } from '@dbTools/typeorm'
 import { TransactionLink } from '@model/TransactionLink'
 import { TransactionLink as dbTransactionLink } from '@entity/TransactionLink'
 import { User as dbUser } from '@entity/User'
-import { UserRepository } from '@repository/User'
 import TransactionLinkArgs from '@arg/TransactionLinkArgs'
 import Paginated from '@arg/Paginated'
 import { calculateBalance } from '@/util/validate'
@@ -29,7 +27,7 @@ export const transactionLinkCode = (date: Date): string => {
 
 const CODE_VALID_DAYS_DURATION = 14
 
-const transactionLinkExpireDate = (date: Date): Date => {
+export const transactionLinkExpireDate = (date: Date): Date => {
   const validUntil = new Date(date)
   return new Date(validUntil.setDate(date.getDate() + CODE_VALID_DAYS_DURATION))
 }
@@ -42,8 +40,7 @@ export class TransactionLinkResolver {
     @Args() { amount, memo }: TransactionLinkArgs,
     @Ctx() context: any,
   ): Promise<TransactionLink> {
-    const userRepository = getCustomRepository(UserRepository)
+    const { user } = context
-    const user = await userRepository.findByPubkeyHex(context.pubKey)
 
     const createdDate = new Date()
     const validUntil = transactionLinkExpireDate(createdDate)
@@ -74,8 +71,7 @@ export class TransactionLinkResolver {
   @Authorized([RIGHTS.DELETE_TRANSACTION_LINK])
   @Mutation(() => Boolean)
   async deleteTransactionLink(@Arg('id') id: number, @Ctx() context: any): Promise<boolean> {
-    const userRepository = getCustomRepository(UserRepository)
+    const { user } = context
-    const user = await userRepository.findByPubkeyHex(context.pubKey)
 
     const transactionLink = await dbTransactionLink.findOne({ id })
     if (!transactionLink) {
@@ -116,8 +112,7 @@ export class TransactionLinkResolver {
     { currentPage = 1, pageSize = 5, order = Order.DESC }: Paginated,
     @Ctx() context: any,
   ): Promise<TransactionLink[]> {
-    const userRepository = getCustomRepository(UserRepository)
+    const { user } = context
-    const user = await userRepository.findByPubkeyHex(context.pubKey)
     // const now = new Date()
     const transactionLinks = await dbTransactionLink.find({
       where: {
@@ -137,8 +132,7 @@ export class TransactionLinkResolver {
   @Authorized([RIGHTS.REDEEM_TRANSACTION_LINK])
   @Mutation(() => Boolean)
   async redeemTransactionLink(@Arg('id') id: number, @Ctx() context: any): Promise<boolean> {
-    const userRepository = getCustomRepository(UserRepository)
+    const { user } = context
-    const user = await userRepository.findByPubkeyHex(context.pubKey)
     const transactionLink = await dbTransactionLink.findOneOrFail({ id })
     const linkedUser = await dbUser.findOneOrFail({ id: transactionLink.userId })
 

backend/src/graphql/resolver/TransactionResolver.ts

@@ -17,7 +17,6 @@ import Paginated from '@arg/Paginated'
 
 import { Order } from '@enum/Order'
 
-import { UserRepository } from '@repository/User'
 import { TransactionRepository } from '@repository/Transaction'
 import { TransactionLinkRepository } from '@repository/TransactionLink'
 
@@ -131,22 +130,11 @@ export class TransactionResolver {
   @Query(() => TransactionList)
   async transactionList(
     @Args()
-    {
+    { currentPage = 1, pageSize = 25, order = Order.DESC }: Paginated,
-      currentPage = 1,
-      pageSize = 25,
-      order = Order.DESC,
-      onlyCreations = false,
-      userId,
-    }: Paginated,
     @Ctx() context: any,
   ): Promise<TransactionList> {
     const now = new Date()
-    // find user
+    const user = context.user
-    const userRepository = getCustomRepository(UserRepository)
-    // TODO: separate those usecases - this is a security issue
-    const user = userId
-      ? await userRepository.findOneOrFail({ id: userId }, { withDeleted: true })
-      : await userRepository.findByPubkeyHex(context.pubKey)
 
     // find current balance
     const lastTransaction = await dbTransaction.findOne(
@@ -182,7 +170,6 @@ export class TransactionResolver {
       pageSize,
       offset,
       order,
-      onlyCreations,
     )
 
     // find involved users; I am involved
@@ -208,7 +195,7 @@ export class TransactionResolver {
       await transactionLinkRepository.summary(user.id, now)
 
     // decay & link transactions
-    if (!onlyCreations && currentPage === 1 && order === Order.DESC) {
+    if (currentPage === 1 && order === Order.DESC) {
       transactions.push(
         virtualDecayTransaction(lastTransaction.balance, lastTransaction.balanceDate, now, self),
       )
@@ -256,8 +243,7 @@ export class TransactionResolver {
     @Ctx() context: any,
   ): Promise<boolean> {
     // TODO this is subject to replay attacks
-    const userRepository = getCustomRepository(UserRepository)
+    const senderUser = context.user
-    const senderUser = await userRepository.findByPubkeyHex(context.pubKey)
     if (senderUser.pubKey.length !== 32) {
       throw new Error('invalid sender public key')
     }

backend/src/graphql/resolver/UserResolver.test.ts

@@ -69,7 +69,9 @@ describe('UserResolver', () => {
     })
 
     it('returns success', () => {
-      expect(result).toEqual(expect.objectContaining({ data: { createUser: 'success' } }))
+      expect(result).toEqual(
+        expect.objectContaining({ data: { createUser: { id: expect.any(Number) } } }),
+      )
     })
 
     describe('valid input data', () => {
@@ -331,6 +333,7 @@ describe('UserResolver', () => {
                 email: 'bibi@bloxberg.de',
                 firstName: 'Bibi',
                 hasElopage: false,
+                id: expect.any(Number),
                 isAdmin: false,
                 klickTipp: {
                   newsletterState: false,

backend/src/graphql/resolver/UserResolver.ts

@@ -14,7 +14,6 @@ import UpdateUserInfosArgs from '@arg/UpdateUserInfosArgs'
 import { klicktippNewsletterStateMiddleware } from '@/middleware/klicktippMiddleware'
 import { UserSettingRepository } from '@repository/UserSettingRepository'
 import { Setting } from '@enum/Setting'
-import { UserRepository } from '@repository/User'
 import { LoginEmailOptIn } from '@entity/LoginEmailOptIn'
 import { sendResetPasswordEmail } from '@/mailer/sendResetPasswordEmail'
 import { sendAccountActivationEmail } from '@/mailer/sendAccountActivationEmail'
@@ -214,8 +213,7 @@ export class UserResolver {
   @UseMiddleware(klicktippNewsletterStateMiddleware)
   async verifyLogin(@Ctx() context: any): Promise<User> {
     // TODO refactor and do not have duplicate code with login(see below)
-    const userRepository = getCustomRepository(UserRepository)
+    const userEntity = context.user
-    const userEntity = await userRepository.findByPubkeyHex(context.pubKey)
     const user = new User(userEntity)
     // user.pubkey = userEntity.pubKey.toString('hex')
     // Elopage Status & Stored PublisherId
@@ -313,10 +311,10 @@ export class UserResolver {
   }
 
   @Authorized([RIGHTS.CREATE_USER])
-  @Mutation(() => String)
+  @Mutation(() => User)
   async createUser(
     @Args() { email, firstName, lastName, language, publisherId }: CreateUserArgs,
-  ): Promise<string> {
+  ): Promise<User> {
     // TODO: wrong default value (should be null), how does graphql work here? Is it an required field?
     // default int publisher_id = 0;
 
@@ -396,7 +394,7 @@ export class UserResolver {
     } finally {
       await queryRunner.release()
     }
-    return 'success'
+    return new User(dbUser)
   }
 
   // THis is used by the admin only - should we move it to the admin resolver?
@@ -585,8 +583,7 @@ export class UserResolver {
     }: UpdateUserInfosArgs,
     @Ctx() context: any,
   ): Promise<boolean> {
-    const userRepository = getCustomRepository(UserRepository)
+    const userEntity = context.user
-    const userEntity = await userRepository.findByPubkeyHex(context.pubKey)
 
     if (firstName) {
       userEntity.firstName = firstName
@@ -664,8 +661,7 @@ export class UserResolver {
   @Authorized([RIGHTS.HAS_ELOPAGE])
   @Query(() => Boolean)
   async hasElopage(@Ctx() context: any): Promise<boolean> {
-    const userRepository = getCustomRepository(UserRepository)
+    const userEntity = context.user
-    const userEntity = await userRepository.findByPubkeyHex(context.pubKey).catch()
     if (!userEntity) {
       return false
     }

backend/src/seeds/factory/creation.ts

@@ -15,14 +15,14 @@ export const creationFactory = async (
 ): Promise<void> => {
   const { mutate, query } = client
 
-  // login as Peter Lustig (admin)
+  // login as Peter Lustig (admin) and get his user ID
-  await query({ query: login, variables: { email: 'peter@lustig.de', password: 'Aa12345_' } })
+  const {
+    data: {
+      login: { id },
+    },
+  } = await query({ query: login, variables: { email: 'peter@lustig.de', password: 'Aa12345_' } })
 
-  // get Peter Lustig's user id
+  await mutate({ mutation: createPendingCreation, variables: { ...creation, moderator: id } })
-  const peterLustig = await User.findOneOrFail({ where: { email: 'peter@lustig.de' } })
-  const variables = { ...creation, moderator: peterLustig.id }
-
-  await mutate({ mutation: createPendingCreation, variables })
 
   // get User
   const user = await User.findOneOrFail({ where: { email: creation.email } })

backend/src/seeds/factory/transactionLink.ts

@@ -0,0 +1,43 @@
+import { ApolloServerTestClient } from 'apollo-server-testing'
+import { createTransactionLink } from '@/seeds/graphql/mutations'
+import { login } from '@/seeds/graphql/queries'
+import { TransactionLinkInterface } from '@/seeds/transactionLink/TransactionLinkInterface'
+import { transactionLinkExpireDate } from '@/graphql/resolver/TransactionLinkResolver'
+import { TransactionLink } from '@entity/TransactionLink'
+
+export const transactionLinkFactory = async (
+  client: ApolloServerTestClient,
+  transactionLink: TransactionLinkInterface,
+): Promise<void> => {
+  const { mutate, query } = client
+
+  // login
+  await query({ query: login, variables: { email: transactionLink.email, password: 'Aa12345_' } })
+
+  const variables = {
+    amount: transactionLink.amount,
+    memo: transactionLink.memo,
+  }
+
+  // get the transaction links's id
+  const {
+    data: {
+      createTransactionLink: { id },
+    },
+  } = await mutate({ mutation: createTransactionLink, variables })
+
+  if (transactionLink.createdAt || transactionLink.deletedAt) {
+    const dbTransactionLink = await TransactionLink.findOneOrFail({ id })
+
+    if (transactionLink.createdAt) {
+      dbTransactionLink.createdAt = transactionLink.createdAt
+      dbTransactionLink.validUntil = transactionLinkExpireDate(transactionLink.createdAt)
+      await dbTransactionLink.save()
+    }
+
+    if (transactionLink.deletedAt) {
+      dbTransactionLink.deletedAt = new Date()
+      await dbTransactionLink.save()
+    }
+  }
+}

backend/src/seeds/factory/user.ts

@@ -11,36 +11,41 @@ export const userFactory = async (
 ): Promise<void> => {
   const { mutate } = client
 
-  await mutate({ mutation: createUser, variables: user })
+  const {
-  let dbUser = await User.findOneOrFail({ where: { email: user.email } })
+    data: {
+      createUser: { id },
+    },
+  } = await mutate({ mutation: createUser, variables: user })
 
   if (user.emailChecked) {
-    const optin = await LoginEmailOptIn.findOneOrFail({ where: { userId: dbUser.id } })
+    const optin = await LoginEmailOptIn.findOneOrFail({ userId: id })
     await mutate({
       mutation: setPassword,
       variables: { password: 'Aa12345_', code: optin.verificationCode },
     })
   }
 
-  // refetch data
+  if (user.createdAt || user.deletedAt || user.isAdmin) {
-  dbUser = await User.findOneOrFail({ where: { email: user.email } })
+    // get user from database
+    const dbUser = await User.findOneOrFail({ id })
 
-  if (user.createdAt || user.deletedAt) {
+    if (user.createdAt || user.deletedAt) {
-    if (user.createdAt) dbUser.createdAt = user.createdAt
+      if (user.createdAt) dbUser.createdAt = user.createdAt
-    if (user.deletedAt) dbUser.deletedAt = user.deletedAt
+      if (user.deletedAt) dbUser.deletedAt = user.deletedAt
-    await dbUser.save()
+      await dbUser.save()
-  }
+    }
 
-  if (user.isAdmin) {
+    if (user.isAdmin) {
-    const admin = new ServerUser()
+      const admin = new ServerUser()
-    admin.username = dbUser.firstName
+      admin.username = dbUser.firstName
-    admin.password = 'please_refactor'
+      admin.password = 'please_refactor'
-    admin.email = dbUser.email
+      admin.email = dbUser.email
-    admin.role = 'admin'
+      admin.role = 'admin'
-    admin.activated = 1
+      admin.activated = 1
-    admin.lastLogin = new Date()
+      admin.lastLogin = new Date()
-    admin.created = dbUser.createdAt
+      admin.created = dbUser.createdAt
-    admin.modified = dbUser.createdAt
+      admin.modified = dbUser.createdAt
-    await admin.save()
+      await admin.save()
+    }
   }
 }

backend/src/seeds/graphql/mutations.ts

@@ -52,7 +52,9 @@ export const createUser = gql`
       lastName: $lastName
       language: $language
       publisherId: $publisherId
-    )
+    ) {
+      id
+    }
   }
 `
 
@@ -65,6 +67,7 @@ export const sendCoins = gql`
 export const createTransactionLink = gql`
   mutation ($amount: Decimal!, $memo: String!) {
     createTransactionLink(amount: $amount, memo: $memo) {
+      id
       code
     }
   }

backend/src/seeds/graphql/queries.ts

@@ -3,6 +3,7 @@ import gql from 'graphql-tag'
 export const login = gql`
   query ($email: String!, $password: String!, $publisherId: Int) {
     login(email: $email, password: $password, publisherId: $publisherId) {
+      id
       email
       firstName
       lastName

backend/src/seeds/index.ts

@@ -8,8 +8,10 @@ import { name, internet, random } from 'faker'
 
 import { users } from './users/index'
 import { creations } from './creation/index'
+import { transactionLinks } from './transactionLink/index'
 import { userFactory } from './factory/user'
 import { creationFactory } from './factory/creation'
+import { transactionLinkFactory } from './factory/transactionLink'
 import { entities } from '@entity/index'
 
 const context = {
@@ -64,6 +66,11 @@ const run = async () => {
     await creationFactory(seedClient, creations[i])
   }
 
+  // create Transaction Links
+  for (let i = 0; i < transactionLinks.length; i++) {
+    await transactionLinkFactory(seedClient, transactionLinks[i])
+  }
+
   await con.close()
 }
 

backend/src/seeds/transactionLink/TransactionLinkInterface.ts

@@ -0,0 +1,7 @@
+export interface TransactionLinkInterface {
+  email: string
+  amount: number
+  memo: string
+  createdAt?: Date
+  deletedAt?: boolean
+}

backend/src/seeds/transactionLink/index.ts

@@ -0,0 +1,52 @@
+import { TransactionLinkInterface } from './TransactionLinkInterface'
+
+export const transactionLinks: TransactionLinkInterface[] = [
+  {
+    email: 'bibi@bloxberg.de',
+    amount: 19.99,
+    memo: 'Leider wollte niemand meine Gradidos zum Neujahr haben :(',
+    createdAt: new Date(2022, 0, 1),
+  },
+  {
+    email: 'bibi@bloxberg.de',
+    amount: 19.99,
+    memo: `Kein Trick, keine Zauberrei,
+bei Gradidio sei dabei!`,
+  },
+  {
+    email: 'bibi@bloxberg.de',
+    amount: 19.99,
+    memo: `Kein Trick, keine Zauberrei,
+bei Gradidio sei dabei!`,
+  },
+  {
+    email: 'bibi@bloxberg.de',
+    amount: 19.99,
+    memo: `Kein Trick, keine Zauberrei,
+bei Gradidio sei dabei!`,
+  },
+  {
+    email: 'bibi@bloxberg.de',
+    amount: 19.99,
+    memo: `Kein Trick, keine Zauberrei,
+bei Gradidio sei dabei!`,
+  },
+  {
+    email: 'bibi@bloxberg.de',
+    amount: 19.99,
+    memo: `Kein Trick, keine Zauberrei,
+bei Gradidio sei dabei!`,
+  },
+  {
+    email: 'bibi@bloxberg.de',
+    amount: 19.99,
+    memo: `Kein Trick, keine Zauberrei,
+bei Gradidio sei dabei!`,
+  },
+  {
+    email: 'bibi@bloxberg.de',
+    amount: 19.99,
+    memo: 'Da habe ich mich wohl etwas übernommen.',
+    deletedAt: true,
+  },
+]

backend/src/server/createServer.ts

@@ -1,5 +1,4 @@
 import 'reflect-metadata'
-import 'module-alias/register'
 
 import { ApolloServer } from 'apollo-server-express'
 import express, { Express } from 'express'

backend/src/util/virtualTransactions.ts

@@ -41,7 +41,7 @@ const virtualLinkTransaction = (
     id: -2,
     userId: -1,
     previous: -1,
-    typeId: TransactionTypeId.TRANSACTION_LINK,
+    typeId: TransactionTypeId.LINK_SUMMARY,
     amount: amount,
     balance: balance,
     balanceDate: validUntil,

backend/tsconfig.json

@@ -45,16 +45,17 @@
 
     /* Module Resolution Options */
     // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
+    "baseUrl": ".",                                 /* Base directory to resolve non-absolute module names. */
     "paths": {                                      /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@/*": ["./src/*"],
+      "@/*": ["src/*"],
-      "@arg/*": ["./src/graphql/arg/*"],
+      "@arg/*": ["src/graphql/arg/*"],
-      "@dbTools/*": ["../database/src/*"],
+      "@enum/*": ["src/graphql/enum/*"],
-      "@entity/*": ["../database/entity/*"],
+      "@model/*": ["src/graphql/model/*"],
-      "@enum/*": ["./src/graphql/enum/*"],
+      "@repository/*": ["src/typeorm/repository/*"],
-      "@model/*": ["./src/graphql/model/*"],
+      "@test/*": ["test/*"],
-      "@repository/*": ["./src/typeorm/repository/*"],
+      /* external */
-      "@test/*": ["./test/*"]
+      "@dbTools/*": ["../database/src/*", "../../database/build/src/*"],
+      "@entity/*": ["../database/entity/*", "../../database/build/entity/*"]
     },
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                             /* List of folders to include type definitions from. */
@@ -82,7 +83,7 @@
     {
       "path": "../database/tsconfig.json",
       // add 'prepend' if you want to include the referenced project in your output file
-      // "prepend": true,
+      // "prepend": true
     }
   ]
 }

backend/yarn.lock

@@ -4102,11 +4102,6 @@ minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-module-alias@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.2.tgz#151cdcecc24e25739ff0aa6e51e1c5716974c0e0"
-  integrity sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -5242,6 +5237,16 @@ tsconfig-paths@^3.11.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
+tsconfig-paths@^3.14.0:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.0.tgz#4fcc48f9ccea8826c41b9ca093479de7f5018976"
+  integrity sha512-cg/1jAZoL57R39+wiw4u/SCC6Ic9Q5NqjBOb+9xISedOYurfog9ZNmKJSxAnb2m/5Bq4lE9lhUcau33Ml8DM0g==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
+
 tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"

frontend/public/index.html

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

frontend/src/components/DecayInformations/CollapseLinksList.spec.js

@@ -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 })
+        })
+      })
+    })
+  })
+})

frontend/src/components/DecayInformations/CollapseLinksList.vue

@@ -1,14 +1,66 @@
 <template>
   <div class="collapse-links-list">
     <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>
 </template>
 <script>
+import TransactionLink from '@/components/TransactionLinks/TransactionLink.vue'
 export default {
   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>

frontend/src/components/DecayInformations/DecayInformation-Decay.vue

@@ -13,8 +13,8 @@
       </b-col>
       <b-col cols="6">
         <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>
         </div>
       </b-col>
@@ -27,9 +27,11 @@ export default {
   props: {
     balance: {
       type: String,
+      required: true,
     },
     decay: {
-      type: Object,
+      type: String,
+      required: true,
     },
   },
 }

frontend/src/components/DecayInformations/DecayInformation-Short.vue

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

frontend/src/components/GddTransactionList.spec.js

@@ -112,7 +112,8 @@ describe('GddTransactionList', () => {
               amount: '1',
               balance: '31.76099091058520945292',
               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: {
                 firstName: 'Bibi',
                 lastName: 'Bloxberg',
@@ -124,31 +125,14 @@ describe('GddTransactionList', () => {
                 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,
               typeId: 'RECEIVE',
               amount: '10',
               balance: '10',
               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: {
                 firstName: 'Bibi',
                 lastName: 'Bloxberg',
@@ -160,6 +144,24 @@ describe('GddTransactionList', () => {
                 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,
           decayStartBlock,
@@ -250,7 +252,7 @@ describe('GddTransactionList', () => {
 
         it('shows the message of the transaction', () => {
           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', () => {
           expect(transaction.findAll('svg').at(1).classes()).toEqual([
-            'bi-gift',
+            'bi-arrow-right-circle',
             'm-mb-1',
             'font2em',
             'b-icon',
@@ -296,7 +298,7 @@ describe('GddTransactionList', () => {
 
         it('has gradido-global-color-accent color', () => {
           expect(transaction.findAll('svg').at(1).classes()).toEqual([
-            'bi-gift',
+            'bi-arrow-right-circle',
             'm-mb-1',
             'font2em',
             'b-icon',
@@ -314,19 +316,19 @@ describe('GddTransactionList', () => {
 
         it('shows the amount of transaction', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
-            '1000',
+            '+ 10 GDD',
           )
         })
 
         it('shows the name of the receiver', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
-            'Gradido Akademie',
+            'Bibi Bloxberg',
           )
         })
 
         it('shows the date of the transaction', () => {
           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', () => {
-          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', () => {
           expect(transaction.findAll('svg').at(1).classes()).toEqual([
-            'bi-arrow-right-circle',
+            'bi-gift',
             'm-mb-1',
             'font2em',
             'b-icon',
@@ -376,19 +385,19 @@ describe('GddTransactionList', () => {
 
         it('shows the name of the recipient', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
-            'Bibi Bloxberg',
+            'Gradido Akademie',
           )
         })
 
         it('shows the message of the transaction', () => {
           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', () => {
           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',
           )
         })
 

frontend/src/components/GddTransactionList.vue

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

frontend/src/components/TransactionLinks/TransactionLink.spec.js

@@ -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()
+        })
+      })
+    })
+  })
+})

frontend/src/components/TransactionLinks/TransactionLink.vue

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

frontend/src/components/TransactionRows/DateRow.vue

@@ -2,11 +2,11 @@
   <div class="date-row">
     <b-row>
       <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 cols="7">
         <div class="gdd-transaction-list-item-date">
-          {{ $d(new Date(balanceDate), 'long') }}
+          {{ dateString }}
         </div>
       </b-col>
     </b-row>
@@ -16,10 +16,22 @@
 export default {
   name: 'DateRow',
   props: {
-    balanceDate: {
+    date: {
       type: String,
       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>

frontend/src/components/TransactionRows/DecayRow.vue

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

frontend/src/components/TransactionRows/MemoRow.vue

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

frontend/src/components/Transactions/TransactionCreation.vue

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

frontend/src/components/Transactions/TransactionDecay.vue

@@ -20,8 +20,8 @@
         </b-row>
       </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>
     </div>
   </div>

frontend/src/components/Transactions/TransactionLink.vue

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

frontend/src/components/Transactions/TransactionLinkSummary.spec.js

@@ -0,0 +1,230 @@
+import { mount } from '@vue/test-utils'
+import TransactionLinksSummary from './TransactionLinkSummary'
+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('TransactionLinkSummary', () => {
+  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!')
+      })
+    })
+  })
+})

frontend/src/components/Transactions/TransactionLinkSummary.vue

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

frontend/src/components/Transactions/TransactionReceive.vue

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

frontend/src/components/Transactions/TransactionSend.vue

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

frontend/src/graphql/mutations.js

@@ -52,7 +52,9 @@ export const createUser = gql`
       lastName: $lastName
       language: $language
       publisherId: $publisherId
-    )
+    ) {
+      id
+    }
   }
 `
 
@@ -69,3 +71,9 @@ export const createTransactionLink = gql`
     }
   }
 `
+
+export const deleteTransactionLink = gql`
+  mutation($id: Float!) {
+    deleteTransactionLink(id: $id)
+  }
+`

frontend/src/graphql/queries.js

@@ -43,18 +43,8 @@ export const logout = gql`
 `
 
 export const transactionsQuery = gql`
-  query(
+  query($currentPage: Int = 1, $pageSize: Int = 25, $order: Order = DESC) {
-    $currentPage: Int = 1
+    transactionList(currentPage: $currentPage, pageSize: $pageSize, order: $order) {
-    $pageSize: Int = 25
-    $order: Order = DESC
-    $onlyCreations: Boolean = false
-  ) {
-    transactionList(
-      currentPage: $currentPage
-      pageSize: $pageSize
-      order: $order
-      onlyCreations: $onlyCreations
-    ) {
       balanceGDT
       count
       linkCount
@@ -143,3 +133,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
+    }
+  }
+`

frontend/src/locales/de.json

@@ -27,6 +27,7 @@
       "send": "Gesendet"
     }
   },
+  "delete": "Löschen",
   "em-dash": "—",
   "error": {
     "empty-transactionlist": "Es gab einen Fehler mit der Übermittlung der Anzahl deiner Transaktionen.",
@@ -96,6 +97,9 @@
     "copy": "kopieren",
     "created": "Der Link wurde erstellt!",
     "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",
     "link-copied": "Link wurde in die Zwischenablage kopiert",
     "links_count": "Aktive Links",
@@ -120,9 +124,7 @@
     "recruited-member": "Eingeladenes Mitglied"
   },
   "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",
   "math": {
     "aprox": "~",

frontend/src/locales/en.json

@@ -27,6 +27,7 @@
       "send": "Sent"
     }
   },
+  "delete": "Delete",
   "em-dash": "—",
   "error": {
     "empty-transactionlist": "There was an error with the transmission of the number of your transactions.",
@@ -96,6 +97,9 @@
     "copy": "copy",
     "created": "Link was created!",
     "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",
     "link-copied": "Link copied to clipboard",
     "links_count": "Active links",
@@ -120,9 +124,7 @@
     "recruited-member": "Invited member"
   },
   "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",
   "math": {
     "aprox": "~",

frontend/src/mixins/toaster.js

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