joluj/stockeer

Stockeer

Setup (Already done)

# create workspace
yarn create nx-workspace --package-manager=yarn # preset: apps, no nx cloud

# add dependencies
yarn add -D --exact @nrwl/nest @nrwl/angular @nrwl/storybook @storybook/addon-essentials @twittwer/compodoc @nxtend/ionic-angular @storybook/addon-docs @capacitor/core @ionic/angular @ionic/storage-angular @nxtend/capacitor

# create app
yarn nx generate @nxtend/ionic-angular:application --name=app # template: blank

Create UI Module

1. Use the workspace generator. Folder Name is optional.

yarn nx workspace-generator module <moduleName> <folderName>
# example
yarn nx workspace-generator module titlebar gui

2. Usually: Add IonicModule.forRoot() to the imports of moduleMetadata in <component-name>.component.stories.ts.

General Rules

Here are some general rules for development.

• Stores

Database Information

Interaction with the Database is handled by TypeORM. The Database scheme is created by migrations, which have to be generated. The file ormconfig.env configures the connection string to the database and contains the path to the migration files / entity definitions. The initial migration has been created using yarn run typeorm:migration:generate -n InitDB. What happens is that a script looks up the entities and the current state of the specified database. It then generates sql commands that would sync the state of the database to the current state of the entity definitions. For example:

• Database contains relation User
• Entity folder contains User AND Product -> Migration will see that the Database differs from the specified entities and generate sql commands that will create the Product relation.
• The migrations that have to be run will be specified in the DatabaseModule!

Workflow

1. Start angular: nx run app:serve
2. Start backend: nx run backend:serve # Backend integration is still WIP.
3. Open Android Studio with nx run app:open:android and run the app from there.
4. (Optional) Debugging: Go to chrome://inspect and select your connected device to see the logs.

Deployment

We have created a fully automatic deploy script. This script uses the locally created production builds (no docker), packs it into containers, transfers these containers to a target server and restarts these. This is not a good practice, however we don't have access to a (atm) private docker registry where we can publish the images.

Run ./devops/build-and-deploy.sh username@server /path/to/stockeer.

Example: ./devops/build-and-deploy.sh [email protected] /home/someuser/docker/stockeer.

Note that this script requires an external docker network nginx-pm. There a several projects running on our production server, which are handled by Nginx Proxy Manager.

stockeer's Issues

Add optimistic updates

Currently updates are successful only after the entity was saved to the server. The following workflow should be implemented.

Currently (local persistence is implicit on setSuccess/setError):

sequenceDiagram

actor u as User / Component
participant s as Store
participant b as Backend

u->>s: setProduct(p)

s->>b: setProduct(p)

alt is successful
    b-->>s: savedProduct
    s->>s: setSuccess(p)
else is error
    Note over s: Everything breaks
end

Loading

Wanted:

sequenceDiagram

actor u as User / Component
participant s as Store
participant b as Backend

u->>s: setProduct(p)
s->>s: setProductSuccess(p)

s->>b: setProduct(p)

alt is successful
    b-->>s: savedProduct
    s->>s: setSuccess(p)
else is error
    b-->>s: error
    s->>s: setError(p)
    Note over s: See Note A
end

Loading

Note A: Requests marked as error will be retried periodically

Salt password

Backend must save the password salted.

Date Selector broken

The date selector is broken after the update to ionic 6.

Add backend support for saving stockeers and products

Create product-overview Component

Hier sollen die gefilterten Items angezeigt werden.

Create android app deployment script

• Simple creation of an APK #35
• Automatic creatioin of a signed APK

Add "only-once" functionality to ensureXYZ Actions

Scrolling not possible

Scrolling is not possible on the main page

Initialize Barcode Scanner

Simple Barcode Scanner module that must work on android (web not needed)

Clean Entities

Wegen paar Problemchen mit den TypeORM / Class-validator packages können die Entities und Dtos nicht wirklich im Frontend verwendet werden. Im #18 PR hab ich jetzt schonmal alle Interfaces in die library "types" verschoben. Diese Interfaces sind für die Stores. Das IStorage interface beinhaltet beispielsweise die ids der enthaltenen Products. Aber im Frontend will man eher mit Entities arbeiten, bei denen dann die Storage klasse nicht die ids der Products enthält, sondern einen Array von Products.
-> Müssen noch erstellt werden!

Und ein Problem, das ich noch im allgemeinen sehe: wie wollen wir viel Codeduplikation vermeiden, wenn man wirklich keine von den Dtos im frontend verwenden kann, die mit class-validator decorators annotiert sind? @joluj hat das nicht sogar geklappt, wenn man die dtos einfach als interface exportiert, oder darf wirklich keine lib referenziert werden, in denen class-validator sachen sind?

Support multiple stockeers

Currently just one stockeer ist supported. Having multiple stockeers is manditory.

Save barcode-name association

There should be an endpoint to request product names based on barcodes.
Currently we don't want to access a third party service, so we'll solve this by saving our own associations.

The names for the barcodes should be periodically aggregated by any particular logic.
E.g. There are products with the barcode 123456789 named "Product A" and "Product B". For now it's okay to just use any random name, so no "take newest" or "take most" or similar is required.

Unify all storybooks into one command

As a dev I want to have a single storybook run configuration that shows stories for all libs (and optionally apps).

Why?

• Easier developing
• Single config for all

It is acceptable if a dev has to run compodoc as well in parallel.

Fix dependency warning

Create Titlebar Component

• Titlebar Component in einer lib
• ???

Fix nx dependencies

Does not recognize the dependency from app to gui-toolbar as can one can see when running nx graph or in this comment.

Implement toggle menu for titlebar

Creater Docker Images

• docker-compose.yml
• auto build of required containers
• add some way to deploy (registry or pack containers)

Add local storage support for products and stockeers

• Stockeers
  • create c921b73
  • update
  • delete
• Products
  • create c921b73
  • update 373952a
  • delete c921b73

Integrate Product Addit

The Product Addit page exists but cannot be accessed yet for

• New Products (add)
• Existing Products (edit)

Add linting as prepush hooks

All affected apps/libs should be linted before allowing a commit.
All affected apps/libs should be tested before allowing a push.

Possible libs:

• https://typicode.github.io/husky/#/
• ...

[Story] ProductOverviewComponent: Show info when no Items are present

It's currently blank and ugly

Create Addit Product Dialog component

Implement Custom Angular Component Generator

Current Component Generator is copied from the nx repo. We have to remove this copy pasta and write our own generator, or find a better use of the existing generator without copying it.

Back button does not work

Switch zu Prisma

Prisma hört sich doch um einiges besser an als TypeORM.

• Mehr Typesafety

• Angebotene APIs funktioniert eher so, wie man es erwartet (bei TypeORM nicht so, siehe beispielsweise Verknüpfen von Entities über einen Foreign Key)

• Raw Queries möglich, die SQL Injection safe sind, dank tagged templates (sexy)

• Performancevergleich unknown

-> Ich probiers mal aus

Create CI

Use services in stores

Remove unnecessary android files from git

Some android files are autogenerated by nx run app:sync:android and thus don't need to be checked in.

Create NGRX Store

Create Filter Component

Komponente zum filtern der Storages und Products

Add HowTos

TODO: How to...

• generate an angular ui module #10
• generate a normal module
• start the app
• ???

Tests don't fail with wrong setup

E.g. here: https://github.com/joluj/stockeer/runs/6868976787?check_suite_focus=true.

Run Tests emits these errors but the pipeline runs successful:

> nx run gui-product-overview:test

  console.error
    NG0304: 'ion-list' is not a known element:
    1. If 'ion-list' is an Angular component, then verify that it is part of this module.
    2. If 'ion-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

      at validateElementIsKnown (../../../node_modules/@angular/core/fesm2020/core.mjs:14680:21)
      at elementStartFirstCreatePass (../../../node_modules/@angular/core/fesm2020/core.mjs:14510:18)
      at ɵɵelementStart (../../../node_modules/@angular/core/fesm2020/core.mjs:14547:9)
      at ProductOverviewComponent_Template (../../../ng:/ProductOverviewComponent.js:[27](https://github.com/joluj/stockeer/runs/6868976787?check_suite_focus=true#step:10:28):9)
      at executeTemplate (../../../node_modules/@angular/core/fesm2020/core.mjs:96[33](https://github.com/joluj/stockeer/runs/6868976787?check_suite_focus=true#step:10:34):9)
      at renderView (../../../node_modules/@angular/core/fesm2020/core.mjs:9436:13)
      at renderComponent$1 (../../../node_modules/@angular/core/fesm2020/core.mjs:107[37](https://github.com/joluj/stockeer/runs/6868976787?check_suite_focus=true#step:10:38):5)

Add proper auth screen

Currently it works with window.prompt to for a quick POC. This must be made pretty.

Registration will come in another issue.

• UI Component #57
• Integration

Default-Werte aus `<component>.stories.ts` werden erst nach Konstruktor-Aufruf zugewiesen.

Die Default-Werte aus Primary.args in <component>.stories.ts werden den Input-Werten der components erst nach dem Konstruktor-Aufruf zugewiesen. Somit können diese noch nicht im Konstruktor verwendet werden. Das führt beispielsweise zu Problemen wenn man reactive-forms aus den Input-Werten zusammenbauen möchte.