From 98dec19f6243a0490ddc8a6060be98860ce2654d Mon Sep 17 00:00:00 2001 From: Stefan Topfstedt Date: Wed, 18 Dec 2024 14:40:01 -0800 Subject: [PATCH] get rid of render-modifiers in sequence-block-session-manager component. 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. --- packages/frontend/.lint-todo | 2 - .../sequence-block-overview.hbs | 5 +- .../sequence-block-overview.js | 26 ++ .../sequence-block-session-manager.hbs | 245 +++++++++--------- .../sequence-block-session-manager.js | 23 +- .../sequence-block-session-manager-test.js | 171 ++++++------ 6 files changed, 234 insertions(+), 238 deletions(-) diff --git a/packages/frontend/.lint-todo b/packages/frontend/.lint-todo index 7169acfb92..3ab510cdb3 100644 --- a/packages/frontend/.lint-todo +++ b/packages/frontend/.lint-todo @@ -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 diff --git a/packages/frontend/app/components/curriculum-inventory/sequence-block-overview.hbs b/packages/frontend/app/components/curriculum-inventory/sequence-block-overview.hbs index 8e63fc5a5a..79bf6df6bd 100644 --- a/packages/frontend/app/components/curriculum-inventory/sequence-block-overview.hbs +++ b/packages/frontend/app/components/curriculum-inventory/sequence-block-overview.hbs @@ -523,9 +523,10 @@ {{#if this.sessions.length}} - {{#if this.isManagingSessions}} + {{#if (and this.isManagingSessions this.dataForSessionsManagerLoaded)}} - {{#unless this.load.isRunning}} -
- - -
-
- {{#let (unique-id) (unique-id) as |countAsOneLabelId excludedLabelId|}} - - - - - - - {{t "general.sessionTitle"}} - - - {{t "general.sessionType"}} - - - - {{t "general.offerings"}} - - - - - {{#each (sort-by @sortBy this.sessions) as |session|}} - {{#let (unique-id) as |sessionTitleLabelId|}} - - - - - - + + + + + {{/let}} + {{/each}} + +
- - - - - - - {{t "general.totalTime"}} -
- - - - - - - {{session.sessionType.title}} - - {{#if (includes session this.linkedSessions)}} - {{session.maxDuration}} - {{else}} - {{session.totalSumDuration}} +
+ + +
+
+ {{#let (unique-id) (unique-id) as |countAsOneLabelId excludedLabelId|}} + + + + + + + {{t "general.sessionTitle"}} + + + {{t "general.sessionType"}} + + + + {{t "general.offerings"}} + + + + + {{#each (sort-by @sortBy this.sessions) as |session|}} + {{#let (unique-id) as |sessionTitleLabelId|}} + + + + - - - {{/let}} - {{/each}} - -
+ + + + + + + {{t "general.totalTime"}} +
+ + + + + - {{session.offerings.length}} -
- {{/let}} -
- {{/unless}} + {{session.title}} + + 		+ {{session.sessionType.title}} + + {{#if (includes session this.linkedSessions)}} + {{session.maxDuration}} + {{else}} + {{session.totalSumDuration}} + {{/if}} + + {{session.offerings.length}} +
+ {{/let}} +
\ No newline at end of file diff --git a/packages/frontend/app/components/curriculum-inventory/sequence-block-session-manager.js b/packages/frontend/app/components/curriculum-inventory/sequence-block-session-manager.js index 102a784960..fb13f5fabb 100644 --- a/packages/frontend/app/components/curriculum-inventory/sequence-block-session-manager.js +++ b/packages/frontend/app/components/curriculum-inventory/sequence-block-session-manager.js @@ -2,7 +2,6 @@ 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; @@ -10,6 +9,13 @@ export default class SequenceBlockSessionManagerComponent extends Component { @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 || @@ -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); - }); } diff --git a/packages/frontend/tests/integration/components/curriculum-inventory/sequence-block-session-manager-test.js b/packages/frontend/tests/integration/components/curriculum-inventory/sequence-block-session-manager-test.js index 7b4aee524f..07f02a81a5 100644 --- a/packages/frontend/tests/integration/components/curriculum-inventory/sequence-block-session-manager-test.js +++ b/packages/frontend/tests/integration/components/curriculum-inventory/sequence-block-session-manager-test.js @@ -55,25 +55,29 @@ module( sessionType: sessionType4, ilmSession, }); - const block = this.server.create('curriculum-inventory-sequence-block', { - sessions: [session1, session3], - excludedSessions: [session2], - }); - const blockModel = await this.owner + const sessionModel1 = await this.owner + .lookup('service:store') + .findRecord('session', session1.id); + const sessionModel2 = await this.owner + .lookup('service:store') + .findRecord('session', session2.id); + const sessionModel3 = await this.owner .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); + .findRecord('session', session3.id); const sessionModels = await this.owner.lookup('service:store').findAll('session'); - this.set('sessions', sessionModels); - this.set('sequenceBlock', blockModel); + this.set('linkedSessions', [sessionModel1, sessionModel3]); + this.set('excludedSessions', [sessionModel2]); this.set('sortBy', 'title'); await render(hbs``); - assert.strictEqual( component.header.countAsOneOffering.text, 'Count as one offering', @@ -190,20 +194,16 @@ module( }); test('empty list', async function (assert) { - const block = this.server.create('curriculum-inventory-sequence-block'); - const blockModel = await this.owner - .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); - this.set('sequenceBlock', blockModel); this.set('sortBy', 'title'); - await render(hbs``); - assert.ok(component.header.isVisible); assert.strictEqual(component.sessions.length, 0); }); @@ -216,27 +216,25 @@ module( sessionType, maxDuration: 0, }); - const block = this.server.create('curriculum-inventory-sequence-block', { - sessions: [session], - }); - const blockModel = await this.owner + const sessionModel = await this.owner .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); + .findRecord('session', session.id); const sessionModels = await this.owner.lookup('service:store').findAll('session'); this.set('sessions', sessionModels); - this.set('sequenceBlock', blockModel); + this.set('linkedSession', [sessionModel]); this.set('sortBy', 'id'); this.set('setSortBy', function (what) { assert.strictEqual(what, 'title', 'Sorting callback gets called for session titles.'); }); - await render(hbs``); - await component.header.title.click(); }); @@ -248,15 +246,12 @@ module( sessionType, maxDuration: 0, }); - const block = this.server.create('curriculum-inventory-sequence-block', { - sessions: [session], - }); - const blockModel = await this.owner + const sessionModel = await this.owner .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); + .findRecord('session', session.id); const sessionModels = await this.owner.lookup('service:store').findAll('session'); this.set('sessions', sessionModels); - this.set('sequenceBlock', blockModel); + this.set('linkedSessions', [sessionModel]); this.set('sortBy', 'id'); this.set('setSortBy', function (what) { assert.strictEqual( @@ -265,14 +260,15 @@ module( 'Sorting callback gets called for session types.', ); }); - await render(hbs``); - await component.header.sessionType.click(); }); @@ -284,15 +280,12 @@ module( sessionType, maxDuration: 0, }); - const block = this.server.create('curriculum-inventory-sequence-block', { - sessions: [session], - }); - const blockModel = await this.owner + const sessionModel = await this.owner .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); + .findRecord('session', session.id); const sessionModels = await this.owner.lookup('service:store').findAll('session'); this.set('sessions', sessionModels); - this.set('sequenceBlock', blockModel); + this.set('linkedSessions', [sessionModel]); this.set('sortBy', 'id'); this.set('setSortBy', function (what) { assert.strictEqual( @@ -301,14 +294,15 @@ module( 'Sorting callback gets called for offerings count.', ); }); - await render(hbs``); - await component.header.offeringsCount.click(); }); @@ -330,24 +324,22 @@ module( sessionType, offerings: [offering1, offering2], }); - const block = this.server.create('curriculum-inventory-sequence-block', { - sessions: [session], - }); - const blockModel = await this.owner + const sessionModel = await this.owner .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); + .findRecord('session', session.id); const sessionModels = await this.owner.lookup('service:store').findAll('session'); this.set('sessions', sessionModels); - this.set('sequenceBlock', blockModel); + this.set('linkedSessions', [sessionModel]); this.set('sortBy', 'id'); - await render(hbs``); - assert.strictEqual(component.sessions[0].totalTime.text, '30.00'); assert.ok(component.header.countAsOneOffering.isChecked); assert.notOk(component.header.countAsOneOffering.isPartiallyChecked); @@ -380,7 +372,7 @@ module( endDate: in30Hours, }); const sessionType = this.server.create('session-type'); - const session1 = this.server.create('session', { + const session = this.server.create('session', { title: 'Alpha', sessionType: sessionType, offerings: [offering1, offering2], @@ -390,24 +382,22 @@ module( sessionType: sessionType, offerings: [offering3, offering4], }); - const block = this.server.create('curriculum-inventory-sequence-block', { - sessions: [session1], - }); - const blockModel = await this.owner + const sessionModel = await this.owner .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); + .findRecord('session', session.id); const sessionModels = await this.owner.lookup('service:store').findAll('session'); this.set('sessions', sessionModels); - this.set('sequenceBlock', blockModel); + this.set('linkedSessions', [sessionModel]); this.set('sortBy', 'id'); - await render(hbs``); - assert.notOk(component.header.countAsOneOffering.isChecked); assert.ok(component.header.countAsOneOffering.isPartiallyChecked); assert.ok(component.sessions[0].countAsOneOffering.isChecked); @@ -440,26 +430,26 @@ module( title: 'Omega', sessionType: sessionType, }); - const block = this.server.create('curriculum-inventory-sequence-block', { - excludedSessions: [session1], - sessions: [session2], - }); - const blockModel = await this.owner + const sessionModel1 = await this.owner .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); + .findRecord('session', session1.id); + const sessionModel2 = await this.owner + .lookup('service:store') + .findRecord('session', session2.id); const sessionModels = await this.owner.lookup('service:store').findAll('session'); this.set('sessions', sessionModels); - this.set('sequenceBlock', blockModel); + this.set('linkedSessions', [sessionModel2]); + this.set('excludedSessions', [sessionModel1]); this.set('sortBy', 'id'); - await render(hbs``); - assert.notOk(component.header.exclude.isChecked); assert.ok(component.header.exclude.isPartiallyChecked); assert.ok(component.sessions[0].exclude.isChecked); @@ -487,16 +477,16 @@ module( title: 'Omega', sessionType: sessionType, }); - const block = this.server.create('curriculum-inventory-sequence-block', { - sessions: [session1], - excludedSessions: [session2], - }); - const blockModel = await this.owner + const sessionModel1 = await this.owner .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); + .findRecord('session', session1.id); + const sessionModel2 = await this.owner + .lookup('service:store') + .findRecord('session', session2.id); const sessionModels = await this.owner.lookup('service:store').findAll('session'); this.set('sessions', sessionModels); - this.set('sequenceBlock', blockModel); + this.set('linkedSessions', [sessionModel1]); + this.set('excludedSessions', [sessionModel2]); this.set('sortBy', 'id'); this.set('save', (countAsOneOfferingSessions, excludedSessions) => { assert.strictEqual(countAsOneOfferingSessions.length, 1); @@ -504,15 +494,16 @@ module( assert.strictEqual(excludedSessions.length, 1); assert.strictEqual(excludedSessions[0].title, 'Alpha'); }); - await render(hbs``); - assert.ok(component.sessions[0].countAsOneOffering.isChecked); assert.notOk(component.sessions[0].exclude.isChecked); assert.notOk(component.sessions[1].countAsOneOffering.isChecked); @@ -526,24 +517,18 @@ module( test('cancel', async function (assert) { assert.expect(1); - const block = this.server.create('curriculum-inventory-sequence-block'); - const blockModel = await this.owner - .lookup('service:store') - .findRecord('curriculum-inventory-sequence-block', block.id); - - this.set('sequenceBlock', blockModel); this.set('sortBy', 'title'); this.set('cancel', () => { assert.ok(true, 'Cancel action fired.'); }); - await render(hbs``); - await component.cancel(); }); },