Skip to content

Commit

Permalink
Release 3.35.0
Browse files Browse the repository at this point in the history
  • Loading branch information
sleidig authored Apr 25, 2024
2 parents b53deb3 + 3455ddd commit 75ce0cc
Show file tree
Hide file tree
Showing 118 changed files with 5,624 additions and 1,450 deletions.
2 changes: 1 addition & 1 deletion build/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ RUN if [ "$SENTRY_AUTH_TOKEN" != "" ] ; then \

### PROD image

FROM nginx:1.25.4-alpine
FROM nginx:1.25.5-alpine
COPY ./build/default.conf /etc/nginx/templates/default.conf
COPY --from=builder /app/dist/ /usr/share/nginx/html
# The port on which the app will run in the Docker container
Expand Down
64 changes: 64 additions & 0 deletions doc/compodoc_sources/how-to-guides/create-custom-view.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# How to create a custom View Component
We aim to build flexible, reusable components.
If you implement a custom component using the building blocks of Aam Digital's platform, this can seamlessly be displayed both in modal forms and as a fullscreen view.

## Architecture & Generic wrapper components
The following architecture allows you to implement components that only have `@Input` properties
and do not access either Route or Dialog data directly.
Instead, the platform always uses `RoutedViewComponent` or `DialogViewComponent` to parse such context and pass it into your component as simple Angular @Inputs.

![](../../images/routed-views.png)

If you implement a special view to display a single entities' details, you should also extend `AbstractEntityDetailsComponent` with your component.
This takes care of loading the entity from the database, in case it is passed in as an id from the URL.

## Implementing a custom view Component

1. Create a new component class
2. Add any `@Input()` properties for values that are provided from the config.
3. For EntityDetails views, you get access to an `@Input() entity` and `@Input() entityConstructor` via the `AbstractEntityDetailsComponent` automatically. Otherwise, you do not have to extend from this.
4. Use `<app-view-title>` and `<app-view-actions>` in your template to wrap the elements (if any) that you want to display as a header and action buttons.
These parts are automatically placed differently in the layout depending on whether your component is display as a fullscreen, routed view (actions displayed top right) or as a dialog/modal (actions displayed fixed at bottom).
5. Register your component under a name (string) with the `ComponentRegistry` (usually we do this in one of the modules), so that it can be referenced under this string form the config.
6. You can then use it in config, as shown below.

Example template for a custom view component:
```html
<app-view-title>
<!-- the title is specially fixed and receives a back button or dialog close -->
My Entity {{ entity.name }}
</app-view-title>

<!-- anything in the template not specially marked/wrapped is used as main content -->
<div>
My Custom View Content
</div>

<app-view-actions>
<!-- some action buttons, e.g. using the app-dialog-buttons or anything else -->
<app-dialog-buttons [form]="form" [entity]="entity"></app-dialog-buttons>
</app-view-actions>
```

An example config for the above:
```json
{
"component": "MyView",
"config": { "showDescription": true }
}
```

Use the `ComponentRegistry` to register your component,
e.g. in its Module:
```javascript
export class MyModule {
constructor(components: ComponentRegistry) {
components.addAll([
[
"MyView", // this is the name to use in the config document
() => import("./my-view/my-view.component").then((c) => c.MyViewComponent),
],
]);
}
}
```
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ Those background details aside, what that means for your implementation is:
(e.g. `@Input() showDescription: boolean;`, which you can use in your template or code to adapt the component.)
These values are automatically set to whatever value is specified in the config object for your component at runtime in the database.
4. Register the new component in its parent module, so that it can be loaded under its name through the config.
(for details see [Create a custom View Component](./create-a-custom-view-component.html))

An example config for the above:
```json
Expand All @@ -29,18 +30,3 @@ An example config for the above:
"config": { "showDescription": true }
}
```

Use the `ComponentRegistry` to register your component,
e.g. in its Module:
```javascript
export class MyModule {
constructor(components: ComponentRegistry) {
components.addAll([
[
"MySubView", // this is the name to use in the config document
() => import("./my-sub-view/my-sub-view.component").then((c) => c.MySubViewComponent),
],
]);
}
}
```
4 changes: 4 additions & 0 deletions doc/compodoc_sources/summary.json
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,10 @@
"title": "Create a New Entity Type",
"file": "how-to-guides/create-new-entity-type.md"
},
{
"title": "Create a custom View Component",
"file": "how-to-guides/create-custom-view.md"
},
{
"title": "Create an Entity Details Panel",
"file": "how-to-guides/create-entity-details-panel.md"
Expand Down
Binary file added doc/images/routed-views.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
142 changes: 71 additions & 71 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,19 @@
"@casl/angular": "^8.2.3",
"@faker-js/faker": "^8.4.0",
"@fortawesome/angular-fontawesome": "^0.14.1",
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@ngneat/until-destroy": "^10.0.0",
"@sentry/browser": "^7.102.0",
"@sentry/browser": "^7.108.0",
"angulartics2": "^12.2.1",
"assert": "^2.1.0",
"crypto-es": "^2.1.0",
"deep-object-diff": "^1.1.9",
"hammerjs": "^2.0.8",
"json-query": "^2.2.2",
"keycloak-angular": "^15.1.0",
"keycloak-js": "^24.0.1",
"keycloak-js": "^24.0.2",
"leaflet": "^1.9.4",
"lodash-es": "^4.17.21",
"md5": "^2.3.0",
Expand Down
Loading

0 comments on commit 75ce0cc

Please sign in to comment.