From ad3c0581d734adefd3adb3dce0a85cd80a2d5950 Mon Sep 17 00:00:00 2001 From: Ariunzaya <91462097+ariunzayarin@users.noreply.github.com> Date: Tue, 17 Oct 2023 19:14:43 +0800 Subject: [PATCH] fix(cards): Show forecast preview in Sales pipeline (#4683) --- .../src/deals/components/CalendarColumn.tsx | 129 +++++------------ .../src/boards/components/MainActionBar.tsx | 20 +-- .../src/boards/components/stage/Stage.tsx | 47 ++---- .../ui-cards/src/boards/containers/Stage.tsx | 9 +- packages/ui-cards/src/boards/styles/stage.ts | 21 +-- packages/ui-cards/src/boards/utils.tsx | 19 +-- .../src/deals/components/DealItem.tsx | 46 ++---- .../components/ItemProductProbabilities.tsx | 134 ++++++++++++++++++ 8 files changed, 213 insertions(+), 212 deletions(-) create mode 100644 packages/ui-cards/src/deals/components/ItemProductProbabilities.tsx diff --git a/packages/plugin-cards-ui/src/deals/components/CalendarColumn.tsx b/packages/plugin-cards-ui/src/deals/components/CalendarColumn.tsx index 6a005cd162..ee7e8992bd 100644 --- a/packages/plugin-cards-ui/src/deals/components/CalendarColumn.tsx +++ b/packages/plugin-cards-ui/src/deals/components/CalendarColumn.tsx @@ -13,7 +13,7 @@ import styled from 'styled-components'; import options from '@erxes/ui-cards/src/deals/options'; import { IDeal, IDealTotalAmount } from '@erxes/ui-cards/src/deals/types'; import Deal from '@erxes/ui-cards/src/deals/components/DealItem'; -import styledTS from 'styled-components-ts'; +import ItemProductProbabilities from '@erxes/ui-cards/src/deals/components/ItemProductProbabilities'; type Props = { deals: IDeal[]; @@ -23,23 +23,12 @@ type Props = { onLoadMore: (skip: number) => void; }; -const Amount = styledTS<{ showAll: boolean }>(styled.ul)` +const Amount = styled.ul` list-style: none; overflow: hidden; margin: 0 0 5px; padding: 0 16px; - ${props => - props.showAll === false - ? ` - height: 20px; - overflow: hidden; - transition: all 300ms ease-out; - ` - : ` - height: unset; - `} - li { padding-right: 5px; font-size: 12px; @@ -113,101 +102,47 @@ class DealColumn extends React.Component { renderTotalAmount() { const { dealTotalAmounts, deals } = this.props; - const totalForType = dealTotalAmounts || []; - - const forecastArray = []; - const totalAmountArray = []; + const totalForType = dealTotalAmounts || ([] as IDealTotalAmount[]); - dealTotalAmounts.map(total => - total.currencies.map(currency => totalAmountArray.push(currency)) - ); - - this.props.deals.map(deal => { - const probability = - deal.stage.probability === 'Won' - ? '100%' - : deal.stage.probability === 'Lost' - ? '0%' - : deal.stage.probability; - - Object.keys(deal.amount).map(key => - forecastArray.push({ - name: key, - amount: deal.amount[key] as number, - probability: parseInt(probability, 10) - }) - ); - }); - - const detail = () => { + const renderDetail = () => { if (!deals || deals.length === 0) { return null; } + if ( + localStorage.getItem('showSalesDetail') === 'false' || + !localStorage.getItem('showSalesDetail') + ) { + return null; + } + return ( <> -
  • - Total ({deals.length}): - {this.renderPercentedAmount(totalAmountArray)} -
    • -
  • - Forecasted: - {this.renderPercentedAmount(forecastArray)} -
    • + + {totalForType.map(type => { + if (type.name === 'In progress') { + return null; + } + + const percent = type.name === 'Won' ? '100%' : '0%'; + + return ( +
  • + + {type.name} ({percent}){' '} + + {this.renderAmount(type.currencies)} +
    • + ); + })} ); }; - return ( - - {detail()} - {totalForType.map(type => { - if (type.name === 'In progress') { - return null; - } - - const percent = type.name === 'Won' ? '100%' : '0%'; - - return ( -
  • - - {type.name} ({percent}):{' '} - - {this.renderAmount(type.currencies)} -
    • - ); - })} -     - ); - } - - renderPercentedAmount(currencies) { - const sumByName = {}; - - currencies.forEach(item => { - const { name, amount, probability = 100 } = item; - if (sumByName[name] === undefined) { - sumByName[name] = (amount * probability) / 100; - } else { - sumByName[name] += (amount * probability) / 100; - } - }); - - return Object.keys(sumByName).map((key, index) => ( -
    - {sumByName[key].toLocaleString(undefined, { - maximumFractionDigits: 0 - })}{' '} - - {key} - {index < Object.keys(sumByName).length - 1 && ','}  - -
    - )); + return {renderDetail()}; } renderFooter() { diff --git a/packages/ui-cards/src/boards/components/MainActionBar.tsx b/packages/ui-cards/src/boards/components/MainActionBar.tsx index 9bfe379868..c3e66efd60 100644 --- a/packages/ui-cards/src/boards/components/MainActionBar.tsx +++ b/packages/ui-cards/src/boards/components/MainActionBar.tsx @@ -67,7 +67,10 @@ class MainActionBar extends React.Component { constructor(props: Props) { super(props); - this.state = { showDetail: false }; + this.state = { + showDetail: + localStorage.getItem('showSalesDetail') === 'true' ? true : false + }; } renderBoards() { @@ -267,12 +270,12 @@ class MainActionBar extends React.Component { const type = options.type; localStorage.setItem(`${type}View`, `${viewType}`); - const onFilterClick = (type: string) => { + const onFilterClick = (option: string) => { if (currentBoard && currentPipeline) { - return `/${options.type}/${type}?id=${currentBoard._id}&pipelineId=${currentPipeline._id}`; + return `/${options.type}/${option}?id=${currentBoard._id}&pipelineId=${currentPipeline._id}`; } - return `/${options.type}/${type}`; + return `/${options.type}/${option}`; }; return ( @@ -382,10 +385,7 @@ class MainActionBar extends React.Component { }; renderSalesDetail = () => { - if ( - window.location.pathname.includes('deal/board') || - window.location.pathname.includes('deal/calendar') - ) { + if (window.location.pathname.includes('deal/calendar')) { return (