feat(#35): Wire toasts into existing user actions

src/ledger/EditLedgerModal.vue

@@ -6,6 +6,7 @@ import {Modal} from "@/components";
 import LedgerLabel from "./LedgerLabel.vue";
 import {PlusIcon, TrashIcon} from '@heroicons/vue/24/outline';
 import LedgerSelect from "@/ledger/LedgerSelect.vue";
+import {toast} from "@/toast";
 
 interface Props {
   ledgerId?: string;
@@ -59,18 +60,16 @@ const title = computed(() => {
 
 const create = () => {
   if (type.value === LedgerTypes.Main) {
-    ledgersStore.createMain({name: name.value})
-  } else {
-    ledgersStore.createCombined({name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
+    return ledgersStore.createMain({name: name.value})
   }
+  return ledgersStore.createCombined({name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
 }
 
 const update = () => {
   if (type.value === LedgerTypes.Main) {
-    ledgersStore.updateMain(props.ledgerId, {name: name.value})
-  } else {
-    ledgersStore.updateCombined(props.ledgerId, {name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
+    return ledgersStore.updateMain(props.ledgerId, {name: name.value})
   }
+  return ledgersStore.updateCombined(props.ledgerId, {name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
 }
 
 const save = () => {
@@ -78,12 +77,11 @@ const save = () => {
     return;
   }
 
-  if (isCreating.value) {
-    create();
-  } else {
-    update();
-  }
+  const creating = isCreating.value;
+  const action = creating ? create() : update();
+
   modalOpen.value = false;
+  action.then(() => toast.success(creating ? 'Ledger created' : 'Ledger updated'));
 }
 
 defineExpose({ open });

src/mammon/mammonService.ts

@@ -1,5 +1,6 @@
 import {logResource} from "@/service";
 import {getAccessToken, setAccessToken} from "@/auth/token";
+import {toast} from "@/toast";
 import axios, {InternalAxiosRequestConfig} from "axios";
 import {
     AcquisitionApi,
@@ -86,6 +87,12 @@ mammonAxiosInstance.interceptors.response.use(response => response, async error
         }
         onAuthExpired();
     }
+
+    const status = error.response?.status;
+
+    if (status !== 401 && status !== 403) {
+        toast.error('Something went wrong');
+    }
     return Promise.reject(error);
 })
 

src/market/acquisition/BuyModal.vue

@@ -6,6 +6,7 @@ import {Ledger, LedgerSelect, isMain, useLedgersStore} from '@/ledger';
 import {computed, ref} from 'vue';
 import {fromEveDatetimeInput, toEveDatetimeInput} from './AcquiredType';
 import {useAcquiredTypesStore} from './acquisition';
+import {toast} from '@/toast';
 
 const acquiredTypesStore = useAcquiredTypesStore();
 const ledgersStore = useLedgersStore();
@@ -58,6 +59,7 @@ const add = async () => {
 
     await acquiredTypesStore.addAcquiredType(id, count.value, price.value, lid, fromEveDatetimeInput(date.value));
     modalOpen.value = false;
+    toast.success('Acquisition added');
 }
 
 defineExpose({ open });

src/market/acquisition/SellModal.vue

@@ -5,6 +5,7 @@ import { Ledger, LedgerSelect, isMain, useLedgersStore } from '@/ledger';
 import { computed, ref } from 'vue';
 import { AcquiredType, acquiredTypesToSorted, fromEveDatetimeInput, toEveDatetimeInput } from './AcquiredType';
 import { useAcquiredTypesStore } from './acquisition';
+import { toast } from '@/toast';
 
 
 const acquiredTypesStore = useAcquiredTypesStore();
@@ -61,6 +62,7 @@ const remove = async () => {
         remaining -= quantity;
     }
     modalOpen.value = false;
+    toast.success('Consumption added');
 }
 
 defineExpose({ open });

src/pages/ledger/ListLedgers.vue

@@ -6,12 +6,14 @@ import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 import {IskLabel} from "@/market";
 import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 import {activityApi} from "@/mammon";
+import {toast} from "@/toast";
 
 const ledgersStore = useLedgersStore();
 
 const editLedgerModal = ref<typeof EditLedgerModal>();
 
 const processActivities = async () => {
+  toast.info('Processing started');
   await activityApi.processNewActivities();
 }
 

src/pages/rules/EditRuleBook.vue

@@ -44,8 +44,7 @@ const save = () => ruleBookStore.update({
   ),
   script: script.value
 })
-    .then(() => toast.success('Rule book saved'))
-    .catch(() => toast.error('Failed to save rule book'));
+    .then(() => toast.success('Rule book saved'));
 
 useEventListener(window, 'keydown', (event: KeyboardEvent) => {
   if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {

src/toast/ToastContainer.vue

@@ -84,10 +84,12 @@ div.toast {
 .toast-move {
   @apply transition-all duration-300;
 }
-.toast-enter-from,
-.toast-leave-to {
+.toast-enter-from {
   @apply opacity-0 translate-x-8;
 }
+.toast-leave-to {
+  @apply opacity-0 -translate-y-8;
+}
 .toast-leave-active {
   @apply absolute w-full;
 }

src/utils.ts

@@ -1 +1,4 @@
-export const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
+import {toast} from '@/toast';
+
+export const copyToClipboard = (s: string) => navigator.clipboard.writeText(s)
+    .then(() => toast({message: 'Copied', type: 'info', duration: 500}));