diff --git a/addons/website_sale/__manifest__.py b/addons/website_sale/__manifest__.py index cbbb918dc930d..88cd2b24812d4 100644 --- a/addons/website_sale/__manifest__.py +++ b/addons/website_sale/__manifest__.py @@ -161,6 +161,10 @@ 'website_sale/static/src/scss/kanban_record.scss', 'website_sale/static/src/js/website_sale_dashboard/**/*', 'website_sale/static/src/views/**/*', + ('remove', 'website_sale/static/src/js/website_sale_dashboard/**/*.dark.scss'), + ], + "web.assets_web_dark": [ + 'website_sale/static/src/js/website_sale_dashboard/**/*.dark.scss', ], 'website.website_builder_assets': [ 'website_sale/static/src/js/website_sale_form_editor.js', diff --git a/addons/website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.js b/addons/website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.js index 1bfdc38a9c443..72a3b644c0849 100644 --- a/addons/website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.js +++ b/addons/website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.js @@ -26,7 +26,7 @@ export class DateFilterButton extends Component { static template = 'website_sale.DateFilterButton'; static components = { Dropdown, DropdownItem }; static props = { - selectedFilter: { + selectedDateFilter: { type: Object, optional: true, shape: { diff --git a/addons/website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.xml b/addons/website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.xml index 49ecebaa8b03c..8b9e025a9bf92 100644 --- a/addons/website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.xml +++ b/addons/website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.xml @@ -1,16 +1,17 @@ - - diff --git a/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.dark.scss b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.dark.scss new file mode 100644 index 0000000000000..7b5f087804e2d --- /dev/null +++ b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.dark.scss @@ -0,0 +1,8 @@ +.o_dashboard_card { + --DashboardCard__purple-bg-color: #{$purple-200}; + --DashboardCard__purple-bg-color--active: #{$purple-300}; + --DashboardCard__orange-bg-color: #{$orange-200}; + --DashboardCard__orange-bg-color--active: #{$orange-300}; + --DashboardCard__cyan-bg-color: #{$cyan-200}; + --DashboardCard__cyan-bg-color--active: #{$cyan-300}; +} diff --git a/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js index c181f5f7b1341..a68d4b676f9ad 100644 --- a/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js +++ b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js @@ -1,4 +1,4 @@ -import { useService } from '@web/core/utils/hooks'; +import { useService, useBus } from '@web/core/utils/hooks'; import { Component, onWillStart, onWillUpdateProps, useState } from '@odoo/owl'; import { DateFilterButton, DATE_OPTIONS } from './date_filter_button/date_filter_button'; @@ -10,10 +10,17 @@ export class WebsiteSaleDashboard extends Component { setup() { this.state = useState({ eCommerceData: {}, - selectedFilter: DATE_OPTIONS[0], + selectedDateFilter: DATE_OPTIONS[0], + selectedFilter: [], }); this.orm = useService('orm'); + useBus(this.env.searchModel, 'update', () => { + if(!this.isSameFilter(this.state.selectedFilter)) { + this.state.selectedFilter = null; + } + }); + onWillStart(async () => { await this.updateDashboardState(); }); @@ -24,10 +31,10 @@ export class WebsiteSaleDashboard extends Component { async updateDashboardState(filter = false) { if (filter) { - this.state.selectedFilter = filter; + this.state.selectedDateFilter = filter; } this.state.eCommerceData = await this.orm.call('sale.order', 'retrieve_dashboard', [ - this.state.selectedFilter.id, + this.state.selectedDateFilter.id, ]); } @@ -45,6 +52,15 @@ export class WebsiteSaleDashboard extends Component { for (const item of searchItems) { this.env.searchModel.toggleSearchItem(item.id); } + this.state.selectedFilter = filters; + } + + isSameFilter(filters) { + if (!filters) { + return false; + } + const activeSearchFilterNames = this.env.searchModel.getSearchItems(el => el.isActive && el.type === 'filter')?.map(el => el.name).sort(); + return filters.length === activeSearchFilterNames?.length && filters.sort().every((val, i) => val === activeSearchFilterNames[i]); } getPeriodCardClass(dataName) { @@ -53,6 +69,26 @@ export class WebsiteSaleDashboard extends Component { } else if (this.state.eCommerceData['period_gain'][dataName] < 0) { return 'text-danger'; } - return 'text-muted'; + return ''; + } + + getDashboardCardAdditionalClass(filterName) { + const dashboardCardColor = { + 'to_fulfill': 'purple', + 'to_confirm': 'orange', + 'to_invoice': 'cyan', + }; + let dashboardCardClasses = []; + const noData = this.state.eCommerceData['overall'][filterName] == 0; + if(noData) { + dashboardCardClasses.push('bg-secondary text-secondary-emphasis disabled'); + } else { + dashboardCardClasses.push('o_dashboard_card_' + dashboardCardColor[filterName]); + } + const filters = filterName == 'to_confirm' ? [filterName, 'from_website'] : [filterName, 'from_website','order_confirmed']; + if(this.isSameFilter(filters)) { + dashboardCardClasses.push('active'); + } + return dashboardCardClasses.join(' '); } } diff --git a/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.scss b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.scss index 60c145f3c459a..e2d4233e069a2 100644 --- a/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.scss +++ b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.scss @@ -1,73 +1,92 @@ .o_dashboard_card { - min-width: 120px; - min-height: 90px; - align-content: center; -} + // flex-basis: 33%; -.o_purple_card { - background-color: $purple-300; -} + // @include media-breakpoint-up(md) { + // max-width: 8rem; + // } -.o_orange_card { - background-color: $orange-300; -} + $dashboard-colors: ( + purple: ( + bg: var(--DashboardCard__purple-bg-color, #{$purple-100}), + bg-active: var(--DashboardCard__purple-bg-color--active, #{$purple-200}), + color: var(--DashboardCard__purple-color, #{$purple-600}), + color-active: var(--DashboardCard__purple-color--active, #{$purple-800}), + ), + cyan: ( + bg: var(--DashboardCard__cyan-bg-color, #{$cyan-100}), + bg-active: var(--DashboardCard__cyan-bg-color--active, #{$cyan-200}), + color: var(--DashboardCard__cyan-color, #{$cyan-700}), + color-active: var(--DashboardCard__cyan-color--active, #{$cyan-800}), + ), + orange: ( + bg: var(--DashboardCard__orange-bg-color, #{$orange-100}), + bg-active: var(--DashboardCard__orange-bg-color--active, #{$orange-200}), + color: var(--DashboardCard__orange-color, #{$orange-700}), + color-active: var(--DashboardCard__orange-color--active, #{$orange-800}), + ), + ); -.o_blue_card { - background-color: $blue-300; -} + @each $name, $states in $dashboard-colors { + &.o_dashboard_card_#{$name} { + --btn-bg: #{map-get($states, bg)}; + --btn-hover-bg: #{map-get($states, bg-active)}; + --btn-active-bg: #{map-get($states, bg-active)}; + --btn-active-border-color: transparent; -@media (max-width: 768px) { - .o_website_sale_dashboard { - flex-direction: column !important; - align-items: center !important; - justify-content: center !important; - gap: 1.5rem !important; - } + .o_dashboard_card_data { + color: #{map-get($states, color)}; + } - /* Left Section: 3 cards in one row */ - .o_left_section { - flex-direction: row !important; - justify-content: center !important; - flex-wrap: wrap !important; - gap: 1rem !important; - } + &.active { + outline: $border-width $border-style #{map-get($states, color-active)}; + outline-offset: $border-width; - /* Right Section: DateFilterButton first, then metrics in one row */ - .o_right_section { - flex-direction: column !important; - align-items: center !important; - justify-content: center !important; - gap: 1rem !important; + .o_dashboard_card_data { + color: #{map-get($states, color-active)}; + } + } + } } +} - .o_date_filter_wrapper { - order: -1; - justify-content: center !important; - width: 100% !important; - margin-bottom: 0.5rem !important; - } +.o_dashboard_card_evolution { + font-size: .75rem; +} - .o_cards_container { - flex-direction: row !important; - justify-content: center !important; - flex-wrap: wrap !important; - gap: 0.8rem !important; +.o_date_filter_wrapper { + @include media-breakpoint-up(md) { + border-right: $border-width $border-style $border-color; + background: transparent !important; } +} - /* Card Sizing */ - .o_dashboard_card { - width: 90px !important; - max-width: 130px !important; - text-align: center !important; - } +.o_website_sale_dashboard { + background-color: $o-control-panel-background-color; - /* Font Adjustments */ - .o_dashboard_card_data { - font-size: 1.1rem !important; + @include media-breakpoint-up(md) { + border-bottom: $border-width $border-style $border-color; } - .o_dashboard_card_text { - margin-top: 4px; - font-size: 0.7rem !important; + .o_kanban_renderer { + &.o_kanban_grouped, &.o_kanban_ungrouped { + min-height: auto; // override min-height: 100% + } } } + +// html .o_web_client > .o_action_manager > [class*="o_website_sale_dashboard"] { +// .o_content { +// height: calc(100% - 4rem); +// } + +// .o_renderer { +// @include media-breakpoint-up(lg) { +// height: calc(100% - 6.75rem); +// min-height: calc(100% - 6.75rem); +// } + +// height: calc(100% - 6rem); +// min-height: calc(100% - 6rem); +// overflow: auto; +// } +// } diff --git a/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml index 54818b316c85f..23c36e239414d 100644 --- a/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml +++ b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml @@ -1,85 +1,98 @@ -
+
-
-
+
+ + To Fulfill + -
- -

-

To Confirm

- -
+ + To Confirm + -
- -

-

To Invoice

- -
+ + To Invoice +
-
-
- +
+
+
-
+
-
-

- -

-
Visitors
+
+ Visitors +
+ + + + + % + +
-
-

- -

-
Orders
+
+ Orders +
+ + + + + % + +
-
-

- $ -

-
Sales
+
+ Sales +
+ + $ + + + % + +
diff --git a/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard_list_view.scss b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard_list_view.scss new file mode 100644 index 0000000000000..c748e8ac7d021 --- /dev/null +++ b/addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard_list_view.scss @@ -0,0 +1,7 @@ +.o_website_sale_dashboard_list_view { + @include media-breakpoint-down(md) { + .o_control_panel { + border-bottom: none; + } + } +}