From d4d59dd1b7398c26993e08a1f1a8a6805515b357 Mon Sep 17 00:00:00 2001
From: Stefan Topfstedt <Stefan.Topfstedt@ucsf.edu>
Date: Fri, 20 Dec 2024 17:33:15 -0800
Subject: [PATCH] separates edit-mode from view-mode for instructors management
 in learner group management.

---
 .../learner-group/instructor-manager.hbs      | 161 ++++++++----------
 .../learner-group/instructor-manager.js       |   5 +-
 .../learner-group/instructors-list.hbs        |  24 +++
 .../app/components/learner-group/root.hbs     |   9 +-
 .../app/components/learner-group/root.js      |   2 +
 packages/frontend/app/styles/components.scss  |   1 +
 .../learner-group/instructor-manager.scss     |   4 -
 .../learner-group/instructors-list.scss       |  25 +++
 8 files changed, 130 insertions(+), 101 deletions(-)
 create mode 100644 packages/frontend/app/components/learner-group/instructors-list.hbs
 create mode 100644 packages/frontend/app/styles/components/learner-group/instructors-list.scss

diff --git a/packages/frontend/app/components/learner-group/instructor-manager.hbs b/packages/frontend/app/components/learner-group/instructor-manager.hbs
index 86fe534880..e9942a1892 100644
--- a/packages/frontend/app/components/learner-group/instructor-manager.hbs
+++ b/packages/frontend/app/components/learner-group/instructor-manager.hbs
@@ -5,102 +5,77 @@
 >
   <div class="detail-header">
     <div class="title" data-test-title>
-      {{#if this.isManaging}}
-        {{t "general.manageDefaultInstructors"}}
-      {{else}}
-        {{t "general.defaultInstructors"}}
-        ({{@learnerGroup.allInstructors.length}})
-      {{/if}}
+      {{t "general.manageDefaultInstructors"}}
+    </div>
+    <div class="actions">
+      <button
+        type="button"
+        class="bigadd"
+        {{on "click" (fn @save this.instructors this.instructorGroups)}}
+        data-test-save
+      >
+        <FaIcon @icon="check" />
+      </button>
+      <button
+        type="button"
+        class="bigcancel"
+        {{on "click" (set this "isManaging" false)}}
+        data-test-cancel
+      >
+        <FaIcon @icon="arrow-rotate-left" />
+      </button>
     </div>
-    {{#if this.isManaging}}
-      <div class="actions">
-        <button
-          type="button"
-          class="bigadd"
-          {{on "click" (fn @save this.instructors this.instructorGroups)}}
-          data-test-save
-        >
-          <FaIcon @icon="check" />
-        </button>
-        <button
-          type="button"
-          class="bigcancel"
-          {{on "click" (set this "isManaging" false)}}
-          data-test-cancel
-        >
-          <FaIcon @icon="arrow-rotate-left" />
-        </button>
-      </div>
-    {{else}}
-      {{#if @canUpdate}}
-        <button type="button" {{on "click" (set this "isManaging" true)}} data-test-manage>
-          {{t "general.instructorsManageTitle"}}
-        </button>
-      {{/if}}
-    {{/if}}
   </div>
   <div class="detail-content">
-    {{#if this.isManaging}}
-      {{#if this.instructors.length}}
-        <h4>
-          {{t "general.instructors"}}
-        </h4>
-        <ul class="removable-instructors">
-          {{#each (sort-by "fullName" this.instructors) as |user|}}
-            <li>
-              <button
-                class="link-button"
-                type="button"
-                {{on "click" (fn this.removeInstructor user)}}
-                data-test-selected-instructor
-              >
-                <UserNameInfo @user={{user}} />
-                <FaIcon @icon="xmark" class="remove" />
-              </button>
-            </li>
-          {{/each}}
-        </ul>
-      {{/if}}
-      {{#if this.instructorGroups.length}}
-        <h4>
-          {{t "general.instructorGroups"}}
-        </h4>
-        <div class="removable-instructor-groups">
-          {{#each (sort-by "title" this.instructorGroups) as |instructorGroup|}}
-            <div class="removable-instructor-group" data-test-selected-instructor-group>
-              <button
-                class="link-button"
-                type="button"
-                data-test-instructor-group-title
-                {{on "click" (fn this.removeInstructorGroup instructorGroup)}}
-              >
-                <FaIcon @icon="users" />
-                {{instructorGroup.title}}
-                <FaIcon @icon="xmark" class="remove" />
-              </button>
-              <br />
-              <LearnerGroup::InstructorGroupMembersList @instructorGroup={{instructorGroup}} />
-            </div>
-          {{/each}}
-        </div>
-      {{/if}}
-      <UserSearch
-        @addUser={{this.addInstructor}}
-        @addInstructorGroup={{this.addInstructorGroup}}
-        @currentlyActiveUsers={{this.instructors}}
-        @availableInstructorGroups={{@availableInstructorGroups}}
-        @currentlyActiveInstructorGroups={{this.instructorGroups}}
-      />
-    {{else}}
-      {{#if @learnerGroup.allInstructors.length}}
-        <ul class="assigned-instructors">
-          {{#each (sort-by "fullName" @learnerGroup.allInstructors) as |instructor|}}
-            <li data-test-assigned-instructor>
-              <UserNameInfo @user={{instructor}} />
-            </li>
-          {{/each}}
-        </ul>
-      {{/if}}
+    {{#if this.instructors.length}}
+      <h4>
+        {{t "general.instructors"}}
+      </h4>
+      <ul class="removable-instructors">
+        {{#each (sort-by "fullName" this.instructors) as |user|}}
+          <li>
+            <button
+              class="link-button"
+              type="button"
+              {{on "click" (fn this.removeInstructor user)}}
+              data-test-selected-instructor
+            >
+              <UserNameInfo @user={{user}} />
+              <FaIcon @icon="xmark" class="remove" />
+            </button>
+          </li>
+        {{/each}}
+      </ul>
+    {{/if}}
+    {{#if this.instructorGroups.length}}
+      <h4>
+        {{t "general.instructorGroups"}}
+      </h4>
+      <div class="removable-instructor-groups">
+        {{#each (sort-by "title" this.instructorGroups) as |instructorGroup|}}
+          <div class="removable-instructor-group" data-test-selected-instructor-group>
+            <button
+              class="link-button"
+              type="button"
+              data-test-instructor-group-title
+              {{on "click" (fn this.removeInstructorGroup instructorGroup)}}
+            >
+              <FaIcon @icon="users" />
+              {{instructorGroup.title}}
+              <FaIcon @icon="xmark" class="remove" />
+            </button>
+            <br />
+            <LearnerGroup::InstructorGroupMembersList @instructorGroup={{instructorGroup}} />
+          </div>
+        {{/each}}
+      </div>
     {{/if}}
+    <UserSearch
+      @addUser={{this.addInstructor}}
+      @addInstructorGroup={{this.addInstructorGroup}}
+      @currentlyActiveUsers={{this.instructors}}
+      @availableInstructorGroups={{@availableInstructorGroups}}
+      @currentlyActiveInstructorGroups={{this.instructorGroups}}
+    />
   </div>
 </div>
\ No newline at end of file
diff --git a/packages/frontend/app/components/learner-group/instructor-manager.js b/packages/frontend/app/components/learner-group/instructor-manager.js
index 72ea50a4da..38797dc3c7 100644
--- a/packages/frontend/app/components/learner-group/instructor-manager.js
+++ b/packages/frontend/app/components/learner-group/instructor-manager.js
@@ -5,12 +5,11 @@ import { action } from '@ember/object';
 export default class LearnerGroupInstructorManagerComponent extends Component {
   @tracked instructors = [];
   @tracked instructorGroups = [];
-  @tracked isManaging = false;
 
   constructor() {
     super(...arguments);
-    this.instructors = [];
-    this.instructorGroups = [];
+    this.instructors = this.args.instructors;
+    this.instructorGroups = this.args.instructorGroups;
   }
 
   @action
diff --git a/packages/frontend/app/components/learner-group/instructors-list.hbs b/packages/frontend/app/components/learner-group/instructors-list.hbs
new file mode 100644
index 0000000000..8ec5970c1a
--- /dev/null
+++ b/packages/frontend/app/components/learner-group/instructors-list.hbs
@@ -0,0 +1,24 @@
+<div class="learner-group-instructors-list" data-test-learner-group-instructors-list ...attributes>
+  <div class="detail-header">
+    <div class="title" data-test-title>
+      {{t "general.defaultInstructors"}}
+      ({{@learnerGroup.allInstructors.length}})
+    </div>
+    {{#if @canUpdate}}
+      <button type="button" {{on "click" @manage}} data-test-manage>
+        {{t "general.instructorsManageTitle"}}
+      </button>
+    {{/if}}
+  </div>
+  <div class="detail-content">
+    {{#if @learnerGroup.allInstructors.length}}
+      <ul class="assigned-instructors">
+        {{#each (sort-by "fullName" @learnerGroup.allInstructors) as |instructor|}}
+          <li data-test-assigned-instructor>
+            <UserNameInfo @user={{instructor}} />
+          </li>
+        {{/each}}
+      </ul>
+    {{/if}}
+  </div>
+</div>
\ No newline at end of file
diff --git a/packages/frontend/app/components/learner-group/root.hbs b/packages/frontend/app/components/learner-group/root.hbs
index 41e8b13cc4..029c630fda 100644
--- a/packages/frontend/app/components/learner-group/root.hbs
+++ b/packages/frontend/app/components/learner-group/root.hbs
@@ -118,15 +118,22 @@
           {{/each}}
         </ul>
       </div>
-      {{#if this.dataForInstructorGroupManagerLoaded}}
+      {{#if (and this.dataForInstructorGroupManagerLoaded this.isManagingInstructors)}}
         <LearnerGroup::InstructorManager
           @learnerGroup={{@learnerGroup}}
           @instructors={{this.instructors}}
           @instructorGroups={{this.instructorGroups}}
           @availableInstructorGroups={{this.availableInstructorGroups}}
           @save={{perform this.saveInstructors}}
+          @cancel={{set this "isManagingInstructors" false}}
           @canUpdate={{@canUpdate}}
         />
+      {{else}}
+        <LearnerGroup::InstructorsList
+          @learnerGroup={{@learnerGroup}}
+          @canUpdate={{@canUpdate}}
+          @manage={{set this "isManagingInstructors" true}}
+        />
       {{/if}}
       <div class="learner-group-overview-actions" data-test-overview-actions>
         <div class="title" data-test-title>
diff --git a/packages/frontend/app/components/learner-group/root.js b/packages/frontend/app/components/learner-group/root.js
index e560384733..23a9ace40f 100644
--- a/packages/frontend/app/components/learner-group/root.js
+++ b/packages/frontend/app/components/learner-group/root.js
@@ -29,6 +29,7 @@ export default class LearnerGroupRootComponent extends Component {
   @tracked showNewLearnerGroupForm = false;
   @tracked currentGroupsSaved = 0;
   @tracked totalGroupsToSave = 0;
+  @tracked isManagingInstructors = false;
 
   constructor() {
     super(...arguments);
@@ -275,6 +276,7 @@ export default class LearnerGroupRootComponent extends Component {
     this.args.learnerGroup.set('instructors', newInstructors);
     this.args.learnerGroup.set('instructorGroups', newInstructorGroups);
     await this.args.learnerGroup.save();
+    this.isManagingInstructors = false;
   });
 
   @cached
diff --git a/packages/frontend/app/styles/components.scss b/packages/frontend/app/styles/components.scss
index f2e7057bf1..220fdb8370 100644
--- a/packages/frontend/app/styles/components.scss
+++ b/packages/frontend/app/styles/components.scss
@@ -75,6 +75,7 @@
 @forward "components/learner-group/header";
 @forward "components/learner-group/instructor-group-members-list";
 @forward "components/learner-group/instructor-manager";
+@forward "components/learner-group/instructors-list";
 @forward "components/learner-group/new";
 @forward "components/learner-group/root";
 @forward "components/learner-group/user-manager";
diff --git a/packages/frontend/app/styles/components/learner-group/instructor-manager.scss b/packages/frontend/app/styles/components/learner-group/instructor-manager.scss
index abd3ca7af3..d7ff6593bb 100644
--- a/packages/frontend/app/styles/components/learner-group/instructor-manager.scss
+++ b/packages/frontend/app/styles/components/learner-group/instructor-manager.scss
@@ -18,10 +18,6 @@
   }
 
   .detail-content {
-    .assigned-instructors {
-      @include m.ilios-tag-list;
-    }
-
     .removable-instructors {
       @include m.ilios-removable-list;
       margin-bottom: 1rem;
diff --git a/packages/frontend/app/styles/components/learner-group/instructors-list.scss b/packages/frontend/app/styles/components/learner-group/instructors-list.scss
new file mode 100644
index 0000000000..f406e69a2d
--- /dev/null
+++ b/packages/frontend/app/styles/components/learner-group/instructors-list.scss
@@ -0,0 +1,25 @@
+@use "../../ilios-common/colors" as c;
+@use "../../ilios-common/mixins" as m;
+
+.learner-group-instructors-list {
+  @include m.detail-container(c.$orange);
+  border-top: 1px dotted c.$orange;
+
+  .detail-header {
+    @include m.detail-container-header;
+
+    .title {
+      @include m.detail-container-title;
+    }
+
+    .actions {
+      @include m.detail-container-actions;
+    }
+  }
+
+  .detail-content {
+    .assigned-instructors {
+      @include m.ilios-tag-list;
+    }
+  }
+}