Show visibility icon if component has constraints. Click on it to open advanced authoring with constraint tab opened.

Author: hirokiterashima

src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts

@@ -10,8 +10,11 @@ import { moveObjectDown, moveObjectUp } from '../../../assets/wise5/common/array
 export abstract class EditAdvancedComponentComponent {
   component: Component;
   componentContent: ComponentContent;
+  protected selectedTabIndex: number = 0;
+
   @Input() componentId: string;
   @Input() nodeId: string;
+  @Input() tab: string = 'general';
 
   constructor(
     protected nodeService: TeacherNodeService,
@@ -23,6 +26,15 @@ export abstract class EditAdvancedComponentComponent {
     this.componentContent = this.teacherProjectService.getComponent(this.nodeId, this.componentId);
     this.component = new Component(this.componentContent, this.nodeId);
     this.teacherProjectService.uiChanged();
+
+    switch (this.tab) {
+      case 'visibility':
+        this.selectedTabIndex = 1;
+        break;
+      default:
+        this.selectedTabIndex = 0;
+        break;
+    }
   }
 
   setShowSubmitButtonValue(show: boolean = false): void {

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts

@@ -19,9 +19,12 @@ describe('EditComponentAdvancedComponent', () => {
         {
           provide: MAT_DIALOG_DATA,
           useValue: {
-            content: { type: 'ShowMyWork' },
-            id: 'component1',
-            nodeId: 'node1'
+            component: {
+              content: { type: 'ShowMyWork' },
+              id: 'component1',
+              nodeId: 'node1'
+            },
+            tab: 'general'
           }
         },
         {

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts

@@ -26,18 +26,22 @@ export class EditComponentAdvancedComponent {
   private componentRef: ComponentRef<WISEComponent>;
   constructor(
     private applicationRef: ApplicationRef,
-    @Inject(MAT_DIALOG_DATA) protected component: WISEComponent,
+    @Inject(MAT_DIALOG_DATA) protected data: { component: WISEComponent; tab?: string },
     private injector: EnvironmentInjector
   ) {}
 
   ngAfterViewInit(): void {
-    this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, {
-      hostElement: this.componentElementRef.nativeElement,
-      environmentInjector: this.injector
-    });
+    this.componentRef = createComponent(
+      components[this.data.component.content.type].authoringAdvanced,
+      {
+        hostElement: this.componentElementRef.nativeElement,
+        environmentInjector: this.injector
+      }
+    );
     Object.assign(this.componentRef.instance, {
-      nodeId: this.component.nodeId,
-      componentId: this.component.id
+      nodeId: this.data.component.nodeId,
+      componentId: this.data.component.id,
+      tab: this.data.tab
     });
     this.applicationRef.attachView(this.componentRef.hostView);
   }

src/assets/wise5/authoringTool/components/edit-component-advanced-button/edit-component-advanced-button.component.ts

@@ -20,7 +20,7 @@ export class EditComponentAdvancedButtonComponent {
 
   protected showComponentAdvancedAuthoring(): void {
     this.dialog.open(EditComponentAdvancedComponent, {
-      data: new WiseComponent(this.componentContent, this.nodeId),
+      data: { component: new WiseComponent(this.componentContent, this.nodeId), tab: 'general' },
       width: '80%'
     });
   }

src/assets/wise5/authoringTool/components/visibility-constraint-icon/visibility-constraint-icon.component.ts

@@ -0,0 +1,36 @@
+import { Component, inject, Input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
+import { Component as WiseComponent } from '../../../common/Component';
+import { ComponentContent } from '../../../common/ComponentContent';
+
+@Component({
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule],
+  selector: 'visibility-constraint-icon',
+  template: `<button
+    mat-icon-button
+    (click)="openVisibilityConstraintAuthoring()"
+    [matTooltip]="tooltip"
+    matTooltipPosition="above"
+  >
+    <mat-icon>visibility_off</mat-icon>
+  </button>`
+})
+export class VisibilityConstraintIconComponent {
+  private dialog = inject(MatDialog);
+
+  @Input() componentContent: ComponentContent;
+  @Input() nodeId: string;
+
+  protected tooltip = $localize`This activity is displayed to the student when certain conditions are met. Click to view and edit the conditions.`;
+
+  protected openVisibilityConstraintAuthoring(): void {
+    this.dialog.open(EditComponentAdvancedComponent, {
+      data: { component: new WiseComponent(this.componentContent, this.nodeId), tab: 'visibility' },
+      width: '80%'
+    });
+  }
+}

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html

@@ -49,6 +49,9 @@
               <span class="heavy">{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span>
             </div>
             <toggle-component-tag [component]="component" />
+            @if (hasVisibilityConstraint(component)) {
+              <visibility-constraint-icon [componentContent]="component" [nodeId]="nodeId" />
+            }
             <span class="flex grow"></span>
             <div class="text flex justify-end items-center">
               @if (component.id === editingComponentId) {

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts

@@ -27,6 +27,7 @@ import { ComponentAuthoringComponent } from '../../components/component-authorin
 import { RouterModule } from '@angular/router';
 import { EditComponentAdvancedButtonComponent } from '../../components/edit-component-advanced-button/edit-component-advanced-button.component';
 import { ToggleComponentTagComponent } from '../../components/toggle-component-tag/toggle-component-tag.component';
+import { VisibilityConstraintIconComponent } from '../../components/visibility-constraint-icon/visibility-constraint-icon.component';
 
 @Component({
   imports: [
@@ -47,7 +48,8 @@ import { ToggleComponentTagComponent } from '../../components/toggle-component-t
     MatTooltipModule,
     RouterModule,
     TeacherNodeIconComponent,
-    ToggleComponentTagComponent
+    ToggleComponentTagComponent,
+    VisibilityConstraintIconComponent
   ],
   styleUrl: './node-authoring.component.scss',
   templateUrl: './node-authoring.component.html'
@@ -227,6 +229,10 @@ export class NodeAuthoringComponent implements OnInit {
     return this.componentTypeService.getComponentTypeLabel(componentType);
   }
 
+  protected hasVisibilityConstraint(component: ComponentContent): boolean {
+    return component.constraints?.length > 0;
+  }
+
   private setShowSaveButtonForAllComponents(node: Node, showSaveButton: boolean): void {
     node.components
       .filter((component) =>

src/assets/wise5/components/aiChat/edit-ai-chat-advanced/edit-ai-chat-advanced.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group animationDuration="0ms">
+<mat-tab-group animationDuration="0ms" [selectedIndex]="selectedTabIndex">
   <mat-tab>
     <ng-template mat-tab-label>
       <mat-icon>settings</mat-icon>&nbsp;<span i18n>General</span>

src/assets/wise5/components/animation/edit-animation-advanced/edit-animation-advanced.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group animationDuration="0ms">
+<mat-tab-group animationDuration="0ms" [selectedIndex]="selectedTabIndex">
   <mat-tab>
     <ng-template mat-tab-label>
       <mat-icon>settings</mat-icon>&nbsp;<span i18n>General</span>

src/assets/wise5/components/audioOscillator/edit-audio-oscillator-advanced/edit-audio-oscillator-advanced.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group animationDuration="0ms">
+<mat-tab-group animationDuration="0ms" [selectedIndex]="selectedTabIndex">
   <mat-tab>
     <ng-template mat-tab-label>
       <mat-icon>settings</mat-icon>&nbsp;<span i18n>General</span>