Skip to content

Commit ae8d8b2

Browse files
Yagnik56zackcl
Yagnik56
and
zackcl
authored
Disabled dp and condition table and Allow payload edit (#1473)
* disabled dp and condition table edit and allowed change in condition payload while enrolling * same changes for factorial experiment * removed unnecessary the code change * Grey out the decision points and conditions/factors tables * Revert "Grey out the decision points and conditions/factors tables" This reverts commit 91c7494. * Grey out the decision points and conditions/factors tables (recommit) --------- Co-authored-by: Zack Lee <[email protected]>
1 parent e55015c commit ae8d8b2

File tree

7 files changed

+52
-61
lines changed

7 files changed

+52
-61
lines changed

‎frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-design/experiment-design.component.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<ng-container>
1111
<mat-table
1212
class="decision-point-table"
13+
[class.disabled]="!isExperimentEditable"
1314
[dataSource]="decisionPointDataSource"
1415
[formArrayName]="SIMPLE_EXP_CONSTANTS.FORM_CONTROL_NAMES.DECISION_POINTS_ARRAY"
1516
#decisionPointTable
@@ -144,7 +145,7 @@
144145
<button
145146
type="button"
146147
class="row-action-btn"
147-
[disabled]="(isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex"
148+
[disabled]="((isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
148149
(click)="handleDecisionPointTableEditClick(rowIndex, rowData.getRawValue())"
149150
>
150151
<!-- Edit Icon -->
@@ -161,7 +162,7 @@
161162
<button
162163
type="button"
163164
class="row-action-btn"
164-
[disabled]="(isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex"
165+
[disabled]="((isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
165166
(click)="handleDecisionPointTableClearOrRemoveRow(rowIndex)"
166167
>
167168
<ng-container *ngIf="(decisionPointsTableEditIndex$ | async) !== rowIndex">
@@ -233,6 +234,7 @@
233234
<ng-container>
234235
<mat-table
235236
class="condition-table"
237+
[class.disabled]="!isExperimentEditable"
236238
[dataSource]="conditionDataSource"
237239
[formArrayName]="SIMPLE_EXP_CONSTANTS.FORM_CONTROL_NAMES.CONDITIONS_ARRAY"
238240
#conditionTable
@@ -371,7 +373,7 @@
371373
<button
372374
type="button"
373375
class="row-action-btn"
374-
[disabled]="(isFormLockedForEdit$ | async) && (conditionsTableEditIndex$ | async) !== rowIndex"
376+
[disabled]="((isFormLockedForEdit$ | async) && (conditionsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
375377
(click)="handleConditionTableEditClick(rowIndex, rowData.getRawValue())"
376378
>
377379
<!-- Edit Icon -->
@@ -388,7 +390,7 @@
388390
<button
389391
type="button"
390392
class="row-action-btn"
391-
[disabled]="(isFormLockedForEdit$ | async) && (conditionsTableEditIndex$ | async) !== rowIndex"
393+
[disabled]="((isFormLockedForEdit$ | async) && (conditionsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
392394
(click)="handleConditionTableClearOrRemoveRow(rowIndex)"
393395
>
394396
<ng-container *ngIf="(conditionsTableEditIndex$ | async) !== rowIndex">
@@ -491,8 +493,8 @@
491493
*ngIf="experimentInfo"
492494
mat-raised-button
493495
class="shared-modal--modal-btn default-button"
494-
[class.default-button--disabled]="(isFormLockedForEdit$ | async) || !isExperimentEditable"
495-
[disabled]="(isFormLockedForEdit$ | async) || !isExperimentEditable"
496+
[class.default-button--disabled]="(isFormLockedForEdit$ | async)"
497+
[disabled]="(isFormLockedForEdit$ | async)"
496498
(click)="emitEvent(NewExperimentDialogEvents.SAVE_DATA)"
497499
>
498500
{{ 'global.save.text' | translate }}

‎frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-design/experiment-design.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@
3434
max-height: 135px;
3535
overflow: auto;
3636

37+
&.disabled {
38+
opacity: 0.5;
39+
cursor: default;
40+
}
41+
3742
mat-header-row {
3843
min-height: 35px;
3944
max-height: 35px;

‎frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-design/experiment-design.component.ts‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,14 @@ import {
1111
SimpleChanges,
1212
OnDestroy,
1313
} from '@angular/core';
14-
import { UntypedFormBuilder, UntypedFormGroup, Validators, UntypedFormArray, AbstractControl } from '@angular/forms';
14+
import {
15+
UntypedFormBuilder,
16+
UntypedFormGroup,
17+
Validators,
18+
UntypedFormArray,
19+
AbstractControl,
20+
FormArray,
21+
} from '@angular/forms';
1522
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
1623
import {
1724
NewExperimentDialogEvents,
@@ -628,7 +635,7 @@ export class ExperimentDesignComponent implements OnInit, OnChanges, OnDestroy {
628635
isFormValid() {
629636
return (
630637
!this.decisionPointErrors.length &&
631-
this.experimentDesignForm.valid &&
638+
(this.experimentDesignForm.valid || !this.isExperimentEditable) &&
632639
!this.conditionCodeErrors.length &&
633640
this.decisionPointCountError === null &&
634641
this.conditionCountError === null
@@ -668,34 +675,23 @@ export class ExperimentDesignComponent implements OnInit, OnChanges, OnDestroy {
668675
if (this.experimentDesignForm.dirty) {
669676
this.experimentDesignStepperService.experimentStepperDataChanged();
670677
}
671-
if (!this.isExperimentEditable) {
672-
this.emitExperimentDialogEvent.emit({
673-
type: eventType,
674-
formData: this.experimentInfo,
675-
path: NewExperimentPaths.EXPERIMENT_DESIGN,
676-
});
677-
break;
678-
}
679678
this.saveData(eventType);
680679
break;
681680
case NewExperimentDialogEvents.SAVE_DATA:
682-
if (!this.isExperimentEditable) {
683-
this.emitExperimentDialogEvent.emit({
684-
type: eventType,
685-
formData: this.experimentInfo,
686-
path: NewExperimentPaths.EXPERIMENT_DESIGN,
687-
});
688-
break;
689-
}
690681
this.saveData(eventType);
691682
break;
692683
}
693684
}
694685

695686
saveData(eventType: NewExperimentDialogEvents) {
696687
this.validateForm();
697-
698-
if (!this.decisionPointErrors.length && !this.conditionCodeErrors.length && !this.decisionPointCountError) {
688+
//Form will have assignment weight enabled if it's in enrolling state
689+
if (
690+
!this.decisionPointErrors.length &&
691+
!this.conditionCodeErrors.length &&
692+
!this.decisionPointCountError &&
693+
this.isExperimentEditable
694+
) {
699695
this.conditions.controls.forEach((control) => {
700696
control.get(SIMPLE_EXP_CONSTANTS.FORM_CONTROL_NAMES.ASSIGNMENT_WEIGHT).enable({ emitEvent: false });
701697
});

‎frontend/projects/upgrade/src/app/features/dashboard/home/components/factorial-experiment-design/conditions-table/conditions-table.component.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,12 @@
6666
{{ 'WEIGHT' | translate }}
6767
</mat-header-cell>
6868
<mat-cell *matCellDef="let rowData; let rowIndex = index" [formGroupName]="rowIndex">
69-
<ng-container *ngIf="equalWeightFlag || (tableEditIndex$ | async) !== rowIndex">
69+
<ng-container *ngIf="equalWeightFlag || (tableEditIndex$ | async) !== rowIndex || !isExperimentEditable">
7070
<span [matTooltip]="rowData.weight" matTooltipPosition="above">
7171
{{ rowData.weight }}
7272
</span>
7373
</ng-container>
74-
<ng-container *ngIf="!equalWeightFlag && (tableEditIndex$ | async) === rowIndex">
74+
<ng-container *ngIf="!equalWeightFlag && (tableEditIndex$ | async) === rowIndex && isExperimentEditable">
7575
<mat-form-field
7676
class="dense-2 input-weight"
7777
appearance="outline"
@@ -83,7 +83,6 @@
8383
type="text"
8484
matInput
8585
formControlName="weight"
86-
[disabled]="!isExperimentEditable"
8786
/>
8887
</mat-form-field>
8988
</ng-container>
@@ -113,7 +112,7 @@
113112
type="button"
114113
class="row-action-btn"
115114
[disabled]="
116-
((isFormLockedForEdit$ | async) && (tableEditIndex$ | async) !== rowIndex) || !isExperimentEditable
115+
((isFormLockedForEdit$ | async) && (tableEditIndex$ | async) !== rowIndex)
117116
"
118117
(click)="handleRowEditClick(rowData, rowIndex)"
119118
>

‎frontend/projects/upgrade/src/app/features/dashboard/home/components/factorial-experiment-design/factorial-experiment-design.component.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<ng-container *ngIf="decisionPoints?.length; else initialDecisionPointMessage">
1111
<mat-table
1212
class="decision-point-table"
13+
[class.disabled]="!isExperimentEditable"
1314
[dataSource]="decisionPointDataSource"
1415
formArrayName="decisionPoints"
1516
#decisionPointTable
@@ -116,7 +117,7 @@
116117
<button
117118
type="button"
118119
class="row-action-btn"
119-
[disabled]="(isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex"
120+
[disabled]="((isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
120121
(click)="handleDecisionPointTableEditClick(rowIndex, rowData.getRawValue())"
121122
>
122123
<!-- Edit Icon -->
@@ -131,7 +132,7 @@
131132
<button
132133
type="button"
133134
class="row-action-btn"
134-
[disabled]="(isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex"
135+
[disabled]="((isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
135136
(click)="handleDecisionPointTableClearOrRemoveRow(rowIndex)"
136137
>
137138
<!-- Delete Icon -->
@@ -205,6 +206,7 @@
205206
<ng-container *ngIf="factor?.length; else initialFactorsMessage">
206207
<mat-table
207208
class="factor-table"
209+
[class.disabled]="!isExperimentEditable"
208210
[dataSource]="factorDataSource"
209211
#factorTable
210212
formArrayName="factors"
@@ -360,7 +362,7 @@
360362
<button
361363
type="button"
362364
class="row-action-btn"
363-
[disabled]="(isFormLockedForEdit$ | async) && (factorsTableEditIndex$ | async) !== rowIndex"
365+
[disabled]="((isFormLockedForEdit$ | async) && (factorsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
364366
(click)="handleFactorTableEditClick(rowData.getRawValue(), rowIndex)"
365367
>
366368
<!-- Edit Icon -->
@@ -382,7 +384,7 @@
382384
<button
383385
type="button"
384386
class="row-action-btn"
385-
[disabled]="(isFormLockedForEdit$ | async) && (factorsTableEditIndex$ | async) !== rowIndex"
387+
[disabled]="((isFormLockedForEdit$ | async) && (factorsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
386388
(click)="handleFactorTableClearOrRemoveRow(rowIndex)"
387389
>
388390
<!-- Delete Icon -->
@@ -580,7 +582,7 @@
580582
type="button"
581583
class="row-action-btn"
582584
[disabled]="
583-
(isFormLockedForEdit$ | async) && (levelsTableEditIndex$ | async) !== rowIndex
585+
((isFormLockedForEdit$ | async) && (levelsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable
584586
"
585587
(click)="handleLevelTableEditClick(rowData.getRawValue(), rowIndex, factorIndex)"
586588
>
@@ -615,7 +617,7 @@
615617
type="button"
616618
class="row-action-btn"
617619
[disabled]="
618-
(isFormLockedForEdit$ | async) && (levelsTableEditIndex$ | async) !== rowIndex
620+
((isFormLockedForEdit$ | async) && (levelsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable
619621
"
620622
(click)="handleLevelTableClearOrRemoveRow(factorIndex, rowIndex)"
621623
>
@@ -822,8 +824,8 @@
822824
*ngIf="experimentInfo"
823825
mat-raised-button
824826
class="shared-modal--modal-btn default-button"
825-
[ngClass]="{ 'default-button--disabled': (isFormLockedForEdit$ | async) || !isExperimentEditable }"
826-
[disabled]="(isFormLockedForEdit$ | async) || !isExperimentEditable"
827+
[ngClass]="{ 'default-button--disabled': (isFormLockedForEdit$ | async) }"
828+
[disabled]="(isFormLockedForEdit$ | async)"
827829
(click)="emitEvent(NewExperimentDialogEvents.SAVE_DATA)"
828830
>
829831
{{ 'global.save.text' | translate }}

‎frontend/projects/upgrade/src/app/features/dashboard/home/components/factorial-experiment-design/factorial-experiment-design.component.scss‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@
1919
justify-content: space-between;
2020
}
2121

22+
.decision-point-table,
23+
.factor-table {
24+
&.disabled {
25+
opacity: 0.5;
26+
cursor: default;
27+
}
28+
}
29+
2230
.decision-point-table {
2331
max-height: 135px;
2432
overflow: auto;
@@ -124,7 +132,6 @@
124132

125133
mat-icon {
126134
position: relative;
127-
cursor: pointer;
128135

129136
&.active {
130137
transform: rotate(90deg);
@@ -194,10 +201,6 @@
194201
height: 16px;
195202
font-size: var(--text-size-x-large);
196203
color: gray;
197-
198-
&:hover {
199-
cursor: pointer;
200-
}
201204
}
202205

203206
mat-form-field {
@@ -278,7 +281,7 @@
278281
background-color: transparent;
279282
color: var(--blue);
280283
&--disabled {
281-
color: var(--grey-6);
284+
color: var(--light-blue);
282285
}
283286
}
284287
}

‎frontend/projects/upgrade/src/app/features/dashboard/home/components/factorial-experiment-design/factorial-experiment-design.component.ts‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -542,7 +542,7 @@ export class FactorialExperimentDesignComponent implements OnInit, OnChanges, On
542542
!this.decisionPointErrors.length &&
543543
this.decisionPointCountError === null &&
544544
!this.factorPointErrors.length &&
545-
this.factorialExperimentDesignForm.valid &&
545+
(this.factorialExperimentDesignForm.valid || !this.isExperimentEditable) &&
546546
this.factorCountError === null &&
547547
this.levelCountError === null &&
548548
this.conditionCountError === null &&
@@ -706,26 +706,10 @@ export class FactorialExperimentDesignComponent implements OnInit, OnChanges, On
706706
if (this.factorialExperimentDesignForm.dirty) {
707707
this.experimentDesignStepperService.experimentStepperDataChanged();
708708
}
709-
if (!this.isExperimentEditable) {
710-
this.emitExperimentDialogEvent.emit({
711-
type: eventType,
712-
formData: this.experimentInfo,
713-
path: NewExperimentPaths.EXPERIMENT_DESIGN,
714-
});
715-
break;
716-
}
717709
this.saveData(eventType);
718710
break;
719711
case NewExperimentDialogEvents.SAVE_DATA:
720712
this.handleConditionsButtonClick();
721-
if (!this.isExperimentEditable) {
722-
this.emitExperimentDialogEvent.emit({
723-
type: eventType,
724-
formData: this.experimentInfo,
725-
path: NewExperimentPaths.EXPERIMENT_DESIGN,
726-
});
727-
break;
728-
}
729713
this.saveData(eventType);
730714
break;
731715
}

0 commit comments

Comments
 (0)