Réécriture du frontend (fairnesscoop#415)

* Setup NestJS with nunjucks templates

* Add login page

* Implement session-based auth

* Add e2e tests using Playwright

* Add app shell, add named routes

* Add translations w/ Fluent, implement basic FairCalendar, fixes

* Modularize CSS; update format/check

* Rework templates and css

* Tweaks, add proper RouteNameResolver

* Add styles to select

* Begin Faircalendar filters, add esbuild watch

* Add customer table and add form

* Add customer edit, update nav

* Drop Stimulus, use Web Component for FairCalendar

* Add projects, generic table API

* Add breadcrumbs

* Add tasks, refactor templates per resource

* Rework home and login routing

* Remove File

* Add EditProfileController

* Add user management, rework fullName

* Tweak margins, tweak calendar, tweak dark mode

* Fix tests, add more e2e tests, update README

* Drop client/kit and client/proxy

* Restructure CSS, standardize buttons and links, rework nav, header, dropdown, and more

* Add leaves, add leave requests, add holidays to FairCalendar

* Add PayrollElements pages, rework Table implementation to reuse logic for HTML and CSV outputs

* Add meal tickets pages, remove obsolete actions

* Bring back calendar ICS export, add calendar url widget

* Add calendar overview

* Add dynamic faircalendar filters, rework faircalendar layout

* Implement mobile menu v1

* Improve mobile menu

* More improvements and reorg

* Implement theme toggler

* Clean up CSS

* Drop legacy client

* Load FairCalendar JS only on FairCalendar page

* Make mobile navbar fill entire height

* Rework nav impl, add todos

* Fix unit tests

* Implement multi-days faircalendar events

* Replace FullCalendar by EventCalendar

* Fix e2e tests

* Fix: bring back clickable event

* Show/hide mission fields, bring back faircalendar day click

* Tweak turbolite, remove fullcalendar.js

* Switch to public .env + private .env.local

* Add Jelastic manifest

* Unnest server, prepare Scalingo deploy

* Experimental: add Docker image management setup

* Fix: user password was not mandatory in /app/profile/edit

* Fix "OFFSET must not be negative" error, get all projects in Event controllers

* Move back to Scalingo

* Show active-only users on faircalendar, add Scaleway db migration doc

* Run make format

* Set meta title from title var if defined

* Bring back favicon and PWA manifest

* Fix app layout whitespace

* Tweak nav groups

* Fix login image

* Fix untranslated messages

* Add flash message infra, improve login layout

* Setup error pages, setup login error flashes

* Fix login e2e test, add login redirect url

* Add link boosting

* Add navigation progress

* New layout fix attempt

* Load scripts in visited pages

* Switch to Turbo

* Add month/year filters to payroll elements page

* Add faircalendar e2e test, fix calendar caching

* Begin customers e2e test

* Post-merge cleanup

* Drop Turbo again, full page navigations are fine for now

* Fix database-test-init with --if-exists

* Progressively enhance filters form

* Progressively enhance payroll element filters form and download

* Progressively enhance leave calendar link clipboard copy

* Progressively enhance theme toggler: use system default when JS not available

* Drop is= on navMenuButton, simplify nav and shell CSS

* Extract monthNavigator custom element

* Various CSS, perf, and a11y tweaks

* Attempt fixing pg connection errors

* Switch to typeorm session store

* Move faircalendar CSS to own folder

* Add pc-frame for faircalendar

* Add faircalendar list view, calendar view becomes lazy, reduce CLS and FLOUC

server/.env.dist → .env

@@ -1,11 +1,11 @@
+# Defaults
 DATABASE_HOST=localhost
 DATABASE_PORT=5432
 DATABASE_USERNAME=docker
 DATABASE_PASSWORD=docker
 DATABASE_NAME=permacoop
-
-ACCOUNTING_PAD=4
-ACCOUNTING_INVOICE_PREFIX='FS'
-UPLOAD_LOCATION='uploads'
-FILE_ENCRYPTION_KEY='my_secret_key'
 CALENDAR_TOKEN='abcd1234'
+SESSION_SECRET=changeme
+SESSION_COOKIE_SECURE=false
+FLUENT_PATH=src/translations/fr-FR.ftl
+FLUENT_LOCALE=fr-FR

.github/workflows/ci.yml

@@ -11,12 +11,12 @@ jobs:
         with:
           node-version: 16
           cache: 'npm'
-          cache-dependency-path: client/kit/package-lock.json
+          cache-dependency-path: package-lock.json
 
       - uses: actions/cache@v2
         with:
           path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-node-${{ hashFiles('**/client/kit/package-lock.json') }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
 
       - name: Tests
         run: make ci

.gitignore

@@ -22,3 +22,21 @@ yarn-error.log*
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+
+# compiled output
+dist/
+uploads/
+/node_modules
+.env.local
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+lerna-debug.log*
+
+# Tests
+/coverage
+/.nyc_output
+test-results/
+playwright/

.scrutinizer.yml

@@ -6,8 +6,3 @@ build:
       tests:
         override:
           - js-scrutinizer-run
-filter:
-  excluded_paths:
-    - 'client/legacy/static'
-    - 'client/legacy/src/store'
-    - 'client/kit/static'

.vscode/settings.json

@@ -1,21 +1,13 @@
 {
 	"editor.codeActionsOnSave": {
-		"source.fixAll": true
+		"source.fixAll": "explicit"
 	},
 	"[javascript]": {
 		"editor.formatOnSave": false
 	},
 	"eslint.format.enable": true,
 	"eslint.lintTask.enable": true,
 	"eslint.workingDirectories": [
-        {
-            "directory": "./client/legacy",
-            "changeProcessCWD": true
-        },
-        {
-            "directory": "./client/kit",
-            "changeProcessCWD": true
-        },
 		{
             "directory": "./server",
             "changeProcessCWD": true

Makefile

@@ -1,73 +1,33 @@
+.PHONY: dist
+
 help:
 	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
 
 compose = docker-compose -p permacoop
 
-# See color codes here: http://jafrog.com/2013/11/23/colors-in-terminal.html
-run_api = ./tools/colorize_prefix.sh [api] 30 
-run_client_legacy = ./tools/colorize_prefix.sh [client:legacy] 31
-run_client_legacy_tailwind = ./tools/colorize_prefix.sh [client:legacy:tailwind] "38;5;52"
-run_client_kit = ./tools/colorize_prefix.sh [client:kit] "38;5;202"
-run_client_proxy = ./tools/colorize_prefix.sh [client:proxy] 32
-
-client_proxy_port = 3001
-client_legacy_port = 3002
-client_kit_port = 3003
-
-install: ## Install API and client
-	make install-api
-	make install-client
-ifneq ($(ANSIBLE),1)
-		make install-dev
-endif
-
-install-api: ## Install API
-	cp -n server/.env.dist server/.env
-	cd server && npm ci
-
-install-client: install-client-legacy install-client-kit install-client-proxy ## Install client
+run_server = ./tools/colorize_prefix.sh [server] 31
+run_watch = ./tools/colorize_prefix.sh [watch] 36
 
-install-client-legacy: ## Install legacy client
-	cp -n client/legacy/.env.dist client/legacy/.env
-	cd client/legacy && npm ci
+install: ## Install
+	make install-deps
+	make install-dev
 
-install-client-kit: ## Install SvelteKit client
-	cd client/kit && npm ci
-
-install-client-proxy: ## Install client proxy
-	cd client/proxy && npm ci
-
-install-client-e2e: ## Install E2E client dependencies
-	cd client/kit && npx playwright install firefox
+install-deps: ## Install dependencies
+	npm ci
 
 install-dev: ## Install local development dependencies and services
-	make up
+	npx playwright install firefox
+	make build
 	make database-test-init
 
-start: ## Start containers, API and client
-	make up
-	make -j 2 start-api start-client
-
-start-api: ## Run API
-	${run_api} "cd server && npm run start:dev"
-
-start-client: ## Run client
-	make -j 3 start-client-legacy start-client-kit start-client-proxy
+start: ## Start
+	make -j 2 start-server start-watch
 
-start-client-legacy: ## Run legacy client
-	make -j 2 start-client-legacy-dev start-client-legacy-tailwind
+start-server: up
+	${run_server} "npm run start:dev"
 
-start-client-legacy-dev:
-	PORT=${client_legacy_port} ${run_client_legacy} "cd client/legacy && npm run dev"
-
-start-client-legacy-tailwind:
-	${run_client_legacy_tailwind} "cd client/legacy && npm run watch:tailwind"
-
-start-client-kit: ## Run SvelteKit client
-	PORT=${client_kit_port} ${run_client_kit} "cd client/kit && npm run dev"
-
-start-client-proxy: ## Start client proxy
-	LEGACY_PORT=${client_legacy_port} KIT_PORT=${client_kit_port} PORT=${client_proxy_port} ${run_client_proxy} "cd client/proxy && npm run dev"
+start-watch:
+	${run_watch} "npm run assets:watch"
 
 compose: ## Run Docker compose command (args: CMD)
 	${compose} ${CMD}
@@ -87,108 +47,59 @@ rm: stop  ## Stop and remove containers
 ps: ## Show running containers
 	make compose CMD=ps
 
-build: build-api build-client ## Build API and client
-
-build-api: ## Build API dist
-	cd server && npm run build
-
-build-client: build-client-legacy build-client-kit ## Build client
-
-build-client-legacy: ## Build legacy client
-	cd client/legacy && npm run build
-
-build-client-kit: ## Build SvelteKit client
-	cd client/kit && npm run build
-
-start-dist: ## Serve built API and client
-	make -j 2 start-dist-api start-dist-client
-
-start-dist-api: ## Serve built API
-	${run_api} "cd server && npm run start:prod"
+build: dist assets ## Build dist and assets
 
-start-dist-client: ## Serve built client
-	make -j 3 start-dist-client-legacy start-dist-client-kit start-client-proxy
+dist:
+	npm run build
 
-start-dist-client-legacy: ## Serve built legacy client
-	PORT=${client_legacy_port} ${run_client_legacy} "cd client/legacy && npm run start"
+assets:
+	npm run assets:build
 
-start-dist-client-kit: ## Serve built client
-	HOST=127.0.0.1 PORT=${client_kit_port} ${run_client_kit} "cd client/kit && npm run start"
+start-dist: ## Serve built server
+	npm run start
 
-test: test-api test-client-unit ## Run test suite
+test: ## Run tests
+	npm run test -- $(FILE)
 
-test-api: ## Run API tests
-	cd server && npm run test -- $(FILE)
+test-watch: ## Run tests in watch mode
+	npm run test:watch
 
-test-api-watch: ## Run API tests in watch mode
-	cd server && npm run test:watch
+test-cov: ## Run tests with coverage enabled
+	npm run test:cov
 
-test-api-cov: ## Run API tests with coverage enabled
-	cd server && npm run test:cov
+test-e2e:
+	npx playwright test
 
-test-client: test-client-legacy-unit test-client-kit-unit ## Run client tests
+linter: ## Run linters
+	npm run lint
 
-test-client-legacy-unit: ## Run legacy client unit tests
-	cd client/legacy && npm run test-unit
-
-test-client-kit-unit: ## Run SvelteKit client unit tests
-	cd client/kit && npm run test:coverage
-
-test-client-e2e: ## Run client E2E tests (servers must be running)
-	make database-seed
-	cd client/kit && npm run test-e2e
-
-test-client-ci: test-client test-client-e2e-ci
-
-test-client-e2e-ci: ## Run client E2E tests
-	make database-seed
-	cd client/kit && npm run test-e2e:ci
-
-linter: linter-api linter-client ## Run linters
-
-linter-api: ## Run API linters
-	cd server && npm run lint
-
-linter-client: linter-client-legacy linter-client-kit ## Run client linters
-
-linter-client-legacy: ## Run legacy client linters
-	cd client/legacy && npm run lint
-
-linter-client-kit: ## Run SvelteKit client linters
-	cd client/kit && npm run lint
-
-format: format-api format-client ## Run code formatting
-
-format-api: ## Run API code formatting
-	cd server && npm run format
-
-format-client: format-client-kit ## Run client code formatting
-
-format-client-kit: ## Run SvelteKit client code formatting
-	cd client/kit && npm run format
+format: ## Run code formatting
+	npm run format
 
 database-migrate: ## Database migrations
-	cd server && npm run migration:migrate
+	npm run migration:migrate
 
-database-test-init: ## Initialize test database
-	make compose CMD="exec -T database createdb permacoop_test" || echo 'Does the test DB already exist? Ignoring...'
-	DATABASE_NAME=permacoop_test make database-migrate
+database-test-init: up ## Initialize test database
+	make compose CMD="exec -T database dropdb --if-exists permacoop_hotwire_test"
+	make compose CMD="exec -T database createdb permacoop_hotwire_test"
+	make database-migrate DATABASE_NAME=permacoop_hotwire_test
+	make database-seed DATABASE_NAME=permacoop_hotwire_test
 
 database-migration: ## Generate a database migration
-	cd server && npm run migration:generate -- migrations/$(NAME)
+	npm run migration:generate -- migrations/$(NAME)
+
 database-seed: ## Seed database
-	cd server && npm run build && npm run seed:run
+	npm run seed:run
 
 database-connect: ## Connect to the database container
 	${compose} exec database psql -h database -d permacoop
 
-ci: ## Run CI checks
-	make compose CMD="up -d"
+ci: up ## Run CI checks
 	make install
-	make install-client-e2e
+	make linter
+	make test-cov
+	make test-e2e CI=1 DATABASE_NAME=permacoop_hotwire
+
+scalingo-postbuild:
 	make build
 	make database-migrate
-	make test-api-cov
-	make database-test-init
-	make test-client-ci
-	make linter

Procfile

@@ -0,0 +1 @@
+web: make start-dist

README.md

@@ -11,13 +11,12 @@ Permacoop is an open source and eco design ERP solution reserved for worker-owne
 
 ## Technical stack
 
-- [Node.js](https://nodejs.org) / [Nestjs](https://nestjs.com/)
+- [Node.js](https://nodejs.org) / [Nestjs](https://nestjs.com/) / [Nunjucks](https://mozilla.github.io/nunjucks/templating.html)
+- HTML, CSS, [WebComponents](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components)
 - [TypeORM](https://typeorm.io)
+- [PostgreSQL](https://www.postgresql.org/)
 - [Typescript](https://www.typescriptlang.org/)
 - [Jest](https://jestjs.io/) / [ts-mockito](https://github.com/NagRock/ts-mockito)
-- [Svelte](https://svelte.dev/) / [SvelteKit](https://kit.svelte.dev) / [Sapper](https://sapper.svelte.dev/) (legacy)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [PostgreSQL](https://www.postgresql.org/)
 - [Docker](https://www.docker.com/)
 
 ## Prerequisites
@@ -61,10 +60,7 @@ This command will create the default user "John Doe" :
 }
 ```
 
-The server and client will be started:
-
-- API documentation available on <http://localhost:3000/api>
-- Client available on <http://localhost:3001/>
+The server will be available at <http://localhost:3000>.
 
 ## Helpers
 
@@ -91,16 +87,10 @@ To run tests, use:
 make test
 ```
 
-For E2E tests, you will need to install additional dependencies first:
-
-```bash
-make install-client-e2e
-```
-
 Run E2E tests using:
 
 ```bash
-make test-client-e2e
+make test-e2e
 ```
 
 ### Code quality
@@ -125,12 +115,6 @@ To generate a migration from the current state of the code, run:
 make database-migration NAME=add_some_column
 ```
 
-## Security
-
-The client must send the user `apiToken` in the Authorization header when making requests to protected resources : `Authorization: Bearer <apiToken>`
-
-To retrieve the `apiToken`, make a post request on `/login` with a user email and password.
-
 ## Features
 
 - Tasks management
@@ -141,12 +125,6 @@ To retrieve the `apiToken`, make a post request on `/login` with a user email an
   - Meal tickets
   - Leaves
   - Cooperators / employee
-  - Savings records
-- Accounting
-  - Quotations
-  - Daily rates
-  - Invoicing
-- Contacts managment
 
 ## Credits