Rewrite categories to be nested below groups
This commit is contained in:
@ -15,13 +15,15 @@ const budgetsStore = useBudgetsStore();
|
||||
const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);
|
||||
|
||||
const accountStore = useAccountStore();
|
||||
const categoriesForMonth = accountStore.CategoriesForMonth;
|
||||
const Categories = computed(() => {
|
||||
return [...categoriesForMonth(selected.value.Year, selected.value.Month)];
|
||||
});
|
||||
const hiddenCategoriesForMonth = accountStore.HiddenCategoriesForMonth;
|
||||
const HiddenCategories = computed(() => {
|
||||
return [...hiddenCategoriesForMonth(selected.value.Year, selected.value.Month)];
|
||||
const categoriesForMonth = accountStore.CategoriesForMonthAndGroup;
|
||||
|
||||
function GetCategories(group : string) {
|
||||
return [...categoriesForMonth(selected.value.Year, selected.value.Month, group)];
|
||||
};
|
||||
|
||||
const groupsForMonth = accountStore.CategoryGroupsForMonth;
|
||||
const GroupsForMonth = computed(() => {
|
||||
return [...groupsForMonth(selected.value.Year, selected.value.Month)];
|
||||
});
|
||||
|
||||
|
||||
@ -67,7 +69,6 @@ onMounted(() => {
|
||||
</div>
|
||||
<table class="container col-lg-12" id="content">
|
||||
<tr>
|
||||
<th>Group</th>
|
||||
<th>Category</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
@ -76,41 +77,25 @@ onMounted(() => {
|
||||
<th>Activity</th>
|
||||
<th>Available</th>
|
||||
</tr>
|
||||
<tr v-for="category in Categories">
|
||||
<td>{{ category.Group }}</td>
|
||||
<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>
|
||||
<tr v-for="category in HiddenCategories">
|
||||
<td>{{ category.Group }}</td>
|
||||
<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>
|
||||
<tbody v-for="group in GroupsForMonth">
|
||||
<p class="text-lg font-bold">{{ group }}</p>
|
||||
<tr v-for="category in GetCategories(group)">
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
Reference in New Issue
Block a user