florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing Angular 21 by migrating all values by signals. (#11)
Some checks failed
Build and Deploy Java Gradle Application / build-and-deploy (push) Failing after 53s
Details

Browse Source
This commit was merged in pull request #11.
This commit is contained in:
Florian THIERRY - Takiguchi
2026-02-03 15:07:55 +01:00
parent 1ca2f872f7
commit 0cce8b2982
102 changed files with 4102 additions and 4852 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/app/components/publication-list/publication-list.component.html
View File

@@ -1,16 +1,16 @@
@for(publication of publications$ | async; track publication) {
<a [routerLink]="['/publications/' + publication.id]" class="publication">
<img src="/api/pictures/{{ publication.illustrationId }}"/>
<div class="body">
<h1>{{publication.title}}</h1>
<h2>{{publication.description}}</h2>
</div>
<div class="footer">
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
<span i18n>Publication posted by {{publication.author.name}}</span>
<span class="publication-date">
@for (publication of publications(); track publication.id) {
<a [routerLink]="['/publications/' + publication.id]" class="publication">
<img src="/api/pictures/{{ publication.illustrationId }}"/>
<div class="body">
<h1>{{ publication.title }}</h1>
<h2>{{ publication.description }}</h2>
</div>
<div class="footer">
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
<span i18n>Publication posted by {{ publication.author.name }}</span>
<span class="publication-date">
({{ publication.creationDate | date: 'short' }})
</span>
</div>
</a>
}
</div>
</a>
}

160
frontend/src/app/components/publication-list/publication-list.component.scss
View File

@@ -1,87 +1,87 @@
$cardBorderRadius: .5em;
:host {
display: flex;
flex-direction: column;
gap: 2em;
max-width: 50em;
width: 90%;
margin: auto;
.publication {
display: flex;
flex-direction: column;
gap: 2em;
max-width: 50em;
width: 90%;
margin: auto;
border-radius: $cardBorderRadius;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
transition: box-shadow .2s ease-in-out;
text-decoration: none;
color: black;
background-color: #ffffff;
.publication {
display: flex;
flex-direction: column;
border-radius: $cardBorderRadius;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
transition: box-shadow .2s ease-in-out;
text-decoration: none;
color: black;
background-color: #ffffff;
&:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.24),0 4px 14px 0 rgba(0,0,0,.16);
}
img {
object-fit: cover;
height: 15em;
border-radius: $cardBorderRadius $cardBorderRadius 0 0;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 20em;
}
@media screen and (min-width: 600px) {
height: 25em;
}
@media screen and (min-width: 750px) {
height: 32em;
}
}
.body {
display: flex;
flex-direction: column;
padding: 1.5em 2em;
h1 {
font-size: 1.8em;
margin-bottom: .5em;
}
h2 {
font-size: 1em;
line-height: 1.4em;
margin: 0;
color: #747373;
font-weight: 400;
}
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
background-color: #f0f0f0;
border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
padding: 1em 2em;
gap: 1em;
color: #6c757d;
img {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
&:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .24), 0 4px 14px 0 rgba(0, 0, 0, .16);
}
}
img {
object-fit: cover;
height: 15em;
border-radius: $cardBorderRadius $cardBorderRadius 0 0;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 20em;
}
@media screen and (min-width: 600px) {
height: 25em;
}
@media screen and (min-width: 750px) {
height: 32em;
}
}
.body {
display: flex;
flex-direction: column;
padding: 1.5em 2em;
h1 {
font-size: 1.8em;
margin-bottom: .5em;
}
h2 {
font-size: 1em;
line-height: 1.4em;
margin: 0;
color: #747373;
font-weight: 400;
}
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
background-color: #f0f0f0;
border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
padding: 1em 2em;
gap: 1em;
color: #6c757d;
img {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
}
}

24
frontend/src/app/components/publication-list/publication-list.component.ts
View File

@@ -1,17 +1,15 @@
import { Component, Input } from "@angular/core";
import { Publication } from "../../core/rest-services/publications/model/publication";
import { Observable } from "rxjs";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";
import { MatTooltipModule } from "@angular/material/tooltip";
import {Component, input} from "@angular/core";
import {Publication} from "../../core/rest-services/publications/model/publication";
import {CommonModule} from "@angular/common";
import {RouterModule} from "@angular/router";
import {MatTooltipModule} from "@angular/material/tooltip";
@Component({
selector: 'app-publication-list',
templateUrl: './publication-list.component.html',
styleUrl: './publication-list.component.scss',
imports: [CommonModule, RouterModule, MatTooltipModule]
selector: 'app-publication-list',
templateUrl: './publication-list.component.html',
styleUrl: './publication-list.component.scss',
imports: [CommonModule, RouterModule, MatTooltipModule]
})
export class PublicationListComponent {
@Input()
publications$!: Observable<Publication[]>;
}
publications = input.required<Publication[]>();
}