UI Improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jadetree/frontend",
-  "version": "0.9.10-alpha",
+  "version": "0.9.11-alpha",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@braid/vue-formulate": "^2.4.5",
-    "@jadetree/controls": "^0.9.2",
+    "@jadetree/controls": "^0.9.4",
     "@jadetree/currency": "^0.8.15",
     "cldr-localenames-modern": "^37.0.0",
     "core-js": "^3.6.5",

src/components/Navbar.vue

@@ -41,7 +41,7 @@
               <div class="sm:absolute sm:hidden sm:group-hover:block sm:right-0 sm:py-3 sm:px-2 sm:w-40 sm:bg-gray-800 sm:rounded-b-md z-200">
                 <router-link to="/profile" class="navbar-button navbar-button__menu">Profile</router-link>
                 <router-link to="/settings" class="navbar-button navbar-button__menu">Settings</router-link>
-                <router-link to="/logout" class="navbar-button navbar-button__menu">Log Out</router-link>
+                <router-link v-if="serverMode !== 'personal'" to="/logout" class="navbar-button navbar-button__menu">Log Out</router-link>
               </div>
             </div>
           </div>
@@ -79,6 +79,9 @@ import { UserSchema } from '@/api/types';
     ...mapState({
       needsSetup: 'needsSetup',
     }),
+    ...mapState('api', {
+      serverMode: 'serverMode',
+    }),
   },
   directives: { clickAway },
 })
@@ -87,6 +90,7 @@ export default class Navbar extends Vue {
   private apiLoaded!: boolean;
   private loggedIn!: boolean;
   private needsSetup!: boolean;
+  private serverMode!: string;
   private user!: UserSchema;
   /* eslint-enable lines-between-class-members */
 

src/layouts/JtSidebarLayout.vue

@@ -6,7 +6,7 @@
   />
   <div v-else class="relative w-full max-w-5xl mx-auto">
     <div class="flex flex-row items-start md:space-x-2 md:px-2">
-      <div class="fixed bottom-0 inset-x-0 z-20 flex-none md:sticky md:top-0 md:py-2 md:inset-auto md:w-xs">
+      <div class="fixed bottom-0 inset-x-0 z-20 flex-none md:sticky md:top-0 md:py-2 md:inset-auto" style="width: 18rem;">
         <div class="flex flex-col items-start h-full p-2 bg-white border-t border-gray-800 md:border-gray-400 md:border md:rounded">
           <slot name="sidebar"></slot>
         </div>

src/main.ts

@@ -66,6 +66,7 @@ Vue.use(VueFormulate, {
   },
 });
 
+Vue.config.performance = true;
 Vue.config.productionTip = false;
 
 async function startup() {

src/pages/DashboardPage.vue

@@ -7,7 +7,9 @@
     <div class="flex flex-col-reverse items-stretch space-x-0 space-y-2 space-y-reverse p-2 md:flex-row md:items-start md:space-x-2 md:space-y-0">
       <div class="flex-1 flex-grow border rounded bg-white p-4 md:max-w-sm">
         <div class="flex items-start justify-between">
-          <div class="text-lg font-medium">All Accounts</div>
+          <div class="text-lg font-medium">
+            <router-link to="/transactions">All Accounts</router-link>
+          </div>
           <div
             class="text-right text-lg font-medium"
             :class="{
@@ -41,7 +43,11 @@
                 :key="`acct-${budget.id}-${account.id}`"
                 class="flex items-start justify-between"
               >
-                <div>{{ account.name }}</div>
+                <div>
+                  <router-link :to="`/transactions/${account.id}`">
+                    {{ account.name }}
+                  </router-link>
+                </div>
                 <div
                   class="text-right"
                   :class="{
@@ -89,23 +95,26 @@
             </div>
           </template>
         </div>
-
-        <div class="mt-4">
-          <jt-button
-            :class="['flex', 'items-center', 'justify-center', 'w-full']"
-            color="blue"
-            type="button"
-            @click="openAccountDialog"
-          >
-            Add Account
-          </jt-button>
-        </div>
       </div>
       <div class="flex-1 flex-grow border rounded bg-white p-4">
         <div class="flex flex-col items-stretch">
-          <h1 class="text-lg font-medium">
-            {{ currentBudget ? currentBudget.name : '' }}
-          </h1>
+          <div class="flex flex-row flex-wrap items-center justify-between">
+            <h1 class="text-lg font-medium">
+              <router-link to="/budget">{{ currentBudget ? currentBudget.name : '' }}</router-link>
+            </h1>
+            <div>
+              <jt-button
+                :class="['flex', 'items-center', 'justify-center']"
+                color="blue"
+                size="small"
+                type="button"
+                @click="openTransactionDialog"
+              >
+                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
+                Add Transaction
+              </jt-button>
+            </div>
+          </div>
           <div class="text-sm text-gray-800 flex items-end justify-start mt-2">
             <div>
               <div class="font-light">Income</div>
@@ -220,6 +229,7 @@ import {
 } from '@/api/types';
 
 import AddAccountDialog from '../dialogs/AddAccountDialog.vue';
+import AddTransactionDialog from '../dialogs/AddTransactionDialog.vue';
 import JtStandardLayout from '../layouts/JtStandardLayout.vue';
 
 @Component({
@@ -353,6 +363,14 @@ export default class DashboardPage extends Vue {
     });
   }
 
+  /** Show the Add Transaction dialog */
+  openTransactionDialog() {
+    this.$modalEventBus.$emit('open', {
+      component: AddTransactionDialog,
+      options: { lockFocus: true },
+    });
+  }
+
   /** Sum Balances of Accounts */
   sumBalances(accounts: AccountSchema[]): Money {
     return accounts.reduce(
@@ -375,3 +393,9 @@ export default class DashboardPage extends Vue {
   }
 }
 </script>
+
+<style>
+.jtc-button.jtc-button--small {
+  @apply .px-2 .py-1 .text-sm;
+}
+</style>

src/pages/TransactionPage.vue

@@ -160,14 +160,23 @@
       </table>
     </template>
     <template v-slot:sidebar>
-      <div class="w-full text-lg font-medium">
-        <jt-select
-          id="accountSelect"
-          :clearButton="false"
-          :options="accountOptions"
-          :value="currentAccountValue"
-          @input="setCurrentAccount"
-        />
+      <div class="flex flex-row items-center justify-end w-full">
+        <div class="flex items-center font-medium text-lg flex-grow">
+          <jt-select
+            id="accountSelect"
+            :class="['w-full']"
+            :clearButton="false"
+            :options="accountOptions"
+            :value="currentAccountValue"
+            @input="setCurrentAccount"
+          />
+          <div v-if="currentAccount && currentAccount.notes" class="ml-2" v-tooltip="currentAccount.notes">
+            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="document-text w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+          </div>
+        </div>
+        <button v-if="currentAccount" class="ml-3 md:ml-1 hover:text-blue-500 border-none active:outline-none focus:outline-none" v-tooltip="'Edit Account Information'" @click="openEditAccountDialog">
+          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="pencil w-6 h-6 md:w-4 md:h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
+        </button>
       </div>
       <div v-if="currentAccount" class="flex flex-col items-stretch w-full my-2">
         <div class="hidden sm:flex items-center justify-between w-full">
@@ -187,11 +196,13 @@
       </div>
       <div class="w-full mt-2">
         <jt-button
-          :class="['flex', 'items-center', 'justify-center', 'w-full']"
+          :class="['flex', 'items-center', 'justify-center']"
           color="blue"
+          size="small"
           type="button"
           @click="addTransaction"
         >
+          <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
           Add Transaction
         </jt-button>
       </div>
@@ -339,6 +350,16 @@ export default class TransactionPage extends Vue {
     );
   }
 
+  /** Set the Active Account from URI Path */
+  mounted() {
+    const { params } = this.$route;
+    if (params && params.accountId) {
+      const id = Number.parseInt(params.accountId, 10);
+      const { dispatch } = this.$store;
+      dispatch('account/setCurrentAccount', id);
+    }
+  }
+
   /** Get the name of an Account */
   accountName(accountId: number): string {
     const account = this.findAccount(accountId);
@@ -427,6 +448,16 @@ export default class TransactionPage extends Vue {
     return this.expandedRows.some((rowKey) => rowKey === key);
   }
 
+  /** Open the Edit Account Dialog */
+  openEditAccountDialog(): void {
+    this.$notify({
+      group: 'top',
+      title: 'Not Implemented',
+      text: 'Account Editing is not yet implemented',
+      type: 'warning',
+    }, 5000);
+  }
+
   /** Get Outflow Amount */
   outflowAmount(transaction: TransactionSchema, amount?: Money): Money {
     if (!transaction || !transaction.line_account_id) return new Money(0, this.userCurrency);

src/router.ts

@@ -72,6 +72,15 @@ const router = new Router({
         requiresProfile: true,
       },
     },
+    {
+      path: '/transactions/:accountId',
+      component: TransactionPage,
+      meta: {
+        title: 'Transactions',
+        requiresLogin: true,
+        requiresProfile: true,
+      },
+    },
 
     // Redirect to home by default
     { path: '*', redirect: '/home' },

src/store/modules/budget.module.ts

@@ -260,7 +260,7 @@ const budgetModule: Module<BudgetState, RootState> = {
       commit('clear');
     },
     onTransactionChanged({ dispatch }) {
-      return dispatch('loadBudgetMonth');
+      return dispatch('loadBudgetData');
     },
     setCurrentBudget({ commit, dispatch, state }, budgetId: number): Promise<void> {
       const budget = state.budgets.find((b) => b.id === budgetId);

yarn.lock

@@ -940,10 +940,10 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
-"@jadetree/controls@^0.9.2":
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@jadetree/controls/-/controls-0.9.2.tgz#c8fddb64232181362a8c0bef543af9700f9a10d5"
-  integrity sha512-ujgMIgZTK59aky3FO8ByzALT6IAX1yr6Y0xoRZRWbGMctwZsdf8VjFTv1iKD1jKNgNJELoJJ3pCLB/Juat+VVw==
+"@jadetree/controls@^0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@jadetree/controls/-/controls-0.9.4.tgz#8847671739ad09c21d818c4a2967f54eb2df3ba1"
+  integrity sha512-Aht3p7kzp9WydRaFqruanty6YKwpBf5yAdxlXd9LqAIMC931lunwbQJP6ZcjekViQhEJ916TDymSBjjKYvgP7A==
 
 "@jadetree/currency@^0.8.15":
   version "0.8.15"
@@ -7848,16 +7848,6 @@ postcss-import@^10.0.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-import@^12.0.1:
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
-  integrity sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==
-  dependencies:
-    postcss "^7.0.1"
-    postcss-value-parser "^3.2.3"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
 postcss-initial@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.2.tgz#f018563694b3c16ae8eaabe3c585ac6319637b2d"