Overview:

Front-End Client (Angular)

An Angular front-end built with @ngrx/store and @handsontable/angular to demonstrate:

• multi-column sorting
• searching
• paging
• persisting on refresh

Performance best-practices include:

• @ngneat/until-destroy for unsubscribing from observables
• re-usable modular architecture (see src/app/lazy/july-table/july-table.module.ts)
• module lazy-loading and pre-loading during idle/down time

This project includes Cypress End-to-End (e2e) tests.

Generated with Angular CLI version 10.0.1.

How to install

# clone the repo master branch
git clone https://github.com/charlieargue/clickup-july-table.git

# change directory into the front-end subdirectory
cd clickup-july-table

# install all libraries
npm i

Quick Start

# start the app locally
npm start

Open http://localhost:4200 to view it in the browser.

Implementation Notes:

resize the columns

• This was part of handsomtable's native functionality, so was not coded nor exercised in e2e tests.

drag and drop columns to reorder using the native Angular cdk drag and drop

• Also part of handsomtable's native functionality, so was not coded nor exercised in e2e tests.

angular fundamentals (directive, pipe)

• My custom directive allows the ENTER key to submit the search field. And async pipes are used to subscribe to the state observables from inside angular templates.

Testing

End-to-End (e2e) testing via Cypress is included with this project, and can be found in the cypress subdirectory.

🛑 The front-end MUST BE RUNNING locally for the tests to work!

Run the following commands from a new terminal tab to keep the front-end running:

# change directory into the front-end subdirectory, for eg.
cd clickup-july-table

# open Cypress testing tool
npm run e2e

Then to run all tests, click the july_table_spec.js test file, and you should see: