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

Use grid instead of table

Browse Source
This commit is contained in:
Jan Bader 2022-03-01 08:36:03 +00:00
parent 18149eef8b
commit 6dd8a3791f
1 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);
const accountStore = useAccountStore(); const accountStore = useAccountStore();
const categoriesForMonth = accountStore.CategoriesForMonthAndGroup; const categoriesForMonth = accountStore.CategoriesForMonthAndGroup;
function GetCategories(group : string) { function GetCategories(group: string) {
return [...categoriesForMonth(selected.value.Year, selected.value.Month, group)]; return [...categoriesForMonth(selected.value.Year, selected.value.Month, group)];
}; };
@ -28,20 +28,20 @@ const GroupsForMonth = computed(() => {
const previous = computed(() => ({ const previous = computed(() => ({
Year: new Date(selected.value.Year, selected.value.Month - 1, 1).getFullYear(), Year: new Date(selected.value.Year, selected.value.Month - 1, 1).getFullYear(),
Month: new Date(selected.value.Year, selected.value.Month - 1, 1).getMonth(), Month: new Date(selected.value.Year, selected.value.Month - 1, 1).getMonth(),
})); }));
const current = computed(() => ({ const current = computed(() => ({
Year: new Date().getFullYear(), Year: new Date().getFullYear(),
Month: new Date().getMonth(), Month: new Date().getMonth(),
})); }));
const selected = computed(() => ({ const selected = computed(() => ({
Year: Number(props.year) ?? current.value.Year, Year: Number(props.year) ?? current.value.Year,
Month: Number(props.month ?? current.value.Month) Month: Number(props.month ?? current.value.Month)
})); }));
const next = computed(() => ({ const next = computed(() => ({
Year: new Date(selected.value.Year, Number(props.month) + 1, 1).getFullYear(), Year: new Date(selected.value.Year, Number(props.month) + 1, 1).getFullYear(),
Month: new Date(selected.value.Year, Number(props.month) + 1, 1).getMonth(), Month: new Date(selected.value.Year, Number(props.month) + 1, 1).getMonth(),
})); }));
watchEffect(() => { watchEffect(() => {
@ -56,12 +56,12 @@ onMounted(() => {
const expandedGroups = ref<Map<string, boolean>>(new Map<string, boolean>()) const expandedGroups = ref<Map<string, boolean>>(new Map<string, boolean>())
function toggleGroup(group : {Name : string, Expand: boolean}) { function toggleGroup(group: { Name: string, Expand: boolean }) {
console.log(expandedGroups.value); console.log(expandedGroups.value);
expandedGroups.value.set(group.Name, !(expandedGroups.value.get(group.Name) ?? group.Expand)) expandedGroups.value.set(group.Name, !(expandedGroups.value.get(group.Name) ?? group.Expand))
} }
function getGroupState(group : {Name : string, Expand: boolean}) : boolean { function getGroupState(group: { Name: string, Expand: boolean }): boolean {
return expandedGroups.value.get(group.Name) ?? group.Expand; return expandedGroups.value.get(group.Name) ?? group.Expand;
} }
</script> </script>
@ -79,31 +79,24 @@ function getGroupState(group : {Name : string, Expand: boolean}) : boolean {
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month" :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
>Next Month</router-link> >Next Month</router-link>
</div> </div>
<table class="container col-lg-12" id="content"> <div class="container col-lg-12 grid grid-cols-4 md:grid-cols-5" id="content">
<tr> <span>Category</span>
<th>Category</th> <span class="hidden md:block">Leftover</span>
<th class="hidden md:block">Leftover</th> <span>Assigned</span>
<th>Assigned</th> <span>Activity</span>
<th>Activity</th> <span>Available</span>
<th>Available</th> <template v-for="group in GroupsForMonth">
</tr> <a
<tbody v-for="group in GroupsForMonth"> class="text-lg font-bold col-span-4 md:col-span-5"
<tr><td><a class="text-lg font-bold" colspan="4" @click="toggleGroup(group)">{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a></td></tr> @click="toggleGroup(group)"
<tr v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)"> >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a>
<td>{{ category.Name }}</td> <template v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
<td class="text-right hidden md:block"> <span>{{ category.Name }}</span>
<Currency :value="category.AvailableLastMonth" /> <Currency :value="category.AvailableLastMonth" />
</td> <Currency :value="category.Assigned" />
<td class="text-right"> <Currency :value="category.Activity" />
<Currency :value="category.Assigned" /> <Currency :value="category.Available" />
</td> </template>
<td class="text-right"> </template>
<Currency :value="category.Activity" /> </div>
</td>
<td class="text-right">
<Currency :value="category.Available" />
</td>
</tr>
</tbody>
</table>
</template> </template>