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:
parent
c4c5ef3a9f
commit
791d276f9d
@ -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>
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user