refactor: add healthchecks to backend images

feat: update nix flake to not rely on buildFHSUserEnv

.changeset/good-eggs-add.md

@@ -0,0 +1,5 @@
+---
+"@openstapps/prettier-config": patch
+---
+
+Update Prettier to 3.1.1

.changeset/nine-bears-speak.md

@@ -0,0 +1,6 @@
+---
+"@openstapps/backend": minor
+"@openstapps/core": minor
+---
+
+Add the ability to filter by existence of a field

.changeset/old-bottles-hide.md

@@ -0,0 +1,5 @@
+---
+"@openstapps/backend": patch
+---
+
+Backend unit tests break every year

.tool-versions

@@ -1,3 +1,3 @@
-nodejs 18.19.1
+nodejs 18.16.1
-pnpm 8.15.4
+pnpm 8.8.0
 python 3.11.5

backend/backend/CHANGELOG.md

@@ -1,20 +1,5 @@
 # @openstapps/backend
 
-## 3.2.0
-
-### Minor Changes
-
-- 912ae422: Add the ability to filter by existence of a field
-
-### Patch Changes
-
-- 689ac68b: pin alpine version to 3.18 and add healthchecks
-- e8d72683: Backend unit tests break every year
-- Updated dependencies [912ae422]
-  - @openstapps/core@4.0.0
-  - @openstapps/core-tools@3.0.0
-  - @openstapps/logger@3.0.0
-
 ## 3.1.2
 
 ### Patch Changes

backend/backend/Dockerfile

@@ -9,6 +9,6 @@ ENV NODE_ENV=production
 WORKDIR /app
 
 EXPOSE 3000
-HEALTHCHECK --interval=10s --timeout=10s --start-period=10s --retries=12 CMD curl -s --fail --request POST --data '{}' --header 'Content-Type: application/json' http://localhost:3000/ >/dev/null || exit 1
-
 ENTRYPOINT ["node", "app.js"]
+
+HEALTHCHECK --interval=10s --timeout=5s --start-period=10s --retries=12 CMD curl -s --fail --request POST --data '{}' --header 'Content-Type: application/json' http://localhost:3000/ >/dev/null || exit 1

backend/backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/backend",
   "description": "A reference implementation for a StApps backend",
-  "version": "3.2.0",
+  "version": "3.1.2",
   "private": true,
   "type": "module",
   "license": "AGPL-3.0-only",
@@ -64,7 +64,7 @@
     "express-prom-bundle": "6.6.0",
     "express-promise-router": "4.1.1",
     "got": "12.6.0",
-    "moment": "2.30.1",
+    "moment": "2.29.4",
     "morgan": "1.10.0",
     "nock": "13.3.1",
     "node-cache": "5.1.2",
@@ -98,9 +98,9 @@
     "sinon": "15.0.4",
     "sinon-express-mock": "2.2.1",
     "supertest": "6.3.3",
-    "ts-node": "10.9.2",
+    "ts-node": "10.9.1",
     "tsup": "6.7.0",
-    "typescript": "5.4.2"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

backend/database/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @openstapps/database
 
-## 3.2.0
-
-### Patch Changes
-
-- 689ac68b: pin alpine version to 3.18 and add healthchecks
-
 ## 3.0.0
 
 ### Patch Changes

backend/database/Dockerfile

@@ -14,6 +14,6 @@ RUN chown elasticsearch:elasticsearch config/elasticsearch.yml
 
 USER elasticsearch
 
-HEALTHCHECK --interval=10s --timeout=10s --start-period=60s --retries=12 CMD curl --fail -s http://localhost:9200/ >/dev/null || exit 1
-
 CMD ["/usr/share/elasticsearch/bin/elasticsearch"]
+
+HEALTHCHECK --interval=10s --timeout=5s --start-period=60s --retries=12 CMD curl --fail -s http://localhost:9200/ >/dev/null || exit 1

backend/database/config/elasticsearch.yml

@@ -3,4 +3,4 @@ discovery.type: "single-node"
 cluster.routing.allocation.disk.threshold_enabled: false
 network.bind_host: 0.0.0.0
 xpack.security.enabled: false
-ingest.geoip.downloader.enabled: false
+ingest.geoip.downloader.enabled: false

backend/database/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstapps/database",
-  "version": "3.2.0",
+  "version": "3.0.0",
   "private": true,
   "files": [
     "config",

backend/proxy/config/default.cjs

@@ -16,7 +16,7 @@
 
 // ESM is not supported, and cts is not detected, so we use type-checked cjs instead.
 /** @type {import('../src/common').ConfigFile} */
-module.exports = {
+const configFile = {
   activeVersions: ['1\\.0\\.\\d+', '2\\.0\\.\\d+'],
   hiddenRoutes: ['/bulk'],
   logFormat: 'default',
@@ -31,3 +31,5 @@ module.exports = {
     dhparam: '/etc/nginx/certs/dhparam.pem',
   },
 };
+
+export default configFile;

backend/proxy/package.json

@@ -50,8 +50,8 @@
     "dockerode": "3.3.5",
     "is-cidr": "4.0.2",
     "mustache": "4.2.0",
-    "semver": "7.6.0",
+    "semver": "7.5.4",
-    "typescript": "5.4.2"
+    "typescript": "5.1.6"
   },
   "devDependencies": {
     "@openstapps/api-cli": "workspace:*",
@@ -65,7 +65,7 @@
     "@types/mustache": "4.2.2",
     "@types/node": "18.15.3",
     "@types/proxyquire": "1.3.28",
-    "@types/semver": "7.5.8",
+    "@types/semver": "7.5.6",
     "@types/sha1": "1.1.3",
     "@types/sinon": "10.0.14",
     "@types/sinon-chai": "3.2.9",
@@ -75,7 +75,7 @@
     "mocha-junit-reporter": "2.2.0",
     "sinon": "15.0.4",
     "sinon-chai": "3.7.0",
-    "ts-node": "10.9.2",
+    "ts-node": "10.9.1",
     "tsup": "6.7.0"
   },
   "tsup": {

configuration/eslint-config/package.json

@@ -18,15 +18,16 @@
   "devDependencies": {
     "@openstapps/tsconfig": "workspace:*",
     "@types/node": "18.15.3",
-    "eslint": "8.57.0",
+    "eslint": "8.43.0",
-    "typescript": "5.4.2"
+    "typescript": "5.1.6"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "7.2.0",
+    "@typescript-eslint/parser": "5.60.1",
-    "eslint": "8.57.0",
+    "eslint": "8.43.0",
-    "eslint-config-prettier": "9.1.0",
+    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-jsdoc": "48.2.1",
+    "eslint-plugin-jsdoc": "46.4.2",
-    "eslint-plugin-unicorn": "51.0.1"
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-unicorn": "47.0.0"
   }
 }

configuration/prettier-config/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @openstapps/prettier-config
 
-## 3.2.0
-
-### Patch Changes
-
-- dbb55850: Update Prettier to 3.1.1
-
 ## 3.0.0
 
 ### Major Changes
@@ -36,7 +30,7 @@
 
   ```js
   #!/usr/bin/env node
-  import "./lib/app.js";
+  import './lib/app.js';
   ```
 
 - 64caebaf: Migrate to ESM
@@ -75,14 +69,11 @@
 - 64caebaf: Migrated changelogs to changeset format
 
   ```js
-  import fs from "fs";
+  import fs from 'fs';
 
-  const path = "packages/logger/CHANGELOG.md";
+  const path = 'packages/logger/CHANGELOG.md';
 
-  fs.writeFileSync(
+  fs.writeFileSync(path, fs.readFileSync(path, 'utf8').replace(/^#+\s+\[/gm, '## ['));
-    path,
-    fs.readFileSync(path, "utf8").replace(/^#+\s+\[/gm, "## ["),
-  );
   ```
 
 - 98546a97: Migrate away from @openstapps/configuration
@@ -124,7 +115,7 @@
 
   ```js
   #!/usr/bin/env node
-  import "./lib/app.js";
+  import './lib/app.js';
   ```
 
 - 64caebaf: Migrate to ESM
@@ -163,14 +154,11 @@
 - 64caebaf: Migrated changelogs to changeset format
 
   ```js
-  import fs from "fs";
+  import fs from 'fs';
 
-  const path = "packages/logger/CHANGELOG.md";
+  const path = 'packages/logger/CHANGELOG.md';
 
-  fs.writeFileSync(
+  fs.writeFileSync(path, fs.readFileSync(path, 'utf8').replace(/^#+\s+\[/gm, '## ['));
-    path,
-    fs.readFileSync(path, "utf8").replace(/^#+\s+\[/gm, "## ["),
-  );
   ```
 
 - 98546a97: Migrate away from @openstapps/configuration

configuration/prettier-config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/prettier-config",
   "description": "StApps Prettier Config",
-  "version": "3.2.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "GPL-3.0-only",
   "repository": "git@gitlab.com:openstapps/prettier-config.git",

configuration/projectmanagement/package.json

@@ -43,8 +43,8 @@
     "@openstapps/logger": "workspace:*",
     "@slack/web-api": "6.8.1",
     "commander": "10.0.0",
-    "date-fns": "3.6.0",
+    "date-fns": "2.30.0",
-    "glob": "10.3.10",
+    "glob": "10.2.7",
     "mustache": "4.2.0"
   },
   "devDependencies": {
@@ -53,7 +53,7 @@
     "@openstapps/tsconfig": "workspace:*",
     "@types/chai": "4.3.5",
     "@types/chai-as-promised": "7.1.5",
-    "@types/glob": "8.1.0",
+    "@types/glob": "8.0.1",
     "@types/mocha": "10.0.1",
     "@types/mustache": "4.2.2",
     "@types/node": "18.15.3",
@@ -63,9 +63,9 @@
     "chai-as-promised": "7.1.1",
     "mocha": "10.2.0",
     "mocha-junit-reporter": "2.2.0",
-    "ts-node": "10.9.2",
+    "ts-node": "10.9.1",
     "tsup": "6.7.0",
-    "typescript": "5.4.2"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

examples/minimal-connector/CHANGELOG.md

@@ -1,14 +1,5 @@
 # @openstapps/minimal-connector
 
-## 3.2.0
-
-### Patch Changes
-
-- Updated dependencies [912ae422]
-  - @openstapps/core@4.0.0
-  - @openstapps/api@4.0.0
-  - @openstapps/logger@3.0.0
-
 ## 3.1.1
 
 ### Patch Changes

examples/minimal-connector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/minimal-connector",
   "description": "This is a minimal connector which serves as an example",
-  "version": "3.2.0",
+  "version": "3.1.1",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",
@@ -53,9 +53,9 @@
     "mocha": "10.2.0",
     "mocha-junit-reporter": "2.2.0",
     "nock": "13.3.1",
-    "ts-node": "10.9.2",
+    "ts-node": "10.9.1",
     "tsup": "6.7.0",
-    "typescript": "5.4.2"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

examples/minimal-plugin/CHANGELOG.md

@@ -1,16 +1,5 @@
 # @openstapps/minimal-plugin
 
-## 3.2.0
-
-### Patch Changes
-
-- Updated dependencies [912ae422]
-  - @openstapps/core@4.0.0
-  - @openstapps/api@4.0.0
-  - @openstapps/api-plugin@4.0.0
-  - @openstapps/core-tools@3.0.0
-  - @openstapps/logger@3.0.0
-
 ## 3.1.1
 
 ### Patch Changes

examples/minimal-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/minimal-plugin",
   "description": "Minimal Plugin",
-  "version": "3.2.0",
+  "version": "3.1.1",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",
@@ -35,7 +35,7 @@
     "@openstapps/logger": "workspace:*",
     "commander": "10.0.0",
     "express": "4.18.2",
-    "ts-node": "10.9.2"
+    "ts-node": "10.9.1"
   },
   "devDependencies": {
     "@openstapps/eslint-config": "workspace:*",
@@ -44,7 +44,7 @@
     "@types/express": "4.17.17",
     "@types/node": "18.15.3",
     "tsup": "6.7.0",
-    "typescript": "5.4.2"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

frontend/app/.browserslistrc

@@ -5,4 +5,10 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5% in DE and last 2 major versions and supports es6 and not dead
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not kaios 2.5
+not op_mini all
+not IE 9-11

frontend/app/CHANGELOG.md

@@ -1,15 +1,5 @@
 # @openstapps/app
 
-## 3.2.0
-
-### Patch Changes
-
-- 689ac68b: pin alpine version to 3.18 and add healthchecks
-- Updated dependencies [912ae422]
-  - @openstapps/core@4.0.0
-  - @openstapps/api@4.0.0
-  - @openstapps/collection-utils@3.0.0
-
 ## 3.1.2
 
 ### Patch Changes

frontend/app/Dockerfile

@@ -1,7 +1,7 @@
 # Creates a docker image with only the app as an executable unit
 # Dependencies need to be installed beforehand
 # Needs to be build beforehand
-FROM node:18-alpine3.18
+FROM node:18-alpine
 
 WORKDIR /app
 COPY www/ /app/www

frontend/app/angular.json

@@ -97,20 +97,20 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "buildTarget": "app:build"
+            "browserTarget": "app:build"
           },
           "configurations": {
             "production": {
-              "buildTarget": "app:build:production"
+              "browserTarget": "app:build:production"
             },
             "development": {
-              "buildTarget": "app:build:development"
+              "browserTarget": "app:build:development"
             },
             "ci": {
-              "buildTarget": "app:build"
+              "browserTarget": "app:build"
             },
             "fake": {
-              "buildTarget": "app:build:fake"
+              "browserTarget": "app:build:fake"
             }
           },
           "defaultConfiguration": "development"

frontend/app/cypress/integration/dashboard.spec.ts

@@ -173,7 +173,7 @@ describe('dashboard', async function () {
       cy.visit('/overview');
 
       cy.get('ion-searchbar').click({scrollBehavior: 'center'});
-      cy.url().should('include', '/search');
+      cy.url().should('eq', Cypress.config().baseUrl + '/search');
       cy.get('ion-searchbar').should('not.have.value');
       cy.get('ion-searchbar input.searchbar-input').should('have.focus');
 

frontend/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/app",
   "description": "The generic app tailored to fulfill needs of German universities, written using Ionic Framework.",
-  "version": "3.2.0",
+  "version": "3.1.2",
   "private": true,
   "license": "GPL-3.0-only",
   "author": "Karl-Philipp Wulfert <krlwlfrt@gmail.com>",
@@ -21,7 +21,7 @@
     "build:prod": "ng build --configuration=production",
     "build:stats": "ng build --configuration=production --stats-json",
     "changelog": "conventional-changelog -p angular -i src/assets/about/CHANGELOG.md -s -r 0",
-    "check-icons": "ts-node scripts/check-icon-correctness.ts",
+    "check-icons": "ts-node-esm scripts/check-icon-correctness.ts",
     "chromium:no-cors": "chromium --disable-web-security --user-data-dir=\".browser-data/chromium\"",
     "chromium:virtual-host": "chromium --host-resolver-rules=\"MAP mobile.app.uni-frankfurt.de:* localhost:8100\" --ignore-certificate-errors",
     "cypress:open": "cypress open",
@@ -52,34 +52,34 @@
     "test:integration": "sh integration-test.sh"
   },
   "dependencies": {
-    "@angular/animations": "17.3.0",
+    "@angular/animations": "16.1.4",
-    "@angular/cdk": "17.3.0",
+    "@angular/cdk": "16.1.4",
-    "@angular/common": "17.3.0",
+    "@angular/common": "16.1.4",
-    "@angular/core": "17.3.0",
+    "@angular/core": "16.1.4",
-    "@angular/forms": "17.3.0",
+    "@angular/forms": "16.1.4",
-    "@angular/platform-browser": "17.3.0",
+    "@angular/platform-browser": "16.1.4",
-    "@angular/router": "17.3.0",
+    "@angular/router": "16.1.4",
-    "@asymmetrik/ngx-leaflet": "17.0.0",
+    "@asymmetrik/ngx-leaflet": "16.0.1",
-    "@asymmetrik/ngx-leaflet-markercluster": "17.0.0",
+    "@asymmetrik/ngx-leaflet-markercluster": "16.0.0",
-    "@awesome-cordova-plugins/calendar": "6.6.0",
+    "@awesome-cordova-plugins/calendar": "5.45.0",
-    "@awesome-cordova-plugins/core": "6.6.0",
+    "@awesome-cordova-plugins/core": "5.45.0",
-    "@capacitor/app": "5.0.7",
+    "@capacitor/app": "5.0.6",
-    "@capacitor/browser": "5.2.0",
+    "@capacitor/browser": "5.1.0",
-    "@capacitor/clipboard": "5.0.7",
+    "@capacitor/clipboard": "5.0.6",
-    "@capacitor/core": "5.7.3",
+    "@capacitor/core": "5.5.0",
-    "@capacitor/device": "5.0.7",
+    "@capacitor/device": "5.0.6",
-    "@capacitor/dialog": "5.0.7",
+    "@capacitor/dialog": "5.0.6",
-    "@capacitor/filesystem": "5.2.1",
+    "@capacitor/filesystem": "5.1.4",
-    "@capacitor/geolocation": "5.0.7",
+    "@capacitor/geolocation": "5.0.6",
-    "@capacitor/haptics": "5.0.7",
+    "@capacitor/haptics": "5.0.6",
-    "@capacitor/keyboard": "5.0.8",
+    "@capacitor/keyboard": "5.0.6",
-    "@capacitor/local-notifications": "5.0.7",
+    "@capacitor/local-notifications": "5.0.6",
-    "@capacitor/network": "5.0.7",
+    "@capacitor/network": "5.0.6",
-    "@capacitor/preferences": "5.0.7",
+    "@capacitor/preferences": "5.0.6",
-    "@capacitor/share": "5.0.7",
+    "@capacitor/share": "5.0.6",
-    "@capacitor/splash-screen": "5.0.7",
+    "@capacitor/splash-screen": "5.0.6",
     "@ionic-native/core": "5.36.0",
-    "@ionic/angular": "7.8.0",
+    "@ionic/angular": "7.1.3",
     "@ionic/storage-angular": "4.0.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
@@ -87,104 +87,104 @@
     "@openstapps/api": "workspace:*",
     "@openstapps/collection-utils": "workspace:*",
     "@openstapps/core": "workspace:*",
-    "@transistorsoft/capacitor-background-fetch": "5.2.0",
+    "@transistorsoft/capacitor-background-fetch": "5.1.1",
-    "@types/dom-view-transitions": "1.0.4",
+    "@types/dom-view-transitions": "1.0.1",
     "capacitor-secure-storage-plugin": "0.9.0",
     "cordova-plugin-calendar": "5.1.6",
-    "date-fns": "3.6.0",
+    "date-fns": "2.30.0",
     "deepmerge": "4.3.1",
     "form-data": "4.0.0",
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
     "jsonpath-plus": "6.0.1",
-    "leaflet": "1.9.4",
+    "leaflet": "1.9.3",
     "leaflet.markercluster": "1.5.3",
-    "material-symbols": "0.17.0",
+    "material-symbols": "0.10.0",
-    "moment": "2.30.1",
+    "moment": "2.29.4",
-    "ngx-date-fns": "11.0.0",
+    "ngx-date-fns": "10.0.1",
     "ngx-logger": "5.0.12",
-    "ngx-markdown": "17.1.1",
+    "ngx-markdown": "16.0.0",
     "ngx-moment": "6.0.2",
     "opening_hours": "3.8.0",
     "rxjs": "7.8.1",
-    "semver": "7.6.0",
+    "semver": "7.5.4",
     "swiper": "8.4.5",
-    "tslib": "2.6.2",
+    "tslib": "2.4.1",
-    "zone.js": "0.14.4"
+    "zone.js": "0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1703.0",
+    "@angular-devkit/architect": "0.1601.4",
-    "@angular-devkit/build-angular": "17.3.0",
+    "@angular-devkit/build-angular": "16.1.4",
-    "@angular-devkit/core": "17.3.0",
+    "@angular-devkit/core": "16.1.4",
-    "@angular-devkit/schematics": "17.3.0",
+    "@angular-devkit/schematics": "16.1.4",
-    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/builder": "16.1.0",
-    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin": "16.1.0",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "16.1.0",
-    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/schematics": "16.1.0",
-    "@angular-eslint/template-parser": "17.3.0",
+    "@angular-eslint/template-parser": "16.1.0",
-    "@angular/cli": "17.3.0",
+    "@angular/cli": "16.1.4",
-    "@angular/compiler": "17.3.0",
+    "@angular/compiler": "16.1.4",
-    "@angular/compiler-cli": "17.3.0",
+    "@angular/compiler-cli": "16.1.4",
-    "@angular/language-server": "17.3.0",
+    "@angular/language-service": "16.1.4",
-    "@angular/language-service": "17.3.0",
+    "@angular/platform-browser-dynamic": "16.1.4",
-    "@angular/platform-browser-dynamic": "17.3.0",
+    "@capacitor/android": "5.5.0",
-    "@capacitor/android": "5.7.3",
+    "@capacitor/assets": "3.0.1",
-    "@capacitor/assets": "3.0.4",
+    "@capacitor/cli": "5.5.0",
-    "@capacitor/cli": "5.7.3",
+    "@capacitor/ios": "5.5.0",
-    "@capacitor/ios": "5.7.3",
+    "@compodoc/compodoc": "1.1.19",
-    "@compodoc/compodoc": "1.1.23",
+    "@cypress/schematic": "1.7.0",
-    "@cypress/schematic": "2.5.1",
+    "@ionic/angular-toolkit": "10.0.0",
-    "@ionic/angular-toolkit": "11.0.1",
+    "@ionic/cli": "7.1.1",
-    "@ionic/cli": "7.2.0",
     "@openstapps/prettier-config": "workspace:*",
     "@openstapps/tsconfig": "workspace:*",
-    "@types/fontkit": "2.0.7",
+    "@types/fontkit": "1.8.0",
     "@types/geojson": "1.0.6",
-    "@types/glob": "8.1.0",
+    "@types/glob": "8.0.1",
-    "@types/jasmine": "5.1.4",
+    "@types/jasmine": "4.3.1",
-    "@types/jasminewd2": "2.0.13",
+    "@types/jasminewd2": "2.0.10",
     "@types/jsonpath": "0.2.0",
-    "@types/karma": "6.3.8",
+    "@types/karma": "6.3.4",
-    "@types/karma-coverage": "2.0.3",
+    "@types/karma-coverage": "2.0.1",
-    "@types/karma-jasmine": "4.0.5",
+    "@types/karma-jasmine": "4.0.2",
-    "@types/leaflet": "1.9.8",
+    "@types/leaflet": "1.9.0",
-    "@types/leaflet.markercluster": "1.5.4",
+    "@types/leaflet.markercluster": "1.5.1",
     "@types/node": "18.15.3",
-    "@types/semver": "7.5.8",
+    "@types/semver": "7.5.6",
-    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "7.2.0",
+    "@typescript-eslint/parser": "5.60.1",
     "cordova-res": "0.15.4",
-    "cypress": "13.7.0",
+    "cypress": "13.2.0",
-    "eslint": "8.57.0",
+    "eslint": "8.43.0",
-    "eslint-plugin-jsdoc": "48.2.1",
+    "eslint-plugin-jsdoc": "46.4.2",
-    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-unicorn": "51.0.1",
+    "eslint-plugin-unicorn": "47.0.0",
     "fast-deep-equal": "3.1.3",
     "fontkit": "2.0.2",
-    "glob": "10.3.10",
+    "glob": "10.2.7",
     "http-server": "14.1.1",
     "is-docker": "2.2.1",
-    "jasmine-core": "5.1.2",
+    "jasmine-core": "5.0.1",
     "jasmine-spec-reporter": "7.0.0",
     "jetifier": "2.0.0",
-    "junit-report-merger": "6.0.3",
+    "junit-report-merger": "6.0.2",
-    "karma": "6.4.3",
+    "karma": "6.4.2",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-junit-reporter": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "stylelint": "16.2.1",
+    "stylelint": "15.10.1",
-    "stylelint-config-clean-order": "5.4.1",
+    "stylelint-config-clean-order": "5.0.1",
     "stylelint-config-prettier-scss": "1.0.0",
-    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-config-recommended-scss": "12.0.0",
-    "stylelint-config-standard-scss": "13.0.0",
+    "stylelint-config-standard-scss": "10.0.0",
     "surge": "0.23.1",
-    "ts-node": "10.9.2",
+    "ts-node": "10.9.1",
-    "typescript": "5.4.2",
+    "typescript": "5.1.6",
-    "webpack-bundle-analyzer": "4.10.1"
+    "webpack-bundle-analyzer": "4.7.0"
   },
+  "prettier": "@openstapps/prettier-config",
   "cordova": {
     "plugins": {},
     "platforms": [

frontend/app/prettier.config.mjs

@@ -1,4 +1,3 @@
-// @ts-check
 /*
  * Copyright (C) 2022 StApps
  * This program is free software: you can redistribute it and/or modify it
@@ -26,6 +25,7 @@ const config = {
       },
     },
   ],
+  ignorePath: ['.prettierignore', '../../.gitignore'],
 };
 
 export default config;

frontend/app/src/app/animation/fab-expand.ts

@@ -14,7 +14,7 @@
  */
 
 import {AnimationBuilder, AnimationController} from '@ionic/angular';
-import {AnimationOptions} from '@ionic/angular/common/providers/nav-controller';
+import {AnimationOptions} from '@ionic/angular/providers/nav-controller';
 import {iosDuration, iosEasing, mdDuration, mdEasing} from './easings';
 
 /**

frontend/app/src/app/modules/about/about-licenses.html

@@ -1,17 +1,17 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
@@ -24,24 +24,28 @@
 </ion-header>
 <ion-content parallax>
   <div class="licenses-content">
-    @for (license of licenses; track license) {
+    <ion-card
-      <ion-card [href]="license.url || license.repository" rel="external" target="_blank">
+      *ngFor="let license of licenses"
-        <ion-card-header>
+      [href]="license.url || license.repository"
-          <ion-card-title>
+      rel="external"
-            {{ license.name }}
+      target="_blank"
-            <ion-icon [size]="16" [weight]="300" class="supertext-icon" name="open_in_browser"></ion-icon>
+    >
-          </ion-card-title>
+      <ion-card-header>
-          @if (license.authors || license.publisher) {
+        <ion-card-title>
-            <ion-card-subtitle> {{ license.authors || license.publisher }} </ion-card-subtitle>
+          {{ license.name }}
-          }
+          <ion-icon [size]="16" [weight]="300" class="supertext-icon" name="open_in_browser"></ion-icon>
-        </ion-card-header>
+        </ion-card-title>
-        <ion-card-content>
+
-          <ion-chip (click)="$event.preventDefault(); viewLicense(license)">
+        <ion-card-subtitle *ngIf="license.authors || license.publisher">
-            <ion-icon name="copyright"></ion-icon>
+          {{ license.authors || license.publisher }}
-            <ion-label>{{ license.licenses }} License</ion-label>
+        </ion-card-subtitle>
-          </ion-chip>
+      </ion-card-header>
-        </ion-card-content>
+      <ion-card-content>
-      </ion-card>
+        <ion-chip (click)="$event.preventDefault(); viewLicense(license)">
-    }
+          <ion-icon name="copyright"></ion-icon>
+          <ion-label>{{ license.licenses }} License</ion-label>
+        </ion-chip>
+      </ion-card-content>
+    </ion-card>
   </div>
 </ion-content>

frontend/app/src/app/modules/about/about-page/about-page-content.html

@@ -1,56 +1,41 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (content.type === 'markdown') {
+<markdown *ngIf="content.type === 'markdown'" [data]="'value' | translateSimple : content"></markdown>
-  <markdown [data]="'value' | translateSimple: content"></markdown>
+<div *ngIf="content.type ==='section'">
-}
+  <ion-card *ngIf="content.card; else noCard">
-@if (content.type === 'section') {
+    <ion-card-header>
-  <div>
+      <ion-card-title>{{ 'title' | translateSimple : content }}</ion-card-title>
-    @if (content.card) {
+    </ion-card-header>
-      <ion-card>
+    <ion-card-content>
-        <ion-card-header>
-          <ion-card-title>{{ 'title' | translateSimple: content }}</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <about-page-content [content]="content.content"></about-page-content>
-        </ion-card-content>
-      </ion-card>
-    } @else {
-      <h2>{{ 'title' | translateSimple: content }}</h2>
       <about-page-content [content]="content.content"></about-page-content>
-    }
+    </ion-card-content>
-  </div>
+  </ion-card>
-}
+  <ng-template #noCard>
-@if (content.type === 'table') {
+    <h2>{{ 'title' | translateSimple : content }}</h2>
-  <ion-grid>
+    <about-page-content [content]="content.content"></about-page-content>
-    @for (row of content.rows; track row) {
+  </ng-template>
-      <ion-row>
+</div>
-        @for (col of row; track col) {
+<ion-grid *ngIf="content.type === 'table'">
-          <ion-col>
+  <ion-row *ngFor="let row of content.rows">
-            <about-page-content [content]="col"></about-page-content>
+    <ion-col *ngFor="let col of row">
-          </ion-col>
+      <about-page-content [content]="col"></about-page-content>
-        }
+    </ion-col>
-      </ion-row>
+  </ion-row>
-    }
+</ion-grid>
-  </ion-grid>
+<ion-item *ngIf="content.type === 'router link'" [routerLink]="content.link">
-}
+  <ion-icon *ngIf="content.icon" [name]="content.icon" slot="start"></ion-icon>
-@if (content.type === 'router link') {
+  <ion-label>{{ 'title' | translateSimple : content }}</ion-label>
-  <ion-item [routerLink]="content.link">
+</ion-item>
-    @if (content.icon) {
-      <ion-icon [name]="content.icon" slot="start"></ion-icon>
-    }
-    <ion-label>{{ 'title' | translateSimple: content }}</ion-label>
-  </ion-item>
-}

frontend/app/src/app/modules/about/about-page/about-page.html

@@ -1,37 +1,32 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
     </ion-buttons>
-    @if (content) {
+    <ion-title *ngIf="content; else titleLoading">{{ 'title' | translateSimple : content }}</ion-title>
-      <ion-title>{{ 'title' | translateSimple: content }}</ion-title>
+    <ng-template #titleLoading>
-    } @else {
       <ion-title><ion-skeleton-text animated="true"></ion-skeleton-text></ion-title>
-    }
+    </ng-template>
   </ion-toolbar>
 </ion-header>
-@if (content) {
+<ion-content parallax *ngIf="content">
-  <ion-content parallax>
+  <ion-text>{{ 'about.VERSION_INFO' | translate: {name, version, stappsVersion} }}</ion-text>
-    <ion-text>{{ 'about.VERSION_INFO' | translate: {name, version, stappsVersion} }}</ion-text>
+  <div class="page-content">
-    <div class="page-content">
+    <about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
-      @for (element of content.content; track element) {
+  </div>
-        <about-page-content [content]="element"></about-page-content>
+</ion-content>
-      }
-    </div>
-  </ion-content>
-}

frontend/app/src/app/modules/about/release-notes.component.ts

@@ -5,6 +5,7 @@ import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {IonicModule, ModalController} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {UtilModule} from '../../util/util.module';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'stapps-release-notes',
@@ -12,7 +13,7 @@ import {UtilModule} from '../../util/util.module';
   styleUrls: ['release-notes.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [UtilModule, MarkdownModule, ThingTranslateModule, IonicModule, TranslateModule],
+  imports: [UtilModule, MarkdownModule, ThingTranslateModule, IonicModule, TranslateModule, CommonModule],
 })
 export class ReleaseNotesComponent {
   @Input() versionInfos: SCAppVersionInfo[];

frontend/app/src/app/modules/about/release-notes.html

@@ -1,20 +1,18 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title
+    <ion-title><span class="ion-text-wrap">{{'releaseNotes.TITLE_UPDATED' | translate}}</span></ion-title>
-      ><span class="ion-text-wrap">{{ 'releaseNotes.TITLE_UPDATED' | translate }}</span></ion-title
-    >
     <ion-buttons slot="end">
-      <ion-button [strong]="true" (click)="modalController.dismiss()">{{
+      <ion-button [strong]="true" (click)="modalController.dismiss()"
-        'modal.DISMISS_NEUTRAL' | translate
+        >{{'modal.DISMISS_NEUTRAL' | translate}}</ion-button
-      }}</ion-button>
+      >
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 <ion-content parallax>
-  @for (versionInfo of versionInfos; track versionInfo) {
+  <ng-container *ngFor="let versionInfo of versionInfos">
     <markdown
       class="content-card ion-padding"
       [data]="'releaseNotes' | translateSimple: versionInfo"
     ></markdown>
-  }
+  </ng-container>
 </ion-content>

frontend/app/src/app/modules/assessments/page/assessments-page.html

@@ -36,7 +36,7 @@
           class="ion-text-wrap"
           *ngIf="assessments[key].courseOfStudy | async as course; else defaultLabel"
         >
-          {{ 'name' | thingTranslate: course }} ({{ 'academicDegree' | thingTranslate: course }})
+          {{ 'name' | thingTranslate : course }} ({{ 'academicDegree' | thingTranslate : course }})
         </ion-label>
       </div>
       <ng-template #defaultLabel>

frontend/app/src/app/modules/assessments/types/assessment/assessment-base-info.html

@@ -14,12 +14,8 @@
   -->
 
 <ion-label [color]="passed ? undefined : 'danger'"
-  >{{
+  >{{ (_item.grade | isNumeric) ? (_item.grade | numberLocalized :
-    (_item.grade | isNumeric)
+  'minimumFractionDigits:1,maximumFractionDigits:1') : '' }} {{ 'status' | thingTranslate : _item | titlecase
-      ? (_item.grade | numberLocalized: 'minimumFractionDigits:1,maximumFractionDigits:1')
+  }}, {{ 'attempt' | propertyNameTranslate : _item }} {{ _item.attempt }}
-      : ''
-  }}
-  {{ 'status' | thingTranslate: _item | titlecase }}, {{ 'attempt' | propertyNameTranslate: _item }}
-  {{ _item.attempt }}
 </ion-label>
-<ion-note> {{ _item.ects }} {{ 'ects' | propertyNameTranslate: _item }}</ion-note>
+<ion-note> {{ _item.ects }} {{ 'ects' | propertyNameTranslate : _item }}</ion-note>

frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.html

@@ -1,28 +1,24 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~  This program is free software: you can redistribute it and/or modify it
+  ~  This program is free software: you can redistribute it and/or modify it
-~  under the terms of the GNU General Public License as published by the Free
+  ~  under the terms of the GNU General Public License as published by the Free
-~  Software Foundation, version 3.
+  ~  Software Foundation, version 3.
-~
+  ~
-~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~  This program is distributed in the hope that it will be useful, but WITHOUT
-~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~  more details.
+  ~  more details.
-~
+  ~
-~  You should have received a copy of the GNU General Public License along with
+  ~  You should have received a copy of the GNU General Public License along with
-~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~  this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-card>
   <ion-card-content>
-    @if (item.courseOfStudy; as courseOfStudy) {
+    <ion-note *ngIf="item.courseOfStudy as courseOfStudy">
-      <ion-note>
+      {{ $any('courseOfStudy' | propertyNameTranslate : item) | titlecase }}: {{ 'name' | thingTranslate :
-        {{ $any('courseOfStudy' | propertyNameTranslate: item) | titlecase }}:
+      $any(courseOfStudy) }} ({{ 'academicDegree' | thingTranslate : $any(courseOfStudy) }})
-        {{ 'name' | thingTranslate: $any(courseOfStudy) }} ({{
+    </ion-note>
-          'academicDegree' | thingTranslate: $any(courseOfStudy)
-        }})
-      </ion-note>
-    }
   </ion-card-content>
 </ion-card>
 <ion-list class="container">

frontend/app/src/app/modules/assessments/types/assessment/assessment-list-item.html

@@ -14,6 +14,6 @@
   -->
 
 <div class="container">
-  <h2 class="name">{{ 'name' | thingTranslate: item }} {{ item.date ? (item.date | amDateFormat) : '' }}</h2>
+  <h2 class="name">{{ 'name' | thingTranslate : item }} {{ item.date ? (item.date | amDateFormat) : '' }}</h2>
   <assessment-base-info [item]="item"></assessment-base-info>
 </div>

frontend/app/src/app/modules/calendar/add-event-review-modal.html

@@ -1,17 +1,17 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 <div>
   <ion-card-header>
     <ion-card-title>{{ 'schedule.toCalendar.reviewModal.TITLE' | translate }}</ion-card-title>
@@ -22,46 +22,34 @@
 
   <ion-card-content>
     <ion-list lines="none">
-      @for (event of iCalEvents; track event) {
+      <ion-item-group *ngFor="let event of iCalEvents">
-        <ion-item-group>
+        <ion-item-divider>
-          <ion-item-divider>
+          <ion-label>{{ event.title }}</ion-label>
-            <ion-label>{{ event.title }}</ion-label>
+          <ion-note slot="start" *ngIf="event.events.length > 1">
-            @if (event.events.length > 1) {
+            <ion-icon name="insert_page_break"></ion-icon>
-              <ion-note slot="start">
+          </ion-note>
-                <ion-icon name="insert_page_break"></ion-icon>
+        </ion-item-divider>
-              </ion-note>
+        <ion-item *ngFor="let iCalEvent of event.events">
-            }
+          <ion-label>
-          </ion-item-divider>
+            <s *ngIf="iCalEvent.cancelled; else date"
-          @for (iCalEvent of event.events; track iCalEvent) {
+              ><ng-container [ngTemplateOutlet]="date"></ng-container>
-            <ion-item>
+            </s>
-              <ion-label>
+            <ng-template #date> {{ moment(iCalEvent.start) | amDateFormat : 'll, HH:mm' }} </ng-template>
-                @if (iCalEvent.cancelled) {
+          </ion-label>
-                  <s><ng-container [ngTemplateOutlet]="date"></ng-container> </s>
+          <ion-note *ngIf="iCalEvent.rrule">
-                } @else {
+            {{ iCalEvent.rrule.interval }} {{ iCalEvent.rrule.freq | sentencecase }}
-                  {{ moment(iCalEvent.start) | amDateFormat: 'll, HH:mm' }}
+          </ion-note>
-                }
+          <ion-icon *ngIf="iCalEvent.rrule" name="event_repeat"></ion-icon>
-                <ng-template #date> {{ moment(iCalEvent.start) | amDateFormat: 'll, HH:mm' }} </ng-template>
+        </ion-item>
-              </ion-label>
+      </ion-item-group>
-              @if (iCalEvent.rrule) {
-                <ion-note>
-                  {{ iCalEvent.rrule.interval }} {{ iCalEvent.rrule.freq | sentencecase }}
-                </ion-note>
-              }
-              @if (iCalEvent.rrule) {
-                <ion-icon name="event_repeat"></ion-icon>
-              }
-            </ion-item>
-          }
-        </ion-item-group>
-      }
     </ion-list>
   </ion-card-content>
 
   <div class="horizontal-flex">
     <ion-item lines="none">
-      <ion-checkbox [(ngModel)]="includeCancelled">{{
+      <ion-checkbox [(ngModel)]="includeCancelled"
-        'schedule.toCalendar.reviewModal.INCLUDE_CANCELLED' | translate
+        >{{ 'schedule.toCalendar.reviewModal.INCLUDE_CANCELLED' | translate }}</ion-checkbox
-      }}</ion-checkbox>
+      >
     </ion-item>
   </div>
   <div class="horizontal-flex">
@@ -69,16 +57,15 @@
       {{ 'share' | translate }}
       <ion-icon slot="end" md="share" ios="ios_share"></ion-icon>
     </ion-button>
-    @if (isWeb) {
+    <ion-button fill="outline" (click)="download()" *ngIf="isWeb; else exportButton">
-      <ion-button fill="outline" (click)="download()">
+      {{ 'schedule.toCalendar.reviewModal.DOWNLOAD' | translate }}
-        {{ 'schedule.toCalendar.reviewModal.DOWNLOAD' | translate }}
+      <ion-icon slot="end" name="download"></ion-icon>
-        <ion-icon slot="end" name="download"></ion-icon>
+    </ion-button>
-      </ion-button>
+    <ng-template #exportButton>
-    } @else {
       <ion-button fill="outline" (click)="toCalendar()">
         {{ 'schedule.toCalendar.reviewModal.EXPORT' | translate }}
         <ion-icon slot="end" name="event_upcoming"></ion-icon>
       </ion-button>
-    }
+    </ng-template>
   </div>
 </div>

frontend/app/src/app/modules/catalog/catalog.component.html

@@ -1,17 +1,17 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
@@ -23,45 +23,33 @@
   </ion-toolbar>
   <ion-toolbar color="primary" mode="md">
     <ion-segment (ionChange)="segmentChanged($event)" [value]="selectedSemesterUID" mode="md">
-      @for (semester of availableSemesters; track semester) {
+      <ion-segment-button *ngFor="let semester of availableSemesters" [value]="semester.uid">
-        <ion-segment-button [value]="semester.uid">
+        <ion-label>{{ semester.acronym }}</ion-label>
-          <ion-label>{{ semester.acronym }}</ion-label>
+      </ion-segment-button>
-        </ion-segment-button>
-      }
     </ion-segment>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  @if (catalogs && catalogs.length > 0) {
+  <ion-list *ngIf="catalogs && catalogs.length > 0">
-    <ion-list>
+    <ion-item *ngFor="let catalog of catalogs" button="true" lines="inset" (click)="notifySelect(catalog)">
-      @for (catalog of catalogs; track catalog) {
+      <ion-label>
-        <ion-item button="true" lines="inset" (click)="notifySelect(catalog)">
+        <h2>{{ catalog.name }}</h2>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+  <ion-list *ngIf="!catalogs">
+    <stapps-skeleton-list-item *ngFor="let skeleton of [].constructor(10)"> </stapps-skeleton-list-item>
+  </ion-list>
+  <ion-grid *ngIf="catalogs && catalogs.length === 0">
+    <ion-row>
+      <ion-col>
+        <div class="ion-text-center margin-top">
           <ion-label>
-            <h2>{{ catalog.name }}</h2>
+            {{ 'catalog.detail.EMPTY_SEMESTER' | translate }}
           </ion-label>
-        </ion-item>
+        </div>
-      }
+      </ion-col>
-    </ion-list>
+    </ion-row>
-  }
+  </ion-grid>
-  @if (!catalogs) {
-    <ion-list>
-      @for (skeleton of [].constructor(10); track skeleton) {
-        <stapps-skeleton-list-item> </stapps-skeleton-list-item>
-      }
-    </ion-list>
-  }
-  @if (catalogs && catalogs.length === 0) {
-    <ion-grid>
-      <ion-row>
-        <ion-col>
-          <div class="ion-text-center margin-top">
-            <ion-label>
-              {{ 'catalog.detail.EMPTY_SEMESTER' | translate }}
-            </ion-label>
-          </div>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  }
 </ion-content>

frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.html

@@ -1,34 +1,32 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <stapps-section [title]="'dashboard.favorites.title' | translate">
   <ion-button slot="button-end" fill="clear" color="medium" [routerLink]="['/favorites']">
     <ion-icon slot="icon-only" name="search" [size]="24"></ion-icon>
   </ion-button>
-  @if (items | async; as items) {
+  <simple-swiper *ngIf="items | async as items; else noItems" @fade>
-    <simple-swiper @fade>
+    <stapps-data-list-item
-      @for (item of items; track item) {
+      *ngFor="let item of items"
-        <stapps-data-list-item
+      [hideThumbnail]="true"
-          [hideThumbnail]="true"
+      [listItemEndInteraction]="false"
-          [listItemEndInteraction]="false"
+      [item]="item"
-          [item]="item"
+      appearance="square"
-          appearance="square"
+    ></stapps-data-list-item>
-        ></stapps-data-list-item>
+  </simple-swiper>
-      }
+  <ng-template #noItems>
-    </simple-swiper>
-  } @else {
     <ion-item class="nothing-selected" lines="none">
       <ion-label class="ion-text-wrap">
         {{ 'dashboard.favorites.no_favorite_prefix' | translate }}
@@ -36,5 +34,5 @@
         {{ 'dashboard.favorites.no_favorite_suffix' | translate }}
       </ion-label>
     </ion-item>
-  }
+  </ng-template>
 </stapps-section>

frontend/app/src/app/modules/dashboard/sections/jobs-section/job-section.component.html

@@ -1,44 +1,43 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <stapps-section [title]="'dashboard.jobs.title' | translate">
   <ion-button slot="button-end" fill="clear" color="medium" [routerLink]="['/jobs']">
     <ion-icon slot="icon-only" name="search" [size]="24"></ion-icon>
   </ion-button>
-  @if (jobs | async; as jobs) {
+  <simple-swiper *ngIf="jobs | async as jobs; else noItems" @fade>
-    <simple-swiper @fade>
+    <stapps-data-list-item
-      @for (item of jobs; track item) {
+      *ngFor="let item of jobs"
-        <stapps-data-list-item
+      [hideThumbnail]="true"
-          [hideThumbnail]="true"
+      [item]="item"
-          [item]="item"
+      appearance="square"
-          appearance="square"
+    ></stapps-data-list-item>
-        ></stapps-data-list-item>
+    <ion-item [routerLink]="['/jobs']" class="more-jobs" lines="none">
-      }
+      <ion-label>{{ 'dashboard.jobs.title' | translate | titlecase }}</ion-label>
-      <ion-item [routerLink]="['/jobs']" class="more-jobs" lines="none">
+      <ion-icon color="medium" name="read_more" [size]="40"></ion-icon>
-        <ion-label>{{ 'dashboard.jobs.title' | translate | titlecase }}</ion-label>
+    </ion-item>
-        <ion-icon color="medium" name="read_more" [size]="40"></ion-icon>
+  </simple-swiper>
-      </ion-item>
+  <ng-template #noItems>
-    </simple-swiper>
-  } @else {
     <ion-item class="nothing-selected" lines="none">
       <ion-label class="ion-text-wrap">
         {{ 'dashboard.jobs.noJobs' | translate }}
       </ion-label>
     </ion-item>
+
     <ion-button slot="button-end" fill="clear" color="medium" [routerLink]="['/jobs']">
       <ion-icon slot="icon-only" name="search" [size]="24"></ion-icon>
     </ion-button>
-  }
+  </ng-template>
 </stapps-section>

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.html

@@ -1,37 +1,33 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (dishes | async; as dishes) {
+<ng-container *ngIf="dishes | async as dishes; else loading">
-  @if (dishes.length > 0) {
+  <simple-swiper *ngIf="dishes.length > 0" @fade>
-    <simple-swiper @fade>
+    <stapps-data-list-item
-      @for (dish of dishes; track dish) {
+      *ngFor="let dish of dishes"
-        <stapps-data-list-item
+      [hideThumbnail]="true"
-          [hideThumbnail]="true"
+      [item]="dish"
-          [item]="dish"
+      appearance="square"
-          appearance="square"
+    ></stapps-data-list-item>
-        ></stapps-data-list-item>
+  </simple-swiper>
-      }
+  <ion-item class="no-dishes" *ngIf="!dishes || dishes.length === 0" lines="none">
-    </simple-swiper>
+    <ion-label>
-  }
+      {{ 'dashboard.canteens.no_dishes_available' | translate }}
-  @if (!dishes || dishes.length === 0) {
+    </ion-label>
-    <ion-item class="no-dishes" lines="none">
+  </ion-item>
-      <ion-label>
+</ng-container>
-        {{ 'dashboard.canteens.no_dishes_available' | translate }}
+<ng-template #loading>
-      </ion-label>
-    </ion-item>
-  }
-} @else {
   <div class="placeholder"></div>
-}
+</ng-template>

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.html

@@ -1,21 +1,21 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (items | async; as items) {
+<ng-container *ngIf="items | async as items">
-  @if (items.length !== 0) {
+  <ng-container *ngIf="items.length !== 0; else nothingSelected">
-    @for (item of items; track item) {
+    <ng-container *ngFor="let item of items">
       <stapps-section @fade [item]="item" [title]="'name' | thingTranslate: item">
         <ion-button slot="button-end" fill="clear" color="medium" (click)="favoritesService.delete(item)">
           <ion-icon slot="icon-only" name="delete" [size]="24"></ion-icon>
@@ -23,8 +23,9 @@
         <stapps-opening-hours slot="subtitle" [openingHours]="$any(item).openingHours"></stapps-opening-hours>
         <stapps-mensa-section-content [item]="item"></stapps-mensa-section-content>
       </stapps-section>
-    }
+    </ng-container>
-  } @else {
+  </ng-container>
+  <ng-template #nothingSelected>
     <stapps-section [title]="'dashboard.canteens.title' | translate">
       <ion-item class="nothing-selected" lines="none">
         <ion-label class="ion-text-wrap">
@@ -34,5 +35,5 @@
         </ion-label>
       </ion-item>
     </stapps-section>
-  }
+  </ng-template>
-}
+</ng-container>

frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.html

@@ -1,33 +1,29 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <stapps-section [title]="'dashboard.news.title' | translate">
   <ion-button size="small" slot="button-end" fill="clear" color="medium" [routerLink]="['/news']">
     <ion-icon slot="icon-only" name="read_more"></ion-icon>
   </ion-button>
-  @if (news | async; as news) {
+  <simple-swiper class="news-swiper card-swiper" *ngIf="news | async as news" @fade>
-    <simple-swiper class="news-swiper card-swiper" @fade>
+    <stapps-news-item *ngFor="let newsItem of news" [item]="newsItem"> </stapps-news-item>
-      @for (newsItem of news; track newsItem) {
+    <ion-item [routerLink]="['/news']" class="more-news" lines="none">
-        <stapps-news-item [item]="newsItem"> </stapps-news-item>
+      <ion-label>{{ 'dashboard.news.moreNews' | translate | titlecase }}</ion-label>
-      }
+      <ion-thumbnail class="ion-margin-end">
-      <ion-item [routerLink]="['/news']" class="more-news" lines="none">
+        <ion-icon color="medium" name="read_more" [size]="150"></ion-icon>
-        <ion-label>{{ 'dashboard.news.moreNews' | translate | titlecase }}</ion-label>
+      </ion-thumbnail>
-        <ion-thumbnail class="ion-margin-end">
+    </ion-item>
-          <ion-icon color="medium" name="read_more" [size]="150"></ion-icon>
+  </simple-swiper>
-        </ion-thumbnail>
-      </ion-item>
-    </simple-swiper>
-  }
 </stapps-section>

frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss

@@ -63,10 +63,10 @@ simple-swiper {
   .title {
     overflow: hidden;
     display: -webkit-box;
-    -webkit-box-orient: vertical;
 
     white-space: break-spaces;
 
+    -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
 

frontend/app/src/app/modules/dashboard/sections/search-section/search-route-transition.ts

@@ -14,7 +14,7 @@
  */
 
 import {AnimationController} from '@ionic/angular';
-import {AnimationOptions} from '@ionic/angular/common/providers/nav-controller';
+import {AnimationOptions} from '@ionic/angular/providers/nav-controller';
 
 /**
  *

frontend/app/src/app/modules/data/chips/action-chip-list.html

@@ -1,25 +1,19 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (applicable.locate) {
+<stapps-locate-action-chip *ngIf="applicable.locate" [item]="item"></stapps-locate-action-chip>
-  <stapps-locate-action-chip [item]="item"></stapps-locate-action-chip>
+<stapps-navigate-action-chip *ngIf="applicable.navigate" [item]="$any(item)"></stapps-navigate-action-chip>
-}
-@if (applicable.navigate) {
-  <stapps-navigate-action-chip [item]="$any(item)"></stapps-navigate-action-chip>
-}
 <!-- Add Event Chip needs to load data and should be the last -->
-@if (applicable.event) {
+<stapps-add-event-action-chip *ngIf="applicable.event" [item]="item"></stapps-add-event-action-chip>
-  <stapps-add-event-action-chip [item]="item"></stapps-add-event-action-chip>
-}

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.html

@@ -1,57 +1,57 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <div class="stack-children">
-  @if (associatedDateSeries | async; as associatedDateSeries) {
+  <ion-chip
-    <ion-chip
+    *ngIf="associatedDateSeries | async as associatedDateSeries; else loading"
-      @chipTransition
+    @chipTransition
-      [disabled]="disabled"
+    [disabled]="disabled"
-      (click)="$event.stopPropagation(); editModal.present()"
+    (click)="$event.stopPropagation(); editModal.present()"
-      [color]="color"
+    [color]="color"
-      [outline]="true"
+    [outline]="true"
-    >
+  >
-      <ion-icon [name]="icon" [fill]="iconFill"></ion-icon>
+    <ion-icon [name]="icon" [fill]="iconFill"></ion-icon>
-      <ion-label>{{ label | translate }}</ion-label>
+    <ion-label>{{ label | translate }}</ion-label>
-      <stapps-edit-modal #editModal (save)="selection.save()">
+    <stapps-edit-modal #editModal (save)="selection.save()">
-        <ng-template>
+      <ng-template>
-          <ion-content parallax [parallaxSize]="160" class="ion-padding modal-content">
+        <ion-content parallax [parallaxSize]="160" class="ion-padding modal-content">
-            <stapps-edit-event-selection
+          <stapps-edit-event-selection
-              #selection
+            #selection
-              [items]="associatedDateSeries"
+            [items]="associatedDateSeries"
-              (modified)="editModal.pendingChanges = true"
+            (modified)="editModal.pendingChanges = true"
-            ></stapps-edit-event-selection>
+          ></stapps-edit-event-selection>
-          </ion-content>
+        </ion-content>
-          <ion-footer mode="ios">
+        <ion-footer mode="ios">
-            <ion-toolbar color="light">
+          <ion-toolbar color="light">
-              <ion-button
+            <ion-button
-                slot="end"
+              slot="end"
-                fill="clear"
+              fill="clear"
-                (click)="export()"
+              (click)="export()"
-                [disabled]="!(selection.selection.indeterminate || selection.selection.checked)"
+              [disabled]="!(selection.selection.indeterminate || selection.selection.checked)"
-              >
+            >
-                {{ 'schedule.toCalendar.reviewModal.DOWNLOAD' | translate | titlecase }}
+              {{ 'schedule.toCalendar.reviewModal.DOWNLOAD' | translate | titlecase }}
-                <ion-icon slot="end" name="download"></ion-icon>
+              <ion-icon slot="end" name="download"></ion-icon>
-              </ion-button>
+            </ion-button>
-            </ion-toolbar>
+          </ion-toolbar>
-          </ion-footer>
+        </ion-footer>
-        </ng-template>
+      </ng-template>
-      </stapps-edit-modal>
+    </stapps-edit-modal>
-    </ion-chip>
+  </ion-chip>
-  } @else {
+  <ng-template #loading>
     <ion-chip @chipSkeletonTransition>
       <ion-skeleton-text animated="true"></ion-skeleton-text>
     </ion-chip>
-  }
+  </ng-template>
 </div>

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.scss

@@ -23,7 +23,8 @@
 
 .stack-children {
   display: grid;
-  place-items: start start;
+  align-items: start;
+  justify-items: start;
 }
 
 .stack-children > * {

frontend/app/src/app/modules/data/chips/data/navigate-action-chip.html

@@ -14,5 +14,5 @@
   -->
 <ion-chip [color]="'primary'" [outline]="true" [geoNavigation]="place">
   <ion-icon name="directions"></ion-icon>
-  <ion-label>{{ 'map.directions.TITLE' | translate }}</ion-label>
+  <ion-label>{{'map.directions.TITLE' | translate}}</ion-label>
 </ion-chip>

frontend/app/src/app/modules/data/chips/edit-event-selection.html

@@ -1,17 +1,17 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-item class="list-header" lines="none">
   <ion-checkbox
@@ -22,7 +22,7 @@
     <ion-list-header> {{ 'data.chips.add_events.popover.ALL' | translate }} </ion-list-header>
   </ion-checkbox>
 </ion-item>
-@for (frequency of selection.children; track frequency) {
+<ng-container *ngFor="let frequency of selection.children">
   <ion-list inset="true" lines="full">
     <ion-item lines="none" class="list-header">
       <ion-checkbox
@@ -31,55 +31,48 @@
         (ionChange)="modified.emit(); frequency.click()"
       >
         <ion-list-header>
-          {{
+          {{ frequency.children[0].item.repeatFrequency ? (frequency.children[0].item.repeatFrequency |
-            frequency.children[0].item.repeatFrequency
+          durationLocalized: true | sentencecase) : ('data.chips.add_events.popover.SINGLE' | translate |
-              ? (frequency.children[0].item.repeatFrequency | durationLocalized: true | sentencecase)
+          titlecase) }}
-              : ('data.chips.add_events.popover.SINGLE' | translate | titlecase)
-          }}
         </ion-list-header>
       </ion-checkbox>
     </ion-item>
-    @for (date of frequency.children; track date) {
+    <ion-item *ngFor="let date of frequency.children">
-      <ion-item>
+      <ion-checkbox
-        <ion-checkbox
+        [checked]="date.selected"
-          [checked]="date.selected"
+        (ionChange)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
-          (ionChange)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
+      >
-        >
+        <ng-container *ngIf="date.item.dates.length > 1; else single_event">
-          @if (date.item.dates.length > 1) {
+          <ion-text>
-            <ion-text>
+            {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} - {{ date.item.dates[0] | amAdd:
-              {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} -
+            date.item.duration | amDateFormat: 'LT' }}
-              {{ date.item.dates[0] | amAdd: date.item.duration | amDateFormat: 'LT' }}
+          </ion-text>
-            </ion-text>
+          <br />
+          <ion-text>
+            {{ date.item.dates[0] | amDateFormat: 'LL' }} - {{ date.item.dates[date.item.dates.length - 1] |
+            amDateFormat: 'LL' }}
+          </ion-text>
+        </ng-container>
+        <ng-template #single_event>
+          <ion-text *ngIf="date.item.dates[0] as time; else noDates">
+            {{ time | amDateFormat: 'LL, LT' }} - {{ time | amAdd: date.item.duration | amDateFormat: 'LT' }}
+          </ion-text>
+          <ng-template #noDates>
+            <ion-text color="danger">{{ 'data.chips.add_events.popover.DATA_ERROR' | translate }}</ion-text>
             <br />
-            <ion-text>
+            <ion-text *ngFor="let id of date.item.identifiers | keyvalue">
-              {{ date.item.dates[0] | amDateFormat: 'LL' }} -
+              {{ id.key }}: {{ id.value }}
-              {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'LL' }}
             </ion-text>
-          } @else {
+          </ng-template>
-            @if (date.item.dates[0]; as time) {
+        </ng-template>
-              <ion-text>
+        <ng-container class="ion-align-items-center" *ngIf="date.item.inPlace">
-                {{ time | amDateFormat: 'LL, LT' }} -
+          <br />
-                {{ time | amAdd: date.item.duration | amDateFormat: 'LT' }}
+          <ion-text color="medium" class="place">
-              </ion-text>
+            <ion-icon name="pin_drop"></ion-icon>
-            } @else {
+            <span> {{ 'inPlace.name' | thingTranslate: date.item }}</span>
-              <ion-text color="danger">{{ 'data.chips.add_events.popover.DATA_ERROR' | translate }}</ion-text>
+          </ion-text>
-              <br />
+        </ng-container>
-              @for (id of date.item.identifiers | keyvalue; track id) {
+      </ion-checkbox>
-                <ion-text> {{ id.key }}: {{ id.value }} </ion-text>
+    </ion-item>
-              }
-            }
-          }
-          @if (date.item.inPlace) {
-            <ng-container class="ion-align-items-center">
-              <br />
-              <ion-text color="medium" class="place">
-                <ion-icon name="pin_drop"></ion-icon>
-                <span> {{ 'inPlace.name' | thingTranslate: date.item }}</span>
-              </ion-text>
-            </ng-container>
-          }
-        </ion-checkbox>
-      </ion-item>
-    }
   </ion-list>
-}
+</ng-container>

frontend/app/src/app/modules/data/chips/filter/chip-filter.component.html

@@ -1,23 +1,19 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (displayValue) {
+<ion-chip *ngIf="displayValue" [class.active]="active" (click)="emitToggle(value)">
-  <ion-chip [class.active]="active" (click)="emitToggle(value)">
+  <ion-icon class="ion-color" name="check_circle" [fill]="true" *ngIf="active"></ion-icon>
-    @if (active) {
+  <ion-label>{{ displayValue }}</ion-label>
-      <ion-icon class="ion-color" name="check_circle" [fill]="true"></ion-icon>
+</ion-chip>
-    }
-    <ion-label>{{ displayValue }}</ion-label>
-  </ion-chip>
-}

frontend/app/src/app/modules/data/detail/data-detail-content.html

@@ -1,112 +1,105 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (showModalHeader) {
+<ion-header *ngIf="showModalHeader" translucent>
-  <ion-header translucent>
+  <ion-toolbar color="primary" mode="ios">
-    <ion-toolbar color="primary" mode="ios">
+    <ion-title>{{ 'name' | thingTranslate : item }}</ion-title>
-      <ion-title>{{ 'name' | thingTranslate: item }}</ion-title>
+    <ion-buttons slot="end">
-      <ion-buttons slot="end">
+      <ion-button (click)="modalController.dismiss()">{{ 'app.ui.CLOSE' | translate }}</ion-button>
-        <ion-button (click)="modalController.dismiss()">{{ 'app.ui.CLOSE' | translate }}</ion-button>
+    </ion-buttons>
-      </ion-buttons>
+  </ion-toolbar>
-    </ion-toolbar>
+</ion-header>
-  </ion-header>
+
-}
+<stapps-title-card *ngIf="!showModalHeader" [item]="item"> </stapps-title-card>
-@if (!showModalHeader) {
-  <stapps-title-card [item]="item"> </stapps-title-card>
-}
 <ng-container *ngTemplateOutlet="contentTemplateRef || defaultContent; context: {$implicit: item}">
 </ng-container>
 <stapps-origin-detail [origin]="item.origin"></stapps-origin-detail>
 
 <ng-template #defaultContent>
-  <div class="content-switch">
+  <div [ngSwitch]="item.type" class="content-switch">
-    @switch (item.type) {
+    <stapps-article-detail-content
-      @case ('article') {
+      [item]="$any(item)"
-        <stapps-article-detail-content [item]="$any(item)"></stapps-article-detail-content>
+      *ngSwitchCase="'article'"
-      }
+    ></stapps-article-detail-content>
-      @case ('catalog') {
+    <stapps-catalog-detail-content
-        <stapps-catalog-detail-content [item]="$any(item)"></stapps-catalog-detail-content>
+      [item]="$any(item)"
-      }
+      *ngSwitchCase="'catalog'"
-      @case ('date series') {
+    ></stapps-catalog-detail-content>
-        <stapps-date-series-detail-content [item]="$any(item)"></stapps-date-series-detail-content>
+    <stapps-date-series-detail-content
-      }
+      [item]="$any(item)"
-      @case ('dish') {
+      *ngSwitchCase="'date series'"
-        <stapps-dish-detail-content [item]="$any(item)"></stapps-dish-detail-content>
+    ></stapps-date-series-detail-content>
-      }
+    <stapps-dish-detail-content [item]="$any(item)" *ngSwitchCase="'dish'"></stapps-dish-detail-content>
-      @case ('academic event') {
+    <stapps-event-detail-content
-        <stapps-event-detail-content [item]="$any(item)"></stapps-event-detail-content>
+      [item]="$any(item)"
-      }
+      *ngSwitchCase="'academic event'"
-      @case ('sport course') {
+    ></stapps-event-detail-content>
-        <stapps-event-detail-content [item]="$any(item)"></stapps-event-detail-content>
+    <stapps-event-detail-content
-      }
+      [item]="$any(item)"
-      @case ('favorite') {
+      *ngSwitchCase="'sport course'"
-        <stapps-favorite-detail-content [item]="$any(item)"></stapps-favorite-detail-content>
+    ></stapps-event-detail-content>
-      }
+    <stapps-favorite-detail-content
-      @case ('message') {
+      [item]="$any(item)"
-        <stapps-message-detail-content [item]="$any(item)"></stapps-message-detail-content>
+      *ngSwitchCase="'favorite'"
-      }
+    ></stapps-favorite-detail-content>
-      @case ('job posting') {
+    <stapps-message-detail-content
-        <stapps-job-posting-detail-content [item]="$any(item)"></stapps-job-posting-detail-content>
+      [item]="$any(item)"
-      }
+      *ngSwitchCase="'message'"
-      @case ('person') {
+    ></stapps-message-detail-content>
-        <stapps-person-detail-content [item]="$any(item)"></stapps-person-detail-content>
+    <stapps-job-posting-detail-content
-      }
+      [item]="$any(item)"
-      @case ('building') {
+      *ngSwitchCase="'job posting'"
-        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
+    ></stapps-job-posting-detail-content>
-      }
+    <stapps-person-detail-content [item]="$any(item)" *ngSwitchCase="'person'"></stapps-person-detail-content>
-      @case ('floor') {
+    <stapps-place-detail-content [item]="$any(item)" *ngSwitchCase="'building'"></stapps-place-detail-content>
-        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
+    <stapps-place-detail-content [item]="$any(item)" *ngSwitchCase="'floor'"></stapps-place-detail-content>
-      }
+    <stapps-place-detail-content
-      @case ('point of interest') {
+      [item]="$any(item)"
-        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
+      *ngSwitchCase="'point of interest'"
-      }
+    ></stapps-place-detail-content>
-      @case ('room') {
+    <stapps-place-detail-content
-        <stapps-place-detail-content
+      [item]="$any(item)"
-          [item]="$any(item)"
+      [openAsModal]="openAsModal"
-          [openAsModal]="openAsModal"
+      *ngSwitchCase="'room'"
-        ></stapps-place-detail-content>
+    ></stapps-place-detail-content>
-      }
+    <stapps-semester-detail-content
-      @case ('semester') {
+      [item]="$any(item)"
-        <stapps-semester-detail-content [item]="$any(item)"></stapps-semester-detail-content>
+      *ngSwitchCase="'semester'"
-      }
+    ></stapps-semester-detail-content>
-      @case ('video') {
+    <stapps-video-detail-content [item]="$any(item)" *ngSwitchCase="'video'"></stapps-video-detail-content>
-        <stapps-video-detail-content [item]="$any(item)"></stapps-video-detail-content>
+    <ng-container *ngSwitchDefault>
-      }
+      <ion-item class="ion-text-wrap" lines="inset">
-      @default {
+        <ion-thumbnail slot="start" class="ion-margin-end">
-        <ion-item class="ion-text-wrap" lines="inset">
+          <ion-icon [name]="item.type | dataIcon"></ion-icon>
-          <ion-thumbnail slot="start" class="ion-margin-end">
+        </ion-thumbnail>
-            <ion-icon [name]="item.type | dataIcon"></ion-icon>
+        <ion-grid>
-          </ion-thumbnail>
+          <ion-row>
-          <ion-grid>
+            <ion-col>
-            <ion-row>
+              <div class="ion-text-wrap">
-              <ion-col>
+                <h2 class="name">{{ item.name }}</h2>
-                <div class="ion-text-wrap">
+                <ion-note>{{ item.type }}</ion-note>
-                  <h2 class="name">{{ item.name }}</h2>
+              </div>
-                  <ion-note>{{ item.type }}</ion-note>
+            </ion-col>
-                </div>
+          </ion-row>
-              </ion-col>
+        </ion-grid>
-            </ion-row>
+      </ion-item>
-          </ion-grid>
+      <stapps-simple-card
-        </ion-item>
+        *ngIf="item.description"
-        @if (item.description) {
+        [title]="$any('description' | propertyNameTranslate : item) | titlecase"
-          <stapps-simple-card
+        [content]="'description' | thingTranslate : item"
-            [title]="$any('description' | propertyNameTranslate: item) | titlecase"
+      ></stapps-simple-card>
-            [content]="'description' | thingTranslate: item"
+    </ng-container>
-          ></stapps-simple-card>
-        }
-      }
-    }
   </div>
 </ng-template>

frontend/app/src/app/modules/data/detail/data-detail-content.scss

@@ -41,7 +41,8 @@ stapps-origin-detail {
 
     width: 100%;
     height: fit-content;
-    margin-block: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1) var(--spacing-xl);
+    margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
+    margin-block-end: var(--spacing-xl);
 
     background-color: var(--ion-card-background);
 

frontend/app/src/app/modules/data/detail/data-detail.html

@@ -1,51 +1,40 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (defaultHeader) {
+<ion-header *ngIf="defaultHeader">
-  <ion-header>
+  <ion-toolbar color="primary" mode="ios">
-    <ion-toolbar color="primary" mode="ios">
+    <ion-buttons slot="start" *ngIf="!isModal">
-      @if (!isModal) {
+      <ion-back-button></ion-back-button>
-        <ion-buttons slot="start">
+    </ion-buttons>
-          <ion-back-button></ion-back-button>
+    <ion-title
-        </ion-buttons>
+      *ngIf="item"
-      }
+      [style.opacity]="(collapse ? '1' : '0') + '!important'"
-      @if (item) {
+      [style.translate]="collapse ? '0' : '0 10px'"
-        <ion-title
+      >{{ 'name' | thingTranslate: item }}</ion-title
-          [style.opacity]="(collapse ? '1' : '0') + '!important'"
+    >
-          [style.translate]="collapse ? '0' : '0 10px'"
+    <ion-buttons [slot]="isModal ? 'start' : 'primary'">
-          >{{ 'name' | thingTranslate: item }}</ion-title
+      <stapps-share-button *ngIf="item" [title]="'name' | thingTranslate: item"></stapps-share-button>
-        >
+      <stapps-favorite-button *ngIf="item" [item]="$any(item)"></stapps-favorite-button>
-      }
+    </ion-buttons>
-      <ion-buttons [slot]="isModal ? 'start' : 'primary'">
+    <ion-buttons slot="end" *ngIf="isModal">
-        @if (item) {
+      <ion-button fill="clear" (click)="modalController.dismiss()">
-          <stapps-share-button [title]="'name' | thingTranslate: item"></stapps-share-button>
+        <ion-label>{{ 'modal.DISMISS' | translate }}</ion-label>
-        }
+      </ion-button>
-        @if (item) {
+    </ion-buttons>
-          <stapps-favorite-button [item]="$any(item)"></stapps-favorite-button>
+  </ion-toolbar>
-        }
+</ion-header>
-      </ion-buttons>
-      @if (isModal) {
-        <ion-buttons slot="end">
-          <ion-button fill="clear" (click)="modalController.dismiss()">
-            <ion-label>{{ 'modal.DISMISS' | translate }}</ion-label>
-          </ion-button>
-        </ion-buttons>
-      }
-    </ion-toolbar>
-  </ion-header>
-}
 <ng-content select="[header]"></ng-content>
 <ion-content
   parallax
@@ -53,31 +42,31 @@
   [scrollEvents]="true"
   (ionScroll)="collapse = $any($event).detail.scrollTop > 50"
 >
-  @switch (true) {
+  <ng-container [ngSwitch]="true">
-    @case (!item && (isDisconnected | async)) {
+    <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
       <div class="centered-message-container">
         <ion-icon name="signal_disconnected"></ion-icon>
         <ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
       </div>
-    }
+    </ng-container>
-    @case (item === null) {
+    <ng-container *ngSwitchCase="item === null">
       <div class="centered-message-container">
         <ion-icon name="link_off"></ion-icon>
         <ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
       </div>
-    }
+    </ng-container>
-    @case (!item && item !== null) {
+    <ng-container *ngSwitchCase="!item && item !== null">
       <stapps-skeleton-list-item></stapps-skeleton-list-item>
       <stapps-skeleton-simple-card></stapps-skeleton-simple-card>
-    }
+    </ng-container>
-    @default {
+    <ng-container *ngSwitchDefault>
-      @if (item) {
+      <ng-container *ngIf="item">
         <stapps-data-path [item]="item" [autoRouting]="autoRouteDataPath"></stapps-data-path>
         <stapps-data-detail-content
           [item]="item"
           [contentTemplateRef]="contentTemplateRef"
         ></stapps-data-detail-content>
-      }
+      </ng-container>
-    }
+    </ng-container>
-  }
+  </ng-container>
 </ion-content>

frontend/app/src/app/modules/data/detail/data-path.html

@@ -1,19 +1,19 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (path | async; as stack) {
+<ng-container *ngIf="path | async as stack">
   <ion-breadcrumbs
     color="light"
     [itemsBeforeCollapse]="1"
@@ -21,23 +21,21 @@
     [maxItems]="maxItems"
     (ionCollapsedClick)="maxItems = undefined"
   >
-    @for (fragment of stack; track fragment) {
+    <ion-breadcrumb *ngFor="let fragment of stack">
-      <ion-breadcrumb>
+      <ion-label
-        <ion-label
+        (click)="dataRoutingService.emitPathEvent(fragment)"
-          (click)="dataRoutingService.emitPathEvent(fragment)"
+        [style.max-width]="
-          [style.max-width]="
+          stack.length === 1
-            stack.length === 1
+            ? '100%'
-              ? '100%'
+            : stack.length === 2
-              : stack.length === 2
+            ? '40vw'
-                ? '40vw'
+            : (($width | async) ?? 0) >= 768
-                : (($width | async) ?? 0) >= 768
+            ? '30vw'
-                  ? '30vw'
+            : 'calc(100vw - 120px)'
-                  : 'calc(100vw - 120px)'
+        "
-          "
+        class="crumb-label"
-          class="crumb-label"
+        >{{ 'name' | thingTranslate : $any(fragment) }}</ion-label
-          >{{ 'name' | thingTranslate: $any(fragment) }}</ion-label
+      >
-        >
+    </ion-breadcrumb>
-      </ion-breadcrumb>
-    }
   </ion-breadcrumbs>
-}
+</ng-container>

frontend/app/src/app/modules/data/elements/address-detail.html

@@ -1,17 +1,17 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-card>
   <ion-card-header>{{ 'data.detail.address.TITLE' | translate | titlecase }}</ion-card-header>
@@ -29,22 +29,18 @@
         <ion-col>{{ 'data.detail.address.CITY' | translate | titlecase }}:</ion-col>
         <ion-col width-60 text-right> {{ address.addressLocality }} </ion-col>
       </ion-row>
-      @if (address.addressRegion) {
+      <ion-row *ngIf="address.addressRegion">
-        <ion-row>
+        <ion-col>{{ 'data.detail.address.REGION' | translate | titlecase }}:</ion-col>
-          <ion-col>{{ 'data.detail.address.REGION' | translate | titlecase }}:</ion-col>
+        <ion-col width-60 text-right> {{ address.addressRegion }} </ion-col>
-          <ion-col width-60 text-right> {{ address.addressRegion }} </ion-col>
+      </ion-row>
-        </ion-row>
-      }
       <ion-row>
         <ion-col>{{ 'data.detail.address.COUNTRY' | translate | titlecase }}:</ion-col>
         <ion-col width-60 text-right> {{ address.addressCountry }} </ion-col>
       </ion-row>
-      @if (address.postOfficeBoxNumber) {
+      <ion-row *ngIf="address.postOfficeBoxNumber">
-        <ion-row>
+        <ion-col>{{ 'data.detail.address.POST_OFFICE_BOX' | translate | titlecase }}</ion-col>
-          <ion-col>{{ 'data.detail.address.POST_OFFICE_BOX' | translate | titlecase }}</ion-col>
+        <ion-col width-60 text-right> {{ address.postOfficeBoxNumber }} </ion-col>
-          <ion-col width-60 text-right> {{ address.postOfficeBoxNumber }} </ion-col>
+      </ion-row>
-        </ion-row>
-      }
     </ion-grid>
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/certifications-in-detail.html

@@ -1,22 +1,22 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 <ion-card>
   <ion-card-header>{{ 'data.types.certification.TITLE' | translate }}</ion-card-header>
   <ion-card-content>
     <div class="certification-list">
-      @for (cert of certifications; track cert) {
+      <ng-container *ngFor="let cert of certifications">
         <img
           (click)="popover.present($event)"
           [width]="72"
@@ -31,7 +31,7 @@
             </ion-content>
           </ng-template>
         </ion-popover>
-      }
+      </ng-container>
     </div>
     <ion-note>
       <stapps-external-link

frontend/app/src/app/modules/data/elements/long-inline-text.html

@@ -1,34 +1,28 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
-@if (text !== undefined) {
+<ng-container *ngIf="text !== undefined">
   <span class="ion-hide-sm-up">
-    {{ text | slice: 0 : size }}
+    {{ text | slice : 0 : size }}
-    @if (text.length > size) {
+    <span *ngIf="text.length > size" class="ion-hide-sm-up">…</span>
-      <span class="ion-hide-sm-up">…</span>
-    }
   </span>
   <span class="ion-hide-sm-down ion-hide-md-up">
-    {{ text | slice: 0 : size * 2 }}
+    {{ text | slice : 0 : size * 2 }}
-    @if (text.length > size * 2) {
+    <span *ngIf="text.length > size * 2" class="ion-hide-sm-down ion-hide-md-up"> … </span>
-      <span class="ion-hide-sm-down ion-hide-md-up"> … </span>
-    }
   </span>
   <span class="ion-hide-md-down">
-    {{ text | slice: 0 : size * 3 }}
+    {{ text | slice : 0 : size * 3 }}
-    @if (text.length > size * 3) {
+    <span *ngIf="text.length > size * 3" class="ion-hide-md-down">…</span>
-      <span class="ion-hide-md-down">…</span>
-    }
   </span>
-}
+</ng-container>

frontend/app/src/app/modules/data/elements/offers-detail.html

@@ -1,74 +1,60 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-card>
   <ion-card-header>{{ 'data.detail.offers.TITLE' | translate | titlecase }}</ion-card-header>
   <ion-card-content>
-    @for (offer of offers; track offer) {
+    <div *ngFor="let offer of offers">
-      <div>
+      <ion-grid>
-        <ion-grid>
+        <ion-row>
-          <ion-row>
+          <ion-col *ngIf="offer.inPlace">
-            @if (offer.inPlace) {
+            <ion-icon name="pin_drop"></ion-icon>
-              <ion-col>
+            <a [routerLink]="['/data-detail', offer.inPlace.uid]">
-                <ion-icon name="pin_drop"></ion-icon>
+              {{ 'name' | thingTranslate : offer.inPlace }}
-                <a [routerLink]="['/data-detail', offer.inPlace.uid]">
+            </a>
-                  {{ 'name' | thingTranslate: offer.inPlace }}
+          </ion-col>
-                </a>
+          <ion-col *ngIf="offer.availabilityRange">
-              </ion-col>
+            <span
-            }
+              *ngIf="offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte"
-            @if (offer.availabilityRange) {
+            >
-              <ion-col>
+              {{ (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte) |
-                @if (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte) {
+              amDateFormat : 'll' }}
-                  <span>
+            </span>
-                    {{
+          </ion-col>
-                      (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte)
+        </ion-row>
-                        | amDateFormat: 'll'
+      </ion-grid>
-                    }}
+      <ion-grid *ngIf="offer.prices && offer.availability !== 'out of stock'">
-                  </span>
+        <ion-row *ngFor="let group of $any(offer.prices) | keyvalue">
-                }
+          <ng-container *ngIf="group.key !== 'default'">
-              </ion-col>
+            <ion-col>{{ 'data.detail.offers.' + group.key | translate }} </ion-col>
-            }
+            <ion-col width-20 text-right>
-          </ion-row>
+              <p>{{ $any(group.value) | currency : 'EUR' : 'symbol' : undefined : 'de' }}</p>
-        </ion-grid>
+            </ion-col>
-        @if (offer.prices && offer.availability !== 'out of stock') {
+          </ng-container>
-          <ion-grid>
+        </ion-row>
-            @for (group of $any(offer.prices) | keyvalue; track group) {
+      </ion-grid>
-              <ion-row>
+      <ion-grid *ngIf="offer.availability === 'out of stock'">
-                @if (group.key !== 'default') {
+        <ion-row>
-                  <ion-col>{{ 'data.detail.offers.' + group.key | translate }} </ion-col>
+          <ion-col></ion-col>
-                  <ion-col width-20 text-right>
+          <ion-col width-20 text-right>
-                    <p>{{ $any(group.value) | currency: 'EUR' : 'symbol' : undefined : 'de' }}</p>
+            <ion-text color="danger">
-                  </ion-col>
+              <p>{{ 'data.detail.offers.sold_out' | translate }}</p>
-                }
+            </ion-text>
-              </ion-row>
+          </ion-col>
-            }
+        </ion-row>
-          </ion-grid>
+      </ion-grid>
-        }
+    </div>
-        @if (offer.availability === 'out of stock') {
-          <ion-grid>
-            <ion-row>
-              <ion-col></ion-col>
-              <ion-col width-20 text-right>
-                <ion-text color="danger">
-                  <p>{{ 'data.detail.offers.sold_out' | translate }}</p>
-                </ion-text>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        }
-      </div>
-    }
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/offers-in-list.component.ts

@@ -13,19 +13,20 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input} from '@angular/core';
-import {
+import {SCAcademicPriceGroup, SCThingThatCanBeOfferedOffer} from '@openstapps/core';
-  SCAcademicPriceGroup,
-  SCThingThatCanBeOfferedAvailability,
-  SCThingThatCanBeOfferedOffer,
-} from '@openstapps/core';
 import {SettingsProvider} from '../../settings/settings.provider';
 
+/**
+ * TODO
+ */
 @Component({
   selector: 'stapps-offers-in-list',
   templateUrl: 'offers-in-list.html',
-  styleUrls: ['offers-in-list.scss'],
 })
 export class OffersInListComponent {
+  /**
+   * TODO
+   */
   @Input() set offers(it: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>) {
     this._offers = it;
     this.price = it[0].prices?.default;
@@ -33,14 +34,13 @@ export class OffersInListComponent {
       this.price = it[0].prices?.[(group.value as string).replace(/s$/, '') as never];
     });
 
-    if (it.length === 1) {
+    const availabilities = new Set(it.map(offer => offer.availability));
-      this.availability = it[0].availability;
+    this.soldOut = availabilities.has('out of stock') && availabilities.size === 1;
-    }
   }
 
   price?: number;
 
-  availability: SCThingThatCanBeOfferedAvailability;
+  soldOut: boolean;
 
   _offers: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>;
 

frontend/app/src/app/modules/data/elements/offers-in-list.html

@@ -1,32 +1,28 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (price) {
+<div>
-  <ion-badge
+  <ion-text *ngIf="price && !soldOut" style="white-space: nowrap">
-    [color]="
+    <h2>{{ price | currency : 'EUR' : 'symbol' : undefined : 'de' }}</h2>
-      availability === 'out of stock'
+  </ion-text>
-        ? 'danger'
+  <ion-text *ngIf="soldOut" color="danger" class="sold-out" style="white-space: nowrap">
-        : availability === 'limited availability'
+    <h2>{{ 'data.detail.offers.sold_out' | translate }}</h2>
-          ? 'warning'
+  </ion-text>
-          : 'primary'
+  <p *ngIf="_offers[0].inPlace && !soldOut" class="place" style="white-space: nowrap">
-    "
+    <ion-icon name="pin_drop"></ion-icon>{{ _offers[0].inPlace.name }}<span *ngIf="_offers.length > 1"
-  >
+      >...</span
-    {{
+    >
-      availability === 'out of stock'
+  </p>
-        ? ('data.detail.offers.sold_out' | translate)
+</div>
-        : (price | currency: 'EUR' : 'symbol' : undefined : 'de')
-    }}
-  </ion-badge>
-}

frontend/app/src/app/modules/data/elements/offers-in-list.scss

@@ -1,14 +0,0 @@
-:host {
-  display: contents;
-}
-
-ion-badge {
-  translate: 0 0.25em;
-
-  display: inline-block;
-
-  margin-top: -0.25em;
-  padding: 0.25em;
-
-  font-size: 0.8em;
-}

frontend/app/src/app/modules/data/elements/origin-detail.html

@@ -1,84 +1,65 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (origin.type === 'user') {
+<ion-card *ngIf="origin.type === 'user'">
-  <ion-card>
+  <ion-card-header
-    <ion-card-header
+    >{{ 'data.types.origin.TITLE' | translate | titlecase }}: {{ 'data.types.origin.USER' | translate |
-      >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
+    titlecase }}</ion-card-header
-      {{ 'data.types.origin.USER' | translate | titlecase }}</ion-card-header
+  >
-    >
+  <ion-card-content>
-    <ion-card-content>
+    <p>
-      <p>
+      {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}: {{ origin.created | amDateFormat :
-        {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}:
+      'll' }}
-        {{ origin.created | amDateFormat: 'll' }}
+    </p>
-      </p>
+    <p *ngIf="origin.updated">
-      @if (origin.updated) {
+      {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}: {{ origin.updated | amDateFormat :
-        <p>
+      'll' }}
-          {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}:
+    </p>
-          {{ origin.updated | amDateFormat: 'll' }}
+    <p *ngIf="origin.modified">
-        </p>
+      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
-      }
+      'll' }}
-      @if (origin.modified) {
+    </p>
-        <p>
+    <p *ngIf="origin.maintainer">
-          {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
+      {{ 'data.types.origin.detail.MAINTAINER' | translate }}:
-          {{ origin.modified | amDateFormat: 'll' }}
+      <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
-        </p>
+    </p>
-      }
+  </ion-card-content>
-      @if (origin.maintainer) {
+</ion-card>
-        <p>
+
-          {{ 'data.types.origin.detail.MAINTAINER' | translate }}:
+<ion-card *ngIf="origin.type === 'remote'">
-          <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
+  <ion-card-header
-        </p>
+    >{{ 'data.types.origin.TITLE' | translate | titlecase }}: {{ 'data.types.origin.REMOTE' | translate |
-      }
+    titlecase }}</ion-card-header
-    </ion-card-content>
+  >
-  </ion-card>
+  <ion-card-content>
-}
+    <p>
-@if (origin.type === 'remote') {
+      {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}: {{ origin.indexed | amDateFormat :
-  <ion-card>
+      'll' }}
-    <ion-card-header
+    </p>
-      >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
+    <p *ngIf="origin.modified">
-      {{ 'data.types.origin.REMOTE' | translate | titlecase }}</ion-card-header
+      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
-    >
+      'll' }}
-    <ion-card-content>
+    </p>
-      <p>
+    <p *ngIf="origin.name">{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
-        {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}:
+    <p *ngIf="origin.maintainer">
-        {{ origin.indexed | amDateFormat: 'll' }}
+      {{ 'data.types.origin.detail.MAINTAINER' | translate | titlecase }}:
-      </p>
+      <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
-      @if (origin.modified) {
+    </p>
-        <p>
+    <p *ngIf="origin.responsibleEntity">
-          {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
+      {{ 'data.types.origin.detail.RESPONSIBLE' | translate | titlecase }}:
-          {{ origin.modified | amDateFormat: 'll' }}
+      <a [routerLink]="['/data-detail', origin.responsibleEntity.uid]">{{ origin.responsibleEntity.name }}</a>
-        </p>
+    </p>
-      }
+  </ion-card-content>
-      @if (origin.name) {
+</ion-card>
-        <p>{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
-      }
-      @if (origin.maintainer) {
-        <p>
-          {{ 'data.types.origin.detail.MAINTAINER' | translate | titlecase }}:
-          <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
-        </p>
-      }
-      @if (origin.responsibleEntity) {
-        <p>
-          {{ 'data.types.origin.detail.RESPONSIBLE' | translate | titlecase }}:
-          <a [routerLink]="['/data-detail', origin.responsibleEntity.uid]">{{
-            origin.responsibleEntity.name
-          }}</a>
-        </p>
-      }
-    </ion-card-content>
-  </ion-card>
-}

frontend/app/src/app/modules/data/elements/origin-in-list.html

@@ -1,10 +1,7 @@
-@if (origin.type === 'user') {
+<div *ngIf="origin.type === 'user'">
-  <div>
+  <p>{{ origin.created | dateFormat }}</p>
-    <p>{{ origin.created | dateFormat }}</p>
+</div>
-  </div>
+
-}
+<div *ngIf="origin.type === 'remote'">
-@if (origin.type === 'remote') {
+  <p>{{ origin.indexed | dateFormat }}</p>
-  <div>
+</div>
-    <p>{{ origin.indexed | dateFormat }}</p>
-  </div>
-}

frontend/app/src/app/modules/data/elements/rating.html

@@ -1,39 +1,40 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (canBeRated | async) {
+<ion-button
-  <ion-button
+  *ngIf="canBeRated | async"
-    fill="clear"
+  fill="clear"
-    (click)="$event.stopPropagation(); performRating.next(true)"
+  (click)="$event.stopPropagation(); performRating.next(true)"
-    [disabled]="wasAlreadyRated | async"
+  [disabled]="wasAlreadyRated | async"
-  >
+>
-    <ion-icon slot="icon-only" color="medium" name="thumbs_up_down"></ion-icon>
+  <ion-icon slot="icon-only" color="medium" name="thumbs_up_down"></ion-icon>
-  </ion-button>
+</ion-button>
-}
+
-@if ((performRating | async) && (wasAlreadyRated | async) !== true) {
+<div
-  <div class="rating-stars" [@rating]="(userRating | async) === undefined ? 'abandoned' : 'rated'">
+  class="rating-stars"
-    @for (i of [5, 4, 3, 2, 1]; track i) {
+  *ngIf="(performRating | async) && (wasAlreadyRated | async) !== true"
-      <ion-icon
+  [@rating]="(userRating | async) === undefined ? 'abandoned' : 'rated'"
-        [class.rated-value]="(userRating | async) === i"
+>
-        (click)="$event.stopPropagation(); userRating.next(i)"
+  <ion-icon
-        slot="icon-only"
+    [class.rated-value]="(userRating | async) === i"
-        [size]="32"
+    *ngFor="let i of [5, 4, 3, 2, 1]"
-        color="medium"
+    (click)="$event.stopPropagation(); userRating.next(i)"
-        name="grade"
+    slot="icon-only"
-      ></ion-icon>
+    [size]="32"
-    }
+    color="medium"
-    <label class="thank-you">{{ 'ratings.thank_you' | translate }}</label>
+    name="grade"
-  </div>
+  ></ion-icon>
-}
+  <label class="thank-you">{{ 'ratings.thank_you' | translate }}</label>
+</div>

frontend/app/src/app/modules/data/elements/simple-card.html

@@ -1,39 +1,38 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-card>
   <ion-card-header>{{ title }}</ion-card-header>
   <ion-card-content>
-    @if (isString(content)) {
+    <ng-container *ngIf="isString(content); else list">
-      @if (isMarkdown) {
+      <ng-container *ngIf="isMarkdown; else plainText">
         <markdown [data]="content"></markdown>
-      } @else {
+      </ng-container>
+      <ng-template #plainText>
         <p>{{ content }}</p>
-      }
+      </ng-template>
-    } @else {
+    </ng-container>
-      @if (content && isThing(content[0])) {
+    <ng-template #list>
-        @for (thing of $any(content); track thing) {
+      <ng-container *ngIf="content && isThing(content[0]); else textList">
-          <a [routerLink]="['/data-detail', thing.uid]">
+        <a [routerLink]="['/data-detail', thing.uid]" *ngFor="let thing of $any(content)">
-            <p>{{ 'name' | thingTranslate: thing }}</p>
+          <p>{{ 'name' | thingTranslate : thing }}</p>
-          </a>
+        </a>
-        }
+      </ng-container>
-      } @else {
+      <ng-template #textList>
-        @for (text of $any(content); track text) {
+        <p *ngFor="let text of $any(content)">{{ text }}</p>
-          <p>{{ text }}</p>
+      </ng-template>
-        }
+    </ng-template>
-      }
-    }
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/skeleton-list-item.html

@@ -1,9 +1,7 @@
 <ion-item>
-  @if (!hideThumbnail) {
+  <ion-thumbnail *ngIf="!hideThumbnail" slot="start" class="ion-margin-end">
-    <ion-thumbnail slot="start" class="ion-margin-end">
+    <ion-skeleton-text animated></ion-skeleton-text>
-      <ion-skeleton-text animated></ion-skeleton-text>
+  </ion-thumbnail>
-    </ion-thumbnail>
-  }
   <ion-grid>
     <ion-row>
       <ion-col>

frontend/app/src/app/modules/data/elements/skeleton-simple-card.html

@@ -1,14 +1,14 @@
 <ion-card>
-  @if (title) {
+  <ion-card-header *ngIf="title">
-    <ion-card-header>
+    <ion-skeleton-text animated style="width: 15%"></ion-skeleton-text>
-      <ion-skeleton-text animated style="width: 15%"></ion-skeleton-text>
+  </ion-card-header>
-    </ion-card-header>
-  }
   <ion-card-content>
     <p>
-      @for (line of [].constructor(lines); track line) {
+      <ion-skeleton-text
-        <ion-skeleton-text animated style="width: 85%"></ion-skeleton-text>
+        *ngFor="let line of [].constructor(lines)"
-      }
+        animated
+        style="width: 85%"
+      ></ion-skeleton-text>
     </p>
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/title-card.component.html

@@ -1,50 +1,49 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 <ion-card>
   <ion-card-header>
     <ion-card-title>
       <h1>
-        @if ($any(item).honorificPrefix) {
+        <ng-container *ngIf="$any(item).honorificPrefix">{{
-          {{ 'honorificPrefix' | thingTranslate: item }}
+          'honorificPrefix' | thingTranslate: item
-        }
+        }}</ng-container>
         {{ 'name' | thingTranslate: item }}
-        @if ($any(item).honorificSuffix) {
+        <ng-container *ngIf="$any(item).honorificSuffix">{{
-          {{ 'honorificSuffix' | thingTranslate: item }}
+          'honorificSuffix' | thingTranslate: item
-        }
+        }}</ng-container>
       </h1>
     </ion-card-title>
   </ion-card-header>
   <ion-card-content>
-    @if ($any(item).openingHours; as openingHours) {
+    <div *ngIf="$any(item).openingHours as openingHours" class="opening-hours">
-      <div class="opening-hours">
+      <stapps-opening-hours [openingHours]="openingHours"></stapps-opening-hours>
-        <stapps-opening-hours [openingHours]="openingHours"></stapps-opening-hours>
+    </div>
-      </div>
-    }
     <!-- TODO obviously this is bad style. Tbd where to put the differentiation. Job Postings always have a description, but it's going to be shown in `stapps-job-posting-detail-content` anyways, no need to repeat here. For this view, I would use other fields of the schema.org JobPosting like the `ThingWithCategory.category` -->
-    @if (item.description && item.type !== 'job posting') {
+    <div *ngIf="item.description && item.type !== 'job posting'" class="description">
-      <div class="description">
+      <div class="text-accordion" [style.-webkit-line-clamp]="descriptionLinesToDisplay" #accordionTextArea>
-        <div class="text-accordion" [style.-webkit-line-clamp]="descriptionLinesToDisplay" #accordionTextArea>
+        {{ 'description' | thingTranslate: item }}
-          {{ 'description' | thingTranslate: item }}
-        </div>
       </div>
-    }
+    </div>
     <!-- TODO see above -->
-    @if (item.description && item.type !== 'job posting' && buttonShown) {
+    <ion-button
-      <ion-button expand="full" fill="clear" (click)="toggleDescriptionAccordion()">
+      expand="full"
-        <ion-icon [name]="buttonState" size="large"></ion-icon>
+      fill="clear"
-      </ion-button>
+      *ngIf="item.description && item.type !== 'job posting' && buttonShown"
-    }
+      (click)="toggleDescriptionAccordion()"
+    >
+      <ion-icon [name]="buttonState" size="large"></ion-icon>
+    </ion-button>
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/title-card.component.scss

@@ -16,8 +16,9 @@
 .text-accordion {
   overflow: hidden;
   display: -webkit-box;
-  -webkit-box-orient: vertical;
   text-overflow: ellipsis;
+
+  -webkit-box-orient: vertical;
 }
 
 ion-card {

frontend/app/src/app/modules/data/list/data-list-item-host-default.html

@@ -1,24 +1,22 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-<h2>{{ 'name' | thingTranslate: item }}</h2>
+<h2>{{ 'name' | thingTranslate : item }}</h2>
-@if (item.description) {
+<p *ngIf="item.description">
-  <p>
+  <stapps-long-inline-text
-    <stapps-long-inline-text
+    [text]="'description' | thingTranslate : item"
-      [text]="'description' | thingTranslate: item"
+    [size]="80"
-      [size]="80"
+  ></stapps-long-inline-text>
-    ></stapps-long-inline-text>
+</p>
-  </p>
-}

frontend/app/src/app/modules/data/list/data-list-item.html

@@ -1,17 +1,17 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-item
   class="ion-text-wrap ion-margin"
@@ -20,29 +20,33 @@
   detail="false"
   (click)="notifySelect()"
 >
-  @if (!hideThumbnail) {
+  <div class="item-height-placeholder"></div>
-    <ion-thumbnail slot="start" class="ion-margin-end">
+  <ion-thumbnail slot="start" *ngIf="!hideThumbnail" class="ion-margin-end">
-      <ion-icon color="dark" [name]="item.type | dataIcon" [size]="36"></ion-icon>
+    <ion-icon color="dark" [name]="item.type | dataIcon" [size]="36"></ion-icon>
-    </ion-thumbnail>
+  </ion-thumbnail>
-  }
+  <ng-container *ngIf="contentTemplateRef; else defaultContent">
-  @if (contentTemplateRef) {
+    <ion-label class="ion-text-wrap" [ngSwitch]="true">
-    <ng-container *ngTemplateOutlet="contentTemplateRef; context: {$implicit: item}"></ng-container>
+      <div>
-  } @else {
+        <ng-container *ngTemplateOutlet="contentTemplateRef; context: {$implicit: item}"></ng-container>
+      </div>
+    </ion-label>
+  </ng-container>
+
+  <ng-container *ngIf="listItemEndInteraction" [ngSwitch]="item.type">
+    <stapps-rating *ngSwitchCase="'dish'" [item]="$any(item)"></stapps-rating>
+    <stapps-favorite-button *ngSwitchDefault [item]="$any(item)"></stapps-favorite-button>
+  </ng-container>
+</ion-item>
+
+<ng-template #defaultContent>
+  <ion-label class="ion-text-wrap">
     <div>
       <ng-template [dataListItemHost]="item"></ng-template>
-      @if (listItemChipInteraction && appearance !== 'square') {
+      <stapps-action-chip-list
-        <stapps-action-chip-list [item]="item"></stapps-action-chip-list>
+        *ngIf="listItemChipInteraction && appearance !== 'square'"
-      }
+        slot="end"
+        [item]="item"
+      ></stapps-action-chip-list>
     </div>
-  }
+  </ion-label>
-  @if (listItemEndInteraction) {
+</ng-template>
-    @switch (item.type) {
-      @case ('dish') {
-        <stapps-rating slot="end" [item]="$any(item)"></stapps-rating>
-      }
-      @default {
-        <stapps-favorite-button slot="end" [item]="$any(item)"></stapps-favorite-button>
-      }
-    }
-  }
-</ion-item>

frontend/app/src/app/modules/data/list/data-list-item.scss

@@ -20,72 +20,46 @@
 
 ion-item::part(native) {
   height: 100%;
-  padding: var(--spacing-sm);
 }
 
 ion-item {
   --border-color: transparent;
   --inner-padding-end: 0;
+  --padding-start: 0;
   @include border-radius-in-parallax(var(--border-radius-default));
 
   overflow: hidden;
-  height: 100%;
   margin: var(--spacing-sm);
 
   ion-thumbnail {
     --ion-margin: var(--spacing-xs);
 
-    margin-block: auto;
+    margin-inline-start: var(--spacing-md);
-    margin-inline: var(--spacing-md);
     padding: 0;
   }
+
+  ion-label {
+    width: 100%;
+    margin-right: 0;
+    padding-left: var(--spacing-sm);
+
+    div {
+      display: flex;
+      flex-direction: column;
+    }
+  }
 }
 
 .ion-text-wrap ::ng-deep ion-label {
   display: -webkit-box;
-  -webkit-box-orient: vertical;
   white-space: normal !important;
 
+  -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
 
-[slot='end'] {
-  margin-block: auto;
-  margin-inline-start: 0;
-}
-
-stapps-action-chip-list {
-  float: bottom;
-}
-
-ion-item ::ng-deep {
-  stapps-long-inline-text,
-  .title {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-
-    white-space: break-spaces;
-
-    -webkit-line-clamp: 2;
-  }
-
-  .title-sub {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-
-    margin-block: var(--spacing-xs);
-
-    white-space: break-spaces;
-
-    -webkit-line-clamp: 1;
-  }
-}
-
 :host.square ::ng-deep {
   ion-item {
-    align-items: flex-start;
     margin: 0;
   }
 
@@ -100,12 +74,19 @@ ion-item ::ng-deep {
     flex-grow: 0;
   }
 
+  stapps-long-inline-text,
   .title {
-    height: 2.5em;
+    overflow: hidden;
+    display: -webkit-box;
+
+    white-space: break-spaces;
+
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
   }
 
-  .title ~ :last-child {
+  .title-sub {
-    margin-right: 42px;
+    display: none;
   }
 
   stapps-rating,

frontend/app/src/app/modules/data/list/data-list.html

@@ -1,31 +1,31 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (itemStream | async; as items) {
+<ng-container *ngIf="itemStream | async as items">
   <ng-content select="[header]"></ng-content>
   <ion-list [style.display]="items && items.length ? 'block' : 'none'">
-    @for (item of items; track item) {
+    <ng-container *ngFor="let item of items">
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>
-    }
+    </ng-container>
     <ion-infinite-scroll (ionInfinite)="notifyLoadMore()">
       <ion-infinite-scroll-content></ion-infinite-scroll-content>
     </ion-infinite-scroll>
   </ion-list>
-}
+</ng-container>
 <div [style.display]="!loading && items && items.length === 0 ? 'block' : 'none'">
   <ion-label class="centered-message-container">
     {{ 'search.nothing_found' | translate | titlecase }}

frontend/app/src/app/modules/data/list/food-data-list.component.ts

@@ -12,94 +12,109 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
-import {PositionService} from '../../map/position.service';
+import {MapPosition} from '../../map/position.service';
+import {SearchPageComponent} from './search-page.component';
 import {Geolocation} from '@capacitor/geolocation';
-import {BehaviorSubject, catchError} from 'rxjs';
+import {BehaviorSubject} from 'rxjs';
 import {pauseWhen} from '../../../util/rxjs/pause-when';
-import {SCSearchFilter} from '@openstapps/core';
-import {ContextMenuService} from '../../menu/context/context-menu.service';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**
  * Presents a list of places for eating/drinking
  */
 @Component({
-  templateUrl: 'food-data-list.html',
+  templateUrl: 'search-page.html',
+  styleUrls: ['../../data/list/search-page.scss'],
 })
-export class FoodDataListComponent {
+export class FoodDataListComponent extends SearchPageComponent implements OnInit {
+  title = 'canteens.title';
+
+  showNavigation = false;
+
   isNotInView$ = new BehaviorSubject(true);
 
-  forcedFilter: SCSearchFilter = {
+  /**
-    arguments: {
+   * Sets the forced filter to present only places for eating/drinking
-      filters: [
+   */
-        {
+  ngOnInit() {
-          arguments: {
+    this.positionService
-            field: 'categories',
-            value: 'canteen',
-          },
-          type: 'value',
-        },
-        {
-          arguments: {
-            field: 'categories',
-            value: 'student canteen',
-          },
-          type: 'value',
-        },
-        {
-          arguments: {
-            field: 'categories',
-            value: 'cafe',
-          },
-          type: 'value',
-        },
-        {
-          arguments: {
-            field: 'categories',
-            value: 'restaurant',
-          },
-          type: 'value',
-        },
-      ],
-      operation: 'or',
-    },
-    type: 'boolean',
-  };
-
-  constructor(positionService: PositionService, contextMenuService: ContextMenuService) {
-    positionService
       .watchCurrentLocation({enableHighAccuracy: false, maximumAge: 1000})
-      .pipe(
+      .pipe(pauseWhen(this.isNotInView$), takeUntilDestroyed(this.destroy$))
-        pauseWhen(this.isNotInView$),
-        takeUntilDestroyed(),
-        catchError(async _error => {
-          await Geolocation.checkPermissions();
-        }),
-      )
       .subscribe({
-        next(position) {
+        next: (position: MapPosition) => {
-          if (!position) return;
+          this.positionService.position = position;
-          positionService.position = position;
-          contextMenuService.sortQuery.next([
-            {
-              type: 'distance',
-              order: 'asc',
-              arguments: {
-                field: 'geo',
-                position: [position.longitude, position.latitude],
-              },
-            },
-          ]);
         },
-        async error() {
+        error: async _error => {
-          positionService.position = undefined;
+          this.positionService.position = undefined;
           await Geolocation.checkPermissions();
         },
       });
+    this.showDefaultData = true;
+
+    this.sortQuery = [
+      {
+        arguments: {field: 'name'},
+        order: 'asc',
+        type: 'ducet',
+      },
+    ];
+
+    this.forcedFilter = {
+      arguments: {
+        filters: [
+          {
+            arguments: {
+              field: 'categories',
+              value: 'canteen',
+            },
+            type: 'value',
+          },
+          {
+            arguments: {
+              field: 'categories',
+              value: 'student canteen',
+            },
+            type: 'value',
+          },
+          {
+            arguments: {
+              field: 'categories',
+              value: 'cafe',
+            },
+            type: 'value',
+          },
+          {
+            arguments: {
+              field: 'categories',
+              value: 'restaurant',
+            },
+            type: 'value',
+          },
+        ],
+        operation: 'or',
+      },
+      type: 'boolean',
+    };
+
+    if (this.positionService.position) {
+      this.sortQuery = [
+        {
+          type: 'distance',
+          order: 'asc',
+          arguments: {
+            field: 'geo',
+            position: [this.positionService.position.longitude, this.positionService.position.latitude],
+          },
+        },
+      ];
+    }
+
+    super.ngOnInit();
   }
 
-  ionViewWillEnter() {
+  async ionViewWillEnter() {
+    await super.ionViewWillEnter();
     this.isNotInView$.next(false);
   }
 

frontend/app/src/app/modules/data/list/food-data-list.html

@@ -1,7 +0,0 @@
-<stapps-search-page
-  [title]="'canteens.title' | translate"
-  [navigation]="[]"
-  [showDefaultData]="true"
-  [forcedFilter]="forcedFilter"
->
-</stapps-search-page>

frontend/app/src/app/modules/data/list/search-page-switch-animation.ts

@@ -15,7 +15,7 @@
 
 import type {AnimationBuilder} from '@ionic/angular';
 import {AnimationController} from '@ionic/angular';
-import type {AnimationOptions} from '@ionic/angular/common/providers/nav-controller';
+import type {AnimationOptions} from '@ionic/angular/providers/nav-controller';
 
 /**
  *

frontend/app/src/app/modules/data/list/search-page.component.ts

@@ -55,18 +55,17 @@ export class SearchPageComponent implements OnInit {
 
   @Input() backUrl?: string;
 
+  isHebisAvailable = false;
+
   /**
    * Signalizes that the data is being loaded
    */
   loading = false;
 
   /**
-   * Navigation elements between search pages
+   * Display the navigation between default and library search
    */
-  @Input() navigation: Array<{label: string; routerLink?: string[]}> = [
+  @Input() showNavigation = true;
-    {label: 'search.type'},
-    {label: 'hebisSearch.type', routerLink: ['/hebis-search']},
-  ];
 
   /**
    * Show default data (e.g. when there is user interaction)
@@ -83,8 +82,6 @@ export class SearchPageComponent implements OnInit {
    */
   @Input() showTopToolbar = true;
 
-  @Input() showContextMenu = true;
-
   /**
    * Api query filter
    */
@@ -113,7 +110,7 @@ export class SearchPageComponent implements OnInit {
   /**
    * Page size of queries
    */
-  @Input() pageSize = 30;
+  pageSize = 30;
 
   /**
    * Search value from search bar
@@ -346,13 +343,8 @@ export class SearchPageComponent implements OnInit {
         });
     }
     try {
-      // TODO: make this hack more generic
+      const features = this.configProvider.getValue('features') as SCFeatureConfiguration;
-      if (this.navigation[1]?.routerLink?.[0] === '/hebis-search') {
+      this.isHebisAvailable = !!features.plugins?.['hebis-plugin']?.urlPath;
-        const features = this.configProvider.getValue('features') as SCFeatureConfiguration;
-        if (features.plugins?.['hebis-plugin']?.urlPath === undefined) {
-          this.navigation = [];
-        }
-      }
     } catch (error) {
       this.logger.error(error);
     }

frontend/app/src/app/modules/data/list/search-page.html

@@ -1,30 +1,26 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (showContextMenu) {
+<stapps-context contentId="data-list"></stapps-context>
-  <stapps-context contentId="data-list"></stapps-context>
-}
 <ion-header>
-  @if (showDrawer && showTopToolbar) {
+  <ion-toolbar color="primary" mode="ios" *ngIf="showDrawer && showTopToolbar">
-    <ion-toolbar color="primary" mode="ios">
+    <ion-buttons slot="start">
-      <ion-buttons slot="start">
+      <ion-back-button [defaultHref]="backUrl"></ion-back-button>
-        <ion-back-button [defaultHref]="backUrl"></ion-back-button>
+    </ion-buttons>
-      </ion-buttons>
+    <ion-title>{{ title | translate }}</ion-title>
-      <ion-title>{{ title | translate }}</ion-title>
+  </ion-toolbar>
-    </ion-toolbar>
-  }
   <ion-toolbar color="primary">
     <ion-searchbar
       (ngModelChange)="searchStringChanged($event)"
@@ -39,33 +35,24 @@
       class="filterable"
       [autofocus]="!showDefaultData"
     >
-      @if (showContextMenu) {
+      <ion-menu-button menu="context" auto-hide="false">
-        <ion-menu-button menu="context" auto-hide="false">
+        <ion-icon name="tune"></ion-icon>
-          <ion-icon name="tune"></ion-icon>
+      </ion-menu-button>
-        </ion-menu-button>
-      }
     </ion-searchbar>
   </ion-toolbar>
-  @if (navigation.length > 0) {
+  <ion-toolbar color="primary" class="category-tab" *ngIf="showNavigation && isHebisAvailable">
-    <ion-toolbar color="primary" class="category-tab">
+    <ion-buttons class="ion-justify-content-between">
-      <ion-buttons class="ion-justify-content-between">
+      <ion-button class="button-active" size="large">{{ 'search.type' | translate }}</ion-button>
-        @for (target of navigation; track target) {
+      <ion-button
-          @if (target.routerLink) {
+        [routerLink]="['/hebis-search']"
-            <ion-button
+        queryParamsHandling="merge"
-              [routerLink]="target.routerLink"
+        [routerAnimation]="routeAnimation"
-              queryParamsHandling="merge"
+        fill="outline"
-              [routerAnimation]="routeAnimation"
+        size="large"
-              fill="outline"
+        >{{ 'hebisSearch.type' | translate }}
-              size="large"
+      </ion-button>
-              >{{ target.label | translate }}
+    </ion-buttons>
-            </ion-button>
+  </ion-toolbar>
-          } @else {
-            <ion-button class="button-active" size="large">{{ target.label | translate }}</ion-button>
-          }
-        }
-      </ion-buttons>
-    </ion-toolbar>
-  }
 </ion-header>
 
 <ion-content class="content">

frontend/app/src/app/modules/data/list/search-page.scss

@@ -22,9 +22,6 @@
 
 ion-toolbar {
   --ion-color-base: none !important;
-
-  // account for back button
-  min-height: 42px;
 }
 
 ion-toolbar:first-of-type {

frontend/app/src/app/modules/data/list/simple-data-list.html

@@ -1,44 +1,47 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (items | async; as items) {
+<ng-container *ngIf="items | async as items; else loading">
   <ion-list>
-    @if (!listHeader) {
+    <ng-container *ngIf="!listHeader; else header"></ng-container>
-    } @else {
+    <ng-container *ngFor="let item of items">
-      <ion-list-header lines="inset">
-        <ion-text color="dark">
-          <h3>{{ listHeader }}</h3>
-        </ion-text>
-      </ion-list-header>
-    }
-    @for (item of items; track item) {
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>
-    }
+    </ng-container>
   </ion-list>
-  @if (emptyListMessage && items.length === 0) {
+  <ion-label class="empty-list-message" *ngIf="emptyListMessage && items.length === 0"
-    <ion-label class="empty-list-message">{{ emptyListMessage }}</ion-label>
+    >{{ emptyListMessage }}</ion-label
-  }
+  >
-} @else {
+</ng-container>
+<ng-template #loading>
   <ion-list>
-    @for (skeleton of [].constructor(skeletonItems); track skeleton) {
+    <stapps-skeleton-list-item
-      <stapps-skeleton-list-item [hideThumbnail]="singleType"> </stapps-skeleton-list-item>
+      [hideThumbnail]="singleType"
-    }
+      *ngFor="let skeleton of [].constructor(skeletonItems)"
+    >
+    </stapps-skeleton-list-item>
   </ion-list>
-}
+</ng-template>
+<ng-template #header>
+  <ion-list-header lines="inset">
+    <ion-text color="dark">
+      <h3>{{ listHeader }}</h3>
+    </ion-text>
+  </ion-list-header>
+</ng-template>
 <ng-template let-item #defaultListItem>
   <stapps-data-list-item [item]="item" [hideThumbnail]="singleType"></stapps-data-list-item>
 </ng-template>

frontend/app/src/app/modules/data/list/tree-list-fragment.html

@@ -1,48 +1,40 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (entries; as entries) {
+<ion-accordion-group *ngIf="entries as entries" [readonly]="true" [value]="entries" [multiple]="true">
-  <ion-accordion-group [readonly]="true" [value]="entries" [multiple]="true">
+  <ion-accordion *ngFor="let entry of entries" [value]="entry">
-    @for (entry of entries; track entry) {
+    <div *ngIf="groupMap[entry[0]] as header" slot="header" class="tree-indicator">
-      <ion-accordion [value]="entry">
+      <ng-container
-        @if (groupMap[entry[0]]; as header) {
+        *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: header}"
-          <div slot="header" class="tree-indicator">
+      ></ng-container>
-            <ng-container
+    </div>
-              *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: header}"
+    <ion-list slot="content" lines="none">
-            ></ng-container>
+      <div *ngFor="let item of entry[1]._ || []" class="tree-indicator">
-          </div>
+        <ng-container
-        }
+          *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
-        <ion-list slot="content" lines="none">
+        ></ng-container>
-          @for (item of entry[1]._ || []; track item) {
+      </div>
-            <div class="tree-indicator">
+      <tree-list-fragment
-              <ng-container
+        [groupMap]="groupMap"
-                *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
+        [items]="entry[1]"
-              ></ng-container>
+        [singleType]="singleType"
-            </div>
+        [listItemTemplateRef]="listItemTemplateRef"
-          }
+      ></tree-list-fragment>
-          <tree-list-fragment
+    </ion-list>
-            [groupMap]="groupMap"
+  </ion-accordion>
-            [items]="entry[1]"
+</ion-accordion-group>
-            [singleType]="singleType"
-            [listItemTemplateRef]="listItemTemplateRef"
-          ></tree-list-fragment>
-        </ion-list>
-      </ion-accordion>
-    }
-  </ion-accordion-group>
-}
 
 <ng-template let-item #defaultListItem>
   <stapps-data-list-item [item]="item" [hideThumbnail]="singleType"></stapps-data-list-item>

frontend/app/src/app/modules/data/list/tree-list.html

@@ -1,23 +1,22 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~  This program is free software: you can redistribute it and/or modify it
+  ~  This program is free software: you can redistribute it and/or modify it
-~  under the terms of the GNU General Public License as published by the Free
+  ~  under the terms of the GNU General Public License as published by the Free
-~  Software Foundation, version 3.
+  ~  Software Foundation, version 3.
-~
+  ~
-~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~  This program is distributed in the hope that it will be useful, but WITHOUT
-~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~  more details.
+  ~  more details.
-~
+  ~
-~  You should have received a copy of the GNU General Public License along with
+  ~  You should have received a copy of the GNU General Public License along with
-~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~  this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (_groups | async; as groups) {
+<tree-list-fragment
-  <tree-list-fragment
+  *ngIf="_groups | async as groups"
-    [items]="groups"
+  [items]="groups"
-    [groupMap]="_groupItems!"
+  [groupMap]="_groupItems!"
-    [singleType]="singleType"
+  [singleType]="singleType"
-    [listItemTemplateRef]="listItemTemplateRef"
+  [listItemTemplateRef]="listItemTemplateRef"
-  ></tree-list-fragment>
+></tree-list-fragment>
-}

frontend/app/src/app/modules/data/types/article/article-detail-content.html

@@ -1,105 +1,92 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (item.sameAs) {
+<ion-card *ngIf="item.sameAs">
-  <ion-card>
+  <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
-    <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
+  <ion-card-content>
-    <ion-card-content>
+    <stapps-external-link [text]="'name' | thingTranslate : item" [link]="item.sameAs"></stapps-external-link>
-      <stapps-external-link
+  </ion-card-content>
-        [text]="'name' | thingTranslate: item"
+</ion-card>
-        [link]="item.sameAs"
+
-      ></stapps-external-link>
+<stapps-simple-card
-    </ion-card-content>
+  *ngIf="!item.sameAs"
-  </ion-card>
+  [title]="'name' | propertyNameTranslate : item | sentencecase"
-}
+  [content]="'name' | thingTranslate : item"
-@if (!item.sameAs) {
+>
-  <stapps-simple-card
+</stapps-simple-card>
-    [title]="'name' | propertyNameTranslate: item | sentencecase"
+
-    [content]="'name' | thingTranslate: item"
+<stapps-simple-card
-  >
+  *ngIf="item.description"
-  </stapps-simple-card>
+  [title]="'hebisSearch.detail.description' | translate | sentencecase"
-}
+  [content]="item.description"
-@if (item.description) {
+></stapps-simple-card>
-  <stapps-simple-card
+
-    [title]="'hebisSearch.detail.description' | translate | sentencecase"
+<stapps-simple-card
-    [content]="item.description"
+  *ngIf="item.sourceOrganization"
-  ></stapps-simple-card>
+  [title]="'sourceOrganization' | propertyNameTranslate : item | sentencecase"
-}
+  [content]="item.sourceOrganization"
-@if (item.sourceOrganization) {
+></stapps-simple-card>
-  <stapps-simple-card
+
-    [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
+<ion-card *ngIf="item.authors && item.authors.length > 0">
-    [content]="item.sourceOrganization"
+  <ion-card-header>{{ 'authors' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
-  ></stapps-simple-card>
+  <ion-card-content>
-}
+    <ion-label *ngFor="let author of item.authors">{{ 'name' | thingTranslate : author }}</ion-label>
-@if (item.authors && item.authors.length > 0) {
+  </ion-card-content>
-  <ion-card>
+</ion-card>
-    <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+
-    <ion-card-content>
+<stapps-simple-card
-      @for (author of item.authors; track author) {
+  *ngIf="item.firstPublished && !item.lastPublished"
-        <ion-label>{{ 'name' | thingTranslate: author }}</ion-label>
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
-      }
+  [content]="item.firstPublished"
-    </ion-card-content>
+>
-  </ion-card>
+</stapps-simple-card>
-}
+
-@if (item.firstPublished && !item.lastPublished) {
+<stapps-simple-card
-  <stapps-simple-card
+  *ngIf="item.firstPublished && item.lastPublished"
-    [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
-    [content]="item.firstPublished"
+  [content]="[item.firstPublished, item.lastPublished] | join : ' - '"
-  >
+>
-  </stapps-simple-card>
+</stapps-simple-card>
-}
+
-@if (item.firstPublished && item.lastPublished) {
+<ion-card *ngIf="item.publications">
-  <stapps-simple-card
+  <ion-card-header>{{ 'publications' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
-    [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  <ion-card-content>
-    [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
+    <p *ngFor="let publication of item.publications">
-  >
+      {{ publication.locations | join : ', ' }} {{ publication.locations && publication.publisher ? ':' : ''
-  </stapps-simple-card>
+      }} {{ publication.publisher }}
-}
+    </p>
-@if (item.publications) {
+  </ion-card-content>
-  <ion-card>
+</ion-card>
-    <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+
-    <ion-card-content>
+<stapps-simple-card
-      @for (publication of item.publications; track publication) {
+  *ngIf="item.reference"
-        <p>
+  [title]="'reference' | propertyNameTranslate : item | sentencecase"
-          {{ publication.locations | join: ', ' }}
+  [content]="item.reference"
-          {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
+></stapps-simple-card>
-        </p>
+
-      }
+<stapps-simple-card
-    </ion-card-content>
+  *ngIf="item.isPartOf"
-  </ion-card>
+  [title]="'isPartOf' | propertyNameTranslate : item | sentencecase"
-}
+  [content]="item.isPartOf.name"
-@if (item.reference) {
+></stapps-simple-card>
-  <stapps-simple-card
+<ion-card *ngIf="item.categories">
-    [title]="'reference' | propertyNameTranslate: item | sentencecase"
+  <ion-card-header>{{ 'categories' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
-    [content]="item.reference"
+  <ion-card-content>
-  ></stapps-simple-card>
+    <ion-chip [color]="'primary'">
-}
+      <ion-icon [name]="item.type | dataIcon"></ion-icon>
-@if (item.isPartOf) {
+      <ion-label>{{ 'categories' | thingTranslate : item }}</ion-label>
-  <stapps-simple-card
+    </ion-chip>
-    [title]="'isPartOf' | propertyNameTranslate: item | sentencecase"
+  </ion-card-content>
-    [content]="item.isPartOf.name"
+</ion-card>
-  ></stapps-simple-card>
-}
-@if (item.categories) {
-  <ion-card>
-    <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
-    <ion-card-content>
-      <ion-chip [color]="'primary'">
-        <ion-icon [name]="item.type | dataIcon"></ion-icon>
-        <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
-      </ion-chip>
-    </ion-card-content>
-  </ion-card>
-}

frontend/app/src/app/modules/data/types/article/article-item.component.ts

@@ -22,7 +22,6 @@ import {DataListItemComponent} from '../../list/data-list-item.component';
 @Component({
   selector: 'stapps-article-item',
   templateUrl: 'article-list-item.html',
-  styleUrl: 'article-list-item.scss',
 })
 export class ArticleListItemComponent extends DataListItemComponent {
   /**

frontend/app/src/app/modules/data/types/article/article-list-item.html

@@ -1,32 +1,35 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-<ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
+<ion-grid>
-<p class="title-sub">
+  <ion-row>
-  @for (author of item.authors; track author) {
+    <ion-col>
-    {{ 'name' | thingTranslate: author }}
+      <h2 class="name">{{ 'name' | thingTranslate : item }}</h2>
-  }
+      <p>
-  @if (item.authors && item.authors && item.firstPublished) {
+        <ng-container *ngFor="let author of item.authors">
-    ,&nbsp;
+          {{ 'name' | thingTranslate : author }}</ng-container
-  }
+        ><ng-container *ngIf="item.authors && item.authors && item.firstPublished">,&nbsp;</ng-container>
-  @if (item.firstPublished && !item.lastPublished) {
+        <ng-container *ngIf="item.firstPublished && !item.lastPublished; else dateRange"
-    {{ item.firstPublished }}
+          >{{ item.firstPublished }}</ng-container
-  } @else {
+        ><ng-template #dateRange
-    @if (item.firstPublished && item.lastPublished) {
+          ><ng-container *ngIf="item.firstPublished && item.lastPublished"
-      {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+            >{{ [item.firstPublished, item.lastPublished] | join : ' - ' }}</ng-container
-    }
+          ></ng-template
-  }
+        >
-</p>
+      </p>
-<ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
+      <ion-note> {{ 'categories' | thingTranslate : item }} </ion-note>
+    </ion-col>
+  </ion-row>
+</ion-grid>

frontend/app/src/app/modules/data/types/article/article-list-item.scss

@@ -1,3 +0,0 @@
-p.title-sub {
-  white-space: unset;
-}

frontend/app/src/app/modules/data/types/book/book-detail-content.html

@@ -1,104 +1,91 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-@if (item.sameAs) {
+<ion-card *ngIf="item.sameAs">
-  <ion-card>
+  <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
-    <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
+  <ion-card-content>
-    <ion-card-content>
+    <stapps-external-link [text]="'name' | thingTranslate : item" [link]="item.sameAs"></stapps-external-link>
-      <stapps-external-link
+  </ion-card-content>
-        [text]="'name' | thingTranslate: item"
+</ion-card>
-        [link]="item.sameAs"
+
-      ></stapps-external-link>
+<stapps-simple-card
-    </ion-card-content>
+  *ngIf="!item.sameAs"
-  </ion-card>
+  [title]="'name' | propertyNameTranslate : item | sentencecase"
-}
+  [content]="'name' | thingTranslate : item"
-@if (!item.sameAs) {
+>
-  <stapps-simple-card
+</stapps-simple-card>
-    [title]="'name' | propertyNameTranslate: item | sentencecase"
+
-    [content]="'name' | thingTranslate: item"
+<stapps-simple-card
-  >
+  *ngIf="item.edition"
-  </stapps-simple-card>
+  [title]="'edition' | propertyNameTranslate : item | sentencecase"
-}
+  [content]="'edition' | thingTranslate : item"
-@if (item.edition) {
+>
-  <stapps-simple-card
+</stapps-simple-card>
-    [title]="'edition' | propertyNameTranslate: item | sentencecase"
+
-    [content]="'edition' | thingTranslate: item"
+<stapps-simple-card
-  >
+  *ngIf="item.description"
-  </stapps-simple-card>
+  [title]="'hebisSearch.detail.description' | translate | sentencecase"
-}
+  [content]="item.description"
-@if (item.description) {
+></stapps-simple-card>
-  <stapps-simple-card
+
-    [title]="'hebisSearch.detail.description' | translate | sentencecase"
+<stapps-simple-card
-    [content]="item.description"
+  *ngIf="item.sourceOrganization"
-  ></stapps-simple-card>
+  [title]="'sourceOrganization' | propertyNameTranslate : item | sentencecase"
-}
+  [content]="item.sourceOrganization"
-@if (item.sourceOrganization) {
+></stapps-simple-card>
-  <stapps-simple-card
+
-    [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
+<ion-card *ngIf="item.authors && item.authors.length > 0">
-    [content]="item.sourceOrganization"
+  <ion-card-header>{{ 'authors' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
-  ></stapps-simple-card>
+  <ion-card-content>
-}
+    <ion-label *ngFor="let author of item.authors">{{ 'name' | thingTranslate : author }}</ion-label>
-@if (item.authors && item.authors.length > 0) {
+  </ion-card-content>
-  <ion-card>
+</ion-card>
-    <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+
-    <ion-card-content>
+<stapps-simple-card
-      @for (author of item.authors; track author) {
+  *ngIf="item.ISBNs"
-        <ion-label>{{ 'name' | thingTranslate: author }}</ion-label>
+  [title]="'ISBNs' | propertyNameTranslate : item | sentencecase"
-      }
+  [content]="item.ISBNs"
-    </ion-card-content>
+>
-  </ion-card>
+</stapps-simple-card>
-}
+<stapps-simple-card
-@if (item.ISBNs) {
+  *ngIf="item.firstPublished && !item.lastPublished"
-  <stapps-simple-card [title]="'ISBNs' | propertyNameTranslate: item | sentencecase" [content]="item.ISBNs">
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
-  </stapps-simple-card>
+  [content]="item.firstPublished"
-}
+>
-@if (item.firstPublished && !item.lastPublished) {
+</stapps-simple-card>
-  <stapps-simple-card
+<stapps-simple-card
-    [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  *ngIf="item.firstPublished && item.lastPublished"
-    [content]="item.firstPublished"
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
-  >
+  [content]="[item.firstPublished, item.lastPublished] | join : ' - '"
-  </stapps-simple-card>
+>
-}
+</stapps-simple-card>
-@if (item.firstPublished && item.lastPublished) {
+<ion-card *ngIf="item.publications">
-  <stapps-simple-card
+  <ion-card-header>{{ 'publications' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
-    [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  <ion-card-content>
-    [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
+    <p *ngFor="let publication of item.publications">
-  >
+      {{ publication.locations | join : ', ' }} {{ publication.locations && publication.publisher ? ':' : ''
-  </stapps-simple-card>
+      }} {{ publication.publisher }}
-}
+    </p>
-@if (item.publications) {
+  </ion-card-content>
-  <ion-card>
+</ion-card>
-    <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+<ion-card *ngIf="item.categories">
-    <ion-card-content>
+  <ion-card-header>{{ 'categories' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
-      @for (publication of item.publications; track publication) {
+  <ion-card-content>
-        <p>
+    <ion-chip [color]="'primary'">
-          {{ publication.locations | join: ', ' }}
+      <ion-icon [name]="item.type | dataIcon"></ion-icon>
-          {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
+      <ion-label>{{ 'categories' | thingTranslate : item }}</ion-label>
-        </p>
+    </ion-chip>
-      }
+  </ion-card-content>
-    </ion-card-content>
+</ion-card>
-  </ion-card>
-}
-@if (item.categories) {
-  <ion-card>
-    <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
-    <ion-card-content>
-      <ion-chip [color]="'primary'">
-        <ion-icon [name]="item.type | dataIcon"></ion-icon>
-        <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
-      </ion-chip>
-    </ion-card-content>
-  </ion-card>
-}

frontend/app/src/app/modules/data/types/book/book-list-item.component.ts

@@ -22,7 +22,6 @@ import {DataListItemComponent} from '../../list/data-list-item.component';
 @Component({
   selector: 'stapps-book-list-item',
   templateUrl: 'book-list-item.html',
-  styleUrl: 'book-list-item.scss',
 })
 export class BookListItemComponent extends DataListItemComponent {
   /**

frontend/app/src/app/modules/data/types/book/book-list-item.html

@@ -1,32 +1,35 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-<ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
+<ion-grid>
-<p class="title-sub">
+  <ion-row>
-  @for (author of item.authors; track author) {
+    <ion-col>
-    {{ 'name' | thingTranslate: author }}
+      <h2 class="name">{{ 'name' | thingTranslate : item }}</h2>
-  }
+      <p>
-  @if (item.authors && item.authors && item.firstPublished) {
+        <ng-container *ngFor="let author of item.authors">
-    ,&nbsp;
+          {{ 'name' | thingTranslate : author }}</ng-container
-  }
+        ><ng-container *ngIf="item.authors && item.authors && item.firstPublished">,&nbsp;</ng-container>
-  @if (item.firstPublished && !item.lastPublished) {
+        <ng-container *ngIf="item.firstPublished && !item.lastPublished; else dateRange"
-    {{ item.firstPublished }}
+          >{{ item.firstPublished }}</ng-container
-  } @else {
+        ><ng-template #dateRange
-    @if (item.firstPublished && item.lastPublished) {
+          ><ng-container *ngIf="item.firstPublished && item.lastPublished"
-      {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+            >{{ [item.firstPublished, item.lastPublished] | join : ' - ' }}</ng-container
-    }
+          ></ng-template
-  }
+        >
-</p>
+      </p>
-<ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
+      <ion-note> {{ 'categories' | thingTranslate : item }} </ion-note>
+    </ion-col>
+  </ion-row>
+</ion-grid>

frontend/app/src/app/modules/data/types/book/book-list-item.scss

@@ -1,3 +0,0 @@
-p.title-sub {
-  white-space: unset;
-}

frontend/app/src/app/modules/data/types/catalog/catalog-detail-content.html

@@ -17,6 +17,6 @@
   id="simple-data-list"
   [items]="items"
   [singleType]="true"
-  [listHeader]="'type' | thingTranslate: item | titlecase"
+  [listHeader]="'type' | thingTranslate : item | titlecase"
   [emptyListMessage]="'catalog.detail.EMPTY_CATALOG' | translate"
 ></stapps-simple-data-list>

frontend/app/src/app/modules/data/types/catalog/catalog-list-item.html

@@ -2,10 +2,8 @@
   <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
-        <ion-label class="title"> {{ 'name' | thingTranslate: item }} </ion-label>
+        <ion-label class="title"> {{ 'name' | thingTranslate : item }} </ion-label>
-        @if (item.academicTerm) {
+        <p *ngIf="item.academicTerm" class="title-sub">{{ item.academicTerm.name }}</p>
-          <p class="title-sub">{{ item.academicTerm.name }}</p>
-        }
       </div>
     </ion-col>
   </ion-row>

frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.html

@@ -1,72 +1,66 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
-@if (isInCalendar | async) {
+<ng-container *ngIf="isInCalendar | async; else add">
   <ion-chip outline="true" color="success" (click)="removeFromCalendar()">
     <ion-icon name="event_available" [fill]="true"></ion-icon>
-    <ion-label>{{ 'chips.addEvent.addedToEvents' | translate }}</ion-label>
+    <ion-label>{{'chips.addEvent.addedToEvents' | translate}}</ion-label>
   </ion-chip>
-} @else {
+</ng-container>
+<ng-template #add>
   <ion-chip outline="true" color="primary" (click)="addToCalendar()">
     <ion-icon name="calendar_today"></ion-icon>
-    <ion-label>{{ 'chips.addEvent.addEvent' | translate }}</ion-label>
+    <ion-label>{{'chips.addEvent.addEvent' | translate}}</ion-label>
   </ion-chip>
-}
+</ng-template>
 <stapps-simple-card
-  title="{{ 'duration' | propertyNameTranslate: item | titlecase }}"
+  title="{{ 'duration' | propertyNameTranslate : item | titlecase }}"
-  [content]="[item.duration | amDuration: 'minutes']"
+  [content]="[item.duration | amDuration : 'minutes']"
 ></stapps-simple-card>
-@if (item.dates.length > 1) {
+<stapps-simple-card
+  *ngIf="item.dates.length > 1; else single_event"
+  title="{{ 'dates' | propertyNameTranslate : item | titlecase }}"
+  content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
+    item.dates[0] | amDateFormat : 'HH:mm ddd'
+  }} {{ 'data.chips.add_events.popover.UNTIL' | translate }} {{
+    item.dates[item.dates.length - 1] | amDateFormat : 'll'
+  }}"
+></stapps-simple-card>
+<ng-template #single_event>
   <stapps-simple-card
-    title="{{ 'dates' | propertyNameTranslate: item | titlecase }}"
+    title="{{ 'dates' | propertyNameTranslate : item | titlecase }}"
     content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
-      item.dates[0] | amDateFormat: 'HH:mm ddd'
+      item.dates[item.dates.length - 1] | amDateFormat : 'll, HH:mm'
-    }} {{ 'data.chips.add_events.popover.UNTIL' | translate }} {{
-      item.dates[item.dates.length - 1] | amDateFormat: 'll'
     }}"
   ></stapps-simple-card>
-} @else {
+</ng-template>
-  <stapps-simple-card
+<stapps-simple-card
-    title="{{ 'dates' | propertyNameTranslate: item | titlecase }}"
+  *ngIf="item.performers"
-    content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
+  [title]="'performers' | propertyNameTranslate : item | titlecase"
-      item.dates[item.dates.length - 1] | amDateFormat: 'll, HH:mm'
+  [content]="item.performers"
-    }}"
+></stapps-simple-card>
-  ></stapps-simple-card>
+<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
-}
-@if (item.performers) {
-  <stapps-simple-card
-    [title]="'performers' | propertyNameTranslate: item | titlecase"
-    [content]="item.performers"
-  ></stapps-simple-card>
-}
-@if (item.offers) {
-  <stapps-offers-detail [offers]="item.offers"></stapps-offers-detail>
-}
 <ion-card>
-  <ion-card-header> {{ 'event' | propertyNameTranslate: item | titlecase }} </ion-card-header>
+  <ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
   <ion-card-content>
     <stapps-data-list-item [item]="$any(item.event)"></stapps-data-list-item>
   </ion-card-content>
 </ion-card>
-@if (item.inPlace) {
+<ion-card *ngIf="item.inPlace">
-  <ion-card>
+  <ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
-    <ion-card-header> {{ 'inPlace' | propertyNameTranslate: item | titlecase }} </ion-card-header>
+  <ion-card-content>
-    <ion-card-content>
+    <stapps-data-list-item [item]="$any(item.inPlace)"></stapps-data-list-item>
-      <stapps-data-list-item [item]="$any(item.inPlace)"></stapps-data-list-item>
+  </ion-card-content>
-    </ion-card-content>
+</ion-card>
-  </ion-card>
+<stapps-map-widget *ngIf="item.inPlace && item.inPlace.geo" [place]="item.inPlace"></stapps-map-widget>
-}
-@if (item.inPlace && item.inPlace.geo) {
-  <stapps-map-widget [place]="item.inPlace"></stapps-map-widget>
-}

frontend/app/src/app/modules/data/types/date-series/date-series-list-item.html

@@ -1,48 +1,42 @@
 <!--
-~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2022 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
 <ion-grid>
   <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
-        <ion-label class="title">{{ 'event.name' | thingTranslate: item }}</ion-label>
+        <ion-label class="title">{{ 'event.name' | thingTranslate : item }}</ion-label>
         <p>
           <ion-icon name="calendar_today"></ion-icon>
-          @if (item.dates[0] && item.dates[item.dates.length - 1]) {
+          <span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">
-            <span>
+            <span *ngIf="item.repeatFrequency">
-              @if (item.repeatFrequency) {
+              {{ item.repeatFrequency | durationLocalized : true | sentencecase }}, {{ item.dates[0] |
-                <span>
+              dateFormat : 'weekday:long' }}
-                  {{ item.repeatFrequency | durationLocalized: true | sentencecase }},
-                  {{ item.dates[0] | dateFormat: 'weekday:long' }}
-                </span>
-              }
-              <span>
-                ({{ item.dates[0] | dateFormat }} - {{ item.dates[item.dates.length - 1] | dateFormat }})
-              </span>
             </span>
-          }
+            <span>
+              ({{ item.dates[0] | dateFormat }} - {{ item.dates[item.dates.length - 1] | dateFormat }})
+            </span>
+          </span>
         </p>
-        @if (item.event.type === 'academic event') {
+        <ion-note *ngIf="item.event.type === 'academic event'"
-          <ion-note>{{ 'categories' | thingTranslate: item.event | join: ', ' }}</ion-note>
+          >{{ 'categories' | thingTranslate : item.event | join : ', ' }}</ion-note
-        }
+        >
       </div>
     </ion-col>
     <ion-col width-20 text-right>
-      @if (item.offers) {
+      <stapps-offers-in-list *ngIf="item.offers" [offers]="item.offers"></stapps-offers-in-list>
-        <stapps-offers-in-list [offers]="item.offers"></stapps-offers-in-list>
-      }
     </ion-col>
   </ion-row>
 </ion-grid>

frontend/app/src/app/modules/data/types/dish/dish-characteristics.html

@@ -1,40 +1,41 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 <ion-note>
-  <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
+  <ng-container *ngIf="item.certifications">
-  @if (item.characteristics) {
+    <ng-container *ngFor="let cert of item.certifications">
-    @for (characteristic of 'characteristics' | thingTranslate: item; track characteristic) {
+      <abbr [title]="'description' | thingTranslate: cert">
+        <img
+          *ngIf="cert.compactImage"
+          [src]="'compactImage' | thingTranslate: cert"
+          height="16"
+          [alt]="'name' | thingTranslate: cert"
+        />
+      </abbr>
+    </ng-container>
+  </ng-container>
+  <div class="sep">•</div>
+  <ng-container *ngIf="item.characteristics">
+    <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
       <!-- Abbr tag shows the actual name on hover -->
       <abbr
         [style.--background-url]="'url(' + characteristic.image + ')'"
         [title]="characteristic.name | titlecase"
         class="mask-image"
       ></abbr>
-    }
+    </ng-container>
-  }
+  </ng-container>
-  @if (item.certifications) {
+  <div class="sep">•</div>
-    @for (cert of item.certifications; track cert) {
+  <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
-      @if (cert.compactImage) {
-        <abbr [title]="'description' | thingTranslate: cert">
-          <img
-            [src]="'compactImage' | thingTranslate: cert"
-            height="16"
-            [alt]="'name' | thingTranslate: cert"
-          />
-        </abbr>
-      }
-    }
-  }
 </ion-note>

frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss

@@ -12,22 +12,13 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-:host {
-  display: contents;
-}
-
 $size: 16px;
 
 ion-note {
   display: flex;
-  flex-flow: row wrap;
+  flex-direction: row-reverse;
-  gap: var(--spacing-xs) var(--spacing-sm);
+  align-items: center;
-  align-items: flex-start;
+  justify-content: flex-end;
-  justify-content: flex-start;
-
-  margin: inherit;
-  margin-right: inherit;
-  margin-block-end: inherit;
 
   list-style: none;
 }
@@ -50,5 +41,15 @@ abbr {
 }
 
 img {
+  height: 100%;
   background: var(--background-url);
 }
+
+.sep {
+  display: none;
+  margin-inline: var(--spacing-xs);
+}
+
+abbr + .sep {
+  display: revert;
+}

frontend/app/src/app/modules/data/types/dish/dish-detail-content.html

@@ -1,25 +1,24 @@
 <!--
-~ Copyright (C) 2023 StApps
+  ~ Copyright (C) 2023 StApps
-~ This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
+  ~ Software Foundation, version 3.
-~
+  ~
-~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-~ more details.
+  ~ more details.
-~
+  ~
-~ You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
+  -->
 
-<stapps-dish-characteristics [item]="item"></stapps-dish-characteristics>
+<stapps-dish-characteristics *ngIf="item.characteristics" [item]="item"></stapps-dish-characteristics>
-@if (item.offers) {
+<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
-  <stapps-offers-detail [offers]="item.offers"></stapps-offers-detail>
+<stapps-certifications-in-detail
-}
+  *ngIf="item.certifications"
-@if (item.certifications) {
+  [certifications]="item.certifications"
-  <stapps-certifications-in-detail [certifications]="item.certifications"></stapps-certifications-in-detail>
+></stapps-certifications-in-detail>
-}
 <!-- unwanted by swffm
 <ion-card *ngIf="item.nutrition">
   <ion-card-header>{{
@@ -40,43 +39,42 @@
           <span *ngIf="item.nutrition.saturatedFatContent"
             >({{ 'data.types.dish.detail.FAT_SATURATED' | translate }}:
             {{ item.nutrition.saturatedFatContent | numberLocalized }} g)</span
-            >
+          >
-          </ion-col>
+        </ion-col>
-        </ion-row>
+      </ion-row>
-        <ion-row *ngIf="item.nutrition.carbohydrateContent">
+      <ion-row *ngIf="item.nutrition.carbohydrateContent">
-          <ion-col
+        <ion-col
-            >{{ 'data.types.dish.detail.CARBOHYDRATE' | translate }}:</ion-col
+          >{{ 'data.types.dish.detail.CARBOHYDRATE' | translate }}:</ion-col
-            >
+        >
-            <ion-col width-20 text-right>
+        <ion-col width-20 text-right>
-              {{ item.nutrition.carbohydrateContent | numberLocalized }} g
+          {{ item.nutrition.carbohydrateContent | numberLocalized }} g
-              <span *ngIf="item.nutrition.sugarContent"
+          <span *ngIf="item.nutrition.sugarContent"
-                >({{ 'data.types.dish.detail.SUGAR' | translate }}:
+            >({{ 'data.types.dish.detail.SUGAR' | translate }}:
-                {{ item.nutrition.sugarContent | numberLocalized }} g)</span
+            {{ item.nutrition.sugarContent | numberLocalized }} g)</span
-                >
+          >
-              </ion-col>
+        </ion-col>
-            </ion-row>
+      </ion-row>
-            <ion-row *ngIf="item.nutrition.saltContent">
+      <ion-row *ngIf="item.nutrition.saltContent">
-              <ion-col>{{ 'data.types.dish.detail.SALT' | translate }}:</ion-col>
+        <ion-col>{{ 'data.types.dish.detail.SALT' | translate }}:</ion-col>
-              <ion-col width-20 text-right>
+        <ion-col width-20 text-right>
-                {{ item.nutrition.saltContent | numberLocalized }} g
+          {{ item.nutrition.saltContent | numberLocalized }} g
-              </ion-col>
+        </ion-col>
-            </ion-row>
+      </ion-row>
-            <ion-row *ngIf="item.nutrition.proteinContent">
+      <ion-row *ngIf="item.nutrition.proteinContent">
-              <ion-col>{{ 'data.types.dish.detail.PROTEIN' | translate }}:</ion-col>
+        <ion-col>{{ 'data.types.dish.detail.PROTEIN' | translate }}:</ion-col>
-              <ion-col width-20 text-right>
+        <ion-col width-20 text-right>
-                {{ item.nutrition.proteinContent | numberLocalized }} g
+          {{ item.nutrition.proteinContent | numberLocalized }} g
-              </ion-col>
+        </ion-col>
-            </ion-row>
+      </ion-row>
-          </ion-grid>
+    </ion-grid>
-        </ion-card-content>
+  </ion-card-content>
-      </ion-card>
+</ion-card>
-      -->
+-->
-@if (item.additives) {
+<stapps-simple-card
-  <stapps-simple-card
+  *ngIf="item.additives"
-    [title]="$any('additives' | propertyNameTranslate: item) | titlecase"
+  [title]="$any('additives' | propertyNameTranslate: item) | titlecase"
-    [content]="'additives' | thingTranslate: item | join: ', '"
+  [content]="'additives' | thingTranslate: item | join: ', '"
-  >
+>
-  </stapps-simple-card>
+</stapps-simple-card>
-}
 
 <stapps-rating [item]="item"></stapps-rating>