Example application plan

Example application plan: Employee management / timesheets

Here is the idea for an example application. It is a toy model of the system for managing employees and timesheets; with a fraction of the rules, fields, etc. of a real system, but with the same general shape. This problem domain should be generally comfortable and familiar and therefore not serve as a distraction to the essential point of this project, which is to show high quality ways to do all the common enterprise application tasks with Angular and related tools.

For the sake of simplicity though, there will be other chunks of sample application mixed in, to illustrate the sprawling heterogeneous nature of typical large enterprise applications, and to make it easier to reuse some various other example code already handy.

Approximate high-level feature summary, with notes about how each one might be implemented.

Manage employee list

• Employees - CRUD, not just R. Far too many examples on the web skip the CRUD and only show reading data.
• Enter a handful of common fields
• Choose department
• Manage what work types are assigned to each employee
• Implement first with a REST JSON API
• Then, move to GraphQL
• Aim for infinite scroll, paging behind the scenes, and other features typically used in CRUD screens for potentially large volume data.

Manage lookup data

• Allow user to manage various kinds of data necessary as lookup or reference data for the essential features
• CRUD, not just R
• departments: list of ID, string
• work type dropdown lists: list of string
• holiday list: list of dates
• REST JSON API - very suitable for this type of screen because few operations have the type of pattern where a more sophisticated GraphQL implementation may pay off

Search employees, two couple different ways

• UI already present in the example
• RESTish JSON API

Fill in timesheets

• See my current timesheet for the week
• See all my categories
• Fill in a grid cell on a sheet
• Submit/lock a day
• GraphQL

Review total time

• Pick a week and department
• See aggregate totals
• REST JSON API - ad hoc endpoint unlike the other uses of REST in the example which can be handled almost generically (i.e. by json-server)

Status dashboard

• grid of days and people
• status: entered? locked?
• maybe a list on the side, of who is tardy
• MQTT?

Server notes

• Server code is less important for this example of an Angular UI code
• Will typically use off-the-shelf pieces, less concerned about realism and scalability
• Nonetheless, there may be a few spots where an event sourced design comes into play
• If a database is used at all (still undecided, whether that layer is even part of the scope of this example), use something readily available on multiple platforms like PostgreSQL
• Consider something like an in memory RxJS subject to propagate updates around