Skip to content

Commit

Permalink
get rid of render-modifiers in sequence-block-session-manager component.
Browse files Browse the repository at this point in the history 
this removes all async loading stuff from the component. instead, the
parent component ensures to pre-load all necessary data upfront as well
as guarding against incompletely loaded data from being passed down.
  • Loading branch information
@stopfstedt
stopfstedt committed Dec 18, 2024
1 parent a4b122f commit 98dec19
Show file tree
Hide file tree
Showing 6 changed files with 234 additions and 238 deletions.
2 changes: 0 additions & 2 deletions packages/frontend/.lint-todo
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,3 @@ add|ember-template-lint|no-at-ember-render-modifiers|10|6|10|6|d919d2af254f782c0
add|ember-template-lint|no-at-ember-render-modifiers|11|6|11|6|940005188b476a060b0e5d3f05baea24ba178878|1731542400000|1762646400000|1793750400000|app/components/reports/subject/new/term.hbs
add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|23cd787c79c34a628dadb6e96dd4004d42eebb79|1733184000000|1735776000000|1738368000000|app/components/curriculum-inventory/new-sequence-block.hbs
add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|77e3831e4ae1b00caee1f808711f2e26ab452a23|1733184000000|1735776000000|1738368000000|app/components/curriculum-inventory/new-sequence-block.hbs
add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|23cd787c79c34a628dadb6e96dd4004d42eebb79|1733184000000|1735776000000|1738368000000|app/components/curriculum-inventory/sequence-block-session-manager.hbs
add|ember-template-lint|no-at-ember-render-modifiers|6|2|6|2|394d8c8b6b1bc28f48ede0d39dcbfbb4dcd8261e|1733184000000|1735776000000|1738368000000|app/components/curriculum-inventory/sequence-block-session-manager.hbs
5 changes: 3 additions & 2 deletions packages/frontend/app/components/curriculum-inventory/sequence-block-overview.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,9 +523,10 @@
</div>
</div>
{{#if this.sessions.length}}
{{#if this.isManagingSessions}}
{{#if (and this.isManagingSessions this.dataForSessionsManagerLoaded)}}
<CurriculumInventory::SequenceBlockSessionManager
@sequenceBlock={{@sequenceBlock}}
@linkedSessions={{this.linkedSessions}}
@excludedSessions={{this.excludedSessions}}
@sessions={{this.sessions}}
@cancel={{this.cancelManagingSessions}}
@save={{perform this.changeSessions}}
Expand Down
26 changes: 26 additions & 0 deletions packages/frontend/app/components/curriculum-inventory/sequence-block-overview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,32 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
});
}

@cached
get linkedSessionsData() {
return new TrackedAsyncData(this.args.sequenceBlock.sessions);
}

get linkedSessions() {
return this.linkedSessionsData.isResolved ? this.linkedSessionsData.value : [];
}

@cached
get excludedSessionsData() {
return new TrackedAsyncData(this.args.sequenceBlock.excludedSessions);
}

get excludedSessions() {
return this.excludedSessionsData.isResolved ? this.excludedSessionsData.value : [];
}

get dataForSessionsManagerLoaded() {
return (
this.sessionsData.isResolved &&
this.linkedSessionsData.isResolved &&
this.excludedSessionsData.isResolved
);
}

@cached
get parentData() {
return new TrackedAsyncData(this.args.sequenceBlock.parent);
Expand Down
245 changes: 120 additions & 125 deletions packages/frontend/app/components/curriculum-inventory/sequence-block-session-manager.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,131 +2,126 @@
class="curriculum-inventory-sequence-block-session-manager resultslist"
data-test-curriculum-inventory-sequence-block-session-manager
...attributes
{{did-insert (perform this.load)}}
{{did-update (perform this.load) @sequenceBlock @sessions}}
>
{{#unless this.load.isRunning}}
<div class="actions">
<button type="button" class="bigadd" {{on "click" (perform this.saveChanges)}} data-test-save>
<FaIcon
@icon={{if this.saveChanges.isRunning "spinner" "check"}}
@spin={{if this.saveChanges.isRunning true false}}
/>
</button>
<button type="button" class="bigcancel" {{on "click" this.close}} data-test-cancel>
<FaIcon @icon="arrow-rotate-left" />
</button>
</div>
<div class="list">
{{#let (unique-id) (unique-id) as |countAsOneLabelId excludedLabelId|}}
<table>
<thead>
<tr>
<th class="text-center count-as-one-header" colspan="2">
<input
type="checkbox"
checked={{this.allSelected}}
indeterminate={{this.someSelected}}
aria-labelledby={{countAsOneLabelId}}
{{on "click" (pick "target.value" this.toggleSelectAll)}}
/>
<label id={{countAsOneLabelId}}>{{t "general.countAsOneOffering"}}</label>
</th>
<th class="text-center count-as-one-header" colspan="2">
<input
type="checkbox"
checked={{this.allExcluded}}
indeterminate={{this.someExcluded}}
aria-labelledby={{excludedLabelId}}
{{on "click" (pick "target.value" this.toggleExcludeAll)}}
/>
<label id={{excludedLabelId}}>{{t "general.exclude"}}</label>
</th>
<SortableTh
@colspan={{3}}
@onClick={{fn this.changeSortOrder "title"}}
@sortedBy={{or (eq @sortBy "title") (eq @sortBy "title:desc")}}
@sortedAscending={{this.sortedAscending}}
>
{{t "general.sessionTitle"}}
</SortableTh>
<SortableTh
@colspan={{3}}
@onClick={{fn this.changeSortOrder "sessionType.title"}}
@sortedBy={{or
(eq @sortBy "sessionType.title")
(eq @sortBy "sessionType.title:desc")
}}
@sortedAscending={{this.sortedAscending}}
>
{{t "general.sessionType"}}
</SortableTh>
<th class="text-center" colspan="1">
{{t "general.totalTime"}}
</th>
<SortableTh
@colspan={{1}}
@onClick={{fn this.changeSortOrder "offerings.length"}}
@sortedBy={{or
(eq @sortBy "offerings.length")
(eq @sortBy "offerings.length:desc")
}}
@sortedAscending={{this.sortedAscending}}
@sortType="numeric"
>
{{t "general.offerings"}}
</SortableTh>
</tr>
</thead>
<tbody>
{{#each (sort-by @sortBy this.sessions) as |session|}}
{{#let (unique-id) as |sessionTitleLabelId|}}
<tr>
<td class="text-center" colspan="2">
<input
type="checkbox"
checked={{includes session this.linkedSessions}}
aria-labelledby={{concat countAsOneLabelId " " sessionTitleLabelId}}
{{on "change" (fn this.changeSession session)}}
/>
</td>
<td class="text-center" colspan="2">
<input
type="checkbox"
checked={{includes session this.excludedSessions}}
aria-labelledby={{concat excludedLabelId " " sessionTitleLabelId}}
{{on "change" (fn this.excludeSession session)}}
/>
</td>
<td class="text-left" colspan="3">
<label id={{sessionTitleLabelId}}>
{{#if session.isIndependentLearning}}
<strong>
({{t "general.ilm"}})
</strong>
{{/if}}
{{session.title}}
</label>
</td>
<td class="text-left" colspan="3">
{{session.sessionType.title}}
</td>
<td class="text-center" colspan="1">
{{#if (includes session this.linkedSessions)}}
{{session.maxDuration}}
{{else}}
{{session.totalSumDuration}}
<div class="actions">
<button
type="button"
class="bigadd"
{{on "click" (fn @save this.linkedSessions this.excludedSessions)}}
data-test-save
>
<FaIcon @icon="check" />
</button>
<button type="button" class="bigcancel" {{on "click" @cancel}} data-test-cancel>
<FaIcon @icon="arrow-rotate-left" />
</button>
</div>
<div class="list">
{{#let (unique-id) (unique-id) as |countAsOneLabelId excludedLabelId|}}
<table>
<thead>
<tr>
<th class="text-center count-as-one-header" colspan="2">
<input
type="checkbox"
checked={{this.allSelected}}
indeterminate={{this.someSelected}}
aria-labelledby={{countAsOneLabelId}}
{{on "click" (pick "target.value" this.toggleSelectAll)}}
/>
<label id={{countAsOneLabelId}}>{{t "general.countAsOneOffering"}}</label>
</th>
<th class="text-center count-as-one-header" colspan="2">
<input
type="checkbox"
checked={{this.allExcluded}}
indeterminate={{this.someExcluded}}
aria-labelledby={{excludedLabelId}}
{{on "click" (pick "target.value" this.toggleExcludeAll)}}
/>
<label id={{excludedLabelId}}>{{t "general.exclude"}}</label>
</th>
<SortableTh
@colspan={{3}}
@onClick={{fn this.changeSortOrder "title"}}
@sortedBy={{or (eq @sortBy "title") (eq @sortBy "title:desc")}}
@sortedAscending={{this.sortedAscending}}
>
{{t "general.sessionTitle"}}
</SortableTh>
<SortableTh
@colspan={{3}}
@onClick={{fn this.changeSortOrder "sessionType.title"}}
@sortedBy={{or
(eq @sortBy "sessionType.title")
(eq @sortBy "sessionType.title:desc")
}}
@sortedAscending={{this.sortedAscending}}
>
{{t "general.sessionType"}}
</SortableTh>
<th class="text-center" colspan="1">
{{t "general.totalTime"}}
</th>
<SortableTh
@colspan={{1}}
@onClick={{fn this.changeSortOrder "offerings.length"}}
@sortedBy={{or (eq @sortBy "offerings.length") (eq @sortBy "offerings.length:desc")}}
@sortedAscending={{this.sortedAscending}}
@sortType="numeric"
>
{{t "general.offerings"}}
</SortableTh>
</tr>
</thead>
<tbody>
{{#each (sort-by @sortBy this.sessions) as |session|}}
{{#let (unique-id) as |sessionTitleLabelId|}}
<tr>
<td class="text-center" colspan="2">
<input
type="checkbox"
checked={{includes session this.linkedSessions}}
aria-labelledby={{concat countAsOneLabelId " " sessionTitleLabelId}}
{{on "change" (fn this.changeSession session)}}
/>
</td>
<td class="text-center" colspan="2">
<input
type="checkbox"
checked={{includes session this.excludedSessions}}
aria-labelledby={{concat excludedLabelId " " sessionTitleLabelId}}
{{on "change" (fn this.excludeSession session)}}
/>
</td>
<td class="text-left" colspan="3">
<label id={{sessionTitleLabelId}}>
{{#if session.isIndependentLearning}}
<strong>
({{t "general.ilm"}})
</strong>
{{/if}}
</td>
<td class="text-center" colspan="1">
{{session.offerings.length}}
</td>
</tr>
{{/let}}
{{/each}}
</tbody>
</table>
{{/let}}
</div>
{{/unless}}
{{session.title}}
</label>
</td>
<td class="text-left" colspan="3">
{{session.sessionType.title}}
</td>
<td class="text-center" colspan="1">
{{#if (includes session this.linkedSessions)}}
{{session.maxDuration}}
{{else}}
{{session.totalSumDuration}}
{{/if}}
</td>
<td class="text-center" colspan="1">
{{session.offerings.length}}
</td>
</tr>
{{/let}}
{{/each}}
</tbody>
</table>
{{/let}}
</div>
</section>
23 changes: 7 additions & 16 deletions packages/frontend/app/components/curriculum-inventory/sequence-block-session-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,20 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { service } from '@ember/service';
import { dropTask, restartableTask } from 'ember-concurrency';

export default class SequenceBlockSessionManagerComponent extends Component {
@service store;
@tracked excludedSessions = [];
@tracked linkedSessions = [];
@tracked sessions = [];

constructor() {
super(...arguments);
this.linkedSessions = this.args.linkedSessions;
this.excludedSessions = this.args.excludedSessions;
this.sessions = this.args.sessions;
}

get allSelected() {
if (
!this.linkedSessions ||
Expand Down Expand Up @@ -129,19 +135,4 @@ export default class SequenceBlockSessionManagerComponent extends Component {
}
this.args.setSortBy(what);
}

@action
close() {
this.args.cancel();
}

load = restartableTask(async () => {
this.linkedSessions = await this.args.sequenceBlock.sessions;
this.excludedSessions = await this.args.sequenceBlock.excludedSessions;
this.sessions = await this.args.sessions;
});

saveChanges = dropTask(async () => {
await this.args.save(this.linkedSessions, this.excludedSessions);
});
}
Loading

0 comments on commit 98dec19

Please sign in to comment.