Table #559

benjamincharity · 2018-01-24T13:51:04Z

TODO: Generate docs before merge.

PR Overview

Create table component
Create data source class for table
Create sort directive for column sorting
Refactor Pagination to Paginator
Add docs for
- table
- sort
- minWidth
- noWrap
Update ts-lint fix with correct glob
Added more testing utilities (could not import from @angular/cdk/testing)
A refactor commit can now trigger a breaking change

⚠️ ⚠️ ⚠️

This release will include BREAKING CHANGES

TsPagination (rename)
TsSelect (event emitters changed).

⚠️ ⚠️ ⚠️

WIP: table working after renaming `mat` to `ts` WIP: working after adding directive/component suffix’ WIP: sorting working with MatSort WIP: copy/paste sort module working WIP: comments update, file names update, basic styles in place WIP: table usage docs WIP: clean up more, add TsSort docs WIP: setting up demo for fetching real data

Material removed the open/close event emitters in favor of a single \`openedChanged\` emitter. BREAKING CHANGE: 1. \`open\` and \`closed\` event emitters removed 2. \`change\` emitter renamed to match \`selectionChange\` to match the material API

…of viewport

BREAKING CHANGE: \`TsPaginationComponent\` has been renamed to \`TsPaginatorComponent\`

codecov · 2018-01-24T13:51:22Z

Codecov Report

Merging #559 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff           @@
##           master   #559    +/-   ##
======================================
  Coverage     100%   100%            
======================================
  Files          37     45     +8     
  Lines         758    895   +137     
  Branches      143    158    +15     
======================================
+ Hits          758    895   +137

Impacted Files	Coverage Δ
src/lib/src/card/card.component.ts	`100% <ø> (ø)`	⬆️
...s/validation-message/validation-message.service.ts	`100% <ø> (ø)`	⬆️
src/lib/src/search/search.component.ts	`100% <ø> (ø)`	⬆️
src/lib/src/datepicker/datepicker.component.ts	`100% <ø> (ø)`	⬆️
src/lib/src/menu/menu.component.ts	`100% <ø> (ø)`	⬆️
src/lib/src/copy/copy.component.ts	`100% <ø> (ø)`	⬆️
src/lib/src/login-form/login-form.component.ts	`100% <ø> (ø)`	⬆️
src/lib/src/select/select.component.ts	`100% <ø> (ø)`	⬆️
src/lib/src/link/link.component.ts	`100% <ø> (ø)`	⬆️
src/lib/src/sort/sort-animations.ts	`100% <100%> (ø)`
... and 20 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 10c6c24...0f09837. Read the comment docs.

benjamincharity · 2018-01-24T14:06:36Z

@coreyterminator @atlwendy I'd love some extra eyes on this prior to merge. Especially on the markdown file denoting how to use the table. I want to make sure the table makes sense and is usable for you guys.

NOTE: I do expect to create a higher-level component that the core team can use. This would have the table/paginator/sorting/etc all hooked up by default. I just would like to get v1 out first so I can move on some other high-priority items.

benjamincharity · 2018-01-24T18:30:32Z

@coreyterminator @atlwendy I'm going ahead with this merge as it's got some items I need back in master. I would still love a review on the usage docs post-merge when you get time 🙏

atlwendy

A lot here to digest/understand still... first patch of questions :)

atlwendy · 2018-01-24T15:00:48Z

src/demo/src/app/components/select/select.component.html

-    (change)="isChanged($event)"
+    [formControl]="myForm.get('myChoices1')"
+    (openedChange)="openStateChange($event)"
+    (selectionChange)="isChanged($event)"


Why is (close) removed here?

Material removed/changed a few of their event emitters to make their API consistent back during their 2.0.0 stable push. We just never picked up those changes until now.

Part of angular/components#6677

atlwendy · 2018-01-24T16:10:22Z

src/demo/src/app/components/table/table.component.ts

+    });
+
+    // Fetch new data anytime the sort is changed, the page is changed, or the records shown per
+    // page is changed


You refetch new data even when page is changed? Would that be confusing to users if new data come in and mess with the page number?

If we don't fetch new data, then there is no page change at all. We aren't paging through tons of rows locally; we are getting exactly the page we request from the server. So if the user clicks the pagination to go to the next page, we pass that 'next page' index to the server and ask for those records.

atlwendy · 2018-01-24T16:24:40Z

src/lib/src/module.ts

+import { TsTableModule } from './table/table.module';
+import { TsToggleModule } from './toggle/toggle.module';
+import { TsTooltipModule } from './tooltip/tooltip.module';
+import { TsValidationMessagesModule } from './validation-messages/validation-messages.module';


The linter also reorder for you, alphabetically!

atlwendy · 2018-01-24T19:25:30Z

src/lib/src/paginator/paginator.component.ts

+  host: {
+    class: 'ts-paginator',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,


Why is here .OnPush - CheckOnce not CheckAlways?

This basically tells Angular to only run change detection when an @Input value changes. You are in essence promising to not do anything to mutate the state internally. This is much more performant since the change detection cycle doesn't have to check everything each time.

The few times where we need to do something internally in a component that uses this changeDetection strategy we manually tell the change detector to check for changes using changeDetectorRef.markForCheck().

atlwendy · 2018-01-24T19:33:04Z

src/lib/src/utilities/types/sort.types.ts

+export type TsSortDirection
+  = 'asc'
+  | 'desc'
+  | ''


Does '' mean no sorting?

benjamincharity added 14 commits January 24, 2018 08:45

fix(Pagination): now working off of a zero index to better match APIs

f37eeea

chore(CI): clear entire out-tsc file on clean

e731e5b

chore(CI): Update linter to check for unused variables

94e0808

fix(Select): Select menu now has smaller max-height to not spill out …

2ceef39

…of viewport

WIP: table now working with sort/page/minWidth/noWrap

dc84a61

WIP: move to accent colors

8d75aea

fix(Paginator): rename pagination to paginator, default to accent color

c498ebb

BREAKING CHANGE: \`TsPaginationComponent\` has been renamed to \`TsPaginatorComponent\`

chore(CI): Allow refactor to be breaking change

8dead4a

test(Paginator): updated tests

8fe8ed0

refactor(Sort): update naming convention

d2cbb5e

feat(Table): table and sorting fully tested

2d9da1c

docs: update readme features and installation

96e621e

benjamincharity self-assigned this Jan 24, 2018

docs(Table): add docs for column min-width and column no-wrap

5254a92

benjamincharity requested review from coreyterminator and atlwendy January 24, 2018 14:00

benjamincharity added the DO NOT MERGE PRs that are not ready to be merged. label Jan 24, 2018

benjamincharity mentioned this pull request Jan 24, 2018

542 radio button weight #560

Closed

Merge branch 'master' into 262-table-take2

0f09837

benjamincharity removed the DO NOT MERGE PRs that are not ready to be merged. label Jan 24, 2018

benjamincharity merged commit 9c6d109 into master Jan 24, 2018

atlwendy reviewed Jan 24, 2018

View reviewed changes

benjamincharity deleted the 262-table-take2 branch February 19, 2018 15:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table #559

Table #559

benjamincharity commented Jan 24, 2018 •

edited

Loading

codecov bot commented Jan 24, 2018 •

edited

Loading

benjamincharity commented Jan 24, 2018

benjamincharity commented Jan 24, 2018

atlwendy left a comment

atlwendy Jan 24, 2018

benjamincharity Jan 24, 2018

atlwendy Jan 24, 2018

benjamincharity Jan 24, 2018

atlwendy Jan 24, 2018

atlwendy Jan 24, 2018

benjamincharity Jan 24, 2018

atlwendy Jan 24, 2018

benjamincharity Jan 24, 2018

Table #559

Table #559

Conversation

benjamincharity commented Jan 24, 2018 • edited Loading

PR Overview

codecov bot commented Jan 24, 2018 • edited Loading

Codecov Report

benjamincharity commented Jan 24, 2018

benjamincharity commented Jan 24, 2018

atlwendy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benjamincharity commented Jan 24, 2018 •

edited

Loading

codecov bot commented Jan 24, 2018 •

edited

Loading