jan-ka/bug-free-spork

Example Implementation for Interview Purposes

bug-free-spork's Issues

Add `LieferstatusService` to App

Child of #33; Implement after #55

Isolate `Rechnung` Table into Component

Add `Lieferstatus` Demo Data

Child of #33

Add `/rechnungen` backend endpoint

Requires #5

Add a new backend endpoint that will return a rechnungen collection, containing all available rechnung

Methode 1 liefert bei Übergabe von Paginator Informationen eine kleine Liste an Rechnungen zurück (ca. 3 Zeilen)

— from #2

Use Interface for `RechnungDataSource`

If we want to change how Data is Loaded, it will be done via replacing the DataSource.

Move Services into `BusinessLogic` Module

Add .nvmrc

Pin down node version with nvm

Add Koa Backend

Create a new Backend with 3 asynchronous Endpoints

• Erstelle einen Service mit 3 asynchronen Methoden, der ein kleines Set an Example Testdaten liefern kann
  [...]
• Verwende Domänen spezifische Namings

— from #2

Display `Lieferstatus` Table in Dialog

Child of #33

Add `Rechnungpositionen` Property to `Rechnung`

Create Alpha Version Package for Releases

Display a `Rechnung` Table to the User

Feature of #10

As an Application User I want to be able to see a Table containing Rechnung Data

Display a Table containing all Rechnung Properties

Load `Lieferstatus` Demo Data via environment

Child of #33; Implement after #54

Property 'pageEvent' does not exist on type 'AppComponent'.

Child of #61

Found while building for production

Retrieve all `Rechnungsposition` for a `Rechnungs-UID` via `RechnungspositionService\getAllRechnungsposition`

Child of #33

Retrieve all Rechnungsposition from Service

Formatted `Rechnung\Betrag Netto` Column in `RechnungTable`

New Pipe to format values of Rechnung\Betrag Netto to the format 0.000,00 €

Add `Rechnung` shared interface

There is no backend to retrieve 'real' Rechnung objects, but we still want to be prepared if there is one added later.

If the backend is using a compatible stack (such as koa on node) the interfaces can be used directly. If not, it is sufficient documentation about what the frontend expects from the backend.

As per the client's requirements a Rechnung object contains these properties:

• # Rechnungs-UID: string
• # Rechnungspositionen: []Rechnungsposition¹
• # Rechnungsnummer: string
• # Rechnungsempfänger: string
• # Betrag Netto: number
• # Datum: Date

The Property Names will be used verbatim. Without a backend we do not know the normalization approach of the involved stack and can't align the interface accordingly.

---

1. This property will be added when `Rechnungsposition` is implemented

Client Requirement

Original Requirements:

• Erstelle Angular 8 Projekt mit Material
• Erstelle einen Service mit 3 asynchronen Methoden, der ein kleines Set an Example Testdaten liefern kann
  • Exemplarisch für die Anbindung an eine fiktive RESTFul Schnittstelle
  • Methode 1 liefert bei Übergabe von Paginator Informationen eine kleine Liste an Rechnungen zurück (ca. 3 Zeilen)
    • Rechnungs-UID
    • Rechnungsnummer
    • Rechnungsempfänger
    • Betrag Netto
    • Datum
    • ...
  • Methode 2 liefert für eine konkrete Rechnungs-UID die in der Rechnung enthaltenen n-Rechnungspositionen zurück
    • Produkt Name
    • Produkt Betrag Netto
  • Methode 3 liefert für eine konkrete Rechnungs- UID den Lieferstatus der in der Rechnung enthaltenen Rechnungspositionen zurück
• Verwende Domänen spezifische Namings
• Schreibe 2 Komponenten
  • Komponente 1 listet als paginierte Tabelle (etwa Angular DataTable) die Produkte Rechnungen von Methode 1 auf
  • Komponente 2 wird als Einblendung über einen Button aus der jeweiligen Paginator Zeile aus gestartet – und soll die Informationen aus Methode 2 (Rechnungspositionen) und Methode 3 (Lieferstatus der Rechnungspositionen) in Tabellenform darstellen
• Schreibe dazu erforderliche Tests

Add `RechnungFilter` shared interface

There is no backend to retrieve 'real' Rechnung objects, but we still want to be prepared if there is one added later.

If the backend is using a compatible stack (such as koa on node) the interfaces can be used directly. If not, it is sufficient documentation about what the frontend expects from the backend.

While this object will be only used for retrieving chunks of available data (e.g. Pagination in a Table) it should be treated like a generic filter applied to the datasource.

The filter contains following properties:

• ChunkSize
  • a Chunk is at least 1
• ChunkOffset
  • multiplicator of ChunkSize
  • providing a ChunkOffset that exceeds the available Data, defaults to displaying the last chunk possible

Display a User Error when `RechnungspositionService\getAllRechnungsposition` throws an error

As an App User I want to be able to understand the reason of the App not displaying Rechnungsposition Data

A user should not be served a technical error but something he can understand or at least communicate.

If an error is thrown by the backend, display a customer understandable notification.

Display a Dialog for `Rechnungposition` and `Lieferstatus`

Feature of #10

As an Application User I want a Modal Form to open when I click on a Rechnung Table Entry, to inspect Rechnungposition and Lieferstatus of that specific Rechnung

Display a Modal Form and display all Rechnungposition and Lieferstatus for the selected Rechnung.

Make available to Client

`ExpressionChangedAfterItHasBeenCheckedError` for `mat-paginator [length]="(available$ | async)"`

Move wiki stuff into dedicated branch

Display all `Rechnungsposition` items in Dialog

Child of #33; Do after #50

Add `RechnungService` to App

Provide the environment for future improvement

Erstelle einen Service mit 3 asynchronen Methoden, der ein kleines Set an Example Testdaten liefern kann

— from #2

Add `BusinessLogicService` to App

To better align with the Client Requirements (#2), introduce a Facade Service to group all other required Services.

Add `Rechnungposition` shared interface

Child of #33, Related Wiki

There is no backend to retrieve 'real' Rechnungposition objects, but we still want to be prepared if there is one added later.

If the backend is using a compatible stack (such as koa on node) the interfaces can be used directly. If not, it is sufficient documentation about what the frontend expects from the backend.

The interface contains following properties:

• # Rechnungs-UID: string
• # Produkt Name: string
• # Produkt Betrag Netto: number

Filtering for `Rechung` Table

Feature of #10 ; Child of #11; Requires #9

As an Application User I want to be able to filter the displayed Rechnung Data by Pages

To make it easier navigating a large Amount of Data, the Rechnung Table should always be displayed in chunks, as defined by a paginator.

The filter contains following properties:

• ChunkSize
  • a Chunk is at least 1
• ChunkOffset
  • a multiple of ChunkSize
  • providing a ChunkOffset that exceedes the available Data, defaults to displaying the last chunk possible

Add `RechnungspositionService` to App

Erstelle einen Service mit 3 asynchronen Methoden, der ein kleines Set an Example Testdaten liefern kann
Exemplarisch für die Anbindung an eine fiktive RESTFul Schnittstelle
[...]
Methode 2 liefert für eine konkrete Rechnungs-UID die in der Rechnung enthaltenen n-Rechnungspositionen zurück
— from #2

The Client Requirement does suggest that Rechnungsposition is functionally nested within a Rechnung but not technically. This means we should put this Method in a more appropriate RechnungspositionService that handles CRUD for Rechnungsposition Objects

`Money` Type for `Rechnung\Betrag Netto`

https://www.martinfowler.com/eaaCatalog/money.html

Add `LieferstatusService\getAllLieferstatus`

Child of #33; Implement after #56

Rework `RechnungTable` Styling

Currently RechnungTable just uses what little styling comes out of the Angular-Material box.

Columns should use sensible styling to make data more readable

Add `filter` method to `RechnungService`

Child of #9

The signature of this new method is

RechnungService.filter(filter: Filter): []Rechnung

This new method takes a Filter object and applies it to the available Rechnung collection.

Fake Backend access. Retrieve a complete List of available Rechnung Objects from a static file and do the filtering in the service.
Add Unit Tests to ensure that replacing this Implementation with Backend Access won't break something downstream.

Generate Demo Data for `Rechnungsposition`

[POC]Dynamic DataSource Paging

Do before #12; Timeboxed 2h

Material Table does not support server-based paging (per their documentation). However, this isn't really needed since we want to simulate filtering on the backend anyway.

Check if Paging/Filtering can be implemented in a manageable timeframe

Alpha

As an Application User I want to pick a Rechnung from a Table to see its specific List of Rechnungsposition and Lieferstatus Information

Isolate Demo Data loading from Services

Child of #60

There are multiple scenarios for replacing the loading of data through services (like RechnungspositionService) if the need should arise in the future.

By taking out the preparation (and reviving) of the Demo Data this should be a much smaller task.

Add button to open `RechnungpositionDetailDialog`

Komponente 2 wird als Einblendung über einen Button aus der jeweiligen Paginator Zeile aus gestartet
— from #2

Remove the click function and replace with a designated button

Load `Rechnung` Data from JSON File

Don't send static data from within the service, load demo content from a JSON File

Consolidate shared Interfaces

Check if there are unused shared Interfaces and consolidate local Interfaces where possible

Add `RechnungpositionDetailDialog` Component

Child of #33

Add a new component to display data related to Rechnungposition

Load Services through `BusinessLogicService`

Methods defined in Client Requirements (#2) shouldn't be handled within the same service but should be grouped together to resemble the requested Business Logic.

Using a Facade to aggregate the different service into bespoke methods is probably the easiest ways to have our cake and eat it too.

Also this should make swapping backend services much easier

Inject demo JSON data via environment

Instead of hardwiring the demo data into RechnungService, inject the JSON Module via the environment files.

Add Angular 8 Project

Create a new Angular Application using Major Version 8

Erstelle Angular 8 Projekt mit Material

— from #2

Generate Test `Rechnung` Data

A small set of Test Data that was hand crafted might not show potential runtime issues. Generate some believable amounts of data.

Add `Lieferstatus` shared interface

Child of #33; Wiki Entry

There is no backend to retrieve 'real' Lieferstatus objects, but we still want to be prepared if there is one added later.

If the backend is using a compatible stack (such as koa on node) the interfaces can be used directly. If not, it is sufficient documentation about what the frontend expects from the backend.

Lieferposition\Produkt Name and Lieferstatus\Produkt Name will be used as Identites and matched with a case sensitive string compare.

The interface contains following properties:

• # Produkt Name: string
• # Lieferstatus: string

Add Angular Material to App

Add Angular Material to Application

Erstelle Angular 8 Projekt mit Material

— from #2

Clarification about `Rechnungs-UID` required

Rechnungs-UID is a Property/Field of Rechnung. There are two possible Definitions:

1. The Receivers "UID" (Umsatz-Steuer-Identifikations-Nummer) Number
2. An Identifier to be used for this Entity/Object

A Request for Clarification / further Information was sent to the Client on 2020-02-06.

Formatted `Rechnung\Datum` Column in `RechnungTable`

Convert the Datum to something sensible like dd. mm. YYYY