2
0
mirror of https://github.com/frappe/books.git synced 2024-12-23 19:39:07 +00:00

fix: add grouped dropdown for export, add reset filter in Report.vue

This commit is contained in:
18alantom 2021-12-21 11:38:31 +05:30 committed by Alan
parent c4c5ef3a9f
commit 791d276f9d
2 changed files with 56 additions and 15 deletions

View File

@ -6,8 +6,15 @@
right right
> >
<template v-slot="{ toggleDropdown }"> <template v-slot="{ toggleDropdown }">
<Button class="text-gray-900" :icon="true" @click="toggleDropdown()"> <Button
<feather-icon name="more-horizontal" class="w-4 h-4" /> class="text-gray-900"
:type="type"
:icon="true"
@click="toggleDropdown()"
>
<slot>
<feather-icon name="more-horizontal" class="w-4 h-4" />
</slot>
</Button> </Button>
</template> </template>
</Dropdown> </Dropdown>
@ -19,10 +26,13 @@ import Button from '@/components/Button';
export default { export default {
name: 'DropdownWithActions', name: 'DropdownWithActions',
props: ['actions'], props: {
actions: { default: [] },
type: { type: String, default: 'secondary' },
},
components: { components: {
Dropdown, Dropdown,
Button Button,
} },
}; };
</script> </script>

View File

@ -3,15 +3,17 @@
<PageHeader> <PageHeader>
<h1 slot="title" class="text-2xl font-bold">{{ report.title }}</h1> <h1 slot="title" class="text-2xl font-bold">{{ report.title }}</h1>
<template slot="actions"> <template slot="actions">
<Button <DropdownWithActions
@click="link.action(reportData, filters)" v-for="group of actionGroups"
v-for="link of report.linkFields" @click="group.action(reportData, filters)"
:key="link.label" :key="group.label"
:type="link.type" :type="group.type"
:actions="group.actions"
class="ml-2 text-xs" class="ml-2 text-xs"
> >
{{ link.label }} {{ group.label }}
</Button> </DropdownWithActions>
<DropdownWithActions class="ml-2" :actions="actions" />
<SearchBar class="ml-2" /> <SearchBar class="ml-2" />
</template> </template>
</PageHeader> </PageHeader>
@ -25,7 +27,7 @@
v-for="df in report.filterFields" v-for="df in report.filterFields"
:key="df.fieldname" :key="df.fieldname"
> >
<div v-if="df.fieldtype === 'Check'" class="text-gray-900 text-sm"> <div v-if="df.fieldtype === 'Check'" class="text-sm">
{{ df.label }} {{ df.label }}
</div> </div>
<FormControl <FormControl
@ -34,7 +36,6 @@
:df="df" :df="df"
:value="filters[df.fieldname]" :value="filters[df.fieldname]"
@change="(value) => onFilterChange(df, value)" @change="(value) => onFilterChange(df, value)"
:show-label="df.fieldtype === 'Check'"
/> />
</div> </div>
</div> </div>
@ -101,6 +102,7 @@ import SearchBar from '@/components/SearchBar';
import Row from '@/components/Row'; import Row from '@/components/Row';
import WithScroll from '@/components/WithScroll'; import WithScroll from '@/components/WithScroll';
import FormControl from '@/components/Controls/FormControl'; import FormControl from '@/components/Controls/FormControl';
import DropdownWithActions from '../components/DropdownWithActions.vue';
import reportViewConfig from '@/../reports/view'; import reportViewConfig from '@/../reports/view';
export default { export default {
@ -113,6 +115,7 @@ export default {
Row, Row,
FormControl, FormControl,
WithScroll, WithScroll,
DropdownWithActions,
}, },
provide() { provide() {
return { return {
@ -210,6 +213,11 @@ export default {
this.fetchReportData(); this.fetchReportData();
}, },
async resetFilters() {
await this.setDefaultFilters();
await this.fetchReportData();
},
async setDefaultFilters() { async setDefaultFilters() {
for (let df of this.report.filterFields) { for (let df of this.report.filterFields) {
let defaultValue = null; let defaultValue = null;
@ -273,6 +281,29 @@ export default {
}, },
}, },
computed: { computed: {
actions() {
return [
...(this.report.actions?.filter((action) => !action.group)??[]),
{
label: this._('Reset Filters'),
action: this.resetFilters,
},
];
},
actionGroups() {
const groups =
this.report.actions
?.filter((action) => action.group)
.reduce((acc, action) => {
acc[action.group] ??= { type: action.type, actions: [] };
const actionWithoutGroup = Object.assign({}, action);
delete actionWithoutGroup.group;
acc[action.group].actions.push(actionWithoutGroup);
return acc;
}, {}) ?? {};
return Object.keys(groups).map((label) => ({ label, ...groups[label] }));
},
columns() { columns() {
return this.loading return this.loading
? this.blankStateData.columns ? this.blankStateData.columns