web/src/components/Modal.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'submit'): void,
+    (e: 'submit', event : {cancel:boolean}): boolean,
     (e: 'open'): void,
 }>();
 
@@ -20,8 +20,12 @@ function openDialog() {
     visible.value = true;
 };
 function submitDialog() {
+    const e = {cancel: false};
+    emit("submit", e);
+    if(e.cancel)
+        return;
+
     visible.value = false;
-    emit("submit");
 }
 </script>
 

web/src/dialogs/EditAccount.vue

@@ -14,8 +14,16 @@ const CurrentAccount = computed(() => accountStore.CurrentAccount);
 const accountName = ref("");
 const accountOnBudget = ref(true);
 const accountOpen = ref(true);
+const error = ref("");
 
-function editAccount(e : any) {
+function editAccount(e : {cancel:boolean}) : boolean {
+    if(CurrentAccount.value?.ClearedBalance != 0 && !accountOpen.value){
+        e.cancel = true;
+        error.value = "Cannot close account with balance";
+        return false; 
+    }
+
+    error.value = "";
     accountStore.EditAccount(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value, accountOpen.value);
 
     // account closed, move to Budget
@@ -23,6 +31,7 @@ function editAccount(e : any) {
         const currentBudgetID = useBudgetsStore().CurrentBudgetID;
         router.replace('/budget/'+currentBudgetID+'/budgeting');
     }
+    return true;
 }
 
 function openEditAccount(e : any) {
@@ -37,7 +46,7 @@ function openEditAccount(e : any) {
         <template v-slot:placeholder><span class="ml-2">✎</span></template>
         <div class="mt-2 px-7 py-3">
             <Input
-                class="border-2"
+                class="border-2 dark:border-gray-700"
                 type="text"
                 v-model="accountName"
                 placeholder="Account name"
@@ -60,5 +69,8 @@ function openEditAccount(e : any) {
             />
             <label>Open</label>
         </div>
+        <div v-if="error != ''" class="dark:text-red-300 text-red-700">
+            {{ error }}
+        </div>
     </Modal>
 </template>