From 5679295d2ffe351aab1a64753ee4d33dca71399e Mon Sep 17 00:00:00 2001 From: EvgeniySobolev <106957687+EvgeniySobolev@users.noreply.github.com> Date: Fri, 16 Sep 2022 11:25:17 +0300 Subject: [PATCH] feat(FOROME-1632): change a request for included/excluded variants (#946) * feat(FOROME-1632): disable modal buttons on dashboard * feat(FOROME-1632): change step index for request * feat(FOROME-1632): move condition to store --- .../compound-het-dialog.tsx | 5 ++- .../compound-request-dialog.tsx | 4 ++- .../custom-inheritance-mode-dialog.tsx | 4 ++- .../components/enum-dialog/enum-dialog.tsx | 5 ++- .../gene-region-dialog/gene-region-dialog.tsx | 5 ++- .../inheritance-mode-dialog.tsx | 5 ++- .../numeric-dialog/numeric-dialog.tsx | 4 +++ .../query-builder/ui/final-step.tsx | 5 ++- .../query-builder/ui/inactive-field-label.tsx | 5 ++- .../ui/next-step/content-item-header.tsx | 5 ++- .../ui/next-step/next-step-content.tsx | 5 ++- .../next-step-route/next-step-route.tsx | 9 ++--- .../query-builder/ui/next-step/next-step.tsx | 5 ++- src/store/dtree/dtree.store.ts | 19 +++++++++- src/store/dtree/step.store.ts | 36 +++++++++++++++---- 15 files changed, 99 insertions(+), 22 deletions(-) diff --git a/src/pages/filter/dtree/components/modals/components/compound-het-dialog/compound-het-dialog.tsx b/src/pages/filter/dtree/components/modals/components/compound-het-dialog/compound-het-dialog.tsx index 308aa0521..4a7b6d273 100644 --- a/src/pages/filter/dtree/components/modals/components/compound-het-dialog/compound-het-dialog.tsx +++ b/src/pages/filter/dtree/components/modals/components/compound-het-dialog/compound-het-dialog.tsx @@ -1,6 +1,7 @@ import { ReactElement, useCallback } from 'react' import { observer } from 'mobx-react-lite' +import dtreeStore from '@store/dtree' import { Dialog } from '@ui/dialog' import { CompoundHetCondition } from '@components/conditions/compound-het-condition' import { AttributeKinds } from '@service-providers/common' @@ -20,6 +21,8 @@ export const CompoundHetDialog = observer( attributeSubKind, } = funcStore + const { isOnDashboard } = dtreeStore + const { currentStepGroups } = modalsControlStore const handleModals = () => { @@ -75,7 +78,7 @@ export const CompoundHetDialog = observer( currentStepGroups, onClose: modalsVisibilityStore.closeCompoundHetDialog, handleModals, - disabled: hasErrors, + disabled: hasErrors || isOnDashboard, saveAttribute: () => handleSaveChanges(mode, param), addAttribute: action => handleAddAttribute(action, mode, param), }) diff --git a/src/pages/filter/dtree/components/modals/components/compound-request-dialog/compound-request-dialog.tsx b/src/pages/filter/dtree/components/modals/components/compound-request-dialog/compound-request-dialog.tsx index 4e51373ab..6194e86b8 100644 --- a/src/pages/filter/dtree/components/modals/components/compound-request-dialog/compound-request-dialog.tsx +++ b/src/pages/filter/dtree/components/modals/components/compound-request-dialog/compound-request-dialog.tsx @@ -1,6 +1,7 @@ import { ReactElement, useCallback } from 'react' import { observer } from 'mobx-react-lite' +import dtreeStore from '@store/dtree' import { Dialog } from '@ui/dialog' import { CompoundRequestCondition } from '@components/conditions/compound-request/compound-request-condition' import { AttributeKinds } from '@service-providers/common' @@ -24,6 +25,7 @@ export const CompoundRequestDialog = observer( } = funcStore const { currentStepGroups } = modalsControlStore + const { isOnDashboard } = dtreeStore const handleModals = () => { modalsVisibilityStore.closeCompoundRequestDialog() @@ -82,7 +84,7 @@ export const CompoundRequestDialog = observer( currentStepGroups, onClose: modalsVisibilityStore.closeCompoundRequestDialog, handleModals, - disabled: hasErrors, + disabled: hasErrors || isOnDashboard, saveAttribute: () => handleSaveChanges(mode, param), addAttribute: action => handleAddAttribute(action, mode, param), }) diff --git a/src/pages/filter/dtree/components/modals/components/custom-inheritance-mode-dialog/custom-inheritance-mode-dialog.tsx b/src/pages/filter/dtree/components/modals/components/custom-inheritance-mode-dialog/custom-inheritance-mode-dialog.tsx index 94f269356..de3e08567 100644 --- a/src/pages/filter/dtree/components/modals/components/custom-inheritance-mode-dialog/custom-inheritance-mode-dialog.tsx +++ b/src/pages/filter/dtree/components/modals/components/custom-inheritance-mode-dialog/custom-inheritance-mode-dialog.tsx @@ -1,6 +1,7 @@ import { ReactElement, useCallback } from 'react' import { observer } from 'mobx-react-lite' +import dtreeStore from '@store/dtree' import { Dialog } from '@ui/dialog' import { CustomInheritanceModeCondition } from '@components/conditions/custom-inheritance-mode' import { AttributeKinds } from '@service-providers/common' @@ -23,6 +24,7 @@ export const CustomInheritanceModeDialog = observer( } = funcStore const { currentStepGroups } = modalsControlStore + const { isOnDashboard } = dtreeStore const handleModals = () => { modalsVisibilityStore.closeCustomInheritanceModeDialog() @@ -79,7 +81,7 @@ export const CustomInheritanceModeDialog = observer( currentStepGroups, onClose: modalsVisibilityStore.closeCustomInheritanceModeDialog, handleModals, - disabled: hasErrors, + disabled: hasErrors || isOnDashboard, saveAttribute: () => handleSaveChanges(mode, param), addAttribute: action => handleAddAttribute(action, mode, param), }) diff --git a/src/pages/filter/dtree/components/modals/components/enum-dialog/enum-dialog.tsx b/src/pages/filter/dtree/components/modals/components/enum-dialog/enum-dialog.tsx index 774f1d386..0fb70e65d 100644 --- a/src/pages/filter/dtree/components/modals/components/enum-dialog/enum-dialog.tsx +++ b/src/pages/filter/dtree/components/modals/components/enum-dialog/enum-dialog.tsx @@ -1,6 +1,7 @@ import { ReactElement, useCallback } from 'react' import { observer } from 'mobx-react-lite' +import dtreeStore from '@store/dtree' import { Dialog } from '@ui/dialog' import { DEFAULT_COUNT, EnumCondition } from '@components/conditions/enum' import dashboardStore from '@pages/filter/common/dashboard' @@ -27,6 +28,8 @@ export const EnumDialog = observer( initialCondition, } = attributeStore + const { isOnDashboard } = dtreeStore + const { currentStepGroups } = modalsControlStore const { selectedEnumVariants } = dashboardStore const initialVariants = initialEnumVariants || selectedEnumVariants @@ -100,7 +103,7 @@ export const EnumDialog = observer( currentStepGroups, onClose: modalsVisibilityStore.closeEnumDialog, handleModals, - disabled: value.length === 0, + disabled: value.length === 0 || isOnDashboard, saveAttribute: () => handleSaveChanges(mode, value), addAttribute: action => handleAddAttribute(action, mode, value), }) diff --git a/src/pages/filter/dtree/components/modals/components/gene-region-dialog/gene-region-dialog.tsx b/src/pages/filter/dtree/components/modals/components/gene-region-dialog/gene-region-dialog.tsx index 344e232ae..3e8cb99b0 100644 --- a/src/pages/filter/dtree/components/modals/components/gene-region-dialog/gene-region-dialog.tsx +++ b/src/pages/filter/dtree/components/modals/components/gene-region-dialog/gene-region-dialog.tsx @@ -1,6 +1,7 @@ import { ReactElement, useCallback } from 'react' import { observer } from 'mobx-react-lite' +import dtreeStore from '@store/dtree' import { Dialog } from '@ui/dialog' import { GeneRegionCondition } from '@components/conditions/gene-region-condition/gene-region-condition' import { AttributeKinds } from '@service-providers/common' @@ -20,6 +21,8 @@ export const GeneRegionDialog = observer( attributeSubKind, } = funcStore + const { isOnDashboard } = dtreeStore + const { currentStepGroups } = modalsControlStore const handleModals = () => { @@ -75,7 +78,7 @@ export const GeneRegionDialog = observer( currentStepGroups, onClose: modalsVisibilityStore.closeGeneRegionDialog, handleModals, - disabled: hasErrors, + disabled: hasErrors || isOnDashboard, saveAttribute: () => handleSaveChanges(mode, param), addAttribute: action => handleAddAttribute(action, mode, param), }) diff --git a/src/pages/filter/dtree/components/modals/components/inheritance-mode-dialog/inheritance-mode-dialog.tsx b/src/pages/filter/dtree/components/modals/components/inheritance-mode-dialog/inheritance-mode-dialog.tsx index 540dcb15c..954bafe1d 100644 --- a/src/pages/filter/dtree/components/modals/components/inheritance-mode-dialog/inheritance-mode-dialog.tsx +++ b/src/pages/filter/dtree/components/modals/components/inheritance-mode-dialog/inheritance-mode-dialog.tsx @@ -1,6 +1,7 @@ import { ReactElement, useCallback } from 'react' import { observer } from 'mobx-react-lite' +import dtreeStore from '@store/dtree' import { Dialog } from '@ui/dialog' import { InheritanceModeCondition } from '@components/conditions/inheritance-mode' import { AttributeKinds } from '@service-providers/common' @@ -22,6 +23,8 @@ export const InheritanceModeDialog = observer( attributeSubKind, } = funcStore + const { isOnDashboard } = dtreeStore + const { currentStepGroups } = modalsControlStore const handleModals = () => { @@ -79,7 +82,7 @@ export const InheritanceModeDialog = observer( currentStepGroups, onClose: modalsVisibilityStore.closeInheritanceModeDialog, handleModals, - disabled: hasErrors, + disabled: hasErrors || isOnDashboard, saveAttribute: () => handleSaveChanges(values, mode, param), addAttribute: action => handleAddAttribute(action, values, mode, param), diff --git a/src/pages/filter/dtree/components/modals/components/numeric-dialog/numeric-dialog.tsx b/src/pages/filter/dtree/components/modals/components/numeric-dialog/numeric-dialog.tsx index b93481d1d..2ee060458 100644 --- a/src/pages/filter/dtree/components/modals/components/numeric-dialog/numeric-dialog.tsx +++ b/src/pages/filter/dtree/components/modals/components/numeric-dialog/numeric-dialog.tsx @@ -2,6 +2,7 @@ import { ReactElement } from 'react' import { observer } from 'mobx-react-lite' import { ActionType } from '@declarations' +import dtreeStore from '@store/dtree' import { Dialog } from '@ui/dialog' import { NumericCondition } from '@components/conditions/numeric' import { @@ -26,6 +27,8 @@ export const NumericDialog = observer( attributeName, } = attributeStore + const { isOnDashboard } = dtreeStore + const { currentStepGroups } = modalsControlStore if (!attributeStatus || attributeStatus.kind !== 'numeric') { @@ -75,6 +78,7 @@ export const NumericDialog = observer( initialValue={initialNumericValue} controls={({ value, hasErrors }) => { const disabled = + isOnDashboard || hasErrors || (value[0] == null && value[2] == null) || (typeof attributeStatus.min !== 'number' && diff --git a/src/pages/filter/dtree/components/query-builder/ui/final-step.tsx b/src/pages/filter/dtree/components/query-builder/ui/final-step.tsx index ece98f80d..309fffbcb 100644 --- a/src/pages/filter/dtree/components/query-builder/ui/final-step.tsx +++ b/src/pages/filter/dtree/components/query-builder/ui/final-step.tsx @@ -33,7 +33,10 @@ export const FinalStep = observer( const shouldMakeActive = classList.includes('step-content-area') if (shouldMakeActive) { - stepStore.makeStepActive(stepNo, ActiveStepOptions.StartedVariants) + stepStore.makeStepActive({ + index: stepNo, + option: ActiveStepOptions.StartedVariants, + }) } } diff --git a/src/pages/filter/dtree/components/query-builder/ui/inactive-field-label.tsx b/src/pages/filter/dtree/components/query-builder/ui/inactive-field-label.tsx index 03a6d066d..b71e52b38 100644 --- a/src/pages/filter/dtree/components/query-builder/ui/inactive-field-label.tsx +++ b/src/pages/filter/dtree/components/query-builder/ui/inactive-field-label.tsx @@ -15,7 +15,10 @@ interface IInactiveFieldProps { export const InactiveFieldLabel = observer( ({ stepNo, groupIndex }: IInactiveFieldProps) => { const handleDeleteAttribute = () => { - stepStore.makeStepActive(stepNo - 1, ActiveStepOptions.StartedVariants) + stepStore.makeStepActive({ + index: stepNo - 1, + option: ActiveStepOptions.StartedVariants, + }) deleteAttribute(groupIndex) } diff --git a/src/pages/filter/dtree/components/query-builder/ui/next-step/content-item-header.tsx b/src/pages/filter/dtree/components/query-builder/ui/next-step/content-item-header.tsx index 4455bcb84..c38c3aea4 100644 --- a/src/pages/filter/dtree/components/query-builder/ui/next-step/content-item-header.tsx +++ b/src/pages/filter/dtree/components/query-builder/ui/next-step/content-item-header.tsx @@ -35,7 +35,10 @@ export const ContentItemHeader = observer( !stepType const handleModals = () => { - stepStore.makeStepActive(stepNo - 1, ActiveStepOptions.StartedVariants) + stepStore.makeStepActive({ + index: stepNo - 1, + option: ActiveStepOptions.StartedVariants, + }) stepType === AttributeKinds.ENUM && modalsVisibilityStore.openEnumDialog(groupName, groupNo) diff --git a/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step-content.tsx b/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step-content.tsx index 94823ed4f..ac4b61fa3 100644 --- a/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step-content.tsx +++ b/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step-content.tsx @@ -28,7 +28,10 @@ export const NextStepContent = observer( const openModal = () => { if (groups.length) { - stepStore.makeStepActive(stepNo - 1, ActiveStepOptions.StartedVariants) + stepStore.makeStepActive({ + index: stepNo - 1, + option: ActiveStepOptions.StartedVariants, + }) } modalsVisibilityStore.openSelectAttributeDialog() diff --git a/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step-route/next-step-route.tsx b/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step-route/next-step-route.tsx index 0d2e3700a..a831f7166 100644 --- a/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step-route/next-step-route.tsx +++ b/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step-route/next-step-route.tsx @@ -99,10 +99,11 @@ export const NextStepRoute = observer( styles.nextStepRoute__excludeAmount_included, )} onClick={() => - stepStore.makeStepActive( - stepNo - 1, - ActiveStepOptions.ReturnedVariants, - ) + stepStore.makeStepActive({ + index: stepNo - 1, + option: ActiveStepOptions.ReturnedVariants, + isIncreasedStepIndex: true, + }) } data-testid={DecisionTreesResultsDataCy.excludeInfo} > diff --git a/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step.tsx b/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step.tsx index 0e56f98d2..66d069f62 100644 --- a/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step.tsx +++ b/src/pages/filter/dtree/components/query-builder/ui/next-step/next-step.tsx @@ -42,7 +42,10 @@ export const NextStep = observer( const shouldMakeActive = classList.includes('step-content-area') if (shouldMakeActive) { - stepStore.makeStepActive(stepNo - 1, ActiveStepOptions.StartedVariants) + stepStore.makeStepActive({ + index: stepNo - 1, + option: ActiveStepOptions.StartedVariants, + }) } } diff --git a/src/store/dtree/dtree.store.ts b/src/store/dtree/dtree.store.ts index 434b8ab3d..ff71868f8 100644 --- a/src/store/dtree/dtree.store.ts +++ b/src/store/dtree/dtree.store.ts @@ -1,8 +1,10 @@ import { makeAutoObservable, reaction, runInAction, toJS } from 'mobx' +import { ViewTypeDashboard } from '@core/enum/view-type-dashboard-enum' import { t } from '@i18n' import { ActionsHistoryStore } from '@store/actions-history' import filterDtrees from '@store/filter-dtrees' +import dashboardStore from '@pages/filter/common/dashboard' import { IDsListArguments } from '@service-providers/dataset-level' import { dtreeProvider, @@ -44,6 +46,7 @@ export class DtreeStore { readonly stat = new DtreeStatStore() private _dtreeModifiedState: DtreeModifiedState = DtreeModifiedState.NotDtree private _previousDtreeCode = '' + private _viewType: ViewTypeDashboard = ViewTypeDashboard.List private _XlPointCounts: PointCount[] = [] public startDtreeCode = '' @@ -105,6 +108,10 @@ export class DtreeStore { return this._dtreeModifiedState === DtreeModifiedState.NotDtree } + public get isOnDashboard(): boolean { + return this._viewType === ViewTypeDashboard.Tile + } + constructor() { reaction( () => this.dtreeSetData, @@ -127,7 +134,10 @@ export class DtreeStore { const index = shouldUseFinalIndex ? finalStepIndex : activeStepIndex - stepStore.makeStepActive(index, ActiveStepOptions.StartedVariants) + stepStore.makeStepActive({ + index, + option: ActiveStepOptions.StartedVariants, + }) } if (response?.kind === 'xl') { dtreeProvider @@ -181,6 +191,13 @@ export class DtreeStore { this._previousDtreeCode = code }, ) + + reaction( + () => dashboardStore.viewType, + viewType => { + this._viewType = viewType + }, + ) } public get totalCounts() { diff --git a/src/store/dtree/step.store.ts b/src/store/dtree/step.store.ts index 48dc1188e..fee48fce6 100644 --- a/src/store/dtree/step.store.ts +++ b/src/store/dtree/step.store.ts @@ -15,6 +15,12 @@ export enum CreateEmptyStepPositions { FINAL = 'FINAL', } +interface IActiveStep { + index: number + option: ActiveStepOptions + isIncreasedStepIndex?: boolean +} + class StepStore { activeStepIndex: number = 0 activeStepOption: ActiveStepOptions = ActiveStepOptions.StartedVariants @@ -97,9 +103,15 @@ class StepStore { }) } - makeStepActive(index: number, option: ActiveStepOptions) { + makeStepActive({ index, option, isIncreasedStepIndex = false }: IActiveStep) { this.setActiveStep(index, option) - this.changeStepDataActiveStep(index, option, this.stepIndexForApi) + this.changeStepDataActiveStep( + index, + option, + isIncreasedStepIndex + ? `${+this.stepIndexForApi + 1}` + : this.stepIndexForApi, + ) } insertEmptyStep(position: CreateEmptyStepPositions, index: number) { @@ -142,19 +154,28 @@ class StepStore { case CreateEmptyStepPositions.FINAL: this.insertEmptyStep(position, previousStepIndex) - this.makeStepActive(stepIndex, ActiveStepOptions.StartedVariants) + this.makeStepActive({ + index: stepIndex, + option: ActiveStepOptions.StartedVariants, + }) break case CreateEmptyStepPositions.BEFORE: this.insertEmptyStep(position, stepIndex) - this.makeStepActive(stepIndex, ActiveStepOptions.StartedVariants) + this.makeStepActive({ + index: stepIndex, + option: ActiveStepOptions.StartedVariants, + }) break case CreateEmptyStepPositions.AFTER: this.insertEmptyStep(position, stepIndex) - this.makeStepActive(nextStepIndex, ActiveStepOptions.StartedVariants) + this.makeStepActive({ + index: nextStepIndex, + option: ActiveStepOptions.StartedVariants, + }) break default: @@ -175,7 +196,10 @@ class StepStore { item.step = currNo + 1 }) - this.makeStepActive(stepData.length - 1, ActiveStepOptions.StartedVariants) + this.makeStepActive({ + index: stepData.length - 1, + option: ActiveStepOptions.StartedVariants, + }) } }