Skip to content

Commit cd69694

Browse files
abhinavk96abhinavk96
authored
feat: Use ember tables for event speakers table" (#3302)
1 parent 0a26c90 commit cd69694

File tree

8 files changed

+122
-107
lines changed

8 files changed

+122
-107
lines changed

‎app/controllers/events/view/speakers/list.js

Lines changed: 87 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,92 @@
11
import Controller from '@ember/controller';
2+
import { computed, action } from '@ember/object';
3+
import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
24

3-
export default Controller.extend({
4-
columns: [
5-
{
6-
propertyName : 'thumbnailImageUrl',
7-
title : ' ',
8-
template : 'components/ui-table/cell/events/view/speakers/speaker-logo',
9-
disableSorting : true
10-
},
11-
{
12-
propertyName : 'name',
13-
title : 'Name'
14-
},
15-
{
16-
propertyName : 'email',
17-
title : 'Email'
18-
},
19-
{
20-
propertyName : 'mobile',
21-
template : 'components/ui-table/cell/events/view/speakers/speaker-mobile',
22-
title : 'Phone'
23-
},
24-
{
25-
propertyName : 'sessions',
26-
title : 'Submitted Sessions',
27-
template : 'components/ui-table/cell/events/view/speakers/cell-simple-sessions',
28-
disableSorting : true
29-
},
30-
{
31-
propertyName : 'is-featured',
32-
title : 'Featured speaker',
33-
template : 'components/ui-table/cell/events/view/speakers/cell-is-featured',
34-
disableSorting : true
35-
},
36-
{
37-
propertyName : '',
38-
title : 'Actions',
39-
template : 'components/ui-table/cell/events/view/speakers/cell-buttons'
5+
6+
export default class extends Controller.extend(EmberTableControllerMixin) {
7+
@computed()
8+
get columns() {
9+
return [
10+
{
11+
name : ' ',
12+
valuePath : 'thumbnailImageUrl',
13+
extraValuePaths : ['photoUrl'],
14+
cellComponent : 'ui-table/cell/events/view/speakers/speaker-logo'
15+
},
16+
{
17+
name : 'Name',
18+
valuePath : 'name'
19+
},
20+
{
21+
name : 'Email',
22+
valuePath : 'email'
23+
},
24+
{
25+
name : 'Phone',
26+
valuePath : 'mobile',
27+
cellComponent : 'ui-table/cell/events/view/speakers/speaker-mobile'
28+
},
29+
{
30+
name : 'Submitted Sessions',
31+
valuePath : 'sessions',
32+
cellComponent : 'ui-table/cell/events/view/speakers/cell-simple-sessions'
33+
},
34+
{
35+
name : 'Featured speaker',
36+
valuePath : 'id',
37+
extraValuePaths : ['isFeatured'],
38+
cellComponent : 'ui-table/cell/events/view/speakers/cell-is-featured',
39+
actions : {
40+
toggleFeatured: this.toggleFeatured.bind(this)
41+
}
42+
},
43+
{
44+
name : 'Actions',
45+
valuePath : 'id',
46+
cellComponent : 'ui-table/cell/events/view/speakers/cell-buttons',
47+
actions : {
48+
deleteSpeaker : this.deleteSpeaker.bind(this),
49+
editSpeaker : this.editSpeaker.bind(this),
50+
viewSpeaker : this.viewSpeaker.bind(this)
51+
}
52+
}
53+
];
54+
}
55+
56+
@action
57+
async deleteSpeaker(speaker_id) {
58+
this.set('isLoading', true);
59+
let speaker = this.store.peekRecord('speaker', speaker_id, { backgroundReload: true });
60+
try {
61+
await speaker.destroyRecord();
62+
this.notify.success(this.l10n.t('Speaker has been deleted successfully.'));
63+
} catch (e) {
64+
console.warn(e);
65+
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
4066
}
41-
],
42-
actions: {
43-
deleteSpeaker(speaker) {
44-
this.set('isLoading', true);
45-
speaker.destroyRecord()
46-
.then(() => {
47-
this.notify.success(this.l10n.t('Speaker has been deleted successfully.'));
48-
})
49-
.catch(e => {
50-
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
51-
console.warn(e);
52-
})
53-
.finally(() => {
54-
this.set('isLoading', false);
55-
});
56-
},
57-
editSpeaker(id) {
58-
this.transitionToRoute('events.view.speakers.edit', id);
59-
},
60-
viewSpeaker(id) {
61-
this.transitionToRoute('events.view.speakers.edit', id);
62-
},
63-
toggleFeatured(speaker) {
64-
speaker.toggleProperty('isFeatured');
65-
speaker.save()
66-
.then(() => {
67-
this.notify.success(this.l10n.t('Speaker details modified successfully'));
68-
})
69-
.catch(() => {
70-
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
71-
});
67+
this.set('isLoading', false);
68+
}
69+
70+
@action
71+
editSpeaker(id) {
72+
this.transitionToRoute('events.view.speakers.edit', id);
73+
}
74+
75+
@action
76+
viewSpeaker(id) {
77+
this.transitionToRoute('events.view.speakers.edit', id);
78+
}
79+
80+
@action
81+
async toggleFeatured(speaker_id) {
82+
let speaker = this.store.peekRecord('speaker', speaker_id, { backgroundReload: false });
83+
speaker.toggleProperty('isFeatured');
84+
try {
85+
await speaker.save();
86+
this.notify.success(this.l10n.t('Speaker details modified successfully'));
87+
} catch (e) {
88+
console.warn(e);
89+
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
7290
}
7391
}
74-
});
92+
}

‎app/routes/events/view/speakers/list.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Route from '@ember/routing/route';
2+
import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
23

3-
export default Route.extend({
4+
export default class extends Route.extend(EmberTableRouteMixin) {
45
titleToken() {
56
switch (this.get('params.speakers_status')) {
67
case 'pending':
@@ -10,9 +11,10 @@ export default Route.extend({
1011
case 'rejected':
1112
return this.l10n.t('Rejected');
1213
}
13-
},
14+
}
1415
async model(params) {
1516
this.set('params', params);
17+
const searchField = 'name';
1618
let filterOptions = [];
1719
if (params.speakers_status === 'pending') {
1820
filterOptions = [
@@ -65,21 +67,19 @@ export default Route.extend({
6567
} else {
6668
filterOptions = [];
6769
}
68-
let queryObject = {
69-
include : 'sessions',
70-
filter : filterOptions,
71-
'page[size]' : 10
70+
71+
filterOptions = this.applySearchFilters(filterOptions, params, searchField);
72+
73+
let queryString = {
74+
include : 'sessions',
75+
filter : filterOptions,
76+
'page[size]' : params.per_page || 10,
77+
'page[number]' : params.page || 1
7278
};
7379

74-
let store = this.modelFor('events.view');
7580

76-
let data = await store.query('speakers', queryObject);
81+
queryString = this.applySortFilters(queryString, params);
7782

78-
return {
79-
data,
80-
store,
81-
query : queryObject,
82-
objectType : 'speakers'
83-
};
83+
return this.asArray(this.modelFor('events.view').query('speakers', queryString));
8484
}
85-
});
85+
}

‎app/templates/components/ui-table/cell/events/view/speakers/cell-buttons.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="ui {{if device.isMobile 'horizontal' 'vertical'}} compact basic buttons">
2-
{{#ui-popup content=(t 'View') class='ui icon button' click=(action viewSpeaker record.id) position='left center'}}
2+
{{#ui-popup content=(t 'View') class='ui icon button' click=(action props.actions.viewSpeaker record) position='left center'}}
33
<i class="unhide icon"></i>
44
{{/ui-popup}}
5-
{{#ui-popup content=(t 'Edit') class='ui icon button' click=(action editSpeaker record.id) position='left center'}}
5+
{{#ui-popup content=(t 'Edit') class='ui icon button' click=(action props.actions.editSpeaker record) position='left center'}}
66
<i class="edit icon"></i>
77
{{/ui-popup}}
8-
{{#ui-popup content=(t 'Delete') click=(action (confirm (t 'Are you sure you would like to delete this Speaker?') (action deleteSpeaker record))) class='ui icon button' position='left center'}}
8+
{{#ui-popup content=(t 'Delete') click=(action (confirm (t 'Are you sure you would like to delete this Speaker?') (action props.actions.deleteSpeaker record))) class='ui icon button' position='left center'}}
99
<i class="trash outline icon"></i>
1010
{{/ui-popup}}
1111
</div>

‎app/templates/components/ui-table/cell/events/view/speakers/cell-is-featured.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{{ui-checkbox class='toggle' checked=record.isFeatured onChange=(action toggleFeatured record)}}
1+
{{ui-checkbox class='toggle' checked=extraRecords.isFeatured onChange=(action props.actions.toggleFeatured record)}}

‎app/templates/components/ui-table/cell/events/view/speakers/cell-simple-sessions.hbs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<div class="ui list">
2-
{{#each record.sessions as |session|}}
2+
{{#each record as |session|}}
33
{{#if (not eq session.deletedAt)}}
44
<div class="item">
55
<div class="item">
6-
{{Colour}}
76
<div class="ui {{session-color session.state}} horizontal label">{{session.state}}</div>
87
{{session.title}}
98
</div>

‎app/templates/components/ui-table/cell/events/view/speakers/speaker-logo.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<div class="ui">
2-
<img alt="Speaker" class="ui middle aligned tiny circular image" src="{{if record.thumbnailImageUrl record.thumbnailImageUrl (if record.photoUrl record.photoUrl '/images/placeholders/avatar.png')}}">
2+
<img alt="Speaker" class="ui middle aligned tiny circular image" src="{{if record record (if extraRecords.photoUrl extraRecords.photoUrl '/images/placeholders/avatar.png')}}">
33
</div>

‎app/templates/components/ui-table/cell/events/view/speakers/speaker-mobile.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
{{#if (not-eq record.mobile null)}}
2-
{{record.mobile}}
1+
{{#if record}}
2+
{{record}}
33
{{else}}
44
{{t 'Not Provided'}}
55
{{/if}}

‎app/templates/events/view/speakers/list.hbs

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
<div class="sixteen wide column">
2-
{{events/events-table columns=columns
3-
data=model.data
4-
store=model.store
5-
query=model.query
6-
isNotStoreQuery = true
7-
modelName = model.objectType
8-
useNumericPagination=true
9-
showGlobalFilter=true
10-
showPageSize=true
11-
deleteSpeaker=(action 'deleteSpeaker')
12-
editSpeaker=(action 'editSpeaker')
13-
viewSpeaker=(action 'viewSpeaker')
14-
toggleFeatured = (action 'toggleFeatured')
15-
customGlobalFilter='name'
2+
{{tables/default columns=columns
3+
rows=model.data
4+
currentPage=page
5+
pageSize=per_page
6+
searchQuery=search
7+
sortBy=sort_by
8+
sortDir=sort_dir
9+
metaData=model.meta
10+
filterOptions=filterOptions
11+
widthConstraint="eq-container"
12+
resizeMode="fluid"
13+
fillMode="equal-column"
1614
}}
1715
</div>

0 commit comments

Comments
 (0)