Convert frontend to Vue #3
| @@ -8,7 +8,7 @@ export default { | |||||||
|     <v-container> |     <v-container> | ||||||
|         <h1>{{$store.getters.CurrentAccount.Name}}</h1> |         <h1>{{$store.getters.CurrentAccount.Name}}</h1> | ||||||
|         <p> |         <p> | ||||||
|             Current Balance: {{$store.getters.CurrentAccount.Balance.Int / 100}} |             Current Balance: <span :class="$store.getters.CurrentAccount.Balance.Int < 0 ? 'negative' : ''">{{$store.getters.CurrentAccount.Balance.Int / 100}}</span> | ||||||
|         </p> |         </p> | ||||||
|         <table> |         <table> | ||||||
|             <tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}"> |             <tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}"> | ||||||
| @@ -19,7 +19,7 @@ export default { | |||||||
|                 <td style="max-width: 200px;"> |                 <td style="max-width: 200px;"> | ||||||
|                     {{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}} |                     {{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}} | ||||||
|                 </td> |                 </td> | ||||||
|                 <td class="cutoff"> |                 <td> | ||||||
|                     <a :href="'/budget/'+$store.getters.CurrentBudget.ID+'/transaction/'+transaction.ID">{{transaction.Memo}}</a> |                     <a :href="'/budget/'+$store.getters.CurrentBudget.ID+'/transaction/'+transaction.ID">{{transaction.Memo}}</a> | ||||||
|                 </td> |                 </td> | ||||||
|                 <td style="width: 80px;" :class="transaction.Amount.Int < 0 ? 'negative' : ''"> |                 <td style="width: 80px;" :class="transaction.Amount.Int < 0 ? 'negative' : ''"> | ||||||
| @@ -39,5 +39,5 @@ export default { | |||||||
| <style> | <style> | ||||||
| table {width: 100%; table-layout:fixed} | table {width: 100%; table-layout:fixed} | ||||||
| td {overflow: hidden; white-space: nowrap;} | td {overflow: hidden; white-space: nowrap;} | ||||||
| td.cutoff {width: 100px;} | .negative {color: red;} | ||||||
| </style> | </style> | ||||||
| @@ -18,7 +18,7 @@ export default { | |||||||
|       <ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued"> |       <ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued"> | ||||||
|           <li> |           <li> | ||||||
|             <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link> |             <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link> | ||||||
|             <span>{{account.Balance.Int / 100}}</span> |             <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span> | ||||||
|           </li> |           </li> | ||||||
|       </ul> |       </ul> | ||||||
|     </li> |     </li> | ||||||
| @@ -27,7 +27,7 @@ export default { | |||||||
|       <ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued"> |       <ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued"> | ||||||
|           <li> |           <li> | ||||||
|             <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link> |             <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link> | ||||||
|             <span>{{account.Balance.Int / 100}}</span> |             <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span> | ||||||
|           </li> |           </li> | ||||||
|       </ul> |       </ul> | ||||||
|     </li> |     </li> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user