Skip to content

Instantly share code, notes, and snippets.

@samselikoff
Created May 3, 2019 13:16
Show Gist options
  • Save samselikoff/682480b6a20ebc96596177799930025d to your computer and use it in GitHub Desktop.
Save samselikoff/682480b6a20ebc96596177799930025d to your computer and use it in GitHub Desktop.
First pass at a LoadRecords component
import Component from '@ember/component';
import { task } from 'ember-concurrency';
import { inject as service } from '@ember/service';
export default Component.extend({
tagName: '',
store: service(),
didInsertElement() {
this._super(...arguments);
this.query.perform();
},
query: task(function*() {
let params = { ...this.params };
if (this.backgroundReload !== undefined) {
params.backgroundReload = this.backgroundReload;
}
return yield this.store.loadRecords(this.modelName, params);
})
});
{{yield
this.query.isRunning
this.query.last.error
this.query.last.value
}}
<div class="bg-grey-lightest py-5">
{{#ui-container}}
{{#ui-title style='center marginless'}}
Recent episodes
{{/ui-title}}
<LoadRecords
@modelName='podcast-episode'
@params={{hash
sort='-position'
page=(hash limit=4)
}}
@backgroundReload={{false}}
as |isLoading isError latestEpisodes|>
{{#if latestEpisodes}}
<Grid @columns='lg:3' @gutters='lg:3' as |grid|>
{{#each (take 3 (without model latestEpisodes)) as |episode|}}
<grid.Column>
<Podcast::Components::PodcastCard @episode={{episode}} />
</grid.Column>
{{/each}}
</Grid>
<div class="mt-5">
<p class='text-center'>
or {{#link-to 'podcast' class='text-black font-semibold'}}View all episodes{{/link-to}}
</p>
</div>
{{/if}}
</LoadRecords>
{{/ui-container}}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment