gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import { BudgetUpdate } from '../../types/budgetUpdate';
import './BudgetUpdatesTable.css';

function BudgetUpdatesTable({ budgetUpdates }: Props) {
  return (
    <table>
      <thead>
        <tr>
          <td>Date</td>
          <td>Quantity</td>
          <td>Period</td>
        </tr>
      </thead>

      <tbody>
        { budgetUpdates.map(Row) }
      </tbody>
    </table>
  );
}

function Row(budgetUpdate: BudgetUpdate) {
  return (
    <tr>
      <td>{budgetUpdate.date.format("DD Mm YYYY")}</td>
      <td>{budgetUpdate.newQuantity.toString()}</td>
      <td>{budgetUpdate.newPeriod}</td>
    </tr>
  )
}

type Props = {
  budgetUpdates: BudgetUpdate[];
}

export { BudgetUpdatesTable };