Show tags alongside transactions in SPA prototype

range-of-motion · Dec 2, 2023 · e9b2d90 · e9b2d90
1 parent a615fd9
commit e9b2d90
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/app/Http/Resources/TagResource.php b/app/Http/Resources/TagResource.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class TagResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+            'color' => $this->color,
+        ];
+    }
+}
diff --git a/app/Http/Resources/TransactionResource.php b/app/Http/Resources/TransactionResource.php
@@ -14,6 +14,7 @@ public function toArray(Request $request): array
 
         return [
             'id' => $this->id,
+            'tag' => !$isEarning && $this->tag_id ? new TagResource($this->tag) : null,
             'type' => $isEarning ? 'earning' : 'spending',
             'happened_on' => $this->happened_on,
             'description' => $this->description,

diff --git a/resources/assets/js/prototype/screens/Transactions/Index.vue b/resources/assets/js/prototype/screens/Transactions/Index.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { Tag } from 'lucide-vue';
 import { computed, onMounted, ref } from 'vue';
 
 import Navigation from '../../components/Navigation.vue';
@@ -78,10 +79,16 @@ onMounted(() => {
                     <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ span.year }}</div>
                 </div>
                 <div class="flex-1">
-                    <div class="py-4 px-5 space-y-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+                    <div class="py-4 px-5 space-y-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                         <div class="flex items-center justify-between" v-for="transaction in getTransactionsBySpan(span)">
-                            <div class="text-sm text-gray-500 dark:text-white">{{ transaction.description }}</div>
-                            <div class="text-sm" :class="'text-' + (transaction.type === 'earning' ? 'green' : 'red') + '-600'">+{{ (transaction.amount / 100).toFixed(2) }}</div>
+                            <div class="flex-1 text-sm text-gray-500 dark:text-white">{{ transaction.description }}</div>
+                            <div v-if="transaction.tag" class="flex-1 flex items-center space-x-1 dark:text-white">
+                                <span :style="{ color: '#' + transaction.tag.color } ">
+                                    <Tag :size="16" />
+                                </span>
+                                <span class="text-sm text-gray-500">{{ transaction.tag.name }}</span>
+                            </div>
+                            <div class="w-20 text-right text-sm" :class="'text-' + (transaction.type === 'earning' ? 'green' : 'red') + '-600'">+{{ (transaction.amount / 100).toFixed(2) }}</div>
                         </div>
                     </div>
                 </div>