jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Rewrite categories to be nested below groups
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Jan Bader 2022-02-23 14:10:54 +00:00
parent f93888cbbc
commit 510c91205d
2 changed files with 49 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/src/pages/Budgeting.vue
View File

@ -15,13 +15,15 @@ const budgetsStore = useBudgetsStore();
const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID); const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);
const accountStore = useAccountStore(); const accountStore = useAccountStore();
const categoriesForMonth = accountStore.CategoriesForMonth; const categoriesForMonth = accountStore.CategoriesForMonthAndGroup;
const Categories = computed(() => {
return [...categoriesForMonth(selected.value.Year, selected.value.Month)]; function GetCategories(group : string) {
}); return [...categoriesForMonth(selected.value.Year, selected.value.Month, group)];
const hiddenCategoriesForMonth = accountStore.HiddenCategoriesForMonth; };
const HiddenCategories = computed(() => {
return [...hiddenCategoriesForMonth(selected.value.Year, selected.value.Month)]; const groupsForMonth = accountStore.CategoryGroupsForMonth;
const GroupsForMonth = computed(() => {
return [...groupsForMonth(selected.value.Year, selected.value.Month)];
}); });
@ -67,7 +69,6 @@ onMounted(() => {
</div> </div>
<table class="container col-lg-12" id="content"> <table class="container col-lg-12" id="content">
<tr> <tr>
<th>Group</th>
<th>Category</th> <th>Category</th>
<th></th> <th></th>
<th></th> <th></th>
@ -76,41 +77,25 @@ onMounted(() => {
<th>Activity</th> <th>Activity</th>
<th>Available</th> <th>Available</th>
</tr> </tr>
<tr v-for="category in Categories"> <tbody v-for="group in GroupsForMonth">
<td>{{ category.Group }}</td> <p class="text-lg font-bold">{{ group }}</p>
<td>{{ category.Name }}</td> <tr v-for="category in GetCategories(group)">
<td></td> <td>{{ category.Name }}</td>
<td></td> <td></td>
<td class="text-right"> <td></td>
<Currency :value="category.AvailableLastMonth" /> <td class="text-right">
</td> <Currency :value="category.AvailableLastMonth" />
<td class="text-right"> </td>
<Currency :value="category.Assigned" /> <td class="text-right">
</td> <Currency :value="category.Assigned" />
<td class="text-right"> </td>
<Currency :value="category.Activity" /> <td class="text-right">
</td> <Currency :value="category.Activity" />
<td class="text-right"> </td>
<Currency :value="category.Available" /> <td class="text-right">
</td> <Currency :value="category.Available" />
</tr> </td>
<tr v-for="category in HiddenCategories"> </tr>
<td>{{ category.Group }}</td> </tbody>
<td>{{ category.Name }}</td>
<td></td>
<td></td>
<td class="text-right">
<Currency :value="category.AvailableLastMonth" />
</td>
<td class="text-right">
<Currency :value="category.Assigned" />
</td>
<td class="text-right">
<Currency :value="category.Activity" />
</td>
<td class="text-right">
<Currency :value="category.Available" />
</td>
</tr>
</table> </table>
</template> </template>

28
web/src/stores/budget-account.ts
View File

@ -54,17 +54,29 @@ export const useAccountStore = defineStore("budget/account", {
AccountsList(state) { AccountsList(state) {
return [...state.Accounts.values()]; return [...state.Accounts.values()];
}, },
CategoriesForMonth: (state) => (year: number, month: number) => { AllCategoriesForMonth: (state) => (year: number, month: number) => {
const yearMap = state.Months.get(year); const yearMap = state.Months.get(year);
const monthMap = yearMap?.get(month); const monthMap = yearMap?.get(month);
console.log("MTH", monthMap) return [...monthMap?.values() || []];
return [...monthMap?.values() || []].filter(x => x.Group != "Hidden Categories");
}, },
HiddenCategoriesForMonth: (state) => (year: number, month: number) => { CategoryGroupsForMonth(state) {
const yearMap = state.Months.get(year); return (year: number, month: number) => {
const monthMap = yearMap?.get(month); const categories = this.AllCategoriesForMonth(year, month);
console.log("MTH", monthMap) const categoryGroups = [];
return [...monthMap?.values() || []].filter(x => x.Group == "Hidden Categories"); let prev = undefined;
for (const category of categories) {
if(category.Group != prev)
categoryGroups.push(category.Group);
prev = category.Group;
}
return categoryGroups;
}
},
CategoriesForMonthAndGroup(state) {
return (year: number, month: number, group : string) => {
const categories = this.AllCategoriesForMonth(year, month);
return categories.filter(x => x.Group == group);
}
}, },
CurrentAccount(state): Account | undefined { CurrentAccount(state): Account | undefined {
if (state.CurrentAccountID == null) if (state.CurrentAccountID == null)