feat(fusion_accounting_reports): period_filter component (date range + comparison)

Made-with: Cursor

fusion_accounting_reports/static/src/components/period_filter/period_filter.js

@@ -0,0 +1,37 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+
+export class PeriodFilter extends Component {
+    static template = "fusion_accounting_reports.PeriodFilter";
+    static props = {};
+
+    setup() {
+        this.reports = useService("fusion_reports");
+        this.state = useState(this.reports.state);
+    }
+
+    async onReportTypeChange(ev) {
+        const reportType = ev.target.value;
+        if (reportType && this.state.dateFrom && this.state.dateTo) {
+            await this.reports.runReport(
+                reportType, this.state.dateFrom, this.state.dateTo,
+                this.state.comparison);
+        }
+    }
+
+    async onDateChange(field, ev) {
+        this.state[field] = ev.target.value;
+        if (this.state.currentReportType && this.state.dateFrom && this.state.dateTo) {
+            await this.reports.runReport(
+                this.state.currentReportType,
+                this.state.dateFrom, this.state.dateTo,
+                this.state.comparison);
+        }
+    }
+
+    async onComparisonChange(ev) {
+        await this.reports.setComparison(ev.target.value);
+    }
+}

fusion_accounting_reports/static/src/components/period_filter/period_filter.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="fusion_accounting_reports.PeriodFilter">
+    <div class="o_fusion_reports_filters">
+        <select t-on-change="onReportTypeChange"
+                class="form-select" style="max-width: 240px;">
+            <option value="">— Select report —</option>
+            <option t-foreach="state.availableReports" t-as="r" t-key="r.id"
+                    t-att-value="r.report_type"
+                    t-att-selected="r.report_type === state.currentReportType">
+                <t t-esc="r.name"/>
+            </option>
+        </select>
+
+        <label>From</label>
+        <input type="date" class="form-control" style="max-width: 160px;"
+               t-att-value="state.dateFrom || ''"
+               t-on-change="(ev) => onDateChange('dateFrom', ev)"/>
+
+        <label>To</label>
+        <input type="date" class="form-control" style="max-width: 160px;"
+               t-att-value="state.dateTo || ''"
+               t-on-change="(ev) => onDateChange('dateTo', ev)"/>
+
+        <label>Comparison</label>
+        <select class="form-select" style="max-width: 200px;"
+                t-on-change="onComparisonChange">
+            <option value="none" t-att-selected="state.comparison === 'none'">None</option>
+            <option value="previous_period"
+                    t-att-selected="state.comparison === 'previous_period'">Previous Period</option>
+            <option value="previous_year"
+                    t-att-selected="state.comparison === 'previous_year'">Previous Year</option>
+        </select>
+
+        <span t-if="state.isLoading" class="text-muted ms-3">Loading...</span>
+    </div>
+</t>
+
+</templates>