Implement archiving payment history

[taoeffect]

Problem

In group.js contract, clearOldPayments keeps only two 30 day periods worth of payments in the state, along with a corresponding TODO to archive payments:

function clearOldPayments ({ state, getters }) {
  const sortedPeriodKeys = Object.keys(state.paymentsByPeriod).sort()
  // save two periods worth of payments, max
  while (sortedPeriodKeys.length > 2) {
    const period = sortedPeriodKeys.shift()
    for (const paymentHash of getters.paymentHashesForPeriod(period)) {
      Vue.delete(state.payments, paymentHash)
      // TODO: archive the old payments in a sideEffect, not here
    }
    Vue.delete(state.paymentsByPeriod, period)
  }
}

We currently don't have archiving payments implemented, but we need this so that people can keep track of their entire history.

Solution

Payments should be archived to IndexedDB via the 'gi.db/archive/* selectors in frontend/model/database.js.

Those selectors were created for implementing archiving of proposals, and researching how that PR was done is likely useful to anyone closing this issue. That PR can be found here: https://github.com/okTurtles/group-income/pull/1388

To close this issue:

1. Implement archiving of old payments (older than 2 months worth)
2. Make sure that pagination works and displays all payments in the completed payments tab (and the received payments tab).

[Silver-IT]

@taoeffect, I think clearOldPayments function in group.js shouldn't be called in initFetchPeriodPayments. I think this clearOldPayments function should be called in gi.contracts/group/payment only when a new payment is added.

Just like what we did to archive proposals.

[Silver-IT]

Having checked the source code, I noticed that archiving payments is more complex than archiving proposals. I think I get why that clearOldPayments function is called inside initFetchPeriodPayments function.