Skip to content

Commit

Permalink
Disabled dp and condition table and Allow payload edit (#1473)
Browse files Browse the repository at this point in the history 
* 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 <zlee@carnegielearning.com>
  • Loading branch information
@Yagnik56 @zackcl
Yagnik56 and zackcl authored Apr 25, 2024
1 parent e55015c commit ae8d8b2
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 61 deletions.
14 changes: 8 additions & 6 deletions ...app/features/dashboard/home/components/experiment-design/experiment-design.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<ng-container>
<mat-table
class="decision-point-table"
[class.disabled]="!isExperimentEditable"
[dataSource]="decisionPointDataSource"
[formArrayName]="SIMPLE_EXP_CONSTANTS.FORM_CONTROL_NAMES.DECISION_POINTS_ARRAY"
#decisionPointTable
Expand Down Expand Up @@ -144,7 +145,7 @@
<button
type="button"
class="row-action-btn"
[disabled]="(isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex"
[disabled]="((isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
(click)="handleDecisionPointTableEditClick(rowIndex, rowData.getRawValue())"
>
<!-- Edit Icon -->
Expand All @@ -161,7 +162,7 @@
<button
type="button"
class="row-action-btn"
[disabled]="(isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex"
[disabled]="((isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
(click)="handleDecisionPointTableClearOrRemoveRow(rowIndex)"
>
<ng-container *ngIf="(decisionPointsTableEditIndex$ | async) !== rowIndex">
Expand Down Expand Up @@ -233,6 +234,7 @@
<ng-container>
<mat-table
class="condition-table"
[class.disabled]="!isExperimentEditable"
[dataSource]="conditionDataSource"
[formArrayName]="SIMPLE_EXP_CONSTANTS.FORM_CONTROL_NAMES.CONDITIONS_ARRAY"
#conditionTable
Expand Down Expand Up @@ -371,7 +373,7 @@
<button
type="button"
class="row-action-btn"
[disabled]="(isFormLockedForEdit$ | async) && (conditionsTableEditIndex$ | async) !== rowIndex"
[disabled]="((isFormLockedForEdit$ | async) && (conditionsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
(click)="handleConditionTableEditClick(rowIndex, rowData.getRawValue())"
>
<!-- Edit Icon -->
Expand All @@ -388,7 +390,7 @@
<button
type="button"
class="row-action-btn"
[disabled]="(isFormLockedForEdit$ | async) && (conditionsTableEditIndex$ | async) !== rowIndex"
[disabled]="((isFormLockedForEdit$ | async) && (conditionsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
(click)="handleConditionTableClearOrRemoveRow(rowIndex)"
>
<ng-container *ngIf="(conditionsTableEditIndex$ | async) !== rowIndex">
Expand Down Expand Up @@ -491,8 +493,8 @@
*ngIf="experimentInfo"
mat-raised-button
class="shared-modal--modal-btn default-button"
[class.default-button--disabled]="(isFormLockedForEdit$ | async) || !isExperimentEditable"
[disabled]="(isFormLockedForEdit$ | async) || !isExperimentEditable"
[class.default-button--disabled]="(isFormLockedForEdit$ | async)"
[disabled]="(isFormLockedForEdit$ | async)"
(click)="emitEvent(NewExperimentDialogEvents.SAVE_DATA)"
>
{{ 'global.save.text' | translate }}
Expand Down
5 changes: 5 additions & 0 deletions ...app/features/dashboard/home/components/experiment-design/experiment-design.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@
max-height: 135px;
overflow: auto;

&.disabled {
opacity: 0.5;
cursor: default;
}

mat-header-row {
min-height: 35px;
max-height: 35px;
Expand Down
36 changes: 16 additions & 20 deletions ...c/app/features/dashboard/home/components/experiment-design/experiment-design.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,14 @@ import {
SimpleChanges,
OnDestroy,
} from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators, UntypedFormArray, AbstractControl } from '@angular/forms';
import {
UntypedFormBuilder,
UntypedFormGroup,
Validators,
UntypedFormArray,
AbstractControl,
FormArray,
} from '@angular/forms';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import {
NewExperimentDialogEvents,
Expand Down Expand Up @@ -628,7 +635,7 @@ export class ExperimentDesignComponent implements OnInit, OnChanges, OnDestroy {
isFormValid() {
return (
!this.decisionPointErrors.length &&
this.experimentDesignForm.valid &&
(this.experimentDesignForm.valid || !this.isExperimentEditable) &&
!this.conditionCodeErrors.length &&
this.decisionPointCountError === null &&
this.conditionCountError === null
Expand Down Expand Up @@ -668,34 +675,23 @@ export class ExperimentDesignComponent implements OnInit, OnChanges, OnDestroy {
if (this.experimentDesignForm.dirty) {
this.experimentDesignStepperService.experimentStepperDataChanged();
}
if (!this.isExperimentEditable) {
this.emitExperimentDialogEvent.emit({
type: eventType,
formData: this.experimentInfo,
path: NewExperimentPaths.EXPERIMENT_DESIGN,
});
break;
}
this.saveData(eventType);
break;
case NewExperimentDialogEvents.SAVE_DATA:
if (!this.isExperimentEditable) {
this.emitExperimentDialogEvent.emit({
type: eventType,
formData: this.experimentInfo,
path: NewExperimentPaths.EXPERIMENT_DESIGN,
});
break;
}
this.saveData(eventType);
break;
}
}

saveData(eventType: NewExperimentDialogEvents) {
this.validateForm();

if (!this.decisionPointErrors.length && !this.conditionCodeErrors.length && !this.decisionPointCountError) {
//Form will have assignment weight enabled if it's in enrolling state
if (
!this.decisionPointErrors.length &&
!this.conditionCodeErrors.length &&
!this.decisionPointCountError &&
this.isExperimentEditable
) {
this.conditions.controls.forEach((control) => {
control.get(SIMPLE_EXP_CONSTANTS.FORM_CONTROL_NAMES.ASSIGNMENT_WEIGHT).enable({ emitEvent: false });
});
Expand Down
7 changes: 3 additions & 4 deletions ...e/components/factorial-experiment-design/conditions-table/conditions-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,12 @@
{{ 'WEIGHT' | translate }}
</mat-header-cell>
<mat-cell *matCellDef="let rowData; let rowIndex = index" [formGroupName]="rowIndex">
<ng-container *ngIf="equalWeightFlag || (tableEditIndex$ | async) !== rowIndex">
<ng-container *ngIf="equalWeightFlag || (tableEditIndex$ | async) !== rowIndex || !isExperimentEditable">
<span [matTooltip]="rowData.weight" matTooltipPosition="above">
{{ rowData.weight }}
</span>
</ng-container>
<ng-container *ngIf="!equalWeightFlag && (tableEditIndex$ | async) === rowIndex">
<ng-container *ngIf="!equalWeightFlag && (tableEditIndex$ | async) === rowIndex && isExperimentEditable">
<mat-form-field
class="dense-2 input-weight"
appearance="outline"
Expand All @@ -83,7 +83,6 @@
type="text"
matInput
formControlName="weight"
[disabled]="!isExperimentEditable"
/>
</mat-form-field>
</ng-container>
Expand Down Expand Up @@ -113,7 +112,7 @@
type="button"
class="row-action-btn"
[disabled]="
((isFormLockedForEdit$ | async) && (tableEditIndex$ | async) !== rowIndex) || !isExperimentEditable
((isFormLockedForEdit$ | async) && (tableEditIndex$ | async) !== rowIndex)
"
(click)="handleRowEditClick(rowData, rowIndex)"
>
Expand Down
18 changes: 10 additions & 8 deletions ...rd/home/components/factorial-experiment-design/factorial-experiment-design.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<ng-container *ngIf="decisionPoints?.length; else initialDecisionPointMessage">
<mat-table
class="decision-point-table"
[class.disabled]="!isExperimentEditable"
[dataSource]="decisionPointDataSource"
formArrayName="decisionPoints"
#decisionPointTable
Expand Down Expand Up @@ -116,7 +117,7 @@
<button
type="button"
class="row-action-btn"
[disabled]="(isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex"
[disabled]="((isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
(click)="handleDecisionPointTableEditClick(rowIndex, rowData.getRawValue())"
>
<!-- Edit Icon -->
Expand All @@ -131,7 +132,7 @@
<button
type="button"
class="row-action-btn"
[disabled]="(isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex"
[disabled]="((isFormLockedForEdit$ | async) && (decisionPointsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
(click)="handleDecisionPointTableClearOrRemoveRow(rowIndex)"
>
<!-- Delete Icon -->
Expand Down Expand Up @@ -205,6 +206,7 @@
<ng-container *ngIf="factor?.length; else initialFactorsMessage">
<mat-table
class="factor-table"
[class.disabled]="!isExperimentEditable"
[dataSource]="factorDataSource"
#factorTable
formArrayName="factors"
Expand Down Expand Up @@ -360,7 +362,7 @@
<button
type="button"
class="row-action-btn"
[disabled]="(isFormLockedForEdit$ | async) && (factorsTableEditIndex$ | async) !== rowIndex"
[disabled]="((isFormLockedForEdit$ | async) && (factorsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
(click)="handleFactorTableEditClick(rowData.getRawValue(), rowIndex)"
>
<!-- Edit Icon -->
Expand All @@ -382,7 +384,7 @@
<button
type="button"
class="row-action-btn"
[disabled]="(isFormLockedForEdit$ | async) && (factorsTableEditIndex$ | async) !== rowIndex"
[disabled]="((isFormLockedForEdit$ | async) && (factorsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable"
(click)="handleFactorTableClearOrRemoveRow(rowIndex)"
>
<!-- Delete Icon -->
Expand Down Expand Up @@ -580,7 +582,7 @@
type="button"
class="row-action-btn"
[disabled]="
(isFormLockedForEdit$ | async) && (levelsTableEditIndex$ | async) !== rowIndex
((isFormLockedForEdit$ | async) && (levelsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable
"
(click)="handleLevelTableEditClick(rowData.getRawValue(), rowIndex, factorIndex)"
>
Expand Down Expand Up @@ -615,7 +617,7 @@
type="button"
class="row-action-btn"
[disabled]="
(isFormLockedForEdit$ | async) && (levelsTableEditIndex$ | async) !== rowIndex
((isFormLockedForEdit$ | async) && (levelsTableEditIndex$ | async) !== rowIndex) || !isExperimentEditable
"
(click)="handleLevelTableClearOrRemoveRow(factorIndex, rowIndex)"
>
Expand Down Expand Up @@ -822,8 +824,8 @@
*ngIf="experimentInfo"
mat-raised-button
class="shared-modal--modal-btn default-button"
[ngClass]="{ 'default-button--disabled': (isFormLockedForEdit$ | async) || !isExperimentEditable }"
[disabled]="(isFormLockedForEdit$ | async) || !isExperimentEditable"
[ngClass]="{ 'default-button--disabled': (isFormLockedForEdit$ | async) }"
[disabled]="(isFormLockedForEdit$ | async)"
(click)="emitEvent(NewExperimentDialogEvents.SAVE_DATA)"
>
{{ 'global.save.text' | translate }}
Expand Down
15 changes: 9 additions & 6 deletions ...rd/home/components/factorial-experiment-design/factorial-experiment-design.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@
justify-content: space-between;
}

.decision-point-table,
.factor-table {
&.disabled {
opacity: 0.5;
cursor: default;
}
}

.decision-point-table {
max-height: 135px;
overflow: auto;
Expand Down Expand Up @@ -124,7 +132,6 @@

mat-icon {
position: relative;
cursor: pointer;

&.active {
transform: rotate(90deg);
Expand Down Expand Up @@ -194,10 +201,6 @@
height: 16px;
font-size: var(--text-size-x-large);
color: gray;

&:hover {
cursor: pointer;
}
}

mat-form-field {
Expand Down Expand Up @@ -278,7 +281,7 @@
background-color: transparent;
color: var(--blue);
&--disabled {
color: var(--grey-6);
color: var(--light-blue);
}
}
}
Expand Down
18 changes: 1 addition & 17 deletions ...oard/home/components/factorial-experiment-design/factorial-experiment-design.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,7 +542,7 @@ export class FactorialExperimentDesignComponent implements OnInit, OnChanges, On
!this.decisionPointErrors.length &&
this.decisionPointCountError === null &&
!this.factorPointErrors.length &&
this.factorialExperimentDesignForm.valid &&
(this.factorialExperimentDesignForm.valid || !this.isExperimentEditable) &&
this.factorCountError === null &&
this.levelCountError === null &&
this.conditionCountError === null &&
Expand Down Expand Up @@ -706,26 +706,10 @@ export class FactorialExperimentDesignComponent implements OnInit, OnChanges, On
if (this.factorialExperimentDesignForm.dirty) {
this.experimentDesignStepperService.experimentStepperDataChanged();
}
if (!this.isExperimentEditable) {
this.emitExperimentDialogEvent.emit({
type: eventType,
formData: this.experimentInfo,
path: NewExperimentPaths.EXPERIMENT_DESIGN,
});
break;
}
this.saveData(eventType);
break;
case NewExperimentDialogEvents.SAVE_DATA:
this.handleConditionsButtonClick();
if (!this.isExperimentEditable) {
this.emitExperimentDialogEvent.emit({
type: eventType,
formData: this.experimentInfo,
path: NewExperimentPaths.EXPERIMENT_DESIGN,
});
break;
}
this.saveData(eventType);
break;
}
Expand Down

0 comments on commit ae8d8b2

Please sign in to comment.