Ember Table set up & Manage events table #3169

abhinavk96 · 2019-06-22T06:35:52Z

@niranjan94 I am in the midst of implementing this, I need feedback on certain conventions.

1 > Is this the right way to reopen and initialize the table?

2> If not, is there any reference for it other than API docs.

3> Actions. What would be a good way to pass them, while keeping the layout general still.

4> Please ignore pagination boiler-plate for now.

5 > Pagination | Should it be inside tfoot? Or outside the table

6 > Search bar | Should it be in thead ? Or outside the table tag
Preview ~~so far~~:

niranjan94 · 2019-06-22T10:51:26Z

app/templates/components/tables/events/list.hbs

@@ -0,0 +1,16 @@
+{{#ember-table class="ui table" as |t|}}


No need to pass in the class ui table here

niranjan94 · 2019-06-22T10:51:38Z

package.json

    "@bower_components/tinyColorPicker": "PitPik/tinyColorPicker#^1.1.1",
-    "@bower_components/wysihtml": "Voog/wysihtml#^0.5.5"
+    "@bower_components/wysihtml": "Voog/wysihtml#^0.5.5",
+    "ember-table": "addepar/ember-table#0aa5637"


Move this to devDependencies

niranjan94 · 2019-06-22T10:52:37Z

I am in the midst of implementing this, I need feedback on certain conventions.

What you're doing is fine.
Which actions are we talking about ?
Sure. Ignored.
Outside the table.
Outside the table.

abhinavk96 · 2019-06-22T11:00:55Z

Which actions are we talking about?

@niranjan94 Actions which are defined inside the controller but are triggered from buttons inside individual cell components. We were using closure actions, so they were passed from the route template to the table. Components directly made use of them. However, they didn't need to be explicitly passed to the cell component, passing them, to the table was enough. It's not true in this case. Passing all the actions to each commponent cell seems like overkill.

niranjan94 · 2019-06-22T11:09:48Z

app/templates/components/tables/events/list.hbs

@@ -0,0 +1,16 @@
+{{#ember-table class="ui table" as |t|}}
+  {{t.head columns=columns}}


We don't want to put all of this boilerplate code for every table we want to render. So move this out to a component. And then call that component here with the rows, columns.

niranjan94 · 2019-06-22T11:10:44Z

For the actions ...

Let me try something out locally and get back to you.

abhinavk96 · 2019-06-22T11:12:48Z

Yeah, exactly I had this here for the moment as I was experimenting with actions. This would be moved to a base component

…

On Sat, 22 Jun 2019 at 4:39 PM, Niranjan Rajendran ***@***.***> wrote: ***@***.**** requested changes on this pull request. ------------------------------ In app/templates/components/tables/events/list.hbs <#3169 (comment)> : > @@ -0,0 +1,16 @@ +{{#ember-table class="ui table" as |t|}} + {{t.head columns=columns}} We don't want to put all of this boilerplate code for every table we want to render. So move this out to a component. And then call that component here with the rows, columns. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3169?email_source=notifications&email_token=AEDUDRJKTTYLXCMOBBFD6KTP3YCAFA5CNFSM4H2WFA3KYY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOB4K6AJQ#pullrequestreview-253091878>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEDUDRIEZACHBDC33CCM6ELP3YCAFANCNFSM4H2WFA3A> .

abhinavk96 · 2019-06-22T12:13:31Z

~~@niranjan94 For pagination, should we follow a queryParams approach? Wherein I update the query param with refreshModel true so that new data gets loaded into a table?~~

Going ahead with it at the moment, load speeds are much better than ember-model tables.

abhinavk96 · 2019-06-25T04:54:08Z

@niranjan94 I have completed the pagination functionality, both logic and template, please review that portion. I will work on sorting, search next.

niranjan94 · 2019-06-26T05:21:55Z

app/components/tables/utilities/page-size-input.js

+import Component from '@ember/component';
+import { A } from '@ember/array';
+
+export default Component.extend({


Lets start using ES6 classes + decorators for all new resources. That's the way ember is moving towards.

niranjan94 · 2019-06-26T17:53:24Z

app/components/tables/utilities/page-size-input.js

+import { A } from '@ember/array';
+
+export default class extends Component {
+  pageSizes = A([10, 25, 50, 100, 250, 'All']);


A not needed. Stick to native arrays whenever possible.

niranjan94 · 2019-06-26T17:53:37Z

app/components/tables/utilities/search-box.js

@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({


niranjan94 · 2019-06-26T17:54:00Z

app/controllers/events/list.js

+  }
+
+  @action
+  doAction(eventName) {


abhinavk96 · 2019-07-03T15:51:15Z

@niranjan94 From what I gather, if we don't want to use custom css classes, we want this:Semantic-Org/Semantic-UI#2901
For the individual columns of the table to not be resizable with screen size, the x-scrollable method is not working with ember-tables, please let me know how we should proceed.

kushthedude · 2019-07-03T16:31:04Z

@kushthedude I don't want to make the table basic and even then, the ember-table properties are interfering with it, and the column contents are getting squashed into each other. Also, innerTableWrapper was defined in ember-model-table theme, that class has no impact here.

I got that, Even the columns are disappearing and collapsing for mobile view, Let's find some new way

kushthedude · 2019-07-03T16:32:40Z

@CosmicCoder96 Isn't there some attribute like row-span or column-span in the ember-table as we used to have in ember-models table?

niranjan94

I'm okay with merging this in at this state. This is big change and has already improved the tables experience many times more than ember-model-tables.

We'll merge this in right now so that we can start using it on other pages asap.

kushthedude

Let's use Ember Tables then.

#3169 (review)

abhinavk96 requested a review from niranjan94 June 22, 2019 06:38

niranjan94 suggested changes Jun 22, 2019

View reviewed changes

niranjan94 added DO-NOT-MERGE enhancement refactor labels Jun 23, 2019

abhinavk96 force-pushed the alpha branch from 71ef49e to 3a0c735 Compare June 23, 2019 08:23

fossasia deleted a comment Jun 23, 2019

niranjan94 force-pushed the alpha branch 2 times, most recently from 34dc81d to 2dfe7f0 Compare June 23, 2019 12:03

fossasia deleted a comment Jun 25, 2019

niranjan94 suggested changes Jun 26, 2019

View reviewed changes

abhinavk96 force-pushed the alpha branch from 945bb1c to 1b42041 Compare June 26, 2019 09:52

fossasia deleted a comment Jun 26, 2019

niranjan94 suggested changes Jun 26, 2019

View reviewed changes

abhinavk96 force-pushed the alpha branch from 1b42041 to 8abec60 Compare June 29, 2019 15:28

fossasia deleted a comment Jun 29, 2019

abhinavk96 force-pushed the alpha branch from 8abec60 to cd8df86 Compare June 30, 2019 04:44

fossasia deleted a comment Jun 30, 2019

abhinavk96 force-pushed the alpha branch from cd8df86 to e03f5a9 Compare June 30, 2019 04:57

fossasia deleted a comment Jun 30, 2019

niranjan94 previously approved these changes Jul 4, 2019

View reviewed changes

niranjan94 removed the DO-NOT-MERGE label Jul 4, 2019

abhinavk96 and others added 13 commits July 4, 2019 23:36

Add ember-table (master branch)

263b77b

Reopen ember tables component

3c6a846

Add base table

e63f046

Pagination in tables

a93dd36

Manage events table refactor

2d59631

Re-organise extensions

7f5e843

Add helper to get multiple properties from an object

d48ce8f

Add support to use decorators properly

9300455

Values+props+actions => cells - implementation one

9009223

Complete pagination functionality

a8bd393

Complete page size selection functionality

627ac74

Search module

d8b2459

Sorting module

fff66d4

abhinavk96 dismissed niranjan94’s stale review via c116372 July 4, 2019 18:14

abhinavk96 force-pushed the alpha branch from f0ad1ed to c116372 Compare July 4, 2019 18:14

fossasia deleted a comment Jul 4, 2019

clean up, DRY and tests

6e6691d

abhinavk96 force-pushed the alpha branch from c116372 to 6e6691d Compare July 4, 2019 18:21

niranjan94 approved these changes Jul 4, 2019

View reviewed changes

fossasia deleted a comment Jul 4, 2019

kushthedude approved these changes Jul 4, 2019

View reviewed changes

abhinavk96 merged commit 7fdb688 into fossasia:development Jul 4, 2019

This was referenced Jul 4, 2019

Ember tables: Manage event table date sort support #3242

Closed

feat: switch to ember-table for all remaining tables [Admin Area] #3246

Merged

		@@ -0,0 +1,16 @@
		{{#ember-table class="ui table" as \|t\|}}
		{{t.head columns=columns}}

		@@ -0,0 +1,4 @@
		import Component from '@ember/component';

		export default Component.extend({

Uh oh!

Ember Table set up & Manage events table #3169

Ember Table set up & Manage events table #3169

Uh oh!

Conversation

abhinavk96 commented Jun 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

niranjan94 Jun 22, 2019

Choose a reason for hiding this comment

Uh oh!

niranjan94 Jun 22, 2019

Choose a reason for hiding this comment

Uh oh!

niranjan94 commented Jun 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abhinavk96 commented Jun 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

niranjan94 Jun 22, 2019

Choose a reason for hiding this comment

Uh oh!

niranjan94 commented Jun 22, 2019

Uh oh!

abhinavk96 commented Jun 22, 2019 via email

Uh oh!

abhinavk96 commented Jun 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abhinavk96 commented Jun 25, 2019

Uh oh!

niranjan94 Jun 26, 2019

Choose a reason for hiding this comment

Uh oh!

niranjan94 Jun 26, 2019

Choose a reason for hiding this comment

Uh oh!

niranjan94 Jun 26, 2019

Choose a reason for hiding this comment

Uh oh!

niranjan94 Jun 26, 2019

Choose a reason for hiding this comment

Uh oh!

abhinavk96 commented Jul 3, 2019

Uh oh!

kushthedude commented Jul 3, 2019

Uh oh!

kushthedude commented Jul 3, 2019

Uh oh!

niranjan94 left a comment

Choose a reason for hiding this comment

Uh oh!

kushthedude left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

abhinavk96 commented Jun 22, 2019 •

edited

Loading

niranjan94 commented Jun 22, 2019 •

edited

Loading

abhinavk96 commented Jun 22, 2019 •

edited

Loading

abhinavk96 commented Jun 22, 2019 •

edited

Loading