add network

src/components/transactions/TransactionList.vue

@@ -1,11 +1,128 @@
 <script setup lang="ts">
+import {useSpaceStore} from "@/stores/spaceStore";
+import {computed, onMounted, ref} from "vue";
+import {Checkbox, Divider} from "primevue";
+import {useToast} from "primevue/usetoast";
+import {Transaction} from "@/models/transaction";
+import {TransactionService} from "@/services/transactions-service";
+import {formatAmount, formatDate} from "@/utils/utils";
+import {useRouter} from "vue-router";
+import {TransactionKind} from "@/models/enums";
+import {useToolbarStore} from "@/stores/toolbar-store";
 
+const toast = useToast();
+const router = useRouter();
+const spaceStore = useSpaceStore()
+const toolbar = useToolbarStore()
+const transactionService = TransactionService
+const transactions = ref<Transaction[]>([])
+const groupedTransactions = computed(() => {
+  const planned: Transaction[] = []
+  const instant: Transaction[] = []
+
+  for (const tx of transactions.value) {
+    if (tx.kind === TransactionKind.PLANNING) planned.push(tx)
+    else if (tx.kind === TransactionKind.INSTANT) instant.push(tx)
+  }
+
+  return { planned, instant }
+})
+
+const plannedTransactions = computed(() => groupedTransactions.value.planned)
+const instantTransactions = computed(() => groupedTransactions.value.instant)
+
+
+const fetchData = async () => {
+  if (spaceStore.selectedSpaceId) {
+    try {
+      console.log('hereeeee ')
+      transactions.value = await transactionService.getTransactions(spaceStore.selectedSpaceId);
+    } catch (e) {
+      toast.add({
+        severity: "error",
+        summary: "Failed to load transactions.",
+        detail: e,
+        life: 3000,
+      })
+    }
+  }
+}
+
+onMounted(async () => {
+  await fetchData()
+  toolbar.registerHandler('openTransactionCreation', () => {
+    router.push('/transactions/create')
+  })
+})
 </script>
 
 <template>
-
+  <div v-if="!spaceStore.selectedSpaceId" class="card">
+    Try to select a space first.
+  </div>
+  <div v-else class="flex flex-col gap-6 pb-10">
+    <div class="flex flex-col gap-2">
+      <span class="text-xl !font-semibold !pl-2">Planned transactions</span>
+      <div class="flex card">
+        <span v-if="plannedTransactions.length==0">Looks like you haven't plan any transactions yet. <router-link
+            to="/transactions/create" class="!text-blue-400">Try to create some.</router-link></span>
+        <div v-else v-for="key in plannedTransactions.keys()" :key="plannedTransactions[key].id"
+             class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold ">
+          <div class="flex flex-row  w-full items-center gap-4">
+            <Checkbox v-model="plannedTransactions[key].isDone" binary class="text-3xl">
+              {{ plannedTransactions[key].category.icon }}
+            </Checkbox>
+            <div class="flex !flex-row !justify-between !w-full"
+                 @click="router.push(`/transactions/${plannedTransactions[key].id}/edit`)">
+              <div class="flex flex-row items-center gap-2">
+                <div class="flex flex-col !font-bold "> {{ plannedTransactions[key].comment }}
+                  <div class="flex flex-row text-sm">{{ plannedTransactions[key].category.name }}</div>
+                </div>
+              </div>
+              <div class="flex flex-row gap-2 items-center !w-fit">
+                <div class="flex flex-col justify-between items-end !w-fit whitespace-nowrap shrink-0">
+                  <span class="text-lg !font-bold">{{ formatAmount(plannedTransactions[key].amount) }} ₽</span>
+                  <span class="text-sm !font-extralight"> {{ formatDate(plannedTransactions[key].date) }}</span>
+                </div>
+                <i class="pi pi-angle-right !font-extralight"/>
+              </div>
+            </div>
+          </div>
+          <Divider v-if="key+1 !== plannedTransactions.length" class="!m-0 !py-3"/>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <span class="text-xl !font-semibold !pl-2">Instant transactions</span>
+      <div class="flex card">
+        <span v-if="instantTransactions.length==0">Looks like you haven't record any transaction yet.<router-link
+            to="/transactions/create" class="!text-blue-400">Try to create some.</router-link></span>
+        <div v-else v-for="key in instantTransactions.keys()" :key="instantTransactions[key].id"
+             @click="router.push(`/transactions/${instantTransactions[key].id}/edit`)"
+             class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold ">
+          <div class="flex flex-row  w-full items-center justify-between">
+            <div class="flex flex-row items-center gap-2 ">
+              <span class="text-3xl"> {{ instantTransactions[key].category.icon }}</span>
+              <div class="flex flex-col !font-bold "> {{ instantTransactions[key].comment }}
+                <div class="flex flex-row text-sm">{{ instantTransactions[key].category.name }}</div>
+              </div>
+            </div>
+            <div class="flex flex-row gap-2 items-center">
+              <div class="flex flex-col justify-between items-end !w-fit whitespace-nowrap shrink-0">
+                <span class="text-lg !font-bold ">{{ formatAmount(instantTransactions[key].amount) }} ₽</span>
+                <span class="text-sm !font-extralight"> {{ formatDate(instantTransactions[key].date) }}</span>
+              </div>
+              <i class="pi pi-angle-right !font-extralight"/>
+            </div>
+          </div>
+          <Divider v-if="key+1 !== instantTransactions.length" class="!m-0 !py-3"/>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
+
 <style scoped>
 
 </style>