From fca93f911c01e6959be4184450af3c926b051be5 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Tue, 17 Oct 2023 10:46:16 -0700
Subject: [PATCH] refactor(Project Authoring): Clean up template using
 node-icon-and-title (#1471)

---
 .../project-authoring.component.html          | 135 +++++++++---------
 src/messages.xlf                              |  48 +++----
 2 files changed, 89 insertions(+), 94 deletions(-)

diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
index 5125b95527e..2e4c634cce3 100644
--- a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
+++ b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
@@ -106,55 +106,53 @@
           >
           </mat-checkbox>
         </div>
-        <div class="projectItemTitleDiv" (click)="nodeClicked(item.key)">
-          <div class="pointer" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
-            <node-icon [nodeId]="item.key" size="18"></node-icon>
-            <h6 *ngIf="isGroupNode(item.key)">
-              {{ getNodePositionById(item.key) }}:
-              {{ getNodeTitle(item.key) }}
-            </h6>
-            <p *ngIf="!isGroupNode(item.key)" fxLayoutAlign="start center" fxLayoutGap="10px">
-              <span>{{ getNodePositionById(item.key) }}: {{ getNodeTitle(item.key) }}</span>
-              <mat-icon
-                *ngIf="isBranchPoint(item.key)"
-                class="rotate-180"
-                (click)="branchIconClicked(item.key); $event.stopPropagation()"
-                matTooltip="Branch point with {{
-                  getNumberOfBranchPaths(item.key)
-                }} paths based on {{ getBranchCriteriaDescription(item.key) }}"
-                matTooltipPosition="right"
-                i18n-matTooltip
-                >call_split</mat-icon
-              >
-              <mat-icon
-                *ngIf="nodeHasConstraint(item.key) && getNumberOfConstraintsOnNode(item.key) == 1"
-                (click)="constraintIconClicked(item.key); $event.stopPropagation()"
-                matTooltip="{{ getNumberOfConstraintsOnNode(item.key) }} Constraint\n\n{{
-                  getConstraintDescriptions(item.key)
-                }}"
-                matTooltipPosition="right"
-                i18n-matTooltip
-                >block</mat-icon
-              >
-              <mat-icon
-                *ngIf="nodeHasConstraint(item.key) && getNumberOfConstraintsOnNode(item.key) > 1"
-                (click)="constraintIconClicked(item.key); $event.stopPropagation()"
-                matTooltip="{{ getNumberOfConstraintsOnNode(item.key) }} Constraints\n\n{{
-                  getConstraintDescriptions(item.key)
-                }}"
-                matTooltipPosition="right"
-                i18n-matTooltip
-                >block</mat-icon
-              >
-              <mat-icon
-                *ngIf="nodeHasRubric(item.key)"
-                matTooltip="Has Rubric"
-                matTooltipPosition="right"
-                i18n-matTooltip
-                >message</mat-icon
-              >
-            </p>
-          </div>
+        <div
+          class="projectItemTitleDiv pointer"
+          fxLayoutAlign="start center"
+          fxLayoutGap="10px"
+          (click)="nodeClicked(item.key)"
+        >
+          <node-icon-and-title [nodeId]="item.key" [showPosition]="true"></node-icon-and-title>
+          <p *ngIf="!isGroupNode(item.key)" fxLayoutAlign="start center" fxLayoutGap="10px">
+            <mat-icon
+              *ngIf="isBranchPoint(item.key)"
+              class="rotate-180"
+              (click)="branchIconClicked(item.key); $event.stopPropagation()"
+              matTooltip="Branch point with {{ getNumberOfBranchPaths(item.key) }} paths based on {{
+                getBranchCriteriaDescription(item.key)
+              }}"
+              matTooltipPosition="right"
+              i18n-matTooltip
+              >call_split</mat-icon
+            >
+            <mat-icon
+              *ngIf="nodeHasConstraint(item.key) && getNumberOfConstraintsOnNode(item.key) == 1"
+              (click)="constraintIconClicked(item.key); $event.stopPropagation()"
+              matTooltip="{{ getNumberOfConstraintsOnNode(item.key) }} Constraint\n\n{{
+                getConstraintDescriptions(item.key)
+              }}"
+              matTooltipPosition="right"
+              i18n-matTooltip
+              >block</mat-icon
+            >
+            <mat-icon
+              *ngIf="nodeHasConstraint(item.key) && getNumberOfConstraintsOnNode(item.key) > 1"
+              (click)="constraintIconClicked(item.key); $event.stopPropagation()"
+              matTooltip="{{ getNumberOfConstraintsOnNode(item.key) }} Constraints\n\n{{
+                getConstraintDescriptions(item.key)
+              }}"
+              matTooltipPosition="right"
+              i18n-matTooltip
+              >block</mat-icon
+            >
+            <mat-icon
+              *ngIf="nodeHasRubric(item.key)"
+              matTooltip="Has Rubric"
+              matTooltipPosition="right"
+              i18n-matTooltip
+              >message</mat-icon
+            >
+          </p>
         </div>
       </div>
     </div>
@@ -185,13 +183,12 @@ <h6 class="unused-header">Unused Lessons</h6>
             >
             </mat-checkbox>
           </div>
-          <div class="projectItemTitleDiv" (click)="nodeClicked(inactiveNode.id)">
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
-              <node-icon [nodeId]="inactiveNode.id" size="18"></node-icon>&nbsp;
-              <h6 class="pointer">
-                {{ getNodeTitle(inactiveNode.id) }}
-              </h6>
-            </div>
+          <div
+            class="projectItemTitleDiv pointer"
+            fxLayoutAlign="start center"
+            (click)="nodeClicked(inactiveNode.id)"
+          >
+            <node-icon-and-title [nodeId]="inactiveNode.id"></node-icon-and-title>
           </div>
         </div>
         <ng-container *ngFor="let inactiveChildId of inactiveNode.ids">
@@ -216,13 +213,12 @@ <h6 class="pointer">
                 >
                 </mat-checkbox>
               </div>
-              <div class="projectItemTitleDiv" (click)="nodeClicked(inactiveChildId)">
-                <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
-                  <node-icon [nodeId]="inactiveChildId" size="18"></node-icon>&nbsp;
-                  <p class="pointer">
-                    {{ getNodeTitle(inactiveChildId) }}
-                  </p>
-                </div>
+              <div
+                class="projectItemTitleDiv pointer"
+                fxLayoutAlign="start center"
+                (click)="nodeClicked(inactiveChildId)"
+              >
+                <node-icon-and-title [nodeId]="inactiveChildId"></node-icon-and-title>
               </div>
             </div>
           </div>
@@ -256,13 +252,12 @@ <h6 class="unused-header" i18n>Unused Steps</h6>
               >
               </mat-checkbox>
             </div>
-            <div class="projectItemTitleDiv" (click)="nodeClicked(inactiveNode.id)">
-              <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
-                <node-icon [nodeId]="inactiveNode.id" size="18"></node-icon>
-                <p class="pointer">
-                  {{ getNodeTitle(inactiveNode.id) }}
-                </p>
-              </div>
+            <div
+              class="projectItemTitleDiv pointer"
+              fxLayoutAlign="start center"
+              (click)="nodeClicked(inactiveNode.id)"
+            >
+              <node-icon-and-title [nodeId]="inactiveNode.id"></node-icon-and-title>
             </div>
           </div>
         </div>
diff --git a/src/messages.xlf b/src/messages.xlf
index ef8bd54a400..9d834e6a115 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -9622,7 +9622,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">164</context>
+          <context context-type="linenumber">162</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a10dba8eb1f22a5f90f90e79b8305963eec3ee38" datatype="html">
@@ -9637,7 +9637,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">233</context>
+          <context context-type="linenumber">229</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0217500199a3e48a7b95762b14b79dad49e76beb" datatype="html">
@@ -9652,7 +9652,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">234</context>
+          <context context-type="linenumber">230</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f951d80b53d5536f79142285e8ba09f190a3c723" datatype="html">
@@ -12035,38 +12035,38 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">30</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="2babf1354d25bf42fc198b512e41efe699029adc" datatype="html">
-        <source>Branch point with <x id="INTERPOLATION" equiv-text="{{
-                  getNumberOfBranchPaths(item.key)
-                }}"/> paths based on <x id="INTERPOLATION_1" equiv-text="{{ getBranchCriteriaDescription(item.key) }}"/></source>
+      <trans-unit id="8ee3a5c584c3f2988bbd4e7cf0204123f312fb0f" datatype="html">
+        <source>Branch point with <x id="INTERPOLATION" equiv-text="{{ getNumberOfBranchPaths(item.key) }}"/> paths based on <x id="INTERPOLATION_1" equiv-text="{{
+                getBranchCriteriaDescription(item.key)
+              }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">122,124</context>
+          <context context-type="linenumber">121,123</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="30e48681d6264197efea8455adfefd170a75e87f" datatype="html">
+      <trans-unit id="3374b45efd7fad4f098ebbfb6a888d7236906a0c" datatype="html">
         <source><x id="INTERPOLATION" equiv-text="{{ getNumberOfConstraintsOnNode(item.key) }}"/> Constraint\n\n<x id="INTERPOLATION_1" equiv-text="{{
-                  getConstraintDescriptions(item.key)
-                }}"/></source>
+                getConstraintDescriptions(item.key)
+              }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">132,134</context>
+          <context context-type="linenumber">131,133</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="352c3d81453aabe6f46a08ce422003e76f85f041" datatype="html">
+      <trans-unit id="6a6a2c1fda09ebe6ab5a6a8313989c4cf4d8b194" datatype="html">
         <source><x id="INTERPOLATION" equiv-text="{{ getNumberOfConstraintsOnNode(item.key) }}"/> Constraints\n\n<x id="INTERPOLATION_1" equiv-text="{{
-                  getConstraintDescriptions(item.key)
-                }}"/></source>
+                getConstraintDescriptions(item.key)
+              }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">142,144</context>
+          <context context-type="linenumber">141,143</context>
         </context-group>
       </trans-unit>
       <trans-unit id="b3b4847175a6193afa85eb431bbe16d1f04470fa" datatype="html">
         <source>Has Rubric</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">151</context>
+          <context context-type="linenumber">150</context>
         </context-group>
       </trans-unit>
       <trans-unit id="791981839110791639" datatype="html">
@@ -14255,49 +14255,49 @@ Are you sure you want to proceed?</source>
         <source>Correctness column key: 0 = Incorrect, 1 = Correct, 2 = Correct bucket but wrong position</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts</context>
-          <context context-type="linenumber">136</context>
+          <context context-type="linenumber">138</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7865202073915909645" datatype="html">
         <source>One Workgroup Per Row</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts</context>
-          <context context-type="linenumber">159</context>
+          <context context-type="linenumber">161</context>
         </context-group>
       </trans-unit>
       <trans-unit id="789970879723970594" datatype="html">
         <source>Latest Student Work</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts</context>
-          <context context-type="linenumber">161</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6593306077428507515" datatype="html">
         <source>All Student Work</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts</context>
-          <context context-type="linenumber">163</context>
+          <context context-type="linenumber">165</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5729418620241283277" datatype="html">
         <source>Events</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts</context>
-          <context context-type="linenumber">165</context>
+          <context context-type="linenumber">167</context>
         </context-group>
       </trans-unit>
       <trans-unit id="347166173746466674" datatype="html">
         <source>Raw Data</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts</context>
-          <context context-type="linenumber">167</context>
+          <context context-type="linenumber">169</context>
         </context-group>
       </trans-unit>
       <trans-unit id="456492495567778711" datatype="html">
         <source>Downloading Export</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts</context>
-          <context context-type="linenumber">2213</context>
+          <context context-type="linenumber">2220</context>
         </context-group>
       </trans-unit>
       <trans-unit id="18a393cd6211a7e1f51159db6b49637ee7c61490" datatype="html">