From 91237c04a6866968a5535277d6f5ed9c1131d59a Mon Sep 17 00:00:00 2001
From: Jens Christian Aanestad <jenscaa@stud.ntnu.no>
Date: Mon, 29 Apr 2024 13:39:25 +0200
Subject: [PATCH] feat/Created new mini budget box component
---
src/components/Budget/Modal/MiniBudgetBox.vue | 121 ++++++++++++++++++
1 file changed, 121 insertions(+)
create mode 100644 src/components/Budget/Modal/MiniBudgetBox.vue
diff --git a/src/components/Budget/Modal/MiniBudgetBox.vue b/src/components/Budget/Modal/MiniBudgetBox.vue
new file mode 100644
index 0000000..ef36d7c
--- /dev/null
+++ b/src/components/Budget/Modal/MiniBudgetBox.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits(['importBudgetEvent'])
+const props = defineProps({
+ budgetId: {
+ type: Number,
+ required: true
+ },
+ budgetTitle: {
+ type: String,
+ default: ''
+ },
+ budgetAmount: {
+ type: Number,
+ default: 0
+ },
+ expenseAmount: {
+ type: Number,
+ default: 0
+ }
+})
+const balance = ref<number>(props.budgetAmount - props.expenseAmount);
+
+/**
+ * Emits an importBudgetEvent to the parent in order to signalize that
+ * a budget with id has been chosen to be imported.
+ */
+const emitImportBudgetEvent = () => {
+ emit('importBudgetEvent', props.budgetId)
+}
+
+</script>
+
+<template>
+ <div class="container-fluid" @click="emitImportBudgetEvent">
+ <h3>{{budgetTitle}}</h3>
+
+ <div class="info budget">
+ <i>
+ <img src="../../../assets/icons/money2.svg" width="30px" height="30px">
+ </i>
+ <div class="amount budget-container">
+ <h5>{{budgetAmount}} kr</h5>
+ </div>
+ </div>
+
+ <div class="info expenses">
+ <i>
+ <img src="../../../assets/icons/credit-card.svg" width="30px" height="30px">
+ </i>
+ <div class="amount expenses-container">
+ <h5>{{expenseAmount}} kr</h5>
+ </div>
+ </div>
+
+ <div class="info balance">
+ <i ref="iRef">
+ <img src="../../../assets/icons/scale.svg" width="30px" height="30px">
+ </i>
+ <div class="amount balance-container">
+ <h5>{{balance}} kr</h5>
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<style scoped>
+div.container-fluid {
+ display: grid;
+ grid-template-columns: 0.4fr 0.3fr 0.3fr 0.3fr;
+ margin: 4px 9px;
+ border-radius: 10px;
+ background-color: #2a2a34;
+ cursor: pointer;
+ transition: transform 150ms ease-in-out;
+}
+
+div.container-fluid:hover {
+ transform: scale(1.02);
+}
+
+div.info {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+}
+
+div.amount {
+ align-content: center;
+}
+
+h3, h5 {
+ color: white;
+ margin-bottom: 0;
+ align-self: center;
+}
+
+i {
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ width: 40px;
+ height: 40px;
+ margin: 5px;
+ padding: 5px;
+ border-radius: 7px;
+}
+
+.budget i {
+ background-color: rgba(78, 107, 239, 0.43);
+}
+
+.expenses i {
+ background-color: rgba(238, 191, 43, 0.43);
+}
+
+.balance i {
+ background-color: rgba(232, 14, 14, 0.43);
+}
+</style>
\ No newline at end of file
--
GitLab