Merge branch 'main' into fix/select-fields-view

letehaha · Dec 19, 2024 · f27a52a · f27a52a
2 parents bb33f84 + 7f70102
commit f27a52a
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 10 deletions.
diff --git a/src/components/common/alert-dialog.vue b/src/components/common/alert-dialog.vue
@@ -6,7 +6,7 @@ defineEmits(["accept", "cancel"]);
 withDefaults(
   defineProps<{
     title: string;
-    description?: string;
+    description?: string; // "description" slot can be used to pass template
     cancelLabel?: string;
     acceptLabel?: string;
     acceptVariant?: ButtonVariantProps["variant"];
@@ -34,8 +34,10 @@ withDefaults(
             {{ title }}
           </AlertDialog.AlertDialogTitle>
 
-          <AlertDialog.AlertDialogDescription v-if="description">
-            {{ description }}
+          <AlertDialog.AlertDialogDescription v-if="description || $slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
           </AlertDialog.AlertDialogDescription>
 
           <slot name="content" />

diff --git a/src/components/dialogs/monobank-set-token.vue b/src/components/dialogs/monobank-set-token.vue
@@ -111,7 +111,15 @@ const submit = async () => {
       <form class="grid gap-6" data-cy="monobank-set-token-modal" @submit.prevent="submit">
         <p>
           Please visit
-          <a href="https://api.monobank.ua/" class="text-primary">https://api.monobank.ua/</a>
+          <a
+            href="https://api.monobank.ua/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-primary"
+          >
+            https://api.monobank.ua/
+          </a>
+
           and follow all the instructions. Paste the API token from Monobank in the field below
         </p>
         <div>

diff --git a/src/components/ui-header.vue b/src/components/ui-header.vue
@@ -43,7 +43,7 @@
 
       <router-link :to="{ name: ROUTES_NAMES.settings }">
         <ui-button variant="secondary" class="text-white" size="icon" as="span">
-          <SettingsIcon />
+          <SettingsIcon :color="currentTheme === Themes.light ? 'black' : undefined" />
         </ui-button>
       </router-link>
     </div>

diff --git a/src/pages/account/account.vue b/src/pages/account/account.vue
@@ -9,7 +9,7 @@
           <MonobankAccount :account="account" />
         </template>
         <template v-else-if="account.type === ACCOUNT_TYPES.system">
-          <SystemAccount :account="account" />
+          <SystemAccount :account="account" :transactions="rawTransactionsList" />
         </template>
       </Card.CardContent>
     </Card.Card>

diff --git a/src/pages/account/create.vue b/src/pages/account/create.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="p-6">
-    <CreateAccountForm class="max-w-[440px]" @created="pushToAccountsPage" />
+    <Card class="sticky h-min w-[440px] top-[var(--header-height)] p-4">
+      <CreateAccountForm class="max-w-[440px]" @created="pushToAccountsPage" />
+    </Card>
   </div>
 </template>
 
@@ -9,6 +11,7 @@ import { useRouter } from "vue-router";
 
 import { ROUTES_NAMES } from "@/routes/constants";
 import CreateAccountForm from "@/components/forms/create-account-form.vue";
+import { Card } from "@/components/lib/ui/card";
 
 const router = useRouter();
 const pushToAccountsPage = () => {

diff --git a/src/pages/account/types/system/system.vue b/src/pages/account/types/system/system.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
-import { AccountModel } from "shared-types";
+import { AccountModel, TransactionModel } from "shared-types";
 
 import { useAccountsStore } from "@/stores";
 import { ROUTES_NAMES } from "@/routes";
@@ -18,12 +18,14 @@ import SettingAccountGroup from "@/pages/account/components/account-group.vue";
 
 const props = defineProps<{
   account: AccountModel;
+  transactions: TransactionModel[];
 }>();
 const router = useRouter();
 
 const { addSuccessNotification, addErrorNotification } = useNotificationCenter();
 const accountsStore = useAccountsStore();
 const confirmAccountName = ref("");
+const accountHasTransactions = computed(() => props.transactions.length > 0);
 
 const deleteAccount = async () => {
   const accountName = props.account.name;
@@ -77,14 +79,27 @@ const deleteAccount = async () => {
 
             <AlertDialog
               title="Are you absolutely sure?"
-              description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
               :accept-disabled="confirmAccountName !== account.name"
               accept-variant="destructive"
               @accept="deleteAccount"
             >
               <template #trigger>
                 <Button variant="destructive"> Delete this account </Button>
               </template>
+              <template #description>
+                <template v-if="accountHasTransactions">
+                  This action cannot be undone.
+                  <strong>
+                    You have {{ transactions.length }} transactions associated with this account,
+                    they will also be deleted.
+                  </strong>
+                  Do you really want to delete this account?
+                </template>
+                <template v-else>
+                  This action cannot be undone. Do you really want to delete this account?
+                  <strong> You have zero transactions associated. </strong>
+                </template>
+              </template>
               <template #content>
                 <InputField
                   v-model="confirmAccountName"