Show dates in collapsed entries of confirmed reimbursements

app/components/reimbursement-item/component.js

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import config from 'kredits-web/config/environment';
+import fmtDateLocalized from 'kredits-web/helpers/fmt-date-localized';
 
 export default class ReimbursementItemComponent extends Component {
   @service kredits;
@@ -10,9 +11,10 @@ export default class ReimbursementItemComponent extends Component {
 
   constructor(owner, args) {
     super(owner, args);
-    if (this.isUnconfirmed && !this.args.reimbursement.vetoed) {
+    if (this.isUnconfirmed && !this.isVetoed) {
       this.showExpenseDetails = true;
     }
+    console.debug(fmtDateLocalized);
   }
 
   get ipfsGatewayUrl () {
@@ -27,10 +29,32 @@ export default class ReimbursementItemComponent extends Component {
     return !this.isConfirmed;
   }
 
+  get isVetoed () {
+    return this.args.reimbursement.vetoed;
+  }
+
   get showVetoButton () {
     return this.isUnconfirmed && this.kredits.currentUserIsCore;
   }
 
+  get showConfirmedIn () {
+    return !this.isVetoed &&
+           (this.showExpenseDetails || this.isUnconfirmed);
+  }
+
+  get expenses () {
+    return this.args.reimbursement.expenses;
+  }
+
+  get expensesDateRange () {
+    const dates = this.expenses.map(e => e.date).uniq().sort();
+    let out = fmtDateLocalized.compute(dates.firstObject)
+    if (dates.length > 1) {
+      out += ' - ' + fmtDateLocalized.compute(dates.lastObject)
+    }
+    return out;
+  }
+
   @action
   toggleExpenseDetails () {
     this.showExpenseDetails = !this.showExpenseDetails;

app/components/reimbursement-item/template.hbs

@@ -19,8 +19,12 @@
   {{/if}}
 
   <div class="meta">
-    <p class="confirmation-eta">
+    <p>
+      {{#if this.showConfirmedIn}}
       <ConfirmedIn @confirmedAtBlock={{@reimbursement.confirmedAt}} />
+      {{else}}
+        {{#unless this.isVetoed}}{{this.expensesDateRange}}{{/unless}}
+      {{/if}}
     </p>
     <p class="actions">
       <a href="{{this.ipfsGatewayUrl}}/{{@reimbursement.ipfsHash}}"

app/helpers/fmt-date-localized.js

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import getLocale from 'kredits-web/utils/get-locale';
 
-export default helper(function(dateStr) {
+export default helper(function fmtDateLocalized(dateStr) {
   const date = new Date(dateStr);
   const locale = getLocale();
   return new Intl.DateTimeFormat(locale).format(date);

app/styles/components/_reimbursement-list.scss

@@ -43,9 +43,6 @@ ul.reimbursement-list {
       flex: 1;
       padding: 1.6rem 0 1rem 0;
 
-      &.confirmation-eta {
-      }
-
       &.actions {
         text-align: right;
       }