ibarrick / paper-data-table Goto Github PK

View Code? Open in Web Editor NEW

31.0 3.0 18.0 599 KB

Material Data Table for ember-paper

Home Page: https://ibarrick.github.io/paper-data-table/

License: MIT License

JavaScript 50.42% HTML 27.55% CSS 22.03%

paper-data-table's Introduction

Paper-data-table

Port of https://github.com/daniel-nagy/md-data-table using ember-paper

Installation

ember install paper-data-table

Add @import 'paper-data-table'; to your app.scss file.

Usage

From dummy app:

{{#paper-data-table sortProp="name" sortDir="desc" selectable=true as |table|}}
{{#table.head as |head|}}
  {{#head.column checkbox=true}}
    {{#paper-checkbox disabled=true onChange=null}}{{/paper-checkbox}}
  {{/head.column}}
  {{#head.column sortProp="name"}}Dessert (100g serving){{/head.column}}
  {{#head.column sortProp="calories" numeric=true}}Calories{{/head.column}}
  {{#head.column sortProp="fat" numeric=true}}Fat (g){{/head.column}}
  {{#head.column sortProp="carbs" numeric=true}}Carbs (g){{/head.column}}
  {{#head.column sortProp="protein" numeric=true}}Protein (g){{/head.column}}
  {{#head.column numeric=true}}Sodium (mg){{/head.column}}
  {{#head.column numeric=true}}Calcium (%){{/head.column}}
  {{#head.column numeric=true}}Iron (%){{/head.column}}
  {{#head.column}}Comment{{/head.column}}
{{/table.head}}
{{#table.body as |body|}}
  {{#each (sort-by table.sortDesc paginatedDesserts) as |dessert|}}
    {{#body.row edit=true as |row|}}
      {{#row.cell checkbox=true}}
        {{#paper-checkbox
          value=dessert.checked
          onChange=(action (mut dessert.checked))}}
        {{/paper-checkbox}}
      {{/row.cell}}
      {{#row.cell}}{{dessert.name}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.calories}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.fat}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.carbs}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.protein}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.sodium}}{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.calcium}}%{{/row.cell}}
      {{#row.cell numeric=true}}{{dessert.iron}}%{{/row.cell}}
      {{#row.cell edit=true as |cell|}}
        {{#if cell.showEdit}}
          {{#cell.edit-dialog onClose=cell.toggleEdit}}
            {{paper-input
              value=dessert.comment
              onChange=(action (mut dessert.comment))}}
          {{/cell.edit-dialog}}
        {{else}}
          {{dessert.comment}}
          {{#paper-button iconButton=true onClick=row.toggleEdit}}
            {{paper-icon 'edit'}}
          {{/paper-button}}
        {{/if}}
      {{/row.cell}}
    {{/body.row}}
  {{/each}}
{{/table.body}}
{{/paper-data-table}}
{{paper-data-table-pagination
limit=limit
limitOptions=limitOptions
page=page
pages=pages
onChangePage=(action (mut page))
onChangeLimit=(action (mut limit))
onIncrementPage=(action 'incrementPage')
onDecrementPage=(action 'decrementPage')}}

paper-data-table's People

Contributors

Stargazers

Watchers

Forkers

iirving shoxter pvmsikrsna xomaczar cogniteev n1ru4l olgabrani arijit-roy nbrookie devotox patterns-ai ssavitski subtletree metriqio mikoscz backspace fiddler jonnoftw

paper-data-table's Issues

Sort table

I have a problem with sorting. When changing the sort, I want to reload the data from the server. Changing the sort order now is only sorting the current page.

Dummy app source

Any chance you could release the dummy app source?

Sorting does not take multiple pages into account

When you sort by a column it does not look at the other pages ... it just sorts current page.

Is there an action at least we can override to perform our own sorting?

Sorting model id

The model ID is sorted as a string and not like a number, even with numeric=true. So numbers like 10 are sorted before 19 on ascending. Any way to solve this?

Thanks.

Deprecation: dependency checker needs updating

installed dependencies [email protected] and [email protected] using [email protected] which causes deprecation as per:
ember-cli/ember-cli-version-checker#48 (comment)

Addon should not include 'ember-paper.scss' ?

I have 2 addons based on ember-paper, this one and another. And because both includes ember-paper.scss I end up with the style included twice in my app.scss.

Maybe the paper-data-table.scss should not be included? We can assume that it's already done.

sendAction is now deprecated

This addon should use closure actions instead of sendAction as the later is now deprecated in Ember

Add Travis integration?

Would you consider adding Travis integration ?

I'm aware of the lack of tests for now but maybe that will change in the future 😄

Error When trying to use #paper-data-table component

Ember CLI 2.13.1

Assertion Failed: A component or helper named "paper-data-table" could not be found
Error
at assert (:29861:13)
at Object.assert (:30074:34)
at refineBlockSyntax (:36366:17)
at Blocks.compile (:23024:209)
at :23023:3224
at Compilers.compile (:23023:531)
at compileStatement (:23022:8728)
at :23022:727
at Array.forEach (native)
at WrappedBuilder.compile (:23022:692)

Table row height is missing

Table rows seem to be missing their height property.
This is how it is supposed to look:

and this is how it actually looks:

As far as I can tell, this is introduced by this commit: 46a6979 @n1ru4l

It seems that tbody element is missing md-body class and thus causing the rows to loose their height as the rule

table.md-table tbody.md-body > tr.md-row,
  table.md-table tfoot.md-foot > tr.md-row {
    height: 48px; }

does not apply.

A solution would be to replace classNameBindings with classNames in
46a6979#diff-9e23e22275d0278af7ed7e546b5a3fe9R10

 export default Component.extend({
-       classNameBindings: ['md-body'],
+       classNames: ['md-body'],
        attributeBindings: ['style'],
        layout,
        tagName: 'tbody',

Slow rendering

{{#paper-data-table class='flex flex-100' sortProp='fullName' sortDir='asc' selectable=true as |table|}}
    {{#table.head as |head|}}
        {{#head.column checkbox=true}}
            {{#paper-checkbox disabled=true onChange=null}}{{/paper-checkbox}}
        {{/head.column}}
        {{#head.column sortProp='fullName' }}Name{{/head.column}}

        {{#if (not-eq search.profileType 'patient')}}
            {{#head.column sortProp='email' }}Email{{/head.column}}
        {{/if}}

        {{#head.column sortProp='timestampCreated' numeric=true}}Date Created{{/head.column}}

        {{#if (eq search.profileType 'patient')}}
            {{#head.column sortProp='dataOrigin' }}Data Origin{{/head.column}}
        {{/if}}

        {{#if (eq search.profileType 'account')}}
            {{#head.column sortProp='emailVerified' }}Verified{{/head.column}}
            {{#head.column sortProp='accountType' }}Account Type{{/head.column}}
        {{/if}}

        {{#if (or (eq search.profileType 'specialist') (eq search.profileType 'practice'))}}
            {{#head.column sortProp='isSubscribedToBooking' }}Has Booking{{/head.column}}
            {{#head.column sortProp='status' }}Status{{/head.column}}
        {{/if}}
    {{/table.head}}
    {{#table.body as |body|}}
        {{#each (sort-by table.sortDesc currentPage) as |profile|}}
            {{#body.row edit=true as |row|}}
                {{#row.cell checkbox=true}}
                    {{#paper-checkbox value=profile.checked onChange=(action (mut profile.checked)) }}
                    {{/paper-checkbox}}
                {{/row.cell}}

                {{#row.cell}}
                    {{#paper-button iconButton=true onClick=(transition-to (concat 'profiles.' search.profileType '.edit') profile) }}
                        {{paper-icon 'exit to app'}}
                    {{/paper-button}}
                    {{titleize profile.fullName}}
                {{/row.cell}}

                {{#if (not-eq search.profileType 'patient')}}

                    {{#row.cell edit=true as |cell|}}

                        {{#paper-button iconButton=true onClick=cell.toggleEdit}}
                            {{paper-icon 'visibility'}}
                        {{/paper-button}}

                        {{truncate profile.email 25}}

                        {{#if cell.showEdit}}
                            {{#paper-dialog focusOnOpen=false origin=dialogOrigin fullscreen=fullscreen clickOutsideToClose=true onClose=cell.toggleEdit}}

                                {{#paper-dialog-content}}
                                    {{profile.email}}
                                {{/paper-dialog-content}}

                                {{#paper-dialog-actions class='layout-row' }}
                                    {{#paper-button primary=true onClick=cell.toggleEdit}}
                                        Close
                                    {{/paper-button}}
                                {{/paper-dialog-actions}}

                            {{/paper-dialog}}
                        {{/if}}

                    {{/row.cell}}
                {{/if}}

                {{#row.cell numeric=true}}
                    {{format-date profile.timestampCreated format='ddd, MMM Do, YYYY h:mm a' }}
                {{/row.cell}}

                {{#if (eq search.profileType 'patient')}}
                    {{#row.cell}}
                        {{profile.dataOrigin}}
                    {{/row.cell}}
                {{/if}}

                {{#if (eq search.profileType 'account')}}
                    {{#row.cell checkbox=true}}
                        {{#paper-checkbox value=profile.emailVerified onChange=(queue (action (mut profile.emailVerified)) (route-action 'updateVerified' profile))}}
                        {{/paper-checkbox}}
                    {{/row.cell}}

                    {{#row.cell class='layout-row layout-wrap flex-100 layout-align-space-around-center' edit=true as |cell| }}
                        {{titleize profile.accountType}}
                        {{#paper-button iconButton=true onClick=cell.toggleEdit}}
                            {{paper-icon 'edit'}}
                        {{/paper-button}}

                        {{#if cell.showEdit}}
                            {{#cell.edit-dialog onClose=cell.toggleEdit}}
                                {{#paper-select options=(get editStatuses search.profileType) label='Status' selected=profile.accountType class='layout-fill' onChange=(queue (action cell.toggleEdit) (action (mut profile.accountType)) (route-action 'updateAccountType' profile)) as |accountType|}}
                                    {{titleize accountType}}
                                {{/paper-select}}
                            {{/cell.edit-dialog}}
                        {{/if}}
                    {{/row.cell}}
                {{/if}}

                {{#if (or (eq search.profileType 'specialist') (eq search.profileType 'practice'))}}
                    {{#row.cell edit=true as |cell| }}
                        {{titleize (concat '' profile.isSubscribedToBooking)}}
                        {{#paper-button iconButton=true onClick=cell.toggleEdit}}
                            {{paper-icon 'edit'}}
                        {{/paper-button}}

                        {{#if cell.showEdit}}
                            {{#cell.edit-dialog onClose=cell.toggleEdit}}
                                {{#paper-select options=(array true false) label='Status' selected=profile.isSubscribedToBooking class='layout-fill' onChange=(queue (action cell.toggleEdit) (action (mut profile.isSubscribedToBooking)) (route-action 'updateBooking' profile)) as |isSubscribedToBooking|}}
                                    {{titleize (concat '' isSubscribedToBooking)}}
                                {{/paper-select}}
                            {{/cell.edit-dialog}}
                        {{/if}}
                    {{/row.cell}}

                    {{#row.cell class='layout-row layout-wrap flex-100 layout-align-space-around-center' edit=true as |cell| }}
                        {{titleize profile.status}}
                        {{#paper-button iconButton=true onClick=cell.toggleEdit}}
                            {{paper-icon 'edit'}}
                        {{/paper-button}}

                        {{#if cell.showEdit}}
                            {{#cell.edit-dialog onClose=cell.toggleEdit}}
                                {{#paper-select options=(get editStatuses search.profileType) label='Status' selected=profile.status class='layout-fill' onChange=(queue (action cell.toggleEdit) (action (mut profile.status)) (route-action 'updateStatus' profile)) as |status|}}
                                    {{titleize status}}
                                {{/paper-select}}
                            {{/cell.edit-dialog}}
                        {{/if}}
                    {{/row.cell}}
                {{/if}}

            {{/body.row}}
        {{/each}}
    {{/table.body}}
{{/paper-data-table}}

paper-data-table-pagination doesn't work

Hi, I am using this addon and work fine but when I see closest the pagination doesn't work.

I know that the variables limit and page should set on my controller, but the actions incrementPage and decrementPage I don't know how to set.

Whatever help is welcome. Regards.

Outdated dependencies and tests not running

Hi @ibarrick I notice that you haven't been active with paper-data-table for a while.

If I put forward a PR updating all dependencies and getting the test suite running again would you be able to merge it?

Just wanted to make sure you're around and able to merge it before doing the work 🙂

Error: sort-by is not a helper

When implementing paper-data-table I am getting this error "sort-by is not a helper". What wrong I am doing?

Please add support for data-* attributes to all components

As I understand we can't now add data-* attributes as:

 {{#head.column --> data-name="my-name" <-- }} MyHeadColumn {{/head.column}}

This helps QA to assign extensible attributes for Selenium tests

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes