budgeteer/web/src/pages/Account.vue

<script lang="ts" setup>
import { computed, ref } from "vue"
import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue";
import TransactionInputRow from "../components/TransactionInputRow.vue";
import { useAccountStore } from "../stores/budget-account";
import EditAccount from "../dialogs/EditAccount.vue";
import Button from "../components/SimpleButton.vue";
import { useTransactionsStore } from "../stores/transactions";
import Modal from "../components/Modal.vue";
import Input from "../components/Input.vue";
import Checkbox from "../components/Checkbox.vue";
import { formatDate } from "../date";

defineProps<{
    budgetid: string
    accountid: string
}>()

const modalInputRow = ref<typeof TransactionInputRow | null>(null);

function submitModal() {
  modalInputRow.value!.Save();
}

const accounts = useAccountStore();
const transactions = useTransactionsStore();
const TargetReconcilingBalance = ref(0);

function setReconciled(event: Event) {
    const target = event.target as HTMLInputElement;
    transactions.SetReconciledForAllTransactions(target.checked);
}

function cancelReconcilation() {
    transactions.SetReconciledForAllTransactions(false);
    transactions.Reconciling = false;
}

function submitReconcilation() {
    transactions.SubmitReconcilation(0);
    transactions.Reconciling = false;
}

function createReconcilationTransaction() {
    const diff = TargetReconcilingBalance.value - transactions.ReconcilingBalance;
    transactions.SubmitReconcilation(diff);
    transactions.Reconciling = false;
}
</script>

<template>
  <div class="grid grid-cols-[1fr_auto]">
    <div>
      <h1 class="inline">
        {{ accounts.CurrentAccount?.Name }}
      </h1>
      <EditAccount />
    </div>

    <div
      class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm"
    >
      <span class="rounded-lg p-1 whitespace-nowrap flex-1">
        Working:
        <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
      </span>

      <span class="rounded-lg p-1 whitespace-nowrap flex-1">
        Cleared:
        <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
      </span>

      <span
        v-if="!transactions.Reconciling"
        class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
        @click="transactions.Reconciling = true"
      >
        Reconciled:
        <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
      </span>

      <span
        v-if="transactions.Reconciling"
        class="contents"
      >
        <Button
          class="bg-blue-500 p-1 whitespace-nowrap flex-1"
          @click="submitReconcilation"
        >
          My current balance is&nbsp;
          <Currency :value="transactions.ReconcilingBalance" />
        </Button>

        <Button
          class="bg-orange-500 p-1 whitespace-nowrap flex-1"
          @click="createReconcilationTransaction"
        >
          No, it's:
          <Input
            v-model="TargetReconcilingBalance"
            class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
            type="number"
          />
          (Difference
          <Currency
            :value="transactions.ReconcilingBalance - TargetReconcilingBalance"
          />)
        </Button>
        <Button
          class="bg-red-500 p-1 flex-1"
          @click="cancelReconcilation"
        >Cancel</Button>
      </span>
    </div>
  </div>

  <table>
    <tr class="font-bold">
      <td class="hidden md:block" style="width: 90px;">Date</td>
      <td style="max-width: 150px;">Payee</td>
      <td style="max-width: 200px;">Category</td>
      <td>Memo</td>
      <td class="text-right">Amount</td>
      <td style="width: 80px;">
        <Checkbox v-if="transactions.Reconciling" @input="setReconciled" />
      </td>
    </tr>
    <TransactionInputRow
      class="hidden md:table-row"
      :budgetid="budgetid"
      :accountid="accountid"
    />
    <template v-for="(dayTransactions, key, index) in transactions.TransactionsByDate">
      <tr class="table-row md:hidden">
        <td class="py-2" colspan="5">
          <span class="bg-gray-400 dark:bg-slate-600 rounded-lg p-1 px-2 w-full block">
            {{ key }}
          </span>
        </td>
      </tr>
      <TransactionRow
        v-for="transaction in dayTransactions"
        :key="transaction.ID"
        :transactionid="transaction.ID"
        :index="index"
      />
    </template>
  </table>
  <div class="md:hidden">
    <Modal @submit="submitModal">
      <template #placeholder>
        <Button
          class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
        >
          +
        </Button>
      </template>
      <TransactionInputRow
        ref="modalInputRow"
        class="flex flex-col w-full h-full top-0"
        :budgetid="budgetid"
        :accountid="accountid"
      />
    </Modal>
  </div>
</template>

<style>
table {
    width: 100%;
    table-layout: fixed;
}
.negative {
    color: red;
}
</style>