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
ForomePlatform · Sep 16, 2022 · 5679295 · 5679295
1 parent e4e2877
commit 5679295
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 22 deletions.
diff --git a/...ges/filter/dtree/components/modals/components/compound-het-dialog/compound-het-dialog.tsx b/...ges/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/...er/dtree/components/modals/components/compound-request-dialog/compound-request-dialog.tsx b/...er/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/...nents/modals/components/custom-inheritance-mode-dialog/custom-inheritance-mode-dialog.tsx b/...nents/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
@@ -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/...pages/filter/dtree/components/modals/components/gene-region-dialog/gene-region-dialog.tsx b/...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/...er/dtree/components/modals/components/inheritance-mode-dialog/inheritance-mode-dialog.tsx b/...er/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...es/filter/dtree/components/query-builder/ui/next-step/next-step-route/next-step-route.tsx b/...es/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
@@ -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
@@ -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
@@ -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,
+    })
   }
 }