rizqidjamaluddin / 4825D3B08CE800A6556A21E36C43AF85

Code Test.

Quickstart

Installation:

• yarn install
• yarn serve

To lint: yarn lint

To build: yarn build

In order to display maps when viewing a job, you need a Google Cloud API key. Copy .env.example to .env and place your key under VUE_APP_GOOGLE_MAP_KEY. If using the local development server (yarn serve), restart the server after editing the env file.

To-Do

MVP

• Load data from source server
• Display as table
• Paginate data table
• Load indicator
• Sorting by job title, description
• Searching by job title, description

0.1 - Statefulness

• Show job details in separate route
• Persist search queries, sort and page in URL
• Add mobile responsive support

0.2 - Details

• Add up/down/back buttons when viewing a job detail
• Add enhanced map UI in job detail
• Add enhanced search UI to display matching terms inline
• Add icons and labels/tags for other flags provided from API data
• Enable search by job ID
• Enable sort by company, newest/oldest
• Enable hop to page by clicking current page button
• Enhance paginator slide animation when scrolling pages
• Add progress indicator bar on paginator
• Flag as liked, filter by liked

0.3 - Reusability

• Abstract out loading/error components in job grid
• Convert job grid loop to a functional component
• Abstract grid sorting and searching to services
• Consider using Vuex as primary data store

Known Issues

• When switching between job details while on a narrow screen, and then enlarging to a wider viewport, the job browser will be empty. This is a limitation of the vue-smooth-height plugin, which incorrectly assumes a height of zero (due to being hidden) and does not update because it waits for vue update ticks. Would need to listen to browser resize events and manually fire updates, or hide using alternate methods instead. For now, simply clicking "back" will restore the browser.
• There are errors bubbling up regarding Route being exported from vue-router. Known issue. VueJS issue here.
• IDEs may get an error regarding RawLocation in $router.push arguments. Known issue that is fixed in vue-router, but not yet tagged for release. Vue-router issue here.

Security

• We assume the source data is HTML entity escaped. Normally we can't make this assumption, but data coming in so far would suggest it. We do attempt a v-html on this data.