Merge pull request #7915 from michaelchadwick/frontend-5560-session-o…

…ffering-table-header-fix fix visual layer display bug when editing session offering
ilios · Jul 1, 2024 · 58d0227 · 58d0227
2 parents a6eecda + 73e536d
commit 58d0227
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 5 deletions.
diff --git a/packages/ilios-common/addon/components/course-sessions.hbs b/packages/ilios-common/addon/components/course-sessions.hbs
@@ -63,6 +63,7 @@
         (gt this.sessionsWithOfferings.length 0)
       }}
       @toggleExpandAll={{this.toggleExpandAll}}
+      @headerIsLocked={{this.tableHeadersLocked}}
     />
     {{#if this.sessions}}
       <SessionsGrid
@@ -72,6 +73,8 @@
         @expandedSessionIds={{this.expandedSessionIds}}
         @closeSession={{perform this.closeSession}}
         @expandSession={{perform this.expandSession}}
+        @headerIsLocked={{this.tableHeadersLocked}}
+        @setHeaderLockedStatus={{this.setHeaderLockedStatus}}
       />
     {{else}}
       <SessionsGridLoading @count={{this.sessionsCount}} />

diff --git a/packages/ilios-common/addon/components/course-sessions.js b/packages/ilios-common/addon/components/course-sessions.js
@@ -17,6 +17,13 @@ export default class CourseSessionsComponent extends Component {
   @tracked filterByLocalCache = [];
   @tracked showNewSessionForm = false;
 
+  @tracked tableHeadersLocked = true;
+
+  @action
+  setHeaderLockedStatus(isEditing) {
+    this.tableHeadersLocked = !isEditing;
+  }
+
   @cached
   get loadedCourseSessionsData() {
     return new TrackedAsyncData(this.dataLoader.loadCourseSessions(this.args.course.id));

diff --git a/packages/ilios-common/addon/components/sessions-grid-header.hbs b/packages/ilios-common/addon/components/sessions-grid-header.hbs
@@ -1,4 +1,4 @@
-<div class="sessions-grid-header" data-test-sessions-grid-header>
+<div class="sessions-grid-header{{if @headerIsLocked " locked"}}" data-test-sessions-grid-header>
     <span class="expand-collapse-control" data-test-expand-collapse-all>
       {{#if @showExpandAll}}
         <button

diff --git a/packages/ilios-common/addon/components/sessions-grid-offering-table-offerings.hbs b/packages/ilios-common/addon/components/sessions-grid-offering-table-offerings.hbs
@@ -8,5 +8,6 @@
     @startTime={{format-date @offeringTimeBlock.startDate hour="2-digit" minute="2-digit"}}
     @durationHours={{@offeringTimeBlock.durationHours}}
     @durationMinutes={{@offeringTimeBlock.durationMinutes}}
+    @setHeaderLockedStatus={{@setHeaderLockedStatus}}
   />
 {{/each}}
diff --git a/packages/ilios-common/addon/components/sessions-grid-offering-table.hbs b/packages/ilios-common/addon/components/sessions-grid-offering-table.hbs
@@ -1,5 +1,5 @@
 <table class="sessions-grid-offering-table" data-test-sessions-grid-offering-table>
-  <thead>
+  <thead class={{if @headerIsLocked 'locked'}}>
     <tr>
       <th colspan="2">
         {{t "general.when"}}
@@ -43,6 +43,7 @@
         <SessionsGridOfferingTableOfferings
           @offeringTimeBlock={{offeringTimeBlock}}
           @canUpdate={{this.canUpdate}}
+          @setHeaderLockedStatus={{@setHeaderLockedStatus}}
         />
       {{/each}}
     {{/each}}

diff --git a/packages/ilios-common/addon/components/sessions-grid-offering.hbs b/packages/ilios-common/addon/components/sessions-grid-offering.hbs
@@ -114,7 +114,8 @@
             class="link-button"
             data-test-edit
             type="button"
-            {{on "click" (set this.isEditing (not this.isEditing))}}>
+            {{on "click" this.toggleEditing}}
+          >
             <FaIcon
               @icon="pencil"
               @title={{t "general.edit"}}

diff --git a/packages/ilios-common/addon/components/sessions-grid-offering.js b/packages/ilios-common/addon/components/sessions-grid-offering.js
@@ -60,6 +60,7 @@ export default class SessionsGridOffering extends Component {
   @action
   close() {
     this.isEditing = false;
+    this.args.setHeaderLockedStatus(this.isEditing);
     scrollIntoView(this.row);
   }
 
@@ -97,6 +98,7 @@ export default class SessionsGridOffering extends Component {
         instructorGroups,
         instructors,
       });
+      this.toggleEditing();
       await this.args.offering.save();
       this.updateUi.perform();
     },
@@ -109,4 +111,9 @@ export default class SessionsGridOffering extends Component {
     await timeout(4000);
     this.wasUpdated = false;
   });
+
+  toggleEditing = () => {
+    this.isEditing = !this.isEditing;
+    this.args.setHeaderLockedStatus(this.isEditing);
+  };
 }
diff --git a/packages/ilios-common/addon/components/sessions-grid.hbs b/packages/ilios-common/addon/components/sessions-grid.hbs
@@ -52,6 +52,8 @@
         <SessionsGridLastUpdated @session={{session}} />
         <SessionsGridOfferingTable
           @session={{session}}
+          @headerIsLocked={{@headerIsLocked}}
+          @setHeaderLockedStatus={{@setHeaderLockedStatus}}
         />
       {{/if}}
     </div>

diff --git a/packages/ilios-common/app/styles/ilios-common/components/sessions-grid-header.scss b/packages/ilios-common/app/styles/ilios-common/components/sessions-grid-header.scss
@@ -8,10 +8,13 @@
   color: c.$white;
   @include m.font-size("small");
   font-weight: normal;
-  position: sticky;
   top: 0;
   z-index: 1;
 
+  &.locked {
+    position: sticky;
+  }
+
   .sortable-heading {
     padding: 0.5rem 0;
   }

diff --git a/packages/ilios-common/app/styles/ilios-common/components/sessions-grid-offering-table.scss b/packages/ilios-common/app/styles/ilios-common/components/sessions-grid-offering-table.scss
@@ -12,9 +12,12 @@
 
   thead {
     color: c.$white;
-    position: sticky;
     top: 2rem;
 
+    &.locked {
+      position: sticky;
+    }
+
     th {
       @include m.font-size("small");
       font-weight: normal;